Dublin.ie Homepage Redesign
A concept redesign for Dublin.ie. Part of a college project, Dublin.ie provides information and links to tourists, businesses and residents in Dublin.
Design
I began my redesign by sketching out some ideas on paper. Having done this I started to build a wireframe and organise the site architecture and decide how what site elements to include.
Once I had the wireframe worked out I began to mock up the site in full colour and with images and typography. I used Photoshop and Illustrator during this part of the project.
The original site was quite cluttered and presents a lot of information which is difficult to take in.
Although the site provided a lot of great information I thought that it would benefit from a simpler and more organised structure. I thought, that by applying some of the basic Gestalt principles, I could improve the layout and display the information on the site in a more accommodating way.
Wireframe with Bootstrap grid overlayed
My first decision was to scale back the amount of information offered on the home page. I looked at the information architecture of the page and tried to strip out all of the redundant information and links and keep the necessary content intact.
I kept the same basics of having a traditional header and footer. I chose to make the header opaque to make it appear more subtle and not clash as much with the full screen photography I used.
I thought that a better use of photography and engaging graphics would make the use of the site more interesting and rewarding. Also the blog on the site is not used regularly and so the amount of fresh content on the site is limited.
Home page
Home page when user hovers over a main menu item
Home page when a user hovers over the News box
Home page when the user hovers over the Art & Culture box
Colour
I chose to use a very simple colour palate. The header and footer are both black (#000000). The header has an opacity of 90% to reduce the clash between it and the full page photo.
The logo is white (#ffffff) so that it stands out well. I used a light grey (#9e9e9e) for the main menu items which changes to white when a user hovers over or clicks them. This is again to make sure that the menu items don’t clash with photo or the logo.
The main image and the six boxes below the fold have an opaque black overlay set at 50% opacity. In addition to this the text on the six boxes is white set at an opacity of 70%. The social media buttons in the footer are also white
Typography
I used four different weights from one Google font family in my redesign, Work Sans Extra Light, Light, Thin and Semi Bold. I chose it because it thought its was a modern yet functional design.
I used Semi Bold for the inside page and the text on the six boxes, the Extra Light for the welcome, Thin for the footer and main menu.
Website mocked up on a tablet
Original site can be seen here