During my latest 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.

The 2014 website.

Preparation

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:

  1. Sharing screenshots of your work is not enough! Your portfolio website should include case studies that detail your specific contribution and your creative process.
  2. Carefully consider the role of your portfolio website. How do you want the world to see you?
  3. Hiring managers only spend a short time reviewing each candidates’ portfolio.
This was an informative thread!

I also examined my website metrics and gained a few important insights.

Website data from 2014–2017.
  • 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!

The redesign

With new skills, experiences, and “best practices” in mind — I began the redesign process!

Launch my completed portfolio website!

OVERVIEW

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.
The new “Billy the Spacekid” wordmark.
  • 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!
  • Improved performance: I want to write efficient code that is free of errors. I also plan to minimize my use of Javascript. Increased speed should help improve my website’s and 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.
Great design is just the beginning!
  • 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.
“Harold and the Purple Crayon” by Crockett Johnson, 1955.

THE CONTENT

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.
My split screen homepage (Desktop).
  • Selling myself: Tobias Van Schneider says that “about me” may be the most important page on your website. During this redesign, I made it a point to pay special attention to my “about me” page which now features some stats, endorsements, and brief video.
Billy expresses his displeasure with a broken experience.
You can read the first few pages of the “Billy the Spacekid” comic book!

NOTES

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.
My first drawing (left) was too detailed.
  • 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.
Movement has been added to invite interaction or provide instructions.





Source link https://uxdesign.cc/portfolio-with-a--aac15a8016aa?source=rss—-138adf9c44c—4

LEAVE A REPLY

Please enter your comment!
Please enter your name here