Create A Minimal Portfolio Site Design (Plus a Free PSD!)

In this design tutorial, we’re going to create the clean, minimal portfolio design “Minimal”, available on ThemeForest as a WordPress or HTML theme. We’ll also discuss the reasons why it works so well, and how you can create your own personal customization from the template.

Check out the end of the post for 3 sweet modifications of this template; the source files are on the house!

About the Author: Curt Ziegler, also known as Cudazi, is a web designer specializing in WordPress theme development with 10 years of design experience, a number of highly successful products and over 6000 sales at ThemeForest! You can also find more of his work at cudazi.com.

Released one year ago, the Minimal theme design has sold nearly 1000 combined times, and helped pave the way for many other minimalist template designs. This template will walk you through how to create the design yourself, but more importantly, we’ll also be discussing why it works. Once we’re done, we hope you’ll be able to create your own version of this sleek, professional design using your own style, fonts and colors!

Tutorial Details

• Program: Adobe Photoshop
• Difficulty: Beginner
• Estimated Completion Time: 1 Hour

Step 1

Begin by creating a new document in Photoshop 1020px x 1020px. Be sure your resolution is set to 72 pixels/inch and your background is set to white. We need to unlock the background layer so we can add some layer styles, right click the background and select “Layer from background”. You can then rename the layer back to background.

Step 2

Add a touch of gray at the top of the page by double clicking on the new background layer and selecting Gradient Overlay from layer styles. Just a quick note, you can always go to the Layers menu and select the layer style instead of double clicking on the layer.

Set the opacity to 5% and use a linear gradient of -90 degrees.

Click once on the gradient to open the gradient editor and set up two points:

• Black – #000000 at the location of 0% (this should be set by default)
• White – #FFFFFF at the location of 11%

Click OK in the gradient editor and layer style windows to apply the gradient to the background layer. You should now see a slight darkening at the top of the page.

Step 3

On sites with a very light or simple background, I like to add an element letting the user know they’ve returned to the very top of a page. In the case of this design, it is a 3 pixel line the width of the content area with a light line extending the rest of the way across the header.

When adding lines and shapes, I like to use Photoshop’s vector shapes tools. Unless noted otherwise, assume below that all lines and rectangles are created using this method. As with any tutorial, there are multiple ways to accomplish the same thing so feel free to use what you’re most familiar with.

Select the rectangle tool from the Vector Shapes area of the toolbar:

Draw a rectangle across the entire 1020px width of the page and 3px tall. Double click on the colored thumbnail in the layers panel to set the color to #DFDFDF. Move the rectangle to the very top of the page.

Step 4

At 940px wide, a second rectangle will match the width of our page content, let’s set some guides on the page to help us align everything evenly.

Go to View > New Guide…

Select Vertical and set the value to 40px.

Add another vertical guide at 980px. This creates a 940px area in the center for our content.

Step 5

Add a second rectangle on the layer above your previous one 940px wide and 3px tall. Double click on the colored thumbnail in the layers panel to set the color to #333333.

Move the second rectangle between the guides you created and slide it to the top of the page.

Step 6

Just a bit of cleanup to stay organized, move the two header lines into their own folder.

Step 7

It’s time to create the logo, which is a combination of two rectangles and white text. We will build it piece by piece and then move it into place once it’s complete.

The logo is the top point of our inverted pyramid design, where most people’s eyes will start when visiting this page before tapering down into the lower areas of the site.

Start by creating a rectangle 222px wide by 82px tall. Double click on the colored thumbnail in the layers and set the color to #333333.

Create a second rectangle 14px x 14px and place it in the lower right corner of your previous rectangle. Set the color to #FFFFFF. This will create a notched out effect of the rectangle without having to edit any shapes.

(If you do not see the “notch” check that your second rectangle is placed above your first in the layers panel)

Step 8

Add text to the inside of the shapes you just created. For this demo the text says: minimal.

Depending on your text used, you may need to adjust the sizes to fit properly.

• Font: Arial
• Size: 42pt
• Tracking: -20
• Weight: Bold
• Color: #FFFFFF

Step 9

Move all three layers of the logo you created into their own folder titled Logo. This will allow us to place it on the page much easier.

The logo should be 40px from the bottom of the header lines we created above. If you remember, they were 3px tall, so we need to add a new horizontal guide at 43px. Go to View > New Guide and set it to horizontal with a position of 43px. Set another guide at 125px which will align with the bottom of the logo.

Step 10

Move the logo, aligning the top of with the new guide you created above and centered on the page. Now we can move onto creating the menu.

Step 11

The menu is created with two horizontal lines and text centered across the page 40px below the bottom of the logo.

