Loop App Portfolio by jane novella

Jane Novella

Jane Novella 101990306 Belinda Paulovich Published by Swinburne University of Technology, School of Design, 2019 Printed in Melbourne by Jane Novella All rights reserved No part of this publication may be reproduced or transmitted in any form or by means, electronic or mechanical, including photography, recording or any other information storage and retrieval system, without prior permission in writing from Swinburne University of Technology. Declaration of Originality Unless specifically referenced in the bibliography, the mark and all other material in this book is the original creation of the author. Copyright Agreement I agree for Swinburne University to use my brandbook for non-commercial purposes including: promoting the activities of the university or students: internal educational or administrative purposes: entry into appropriate awards, competitions and other related non-commercial activities to show my work in lectures and as an example for future students on line and face to face and in lectures. In some situations, this may involve repurposing the work to meet the requirement of Swinburneâ&#x20AC;&#x2122;s use. I agree to grant to Swinburne a worldwide, non-exclusive, irrevocable and free-of-fee license to use this project produced in DCO20001 in any way for non-commercial purposes. Signed

31/05/2019

Table of Contents

Contents Part 1: Research and Strategy

Introduction Definitions and Examples Competitorsâ&#x20AC;&#x2122; Brand Marks Positioning Maps Competitorsâ&#x20AC;&#x2122; Case Studies Mission Statements Mood Boards

10 11 14 15 16 19 20

Part 2: Brand Concept Design

Brainstorming for Tagline Loop App Values Initial Sketches Further Ideation 3 Logo Options Typeface and Color Options Brand Mark Experiments Final Brand Mark Brand Mark Comparison

24 25 26 27 29 30 31 34 35

Part 3: Brand Documentation

Brand Mark Compositions Brand Mark Geometric Guideline Brand Mark Color Schemes Brand Mark Photography Styles Brand Mark Dimensions Brand Mark Typography Brand Mark Misuses Brand Applications

38 39 40 41 42 44 45 46

References

Loop App Brand Book by Jane Novella Loop App Brand Guidelines | 7

Part 1: Research and Strategy

Part 1 | Research and Strategy

Introduction

Definitions

A brand is a very crucial part of a company’s reputation and identity. Designing a smart and memorable brand would need lots of consideration and research. By doing market research, we would be able to know interests and behaviors of our target audiences. We would also be able to follow or predict the trend and thus be more relatable to our audiences.

Branding

In this first stage of brand identity design, we are focusing on the market research and establishing firm strategies for the further execution of the brand design. This is very important as we are not just branding a service/ product from zero, but we are rebranding a start-up company that has already existed named Loop App.

Image

After we became familiar to Loop App’s company identity and its competitors, that’s when we will move on to the second stage, which is the ideation of Loop App’s brand mark. Last but not least, we will refine the brand mark and apply them to actual products to give us clear idea in how the brand will be executed before launching the company’s identity.

The development and maintenance of a brand

Brand

A company, or product, or something else, presented in ways that create an image

Identity

The characteristics by which a brand is known The market’s opinion about a brand

Brand Mark (Logo)

A graphic mark that represents a brand

Logotype (Letter Mark)

A brandmark consisting of letters

Figure Mark

A brandmark consisting of one or more figures

Combined Mark

A brandmark consisting of letter/s and figure/s

Trade Mark

A registered (legally protected) brandmark (Per Mollerup: Marks of Excellence, The history and taxonomy of trademarks)

10 | Loop App Brand Guidelines

Loop App Brand Guidelines | 11

Part 1 | Research and Strategy

Definition Examples

Definitions Examples

Brand Mark

Figure Mark

Spotify

Audi

Chase

Play Station

Firefox

Steam

Chrome Browser

Tinder

Messenger

Polo

Comme des garcons

Apple Inc.

Letter Mark

Combined Mark

Coca Cola

NASA

Google

Lacoste

Adidas

Tommy Hilfier

Nintendo

YouTube

Intel

Rolex

Word Wide Fund for Nature

Pizza Hut

12 | Loop App Brand Guidelines

Loop App Brand Guidelines | 13

Part 1 | Research and Strategy

Competitorsâ&#x20AC;&#x2122; Brand Marks

Positioning Maps

Ranging from primary to secondary competitors, these apps are focusing in fitness, wellness and dietary plans.

This positioning map is judged through 2 categories; Traditional-Modern and Simplicity-Complexity. Loop App is on the rear of traditional and complex, its calligraphic letter mark makes it to be complex, and their composition and colors seems a bit out of trend.

Traditional FitApp

8Fit

Aaptiv

Run Keeper

Keep It Cleaner

FitPlan

SWEAT app

One Giant Mind

Simple Fit Bit

Fitocracy

LifeSum

28 by Sam Wood

Centr

Daily Yoga

Strava

Happify

Blogilates

14 | Loop App Brand Guidelines

Complex

Modern

Loop App Brand Guidelines | 15

Part 1 | Research and Strategy

Competitorsâ&#x20AC;&#x2122; Case Studies 1

Competitorsâ&#x20AC;&#x2122; Case Studies 2

Examples of Brandmark Application

SWEAT App Sweat App with Kayla, ranked number 30 for Health & Fitness Category in the Apple Store, is one of the strongest competitors that Loop App have. Not only due to its market that covers the Australian Market, but also because it started from a YouTuber that creates tutorials and videos that the audience can follow to work out together with Kayla. It has established its own loyal customer base and recognition before it expanded into an app. https://www.sweat.com/

