Design web templates from photo backgrounds

13 Fonts

Try to only use two or three fonts in total. If there are more, then it would be like multiple voices fighting for your attention and the message is lost. Use a louder font for the headers, a sans-serif font for the body text and a slightly playful font for features. Colour can also be employed to add emphasis.

14 Navigation bar

Regard the navigation bar as the backbone of a website. Its most important function is the ease of use and accessibility. This can be optimised through logical categorisation and hierarchy of information. The main goal is to land the user on the desired page with the least number of clicks.

15 Add sidebar content

Most blogs have a sidebar that gives quick access to archives, blogrolls, etc. Add one to yours by using the dividing line sketch rotated to vertical, and use the same backgrounds for headings. Define the colour of the links and render your link text in this colour to see how the site will look.

16 Beach canvas

When designing a background, always consider how it looks with the whole design. Think of it as the stage for the content to comfortably rest on. We created a sand-inspired canvas to convey the feeling of a beach vacation. Also, its subdued colours are a nice complement to the vivid colours of the banner.

17 Background

To achieve the background texture, we created a gradient, overlaid a sand texture image and added a vector mask. Here, we applied a black-and-white gradient for a nice disappearing effect on the sand image. The sand texture was kept as only a portion of the background, as otherwise it would be too busy.

18 Icon illustrations

Icon illustrations are effective because they are simple, recognisable and add a fun visual rhythm. It is important not to add too much detail because it will be lost when the icon size is reduced. In order to ensure readability, only use simple, clean shapes that truly represent the object. Here, less is more.

Pages: 1 2 3 4