OUGD504 - Design For Web (1)

Link to Summer brief

Link to studio sessions

In the first studio session we did brain storms of the content we got over the summer brief and narrowed it down to what we wanted to include in our websites/what we could include in our websites.

After doing this, we were told that we had to have a minimum of five pages for the website.

I decided on the following five pages:

• Homepage
• History of type
• Hand drawn vs digital
• Anatomy of type
• Type videos

Link to web content research

Link to web standards research

I also began researching into website layouts to help decide the overall visual look of the pages.

Link to web layout research

After doing this & the following studio session I finally decided on a layout for each page and drew them out as scamps. For the web design session we needed 3 variations for the homepage, and then for the studio session we needed a storyboard of the website as a whole.

Homepage variations

Page scamps

For a more visual plan I started working on the homepage and what the visual elements were going to be. I want an overall minimal aesthetic, so just a plain white background with only the website title and navigation bar, which are all done to look like they are hand-drawn.
I started with the layout for the title as this is the main thing on the from page, and decided on the first design because it is the most balanced design in my opinion. None of the text is at too much of a small size.

I then used the same typeface to write the five headings for the navigation bar. I printed these out and hand drew them out. I wanted each to be individual and have their own style, so made an effort to differentiate the designs, while keeping them in a uniform look with the typeface they're based on.

Hand drawn type

To put it on the website these all need to be in a vector format, so I traced around them. I think it worked well, keeping the hand drawn look of them while looking computerised. 

Website title

Navigation buttons

I found that the titles for each page of the website were quite long so I changed the placings of the words to be more compact so they would fit along the bar and be at a more readable size.

Reformatted navigation buttons

I then took these into Illustrator and mocked up an idea for the home page to get a visual instead of a rough idea. I think overall it works quite well, but the navigation bar does seem quite cluttered so I might need to rethink this, especially because the hand-drawn designs on the lettering is quite small, so I can't make them too small otherwise it won't be easily visible.