How To Build Your Professional Website

How to Build Your Professional Website Image of Computer and Mobile

Hi there, I’m Pari. I’m a multidisciplinary designer with a focus on web design. I’m a designer because I love creating experiences and I believe that design should be fun, not bound by rules or expectations. I believe in design assisting a vision, not taking over. And today I hope to assist your vision of bringing your work to life in a new way on the internet.

We’re going to go over a lot today—the five Ws of web design. 

  1. Why you need a website.
  2. Where to find inspiration.
  3. What’s on it.
  4. Who’s making it.
  5. When to update it.

And there will be other guides on how to make the website soon—Wordpress, Squarespace, Wix, you name it; stay tuned to the Whipsmart resources blog. Let’s get into it.

Why you need a website

With social media being the prevailing promotional avenue, I constantly ask myself why I’m even in the website business. What value could this website possibly bring that a well-manicured social profile couldn’t? 

We’ve all been caught in the “Ughhh, I really should update my portfolio/make a website/post more on social media” trap. But let’s let ourselves out of that for a bit and dream about what’s possible with your own website.

This is a foothold for your brand. 

Your website is evergreen. It isn’t subjected to the whim of social media algorithms, updates, or unfollows, and it provides you a canvas for your brand that isn’t limited by layout of the Instagram grid, 240 characters on Twitter, or the all-too-accurate TikTok algorithm. The beautiful thing about having your own site is that you can display anything you want, however you want, whenever you want. Slideshows, videos, text posts, songs, and even metaverses can all be parked on your very own domain. 

And of course there are going to be people who aren’t on social media, whether that audience is your direct clientele or customer-base or their network, you’re going to run into someone who can’t click ‘Follow’ and keep you in their social database.

And for the most literal translation of “value”—depending on what your creative pursuit is—a site can hold your online store which opens up a new revenue stream for your creativity. 

On your site you can be yourself, be seen, and sell.

What to say

I find that it’s best to start this process from the content of your website, not the design. Let’s start at the overall structure of your site before deciding on the content. A typical portfolio website has three parts:

  1. Showcase
  2. Services
  3. About

Within those sections you have another decision to make: Do you want to give everyone a snapshot of your passions, hobbies, work, and personal life? Or would you rather keep their focus on your work?

Your Work

Your website should profile the work that you want to do. If you’re a graphic designer and you really want to do branding work, but are only showing infographics on your portfolio, you’re probably going to get a bunch of clients who want infographics. Until you make an effort to show visitors what you want to do, you may be stuck doing whatever you’re showcasing.

Filip Febar, a digital designer and art director, shows us right on the title card of each project that he can do branding, graphic, or digital design, and web development.

The decision to make in showcasing your work is how much context it requires—if you’re a UX professional, the standard will be to have a case study for each project, while if you’re a painter you may only need to show an image of the canvas and a few pieces of  information on the piece like the title or cost. Whichever path you choose, make it concise. The average time spent on business-to-business websites in 2021 was just 84-seconds. You’ve got to make your impression and make it fast!

Your Services/Offerings

The showcase of your work will give visitors a good idea of what you can do, but it doesn’t tell them what you want to do. Showing a mockup of the packaging illustration you did is great, but people need to know that you like doing character-driven illustrations and not die-lines. Clue visitors into exactly what you want to do and how they fit into your work.


About You

How you brand yourself or your business is a big undertaking. It can be daunting to think about how you come off to people who may want to work with you, but let’s hold those feelings off for a bit and ground ourselves in the reality of what we’re showing to our site’s visitors.

  1. A snappy opening line about what you do and who you are.
  2. A longer, 100-150 word bio that’s in your About.

If you’re struggling with what to say, start picking apart your resume and social media profiles. These are two artifacts that are already groomed for public consumption, so there’s bound to be some tried and true info about you on either one. Is there a job that defines you well, a passion you want to show off, or a fun fact you can’t leave off? 

Where to find inspiration

“Good artist copy, great artists steal” - Pablo Picasso (he might’ve stolen this quote)

