The design usually starts with a logo and brand standards. We then identify the persistent elements. Persistent elements are the elements that never change no matter where you are on the site. We also identify the primary and secondary colors, fonts, font sizes and weights, and where and how we will use them. After identifying all these, we can start coming up with the site’s hierarchy. For example, say we have identified the four colors in the image above as the only four colors that the site will use. We will then make a determination that all page titles/headers will be in blue. All ‘Call to Action buttons (Buy Now, Reserve, Book Now…) will be in green, all content links (secondary to Call to Action buttons) will be orange, and all important notices/announcements such as sale end dates or sale prices will be in red. This ensures that content is formatted consistently throughout the site and starts to set a hierarchy amongst the content. We then do a similar exercise for the font sizes and weights. Ie. All sale prices are bold or font-weight:600. All Call to Action buttons are Uppercase, and all page titles/headers use the same size and weight.
During this phase, we are also determining the site’s layout based on the page elements identified. For example, if you have a simple website that just needs a welcome message, a photo, and contact information, then we might design a single column layout. However, if your homepage needs to display upcoming events, a special/promotion, a testimonial/review, a photo gallery or a video, as well as contact information and an email sign up, then we are going to design a layout that might be two to three columns across and two or more rows of content.
Once the design is complete and you, the client, has approved it, we move the project into the development phase.