Voosh Themes

How To Design A Clean and Minimal Portfolio Website

In this post we’re going to look at how to design a clean and minimal portfolio website – in particular we’re going to build the front page of the Satoshi WordPress Theme which you can download for free.

Before we get started though I want to briefly touch on what makes a design “clean and minimal” – I’ve written about this before (Top 25 Clean and Minimal Web Designs), but it’s useful to revisit here.

This type of design style is often focused on including only what’s absolutely essential (a good tip for all web design) – you’ll also typically see lots of whitespace used along with some nice typography (often large text with a strong contrast between the background and text color). A single plain color is regularly used for the background of such designs – not bright gradients with different patterns.

Creating a clean and minimal design can be a difficult thing to master – if you make things too minimal you can end up with a very bare looking design that lacks substance. However, if you can get the balance right you’ll have a design that looks both classy and professional.

This tutorial demonstrates that you don’t need to use lots of fancy effects and fonts to create a clean design – it can still look professional without overdoing things. Here’s a screenshot of the design we’ll be creating:

Step 1 – Create A New Document

Create a new document with a size of 1100×1100. Then add some vertical guides at 70px and 1030px – that gives us a width of 960px with some padding on either side. Also ensure that the color of the background layer is set to white.

Step 2 – Create The Header

There are two things that we need to create in the header – the logo (displayed on the left) and the subtitle (displayed on the right). Let’s create the logo first – start by adding a horizontal guide at around 125px – select the Myriad Pro font and set a size of 100px – make it bold.

Then select the Horizontal Type Tool and set the color of the text to #181818. Add the text “Satoshi” (or whatever you choose) and make the “o” in the middle red – the color used in this template is #9E1C1C. Following this, add a drop shadow using the settings below (make the color of the shadow #CCCCCC) and position the text on the horizontal guide you added previously.

For the subtitle (“clean ~ minimal ~ quality”) we want to use Myriad Pro again, but this time with a font size of 28 and a color of #888888. Add a drop shadow with the same settings used in the image above and then position the text to the right of the document.

Step 3 – Create The Navigation Area

To create the navigation area we firstly need to create a grey line from the left border to the right. Set the “weight” of the line to 2px and the color to #EEEEEE.

Once you’ve drawn the line you then need to create a copy of it and place it about 14px under the first line. Now we need to add the text between the lines – use Arial with a font size of 19px and set the color to #222222. Then, in uppercase, add the page names along with a “/” symbol between each of them.

For the “hover” color of a page link we’ll use the same red that we used in the “o” for the Satoshi logo – so set the “Home” text to a color of #9E1C1C. You should end up with something that looks like the following image:

Step 4 – Create The Tagline

With the tagline we’re again not going to do anything too fancy – instead we’re going to use large text with a strong contrast to the background to create a clean effect.

Under the navigation area write the text “We build clean and stylish websites … … with a focus on simplicity and design” using the Myriad Pro font. Add a line break between the two sets of three dots and ensure that the line-spacing for this text is set to 50px:

We want the text on the first line (which should be “We build clean and stylish websites …”) to be darker and larger than the text on the second line. Therefore, highlight this text and make the font size 50px and the color #181818. Also ensure that the font weight is set to bold.

Then highlight the second line of text (“… with a focus on simplicity and design”) and change the font size to 40px. Give it a font weight of “regular” and change the color to #BBBBBB. You should end up with something like the following:

Step 5 – Featured Project Section

For the featured project section there are a few different things we need to do. Firstly we need to add a heading – add the text “Featured Project” using the Myriad Pro font and make it 30px in size. Make sure that the color is #222222 and that the font weight is bold.

Then add an image under the heading that has dimensions of 450×275px – I’ve used a screenshot from the Saburo WordPress Theme, but you can use whatever is suitable for the site you’d like to build.

You should have something that looks like the following:

We now need to add the content for the featured section to the right of the image – create a subheading (I’ve used the text “Web Design and Full SEO Campaign”) using the Arial font with a size of 22px. Set the color to #222222 again and make the font weight “regular”.

Underneath that subheading we want an area where a description of the project can be added – to do this draw a textbox under the subheading and enter some dummy text. We again want to use Arial with a color of #555555 – set the font weight to “regular” and ensure that line spacing is 22px.

After you’ve completed this you should have something that looks like the following:

Next we need to create a button that the user can select to get further details about the project. To do this, use the Rounded Rectangle Tool to draw a button underneath the text. You’ll want to use a radius of about 10px.

After that add a drop shadow with the following settings:

Then add a gradient overlay using the colors #7b1818 and #9e1c1c.

Following this, add some white text (#FFFFFF) over the button – I’ve entered “View Project Details” in uppercase. To complete this section we need to create another copy of the line that was created in Step 3 for the navigation area and then place it at the bottom of the featured section.

After you’ve followed all of these steps you should have something that looks like the following image:

Step 6 – Latest Work & Footer

The next section that we need to work on is the “Latest Work” area where recent projects/work can be showcased. We initially need to add a header – place some text just below the featured project section using Arial with a font size of 22px (I’ve used the text “Latest Work”). Use the color #222222 and set the font weight to “bold”.

We then want to add some images to represent the different projects. I’ve taken screenshots from some of my WordPress Themes available on this site – but use whatever you want – this might be products you sell, websites you’ve built, design work you’ve done, or whatever is relevant.

Each image needs to have dimensions of 300×225px – underneath each image we want to add a title for the project – using the Arial font with a size of 14px add this just below the image (use black for the text color (#000000)). We then want to add some text underneath that title – draw a textbox and enter some dummy text – use the same font (Arial), but use a size of 12px. Also change the font color to #555555.

Repeat this for two more projects so that you have three in total. Then create another copy of the grey line you added in Step 3 and place it at the bottom of this section. You should end up with something like the following:

The final thing that needs to be done is the footer – all that we’re going to do for this is add some standard copyright text – use the Arial font with a size of 10px – set the color to #888888 – and then add some text along the lines of “Copyright © 2010 / Satoshi / All Rights Reserved”:

Final Result

Conclusion

Hopefully this tutorial demonstrates that you don’t necessarily need to use lots of fancy design elements to produce a clean looking template. Through the use of a couple of fonts and a few images it’s still possible to create a nice design. Remember that you can download the Satoshi WordPress Theme (which includes the source PSD) for free if you want to look at the template further.