Get Your Design Portfolio Online in a Couple of Days (or Less)

Having a digital portfolio online is a must for designers, especially freelancers. It gets your work in front of those browsing for talent online, in social media or on LinkedIn. In some cases, job applicants are required to have an online design portfolio so recruiters and human resources personnel, as well as art and creative directors, can preview your work.

Putting your work online can involve using a what-you-see-is-what-you-get (WYSIWYG) editor like Dreamweaver or an online content management system (CMS). Thanks to their user-friendly features like pre-built templates and drag and drop layout abilities, the CMS option is becoming a go-to for independent designers, as well as small-to-mid-size agencies. But before you leap in and layout your site, take the time to get your assets ready.

Setting Up: What You Need to Know When Curating a Design Portfolio

Here are some essential preliminary steps to consider as you prepare to curate your designs online.

  1. Gather eight to eighteen pieces of your best work. Opinions vary widely about the “right number” to showcase online, but keep in mind that you don’t want to put everything and the kitchen sink there. This would leave you with nothing new to show come interview time.
  2. Save in high-resolution, whether it’s a PDF, PNG, JPEG, or TIFF. You can re-format them for the web later. What’s most important is to not downsize them to the outmoded 72dpi that was standard for web imagery. Methods exist today that use HTML 5, JavaScript, and CSS3 to treat imagery “responsively” so it scales up to large screens and small to phones, all without looking too coarse with “stair stepped” pixels.
  3. Do you want to be found via something like cargocollective.com/yournamehere or yourownname.com? You can get your own vanity .com name for as low as $20 per year to make a nice impression. Plenty of registrars exist for finding and purchasing your domain name, or you can use some of the CMSs mentioned below to take care of things all in one place.
  4. Map the site’s content as a text outline, drawn as thumbnails, or composed as a flow chart in Illustrator or InDesign. You’ll have home (the landing, a.k.a. index), project browsing, single project features with informational text, and finally personal information. You can have a short biography, resume, contact form, email address, or links to social media.
cms, online portfolio, digital portfolio, design portfolio

Creating even a simple chart can give you a road map to follow before you get to setting up your site.

Content Management Systems: A Digital Portfolio Solution

A content management system will make light of the work needed to create, edit, and publish pages on the Internet with little to no HTML, CSS, or JavaScript knowledge. Many CMSs became popular during the blogging boom in the early 2000s, and continue to be used for a variety of purposes today. But new systems continue to sprout up with designers in mind, by connecting to your pre-existing digital portfolios and social media so they all talk to one another and update at once.

Cargo

Cargo continues to be a go-to CMS with a less-is-more approach. Many Cargo sites have a “white wall” aesthetic similar to an art gallery, letting your work leap to the surface. But if you want to get on Cargo, you have to apply online and wait until they send you your credentials.

Brady Bone takes the Cargo Quiz

online digital portfolio; design portfolio; Cargo

How long did it take to get Cargo going? A couple of days for the preliminary work like picking a template working with the layout. Then it took a few more days to get the rest of the work up: selecting, prepping and uploading all images, and adding credits/captions to images.

How would you rate your web design knowledge, HTML, CSS, etc.? I knew enough to work in Cargo: I would qualify it as dangerous knowledge. And if I want to do something I’m unsure of, I will hunt it down and learn how to do it.

What’s the advantage to using Cargo? Simple, with an easy learning curve, allows for some decent customization, and a basic but perfectly fine mobile version without being expensive.

Final Comments: I used Cargo originally because I needed to put up a site of work quickly. While it can be customized through CSS it is still limited but with the price it’s not a bad value. No built in stats.

Flavors.me

At $20 per year for its tools and a vanity domain name, Flavors.me is a bargain. Artists, designer, and writers are just some of the people who swear by its easy-to-use CMS.

Chuck Erickson takes the Flavors.me Quiz

Flavors-by-Chuck-Erickson; design portfolioHow long did it take to get Flavors going? One to two days for testing out various designs, connecting services, and organizing all the content.

How did you learn about Flavors? I learned about Flavors.me while I was working for a social media company in 2009. It seemed like a new social web app was coming out every week and I was looking at them all. I have used my Flavors.me site in two successful full-time job searches since its creation as well as numerous freelance project proposals.

What’s the advantage of using Flavors? Your work isn’t sitting there. Your work is pulled from various web sites you already use (Flickr, Behance, Blogger, WordPress, LinkedIn, etc.) and displayed in the Flavors.me environment you create. I use Flickr to host my design work and LinkedIn as a digital resume. If any changes are made on either site Flavors.me is updated automatically.

Final Comments: It’s a quick and easy way to build a clean looking site. The ability to pull content from other websites allows me to spend time adjusting the design and not the content. For only $20 a year I am able to use my own domain name, which was one of the top items on my list when selecting an online portfolio. Flavors.me also provides mobile site optimization and the ability to tie in my Google Analytics account.

ProSite

Part of the Bēhance network of services, ProSite promises to let you “build your site for free — only pay when you’re ready to publish.” Don’t want to mess with HTML or CSS? Use their drag and drop method to build your site.

Jessica Manner takes the ProSite Quiz

ProSite-by-Jessica-Manner

