Designing the homepage last

“If I were you, I’d leave the homepage design until last” fellow fffunctioneer Pete Coles once said. It puzzled me. I had always designed or wireframed the homepage before any other pages in every web project I had been involved in before I came to fffunction. I then realised there was a great potential in this way to proceed and I may have missed out on something.

The homepage is constantly evolving throughout the project (even if you try to stick to your sketches, wireframes or prototype). It’s also the page which tends to block the project the longest, because getting the look and feel right is a difficult part of the design process.

At fffunction, we use component guides (or pattern library) instead of pixel perfect mockups made in Photoshop or other design software. After sketching features and templates, we design and code elements (buttons, colour scheme, headers and paragraphs), modules (contact form, newsletter subscription, heroes) or even full pages. They can all be visualised in the browser and on different devices, giving a sense of interaction and layout.

For additional details about it, check out our article on Bristol Museum Labs about how we create a component guide. Although it require the designers to know HTML/CSS, component guides create a bridge towards a faster and more efficient back end development since most elements are already styled and coded.

As we don’t need the homepage to be signed off at the beginning, we can focus on important elements earlier in the process (pricing tables, product page call to action, timeline for your about page, contact forms) and therefore allocate time more efficiently. When we understand how the website will look and function, we can finally make an informed choice about the homepage.

So designing the homepage last can smooth your process, ease the pressure for your team and improve communication and feedback. What’s not to love?

Links

Myth #17: The homepage is your most important page

Things you must consider first before diving into Photoshop

It works also for development: Homepage Last

Article originally posted on fffunction blog.