These are the take-aways from my Q&A sessions working with students on their portfolios at Thinkful. Hopefully these guidelines will make building a successful portfolio site straightforward.
Keep it simple! Unless you have a blog, or some other major section to your site, it's likely that you don't even need a navigation. In practice, making a "cool reveal" or an awesome unique style is much better than packing in more pages and more projects. Here are the critical sections.
- ~150-500 character "About" summary: name, city, role/aspiring role/past roles, fun fact(s)
- Your email
- 3-6 portfolio projects. If you have two projects VASTLY better than 4 others, highlight those first, bigger.
- title, demo link, github link required
- ~300-character description, recommended if you're sticking with a minimal number of projects
- No description is totally fine, but make sure the Readme on github covers the goals and tech used in the project.
- CP program requires 4 "portfolio-worthy" projects under your belt, but there's no hard rule that you HAVE to show all 4
- social links: github, twitter, linkedin. got hobbies??? soundcloud, medium, goodreads... max ~5-6
- either use the service name and no icons, or consistent e.g. an icomoon font (symbolset social is super good)
- (not 100% necessary) image of you, either as background or small avatar. Minimum ~80px square, background-sized, or ~120-220px rectangle recommended
If you made a really nice layout but worry about fitting another project in – it's ok, just leave a project off. Someone can find it on your github.
It's better to put skills next to each project, rather than have a separate "skills" section.
The fewer elements, the better. You can add a touch of animation or some sort of flair, but DO NOT put long animations + transitions on everything. "Too much" is a more common mistake than "Not enough" when it comes to flair.
Recommended limits:
- max 2 font families (e.g. "Helvetica" is a font family)
- max 4 font variations (Helvetica Bold, 24px size, 36px line height = 1 variation)
- max 3 colors (background, foreground, highlight/accent)
It's not easy to go above these limits and retain a quality, cohesive page feel. Unless you're an experienced designer, it's better to get more crazy within these limits, than to ignore them and attempt to patch it back together.
For fonts, I'd recommend sticking to one Sans-serif font family for the majority of your text. Some introductory greeting or your name could be in a second font family.
Good google fonts: https://www.typewolf.com/open-source-web-fonts
If you want a more unique font, either sign up for Typekit (free for portfolios or with an Adobe account IIRC?) or buy one of these fonts: https://www.fontsquirrel.com/fonts/list/almost_free – FontSquirrel can also convert an OTF into webfonts, but I didn't tell you about it & don't condone bootleg webfonts.
For colors, you want two go-to colors for your background and text. Most of the time this will be white (#f8f8f8 or lighter) for your background and some type of dark gray or black (#333333 is a good start). Unless you're making a space-themed page, stay away from #000000 (full black) – it's not a natural color, and is one of the few colors where "too much contrast" can be a problem. A third color, some kind of stark but not too blinding primary color, is where you get to show your personality a bit. You can definitely have a couple variations on your accent color, e.g. colors with the same hue but brighter / darker.
A good place to find/steal color schemes is http://brandcolors.net/
Chances are, you didn't have 4 years of art school, painting classes, and can barely define "contrast," but you can still tell a beautiful site from the rest. As you read articles online or look at other people's portfolios, or whatever other activity you do online, keep an eye out for loud layouts, curious colors, and 🔥 fonts. For typography, compare the sizes of the big and small texts, the serif and sans-serif combinations, and the overall "visual weight" of the text - a function of boldness and the color contrast with its surroundings.
Remember that you can always inspect the page and steal the good parts! There's definitely an art to stealing web designs from your favorite sites, but don't hesitate to nab a font + color combination because you think it's unfair to the original creator. Professional designers pick and place colors and font variations / combinations all the time.
Good artists copy, great artists steal. –Picasso
If you have a blog or significant sections (e.g. a design portfolio, other hobby), it's probably best to make a multi-page site. Otherwise, stick with a one-pager portfolio. If it's compact enough, ~2 screens, you don't need a nav. If you have a lot of info per project, and some stuff that is far to scroll to, add a navigation on the top or left side.
A multi-page site should probably just have a top navigation that's shared across the different pages.
Go for at least 1-2 unique touches on the page. These could be some interactive / hover element, inspiring quotes, a picture you took, some pet or hobby in your life. If your page looks like a plain twitter bootstrap thing with a few projects and standard set of links, you won't stand out from the wider field of candidates. My personal take is that something quirky is good. The one exception to this is if you're going for very classy clients / freelancing rather than a day job, you may want to turn up the CSS polish and keep any quirks to a minimum or simply in copy (in your text, not in presentation).
Thinkful project on portfolios: https://www.thinkful.com/projects/your-portfolio-583/
Basic portfolio designs that match the criteria above: