How to Make an Online Portfolio in 8 Steps + Tips to Attract More Clients

How to Make an Online Portfolio in 8 Steps + Tips to Attract More Clients

An online portfolio is an essential part of an entrepreneur’s kit when it comes to displaying skills, achievements, and past projects. Around 71% of employers admit that an online portfolio’s quality influences hiring decisions, therefore, online portfolios can open up opportunities for potential employment and collaboration.

While anyone can profit from creating their own online portfolio website, it primarily benefits those working in the creative industry, such as web designers, illustrators, and photographers. In comparison to a hard copy portfolio, creating an online portfolio has more benefits, including:

  • High-quality media. Include videos and high-resolution images without having to worry about their quality after printing.
  • Easy to update. Make changes and add information faster.
  • More accessible. Higher opportunities to get discovered by potential employers and customers abroad.

The steps to create an online portfolio are similar to making a website. However, there are additional steps to optimize your portfolio website to attract visitors and potential customers or clients.

If you still don’t have your professional portfolio online, this article will help you get one set up. Note that there are different ways to make an online portfolio, but this tutorial will use WordPress. We will also share some tips on how to attract more clients and examples as inspiration.

1. Set Up the Platform

The first step in the website building process is choosing the right platform: a website builder, a content management system (CMS), or a portfolio maker – they all offer different ways to create an impressive online portfolio.

We will use WordPress due to the following features it offers:

  • Flexibility. Suitable for any type of portfolio for all industries.
  • Scalability. Start small and grow your website later, using the extensive gallery of plugins and themes.
  • Cost. Adjust the budget according to your needs and resources.
  • Support. There is a strong community that provides support through forums and documentation.

However, it’s worth noting that WordPress has some downsides. It is not beginner-friendly, so users might need more time to install and set up the platform compared to the easy initialization process offered by website builders such as Zyro. In addition, there is a lack of direct support from WordPress for specific issues.

Note that this example uses WordPress.org and not WordPress.com, so getting a domain name and web hosting is a must.

2. Register a Domain Name

A domain name is an essential part of an online portfolio’s branding since visitors will have to enter it into their browsers to reach the site. A custom domain name can help make a website more accessible and memorable to visitors.

To find the right domain for an online portfolio, here are some elements to consider:

  • Recognition. Choose how you want to be known in your professional life. If you do not have a pen or artist name, we recommend using your real name for the domain. Remember, a portfolio is about selling yourself as a good potential hire.
  • Availability. Check whether someone has already registered a domain that you might be interested in by using a domain checker. If it is already taken, use a different top-level domain (TLD) as the extension or figure out an alternative title.
  • Cost. Make sure the domain price fits your budget. Don’t forget that different TLD extensions have different prices.

Once you have settled on a custom domain name, find a trustworthy domain registrar accredited by the Internet Corporation for Assigned Names and Numbers (ICANN) to ensure a legitimate purchase.

Follow the steps below to register a domain with Hostinger:

  1. Use a domain checker to evaluate your domain’s availability.
Hostinger's Domain Checker.
  1. Once you have found an available domain, click on Add to cart -> Continue to cart.
Adding to cart on Hostinger's Domain Checker.
  1. From the shopping cart window, select the Period to choose the registration period. There is also an optional privacy protection add-on to keep your personal information secure. Click on the Checkout Now button to finish the order.
Purchasing a domain on Hostinger.
  1. After completing the payment, there will be a Setup box on your control panel. Fill out your contact details and click on the Finish registration button.
Finishing the registration of a domain.

3. Find a Reliable Web Host

Another essential factor in creating an online portfolio website is getting reliable web hosting. Only by using the right hosting provider and plan will a website be able to run smoothly.

To help you find the right web host for your needs, here are some noteworthy elements to consider:

  • Cost. Evaluate the hosting price and adjust it to your overall budget.
  • Tools. Check whether the web host will support your platform and the targeted amount of visitors.
  • Features. Take into consideration the bandwidth and storage provided by the hosting plans and compare them to your needs.
  • Security. To protect your site, check whether the provider implements any measures, such as access management, SSL certificates, and automated backups.

Once you have found a suitable hosting provider, select the web hosting plan. For a small online portfolio, we recommend getting a shared hosting service. With Hostinger, you can get a free domain with the Premium plan for $2.59/month.

Hostinger's Shared Hosting plans.

4. Customize Your Portfolio

