I wanted to use a colourful background that excited the user when they landed on it, this colour had to represent warmth, friendliness, caring, low cost, cheerful and creative. After doing a lot of research into different colours meanings, the ones most relevant ended up being - red, pink and orange. The tone I decided on has a bit of each of these in it.
Once you are on the site, I wanted it to feel contemporary and eye catching, all of the websites I had done research on had either white backgrounds or a drab colour, I wanted this one to stand out and so decided on using a black background with white text (and the occasional use of the peachy hue).
This is the 'home page' as the site is minimalistic, only featuring about and a feature on the current issue published, there is really no need for cluttered pages.
The about page is very simplistic and will feature a small paragraph about the Independents. All of the pages except the home one will have a header featuring the main pages, with the smaller logo to the right, this is in a different position to the initial wireframes in order to give the content more space on the page.
The cities page will feature all the volumes published, so far only the Leeds one, there will be a photo of the book. The button underneath allows the user to view the featured leeds page below.
The featured Leeds page will show a small selection of Independents that are featured in the publication. It gives the user a taste for what to expect if they manage to pick up a copy of the printed version.
Above is an example of what you will see if you click on one of the featured businesses, each will have their own page including the information that the book holds.
I added a contact page button, as well as social media links at the bottom right of the pages.
I simple image traced the social media logos in Illustrator and changed the colour to match the peach shade I had been using.
I added in the about paragraph.
As well as adding in some contact details.
At the point of making this website design, the publication is still in the process of being made, so I decided to just use a mock up of the front cover for this specific page.
I added in the photographs and names of the independents, it was a struggle to get the layout right as all of the images are different dimensions, I didn't want to alter them as you wouldn't then be able to see the whole photograph.
I experimented with using both black and white text to go over the photographs in these pages, but decided on white, making them legible by turning up the transparency on the images. The layout on these pages differs from the wireframes, I changed it so the header felt more of a header and let the businesses have the page to themselves, the independents logo is smaller in the top left, allowing for the photographs to flood the whole page.
The only difference in the pages above to the ones just before, is the addition of 'next' and 'previous' buttons, I realised if you got onto these feature pages, you'd have to go back to cities, then discover more, then click on another just to see the next. The flow is a lot better with those options there, you can flick through them all. I also adjusted the setting of the logo on the home page, as there was a slight difference to the landing page, you notice as you go from one to the other. The next step was to go into prototype mode on Adobe XD and get all the links ready to go, below is the finished prototype in video form, clicking through the web design.
No comments:
Post a Comment