2XL2xl.studio/2XL_Portfolio_2019.pdfWith a cohesive brand identity that translates well across ......

10
2XL 2–4 Jaques Biltong Package Design 5–7 Blankslaps Branding, Copy Writing, Package Design & Web Design 8–10 Embolden Copy Writing, Web Design 2019

Transcript of 2XL2xl.studio/2XL_Portfolio_2019.pdfWith a cohesive brand identity that translates well across ......

Page 1: 2XL2xl.studio/2XL_Portfolio_2019.pdfWith a cohesive brand identity that translates well across ... Cultivating a distinct brand personality was just as important as developing the

2XL

2–4

Jaques Biltong Package Design

5–7

BlankslapsBranding, Copy Writing, Package Design & Web Design

8–10

EmboldenCopy Writing, Web Design

2019

Page 2: 2XL2xl.studio/2XL_Portfolio_2019.pdfWith a cohesive brand identity that translates well across ... Cultivating a distinct brand personality was just as important as developing the

2

Jacques BiltongWe were approached with a package design project for a biltong snack brand. Jacques Biltong is a South African style beef jerky that’s naturally cured without artificial preservatives. The goal was to create a package that both appeals to health conscious, on-the-go young people, and communicates the wholesome, craft-focused identity of this family owned company. Proposed to be stocked in stores like Whole Foods and Trader Joe’s, this package needed to stand out from other biltong brands while also embodying recognizable high-end, health food aesthetics.

Package Design

Page 3: 2XL2xl.studio/2XL_Portfolio_2019.pdfWith a cohesive brand identity that translates well across ... Cultivating a distinct brand personality was just as important as developing the

3

Jacques Biltong

We began by trying to visually convey two important characteristics of the product: that it’s made from a home-grown recipe and it’s a healthy alternative to beef jerky. We incorporated an illustrated image of a cow to better communicate what the product is and also to establish a sense of brand personality.

In our second iteration, we wanted to translate our initial ideas into a denser, more cohesive design. We also wanted to tie the product back to its South African landscape of origin. We added an illustrated black and white background and a red, wavy hill design that could change colors with the introduction of different biltong flavors.

1 2 3

We felt that the serif font we were previously using didn’t quite convey the boldness and hardiness of the product. We switched to a sturdy, weathered, san-serif and arranged the text in a centered composition. We also brightened up the red accent color and re-introduced an illustrated cow figure.

Package Design

Page 4: 2XL2xl.studio/2XL_Portfolio_2019.pdfWith a cohesive brand identity that translates well across ... Cultivating a distinct brand personality was just as important as developing the

4

Jacques Biltong

Our final design is set against an illustrated landscape background and grounded at the bottom by a red accent color block. We opted for the dotted rip line, first introduced in our second draft, instead of the color block on top. This helped to offset the density of the bottom half of the package. We used Eveleth, a heavy, cast-iron-like font, for the title text, and Raleway, a more delicate, friendly font, for the body text. The two fonts together visually reference the hardiness of protein-packed biltong and the approachability of a simple, healthy product made by a small, family-operated

Front and back view of final package design.

Package Design

Page 5: 2XL2xl.studio/2XL_Portfolio_2019.pdfWith a cohesive brand identity that translates well across ... Cultivating a distinct brand personality was just as important as developing the

5

BlankslapsBlankslaps is an online, industrial art supply company that offers niche products to street artists and graffiti writers. Founded with the mission to make affordable, high-quality, “egg shell” stickers, Blankslaps now stocks over 50 products, and they needed a robust e-commerce website that could accommodate future growth. Our goal was to develop their unique brand identity and design a web store that prioritizes speed, usability and user engagement. We embraced the subversive nature of Blankslaps’s ethos as an opportunity to play with typography, animations, copy writing and other impactful details.

Branding, Copy Writing, Package Design & Web Design

Page 6: 2XL2xl.studio/2XL_Portfolio_2019.pdfWith a cohesive brand identity that translates well across ... Cultivating a distinct brand personality was just as important as developing the

6

Blankslaps