How would you rate your web design knowledge, HTML, CSS, etc.? I knew enough to work in ProSite. I found ProSite to be pretty intuitive to set up a basic design from a template. However, if you are looking to heavily customize the design, you might need a little web development knowledge (HTML/CSS).

How long did it take to get ProSite going? I would say anywhere from less than a day to a whole day. It depends on the amount of customizing you want to get into.

What’s the advantage of using ProSite? Simple to use. Syncs to several different portfolio galleries so you publish once, and it gets updated across multiple sites, including LinkedIn & AIGA. The designs are clean and simple. It’s customizable.

Final Comments: ProSite is a great option for designers looking to setup a simple, easy-to-use portfolio site, and I like that it is great looking and syncs to AIGA’s portfolio. But unless you have some HTML/CSS knowledge, it may be difficult to do advanced customization.

Squarespace

Squarespace has what designers need from end to end, including a wealth of templates to get up and running quickly, customization, hosting, as well as integration with social media and analytics tools. Packages start at $8 per month and go up to $24 per month for unlimited services.

Centerfold’s Tim Rebich takes the Squarespace Quiz

Squarespace-by-Centerfold; design portfolio

How would you rate your web design knowledge, HTML, CSS, etc.? I knew enough to work in Squarespace.

How long did it take to get Squarespace going? It took a couple of days to get acclimated to the interface, toolbars and parameters, but as soon as we got into a rhythm, it went pretty smooth.

What’s the advantage of using Squarespace? We initially built the site to be a temporary placeholder of our brand and agency online. Squarespace made it accessible and efficient to get a web presence up. We would highly recommend it for students who are looking for a solid foundation for their digital portfolio, or new agencies like us, fresh out of the gate.

Final Comments: The lack of direct access to the HTML for each page seems a bit limiting. We think there is a happy medium between the “plug n’ play” model and the “overload on code” model and Squarespace has not struck that balance yet.

Virb

Virb has a reasonable package priced at $10 per month, but if you want a vanity .com name, you have to use a third-party registrar to purchase and set up the domain name server to point back to your Virb site. Although this makes for a little extra leg work, Virb has many of the features its competitors offer including built-in styles for mobile viewing of your site.

Mike Rogers takes the Virb Quiz

Virb-by-Mike-Rogers

How would you rate your web design knowledge, HTML, CSS, etc.? I knew enough to work in Virb. At the time I was using a basic version of Cargo’s CMS, but hadn’t really messed with any of the coding. Virb’s service made that side of the site design more approachable.

How long did it take to get Virb going? It took me less than a day to get the basic structure set up, but then over the next couple weeks I spent most of my time editing the CSS. It was pretty much trial by error until I got a good handle on what code affected the corresponding visuals, but now that I’m comfortable in the CMS, I’m constantly making small changes.

What’s the advantage of using Virb? It’s no big deal to create a page and experiment with the code, or to turn features/pages on and off until I find what works for me. For someone who wasn’t practicing design for the web, it’s really given me a small introduction into what can be accomplished in that field. You get this well designed platform to build from and it allows designers (especially those not as code savvy) to focus on the work they want to show.

Final Comments: Having this more structured approach to designing my website has provided the perfect opportunity to learn about designing for the web, but without having to start from scratch. I think it’s been a great first step into that area.

The Bottom Line

Once you’ve found and signed up for a CMS, you may find that it meets your needs entirely, and you feel like you have the “perfect match.” But if the relationship between you and your CMS isn’t working out, then move on.

Designer Matt Stevens used to be on Cargo, but wanted better blog integration, so he moved to Squarespace. And from the start, Centerfold used Squarespace as a rapid development tool in order to get their site up and running quickly, but all along they have intended on developing their own site without a pre-built template in the near future, and will leave Squarespace once their new site is ready.

Squarespace-by-Matt-Stevens

Matt Stevens left Cargo in order to find a CMS that had better blog integration. Stevens says, “Squarespace 6 was a huge leap forward in terms of templates, blog integration, store integration, better handling of portfolio. I like to have an all-in-one solution that’s stable and easy.”

And when it comes to the CMS templates, you may want to take the extra time to customize yours to separate yourself from the herd, as Mike Rogers says, “The truth is that you’re starting with a template. You’re going to run that risk of finding other portfolios/sites that have the same aesthetics in the site design. For some that may be fine, but as a designer, it made me want to try and set it apart somehow.”

No matter where you go or if you use a template, it’s important to consider the strengths, services, and weaknesses of each CMS, as well as your own personal needs. Do you want to get by without needing to learn HTML/CSS? Are you okay with having a custom-built template? Do you want to get up and running quickly? Have everything—blog, store, social media—all in one place? Check in with yourself, and ask around. And remember to keep your site up to date as you create new work, add to your resume, and evolve. The benefit of having an online digital portfolio is making sure that it’s a living, breathing entity instead of a stale and static desert.

Jason Tselentis is an associate professor of design at Winthrop University. 

HOWUBlock

Want to expand your web design skills?

Check out HOW Interactive guru Brian Wood’s course, Create a Killer Website Using Adobe Muse, for more code-free designing!

HOW Design University offers courses spanning experience levels and across topic areas. From responsive design and typography to specific web design products, HOWU makes it easy to continue your interactive design education for greater relevancy in the field.

COMMENT