How To Design A Clean Single Page Portfolio Website
Earlier this week I released a new template called Kazuko which is a single page portfolio template. In this article I’d like to show you how I designed the template in Photoshop (check out the Kazuko features page and the live demo).
Before we get into the details, let’s first consider what we need to include in such a design. I’ve discussed this before in a previous article (9 Essential Tips For Creating A Single Page Portfolio Website), but some of the key things you’ll want to incorporate are a section that includes some background information about yourself, details about the services you provide, examples of previous work/projects, and a means for people to get in touch with you.
Achieving this successfully without overloading users with information requires quite a bit of thought and effort. It’s imperative that no space is wasted and that only absolutely essential details are included in the design – keeping everything very clean and simple is of particular importance in single page designs.
Here’s a screenshot of Kazuko – the template that we’ll be creating:
Step 1: Create a New Document
Create a new document with a size of 1100×2000. Then add some vertical guides at 70px and 1030px – that gives us a width of 960px which should easily fit on most screens. Set the background color to #EEEEEE (a light grey).
Step 2: Add The Header
In the header we need to include the name of the portfolio owner and the job title/profession. To create the name use the Myriad Pro font, set the font size to 92px, and the color to #222222. Type your name and then add a drop shadow effect with the following values (set the color of the shadow to #CCCCCC):
Position your text against the left border – it should look like the following:
Next we need to add the job title – using the Myriad font again, set the font size to 34px and the color to #AAAAAA. Type some text and then position it against your right border.
Step 3: About Me
In this section we need to add an “About Me” and a “Get In Touch” section that includes some basic contact information. Start by creating a line below the header section – using the Line Tool, set the weight to 1px, the color to #CCCCCC, and draw a line from the left border to the right. Do the same again, but add a white line (#FFFFFF) and place it directly underneath the first line you created.
Now we need to create the “About Me” area – using the Rectangle Tool – set the color to #CCCCCC and draw a box that has dimensions of 154×154px. Then import a photo that is 146×146px in size and place it on top of the box you just created.
Now we need to add the details that go to the right of the photo – set the font to Arial, the font-size to 20px, and the color to #555555. Type “About Me” and align it towards the top of the photo. Next we need to put some dummy text under this title – keep the font as Arial, change the size to 12px, and type some text.
The last part of this section is to create the “Status” text – set the font size to 16px and type something like “Status: Taking On New Projects”. Set the color of “Status:” to #555555 and the text after that to #888888. You should end up with something like the following:
Step 4: Contact Information
The Contact Information will go to the right of the About Me section – we first need to create a vertical border to divide the two sections. So, using the Line Tool, set the color to #CCCCCC and draw a vertical line around 150px in height – do the same again, but this change the color to #FFFFFF and place it directly to the right of the first line you created. Position this line about 40px to the right of the About Me text:
To create the section title, use the Arial font, set the size to 20px, the color to #555555, and type “Get In Touch”. Underneath that we need to add some dummy text – set the font size to 12px and type some text. We then need to add our email address and phone number – set the font size to 16px and type “Email: your@email.com” and “Phone: 01234 567 890″. As with the status in the previous section, set the title (i.e. Phone and Email) colors to #555555 and the text after that to #888888.
Finally we need to create a border at the bottom of this section – create a copy of the horizontal lines you created at the start of step 3 and place them about 35px underneath the photo.
Step 5: Portfolio Screenshots
Now we need to create the portfolio screenshots/images – using the Rectangle Tool, set the color to #CCCCCC and draw a box that’s 310×210px in size. Copy this box five times – position them so that you end up with two lines of three boxes.
You then want to place some images/photos/screenshots inside the boxes – I’ve used some screenshots of the web templates available here at Voosh Themes, but use whatever is relevant to your portfolio. Ensure that the images you use are 300×200px in size.
Again, we need to place a border at the bottom of this section – create a copy of the line you created in step 3 and place it underneath the images you’ve added (as can seen in the screenshot above).
Step 6: Create A Services Section
To create the services section we firstly need to add a title – using the Arial font, set the font size to 20px and the color to #555555. Type something like “Services Available” and place it under the line border that you just added. Underneath this title we need to add a section for each service that includes a title and some details about that service.
To create the title, set the font to Arial, the text size to 16px, the color to #555555, and then write something like “Web Development”. I’ve also used a tick icon (search IconFinder for some tick icons) and placed it to the left of this text. Underneath that we need a few lines of dummy content – set the font size to 12px and type some text.
Create two copies of the tick, title, and text – and then place them next to each other. Then place a line border underneath the dummy text that you added – you should end up with something like the following:
Step 7: Testimonials
To create the testimonials we need to create an image with a border and place some text next to it. Select the Rectangle Tool, set the color to #CCCCCC, and create a box that’s 84×84px in size. Then, in a layer above the box, add an image that is 78×78px – this might be a photo of the person providing the testimonial or a company logo (or something else that’s relevant).
Next we need to place some text next to the photo – set font to Arial, the font size to 12px, and the color to #555555. Type a couple of lines of text – then underneath that enter the individual’s name and on a separate line add the name of their company/affiliation. Set the font weight of the name to “bold” – set the color of the company/affiliation to #035AA6 (with a font weight of “regular”).
We now need to create two copies of the photo and text and then place them underneath each other. Finally, we need to add a vertical line border like the one created in step 7 – however this time it needs to be larger (set the the height to around 360px). Place it to the right of the testimonials:
Step 8: Contact Me Form
To create the contact form we initially need to add the title – set the font to Arial, the size to 20px, and the color to #555555. Type the text “Contact Me” and place it to the right of the vertical border you just added. Underneath that we want to include a brief message, so change the font size to 12px, and write some text. You should have something like the following:
To create the first input field, select the Rectangle Tool, change the color to #FFFFFF, and draw a rectangle with dimensions of around 250×35px.
We then need to add some effects to this rectangle – start by adding a drop shadow with the following settings (where the color is set to #CCCCCC):
Then add a gradient overlay (where the colors you go from #EEEEEE to #FFFFFF):
Finally, add a stroke using these settings (where the color is #CCCCCC):
You should end up with something that looks like the following:
We now need to add some text in the box – so set the font size to 12px with a color of #888888 and type “Name”. Place this text inside the box. You’ll then want to make a copy of the rectangle and text to use for the “Email” input field – place these under the “Name” input box and change the text to “Email”.
Next, we need to add the larger text area – we do this in exactly the same way as above, but instead the box needs to be wider and higher – set the dimensions to something around 365×125px. Then apply the same drop shadow, gradient overlay, and stroke effects detailed above.
To finish we need to create the blue submit button – select the Rounded Rectangle Tool, set the “radius” to 6px, and draw a small button that’s around 100×30px in size.
We then need to apply a couple of effects – add a bevel and emboss effect using the settings below (where the color is set to #888888):
Then apply a gradient overlay using the following settings (using the colors #035AA6 and #1D89E7):
Finally, we need to add some text in the box – set the font to Myriad Pro, the size to 12px, the color to #EEEEEE, and write in uppercase “SEND MESSAGE”.
Step 9: Create The Footer
The final thing that we need to do is add the footer – this is very simple – copy the horizontal line border that we created in step 3 and place it just below the testimonials and contact form. Then, set the font to Arial, the size to 12px, and the color to #888888. Write something like “Copyright © 2010 / Steve Anderson / All Rights Reserved”.
Conclusion
I hope you found this tutorial useful – remember that you can check out the live demo if you want to take a closer look and download the template from the Kazuko features page.
