Design An Innovative Portfolio Site Using Alternative UI/UX

What’s the number one thing you want your portfolio site to do? Stand out! Today, Paul J Noble is going to walk us through the creation of his own uniquely designed portfolio site. He’ll show us tips and tricks in Adobe Photoshop, as well as some clever approaches to standing out from the pack of other portfolio sites.

Creating a Memorable Portfolio Site

Think of your portfolio site is your online spokesperson to potential clients. If done properly, it should tell people what you do, show off your best work, and give them the opportunity to get in contact with you. That’s all pretty obvious stuff – so what’s the difference between an ordinary portfolio site and a truly remarkable one?

The key to an effective portfolio site isn’t just having great projects – it’s leaving a lasting impression on visitors. Sure, this might mean having incredible illustrations if you are a graphic designer – but for web designers and developers, this often means needing to push the boundaries of UI/UX and coding in order to show off our strongest points.

In this tutorial, Paul J Noble is going to show us how he used some simple, but remarkably innovative approaches to the UI/UX on his own site to create a portfolio site that stretches the user’s expectations using interactivity and subtle lighting effects.

Let’s dive in!

Step 1 The Canvas

Create a new document in Photoshop that’s 1400 x 900. The final, HTML rendered site will feature ‘liquid’ (i.e. scalable) elements so we’ll need to keep in mind that the final design will not be a fixed size.

Step 2 Lay the Foundation

Creating a solid background is an easy way to get things started. For this design we’re going to be using a base color
that’s dark enough to accentuate foreground images while also offsetting pure black that may appear in the folio images. We’ll also use include some blue to create a ‘cool’ dark color that will integrate with the interface elements.

Select Layer > New Fill Layer > Solid Color and assign the color #252a3b.

Step 3 Laying the Guidelines

As we’re using a scalable layout, we need to define the minimum horizontal width. For most commercial sites this is around 1000 pixels to accommodate users with 1024×768 resolution displays. However for this site we’ll aim for 1100 pixels as a minimum width.

Firstly, make sure your guide units are set to pixels. This can be set by going to Preferences > Units & Guides.

Then, go to View > New Guide. As we’re going to put our content in the center and we’re aiming for a total minimum width of 1100 pixels, we should place vertical guides at 150px and 1250px.

Step 4 Create the Texture Pattern

Subtle diagonal striping will help lift the design by creating a separation between the foreground portfolio items and textured background.

To achieve this we will apply a Pattern fill layer. However, first we must create the pattern.