Add a horizontal guide at 165px, this will be the top of our menu. Create another horizontal guide at 209px to align with the bottom of the menu.

Start by creating a line centered between the main content guides 940px wide and 1px tall. Set the color to #AFAFAF and move it to the first guide we created above.

Duplicate the layer above by going to Layer > Duplicate layer. This creates a new layer in the exact same position. Move this new layer down to the second guide we created above. We now have the container for our menu.

Step 12

Add the text centered horizontally and vertically between the two lines created above.

• Font: Arial
• Size: 14pt
• Tracking: 0
• Weight: Bold
• Color #AFAFAF

Add your lines and menu text to a folder titled Top Menu to keep things organized.

Step 13

Next, we will create the large promotional text. This will be 40px below the menu, keeping with the consistent 40px spacing between elements.

Add a horizontal guide at 248px and 324px to serve as the container of our large promo text. This may vary depending on your text but will work for our two lines of sample text used.

Using the text tool, add the following text on your page:

Welcome to the online portfolio of Jane B Doe,
Ph.D. student, designer in Cityname, State.

• Font: Arial
• Size: 42pt
• Tracking: -50
• Line height: 45pt
• Weight: Bold
• Color: #AFAFAF
• Color (highlighted): #B86443

Center the text vertically and horizontally between the new guides.

Place this text in a folder titled Promo Text to keep things organized.

Step 14

The home page layout has three large stories with a round icon in the primary (left) column. As you probably guessed, we will create them 40px below the main promo text. Here’s what we will be creating:

Step 15

First, let’s create the three elements of each story. The headline and text will align 80px from the guide on the far left, leaving room for the story icon. Add a vertical guide at 120px.

Step 16

Using the text tool, add the heading: Learn more about me.

• Font: Arial
• Size: 21pt
• Tracking: 0
• Weight: Bold
• Color: #333333

Align the text with the new guide at 120px created above and place it 40px below the large promo text.

Let’s change things up a bit. Not that I have anything against guides, but there’s a faster way to space elements such as this headline 40px below the text.

Select the move tool and move the “Learn more about me” all the way up against the last line of the large text.

Now, hold down shift and tap the down arrow on your keyboard four times, the text will jump down 40px, 10 for each time you press down with shift held. (You can do it without shift but you would need to hit down 40 times which you’re more than welcome to do)

Step 17

Create the story text, which is slightly smaller and lighter in color. Align it left with the headline created above. Instead of the 40px spacing, let’s keep it close by at around 15px below the headline text.

Insert a vertical guide at 640px to serve as the right-side border of the text, keeping it within that boundry, allowing for room for column two down the road.

Here is some junk text to use: Lorem Ipsum is simply dummy text of the printsdf sdsg and tycpsum has been the industry’s standdddard duasdfsdsdmmy textView my Resumen the industry’s standard duasdsdffmmy.

• Font: Arial
• Size: 17pt
• Tracking: 0
• Line height: 20pt
• Weight: Bold
• Color: #AFAFAF

Step 18

The icon is a bit more complicated but essentially just a circle with a Photoshop shape on the layer above.

Using the Photoshop vector tools, select the Ellipse Tool. Click and drag on your page while holding shift to draw a perfect circle. With the layer selected, press Control+T (Command+T Mac) to bring up the transformation settings. Set the Width (W) and Height (H) to 60px.

Double click on the layer thumbnail to set the color to #333333.

Step 19

Double click on the layer created above to bring up the Layer Style window.

Add a drop shadow, outer glow, gradient overlay and stroke using the settings seen below:

Step 20

The step above created the background for the three icons we will use; now it’s time to create the actual icon to place on top of the background.

The first icon is just a lowercase “i” in Georgia font, 49pt, color of #FFFFFF but it needs a couple layer styles.

Create the “i” on a layer above the circle we created earlier and double click the layer to bring up layer styles. Apply the following settings for outer glow and stroke:

Step 21

Center the “i” on the circle and place both in a folder to keep things organized.

Move the folder to align left with the 40px vertical guide alongside the headline and text created earlier so your page looks like this:

Place the icon folder, headline and text into a folder such as Home Story A to keep things organized.

Step 22

Duplicate the folder created above two times so you have three stories. Move the second and third stories down so they are all 40px apart.

Step 23

Draw a 1px line from the guide at 40px to 640px between the newly created stories. The line will end up being 600px wide, 1px tall and colored #AFAFAF. Since the stories are 40px apart, place the line approximately 20px under each story except the last one.

Step 24

In the image above, I show examples of other icons, all created using simple included shapes in the Photoshop vector shapes panel using the same layer effects as described in the steps above.

Step 25

For this design, we have a secondary column that is 300px wide with a 40px gutter between it and the main column to the left. Let’s start by adding a vertical guide at 680px which will help us align the blog posts and social media links.

