You have built your portfolio and set up your site. Now it’s time to move on look at your site design as a freelance graphic designer. While your portfolio site has to look good and function well, its main purpose should be to convert prospects into clients. In other words, every design decision, from color to type, has to lead users to click on your call to action (usually abbreviated as CTA).

Tips when Looking at Your Site Design

DESIGN FOR CONVERSION

What’s a call to action? Let’s take a step back from looking at your site design as a freelance graphic designer and talk marketing. Call to action, as its name suggests, is an image or line of text that prompts users to take action and convert them into paying customers. For your portfolio site, your call to action and conversion should be clients submitting their information or purchasing your design packages.

In order to increase sales and get more clients your site has to be designed well. For that it’s a good idea to establish visual hierarchy in a page, starting with elements that draw the most attention. For instance, how a word in bold catches your eye.

UNDERSTANDING THE FUNDAMENTALS

As a graphic designer your reputation is at stake when it comes to the design of your portfolio site. If it isn’t designed well, clients won’t trust your skills enough to send you their projects. As such, you should spend time understanding the fundamentals of web design and putting them into practice.

COLOR

Color influences the first impression. For example, navy appears serious, but not drab; yellow is warm and uplifts the spirits; black emits a strong message. Using the right colors on your site gives clients a better understanding of you as a graphic designer.

At the same time, colors has to support — not overpower — your content, so it’s a good idea to simplify your color choices. Stick to basic color schemes and use them effectively to bring out your projects and call to action. Using color accents is a good way to draw users to specific content as well.

WHITESPACE

Your eyes won’t be able to catch a break if you are reading something that’s all cramped together on a page. Your content will be much more readable if different elements are separated by spacing. In web design, such spacing is referred to as whitespace.

Knowing how to use whitespace well allows you to deliver an enjoyable experience to clients by improving readability and giving elements on a page room to breathe. The result is a website that is both elegant and balanced.

TYPE

A picture may say a thousand words, but most websites ultimately rely on text to bring the message across. Type and typography are often overlooked, but when done well will bring your website’s design to the next level.

When choosing typefaces, Sans Serif fonts such as Arial and Verdana are easier to read online. Like colors, try not to overdo it with the typefaces — keep it to below three for a more streamlined user experience. For typography, consider using font sizes and weights to create a clearer structure. As with whitespace, keep your words properly spaced so they are easy to read.

UNITY

Unity is about forming strong relationships between elements and pages so they fit well together and hold your website together visually and conceptually, creating a brand identity that’s consistent. It can be as simple as using the same colors and typefaces throughout your website, or placing related elements closer together.

CREATING A SITE BLUEPRINT

After understanding the fundamentals of web design, you have to apply them to your portfolio site. However, designing a website without a plan is like constructing a building without blueprints. Of course, if you opted for services such as Squarespace and Carbonmade, then you don’t really have to worry about structuring your website since they provide templates that come with everything you need. The same goes for all the WordPress portfolio themes out there.

However, if you chose to build your portfolio site from scratch, then deciding what pages and features to include beforehand will save you a lot of trouble later on. Fortunately, a portfolio site should be relatively simple in structure. At the very least, it should include your strongest projects, information about you, and call to action.

Consider using a single scrolling page to display your content. If need be, you can add a few more pages to display more content. To reiterate, while your site needs to look good, its main purpose should be to convert prospects into clients — and a landing page is probably the best way to do so.

THE LANDING PAGE

FOCUS ON MARKETING AND YOUR CALL TO ACTION

With the internet, the attention span of a typical web user has shortened over the years. You typically only have a few seconds to impress users visiting your homepage.

Consequently, the homepage of your portfolio site should be designed such that you immediately grab the clients’ attention with your projects before marketing your services to them. If you take a look at some of the portfolio templates out there, you will notice that most of them have a specific structure — a header where you make an introduction, a gallery where you showcase your strongest projects, and finally a form to capture the clients’ information.

