Are you a web designer trying to find new ways to make your designs stand out? Depth and realism adds a whole new dimension to a website and can really make it pop. Here are just some ways to add some depth to your next web design project.

3D look buttons

Flat buttons are ok, but if you really want a polished look, adding some gradient and shadow to the buttons on the page can make it look that much more professional.
To do this, make sure that you determine where the drop shadow of the button should be, relative to the supposed light source. If the light is coming from the right, your shadow needs to fall on the left. Embossing the text on the button will also add to the overall look.

Wrap-around ribbons

For added info on the bottom of a page (or the top) such as the Copyright, a ribbon is elegant and classic, and looks great on websites for crafters such as scrapbookers and artists. Give it a realistic feel by designing the ribbon so that it wraps around the page. Remember to place light and shadow in the appropriate areas, as well as using gradient to show the curve of the ribbon.

Draw inspiration from real life

Shadow and light are both integral to creating the illusion of realism so remember to use both where you can, especially shadows. When designing a website, try and imagine that you are looking at something real.  Get inspiration from things around you, such as the keys on your keyboard, the curve of your mouse, or the way the light hits your screen’s frame. Next, decide on the texture you want to use for each element of the site and use objects of the same texture for reference in how shadow and light works with them. An example would be that more glossy objects, like shiny plastic, reflect more light whereas objects with a matte texture like wood reflect hardly any light at all.

These are just some ways to add more depth and realism to a web design. Remember to not overdo any texture or technique, but to add to it where appropriate and where it will enhance the overall look of the website.

Need help with your web design? Contact WSI OMS.