You Are Reading

OUGD501 - Theory Into Practice: Designing The Home Page

I opened up Fireworks, and made the document 1024x1675. As the fold of a website is 600/640ox, I calculated the hero banner and three trend icons to be within that. The rest is calculated for the content and form on the home page.
I wanted a hero banner at the top because this is one of the 2014 trends, so is relevant to the topic.


First I started with taking the trend icons into the document, and making them fit into the space I allocated them.


 First I tried having white text as a header, but it didn't stand out much.


Then I added more structured headings which worked better.


I already came across a problem when trying to pick a neutral colour for the rest of the site, because everything clashed with the other colours.
I tried several neutral greys.






I decided that this wasn't going to work - so I removed the background of them. This looks a lot more cleaner than before, and works better with the colour scheme. Less distracting.


I added the menu icon.


I also started working on the next section, which would have more of an introduction about the website.


I thought I would start using the icons I had made for the header. At first I thought they looked too big.


I moved them more to the edge to see if this made the question more the focus.


I then thought about having a coloured background behind each trend icon to see if this made it seem more contained.


I didn't like this however, and instead I made boxes around the icons. I wanted them to look more like buttons. I haven't quite got there yet.


I made the icons smaller. This is how it looks at the moment.


I also thought about adding icons on, like I had drawn so that people had a choice of things to do with each trend. But I decided against this, as it didn't fit in with the design I have done now.


Here are the icons in the bubbles. I think if I didn't have the icon pattern in the hero banner, it wouldn't look as busy.


I then added a heading to the trend icons, so that people knew what they were.


I made the icons smaller here, and I changed the trend heading.


I thought if I added Explore, people would know to click on the buttons.


I also tried it with these versions.


I changed the colours of the icons to the colour scheme of the trends that they relate to. I chose the lightest shade of the scheme so that they stand out against the dark background.


I thought when the user hovers over the link, what would it look like? I tried just having a grey outline, but I didn't like this.


I also tried reversing the colour scheme, but I think it stands out more with a dark grey background.


For the outcome section, I decided to have graph outlines in the trend colours to give more relevance. This would work well as a parallax scroll - one of 2014's trends.


I then started working on the navigation - the left fly out nav. At first I tried the type starting beneath the menu icon.


Then I tried it at the top, but this looks too cluttered.


I then arranged the content around this - meaning it would responsive around the navigation. I think this is cleaner - the user could even choose to keep it open.


When the user hovers over a link, the background would change to that trend colour.


I didn't like how the nav was lighter than the grey used in the content, so I made some alterations and made them both darker. I think this looks a lot cleaner.


These are the colours used when the user hovers over them.




This is how it looks with the new grey.


I also changed the background of the menu icon to a dark grey - this makes it stand out against the pattern more which was a problem, and is the same colour as the rest of the nav.


I also thought when the user hovers over these links, they will also change colour to that trend, keeping it consistent.


I then made the font smaller - the same size as the links on the trend icons.


I think this looks a lot cleaner.


I then started working on the overview for the home page. I decided to change the title, so it is more relevant to accessibility and usability. I did a brief synopsis of web trends and the advancements.


I tidied up the form at the bottom, and made sure it was all aligned correctly, and changed to title to Join the Debate.


I added a footer with copyright on it.


When you submit the form this is what it will look like:








Comments for this entry

Leave your comment

 

Copyright 2010. All rights reserved.

RSS Feed. This blog is proudly powered by Blogger and uses Modern Clix, a theme by Rodrigo Galindez. Modern Clix blogger template by Introblogger.