Designing Adobe Portfolio

Andrew Couldwell
Jan 5, 2016 · 12 min read

Hello, I am the lead product designer and creative director of Adobe Portfolio. I’m going to share with you what myself and a great team of developers at Behance (Adobe) have been working on this past year.

Image for post
Image for post
The Adobe Portfolio marketing site

In November 2015 I did a little talk at the School of Visual Arts (SVA) in New York City about designing Adobe Portfolio, and product design. You can watch the talk here. I originally wrote this article in preparation for the talk, but have since expanded upon it to publish here. It aims to introduce the product, share insight into the design process, scans from my sketchbook and some specs/designs from behind the scenes. I hope you find it interesting.

What is Adobe Portfolio?

  • It’s designed specifically for creatives to showcase their portfolio. Meaning it does what you need it to do, simply and quickly.
  • It’s FREE with all Adobe Creative Cloud plans.
  • You can access all of Typekit’s library of fonts, to use on your website.

Portfolio syncs with Behance.

Image for post
Image for post
Image for post
Image for post
The photography of Matthias Heiderich — as seen on Portfolio and Behance

Responsive layouts.

The layouts aim to cover a variety of styles to suit different creative fields. They can either be used as an off-the-shelf solution to quickly populate with your projects and publish a website (in minutes), or use the editors features to change the structure and appearance to suit your style.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Easily customise the same layout to look very different. Featuring photography by Bryce Johnson

Below are the layouts we’re launching with. The initial layouts (for the public beta and product launch) are very simple, focussing on project covers, galleries and projects. The product will of course grow to offer more features like fullscreen cover images, HTML & CSS editing, blog integration etc… in time. And as the features expand, so too will the variety and number of layouts to choose from as a starting point.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Layouts and the creatives they are named after: Lina, Sawdust, Matthias, Juco, Mercedes and Thomas

We chose to name the layouts after creatives on Behance. We shortlisted creatives whose work lent itself well to a particular layout, and of course was also visually stunning.

I should say, that these layouts were one of the last things to be designed (pre-beta), but I’m leading with them for the sake of this article, to introduce you to what the product does, or at least, its ‘end product’.

The editor.

It sounds kinda corny, but I had three things in mind while designing everything from the brand, marketing site, and especially the editor:

Simple, clean and beautiful.

It should empower the user to:

  • Easily edit anything they can see.
  • Manage and add content.
  • Responsively preview their website.
  • Publish and update a live website.

Below are a range of editing scenarios from the product (editor):

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Various screens from the editor. Featuring photography by Chris Burkard and design by Andrew Couldwell

The role of a product designer.

ProSite.

Behance Network.

Understanding your audience is a great starting point.

So I spent a good deal of time absorbing all this knowledge Behance had acquired over the years, and also studying their initial designs for the evolution of ProSite. Asking questions. Making notes. Sketching ideas.

Image for post
Image for post
Image for post
Image for post
The Behance Network, and ProSite

I always start with a pencil and a sketchbook.

This sketchbook work naturally evolves into UI sketches. Sometimes I’ll sketch a feature, or a small UI detail, or a new approach to the UI entirely. It’s a quick way of purely and simply just designing and exploring ideas. Perhaps most importantly, you don’t get distracted by pixel perfection, fonts, colour, grids, guides etc… like you do while using computer software.

There’s always a point when you know you have enough to take it that step further, and actually start fleshing out these ideas. In the past I’ve used Adobe Illustrator or Omnigraffle for this, to wireframe. But time was tight on this project, so I went straight into Photoshop.

Below are some scans from my sketchbook. Some relate to the product (editor), some to the marketing site and brand:

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
A few scans from my sketchbook

An interesting image to point out above is the last one (bottom-right). You can see that my sketch is close to what I ultimately designed.

Concepting & prototyping.

We were working to pretty intense timeframes on this project. There simply wasn’t time to build any complex prototypes. But what I did do was to create a series of PDF walkthroughs using Layer Comps in Photoshop, showing the mouse cursor move around the screen, demonstrating every interaction, feature and user flow within the product. These allowed developers (and other stakeholders) to critique and/or understand all functionality and the user flow — so they knew what was to be built, and also identify any potential flaws in the UI/UX, prior to the build and testing.

Below is (a video of) one example of these PDF walkthroughs:

Prototype/walkthrough showing global customisation in the project editor

Detail in design.

In addition to the walkthroughs, user flows and prototypes I talked of earlier, I also like to create detailed specs for all the UI components, features and brand. I feel these are important when you have a large team, so everyone is on the same page, with one central point(s) of reference. The specs aim to cover all scenarios, from rollover states, to errors, active/inactive states etc…, and also cover px values and dimensions (I even go as far as including basic CSS).

Promote/encourage pixel perfection in the build. Lead by example, and set the bar high.

The more detail you include in your designs, the less questions the developers will have, and the less time you will spend managing the build. So you can focus on designing, testing and improving the product.

Also, the nice thing about taking the time to create these ‘UI kits’, is that it’s easier to update the product (design) in the future. There’s no need to update hundreds of mockups, you just update the specs.

Below are a few examples of these styleguides and specs:

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

View a full case study of the product design specs here

Marketing and brand.

The name.

I went back to my sketchbook, and went through a word association exercise of writing down everything this product did, and also what language every similar product on the market was using. The natural progression of all these kept coming back to “Portfolio”. So after some thought, I concluded: ‘Why not?!’ — it does exactly what it says on the tin. It’s a website creator/editor designed specifically for creating a portfolio. The simplicity and boldness of the name married up well to the design and values of the product. And so we called it ‘Portfolio’, which soon became ‘Adobe Portfolio’ to fit with Adobe’s suite of products.

Image for post
Image for post
The marketing site home page featuring a photo by Tanya Timal

The brand.

Image for post
Image for post
Other scenarios include lighthearted messaging and humorous imagery. Project photo by dua — Alexander Esslinger

Responsive design.

You’ll be the developer’s best friend if you take the guesswork out of it for them. Believe me :)

Below are a few examples of the responsive designs, delivered to the developers to build myportfolio.com:

Image for post
Image for post
Image for post
Image for post
Responsive designs for the marketing site, showing an early version of the brand identity
Image for post
Image for post
Image for post
Image for post
Responsive designs for a couple of the layouts, covering different scenarios

View a full case study of the layouts here

User testing.

Test. Learn. Revise. Repeat.

The best way to know if it works is to use it.

You’ll be amazed what you discover:

Image for post
Image for post

…People don’t always use a product how you anticipated they would!

  • You learn,
  • You improve,
  • You iterate on the product,
  • You keep testing,
  • And repeat this process.

And honestly, sometimes it does feel a little like this:

Image for post
Image for post

…But the product will be better for it.

In conclusion.

Slow down.

Concept.

Detail in design.

Test and improve.

Learn.

Note: Since writing this article I’ve moved on from Adobe. If you have feedback or suggestions for this product, Adobe have a support system for that here :)

Image for post
Image for post

Update: 2019. I wrote a book about system design and digital brand guidelines! https://designsystemfoundations.com

Owl Studios

We’re designers who code.

Andrew Couldwell

Written by

Web designer & developer • Portfolio at: https://roomfive.net

Owl Studios

We’re designers who code. We take on projects of all sizes, from web design and build, to product, branding and system design. http://owlstudios.co

Andrew Couldwell

Written by

Web designer & developer • Portfolio at: https://roomfive.net

Owl Studios

We’re designers who code. We take on projects of all sizes, from web design and build, to product, branding and system design. http://owlstudios.co

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store