There are many factors that can contribute to an impressive portfolio website, but none are as imperative as the header or first section of a designer’s portfolio website. A successful portfolio website header includes 3 key elements that I find most designers and creatives leaving out.
- *The three most important elements you need for a successful portfolio website header are an attention-grabbing headline, a professional and creative image of yourself, and a clear and easily accessible call to action.**
Including all three of these elements in your portfolio website header, will impress potential new clients visiting your website and lead to new opportunities as you grow in your design career.
What Is A Website Header?
To simply put it, a website header is the very first section of your website. This section usually contains the most pertinent information that you want to convey to any visitor coming to your portfolio website. In the early web design days, the header was a narrow section at the top of a website that would likely include a logo and other information. In current day website design, the header section refers to all of the space above the bottom of the browser. Some portfolio websites I’ve seen around the web are made up of only a header section and others contain sections following the header with more expansive information spread throughout them. Either method is acceptable as long as it follows your website’s strategy, design, and goals.
Why Is A Header Section Important?
Since the website header is the very first section visitors will see when visiting your portfolio website, it can be argued that this is the most important section. You can think of the header section of your portfolio website as the first impression visitors get when they visit your portfolio website. The header section of your portfolio website should quickly summarize who you are, what it is you do or offer, and how to get in contact with you to potentially work together. When I say “quickly summarize”, and this may sound counterintuitive, this means keeping these pieces of information to the absolute bare minimum, enough so that your target demographic or ideal clients will still understand. If this sounds confusing, don’t worry we’ll go into more detail of each piece later on in this article. I know this might sound scary but also keep in mind that these 3 important pieces of information can live throughout your portfolio website and be expanded upon with larger descriptions. I have followed this format since graduating from design school and it has resulted in many new opportunities for client projects, full-time jobs, and expanding my network for future design work.
“if a visitor were to land on your website and never actually scroll to the information below, what would they come away with?”
Portfolio Website Design Tip
Something that echoes in my mind whenever I review a portfolio website or even redesign my own is “if a visitor were to land on your website and never actually scroll to the information below, what would they come away with?”. Another piece of wisdom that sticks with me whenever I am designing websites that I have learned over the years being a digital designer is that people tend to land on a website page and immediately try to scroll as far as they can before returning to the top of the page. While keeping both of these bits of information in mind it is necessary to strike a balance between the two. I believe if you can create a successful header section for your portfolio website, then you can cause anyone visiting to stop and view the information before proceeding through the rest of your portfolio website.
The 3 Important Elements You Need In Your Portfolio Website Header
1\. A Smashing Headline
The first element that should be most present in the header section of your portfolio website should be a headline. Some may say that this sounds obvious but the headline is very important as it should grab any new visitor's attention and potentially stop them in their scrolling rampage. The headline also needs to perform double duty by quickly summarizing in a few words what it is you do as a designer or creative. In the past, I have seen a lot of designers use the headline as an introduction saying something along the lines of “Hello, my name is Jon” or “Hi, nice to meet you”. These are fine, I guess, but I believe this method is very overused and leaves designers missing out. My most recent portfolio headline that I have been using as of writing this article is “Business meets Design” as I have found myself working a lot within larger companies that have existing businesses as a consultant/designer. The idea for this headline came about as I have had more conversations with directors or leaders in the more “businessy” departments of companies rather than creative directors of design departments. Although this headline is simple and I’ll be the first to admit not the most elaborate, it has proven to resonate with the demographic of people I tend to meet with the most. There are few key pieces we can extract from this headline example that you can use your own headline.
- It’s as simple as simple gets with only 3 words in the headline. I would recommend that your headline is no more than 8-10 words.
- This headline was crafted with my “ideal” client in mind. Individuals that work in businesses that need a creative partner with good design skills but can also interface with other aspects of the business.
- Finally, as you can see in the image below, my headline is the largest item in my header section and most likely the first thing visitors see when they come to my portfolio website.
As I mentioned before you can absolutely choose to elaborate on this headline in an additional section on your portfolio website or as I have done with a smaller description below the headline. In my case, this was definitely needed as I mentioned that my current headline is very very simple. Almost too simple. In the next iteration of my header section headline for my portfolio website(if I ever finish it) I have chosen to remove the description entirely and opted for a large in-your-face headline that gets directly to what I do as a designer. I’ll share it on my instagram or tiktok when I am finished.
2\. Picture of YOU
Yes, the second important piece to the header section of your portfolio website is a picture of you. And I don’t mean the same photo you use for your Instagram page, or even one from your LinkedIn(which you should absolutely have). Unless you would consider it professional of course. I mean a photo that helps give any visitor a sense of your style, personality, and taste. You’ll hear me say this a lot in this article but your portfolio website is your first impression to potential new clients. This is your business card. This is your lifeline. This is pretty much everything when it comes to becoming a successful working creative. This photo of you should be of the highest quality. For reference, I have provided the one I use on my website below as an example.
The reason why I think including a photo of yourself in the header section of your portfolio website is so important is that it creates a connection with anyone visiting your portfolio website. It puts a face to the designer on the other side of the internet. It shows that you are not just another designer on the internet that someone found through google searching “graphic designer”. Also not to mention, how many other designer websites have you seen include a picture of themselves? I can’t tell you how many amazing portfolio websites I have seen and never once knew what they looked like. Regardless of whether someone is looking for a graphic designer or a plumber, people want to work with other people they see themselves in. They want to know that they will get along with this person and have some common thread that will allow them to share similar ideas. What better solution to build a bridge between you and this potential new client, than a photo of yourself expressing all of your amazing personality. If you like color and loud extravagant designs, make sure you have that. If you have more refined and minimal style, make sure you communicate that in some way. This photo of you in the header section of your portfolio website is critical but also don’t let that stop you from having fun with it. The chair I’m sitting in my photo was something I found while thrifting which is something I love to do whenever I can. Make sure to keep it fun and true to yourself as this will definitely come across to whoever visits your website in the future.
3\. Call to action
The third and final piece you need to make sure to have in the header section of your portfolio website is a call to action. Also referred to as a CTA. When I first started to design my portfolio website I was hesitant on including this because I felt like it was too “salesy” and that it made me less of a designer. I had the attitude of “if they want to work with me, they will find my email somewhere on my website and they will contact me”. Now after a couple of years I couldn’t feel any more opposite about that attitude. A few years back I finally decided to include a call to action in the header section of my portfolio website with the mentality that I wanted to make it as easy as possible for anyone to get in touch with me. Even if that introduction or conversation didn’t result in any immediate work. Using a tool like Calendly, I was able to create a streamlined way for visitors to schedule an introduction meeting with me to talk about their project on their own time. Not only does using Calendly make this easier for new visitors to my portfolio website, but it also allows me to start building a list of potential clients I can contact later down the road.
Where your call to action should go in the header section of your portfolio website is completely up to you but do keep in mind it should be very prominent in your header section. Most of the time I recommend including it below the headline in your header section. If you would like, you can also place the call to action in the navigation of your website as I have so that it is always present no matter what page someone visits. The challenge with this is to make sure that you have correctly established a hierarchy in your header section and differentiated the two so visitors will not be confused or overwhelmed.
Do You Need All Three?
If you are just starting off as a designer and embarking on the wonderful journey that is building your portfolio website, then I would recommend including all three of these important pieces in the header section of your portfolio website. After years of working and redesigning my own personal portfolio website, I truly feel as if I have found the sweet spot in my current portfolio website design. While you can absolutely find plenty of examples on the web from great designers that may not have these three pieces. I would feel confident in saying that they are doing a lot of work in the background of their design practices to make it work for them. Whether that be networking online with individuals or working with other parties to create a stream of work. They have found what works for them and that is completely fine. However, if you are just starting your career as a graphic designer or creative then take the stress out of the process and use these three pieces as a great starting point for your portfolio website. Over time you will be able to better understand what works for you and create a design that is best for your style of work.
Add Your Own Style
Now that we have covered the three most important elements to include in the header section of your portfolio website. It is also necessary to talk about the smaller details that will contribute to the overall success of your header section design. You can think of the three elements we just talked about in the article as the underlying structure or framework to your header section. To take it to the next level it is key to consider design choices such as colors, typefaces, and layout.
As a designer, I believe that the typeface you choose can say a lot about you as a designer. Typography is a crucial tool that we use in design projects. If you are going for a professional and minimal look, try out a lightweight sans-serif. If you have more of a bubbly or big personality, try out a bolder, more round typeface.
When it comes to color, I believe there are a few approaches. One approach can include coming up with a complete color palette that you use through your website no matter what page you are on. The second approach and the one that I like to use for my personal portfolio website is unique color palette for each project or section. There is no right or wrong with either of these approaches and it all comes down to what fits your personality and creative profile so have fun with it.
The last piece in adding some style to the header section of your website portfolio is the layout. While there are a number of combinations you can come up with to create a unique layout for your header section, it is key to create something that is cohesive and establishes a clear hierarchy with the 3 elements we just talked about. A creative layout can absolutely stop new visitors from scrolling and completely missing your well thought out header section. However, sometimes it is worth keeping in mind “K.I.S.S.”. Keep it simple silly.
Do You Need To Have Animation?
Animations are another great addition to your portfolio website. As more tools are developed to make website design more accessible, the use of animations will become more widely used throughout the web. Adding animations to any portfolio website can add flare and style to your portfolio website that will make you stand out from the crowd. However, this does not mean you need animations to have a great portfolio website. You can think of animations as a second or even third coat of polish some apply when washing their cars. Not everyone will notice it but the ones who do will understand you have a high standard of execution. If you intend on adding animations to your portfolio website, try to keep in mind that less is more in this situation. It can be overwhelming to have multiple elements animating on screen at once. It will also cause your portfolio website to take a longer amount of time to load resulting in visitors waiting or even completely leaving your website before the information is displayed.
More Portfolio Website Help
While building your design portfolio website can be a hefty and sometimes stressful endeavor. Focusing on one section at a time, like the header section of your design portfolio website first can be an efficient way to make meaningful progress. While your design portfolio website is indeed a showcase of all the amazing projects, skills, and experience you have gained. It is also a powerful tool that can be used to win over clients as soon as they set their eyes on it. I believe that your design portfolio website can open up so many new doors with fulfilling and creative opportunities awaiting behind them. That is why I have chosen to focus on upgrading your portfolio website in an upcoming series of articles that will be published here on the website so stay tuned!
In addition to publishing new articles focusing on your portfolio websites, I also offer completely free 1-on-1 portfolio reviews over zoom to any student or creative professional that is looking to turn their portfolio into a client winning tool. You can schedule a free session using this link here.
