Line25

Build a Basic Dribbble Fed Portfolio Website (Part 1/2)

Read the full post

Follow this step by step tutorial to create a simple single page portfolio website design that will self-update using shots from your Dribbble profile. In this first of the two part series we’ll go through the process of designing the website concept in Photoshop, before coding up the HTML and CSS next week.

Simple portfolio website design

The portfolio design we’ll be creating is a single page design and features the very basics of a design portfolio website: A logo, an intro, the showcase of work, an about me paragraph and a contact form.

Create a new document in Adobe Photoshop. I like to give myself a large canvas to work with that resembles a large monitor resolution. 1680x2000px will provide enough space to visually build our design as it will appear on screen.

Fill the background with a warm grey tone such as #f1f0ed. Using subtle tones as opposed to black on white will help avoid any contrast clashes.

Use the Noise filter (Filter > Noise > Add Noise) to add a subtle texture to the background to give the site a warmer, more tactile feel.

Draw an 820px selection in the centre of the document and use guides to highlight the centre and edges of this main content area.

Fill a circular marquee selection with a dark grey and add your initials in a font of your choice to create a simple logo.

Right click and select Rasterize Type on the initials layer then CMD+Click the thumbnail of the background circle layer to load its selection. Inverse the selection and hit delete to remove any overlap beyond the edges of the logo.

Dab a spot of a soft black brush, then hit CMD+T to transform the shape. Squash it down so it can be used as a shadow under the logo. Move it into place and reduce the opacity to suit.

Begin writing out a short introduction to your portfolio website. In the coded version we can use Google Web Fonts to make use of the @font-face CSS3 property, which will allow us to use a cool font for the body text. Here I’m using a downloaded version of Droid Serif to mock up the text in Photoshop to gain a feel for the text sizes.

Change the colour of text that will appear as a link and add the underline effect to simulate a clickable element. Planning these features now will make it easy to just copy and paste the hex colour values into the CSS stylesheet.

This portfolio will be self-updating using your shots from Dribbble, so begin copying and pasting the design thumbnails from your profile and align them accordingly in the Photoshop document. Hold Shift while pressing the cursor keys to nudge the element by 10px increments.

Add a Drop Shadow effect to the portfolio designs to lift them from the page. Effects like this that were once only achievable in Photoshop can now be replicated with the CSS3 box-shadow property.

Make a copy of the intro text and adjust the wording to create a brief About Me section under the portfolio elements. Maintain the same font hierarchy and link styling.

Finish off the design with a Contact section at the bottom. Use copies of the existing text to mock up the wording and form labels, then draw a rectangular selection as a base for the input fields.

Open up the Layer Styles window and add a subtle Inner Shadow to give the illusion that the field is inset, then add an off-white Color Overlay to reduce the contrast between the field and the background slightly. Then finally add a #dedede 1px stroke to define the border of the input field.

Duplicate the form field and move it into place as the second input and a textarea element. The great thing about layer styles is they can be scaled to any size without being distorted.

Add a darker grey rectangle the represent the send button. Give this element a quick noise filter to match the texture of the background.

Use the same font styling to add the Send label, except change the colour fill to white, then finish off the button with a subtle drop shadow to help the element stand out.

Simple portfolio website design

This leaves our basic portfolio concept complete ready for part two, where we’ll export the few images we need from the Photoshop document then replicate this design with HTML and CSS before adding the simple code to pull in our Dribbble shots.

Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Chris Spooner

Chris Spooner is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.

27 Comments

  1. Ulrich says:

    That's very nice… Just begin try to do it.
    thx Chris

  2. Franco says:

    Great Design, now i will have to get a dribbble account :)

  3. This is nice and clean. Great work Chris, thanks for sharing it with use.

  4. I like the cleanness of your design.Simple and beautiful keep visitors focus on your folio pieces. Great job and thanks for sharing.

  5. Zarel says:

    Wuhuuuuu… Clean, Aesthetic and it Works very well!

  6. Sam says:

    Pretty please can someone invite me to dribble? I promise to be good for the whole year!

  7. vectorbug says:

    Would be cool if part 2 showed implementing other feeds besides dribbble, like tumblr or instagram?

    Although if I had a dribbble invite I probably wouldn't care! 8)

  8. Can't say I'm a huge fan of dribbble since its so hard for people to even see work that you make unless you're already popular. Would work nice as a portfolio site though.

  9. That's a very clean design! Good portfolio. If necessary, keep your website compatible for mobile!

  10. Josef H says:

    Truly nice design here…
    I made something of my own following yours as a guide. The thing is, I don't know how to code it. I might try a freelancer from http://peopleperhour.com

  11. Excellent Work Chris

  12. Great Design and Work Chris.. waiting next your article.. ;)

  13. Great Tips…… simple, beautiful and helpful. Nice job and thanks for sharing.

    Waiting for the next one…

  14. Sachin says:

    ITShastra India Pvt Ltd can help you develop, web design, promote, and maintain your web site.
    It also specialize in customized application software development and multimedia content generation.

  15. Daniel says:

    Hi ……………….

    Adding some more info about ITShastra ,as we did few projects with ITShastra
    It is an ISO:9000 ISO:27K Certified company ,,,, Very Systematic Procedure we experienced

    Excellent …. To Work with Certified Company Like ITShastra ….

    Thanks

Sorry, comments are now closed