One Page Web Design Tutorial In Photoshop

Style Guides

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.

Using Grids

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!

Like this article?

I'm a Content Creator, Front-End Web Developer, UI Designer, based in Toronto, Canada. I have a healthy addiction to the internet, technology, and digital media. I'm so passionate about all things design and tech that I write about it any chance I get on my blog xopixel.com!

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.