During my latest portfolio website revamp, I made an effort to prioritize my objectives alongside design decisions.
In digital design, a portfolio website is an invaluable companion to your resume. Prior to hiring (or interviewing) a candidate for a position in the digital field, a prospective employer will typically want to see samples of your work. If you want to be hired, you should probably have a portfolio website!
My previous portfolio website was completed in 2014. Although I periodically made updates to the content, I began to cringe when I saw my old code and other areas that could be improved.
I have been doing a lot of reading about the best practices when building a portfolio website, and here are three of my biggest takeaways:
- Sharing screenshots of your work is not enough! Your portfolio website should include case studies that detail your specific contribution and your creative process.
- Carefully consider the role of your portfolio website. How do you want the world to see you?
- Hiring managers only spend a short time reviewing each candidates’ portfolio.
I also examined my website metrics and gained a few important insights.
- Not the first stop: The majority of my traffic comes from my blog (oh hello!) and other referrals.
- One and done: The majority of my visitors view less than 2 pages per session. My most popular page (by far) was my “Pickle Rick” transformation. The page was originally a “dead end”, with no opportunity for users to make a deeper visit. I hope to avoid missed opportunities like this on my new website.
- Mobile second: I certainly don’t want to ignore mobile users, but the majority of my visitors are using a desktop.
- Elevator pitch: There’s a lot of competition on the world wide web! I think that I have to accept that I’ve only got around 2 minutes to get my point across. I want to keep my content concise and easy to navigate!
With new skills, experiences, and “best practices” in mind — I began the redesign process!
In addition to sharing my latest work, here are a few of the things that I sought to improve.
- Building my brand: I want to create a consistent personal brand throughout my web presence. It began with my new logo, which you can read about here.
- SVG Images: I updated my Web Config to display Scalable Vector Graphics properly. Finally!
- Safety: The addition of an SSL certificate will assure my visitors that they will have a safe browsing experience. An SSL certificate should also help my SEO!
- Not just pretty pictures: Although I strive to create visually appealing content, I believe that great design is a marriage of form and function and I want my portfolio website to communicate that.
- Monochromatic color scheme: I feel that using a single color will call attention to my work samples and other colored elements. I drew some inspiration from of one of my favorite children’s books “Harold and the Purple Crayon”. In the book, Harold creates a fantasy world using a purple crayon. Harold is portrayed in more natural colors, while the world he creates is a vibrant purple line drawing.
I carefully considered what should be included and how the content should be presented.
- Drawing a line: Split screen homepages are a hot trend. But, I didn’t choose a split screen layout to be trendy. The inclusion of Billy on my portfolio website can cause confusion for visitors. Frequently, people assume that my name is Billy or that the website is an advertisement for a cartoon. I am hoping that the literal visual separation will create a clear delineation between Billy and I.
- Storytelling: The ability to communicate via the written word is increasingly valued in design and marketing. To demonstrate my storytelling ability, I wanted to share the “Billy the Spacekid” comic book pages.
Some of my ideas didn’t exactly hit the mark the first time around. Here are a few notes from “behind the scenes”.
- Building character: My initial caricatures of Billy and myself were too detailed and “organic” looking. I started over almost immediately with the goal of creating a more geometric and simplified line work.
- Don’t stop now: Full screen artwork appeared on my first draft of my “skills detail” pages. But I felt that it created an “illusion of completeness” and users may not realize that they should scroll to view additional work.
- Movement invites interaction: Some studies have shown that movement attracts human attention more so than color change. I added movement to my homepage to encourage visitors to move back and forth between to the two sections. On the “skills” pages, I added an animation to instruct visitors to scroll down to proceed.