For the second tutorial of this series, we decided to talk about websites. Websites can be quite tricky to present sometimes, due to their long page format that doesn’t usually fit the screen. To make sure the client, the tutor or your future employer understands what your website is about, you have to make sure you present it well.
To exemplify the best (and the worst!) practices of presenting a website, we decided to use one of Briefbox’s most popular briefs, “Splash page for a wedding planner”. Here is my approach to it:
I wanted my splash page to be simple and modern, combining text and photography in a very clean layout. Apart from the names and the date, everything is small, spaced out and balanced. To push away from the classic, full width photography with text on top, I used a portrait picture, balanced with the text on the right. To give it a special touch, I created a little hand drawn branch of leaves that contrasts with the serif type and the pictures. This same detail was used on the background to present the layout, linking it to the design. The first image focuses on the beginning of the page, whereas the second shows the full design. I’ve made sure there was a lot of padding and that the background was consistent but subtle, so the design stands out (again, with the help of a gentle drop shadow!).
I used the recommended submissions dimensions, 800x600px, that is the same as we use on Dribbble. Size and spacing is everything. Therefore, this is the first issue we’re going to talk about in this tutorial:
1. Poor use of space
You need to give space for the design to breathe. Presenting the design full width, as in the example above, might not be the best idea. It’s almost like there’s too much going on and you don’t know where to look first, especially when you have a page full of information. Think about it: when we look at a website on our screen, it is enclosed by the browser, that is then enclosed by the computer – everything is inside a box. So use your artboard to compose the presentation of your website, use a background, show where your design starts and where it ends. It will facilitate the understanding of the design and the attention to the details you dedicated so much time to create.
2. Lack of aesthetics
Since you are using a background to present the website, you have to make sure it is consistent with the layout. Don’t simply place your page on to a black, grey or gradient background. Because it doesn’t match the aesthetics of your design, the background becomes a feature of its own and distracts the viewer from the important information. Instead, use a colour that is present in your design, and maybe try to add an element from it (it could be an image, a texture, an illustration etc.), the same way I did with the branch of leaves.
3. Not adapting the design for various presentation purposes
Be it for a client, for your portfolio or for Briefbox itself, usually you have to present your design on a landscape format. Trying to fit a long web page on to this format is a mistake. The information becomes too small and it’s really hard to get a real grasp of the design. A better way of presenting the full design is breaking it down on to the artboard, as the second image of my approach shows. If you need, add the full page as a jpg or pdf attachment at the end, so the viewer, after getting the general look and feel of the website, can scroll down each section and analyse it in detail.
4. Over use of effects
There are a lot of website mockups, photograph based or 3D, that you can use to present your design. However, many of them have over the top features and effects that end up distracting (and overwhelming!) the viewer, such as this example we’ve carefully chosen for this tutorial (3d effect, perspective, wood texture, colour overlay… all a bit too much don’t you think?). So be selective. Find a mockup with only a few elements and make sure your design is still the main feature. And if you can’t find one, stick with the subtle background and the drop shadow, it always works!
If you want to find more good examples of website presentations, go to Dribbble – there are a lot of good ones! With all these tips and inspiration, why not try one of our website briefs and practice what you’ve learned? We’re looking forward to seeing your designs!
And stay in tune for our next tutorial!