Centr by Chris Hemsworth Centr, by Chris Hemworth, which is ranked number 17 in Health & Fitness in the Apple Store is another strong competitor that Loop App has. Though the content is not really what Loop app is aiming to produce, similar to Sweat App, it gained lots of recognition and customer base with Chris Hemworth as the brand ambassador. https://centr.com/join-us

16 | Loop App Brand Guidelines

Loop App Brand Guidelines | 17

Part 1 | Research and Strategy

Competitors’ Case Studies 3

Mission Statement Loop App Loop App is an online platform allows content creators surrounding the topic of fitness, health, and wellness to promote their videos and increase their customer base, while at the same time supports audiences through their daily journey and encourage them to take action towards bettering their health and feeling great. The goal of Loop App is that we want to be more than just another fitness/ health/wellness app and we are trying to move away from the norms that have plagued these industries and establish ourselves as a newgen approach to combat the long-held problems of our culture, including health disease, i.e. diabetes and obesity, and mental issues, i.e. anxiety, depression, and stress. The branding primary goal is to have a consistent and unique look and feel for Loop App that speaks to millennials and gen-z more effectively. We aim to represent a new way of thinking and we’re keen to change the conversation around fitness, health, and wellness to be more inclusive, more diverse and above all else, simpler. We’re focused on creating new and exciting experiences within the digital realms. Fitness, Health and Wellness is all about the feels. It is a feeling that brings people to us and we want to create a positive impression through the branding so that our audience could be empowered day by day. We want to remain the one constant in their journey towards a happier self.

Examples of Brandmark Application

(This description is inspired from the Loop App brief given through the Canvas)

Fit Plan App Fit Plan app’s concept is very similar to Loop App. With many distinctive creators could post own content, audiences are exposed to a wide variety of workout plans and they are able to choose to follow which plans that they want to follow. Fit Plan helps creators to connect to their targeted audiences well. https://www.fitplanapp.com/

18 | Loop App Brand Guidelines

Loop App Brand Guidelines | 19

Part 1 | Research and Strategy

Mood Boards

Loop App - Avenir Book 20 | Loop App Brand Guidelines

Loop App Brand Guidelines | 21

Part 2: Brand Concept Design

Part 2 | Brand Concept Design

Brainstorming for Tagline

Loop App Values

