YoDaa - The Design Process

Yodaa is a San Jose based Web Design Agency that images brands through it’s creativity and simplicity. Yodaa works to build effective websites that help businesses meet their objectives, captivate the customers and improve the customer experience.

The goal for the redesign was to keep the site extremely simple and accessible, so our best bet was a single page site. Some key points on this design:

  • Single Page
  • Vibrant Colors
  • Depth in objects
  • Fully designed from scratch in Photoshop

In this article we wanted to walk you through the high level design process of the site. Here it goes:
We started with a simple blue gradient for the sky with some noise. Got a tree brush and added some layer styles to it. A few layers above it with noise and motion blur in different angles with a combination of different layer blending modes does it for the tree.

Got an illustrator brush for the rope and imported into photoshop. Added color and noise. Got clouds & the sun from our Weather Icon Set and the twitter bird here. Added leaves and the logo.

Extended the document vertically for the greenery. Simple shapes for the hills with some layer styles and noise. Duplicated and played with blur and alpha to get depth. Had to dodge/burn a few areas...

The wood on the grass is simple shape with color, noise and angular motion blur with a change in the layer blending mode. Then added the rope which is again a shape with combination of color and noise. Got the parachute here.

The old rug on the rope is a custom shape with a cloth pattern. Just some burn/dodge get you this output... Added a cut shadow on the white text to give a popping effect from the grass. Got the bird from here.

Now comes the cliff... this is again an odd shape with color smoke and vertical motion blur and noise.

Added cuts to the cliff manually by duplicating the cliff areas and burn/dodging them. Dodged the bottom of the cliff to give depth and added the portfolio (simple design).

Got to the second level of the cliff... This is again just green with noise & dodge/burn. The tied cloth is same as the old rug above. Added a faint dinosaur fossil behind... 

This completes our site design but oops! we forgot the resolution... this took a while cos we really didn't consider liquidity in the start. A lot of feathering and cloning was required here...

Woo.. and here goes the final design.

The HTML CSS conversion took around a day. Here you can find YoDaa LIVE.