Presented here is the marketing site design and brand for Adobe Portfolio, a new website editor specifically for creative portfolios, that syncs with your Behance projects, and is FREE to all Adobe Creative Cloud plan subscribers! Below are a range of the core template designs, along with the responsive designs and even the styleguide (cat lorem ipsum and all!) — to try and show a good insight into the process and design of this website, and the creation of the Portfolio brand.
We hope you like it, and enjoy using the product! :)
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 above and below, the focus is on fashion and photography, but graphic design, art, illustration etc... can also be represented in this space.
We chose to use Adelle Bold and Adelle 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.
We 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, responsively.
Below are the core templates, on desktop, tablet and mobile.
There are various other 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.
We 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.
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.
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. The first screen below is what most people will see. The second screen is a personalised messages that signed in Adobe users with a paid Creative Cloud plan see.
This product is free to all Creative Cloud plan subscribers! If you don't have a CC plan, plans start from as little as $10 a month, which buys you Portfolio, plus Adobe Photoshop and Lightroom!! It also comes with all fonts from Typekit! It's a pretty great deal.
Below is the pricing overlay, responsively:
Below is the styleguide (cat lorem ipsum and all!) we created for the Portfolio brand — both for the benefit of the (web) developers, and to ensure consistency across all brand pages and UI. The (mobile first) CSS styles are all documented to the right.
