The personal page has seen a huge jump in popularity in the last few years. These pages act as a sort headquarters for web visitors to check you out. Many personal pagers include their social details, a little bit about them and perhaps some of the websites they work on / with. Today, we’ll be crafting a beautiful personal homepage and be giving you tips on how to make the most effective one possible.

Here’s the design we’ll be creating:

Here’s a few elements we think are absolute musts for a personal homepage:

Who you are

What you do

A little bit about you

Ways to contact you

Your name

That’s the bear minimum. It also depends on the focus and aim of your page. Are you creating a single page portfolio? A teaser page? Or literally just a way for your social contacts to find out more about you.

Step 1: Color Pallette & General Layout

It’s always a good idea to wireframe, sketch or just briefly plan out  the design. Designing as you go, or on the fly can result in some really creative work – but it’s also very time consuming and can lead you to eventually waste time. Here’s our initial idea – obviously it’s very simple, and some of the layout may alter. It took about 15 minutes to get here – so don’t be afraid to have a little play about with the design.

Step 2: Design Time

In painting, you always start with the background, so why should web design be any different?

Here’s how we made our background using 2 rectangle shapes, to achieve a complex gradient. It’s quicker and easier to do this with one gradient – but a little harder to show – so here’s our settings:

Background, made of 2 layers

Layer 1: Opacity 100%, color:#27d4da

Layer 2: Fill: 0%, color: #27d4da

Here’s the Gradient Overlay settings.

Next, we’re taking the picture we’ll be using. This was shot in Photo Booth, we removed the background in Photoshop, then applied a Mosaic Filter to the layer, making it look all ‘pixelly’. This can be found under Filter > Pixelate > Mosaic. We’ve also added our name across the top, faded in the background.

Next, we’ve added our ‘tagline’. This has a Drop Shadow (in white), a simple gradient and a black stroke. This gives the line a ‘letterpress’ effect. The font used is Gotham (Medium) but the ampersand is from Palatino – a system font.

Now for our introductory paragraph and some social icons – taken from iconfinder.com. Iconfinder is an excellent resource of all things icon, do check them out!

Now for a post it note, which will become our about section. This was made with a pale yellow rectangle, which has a white to transparent gradient. The left edge was made with another, darker box. Finally, we created a drop shadow and use the following technique to separate it as a new layer.

This layer can then be warped, and given an arc shape – thus creating one of those trendy lifted shadows.

Next, our text is added, using a mixture of Helvetica and Gotham. Line-heights are tweaked to boost legibility. Our Polaroid image was created in a similar manner as the post-it-note, only this time we made the shadow convex.

Re-using the Profile picture surround for our work samples.

Finally, a line is added below our large Profile pic layer, which will pull in our Twitter comments real time.

Close up of detail.

More detailing.

We’ve included the source file, so you can learn from and edit the file in anyway you like:

http://www.mediafire.com/?kxko8zk238fizmp