Continuing from our previous article on Where to Start & Getting Organised, this page will discuss the process of designing a website in PhotoShop.
Time to start designing
Open Photoshop
Document Size
The size of your website layout is a little less important than it used to be, as most websites are designed to be responsive and stretch and shrink depending on the screen they are being viewed on. I go off the average screen resolution being between 1280px & 1440px wide.
- I start my new document at 1100px X 1000px.
- I then add some guides right on the edges (turn on the rulers and drag a line on)
- Then increase the canvas size to 1400px wide to give me some white space to work with.
- The guides show me where to keep the main content inside.
Some people use grid systems to help them layout their design and keep spacing consistent like Bootstrap.
Organising Your Photoshop Layers
Like the folders on my computer mentioned earlier, I like having my Photoshop layer folders organised from the start as well. Generally I start with:
- Content
- Logo
- Menu
- Header
- Footer
- Background
Start with a logo/Font
If you will be selling your end design; choosing a font from Google Fonts is a good practice. This ensures the buyer will have access to the free font to use on their live website.
- Browse through the Google Fonts online library here.
- Select Custom Text to enter the name of your website. And “apply to all“.
- Now as you are browsing the fonts you can see exactly how it looks.
- Hit the plus sign to make a shortlist of fonts you like
- Download the fonts once you’re ready and install them on your computer.
- In your logo folder in Photoshop make a nice big text layer with your website Name, choose a neutral colour like dark grey.
- Open the Character tab and find those new fonts you just downloaded, select the best one or cycle through the rest of the fonts on your computer.
TIP: In Google fonts online they have suggested parings for each font. This is useful when you have a decorative title font and need something cleaner for the main text. Go to your chosen fonts page and on the bottom left you will see suggested pairings.
Add the main elements of the site
Add your menu text, some dummy content text from lipsum.com, basic footer text and side bar if you have one. Select a font for your headings and content text.
Some popular body text fonts are:
It’s at this point I usually add a photo where my main slider will go, this helps me select colours for the rest of the website.
Free Stock Photos
I have a full list of 24 sites offering images, photos and videos that are released free of copyrights under Creative Commons CC0 here. I usually find what I need on unsplash.com & Pixabay.com.
Designing
The different between a ok design and a professional one for me; comes down to font choice and spacing really. For example; these two layouts share the same colours, and text but the spacing and font sizes/weights really set them apart. “A” looks a lot more professional than “B”. So as you are working through your layouts pay special attention to giving your text room to breathe.
Design Order
I like to work on the home page first as its style usually contains a blog layout and shop product layout which makes creating the inside pages really fast later.
Refer to your “ideas” folder and any sites, and images you have saved as inspiration for your design. Look at your sketches and notes and just start trying ideas. Pay special attention to not “copying” anyone elses work, there’s a difference between being inspired and just copying. That being said there’s only so many ways you can layout a title and paragraph of text. The more unique your work the better chance you have of standing out from the crowd.
My Inspiration for my Pastel design
The copper tones, scrolly font, stationary, paint splatters, diagonal background, hexagons, they all triggered ideas for me.
The Sketch & Final Design
These above ideas all came together in what you see as the final design.
This Pastel design is for sale as both a Photoshop file & WordPress Theme.
Review your work
Once I get the layout to the point I’m happy with I save a JPG and send the file to my email, I look at it on my iPad and Phone and see how the colours are looking, does anything stand out as being wrong? I make some notes then have a break from it. Returning to look at the design again with fresh eyes after a few hours or the next day; you will be able to tidy up those final things you overlooked the first time.
If you have a trusted friend to send the file to for feedback you can do that too.