The visual aspect of your portfolio will help to attract potential customers or employers. High-quality visuals will make the website look more professional and establish a coherent aesthetic, which is especially important for online portfolios that focus on artistic endeavors.

When starting your creative process, don’t forget about:

  • User-friendly design features. Make sure that visitors can navigate your site easily.
  • Uniqueness. Personalize your portfolio by giving it character and personality. By doing so, your portfolio will be memorable to potential clients or customers.
  • Responsiveness to mobile devices. Adjust your theme and content to make it mobile-friendly, as mobile devices generate roughly 55% of all global website traffic.
  • Media quality. High-quality images and videos can go a long way towards making your site look professional.

The first step in customizing a site is to select a theme. With WordPress, there are over 8,600 themes, both free and paid. For simple portfolios, we recommend using portfolio-related themes.

To install a theme on WordPress, head to Dashboard -> Appearance -> Themes -> Add New.

Appearances section in WordPress.

Once you have installed and activated the theme, customize your portfolio accordingly. Head to Dashboard -> Appearance -> Customize to make changes to the website design. We recommend looking for design inspirations to help optimize your customization.

Other than the theme, WordPress also allows for the full customization of the color and font used on your website.

For colors, consider referring to color psychology to help find a suitable color scheme for your portfolio. To further establish the identity of your site, you’ll need to choose an appropriate website font as well.

Once you have decided on a design, you’ll need to work on the content of your portfolio. Luckily for beginners, WordPress offers page builder plugins to help customize posts and pages with the use of a virtual interface.

Consider whether you want your portfolio to span many different pages, or rather, focus on a single one. Take Rob Hampson’s one-page website as an example, which manages to highlight all of the essential personal information and related projects within a singular, interactive space.

Rob Hampson's one-page website.

5. Set Up the Tools to Showcase Your Best Work

Once you have customized your site, the next step is to showcase your works and projects. The best way to display your portfolio is by creating a gallery. With WordPress, you just need to install a gallery or portfolio plugin.

Here are some of the best portfolio plugins on WordPress:

  • GridKit Portfolio Gallery – offers more options to showcase media than other plugins. It features a YouTube video gallery and includes an image slider and portfolio.
  • Visual Portfolio – features a visual builder, which shows what the gallery looks like before publication. There are several layouts available and an infinite scroll tool for unlimited images and projects.
  • Portfolio Gallery – showcases creative work in image format with filters and editing tools responsive to different devices.

There are different ways to create a gallery and showcase your work, depending on the industry and type of work. You might want to use different methods to showcase pictures, services, and intangible projects.

If your work is in the form of a service, the portfolio should highlight who you are and your credentials. For example, Gary Vaynerchuk displays his work with videos and podcasts. His homepage showcases a professional video that shares his life story.

Gary Vaynerchuck's website.

There is another way to display services in a portfolio, such as used in motivational speaker Erin King’s website. She uses a mixture of text, images, and videos to show her previous successful projects.

Erin King's website.

One more example comes from photographer Yasamin J Tehrani who uses a gallery slider to display her pictures. By showcasing high-resolution images, this kind of portfolio makes it easier for visitors to notice the finer details and quality of the works. Unfortunately, visitors cannot see multiple works at the same time with this approach.

Yasamin J Tehrani's website.

In comparison, check out the tiled gallery method used by fashion photographer Hoover Tung. The images appear much smaller at first, with visitors being able to click on them to get a more detailed look. This method allows for fully displaying the variety of your work..

Hoover Tung's website.

For your own website, we recommend displaying your best works and newest projects. Moreover, consider adding these elements to better showcase your successful projects:

  • Testimonial slider. Showcase the reviews and comments from previous clients or customers to add legitimacy to your work.
  • Social media links. Include links to your social media accounts for visitors to learn more about you and your work.
  • Multi-Language. Use a translator plugin to reach more people.
  • Logo. Create a logo for your branding to make the page professional and unique.

To choose how to showcase your work, look at the portfolio from your target audience’s perspective. From there, it will be easier to decide which layout is best for your gallery.

6. Set Up a Contact Form

Setting up a contact form makes it easier for potential new clients or customers to reach out. There are other ways to let visitors contact you, such as adding a link to your email, but a contact form is the most user-friendly option.

With WordPress, multiple contact form plugins are available, all adjustable and customizable to your needs. One of the best plugins for this is Contact Form 7, as it integrates third-party services and offers plenty of control over how your form looks.

