Web Design: Making Some More Assets

As I was having some trouble with sliders I decided to make some different home screens for my site.

They are quite simple. and there are some scaling issues on some dimensions of browser yet I hope that they will look good enough when they are all pieced together.

The figure is meant to be me doing the different activities that are part of the sections.

artwork photography projects

Advertisements

Web Design: Starting the Site

Next is choosing what the site is going to look like.

One of the first things I picked out were some fonts, as I was going with a puppetry theme I chose the typeface Rye. It seems inspired by the circus and is on Google fonts, so it will work with any computer. Next I chose the font Poiret One for other headers. To me, it seems quite an elegant font. I used Comfortaa for the paragraph information as it is quite a simple yet fun font.

After picking the fonts I decided on how the background would work. I am going to try my best to make the site responsive. Using a javascript command onload:resize is going to help with this as that means the browser will reload and resize whenever the browser size is changed.

The overall look of my site is going to be quite simple with one main box that resizes on different screens. This will then act as a sort of light box for my work. I’m going to look into using some JQuery sliders or slideshows to achieve this.

 

Here’s what the front page looks like so far.

 

website

Portfolio Website: Arranging Content

With my border placement decided, I could finalize how the content would be arranged I tried out a few sketches on Photoshop to see what they would look like.

Image

I played around with the orignal idea of having seperate boxes for each catagory, but for the reasons outlined above, I decided not to do so. However experimenting with a black baground with white and areas of colours seemed an interesting area to look into.

Image

Here is another test I did this time with a textured background of wool.I think the texture was a bit too much but I still like the white and colour on black.

.Image

Another test I did was using a black shilouette of an icon on white. Although this test does not really show what the finished effect would look like, I don’t think the areas of white let the icon stand out as much as I’d like it to.

Web Portfolio: Making Assets

Next, I decided to play around with background textures and and border designs to help me try and figure out the overall look of the website, then I could finalize how the content would look.

As my inspiration came from shadow puppetry and paper craft I decided to look at using paper textures for a background. Here is a free one I found online, but I would prefer to make my own if I have time. I decided to go with rice paper as the texture is a bit more complicated than just cartidge paper.

Image

The next thing to decide was what to use for my borders. I wanted to draw a lace like design but it was taking up a lot of time the results weren’t very effective. Instead I decided to cheat and edit some photographs I took of the detail of some lace lining a pocket of one of my jackets.

Image

By cutting and pasting and playing with the contrast and colours I was able to make a border design like so.

Image

This looks a lot better than the outcomes I gained when hand drawing the lace. I also played around with shading some of the border to make it more dynamic.

Portfolio Website: Starting Sketches

After researching inspiration from other sources for the visual theme of my website and how it would work, I decided to start roughly sketching some layouts out on Photoshop. Most of these pictures are very rough and quick outlines of how I envisioned things would look.

Image

My initial thoughts on a layout were something like this. The black areas are borders and the white space inbetween would be where content could go. The content would be pictures used to represent different parts of my portfolio, for example photography, university projects and programming projects. There would be a header with a title and tabs for other content, such as an about page and an email form at the top. The footer would contain links to my blog and twitter. I also planned this design to be extendable as so.

Image

The design would be extended by adding more boxes within the borders, to code this in the website the side bars and top bars would be different content to the main portion.

Image

Image

However this seemed to be quite complicated for quite a simple problem. Also this design had quite a few glaring errors. What if I had an odd number of catagories for content? How would this design look on a non landscape format such as a mobile phone?

I decided that getting some assets to use first, such as background and border designs, might help me finalize how I would want my website to look. Then I could arrange content.

Inspiration: Other Websites

Looking at other websites in also a great source of inspiration. Here are a few that caught my eye and that I would like to take inspiration from.

http://www.weberica.net/

Image

This portfolio website is quite basic and simple yet what drew me was the border design, which mixes visual complexity with very simple coding. However one of the downsides of this site is that the design is not continued in  the main body of the website or through the text, which I feel really lets it down.

http://www.patrontequila.com/bottle/Gran+Patron+Piedra

Image

I work as a bartender, and part of my job is learning about our products. I find a lot of sites for alcohol are quite interesting from a design point of view. In this site for Patron tequilas, the product image and text change depending on what you click on the left hand side. This is quite a logical and innovative way of organising visual information away from the “image at the top, text at the bottom” default. It manages to place the product in the centre of the visual space without detracting from the text.

http://www.davnavodka.com/home.html

Image

Davna Cherry Vodka also has a site that I found interesting. A sense of fun is created through animation and type, playing on stereotypes and heritage. Hovering over different parts of the page triggers different animations. However I find the music on this site very intrusive and seems to date the site somewhat.

http://www.teoskaffa.com/

Image

Image

Although most of this portfolio website is quite standard and basic, what makes it stand out is the design of the lightbox. Whilst on the page, the cursor is changed to a cat (a major theme in this illustrator’s work.) Hovering over an image enlarges it by piecing it together using a tile effect, almost like a jigsaw. Although this can be a bit heavy processing wise, making the webiste slow ,I find it a more ‘fun’ approach to lightbox design.

Web Portfolio: Inspiration: Moodboard

The final project of my first term is to build a personal website portfolio. To begin I looked at some graphic design and aesthetic styles that inspired me. Here is a mood board of images found online from which I have taken visual inspiration.

lace1

Clothing design and dressmaking has always attracted me. I chose to look at lace to represent this. I also like the delicacy and femininity of the patterns in lace, I would like to utilize this in perhaps a border or divider design.

papercraft1 shadow shadowPuppet2 shadowart

Another area I am really interested in in shadow art and paper craft. I feel this would work well as a way to layer visual information, creating a 3D space within the page. Also I could use shadow as a way to create detail and interest to the page. It would also be good to use a lot of textures, especially paper textures, to create the complexity in the page.

shadowPuppet1

This is an example of how I am visualising the layers to work, using different densities of form to create depth. Perhaps I could even make a Javascript animation to showcase this on the page.

The following images are from one of my favourite animated TV shows: Revolutionary Girl Utena.  In the promotional art and the graphic design for the show, areas of solid black and areas of textured colour are used to create dividers and borders between visual information and emphasise different areas of a form. This and the influence of art deco style I find are quite striking, if a little outdated.

utena4 utena utena3

I would like to use these techniques in the creation of my icons and borders, bold black outlines mixed with areas of textured colours.

aliceokami

I would also like to use quite a stylised look in the icons and for this i looked at the artwork from two games Okami and Alice: Madness Returns. Inspiration from the ink medium features heavily in these games, although in different ways, Alice takes more from the western style of crosshatching whilst Okami takes more from the eastern style of ink brush painting.

Looking at these images has given me a mental database from which to start designing. I find it really helpful as a starting point from which to start making my own ideas.