Color: The black background of her home page makes the white text pop. Most portfolios stick to a white background, so this makes her portfolio more memorable.
Organization: Clearly labels her projects with numbers (01, 02, 03, etc). This is great if a client / recruiter is skimming your content and needs to quickly come back to a project.
Font-Size Contrast: By using large titles and small text, a clear contrast is made showing that the smaller text supports the large text. The reader’s eyes are also drawn to the larger text first, so she clearly set the reading order for the reader.
Images: Her use of large images make you pay attention to them. This is clearly a conscious design decision. Her projects also show an incredible amount of images to compliment her words, which is a great strategy for the kind of work she showcases.
Videos: Along with many images, she shows many videos of prototypes. This allows viewers to see how users can interact with her designs. If you’re looking for clients, this is something they would absolutely want to see.
Videography: Viggo’s home page greets you with a video. This video gives you a very brief personal intro, all the while showing snippets of his design process, hobbies, and videography skills. With a single video on loop, a client or recruiter is able to see his mastery in many things.
Layout: Like with many of the portfolios here, simplicity is a common factor. A masterful designer is able to guide where you look through a simple layout. In this case, you see two very simple columns showing his projects while only showing details of the project when you hover over the project or click on it.
Color: Viggo keeps to a simple color pallette, largely white, grey, black, and cool colors. This color combo gives an air of professional quality. If you need another example of this, think of Apple.
Color: To match the Google-ness of working at Google, Andre uses bright and vivid colors in his images. If you’re looking to be hired by a company or client, matching their aesthetic is a great way to get their attention.
Information Architecture: His projects are seen front-and-center as soon as you enter his portfolio website. No vertical scrolling required. Once you enter into one of his projects, the images and description are put into one column. This keeps the user’s attention to one thing at a time.
Social Media: Most of his images can be saved onto Pinterest by hovering over the image and then pressing the Pinterest button that appears. If you want free publicity, this strategy will definitely help you.
Interaction Design: The illustration on her home page interacts with your mouse, creating a 3D perspective as you move your mouse around. The illustration is already breathtaking, but making it interactable really brings it to life.
Emotion: The colors she uses are vivid and diverse. The sense you get going into her website is warmth and nostalgia. As an illustrator, if your goal is to draw people into your work, you want your work to be able to demonstrate this on its own.
Case Study: Although she considers herself an illustrator, she has elements of a UX designer in her work. She talks about her research process in a case study. And to not overwhelm her readers, she doesn’t dive deeply into every single project, but goes in depths in only one. As a designer, you want to communicate your design process to clients in order to justify your credibility and worth.
Credibility: In her case study, Alice gives a quote from a client that communicates Alice’s ability. This raises her credibility in the eyes of her targeted readers–clients.
Clarity: She shows a very clear style of illustration in her work. This will let a visiting client or potential employer know what her specialty is and if she’ll be a good match for them; in other words, there is no need for guessing.
Layout: There is no wasting of space here. She uses three columns with minimum padding to showcase her artwork.
Theme: Shows a very clear theme–vibrant, colorful, fun, modern. A consistent theme is always good for creating a brand.
Shop: As a designer, you want to make it easy for people to not only see your work, but also to buy it. The less friction you can create from discovery to purchase, the easier it will be to successfully make profit.
Portfolio #7: Colin Chen
(This portfolio has since been discontinued.)
Role: UX / UI / Front End
Why this portfolio works:
Color: Uses neutral colors (grays and white) along with red as the highlight color. This allows him to draw your attention where he wants it.
Patterns: Uses a wave pattern not to just look nice, but also to separate the main categories of content, like Home and Portfolio.
Simplicity: Along the lines of color simplicity, by only showing a few elements at a time, your focus is always where he decides for it to be.
Animations: He uses some animations in his portfolio, but they aren’t overwhelming or distracting. They enhance his portfolio instead of taking away from it.
Concise: The main categories of his website are very clearly labeled and easy to see: Home, Portfolio, About, and Contact.
Have an idea? Need some design expertise? Let us help.