Here are the steps to create a form on WordPress:

  1. Install Contact Form 7 plugin and click on the Activate button.
Activating the Contact Form 7 plugin on WordPress.
  1. Head to Dashboard -> Contact to create a form. This will create a default form, which you can customize later.
Setting up a contact form after installing Contact Forms 7 on WordPress.
  1. Click the Add New button to create a new form. Another option is to click on the Edit button of an existing form to make changes. For this example, we will edit the form created by the previous step instead of adding a new one.
Editing a contact form on WordPress.
  1. Under the Form section, add or take out any information accordingly. There are buttons to help find the appropriate code to add a section on the form. In this example, the form has fields to input a name, an email address, a subject, and a message.
Editing a contact form on WordPress.
  1. Once you add or remove the fields, it is also possible to change the text for the label. You can also customize the form’s default text. For example, instead of writing Your Message, write something more personal, such as: Let’s talk about how I can help you!
Adding a personalized message to a contact form on WordPress.
  1. After making the changes on the form, open the Mail tab. This step will help specify which email address to send the messages from the form. Click the Save button on the right side of the page to finish.
Adding an email address to a contact form on WordPress.
  1. Copy the Shortcode to add the form to your page.
The shortcode of a contact form on WordPress.
  1. Go to the web page where you want to add the form. For a portfolio, you might want to place your form at the end of your homepage. It can also be a great idea to set up a dedicated contact page. On the page, add a Shortcode block.
Adding a shortcode block on WordPress block editor.
  1. Paste the shortcode and click Publish.
Entering the shortcode of a form on WordPress block editor.
  1. The form will look like the image below on your contact page:
A finished contact form on WordPress.

Now that you know the steps to create a form on WordPress, here are some ways to optimize it:

  • Security. Add a reCAPTCHA to prevent spam from reaching your inbox.
  • Length. Include essential questions only as asking too many details might drive visitors away from contacting you.
  • Keep it professional. Check for typos and grammar mistakes. Even if you’re going for a casual tone, your website should still look professional.

7. Personalize Your Profile

An excellent online portfolio strikes a balance between being an only-business professional website and fully letting your personality shine through. One of the ways to achieve this golden ratio is by creating a unique about me page. Personalizing your profile makes it easier for visitors to connect with your work.

There are different methods to create an about me page. A popular way to do so is to list down previous works and achievements chronologically. Take a look at graphic designer Tim Smith’s portfolio, where he has listed down his years in the industry and bolded his skills and accomplishments accordingly.

Tim Smith's portfolio page.

Writing in chronological order makes it easier for visitors to follow your story. However, we recommend adding a snippet about yourself before the comprehensive biography. It will help those who do not have time to read your story.

Another option to write a profile is from a third-person point of view. Even though this method seems more professional, it is still possible to include some fun personal facts. Will Bryant’s bio in his design portfolio, for example, also includes his hobbies.

Will Bryant's bio page.

Personalizing your profile does not always mean only talking about yourself. An about me page can also focus on the work. Take UX Designer and Art Director Melanie Daveid’s portfolio as an example. She has only typed up a short snippet about who she is and chose to focus more on her work method.

The About Me section on Melanie Daveid's website.

A profile is an opportunity for potential clients and customers to know more about your background and skills. For the profile, consider the following elements:

  • Personal details. Provide context on what inspires you to help connect with a potential client or customer.
  • Professional experience. Include notable awards to show how others have recognized your skills.
  • Image. Add a photo of yourself, for example, taken when working in your home studio.
  • Proofreading. Check for any grammatical errors or typos to keep it professional.

8. Promote Your Portfolio and Gain More Exposure

It is essential to establish a strong online presence in order to attract potential clients and generate leads on new projects. Do so by promoting the portfolio website, optimizing the site’s content, and sharing it on other platforms.

Search engine optimization (SEO) plays an essential role in generating organic traffic. By optimizing your website content, the site will be able to rank higher in search engines. With WordPress, we recommend installing SEO plugins, such as Yoast SEO and Monsterinsights.

Once you have optimized the content internally, write blog posts, engage in email marketing, and share your portfolio on various social media platforms.

On this topic, social media integration is another way to increase the overall online presence. Consider directing any previously existing social media audiences to the portfolio as well as adding social media accounts on the site itself.

