Whether you use an engine like Squarespace or write your own web pages, there are a few basic principles one should keep in mind when it comes building to your next portfolio. There are some technical tips below, but let’s start with a strong mindset:
By definition, the “design” of anything from your website to a rocking chair is the marriage of aesthetic and function. These two poles have long battled for dominance over one another, but I’ll say right up front here that you’re building a portfolio to do something. Especially if you’re freelance, your website is meant to sell yourself. Consider a 21st-century audience’s fickle attention span as an imperative that your storefront must work more than it must look pretty. Even if you have a flare for the artful, remember: sweet functionality itself is a beautiful thing.
A journalism portfolio’s most crucial function is to capitalize on an editor’s short time and get that person into your work as quickly as possible. Don’t bury the lead. Your design should revolve around the transmission of who you are and what you do with utmost clarity.
Ask yourself what you’re doing here, anyway.
Before one even gets to designing it’s worth stepping back and making a list. What are you selling?
Most readers here will have already benefitted by being clearly defined as a journalist, but there’s an understandable temptation to try to be all things to all people as one tries to cobble together a freelance living. If you’re marketing both journalism and commercial work in the same space, you might take a hard look at what you’re actually trying to accomplish.
Assuming now that you’re just presenting journalism, can you narrow it further? Are you a visual journalist? Environmental? Tech? Feature writer? Mixed media?
While this selection process has the added benefit of getting you work you actually want to do, it’s also important in streamlining your message. In the same way you might try to keep a story tightly edited, so too must you carefully consider your wares. Don’t let anyone be distracted from your strongest assets.
Consider your website’s structure as your message’s graphical manifestation.
Before you get into any actual formatting, it’s worth thinking big-picture about how you deliver the goods. Make a list of the work that you want people to see first. Is it a single story? Is it a collection of beat reporting? Single images? Photo stories? Again, solid product definition helps as you start sketching.
The lead
Think of your landing page as your nut graf and any deeper pages as supporting paragraphs. A single glance at your homepage should let a visitor instantly know your story. If viewers click deeper, great, but you should assume they’re just skimming.
One of my favorite examples of a super-focused approach is freelance copywriter Joe Coleman’s portfolio. Coleman is not a journalist, but I think his site demonstrates a function-first mindset we ought to embrace. Don’t get hung up by his custom-coded slider, what makes his homepage so powerful is the concept behind it rather than the execution. He’s not even showing you examples of his work and it’s easy to understand right away what he’s selling: words, humor and a creative mindset across a continuum of style.
Another example: if your expertise is reporting many stories on a single subject across a span of time, maybe think of ways to visually represent your work is made up of many smaller pieces representing a larger whole. Consider another non-journalist entity, commercial production company, Smuggler. Their homepage layout is configured to show instantly that they’re creators of multitudes of shorter content.
This mindset is a great case why you should never have an “enter page.” Cut to the chase.
Supporting paragraphs
Everything else in your site should follow your lead with descending importance. Just as a story would guide a reader through the most important or compelling context first, your next-most crucial elements should be the next easiest to find. Without going into Graphic Design 101 (although you can), consider order in a list, font size and style, and color as choices to direct a viewer’s gaze to the next thing.
This seems seems simple but this is so important: make sure your contact information and location is the easiest information to find once someone’s been impressed by your homepage.
Everything else can follow. Consider scribbling out a flowchart to get your mind churning. How do pages fit in your content hierarchy? How can you keep it simple?
Find your weapon of choice.
There are plenty of valid options to build your site, but you should think about how often things should change when approaching any tool. Does this need to be more daily blog or more static yearbook?
A few possibilities from simplest to most complex:
Make a Tumblr page. (Easy maintain if you’re going for regular updates. Hard to customize visuals. Lends itself to super focused portfolios.)
- Build a site with Wix, Squarespace, Muse, Pressfolios or customize a WordPress template. (Easier to customize, but will cost you.)
- Code a static site. (Not good for regular updating but completely custom layout and function.)
- Code a WordPress site. (Powerful, searchable backend for lots of content. The most customizable visuals.)
Technical and design notes
Whatever you use, be sure you work within this set of website best practices:
Load up quick
Think of a newspaper’s “above the fold” line as a metaphor for what you see upon first load. If you can help it, have everything “above” load first and then get to content “below” to make pages appear as quickly as possible for viewers. The real lesson here is to aim for the fastest load time possible and to beware templates or designs that generates too much content all at once.
A good example of a pitfall here might be a Tumblr theme that infinitely loads all of your posts at the bottom. All that information could make your page become sluggish. Don’t make your audience wait longer than they have to.
Another best practice for fast loading is to manage your image sizes. You should be wary of any images larger than 1.5 megabytes.
if possible, save .jpgs as “progressive” images, which means the file contains three or four versions of different quality; these images quickly load blocky versions that become sharper, instead of loading a high-quality image line by line. This gives the appearance that your site has loaded more quickly.
Design “mobile first”
It’s safe to estimate that more than 50 percent of your audience will be viewing your content on a mobile device. Split that again in half to figure who’s using Android vs. Apple devices and it becomes clear that your website has to be compatible across a range of screen sizes.
To best accommodate everyone, you’re best off trying to design for a small mobile display first and then tweak your way to a larger layout; it’s much harder to fit a big, grandiose design into a small space.
This is a great case for why your design elements should be edited and streamlined early in your conception. In web design, less is more.
If you’re using a template, look for options that label themselves as “responsive” to accommodate all sizes.
Don’t hide any navigation
If your layout includes navigation to deeper pages, make sure you don’t hide the buttons to get there. This can get tricky with responsive design. Collapsable “hamburger” menus are one way designers make links accessible without taking up too much real estate.
Examples
Nathan Griffiths, interactive editor for the Associated Press, uses an excellent, straightforward layout to get people to his work right off the bat. The site, which he says is hand-coded, is essentially just one page. There’s nowhere to get lost in this one.
Science journalist Erica Klarreich’s portfolio cuts right to the chase. Her accolades greet you right up front, and before you know it you’re already browsing her content. Klarreich uses Pressfolios and it says the service provides an extremely easy fill-in-the-blank template. Major points for intuitive use.
The multimedia collective Homelands’ site is a great example of a deep site with a homepage that displays the most recent content. You can see how complete projects are less important in this scheme as they need a few more navigational steps to reach. The site uses a WordPress backend. Sometimes it’s best to be current.
And how about a nicely designed site full of nicely designed sites to take from here? Try https://siiimple.com/.
Main image CC-licensed by Flickr via European Parliament.