Brand, creative direction and responsive marketing site design for Adobe Portfolio

Intro

I was the creative director and lead product designer of Adobe Portfolio, working out of Behance's NYC office, from 2014/16. This new white-label website creator & editor, specifically for creative portfolios, is free to all Adobe Creative Cloud plan subscribers. Portfolio is the evolution and total re-imagining of its predecessor, Behance ProSite. I was responsible for the naming, branding and creative direction of this new product and Adobe brand.

Project

Presented here is the original marketing site design and brand for Adobe Portfolio. Below I have included a range of the template designs, along with the responsive designs and even the styleguide — to try and show a good insight into the process and the design of this website, and the creation of the Portfolio brand. This website was live in the build-up to the launch, and throughout its private alpha and beta launch and test phases, and in the first several months as a public product.

Involvement

Creative Director
Brand
Design
Copywriting

Client

Behance & Adobe

Date

2015

Honours

Nominated for a Webby Award

Credits

Jackie Balzer — Web development

Beautiful, bold, simple.

These are important things to convey in the design, brand and marketing of Portfolio, and of course, actually applied in the UI & UX of the product (Editor) itself! The intention of the home page is to feature periodically/randomly/targeted imagery to cover all creative fields — in the examples (left and below), the focus is on fashion and photography, but graphic design, art, illustration etc... can also be represented in this space.

Responsive grid

I designed the site to a basic grid, aligning the titles, images and text at different indentations to create a visually interesting flow to the page. This grid easily adapts to the screen size, via media queries.

Typography

I chose to use Adelle Bold and Regular in the brand marketing for Portfolio — a beautiful, bold and easy to read typeface, that fits the core values of the product well, and is a striking visual at large or small size. The 'casual' look and feel of the Adelle font family, combined with the down to earth and friendly tone of voice of the brand messaging (throughout the product) helps to establish the brands personality. Adelle also helps to differentiate Portfolio from the [Adobe] 'Clean' corporate look of Adobe, and the 'Helvetica' platform look of Behance — it's two parent brands.

Behance

An important feature of the Portfolio product is that seamlessly syncs with the Behance platform. Meaning you can upload/edit projects on either Portfolio or Behance, the content syncs between the two, only you can style them differently in both places. This is super useful, to have a custom presentation of your work on our own, branded website, and grow your network on Behance.

Behance (continued)

The feature gallery cycles between three example creatives, showing their Behance profile, inline with their custom Portfolio website. The background colour changes to match the creative. See previous image above to see the difference.

Covering all scenarios

There were a few screens needed to cover various scenarios, like timing out of the Editor, signing out, welcoming back a signed in user — with ease of access into their Editor etc... All of which are great, and unique opportunities to have fun with the brand, speak to the customer, and present the brand in a fun, friendly and accessible manner.

Imagery & curation

I wanted to have fun with the imagery used in these unique scenarios — all imagery is abstractly related to the scenario, and sourced from projects on Behance. All imagery is of course credited (and linked) to it's creator, on Behance.

Brand

The inclusion of the "Be" brand mark, along with the subtle Adobe branding also quietly aligns Portfolio (as a product) with both the Adobe and Behance brand. Portfolio very much has it's own identity and personality, different visually and in tone of voice and language, to that of Adobe and Behance — but it's also important to align with the trust and prestige of these two brands.

Pricing

A fullscreen takeover (overlay) opens when accessed via the "Pricing" link at the top and bottom of each page. This focusses attention on the two pricing (plan) options.

Free to you!

This product is free to all existing (Adobe) Creative Cloud plan subscribers! To all else, it's available for as little as $10 a month, which buys you Portfolio, plus Photoshop and Lightroom!! For $50 a month you get Portfolio, plus the entire Adobe suite of products! Portfolio also has free, unlimited access to all fonts from Typekit!

It's a pretty great deal.

Portfolio brand evolution

The preceding product to Adobe Portfolio was Behance ProSite. I re-branded this new product to be "Portfolio", which soon became Adobe Portfolio, as it became a major inclusion in the Creative Cloud plan offering. As such, the "P" mark and brand (red) color was replaced with the "Pf" and blue (seen to the left and in the live product) to fall inline with Adobe's suite of products and the blue aligned it with Behance in the Adobe family.

Note: Many of the designs shown here are with the original branding (logo and colors).