Create a new document 12×12 pixels with a transparent background and add a new fill layer with a black fill (#000000).

Now, add a new layer (Layer > New > Layer). Using the pencil tool with a brush size of 1px, draw three lines exactly as they appear in the image below.

Turn off the fill layer and set the lines layer opacity to 6%. To save this as our pattern select Edit > Define Pattern.

Returning to our original canvas, create a new layer with the texture by selecting Layer > New Fill Layer > Pattern and select the previously defined pattern.

Step 5 Navigation

Now that we’ve created our base we can drop some flat layers that comprise the major elements of the site

First, our navigation. As this site will be designed to have no vertical scrolling we can position the navigation to align to the bottom of the screen.

Create a new Group in the layers palette and label this group ‘Navigation’.

Then create a new layer using the Rectangle Tool (U). With the Info window open, draw this shape so it’s 1400×61 (the full width of the document window and 61 pixels high). Align this layer at the bottom of the document window.

Now, apply a gradient to the layer by right-clicking the shape layer in the Layers palette and selecting Blending Options then checking Gradient Overlay (alternatively, select Layer > Layer Style > Gradient Overlay).

In the Graident Editor, click the bottom color selector to open the Color Picker. For the left color (bottom of the shape) use #2f313a. For the right color (top of shape) use #3c3f49.

Next, create a new layer and lable this ‘highlight’. Using the Pencil tool with a 1px brush and color #ffffff, draw a line while holding shift across the top of the rectangle shape previously created. Then set this layer’s opacity to 6%.

Step 6 The Logotype

Create a new text layer 20 pixels from the left side of the document and align the text to be vertically centred on the navigation rectangle layer.

In this example the font DIN Light has been applied at 14px with a loose tracking of 200. To create a shift between two parts of the logo type two colors are used. For the first part #dddddd and the second, darker part #737375.

Next, add a subtle drop shadow to create the appearance of the text being inset to the background. Select Layer > Layer Style > Drop Shadow.

Unselect ‘Use Global Light’, change the direction to -45 degrees, set size to 0px, distance 1px and opacity 30%.

Step 7 Navigation Buttons

For the main navigation buttons we will use a rounded rectangle shape.

Create a new group called ‘buttons’.

Create a new Rounded Rectangle Shape that’s 279×31 and offset 20 px from the right side of the document window and vertically centred in the navigation rectangle.

Right click the layer in the layers palette to and select Blending Options. Check Gradient Overlay and use the values #292c33 to #43464f. Click OK and then check Bevel & Emboss.

For Bevel & Emboss set the size to 0px with a direction of 122 degrees. Then set the Highlight and Shadow opacity to 10% to create a consistent, subtle lighting effect.

Add text labels using the same font settings as were applied for the logo type. As the button labels are contained in a smaller vertical space we should reduce the size to 12 px and tighten the tracking to 100. Use the same colours as the logo type however apply the lighter colour for the active page label.

To separate the buttons while maintaining the softly lit appearance of the navigation we should draw two lines, each 1px width. The first should be black (#000000) and the other white (#FFFFFF). Set the opacity for the white layer to 6% and the black layer to 12%. Duplicate these layers by Shift-clicking each and then right clicking to selection. Position the duplicate layers with consistent spacing inside the navigation.

Step 8 Social Media Buttons

These buttons have a different function from the rest of the nav so we’ll apply a style that suggests this. Let’s inset these buttons to complement the main navigation.

Firstly, create a new group called ‘social’ and nest this group in the ‘navigation’ parent group.

Now, using the Rounded Rectangle tool with a radius of 4 px and holding the shift key, create a square aspect shape of 25×25 px. Vertically center this in the navigation and position the shape 22 px to the left of the main navigation buttons.

Right click the shape just created and select Blending Options.

Add a drop shadow. For this drop shadow we’ll use white (#FFFFFF) and set the blend mode to Lighten. Set distance to 1px, spread to 0% and size to 0px. This will create an effect of the bottom edge being lit and hence the button being inset.

Next, while still in the Layer Style window, check inner shadow. Use black (#000000) with opacity at 39%, distance 1px and size 4px.

Finally, select Color Overlay and use #353741. This will flatten the appearance of the shape and add contrast with the background.

For the social media icons we’ll take an existing image and trace the edges using the pen tool to create a path (make sure Paths is select in the tool Options menu).

After you’ve created a path of the icon, use the Path Selection Tool and right-click the path you just created (make sure the path is selected in the Paths palette). Select Define Custom Shape… Save the Shape.

We can now use the icon as a scalable vector object. Using the Pen tool, change the Options to Shape Layers (top left item on the Options bar) and select Custom Shape Tool, then select the icon just created. Holding the Shift key, drag the object so that it fits within the icon tile.

Set the icon opacity to 20%.

Repeat these steps for any remaining social media icons.

Step 9 More Guides

In this example we’re going to be displaying folio images that are 640×480 px.

As we’d like to vertically center the featured image within the space above the navigation, we need to add some more guides. Select View > New Guide and Add horizontal guides at 180px and 660px. This will position our viewed image in the middle of the vertical space above the navigation.

We’re also going to need some text at the left of the featured image so we’ll add vertical guides at 400px and 350px to provide margin for the text and allow space for navigation next to the image. Finally add vertical guides at 1040px and 1070px to define the edge of the viewed image and the margin between the adjacent image.

Step 10 Create the Image Placeholders

Create a new group called ‘Projects’. Then, using the Rectangle tool, draw a rectangle 640x480px that aligns to the top left of the vertical guide at 400px and the top to the horizontal guide at 180px. This will serve as the placeholder for our main image.

Right click the layer just created and select Rasterize Layer.

Now, holding the Alt key, click and drag the layer to create a duplicate. Move this layer to the right of the layer with 30px margin to align with the guide at 1070px and using the same baseline.

Create two more duplicates and align these to the bottom of each with 30px margin between each.

Then, using the Paint Bucket tool, fill each of these shapes with the color #252a3a.

Step 11 Vignette

Create a new Group called ‘Vignette’ below the ‘Navigation’ group and above the ‘Projects’ group.

Create a new layer and use the Paint Bucket tool to fill the layer using the foreground color #0f1219.

Using the Ellipse tool, draw an outline that intersects at the corners of the main image guides.

Now, to create a vignette effect, we’ll need to cut out this section while feathering the edge of the cut. To achieve this we’ll use Select > Modify > Feather. Feather the selection by 60px and then cut the layer selection (Ctrl-x / Command-x).

Step 12 Create Project Masks

As we’re going to be showcasing work we’ll need to place some screenshots on the placeholders. Go back the ‘Projects’ group and paste a screenshot while the main placeholder is selected. This will insert the layer above the placeholder. Then, right-click the layer and select Create Clipping Mask.

Paste three more screenshots onto the other placeholders.

Reduce the opacity for all screenshots except for the centred screenshot to 20%.

Step 13 Inserting Text

To annotate each project we’ll use three text layers. Create a new group above the ‘vignette’ group to house these layers.

For the first, the heading, we’ll use a light font. In this example I’ve used DIN Light however another similar typeface may also work fine. Using the Text tool draw a text box within the guides to the left of the main image and 40px below the top guide. Set the color to #FFFFFF, tracking to -25 for a tighter letter spacing and use a font size of 28px.

We’ll also add a line for the project category and date. Set the size to 14px, tracking to 100, force caps and apply the color #338966 to accent this line.

Then, for the body text, we’ll use a system font such as Lucida Grande or Lucida Sans Unicode at 12px with a color of #8C8F95 and line height of 18px.

Step 14 Add mouse controls

To navigate our folio site we’ll allow mouse or keyboard control. An intuitive placement for navigation directional buttons is according to their function. For example, the right arrow button will go to the right of the main image.

For the buttons we’ll use translucent shapes that can shift opacity on hover or click events. Create a new group called ‘Buttons’ that’s above the ‘Vignette’ group.

Then, create a new document with the dimensions 37x37px. Using the pen tool, draw a chevron shape such as below. Repeating the process in Step 8, using the Path Selection Tool, right click the shape and select Define Custom Shape. Save the shape.

Going back to our main canvas, use the Custom Shape tool to insert the previously created shape.

Then, select Edit > Transform > Flip horizontal. This will point the arrow to the right. Clone this shape and use Edit > Transform > Rotate 90 degrees Clockwise to create the downward pointing shape.

Position each of these shapes in the center of their respective directional side. Allow 15px margin so the buttons can overlap the adjacent images and reduce the opacity to 12%.

Step 15 Orientation Map

To let the user know where they are in the portfolio as a whole we’ll abstract the grid design and use lines of differing height to represent columns of images and an indicator to establish the present viewing position.

Create a new group called ‘Orientation’ and place this group above the ‘Vignette’ group.

Using the Pencil tool, select Square brush set from the fly-out menu. Then, with the color #FFFFFF and a thickness of 5px, draw a line to align with the far left boundary guide and 60px high.

Clone this layer and position this 2px to the right. Repeat this for up to 12 lines.

Set the opacity for all layers to 12%. And easy way to do this is set the opacity for the first layer, then right click on the layer and select Copy Layer Style. Then select all remaining layers and select Paste Layer Style.

Stagger these layers by using the Edit > Free Transform command to shorten / heighten each line.

Finally, create a new layer and use the pencil again to draw a marker on the first line. This is our position indicator.

Step 16 Keyboard controls

Often keyboard control will offer an intuitive navigation experience. However, we must allow the user to know that the keyboard may control navigation. To accomplish this we’ll create keyboard arrow icons.

Create a new group called ‘Keyboard’ and place this above the ‘Vignette’ group.

Using the Rectangle Shape tool, draw a square (hold Shift) 20x20px with a color #262a34. Right click the layer in the Layers palette and select Blending Options. Check Stroke and apply a 1px stroke on the outside with the color #32343f.

Then, using the pen tool (ensure the style is set to Default in the Option bar) and with color #fff draw an arrow with a slightly squared point. Adjust as necessary with the Direct Selection tool. Set opacity to 20%

In the layers palette, shift select the two layers just created. Right click and select Duplicate layers. Then, using the Edit > Transform menu option rotate the duplicated layers to their correct orientation. Repeat this step to create all four icons.

Conclusion

Alright! Now we’re done with the design portion of the project… which means all we need to do is code it using some basic HTML/CSS, jQuery Hotkeys, and a few extra jQuery tricks. If anyone wants to see how Paul coded this design, let us know in the comments so we can arrange it!