How To Design A Website In Photoshop

Designing a website mockup is a pretty straightforward process, but it can be intimidating if you’ve never done it before.  There are a lot of great tools out there today for designing for the web. From Adobe XD, to Sketch, to good old Photoshop.

In this tutorial, I’m attempting to give you an basic idea of what my process is like, so that if you’re interested in web design at all, you may be able to apply these ideas to your own workflow.

Now, I realize that in today’s world there are a lot of important considerations when it comes to UI/UX design.  I’m not overlooking things like mobile-friendliness and retina displays,  I’m just trying to give a basic, introductory look at how a desktop version of a website might be created or mocked up before sending it to a client.

Files:

• Download the PSD

Fonts Used:

• Restless Youth (Paid)
• Montserrat (Free)

Images Used:

• Cappuccino in the Making
• Passion Pour
• Barista pouring coffee