The best advice I’ve ever received was that while learning a skill, you should copy everything you love. Chord-for-chord, pixel-for-pixel, word-for-word. Think of skills as languages. At first, you’re going to be copying everything your teacher says, but eventually you’ll learn enough to speak on your own, and once you’re fluent you’ll start to use more slang, and maybe even come up with your own sayings. If you’re anything like me when I started out, you’re in that first phase of learning. So for now, copy until you understand the language. Look at websites from people who do what you do and notice the structure. Are there multiple pages, or just one long scroll? Is their work on the front page, or tucked away into concise case studies? How many fonts are they using? Why does a crazy background color work on this site, but not that one?

There’s a few key parts that give every website its unique character: typography, interactions, and layout design. Each of these categories is its own career, so for now I’ll just show you where to look for inspiration.

Typography

Typewolf run by Jeremiah Shoaf is my first pick. It’s updated daily, and this archive shows not only what fonts are being used on the site, but with which fonts they’re being paired (pairing fonts is half the battle of finding a good one!) The site also shows where you can purchase or download the font. If you’re in need of more broad inspiration, Fonts In Use is a gigantic archive of fonts and pairings used in every medium imaginable. Sometimes I’ll find a design that sparks some inspiration that I’ll use to go find a font on Adobe Fonts (if you have a Creative Cloud subscription) or a number of other free or open source type foundries.

Layout Design & Interactions

There’s an infinite amount of options for laying out your website. Luckily, most of the time it won’t be your job to figure this part out. There are beautiful templates and themes on all major website building platforms that make the hard work of design much, much easier. And even if you do find yourself wanting a more custom design, a freelancer or agency will be able to handle the design for you.

Interactions are animations that are triggered by an action. For instance, a text link changing colors when you hover your mouse over it, or a picture appearing when a section is scrolled to. Some website builders (Squarespace, Wix, and the like) come with options for interactions, but often it’s a bit more complex and may require you to hire a web designer to implement on your site. There’s a world of possibilities within interactions and there’s no right or wrong way to bring your site to life—the only thing that matters is if your interactions match the personality of the content and brand itself. Goliath Entertainment has gone absolutely bonkers with the amount of fun interactions on their site and it works really well for them because they’re in the party-planning business. On the opposite side of the spectrum we have Antinomy Studio—a minimal, sleek website that only has a handful of animations that pairs nicely with their portfolio of work for modern, digital brands. 

Using the following resources, try to find some sites that are designed in a way you relate to and notice the interactions they have. Are they sleek and smooth? Colorful and playful? Awwwards has the deepest archive of vetted works, while Hoverstat.es, WOW – WEB, and Site Inspire are more focused, curated lists. I’d recommend staying away from Dribbble for now—I find that many of the designs aren’t rooted in practical design and you may end up with inspiration overload that can’t materialize.

Now that you’ve got your inspiration figured out, let’s start thinking about where you can put it.

Where to get creative

Website building platforms (Squarespace/Wix/Wordpress) have a suite of paid or free templates to fit your needs as an artist, photographer, small business, agency, etc. However, with this ease of access, template designs have become so common that they’ve started to look common too. Your portfolio of work is the most important part of your website and a popular template won’t detract from that, but it’s a nice touch to think outside the box and make the template yours by adding some touches of personality.

Fonts

Most sites nowadays are set in a combination of sans serif and serif typefaces. Unless you’re experienced with font choices, I’d caution to stick with just one font family and maybe one display typeface for big words and titles. This means you could use something like Helvetica for your whole website, but the paragraphs might be set in 18pt Helvetica Regular, while the titles are set 32pt Helvetica Bold. Fonts are a daunting topic, so I’d highly recommend Toptal’s primer on fonts and how to combine them for more information on the topic.

Colors

Color is often the first line of defense for accessibility—you must choose colors for your fonts and backgrounds that have a high enough contrast to be read by visitors with visual impairments. WebAIM has a great contrast checker to make sure you’re hitting the Web Content Accessibility Guidelines. It’s great to hit the AAA standard, but AA is acceptable for any site that’s not getting more than a few hundred visits per day.

Interactions

From the team over at GSoft

Hover states (like when you put your mouse over a link it grows, shrinks, or bounces around) are always a nice touch and are usually available to edit on most website builders. Upscaling a button, changing a link’s color, or adding other effects are a great way to make your website feel more robust without complicating the overall design.

