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:
Leave your comment