Looking at Your Site Design

You built your portfolio and set up your site. Now, it’s time to move on to site design. 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).


What’s a call to action? Let’s take a step back from design 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.

an example of a CTA

In order to increase sales and get more clients, you have to design your site 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.


As a graphic designer, your image 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 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 both graphic designer and a person.

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 accents is a good way to draw users to specific content as well.


Your eyes won’t be able to catch a break if you’re 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.


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 site’s design to the next level.

In 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 clear structure. As with whitespace, keep your words properly spaced so they’re easy to read.


Unity is about forming strong relationships between elements and pages, so they get along and fit well together. Doing so holds your site 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 site, or placing related elements closer together.


After understanding the fundamentals, you have to apply them to your portfolio site. However, designing a site 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 site 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 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.

In fact, 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 the best way to do so.

The landing page


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’re 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 with one business purpose in mind — to convince clients of your skills 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 priortized.

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. It’s also recommended that you place it at the top and bottom of the landing page for best exposure.


Let’s talk more about layout now. Beside your call to action, you should include a self-introduction at the top. Keep it clear and concise so you don’t lose a prospect’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 now have the layout elements in hand, you can’t 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’re 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.

wireframe sketch by Mike Rohde


And that’s about all you need for your portfolio site. 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.


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’re 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.

Simon Shen’s portfolio


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 prospects. Furthermore, flashy effects distract the user and take the focus away from your content.


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

Typically, you should 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.

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 prospects into clients.

Leave a Reply