Design and Code a Clean Portfolio Layout

Design and Code a Clean Portfolio Layout – Part 1



Difficulty: Intermediate


Pixelmator is an excellent tool for editing images, but can it be used for web design? In this two-part tutorial we are going to create our very own portfolio homepage. In part 1 we will create our design in Pixelmator. In part 2 we will take our Pixelmator design and turn it into a functioning webpage using HTML5 and CSS3. Let’s get started!

final small

Here is how the tutorial is split up:

A basic knowledge of Pixelmator is required to complete this tutorial. You should be comfortable working with layers, layer groups, guides, selections, text and the transformation tools.

Project Overview

Before beginning any design project it is important to set out our initial goals. Our aim is to create a portfolio design that communicates what we do, our skills and showcases our work. We want our design to have a clean, minimalistic and modern feel, no fancy graphics or animations, just good design. It is also vitally important that potential clients know how to contact us, therefore a contact form is essential, as well as links to our social sites such as twitter.

With our goals in place we can begin designing. Good design almost always begins with a pencil and paper. I like to start by defining what sections should be included globally through the whole site and on the homepage. This allows me to rate the importance of each section and determine their placement on the page. Generally sections of higher importance appear towards the top of the design.

Once we have our sections defined and an idea of precedence we can begin sketching our designs:

sketches small

Planning complete, Pixelmator time!

Step 1 - Document Size

Create a new Pixelmator document, I chose 1280 x 800 pixels. (File > New…)

Why this size? According to W3Schools, 99% of users are using screen resolutions of 1024 x 768 pixels and above. Knowing this, our design will be 1024 pixels wide, hopefully resulting in no horizontal scroll bars for the majority of users. Creating a larger document allows us to see our design as it we would appear in larger screen resolutions.

01 small

Step 2 - Guides

Let’s define our workable area and the position of our three columns. You will need to turn on the rulers (View > Show Rulers). To place a new guide, click and drag on a ruler to the desired position. Alternatively, download the [wpfilebase tag=file id=9 tpl=link] file with the rulers predefined.

02 small

Step 3 - The Header

In order to create contrast and draw the users eye, the header will consist of white text against a black background. This will instantly draw the users attention to areas of the page that we want, informing them of our name and what it is we do.

Using the Marquee Tool (M) create our black header 1024px by 300px, use the guides and remember to place it on its own layer. Grouping your layers as I have may also be a good idea. Towards the end of the tutorial there will be roughly 30 layers, it just makes the layers window more organized.

03a small

Create a green bar along the top of the header, 10px in height using the Marquee Tool (M), fill it with the colour (#8bbf36) (Edit > Fill...).

03b small

Using the Text Tool (T), Myriad Pro at 60pt with the color white, add our introductory text. This will act as our portfolios main header.

03c small

Underneath our main heading we need a sub heading explaining what it is we do. Use the same font and color as before but change the size to 36pt.

03d small

Highlight the important words using the colour (#8bbf36).

03e small

Step 4 - The Navigation

Our navigation will go just above the header and positioned on the right, nothing complicated, just simple clean text links.

I have chosen to include all the links in a single text layer for simplicity's sake. Add the navigational items now using the font Myriad Pro at 18pt with the color black.

04a small

When creating a design mockup such as this one it is always useful to show the various states of the application as the user interacts with it. As such, we will show how a link will appear when a user hovers over it.

Using the Marquee Tool (M), create a small rectangle just below one of the links 10px in height and fill it with the color black (Edit > Fill...).

04b small

Step 5 - Content Headings

Content is king, so lets start adding our awesome content! We have chosen to divide the main content area into three columns: About Me, My Skills and Contact Me.

With the Text Tool (T) add our column headings using the font Myriad Pro at 24pt with the colour black.

05a small

So that the content within each column aligns vertically we need to add a new guide. Drag your new horizontal guide to 420px.

05b small

Step 6 - About Me Column

The About Me column is just going to contain a brief description about ourselves and what services we offer. For now some dummy Lorem Ipsum text will do:

“Vestibulum id ligula porta felis euismod semper. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Praesent commodo cursus magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus.

Nullam quis risus eget urna mollis ornare vel eu leo. Sed posuere consectetur est at lobortis. Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla.”

Select the Text Tool (T), and drag a selection within the guides, this will define the text area. Paste in our dummy text with the font Myriad Pro at 14pt and the color (#333333).

06 small

Step 7 - My Skills Column

Under the My Skills heading we are going to create a simple chart displaying our skill levels. Pixelmator is going to be 100% because we’re awesome...

Using the Marquee Tool (M), make a selection of 288px by 32px. Fill it with the color (#8bbf36). Remember to keep creating those layers!

07a small

Duplicate the layer containing our first bar. Using the arrow keys and with the Shift key held, move the duplicated bar down, 4 key presses should do the job.

07b small

Repeat the process another four times so that we have a total of six bars.

07c small

Merge the bar layers, leaving one layer containing all six bars. With the Marquee Tool (M) chop the bars to various sizes, as shown below:

07d small

The more observant may have noticed that an extra guide has appeared. I think the pixel fairies have added that one for me! You may need to add yours at position 516px. This will be used to align the labels for our bar chart.

07e small

Using the Text Tool (T) add your labels. Font Myriad Pro, 14pt, white. 07f small