WordPress Gallery Plugin: Seven Steps To A Beautiful, Functional Portfolio Design

A portfolio can do many jobs for your small business: help you communicate with customers, attract potential clients, publish your thinking, and get search engine attention. They can save you money because a basic blog can be inexpensive to design. Blogs are also easy to maintain yourself— the software is easy to learn, and you can post samples of your work, updates to your services and much more.

In order to take advantage of all the benefits an online portfolio can have for your business, you’ll have to create a portfolio that looks attractive, matches your business’s brand and also works well for your business. Here’s how, in seven simple steps.

Decide on your portfolio plugin

This is not strictly a design question, but your choice of portfolio plugins will determine how the portfolio needs to be designed, so I have included it in this process. There are many platforms to choose from, but two of the biggest contenders are WordPress and Typepad.

WordPress is a free blog platform, but it also requires that you install the software to run it on your own web server. You also have to update your WordPress installation regularly. WordPress also requires more HTML coding to customize your design. On the other hand, WordPress does offer a lot of code modules and plug-ins to make your blog more functional. I recommend WordPress to tech-savvy clients who can install and maintain their own software or clients who have more budget to design, code and maintain their blogs.

Typepad is a managed blog solution— which means that the company that makes Typepad manages the updates and runs the backend software for you. Typepad does have a small monthly fee associated with it, but if you don’t want to be responsible for your own blog software, it can be well worth the cost. Options for designing a Typepad blog are a bit more limited, but this too can be a good thing from a budget standpoint. Typepad also offers some code modules and plug-ins— enough for a basic to intermediate blogger.

Design your own wordpress portfolio gallery or start from a plugin

Designing your own portfolio will result in a more unique look. And, if you’ve chosen to use Typepad as your portfolio provider, designing a customized portfolio is pretty simple, as long as you stick with the basic layouts that they offer.

If you use a template, some of the following steps may become unnecessary. If you like the color palette or font choices in your template (and if they match your brand design), you may just be “good to go”. However, a template has its’ downsides. It can look generic, or worse yet, your competition could decide to use the same template. This can confuse users and make your blog less effective.

Create your portfolio header

You could use a standard portfolio header, which consists of simple text on a colored background or a wordpress masonry gallery plugin. But, designing a banner graphic is an easy way to make your blog stand out and can also make it more engaging and memorable. If you have other materials already designed for your brand, you’ll want the header to match your other materials (such as your website, business card, brochure, etc.).

The header graphic should include your logo, portfolio title, and portfolio subhead. You can also include a photo or other graphics from your Visual Vocabulary in the header graphic to increase visual interest and to help distinguish your blog from others.

You’ll need the final header file to have the same width as your blog— each template is different, so check your provider. You’ll also need to optimize this file for the web, and save it as a GIF, JPG or PNG to upload to your blog.

A sample header image with logo, blog tagline, and additional branded graphics.

Determine your sidebar content

The sidebar area of your portfolio is a place where you can include promotional areas (for example, a box promoting a product you sell, or a sign up box for your newsletter) or link to the content in your blog in different ways (organized by categories, or archived according to the month they were written in, for example). The sidebar is also a perfect place to promote your other online presences— like your main website, or your Twitter feed. And, you can use the sidebar to offer visitors ways to subscribe to the blog as well.

There are other tools, called widgets, that can help your portfolio display a variety of information. Your portfolio provider will have a gallery of widgets that are available to install. Just make sure to choose widgets that contribute to your brand and the message of your portfolio , and not just ones that seem “cool”.

In this example, the sidebar has:

  1. A promotion for her latest book and a link to download a sample chapter
  2. A sign-up box for her newsletter
  3. A link to sign up for updates of the blog to be emailed to you
  4. Links to her social media pages (LinkedIn, Twitter, Facebook, Plaxo and YouTube)
  5. A contact form to allow people to contact her privately
  6. Her latest Twitter posts
  7. A list of the Categories on her blog
  8. A link to her “About” page

Set the number of columns

You’ll need a main text column where you can publish your posts and articles. You can have either 1 or 2 sidebar columns for your links and widgets. How many you’ll need for the sidebar will be determined by the content in those columns. Consider the design of the content and whether that design would look better in one wide column or two skinnier columns. And, consider the amount of sidebar content you have— you want to be sure that the sidebar doesn’t scroll on too long.

Choose your font palette

You can customize the fonts for your body copy, headlines, sidebar items and all of the other fonts on your blog. You should limit your font style choices to 1 or 2 typefaces (whether you choose Arial, Verdana, Georgia, or some other style) for consistency. Then, specify the weights of the fonts in each case (bold or regular), and whether the font is regular or italic. You can also choose the colors for each font, which I’ll talk about more in the next step.

Create your color palette

You want the overall color palette for your portfolio to echo the rest of your brand. The color palette should be similar to your website, business card, brochure, Twitter page, newsletter and other designed pieces. That way, the blog will reinforce the other pieces visually, and will help contribute to your business’s memorability.

You can choose the color for the background of the blog, for the background of the sidebar, and for the background of the main post area.

You can also choose the colors for each font. For body copy, you want to choose a color that has the highest possible contrast with the background to promote legibility. For example, black text on a white background is the highest possible contrast. For headlines and subheads, pick a color that is dark enough to be legible and that matches your brand’s color palette.

Dates can be in a color, black or grey— choose this based on the importance of the date to your blog. If it’s important that your users notice the dates, choose black or a bright color. If the date is not a priority, choose a muted or light color, or grey.

Links should be in a contrasting, noticeable color— often a bright color. As a general rule, blue is a good choice for links because it’s a standard color— since links were blue in the early days of the Internet, many people associate this color with “things you can click on”.

With these 7 steps, you’ll design a portfolio that will help your business to reap the many benefits of an online portfolio — easily and affordably!