Details

And for the pièce de résistance, change the favicon (AKA that little 32px by 32px icon in your tab bar). You can find the option to change your favicon in the settings of your website on whichever platform you’re using. If you need to create a favicon, you can do so in any design program or on favicon.io.

The most common design faux paus is to leave the black Squarespace cube up. Image from Squarespace.

Who to hire

If all of this customization isn’t your jam and you’ve got a little more padding in your pockets, you can always hire someone to design your website for you. A professionally designed website can cost anywhere between $500–$5,000 (or more), depending on the level of customization. A designer working within a template will be on the low end of that spectrum, a fully-custom designed and coded website will be at the top end. My best advice for finding a designer is to make sure that you like their work—if you’re unimpressed with their designs or they’re good but just not speaking to you, no amount of feedback will make it better. Finding a designer you love can be hard though. Some places I’d recommend looking are: 

This is a significant investment and it has the chance to put your work in front of many new eyes. From just being proud of your cool new website, to winning an Awwward, to opening a custom online store, there’s a lot of growth potential that can justify the price of a custom website.

Domain Name

While domain names used to be the end all be all of SEO and organic traffic, nowadays they’re quite a bit more whimsical. There’s hundreds of top-level domains (.com, .org, .xyz, .art, etc.) to get creative with and make your business stand apart. With all of these new domains, it’s much easier to find one that’s concise and simple. Lengthy domains are hard to read—like janedoessuperawesomewebsite.com. It’s easy to lose the meaning when words jam together. Feel free to get creative with your domain. Arena (are.na) uses Namibia’s domain to complete their brand name, Mischief (mschf.xyz) uses the .xyz domain to show that their studio does anything and everything, and Hover States (hoverstat.es) uses Spain’s domain to complete their name.

Whichever domain you choose, just try to make it short and uncomplicated, being memorable and creative is just bonus points.

When to update

In the past, it was necessary to run regular maintenance on your website to update plugins and security. Luckily it’s now pretty easy to keep your website up for years with little to no maintenance. The continued work required nowadays is concerned with updating the content of your website. Your website is not a monolith—it should be up to date with your latest work. Keep in mind that the type of work you display is the type of work you’ll get, so choose your portfolio pieces wisely.

It’s up to you how current you want to keep your showcase—you can put up only your best works from the past ten years, or you could put up everything from the past year. When in doubt, ask a friend or client what they would want to see. 

Overall, try to step outside of yourself throughout this process—it can be stressful to decide what and how to showcase your work on the internet. When in doubt, ask a friend, family member, or peer to lend an eye. Everyone wants to see you succeed!

Quick Tips

  1. One of the most helpful things I’ve done while designing my own website was conduct user interviews with friends and clients. I asked them to have candid conversations with me about their thoughts on my work, branding, and offerings. Creating something for yourself is 10x harder than creating for someone else, and this is a simple way to get out of your own head and treat yourself as the client. It’s so easy to circle the drain for months at a time, belaboring little problems that you don’t have the benefit of seeing from a zoomed-out perspective.
  1. The above interviews are also a great place to ask for testimonials—these give you social proof that shows your work means something to other people. It’s a big, neon sign that says “Look! These other people like my services and so will you!”
  1. If you find yourself doing many similar projects, try productizing your services.This means you identify a repeatable service, take a snapshot of how much value it’s creating for your clients, and then market that neatly-packaged service. If you find yourself doing copywriting for local businesses, it might be worth creating a package for that clientele. Say, a $5,000 Small Business Starter Pack that you can take to market—this will allow you to immediately drop the admin work of negotiating prices with a new client, and will help you get your deliverables in a row so you can focus on the creative, not the administrative.

Parting Advice

The process of making your own website can be long and arduous, and on top of that it can be difficult to see exactly how certain features or designs affect your business. The good thing is that websites are not set in stone (or paper) and you can change yours anytime you want. So just put something out there—a year spent crafting the “perfect” portfolio is a year of time wasted if you could have a basic portfolio stood up in a few weeks.

This is some text inside of a div block.