Welcome to the design portion of the series where drawing from our wireframe we’ll produce the mockup for our website.
Now with such a simple layout we could probably get away with designing right in the browser – and this has its own set of advantages, but as a matter of practice, in this lesson we’re going to be working in Photoshop to digitize our wireframe and produce a web-ready mockup.
We start with the header area, formatting both the navigation and banner, before moving to the main section of the page where we construct both our primary content area, and sidebar. Then, we finish off our page with the footer, and save our mockup for use throughout the next portions of this series.