Voosh Themes

9 Essential Tips For Creating A Single Page Portfolio Website

Single page portfolio websites are particularly popular right now and there are some great examples of such sites around the Web. These types of sites present a number of unique design issues largely because of the space limitations involved – presenting everything about yourself and your work on a single page can very difficult.

For instance, you’ll want to include a bit of background information about yourself, the services you provide, previous work you have completed, and a means for people to get in touch with you. Achieving this successfully without overloading users with information requires quite a bit of thought and effort.

Below are some important tips that you’ll want to consider when designing single page sites – most of these also apply to all types of web design, but they are particularly relevant with one page sites.

Personal Information

Websites can often appear very impersonal and formal – this isn’t ideal given that one of the main goals of online portfolios is often to get new leads for potential work. For this to happen you need to build trust and credibility in the eyes of your visitors – without this they’re unlikely to take the next step of contacting you after they’ve looked at your site.

A simple way to build trust and initial rapport is make yourself more visible – include a (warm and friendly) photo of yourself along with some background information. Even better, record a short video where you introduce yourself, describe the services you offer, and ways for people to get in touch with you.

This will allow people to really get a sense of who you are and will increase the likelihood that they will get in touch (if the video is done well). Producing a video could also really help you stand out from the crowd as the majority of people don’t include this on their portfolios.

Jason Reed Wed Design

In this design a stylish caricature of the site owner is used to create a more personal interface – such an approach will likely help in building initial rapport with visitors.

AlamoFire

This design shows how you can make a single page portfolio for a company website more personal – again caricatures are used – but this time for each person working at the company.

Services

Another obvious thing that you’ll need to include in your design is an overview of the services you provide. When describing these ensure that you consider your target audience carefully – will “everyday” people with little technical experience understand terms such as CSS, jQuery, WordPress, and SEO?

Make sure that you explain your services in plain English in a way that the majority of your target audience will understand – for example, an alternative approach to simply listing your technical skills might be writing something along the lines of “I build highly usable and interactive websites that will allow you to present a clean and professional image to your online audience…”.

You want to be concise and direct – remember that you only have a single page to present everything – don’t overload users with lots of unnecessary details about the services you provide.

Edit Studios

Edit Studios do a nice job of presenting their services succinctly – there’s a heading for each one and then a sentence that elaborates on that particular service.

Social Proof

What do I mean by social proof? Well, I mean demonstrating that others have made use of the services you provide and have been pleased with the results (check out the excellent book Persusion by Robert Cialdini if you want to learn more about social proof and other “persuasive” techniques).

You can achieve this by including a list of some of your previous clients and also (if possible) some testimonials from these clients. If you don’t currently have any testimonials, contact people you have done work for and ask them! You’ll be surprised how many people are prepared to do this for you – especially if you did some good work for them in the past.

Including client lists and (in particular) testimonials helps to build credibility in the eyes of your visitors – it says to them “other people have used this individual/company and have been happy with their work”. This is ideal for you and increases the chance that your visitors will take the next step and get in touch with you.

Deluge Studios

Deluge Studios do a good job of highlighting the clients they have worked with and some of the testimonials they have received.

Portfolio Of Work

You’ll obviously need to include a portfolio of your work on a single page website – it’s important here to focus on only including your best work – not necessarily every piece of work you’ve ever done! Remember that space is limited – you only need a few examples at most to clearly demonstrate your skills and experience – you want to get your message across as quickly as possible.

You might want to include an image (if possible) along with a brief overview of the project and the work that you did. It doesn’t have to be too detailed – just touch on what the project was and the solution you employed (or whatever you think is appropriate).

Also, if you’re more interested in a particular type of work (because it pays particularly well or because you really enjoy it), then emphasize that work in your portfolio. If you don’t do this you’ll increase the chances of getting leads for work that you’re not really interested (which isn’t ideal at all).

Multi Michel

Andy Shaw

Fabiano

Contact Information

The goal of portfolio sites is both to showcase your work and often to get leads for new work. It’s therefore important that you make it very easy for people to get in touch with you – either just to provide you with feedback on your work, or to contact you about a potential project you might be interested in.

There are several ways you can do this – a simple approach is to have a basic contact form displayed prominently on your site. You don’t need anything too elaborate – just fields for the person’s name, contact details, and an area for them to post a message.

Including some social media links for places such as Twitter, LinkedIn and Facebook is also important – such sites allow you to interact and potentially build relationships with people who may be able to offer you work in the future. You’ll probably want to include your contact phone number and email address as well.

Basically, you want to make it as easy as possible for people to get in touch with you – although be careful not to overdo it – you could have twenty different links to social media sites, but that’s probably a bit much.

Alex Cohaniuc

This site makes use of a nice and clean contact form that is prominently displayed on the page and thus increases the likelihood that potential prospects will get in touch.

Be Creative

Why not come up with a really creative design for your one page site? This can really make you stand out from the crowd and will attract people who are interested in your design style. However, always make sure your design is focused towards your goals for the site – for example, there’s no point having a really abstract and stylish design if you don’t make it easy for people to get in touch with you.

So, ensure that you got the fundamentals covered, and then have some fun with your design!

Ayush Saran

Fish Marketing

Colour Pixel

Keep It Clean and Simple

This might seem to contradict the previous point, but simple, clean and minimal designs can also be very appealing (and are also very creative in their own right). When well designed, such sites can elicit a sense of professionalism, quality, and class – all of which will help to build a positive perception of your work in the eyes of your visitors.

Dela Rocque

DJ Yura

Interactive Effects

Through the use of tools such as jQuery it’s possible to include a lot more content on a single page without cluttering it up. For example, animations can be used to display or hide content through the use of sliders that can reveal content on a range of different topics.

If effects such as these are well implemented it can also add a touch of class to your design that can help it stand out that little bit more. However, it’s important not to add more content just for the sake of it – ensure that you’re only adding information that is absolutely essential.

Fashion Photography

This site makes nice use of a horizontal slider to show more portfolio items – this enables much more content to be included on the page without navigating away.

FKQ

The FKQ site has a classy horizontal accordion that displays content related to the selected tab – the animated effect adds a nice touch.

Lorem Ipsum

The Lorem Ipsum website is another that makes use of an animated slider to display extra content to visitors allowing them to easily include more content on their single page site.

Don’t Use Too Much Text

You want your design to jump out at people and be visually appealing – if you have lots of text as opposed to vibrant and interesting images, it will likely turn people off (even if it’s great content). Instead, you want to grab your visitors’ attention and make an instant impact – this will increase the chances that they will remember your site and potentially get in touch.

Arturo Delgado

Arturo Delgado’s site is a nice example of where little textual content is used – even the small amounts of text that are included are displayed in a large nice font to make it more visually appealing.

Conclusion

That’s it! I hope you found these tips helpful and that they encourage you to experiment and play around with building your own single page websites. It all largely comes down to common sense – just make sure you’re clear about the message you want to portray and the goal of the site – and always ensure that you only include what’s absolutely essential!