While researching ways to incorporate graffiti aesthetics into Blankslaps’s brand identity, we were particularly inspired by “roller” or “blockbuster” lettering. The bold letters are intended to be visible from afar and the geometric nature of the letter forms give the text a modern, digital feel. Pictured above are some of the iterations we went through before deciding on the final logo.

HEX 44b646 TypefacesHelvetica CE 55 RomanHelvetica CE 55 Roman (Stretched) HEX 000000

We used Helvetica, a generic sans-serif, as the website’s main font. However, to reference the broken and rearranged letter forms often found in graffiti, we added variation by stretching and warping text elements on the website. Also playing on the name “Blankslaps,” and the idea of blank stickers, we implemented outlined buttons and text elements with hover animations that create a sense of flatness in 3D space. We wanted to create an aesthetic that gestures towards brandlessness, but in a way that’s memorable and original.

Branding, Copy Writing, Package Design & Web Design

Page 7: 2XL2xl.studio/2XL_Portfolio_2019.pdfWith a cohesive brand identity that translates well across ... Cultivating a distinct brand personality was just as important as developing the

7

Blankslaps

Desktop and mobile versions of the final website design.

For our comprehensive redesign of Blankslaps’s brand identity, website and package labels, we wanted our designs to reflect the boldness and simplicity of the industrial-grade tools in Blankslaps’s web store. We included references to graffiti aesthetics, but avoided overly literal or heavy-handed interpretations. The final website design is professional but playful and engaging. It’s easily expandable to accommodate new products and the intuitive layout allows users to easily browse and purchase items. With a cohesive brand identity that translates well across different media, Blankslaps stands out from competing web stores and graffiti sticker brands by redefining the boundaries of contemporary graffiti aesthetics.

Visit blankslaps.com

Final design of product package label.

Branding, Copy Writing, Package Design & Web Design

Page 8: 2XL2xl.studio/2XL_Portfolio_2019.pdfWith a cohesive brand identity that translates well across ... Cultivating a distinct brand personality was just as important as developing the

8

EmboldenEmbolden is an app and social media platform that allows style influencers and fashion-focused individuals to find outfit inspiration, shop directly from images, and earn rewards and commission by inspiring sales from their posts. Embolden sought our help to re-design their informational website, design visual elements within their existing brand guidelines, fix usability and compatibility issues, and better communicate how their app works to investors, beta-testers and potential users.

Copy Writing & Web Design

Page 9: 2XL2xl.studio/2XL_Portfolio_2019.pdfWith a cohesive brand identity that translates well across ... Cultivating a distinct brand personality was just as important as developing the

9

Embolden

We started by reviewing Embolden’s existing brand guidelines to ensure that the website would be stylistically cohesive with the app. We also previewed the app interface design to better understand how the app works from a user’s perspective.

Our goal was to formulate an easily digestible explanation of how the app works, and create a website around this narrative structure. We broke down the app into three main functions: ‘Shop,’ ‘Share’ and ‘Earn’. To convey this visually, we designed a one-page website with three color-blocked sections. As the user scrolls, each of the functions is explained alongside image content posted by beta-testers and animated mock-ups of the app interface. Although the app is not yet fully developed, we wanted users of the website to become familiar with what the app will look and feel like.

HEX F2552C

HEX FF7F41

HEX 62B5E5

TypefacesRaleway, Lato

Copy Writing & Web Design

Page 10: 2XL2xl.studio/2XL_Portfolio_2019.pdfWith a cohesive brand identity that translates well across ... Cultivating a distinct brand personality was just as important as developing the

10

Embolden

Desktop and mobile versions of the final website landing page.

The final website is stylistically compatible with the app interface, but also uses animations and other graphic elements to create a unique web experience. We used a one-page structure that directs users through a simple but engaging step-by-step narrative flow. The layout visually communicates the “Shop, Share, Earn” functionalities and strategically leads users to sign up for the beta version of the app.

Cultivating a distinct brand personality was just as important as developing the information structure of the website. In the copy featured throughout the website, we established an outgoing and personable brand voice that would resonate with Embolden’s target audience.

Visit emboldenapp.com

Copy Writing & Web Design