Sounds familiar? If you are familiar with marketing, you would realize that those templates are actually based on the layout of a landing page. In marketing terms, a landing page is designed, written and developed with one business purpose in mind — to convince clients of your expertise and get them to contact you and/or purchase your design packages. In short, you need to design your homepage, or landing page in this case, to optimize conversion. Anything else that doesn’t help you achieve that purpose should be removed, and key content has to be prioritized.

Obviously your call to action has to take precedence over everything else. As such, be sure to make it as visible as possible through the use of bold fonts and contrasting colors. I also recommend having them at the top and bottom of the landing page for best exposure.

LAYING THINGS OUT

Let’s talk more about layout. Besides your call to action, you should include a short self-introduction at the top. Keep it clear and concise so you don’t lose a visitor’s attention. It’s also a good idea to include a professional photo of yourself, since clients are more likely to trust your services if they have a face to relate to.

After getting to know you better it’s time to impress the clients with your strongest projects. For more visual impact, you might want to display them as a gallery. You can also expand on two to three projects with descriptions and photo mock-ups.

Having testimonials isn’t a must, but is probably one of the easiest ways to convey credibility and professionalism to clients. A good testimonial will do wonders to convince even the toughest clients that your services are worth paying for.

Now that the clients are confident in your skills and open to discussing details, it’s time to reel them in with one more round of call to action.

OTHER PAGES

Besides the landing page, you can add more pages if you have more content to share. Usually, graphic designers will include an About Me page, a Contact Me page if you have other forms of communication, and a Portfolio page to showcase more of your projects.

ON TO THE ACTUAL BLUEPRINT

Although you may have the layout elements thought out in your mind, you can’t really write blocks of code without deciding where these elements are going to go. You need a blueprint, or more specifically, a wireframe.

A wireframe is basically a black and white diagram where you visualize the layout of your site. For complex sites, wireframing can take a lot of time and effort to get right. However, since you are going with a landing page (and possibly just a couple of simple pages), creating a wireframe shouldn’t be too hard. In fact, just a simple sketch should do the trick.

SOME ODDS AND ENDS

And that’s about all you need when looking at your site design as a freelance graphic designer. If you have more than one page, then navigation is more one thing to consider. You can also consider adding animations to spice things up.

NAVIGATION

Some graphic designers use just a single landing page, so there isn’t much need for navigation. However, if you include more pages, it’s a good idea to provide clients with a clear and easy path to information. Navigation, when used effectively, increases engagement and keeps clients focused on your content, so don’t underestimate its importance.

You are probably familiar with navigation situated at the top of the screen. It’s the ‘standard’ style, and visible to clients at first glance. But as a graphic designer, consider breaking the mold and experimenting with different styles. Maybe a slide-out design similar to a mobile interface? Or even no navigation at all? It’s creativity like this that makes your site and branding unique and recognizable.

ANIMATION

With CSS3 you no longer need plugins such as Flash to create web-based animations and interactivity. Animation is a good way to lead clients through your site, while highlighting important content. It also provides a nice visual and keeps clients engaged.

But remember not to overdo things. Your site will take longer to load if you add too much animation, which will turn away some visitors. Furthermore, flashy effects distract the user and take the focus away from your projects and content.

DON’T FORGET ABOUT RESPONSIVE WEB DESIGN

Since there are so many different device displays nowadays, you need to adapt your website’s layout and contents based on the size it’s presented on. In fact, clients are more likely than ever to visit your portfolio site using their mobile devices. As such, it’s a good idea to utilize responsive web design so your website looks good anytime and anywhere.

Consider screen sizes on desktops, tablets and phones. Creating responsive web design in HTML and CSS is a whole different subject altogether, but if you want a quick overview, this article by Smashing Magazine is a good starting point.

IN CONCLUSION

As the saying goes, less is usually more. You should design your portfolio site such that it’s clean, simple and non-distracting, while making your projects and call to action the stars of the show. Ultimately, it’s about creating the best user experience possible in order to convert visitors into clients, so don’t underestimate the importance of your site design as a freelance graphic designer.