Step 26

Starting 40px below the main promo text just like the stories in the main column, let’s add a title to the blog “widget” titled From the Blog. Align it left with the vertical guide we placed at 680px.

• Font: Arial
• Size: 15pt
• Tracking: 0
• Weight: Bold
• Color: #333333

Step 27

If you would like the RSS icon, download a free icon set by wefunction.com at: http://wefunction.com/2008/07/function-free-icon-set/

Size the icon to the same height as the “From the blog text” and slide it to the right, aligning with the vertical 980px guide.

Step 28

The blog posts are made up of simple lines and rectangles, the key is keeping everything evenly spaced.

Start by creating a 1px tall 300px wide line from the vertical guide at 680px to 980px, colored #C3C3C3.

Move the line 10px below the widget heading.

Leaving 1px of whitespace under the line, add a rectangle background for the post title, 300px wide and 28px tall with a color of #F0F0F0.

Add the post date and title inside the rectangle above.

• Font: Arial
• Size: 13pt
• Tracking: 0
• Color #333333

Place the line, rectangle and post title in a folder so we can easily duplicate and move.

Step 29

Duplicate the post folder above to create five separate posts. Move them down, leaving 1px space between each. Then, change the background on every other to #FFFFFF or remove the rectangle.

Add one last border to the bottom item to finish off the list of posts.

Step 30

The social media section is pretty straightforward since it is very clean and simple.

To get started, download the icons from: http://webtoolkit4.me/2008/09/05/webtoolkit4me-releases-the-first-icon-set/

Step 31

Starting 40px below the bottom of the blog posts, add a title “Social Media” the text is the same as the blog:

• Font: Arial
• Size: 13pt
• Tracking: 0
• Color: #333333

Step 32

Create a new folder for the social icons, it can be inside another folder but be sure this new one only contains the icons.

Set the blending mode on the folder to Luminosity, this will give us a simple black and white icon.

Step 33

Go to File > Place and choose an icon from the 32×32 folder of icons downloaded above, select place and once it is on your site, press enter to commit it to the page.

Step 34

Move your first icon 10px below the social media title and aligning left with the vertical guide at 680px.

Add additional icons and place them 10px apart aligning to the left.

Step 35

It’s time to finish up the site with a footer, credits and a simple menu. Begin by drawing a #F0F0F0 line all the way across the site 1px tall, 80px below the last item on the page, the third story in the main column.

Step 36

Next, draw a rectangle with the same #F0F0F0 color to fill in everything under that 1px line above. Move the rectangle down leaving a 1px gap between the line and the top of the rectangle for a nice double line effect.

Step 37

The footer text is centered on the page and placed 20px below the top of the footer. The first line, used for copyright information is as follows:

• Arial
• Size: 13pt
• Tracking: 0
• Color #AFAFAF
• Color: # B86443 (Highlighted)

The second line, used for a secondary menu is a bit smaller at 11pt but otherwise uses the same settings as above.

Final Product

Why It Works So Well

The Minimal template works so well because it keeps things simple. By removing any barriers and distractions from the design, each small element that remains in the design becomes heightened in terms of importance. The visual hierarchy that is developed becomes just about as straight forward as it gets – within moments, the visitor of the site can immediately answer the main questions:

1. Logo: Where am I?
2. Mission Statement: What is this all about?
3. Navigation: Where can I go?
4. Content Column: What can I learn here?
5. Sidebar Column: How can I find out more?

The order in which the reader discovers this hierarchy doesn’t really even matter. Because everything is presented on a single page in a clean and orderly manner, the visitor is free to explore the design without any obstacles or confusion. This is why using a barebones template like this can often be a fantastic place to start a design if you’re at a loss for inspiration. It’s always easy to add extra elements… what’s hard is nailing a successful framework.

Create Your Own Custom Versions!

A template like Minimal just wouldn’t be fun to use if everyone had the same exact version. Brandon, the site editor here, decided to make a couple “custom variations” of the Minimal template to show just how versatile it can become without ever losing the minimalist spirit of the design. Check them out below:

In this version, we’re using the font Gotham, dotted lines for the HR elements, and a bright green for that fresh, minty taste!

In this version, we’re using the font Museo, dotted lines for the HR elements, and a deep blue accent color.

In this version, we’re using the font Ziggurat, dotted lines for the HR elements, and we’ve inverted the color scheme for a dark, serious style.

Conclusion

That’s it! I tried to keep everything as simple as possible to keep a clean, professional minimal look. If you are interested in the final HTML or WordPress versions stop over to my ThemeForest portfolio! Thanks for reading, now go leave some comments below if you liked it!