The first step in the website mockup phase is to design a style guide. It doesn’t have to be super fancy, it just serves as a way for you to see how website elements, such as typography, colors, buttons etc. come together on a web page. If you would like more information on style guides, read the article.
The font that I’ll be using for the main body text, is “Proxima Nova“. I would describe it as classy and clean. If you’re an Adobe Creative Cloud subscriber, Proxima Nova is available to be synced to your computer via Typekit. If you’re not an Adobe CC subscriber, a good substitute for this font would is “Montserrat” via Google fonts.
Now that we have our style guide created, we can now setup our document grid. The grid we’ll be using is called the 960 grid system. It’s a free photoshop action that’s available for download on their website. I’m going to use the “12 column grid”.
Group Your Layers
Also, be sure to create layer groups for each section as you go. This makes it a lot easier to find elements in the document. It’s also in good practice to be organized when making designs with many layers.
Now, watch the full video to see how it all comes together!