As the brief from the client is to ‘re-brand’ the visual identity, the name itself will not be altered. Yet, could be strengthened by the use of tagline or catchphrases. It needs to be remarkable and easy to be spoken to make itself a good marketing campaign. Some of the names are created by an online slogan generator tool. (https://www.shopify.com/tools/slogan-maker)

Brand Values:

Brand’s Target Audience Values:

Real & Relatable / Authentic / Human Simple / clear / concise Inviting / Welcoming / Inclusive Experiential Fun / Light-hearted / Casual Knowledgeable

Inclusiveness > Individuality, Diversity Sustainability, Ethics Entrepreneurship Personalisation Hard Work Authenticity – Realness

Words Associated with ‘Loop’ Circle Coil Curve Spiral wind around tied together cycle go around continuously repetitive to conclude /sum up

(These values are taken from Loop App’s Brief from the Canvas)

Chosen Value: Real & Relatable/Authentic/Human –

Tagline with ‘Loop’

Tagline without ‘Loop’

Loop ? Yes Please. Jump to the loop ! Stay in the loop. A loop stays forever Connect with loop Keep in the loop Loop to the infinity Loop yourself. Spin the loop. Grow in the loop Saved by the loop Follow your loop. Make Every Loop Count.’ No loop no life Loop the life, live your life. Go around the loop Loop it your way. Loop it. Fitness, health, and wellness in the loop.

Get into the cycle Once you’re in, there’s no going out. Keeps you connected. Your cycle to a better life Create your circle. Endless fun (in the loop.) For a better life Lively till the last training. Get addicted.

Chosen Tagline: Loop to your better life. Social Media Hashtag: #stayintheloop

24 | Loop App Brand Guidelines

Loop App is trying to achieve something more than what normal health or wellness apps do by focusing into a long-term goal related to raising cultural problems such as health and mental issues. Thus, in my opinion, the most important value is to be ‘real’ or ‘human’. Something that wants to inspire and influence people would have higher chance of success if they are relatable, which shorten the gap between the influencers and the audiences.

After understanding the values of the app, I started to sketch some main elements that is related to the values & the app.

Loop App Brand Guidelines | 25

Part 2 | Brand Concept Design

Initial Sketches

Further Ideation Some refinements of the sketches. Here I have the opportunity to decide what combination of elements that work and what does not.

Sketches are developed by experimenting in combining some elements together.

Heart + Community

Lines + Circuit

Loop + Circuit

Abstracts

Infinity Symbols

Lines + Health

Letter Marks

Circle + Loop

Initial Choice 1: Running Man and infinity – It does not really well as I could not find a clear figure mark from the combination. Initial Choice 2: Arrow loop and infinity – it works well, but does not works very well when it is digitalized Initial Choice 3: Chain + Infinity + ‘oo’ – this symbol works well especially when it is framed into an app logo format.

26 | Loop App Brand Guidelines

Loop App Brand Guidelines | 27

Part 2 | Brand Concept Design

Further Ideation

3 Logos Options

Out of the brand sketches that I drew, I need to choose top 3 of them. However initially I doubted a lot which one to pick so I decided to experiment a little bit with some of the designs. Letter Mark: ‘Loop’ + Infinity

Figure Mark: ‘Loop’ + Chain + Infinity

Amongst all of the sketches that I made, I chose these top 3 designs are because they symbolize physical representation of the brand’s characteristic. As Loop is a brand that works mostly in the digital realm (mobile app & web), I decided to have simple logo. Not too distractive and easy to be recognized. These 3 designs are similar in styles, yet each are different enough to communicate different values. They can be broken down into ‘line-art’ style or shape with solid color. 1. Chain + Infinity + ‘oo’

First design is made up of a chain, infinity symbol and ‘oo’ which is taken from ‘loop’. This design would probably work for universal audience, depending on the color chosen. The overlapping chain means that there is always a community that stays and to symbolize that you are in the loop.

2. Health + Loop + Line

Second design is made up from the health medical symbol in a loop. Loop is trying to focus on general health and well being of audience, I think that this logo represents that value Well. The loop may also means community that is connected together. This logo is made up from a thinner line than the first one, which means it may be directed towards woman audience.

3a. ‘Loop’ + Chain + Infinity

Third design is made up of the ‘loop’ typography and chain symbol, which if rearranged may symbolize infinity as well. Style is very similar to the first design and could work better if directed towards both man and woman.

Letter Mark: ‘Loop’ + Chain

Figure Mark: Circle + Community

Figure Mark: Health + Loop + Line

Figure Mark: Chain + Infinity + ‘oo’

Both of the letter marks does not really suits the characteristic of the brand and especially the second letter mark make it seems like it came from a printing agency. The figure mark with hands on it may communicate different idea as it looks like a branding for a volunteer activity. I have decided to go with the other 3 and refine some of its elements.

28 | Loop App Brand Guidelines

3b. Alternative

Loop App Brand Guidelines | 29

Part 2 | Brand Concept Design

Typeface Options

Brand Mark Experiments Sans - serif typefaces too create a more casual and ‘fun’ expression. Bold to make it eye-catching and to emphasize that our brand is serious to reach our goals.

Logo 1 + Color Palette 1 App Icon

Brand Mark Composition Variety (with/out ‘App’)

Experiments

Color Palette Options Initially, Loop brand has light blue as its main color identity. As I do not want to go too far from the original brand color, I try to keep the blue and combine it with colors such as red, peach and pink.

Logo 1 + Color Palette 2 1.

Red: Energy, passion, empower Dark Blue: Calm, trustworthy, mature

App Icon

Brand Mark Composition Variety (with/out ‘App’)

Peach /Pink: Light, feminine, playful Light Blue: Calm, serious, health, understanding, tranquility.

30 | Loop App Brand Guidelines

Combination of the main color and the alternatives (taken from main’s complementary color), forming a colorful color palette.

Experiments

Loop App Brand Guidelines | 31

Part 2 | Brand Concept Design

Brand Mark Experiments

Logo 2 + Color Palette 1

Logo 3 + Color Palette 1

App Icon

App Icon Experiments

Experiments

Brand Mark Composition Variety (with/out ‘App’)

Logo 2 + Color Palette 2 App Icon

Brand Mark Composition Variety (with/out ‘App’)

32 | Loop App Brand Guidelines

Logo 3 + Color Palette 2 App Icon Experiments

Brand Mark Composition Variety (with/out ‘App’)

Loop App Brand Guidelines | 33

Part 2 | Brand Concept Design

Final Brand Mark

Brand Mark Comparison

Final Choice: Logo 1 + Color Palette 2 I have decided to use the first option as I think the logo is compact and could express so much just from its form and its color. The logo suits the app frame for iOS and Android better than other 2 logos. It has balance negative space and it does not look very sophisticated. The reason I chose the second color palette, rainbow color, is to represent a community made up of different people. For the typography element, I use a Futura PT Black Oblique. San-serif typeface because it is more casual and ‘fun’, bold because I want to emphasize that our brand is serious to achieve our goal and we are not afraid to be different. Itallics because it represents moving objects, which is a good property to represent a fitness platform.

FitApp

8Fit

Aaptiv

Run Keeper

Keep It Cleaner

FitPlan

SWEAT app

One Giant Mind

Fit Bit

Loop (Previous)

28 by Sam Wood

In the lettermark, I have also decided to keep the ‘APP’ there to let people know that it is an application, so no value is lost. Overall, the brand mark tries to communicate to people from different background, connect them together in a loop and encourages them towards a healthier life.

Centr

Blogilates

34 | Loop App Brand Guidelines

Loop (Re-brand)

Daily Yoga

LifeSum

Fitocracy

Strava

Happify

Loop App Brand Guidelines | 35

Part 3: Brand Documentation

Part 3 | Brand Documentation, Guidelines and Applications

Brand Mark Compositions

Brand Mark Geometric Guideline

Figure Mark

Individual Element:

Focus on the logo itself, it is used for subtle campaign on items, apps, social media and web icon.

Combined Mark â&#x20AC;&#x201C; Vertical

There are 2 variations for the vertical combined marks, one with tagline and one without. These compositions focus on both figure and letter mark, used for more formal and straightforward campaigns.

Combined Elements:

Combined Mark â&#x20AC;&#x201C; Horizontal

For the horizontal composition, it focuses on the lettermark more than the figure mark. This is also meant for more formal and straightforward campaigns. For the combined mark, these 3 versions are all alternative to each other. Any could be used for formal and straightforward campaigns. They are made to be alternative to adjust with the variety designs and compositions of the campaigns/ merchandise.

38 | Loop App Brand Guidelines

Loop App Brand Guidelines | 39

Part 3 | Brand Documentation, Guidelines and Applications

Brand Mark Color Schemes

Brand Mark Photography Style

Brand Mark Compositions â&#x20AC;&#x201C; Backgrounds Variation

This styles are to be used as a guide for media content on Social Media, Website, Podcasts and any other essential promotional channels. Photographs should be overall bright and colorful, they do not have to be colored the same way as the color palette, just make sure they are not monotonous.

On White Background

On Colored Background

Color Palette Figure Mark:

Background:

Alternative:

#F0615C C0 M77 Y61 K0 R240 G97 B92

#FFFFFF C0 M0 Y0 K0 R255 G255 B255

#ff8071 C0 M63 Y50 K0 R255 G128 B113

#FFAB59 C0 M39 Y72 K0 R255 G171 B89

#4657A6 C83 M74 Y0 K0 R70 G87 B166

#FDB97C C0 M32 Y56 K0 R253 G185 B124

PANTONE 17-1656 TPG

PANTONE 1365 U

PANTONE P 75-1 U

PANTONE 18-3949 TPG

PANTONE 16-1530 TSX

PANTONE 14-1128 TCX

#6BE8D6 C48 M0 Y25 K0 R107 G232 B214

#B9E5E0 C26 M0 Y13 K0 R185 G229 B224

#5282D6 C69 M46 Y0 K0 R82 G130 B214

#6e93cf C58 M46 Y0 K0 R110 G147 B207

PANTONE 332 U

PANTONE 2172 U

Dark-toned photography are allowed to be used as well, however just make sure that it is not dominant on the overall design.

PANTONE 12-5409 TPG

PANTONE 2718 XGC

Alternative color scheme is for the background on merchandises, so logo color wonâ&#x20AC;&#x2122;t collide with the merchandise color.

40 | Loop App Brand Guidelines

Loop App Brand Guidelines | 41

Part 3 | Brand Documentation, Guidelines and Applications

Brand Dimensions

While there are no maximum size set for the brand mark, The minimum size & composition of the brand mark would act as a guideline that logo shouldnâ&#x20AC;&#x2122;t be smaller than these size on documents. For large advertisement purposes, logo size needs to be adjusted in the scale of 1.4 cm and noted that logo must be scaled large enough for it to be visible (adjusted to the size of the media).

Minimum White Spaces 1 cm

Brand Dimensions

1 cm

Figure Mark Original Size:

1 cm

2.8 cm

1 cm

Minimum Size: 0.55 cm

2.8 cm

1.4 cm

0.55 cm

Figure Mark: 1 cm height. This minimum composition is suited only for mobile app or website icon.

1 cm

Vertical Combined Mark: 2.8 cm height. Same height as the original size of the figure mark. This minimum size composition is to be used for merchandising / documents/ campaign purposes. Horizontal Combined Mark: 1.4 cm height. This minimum size composition is to be used for merchandising / documents/ campaign purposes.

42 | Loop App Brand Guidelines

For every variations of brand mark compositions, minimum white space around the main elements would be 1cm x 1 cm, in the scale of 2.8 cm.

Loop App Brand Guidelines | 43

Part 3 | Brand Documentation, Guidelines and Applications

Brand Mark Typography

Part 3 | Brand Documentation, Guidelines and Applications

Brand Mark Misuse

Letter Mark Font – Title

Letter Mark Font – Tagline

Futura PT Bold Oblique

Avenir Light

abcdefghijklmn opqrstuvwxyz ABCDEFGHIJKLM NOPQRSTUVWXYZ 1234567890

abcdefghijklmn opqrstuvwxyz ABCDEFGHIJKLM NOPQRSTUVWXYZ 12345678090

Some guidelines on how to use the brand mark, this will enable to brand mark to still communicate company’s values without losing its identity.

Do Not:

Alternative Typefaces – used for brand applications (app, web, social media, and stationery)

Open Sans Used for texts on mobile apps as it is a common font used for apps.

Avenir Used for texts website, social media and printing documents.

Futura PT Used for texts website, social media and printing documents.

44 | Loop App Brand Guidelines

abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890

Remove any logo elements.

Compress / Stretch the brand mark.

Change the proportions within the combined brand mark.

Change the color compositions and elements’ layers.

Use alternative color for brand mark colors.

Change the fonts or style of letter marks.

Open Sans Regular Open Sans Semi Bold Open Sans Bold Open Sans Extra Bold

abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890

Avenir Light Avenir Book Avenir Roman Avenir Medium Avenir Black Avenir Heavy

Add strokes / outline the brand mark.

Use black/any other colors for colored background (except alternative colors).

Exceptional Considerations:

abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890

Futura PT Light Futura PT Book Futura PT Medium Futura PT Demi Futura PT Heavy Futura PT Bold Futura PT Extra Bold

Add gradient circle background and add drop shadows (only for mobile apps/web/social media use)

This is the only pattern that could be used if a pattern is to be formed from the figure mark.

Use Black for any of brand mark elements is only for black and white printing.

Loop App Brand Guidelines | 45

Part 3 | Brand Documentation, Guidelines and Applications

Brand Mark Applications

Part 3 | Brand Documentation, Guidelines and Applications

Brand Mark Applications

App Design â&#x20AC;&#x201C; Mobile Devices

Device: iPhone 7 Page: Home Screen, Search, Community, User Profile

46 | Loop App Brand Guidelines

Loop App Brand Guidelines | 47

Part 3 | Brand Documentation, Guidelines and Applications

Brand Mark Applications

Part 3 | Brand Documentation, Guidelines and Applications

Brand Mark Applications

App Design â&#x20AC;&#x201C; Tablet Version

Device: iPad Pro Page: Home Screen, Search, Community, User Profile

48 | Loop App Brand Guidelines

Loop App Brand Guidelines | 49

Part 3 | Brand Documentation, Guidelines and Applications

Brand Mark Applications

Part 3 | Brand Documentation, Guidelines and Applications

Brand Mark Applications

Responsive Website Designs

Device: iPad Pro, iPhone X, Mac Desktop Web Page: Home Screen / Landing Pages

50 | Loop App Brand Guidelines

Loop App Brand Guidelines | 51

Part 3 | Brand Documentation, Guidelines and Applications

Brand Mark Applications

Part 3 | Brand Documentation, Guidelines and Applications

Brand Mark Applications

Podcast Cover â&#x20AC;&#x201C; Album & Template

Device: iPhone 7 Application: Spotify & Apple Music

52 | Loop App Brand Guidelines

Loop App Brand Guidelines | 53

Part 3 | Brand Documentation, Guidelines and Applications

Brand Mark Applications

Instagram Profile Feed

Instagram Photo, Quotes and Video Templates

Device: iPhone 7 Application: Instagram

54 | Loop App Brand Guidelines

Loop App Brand Guidelines | 55

Part 3 | Brand Documentation, Guidelines and Applications

Brand Mark Applications

Part 3 | Brand Documentation, Guidelines and Applications

Brand Mark Applications

Instagram Story Templates

Device: iPhone 7 Application: Instagram New Instagram Story Feature includes Instagram Poll, questions and many more. These templates are made to maximalize such features and some templates enables users to share more about themselves and interact with other users easily, thus may increase engagements.

56 | Loop App Brand Guidelines

Loop App Brand Guidelines | 57

Part 3 | Brand Documentation, Guidelines and Applications

Brand Mark Applications

Instagram & Snapchat Filters

Business Cards

Comes in 2 designs. One with white background and one with dark blue background. Front Design is the one with the company details, while the Back design is the one with diagonal pattern.

Device: iPhone 7 Application: Instagram and Snapchat This brand mark application serves as a marketing through the digital media platform.

58 | Loop App Brand Guidelines

Loop App Brand Guidelines | 59

Part 3 | Brand Documentation, Guidelines and Applications

Brand Mark Applications Envelopes and Letterheads

Comes in 2 designs. One with white background and one with dark blue background. Front Design is the one with the company details, while the Back design is the one with diagonal pattern.

60 | Loop App Brand Guidelines

Part 3 | Brand Documentation, Guidelines and Applications

Brand Mark Applications

Part 3 | Brand Documentation, Guidelines and Applications

Brand Mark Applications

Full Set Stationeries

62 | Loop App Brand Guidelines

Loop App Brand Guidelines | 63

Part 3 | Brand Documentation, Guidelines and Applications

Brand Mark Applications

Part 3 | Brand Documentation, Guidelines and Applications

Brand Mark Applications

2019 Workout Calendar

Comes in variety of designs (12 designs), Background colors are the brand markâ&#x20AC;&#x2122;s alternative colors. Pattern of each months will varies.

64 | Loop App Brand Guidelines

Loop App Brand Guidelines | 65

Part 3 | Brand Documentation, Guidelines and Applications

Brand Mark Applications

Alumunium Water Bottle

Gym Towel

Comes in 5 designs, One design with the original color schemes and other 4 are colored with the alternative color schemes.

66 | Loop App Brand Guidelines

Loop App Brand Guidelines | 67

Part 3 | Brand Documentation, Guidelines and Applications

Brand Mark Applications

Drawstring Bags

Hoodie

Comes in 5 designs, One design with the original color schemes and other 4 are colored with the alternative color schemes.

68 | Loop App Brand Guidelines

Loop App Brand Guidelines | 69

Part 3 | Brand Documentation, Guidelines and Applications

Brand Mark Applications

Part 3 | Brand Documentation, Guidelines and Applications

Brand Mark Applications

Gym Leggings

Comes in 2 designs, both are colored dark blue, just with different compositions.

70 | Loop App Brand Guidelines

Loop App Brand Guidelines | 71

Part 3 | Brand Documentation, Guidelines and Applications

Billboard Advertisement

Landscape Orientation

Portrait Orientation

72 | Loop App Brand Guidelines

Loop App Brand Guidelines | 73

Part 3 | Brand Documentation, Guidelines and Applications

Brand Mark Applications

Part 3 | Brand Documentation, Guidelines and Applications

Brand Mark Applications

Box Packaging

Comes in 2 designs with different type of cardboard boxes.

74 | Loop App Brand Guidelines

Loop App Brand Guidelines | 75

References

References Images on Books, Logos & Moodboards

Images on Apps, Social Media and Web

Mock Ups

Doan, T n.d., ‘Assorted Sliced Fruits in White Ceramic Bowl’ [image], Pexels, viewed on 31 May 2019, <https://www. pexels.com/photo/assorted-sliced-fruits-in-white-ceramicbowl-1092730/>

Pixabay n.d., ‘Woman Standing on Gray Ground’ [image], Pexels, viewed on 31 May 2019, <https://www.pexels.com/ photo/body-fashion-female-girl-206515/>

360 Mocukps 2016, ‘Free Apple Watch Edition PSD and Sketch mockup’ [Mock Up], Dribbble, viewed 21 March 2019, <https://dribbble.com/shots/2952766-FREE-Apple-WatchEdition-PSD-and-Sketch-mockup#shot-description>

FITAPP n.d., Running, Walking, Workouts & Fitness App FITAPP, viewed on 21 March 2019, <https://www.fitapp.info/ worldwide/> Freitas, V 2019, ‘Several Rogue Gym Plates’ [image], Pexels, viewed on 31 May 2019, <https://www.pexels.com/photo/ several-rogue-gym-plates-1092878/> Pinterest 2019, ‘Branding Week1’ [image], Pinterest, viewed on 21 March 2019, <https://id.pinterest.com/janenovella/ branding-week1-brandmarks/> Pinterest 2019, ‘Loop App Mood Board’ [image], Pinterest, viewed on 21 March 2019, <https://id.pinterest.com/ janenovella/loop-app-mood-board/> Pixabay n.d., ‘Kettle Bell Beside Adidas Pair of Shoes’ [image], Pexels, viewed on 31 May 2019, <https://www.pexels.com/ photo/kettle-bell-beside-adidas-pair-of-shoes-209968/> Pixabay n.d., ‘Green, Blue, and Pink Kettle Bells on Blue Surface’ [image], Pexels, viewed on 31 May 2019, <https://www.pexels.com/photo/bright-close-up-colorcolorful-221247/> Snapwire n.d., ‘People Doing Marathon’ [image], Pexels, viewed on 31 May 2019, <https://www.pexels.com/photo/ people-doing-marathon-618612/>

Tools Shopify n.d., Free Slogan Maker, viewed 22 March 2019, <https://www.shopify.com/tools/slogan-maker>

Mars, B n.d., ‘Three Woman Doing an Exercises’ [image], Pexels, viewed on 31 May 2019, <https://www.pexels.com/ photo/three-woman-doing-an-exercises-868757/> Theformfitnes n.d.,’Woman Flexing Her Legs’ [image], Pexels, viewed on 31 May 2019, <https://www.pexels.com/photo/ woman-flexing-her-legs-1882005/> Cowley, N n.d., ‘Woman Holding White Ceramic Bowl’ [image], Pexels, viewed on 31 May 2019, <https://www.pexels.com/ photo/adult-beautiful-breakfast-brunette-1153367/> Nascimento, B 2016, ‘Sport, fitness, people and exercise’ [image], Unsplash, viewed on 31 May 2019, <https://unsplash. com/photos/PHIgYUGQPvU> Olsson, E 2018, ‘Plant-based meal prep’ [image], Unsplash, viewed on 31 May 2019, <https://unsplash.com/photos/ lMcRyBx4G50> Lavery, C 2016, ‘Writing in a journal’ [image], Unsplash, viewed on 31 May 2019, <https://unsplash.com/photos/ fMD_Cru6OTk> Fraser, B 2017, ‘Book, magazine, reading and read’ [image], Unsplash, viewed on 31 May 2019, <https://unsplash.com/ photos/GfZMQRqt4eo> Stratton, S 2018, ‘My trip up and down the Great Smoky M...’ [image], Unsplash, viewed on 31 May 2019, <https://unsplash. com/photos/ObpCE_X3j6U> Ev 2018, ‘Person, human, people and fitness’ [image], Unsplash, viewed on 31 May 2019, <https://unsplash.com/ photos/C7h_31Lz16Y>

Webpage Screenshots

SoSweat 2018, ‘The Science Behind High Intensity Interval Training (HIIT)’ [image], SoSweat ,viewed on 31 May 2019, <http://blog.sosweat.com/2018/03/01/hiit-science/>

Centr 2019, Centr | Workouts and meal plans by Chris Hemsworth and his team of experts, viewed 22 March 2019 <https://centr.com/join-us>

Thanyapura n.d., ‘Zumba Class at Thanyapura’ [image], Thanyapura,viewed on 31 May 2019, <https://www.thanyapura. com/classes/zumba-class/>

Fitplan 2019, Fitplan: Best Fitness Workout and Personal Trainer App, viewed 22 March 2019 <https://www.fitplanapp. com/>

Nieves, E N.d., ‘Brown Haired Woman in Black Top’ [image], Pexels, viewed on 31 May 2019, <https://www.pexels.com/ photo/brown-haired-woman-in-black-top-1124724/>

SWEAT 2019, SWEAT, THE WORLD’S BIGGEST FEMALE FITNESS COMMUNITY, viewed 22 March 2019 <https://www. sweat.com/>

Mars, B n.d., ‘Woman Wearing Red Sports Bra and Black Pants’ [image], Pexels, viewed on 31 May 2019, <https://www. pexels.com/photo/woman-wearing-red-sports-bra-and-blackpants-863974/> Quintero, L n.d., ‘Two Women Doing Push-ups’ [image], Pexels, viewed on 31 May 2019, <https://www.pexels.com/photo/twowomen-doing-push-ups-1671218/>

MockupWorld n.d., ‘Clean Water Bottle Mockup’ [Mock Up], Mock Up World, viewed 21 March 2019, <https://www. mockupworld.co/free/clean-water-bottle-mockup/> NewAgePromotions n.d., ‘The Fitness Towel’ [Mock Up], in Custom Sports Towel, NewAgePromotions, viewed 21 March 2019, <http://www.newagepromotions.com.au/custom-sportstowels/128/contentdata.aspx> NovelTees n.d., ‘Bamboo Fitness Towel’ [Mock Up], NovelTees, viewed 21 March 2019, <https://www.novelteespromotions. com.au/bamboo-fitness-towel-1> Psd Mockups 2017, ‘Leather Drawstring Pouch Bag Front PSD Mockup’ [Mock Up], Psd Mockups, viewed on 21 March 2019, < https://www.psdmockups.com/leather-drawstring-pouchbag-front-psd-mockup/> Freepik n.d.,‘Realistic instagram photo frame on iphone Free Vector’ [Mock Up], Freepik, viewed on 31 May 2019, <https:// www.freepik.com/free-vector/realistic-instagram-photo-frameiphone_4134619.htm#index=9> Freepik n.d., ‘Workspace mockup with computer PSD file’ [Mock Up], Freepik, viewed on 31 May 2019, <https:// www.freepik.com/free-psd/workspace-mockup-withcomputer_3677352.htm> d3images n.d., ‘Iphone Mock Up Design’ [Mock Up], Freepik, viewed on 31 May 2019, <https://www.freepik.com/free-psd/ iphone-mock-up-design_1101782.htm> Mock Up World n.d., ‘iPad Pro (Top View) Mockup’ [Mock Up], Mock Up World, viewed on 31 May 2019, <https://www. mockupworld.co/free/ipad-pro-top-view-mockup/> Freebies UI 2019, ‘Instagram Mockups 2019’ [Mock Up], Freebies UI, viewed on 31 May 2019, <https://freebiesui.com/ free-psd/psd-ui-kits/instagram-mockups-2019/> Graphic Burger 2013, ‘Colorful Business Card MockUp’ [Mock Up], Graphic Burger, viewed on 31 May 2019, <https:// graphicburger.com/colorful-business-card-mock-up/>

Azmy, R 2018, ‘Free Stationery / Branding Mock-Up’ [Mock Up], Behance, viewed on 31 May 2019, <https://www. behance.net/gallery/65552711/Free-Stationery-BrandingMock-Up> Mock Ups Design 2018, ‘Free wall calendar mockup’ [Mock Up], Behance, viewed on 31 May 2019, <https://www. behance.net/gallery/71799693/Free-wall-calendar-mockup> PSDMockups 2017, ‘Aluminum Water Bottle With Clip Attachment PSD Mockup’, [Mock Up], Psd Mockups, viewed on 31 May 2019, <https://www.psdmockups.com/aluminumwater-bottle-clip-attachment-psd-mockup/> Zippy Pizels n.d., ‘Free Elegant Full Towel Mockup’ [Mock Up], Zippy Pixels, viewed on 31 May 2019, <https:// zippypixels.com/product/mockups/apparel/towel-mockupfree/?utm_source=behance.net&utm_medium=referral&utm_ campaign=behance_sharing> Zippy Pizels n.d., ‘Free Fabric Drawstring Backpack Mockup’ [Mock Up], Zippy Pixels, viewed on 31 May 2019, <https:// zippypixels.com/product/mockups/packaging/free-fabricdrawstring-backpack-mockup/> Graphic Burger 2017, ‘Hoodie MockUp PSD #2’ [Mock Up], Graphic Burger, viewed on 31 May 2019, <https:// graphicburger.com/down/?q=hoodie-mockup-psd-2> Graphic Burger 2017, ‘Leggings MockUp PSD’ [Mock Up], Graphic Burger, viewed on 31 May 2019, <https:// graphicburger.com/leggings-mockup-psd/> Mock Up Tree n.d., ‘Free Square Cardboard Box Mockups’ [Mock Up], Mock Up Tree, viewed on 31 May 2019, <https:// mockuptree.com/free/square-cardboard-box-mockups/> Mock Up Tree n.d., ‘Free Empty Packaging Box Mockup’ [Mock Up], Mock Up Tree, viewed on 31 May 2019, <https:// mockuptree.com/free/empty-packaging-box-mockup/> Poster Mock Up n.d., ‘Outdoor Bus Stop Advertisement Vertical Billboard Poster Mockup PSD 2018’ [Mock Up], Poster Mock Up, viewed on 31 May 2019, <http://www. postermockup.com/2018/07/31/outdoor-bus-stopadvertisement-vertical-billboard-poster-mockup-psd-2018/> Dribbble Graphics 2018, ‘Free Mall Indoor Billboard Digital Ad Mockup PSD For Advertisement’ [Mock Up], Dribbble Graphics, viewed on 31 May 2019, <http://dribbblegraphics. com/download/free-mall-indoor-billboard-digital-ad-mockuppsd-for-advertisement/>

Mars, B n.d., ‘Group of Woman Doing Yoga’ [image], Pexels, viewed on 31 May 2019, <https://www.pexels.com/photo/ group-of-woman-doing-yoga-868483/>

76 | Loop App Brand Guidelines

Loop App Brand Guidelines | 77

DCO20001 â&#x20AC;&#x201C; Brand and Identity Design Freelancing Skills Jane Novella

101990306

Freelancing Skills

Estimations

Invoice

Estimation prepared for Dr Simone Taffe Professor Communication Design John St Hawthorn, Swinburne University of Technology

Invoice prepared for Dr Simone Taffe Associate Professor Communication Design John St Hawthorn Swinburne University of Technology

Prepared by Jane Novella Jane Novella 1909/28 Bouverie St. 3053 Carlton VIC Project Title: Branding for Loop App Job no: DCO20001 Date: Friday, 22 March 2019 Stage 1: Research and Strategy This stage will explain the importance of branding. This stage also will involve client research, collecting visual material for analysis. Competitors brands will be collected and placed on a positioning map. Brand Values and naming options will be suggested. A moodboard will be created for your consideration. A strategy document outlining in words with supporting visuals the way forward will be presented. Timeframe: This stage will take three weeks Presentation to art director at team meeting in week 3 Deliverables: A4 document at least 6 pages in colour delivered to my art director and uploaded online Project Value: 10% Fees: 9 hours a week x 3 weeks @$20 per hour = $540 Stage 2: Concept Design After agreeing on the direction of the strategy document with my art director and studio team I will proceed to concept design stage. This will involve creating many brandmark concepts sketched by my own hand. In consultation with my studio team I will develop three promising directions. In team meetings with my art director and studio team we will discuss the merits of each three brandmark options and then proceed to refine one final brandmark for your consideration. I will prepare a creative rationale explaining my design decisions and the symbolism of the final brandmark. I will compare the brand to the competition to check its strength. Timeframe: This stage will take three weeks. Deliverables : A4 document at least 10 pages in colour delivered to my art director and uploaded online Presentation to art director at team meeting in week 6 Project Value: 40% Fees: 9 hours a week x 3 weeks @$20 per hour = $540 Stage 3: Design Development This stage involves further design development of one chosen design direction. I will design 16 applications to show how the final design works across a range of situations. I will then design a suite of design guidelines for others to follow my design intent into the future. Timeframe: This stage will take six week Deliverables - A4 document at least 20 pages. Stage 1, 2 and 3 will be put together into a brandbook. It will be uploaded online in week 12 and professionally printed and bound and delivered in week 13 Presentation of Stage 3 to art director at team meeting in week 11. This will be videoed uploaded online. Project Value: 50% Fees: 9 hours a week x 6 weeks @$30 per hour = $1080

Prepared by Jane Novella Jane Novella 1909/ 28 Bouverie Street Carlton VIC 3053 Project Title: Branding for Loop App Invoice no: DCO20001 Date: 24/05/2019 Stage 1: Research and Strategy This stage explained the importance of branding. This stage also involved client research, collecting visual material for analysis. Competitors brands will be collected and placed on a positioning map. Brand Values and naming options were be suggested. A moodboard was be created for your consideration. A strategy document outlining in words with supporting visuals the way forward was presented. Presentation to art director at team meeting occurred in week 3. Deliverables: A4 document of 6 pages in colour has been delivered to my art director and uploaded online. Project Value: 10% Fees: 9 hours a week x 3 weeks @$20 per hour = $540 Thank you for the opportunity to work with you on branding your business. Jane Novella. Terms and Conditions Please make payment to the Bank Account details below within 14 days. Jane Novella BSB: 000-000 Account Number: 0000 0000 0000000000000 U1909/ 28 Bouverie Street Carlton VIC 3053 E: jane.novella@gmail.com M: 0400000000

Total Fees: $2,160 (not including GST) Agreement to Proceed I wish to proceed with this project ads outlined above. I agree to the terms and conditions on the back on this estimation. Name___Jane Novella________Signature____________________________Date___22/03/2019_________ DCO20001 â&#x20AC;&#x201C; Brand and Identity Design

DCO20001 â&#x20AC;&#x201C; Brand and Identity Design

Reflection

Reflection Stage 1 From these past 3 weeks, I’ve learned about many technical terms about branding, especially the difference between Brand Marks and Figure Marks. Activities like the ‘Do-Be-Feel’ from the lecture also helped me to re-create and develop the kind of values, characteristics, and moods that my re-brand would like to achieve. I have also learned how to differentiate and group my brand’s competitors in a way that makes it easier to analyze the design and concept trends within my market sections. While on the skill side, I learned how to make mock-ups from a brand to visualize how a logo would look like on merchandise. This helps me to design a logo with the proportion that would more likely fit the merchandise of the brands. From peer reviews last week, I have learned about how to layout my documents properly in a more aesthetic kind of manner, especially with all of the different variety of logos and pictures that I have included in my document.

Reflection Stage 2

Reflection

Reflection Stage 3 Through out the past 5 weeks of doing the brief’s third stage, I’ve learned a lot about the branding documentation and more in-depth about the design industry related skills. I learned about how a brand mark existed not only for a company’s identity, but also for the customers, which is why badging or brand mark application is an important process that a designer should really consider how customers would react to the brand mark extensions. As I was not familiar with formal documentations procedure in Australia, I was quite overwhelmed during the process of designing the envelope, letter heads and box packaging. I would put some design elements on the area where it is supposed to be cleared for stamps or bar code. I didn’t know what abbreviations are appropriate or what informations should be put on a certain document. This is where my studio art director would help me during the designing process and guide me to design a proper formal document. In my opinion, the most interesting part of this stage is to create a brand guideline as I knew about mock up applications before, yet I did not know that a professional branding document would have attributes such as brand mark’s original size, minimum size and misuse.

The next important thing that I have learned through this stage is the technical skills in using Adobe Illustrator. As compositing a brand needs extra detail on every of each element, it is quite tricky to use pathfinder and other similar tools to create the shape that I want for the brand.

Besides learning the technical ways of doing Photoshop to do a mock up design, I also learned more about how to optimize a mock up design. With 16 varieties of brand mark applications, I learned along the way there are different campaigns and messages to be delivered through each items, thus each must receive different treatment in to deliver messages efficiently. For example, on apparel items, it is better to not give heavy designs or designs that is associated with a brand heavily, a simple cool quote will do. While it is smart to put subtle hints about the company’s identity such as include small logos or use certain color scheme, but some items may need a more direct information about the company’s identity such as letterheads or box post packaging.

The feedbacks I have received from my brand studio peers and art director also helped me to push beyond what I thought I could not achieve. They had given me very helpful directions on my previous ideation designs, i.e. sketches, color and shape choice, which help to shape the current chosen brand mark for the Loop App.

Overall, the freelance and industry related skills I received from the lectures, combined with more conceptual branding lessons I learned from my tutor and the feedbacks on design I received from peer evaluations during the class’ discussion has helped me to finish the last stage of this branding development.

During the Stage 2 of the Brand Concept Design module, I have learned a lot about how to research and create brand ideation. The initial stage of this module helped me to think critically and creatively as it is not easy to come up with a simple and compact solution as a matter of communication of certain ideas.

DCO20001 – Brand and Identity Design