Adding a like and share button on a website will make it easier for visitors to share the portfolio on their social media platforms. For example, photographer Robert Lawler has a share button on his main menu.

The homepage of Robert Lawler's website.

Another way to direct social media users to a site is by using the Facebook Like button. If visitors click on the like button, they will directly share the post or page on their Facebook profile.

Furthermore, integrated social media profiles such as Twitter cards or Instagram posts help website visitors explore your online presence more. Shane Mielke’s portfolio is an example of using Twitter cards to make a portfolio more personal.

Twitter implementation on Shane Mielke's portfolio website.

Finally, make sure to update your portfolio and social media profiles regularly for more exposure online.

Tips to Create an Outstanding Portfolio

To achieve the best results, you should make your portfolio stand out from the competition. Here are five easy tips to follow:

  • Diversify work samples. Showcase your ability to take on different types of work by displaying a variety of projects. Also, include work or projects most relevant to the actual work you want to get in the future.
  • Keep it simple. Let your projects reflect your skillset rather than having to explain your skillset through text. Keep it easy to navigate for the visitors.
  • Focus on the work. Make sure that your portfolio focuses on your work instead of your personality. Adding a personal touch is important, but it is more vital to keep it professional.
  • Quality over quantity. All the work that you showcase should be of high quality. Remove any projects that do not meet your personal standards.

Examples of the Best Online Portfolios for Inspiration

Before you start creating your own portfolio website, check out three of our favorite portfolio websites for more ideas and inspiration:

1. Marleigh Culver

Marleigh Culver's portfolio website.

This design portfolio is a great example of a website that achieves the balance between professional and personal. The website uses soft and bright colors, such as white and yellow, and individual images that make it appear approachable.

In addition, the web structure results in a great user experience. The menu bar, which is accessible from both the header and footer of the homepage, allows for seamless navigation and unobstructed viewing of the author’s works.

Furthermore, the homepage includes such important information as who the author is, an example of an impressive project she had completed, as well as a list of notable previous clients.

2. Sean Halpin

Sean Halpin's portfolio website.

Another method to entice potential employers and facilitate sharing is to create a web design portfolio with a unique style. As a web designer, Sean Halpin showcases his aesthetic preferences, design capabilities, and technical prowess in his single-page portfolio.

The quirky and personal tone of the website helps the visitor connect with its author, creating a feeling of transparency and honesty. The responsive design is interactive and allows for as much information as the viewer requires – one can either skim through examples of his work or click on them to read up on the specifics.

To top it all off, the portfolio also utilizes a live chatbot for visitors to ask for further inquiries. Keeping in line with the approachability of the website, this method makes the author seem easier to contact when compared to using a mailing form.

3. Tara Pixley

Tara Pixley's portfolio website.

As with most photography portfolios, Tara Pixley’s website showcases the importance of putting the pictures at the front and center. With a minimalist design aesthetic and an asymmetrical grid layout on the homepage, the artist succeeds in instantly displaying the full variety of her work, all without a lengthy bio section or unnecessary clutter.

The sticky navigation menu on the left side of the page allows the visitor to easily explore the entirety of the website. The about and contact pages are left separate from the photography showcases, having each page serve its clear and defined function.

Conclusion

Creating an impressive online portfolio will help attract new clients or customers. It is also an effective way to document previous projects and showcase your skills. Furthermore, an online portfolio is easier to update and more accessible compared to a hard-copy portfolio.

We have shared eight steps on how to make your own portfolio using WordPress. Here is a quick recap:

  1. Set up the platform.
  2. Register a domain name.
  3. Find a reliable web host.
  4. Customize your portfolio.
  5. Set up the tools to showcase your best work.
  6. Set up a contact form.
  7. Personalize your profile.
  8. Promote your portfolio and gain more exposure.

Note that some of these steps still apply when using a different platform than WordPress.

To help you along your journey, we’ve also shared tips on optimizing your portfolio and making it stand out from others. In addition, we’ve also taken a look at some examples of impressive online portfolios for inspiration.

Now, it’s time for you to go ahead and create an online portfolio site of your own. Don’t hesitate to leave a comment if you have some feedback to share.

Author
The author

Domantas G.

Domantas leads the content and SEO teams forward with fresh ideas and out of the box approaches. Armed with extensive SEO and marketing knowledge, he aims to spread the word of Hostinger to every corner of the world. During his free time, Domantas likes to hone his web development skills and travel to exotic places.