Lighting in Web Design
Jun
A typical website only has one layer, content is flat as well as any images used. There is nothing wrong with this, in fact it is great for displaying content, providing the layout is good. However, the time has come where web designers have begun to experiment, trying various techniques to be different, to house their content in such a way that the reader stays that bit longer. One of these techniques is lighting. You may not know it but lighting can be powerful when it comes to web design. It can emphasise certain aspects, guide your eye to certain content and add depth to your design.
A Focus
I have collected four examples of headers that contain a focus, a part of the webpage that is emphasised slightly more than the rest. You will notice that each logo to the left is on top of a subtle radial gradient. With Tutorial9 we can clearly see the radial gradient positioned slightly above the logo. The glow not only attracts the eye but the shadowing on the mark and text adds depth, lifting the logo off the page. The tutsplus logos and creattica logo stick to the simple but effective subtle radial gradient. However, the CoreCSS logo is complemented with a reflection, suggesting a surface. This can also be used to create depth when used effectively.
Further examples of this effect
Controlling the Reader
Below are a couple of great examples of using light to control the order in which the person views the page.
Here, Blue Pearl’s design emphasises it’s logo but as the light and pattern continues along the header horizontally, the eye is also guided towards the ‘Graphic and Web Design Specialists’ text.
Probably the best example to demonstrate this effect. The colourful header and light rays guide the readers eye to the work below whilst almost hiding the navigation on the right. Not only does this showcase the work beautifully but it also puts emphasis on that part of the page. So, this is where you would put you best work.
