8 months ago


34 The Principles of

34 The Principles of Beautiful Web Design Full Screen Backgrounds Figure 1.35. A full screen background at Swansea University’s site With the ability to responsively fill browsers with large images, websites are harnessing the power of vivid imagery like never before. Big, bold, beautiful photos fill the browser behind the content of a website, such as in the example shown in Figure 1.35 above, from Swansea University 27 , immediately inducing the wow factor. It’s true what they say: a picture is worth 1000 words. Flat Design Figure 1.36. An example of flat design 27

Layout and Composition 35 It seems like the more modern we become, the more we lean towards simplification. Less is more takes on a whole new life, with no frills, and no extras. Flat design seeks to refine web design to its simplest shapes and forms. Previously, web design has been about depth, adding gradients and rounded shadows to give a website a dimensional look. Now, depth is portrayed with sharp shadows, or a darker color. A popular example of this is the long shadow effect, which seeks to fool the eye with a shadow directed on one side of an object. Video Backgrounds Figure 1.37. Video backgrounds Another new development is the ability to play full-screen video backgrounds that respond to the size of your browser, with scripts such as fitvids.js 28 . You can also set a web video to autoplay when the page loads, such as in Doug Aitken’s The Source 29 site, as shown in Figure 1.37. The rest of the website content is overlaid over the video, just as it would be with a full-screen background image. 28 29

Layout and Design - In Easy Steps
Boot Camp
30 ways to create amazing web experiences on tablets
Download PDF -
How to build a department web site (starter pack) - University of ...
Visual Design for Library Websites - WebJunction
Responsive Email Design Guide - e-Dialog
The Complete Guide to a High Converting Website
Web Site Design & Usability Testing - HIPNet
PDF Specimen Booklet - Fontworks UK Ltd
to download our handy prepress guide - Peel Graphics Inc.