One Page Web Design Tutorial In Photoshop

In this week video, I will be showing you how to design a mockup for a one-page portfolio website in Adobe Photoshop. My personal portfolio website needs an update. I’m looking to design a website that’s minimalistic, sophisticated and clean.

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!

2 Comments

Leave a Reply

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

More On XO PIXEL