DESIGN & STYLEGUIDE
Hello... Zain, Witty, Impressive, Trustworthy & You! Put them all together & what do you get? Zwity of course!
Welcome & thank you for coming to visit. We are a new social media network focused on giving control back to the guests & helping individuals guard against the on-line threats of cyber-bullying, predators & hacking. Although our primary goal is to provide a platform where people can gather & keep connected to one another, we further this aim through compassionate understanding & protective measures & resources at the finger tips of every guest.
2
Research
Look & Feel
• Goals & Objectives
• Competitive Review
• Target Audience
• SWOT Analysis
Voice & Tone
• Textures
• Color Palette
• Web Fonts
• Design Elements
• Imagery
• Print Fonts
Logo Development
• Narrative
• Examples
• Theme & Style
• Clear Space
• Strategy
Typography
• Correct Usage Styles • Incorrect Usage Styles
3
4
Our mission is to create an easy & safe environment for users to connect with family, friends & business colleagues. We aim to give control back to the user & allow our users to express their creativity. We strive to give the control & creativity back to you while maintaining your privacy, safety & secure identity. Zwity creates a space for you to be yourself. We are introducing a new way of social networking using web-cams, whether you want to connect with family, friends, coworkers or anyone else that you fancy speaking & connecting with. Let Zwity help you stay connected & be informed in the way YOU want to be.
Goals & Objectives 5
Our target audience is the rising generation of young entrepreneurs, students & families currently enrolled or coming out of college. We provide a safe environment to network & interact with other individuals. Our safety & privacy features provide this steady, clean environment. College students are looking to socialize & have fun with friends on-line without having to worry whether their professional image will be damaged, while young families focus on protecting their children from dangers that may present themselves on the internet.
6
Ages:
20-35 College Students Young Professionals Young Families
Target Audience
Competitive Review Similarities We share many similarities to all of our top competitors. From the overall package of Facebook to the business connections & aspects of Linked-In, the open instant “tweets” on Twitter to the shared snapshots of life & fun on Instagram.
Differences We cover so many parts of other sites, you could say we are the warm & cuddly version of the Frankenstein Monster.
Most social networks offer “Timelines,” Photo & Video sharing, friends list, messengers, & mobile applications.
Linked-In
Zwity combines the best of all these & still gives social media a fresh face to say hello with!
We reach out to you on a personal, friendly level with many of our features. Facebook retains all rights to anything you share, including the right to buy & sell your personal information. Linked-In covers business connections, but that is only one part of what Zwity provides. Twitter & Instagram only truly cover instant short messages with photo & video sharing.
Instagram 7
Competitive Review Zwity We offer an individualized Live Help Screen, separation between Family, Friends & Business, interactive Augmented Reality games & Facial Recognition login.
Facebook The most used social networking site on the web today.
8
Continued ... USP Linked In Career services & search indicator for work & jobs within an individuals specifications.
Twitter The primary miniblog site on the web. A direct link to many friends & celebrities for fans.
Instagram Offers image manipulation services on their mobile app. A quick & easy photo blog.
9
Strengths • Family Oriented
• Passion & Advocacy
• Individual & Parental Control
• Strong Design
• Live Help Center
• Community Outreach
S.W.O.T • Visibility through Community Outreach Programs • Partnering with other Social Networks • Innovation of new technologies
Oportunities
10
• Increase the awareness of the Help Center • Increasing our footprint through Hyper-Local Ads
Weaknesses • Large competitors such as Facebook with 1.19 Billion users • Inundation of users through popularity of features
• Low recognition of the Company • Large scale expansion without proper people in place
• Lack of technology in place to handle workloads
Analysis • Potential of Hackers who may bypass certain aspects of our security features
• Incorrect analysis of consumer markets & feedback
• Larger companies such as Facebook, Linked-In, Instagram & Twitter
• Not having the ability to keep up with the evolving nature of technologies & social media markets
• Other new startup social media sites offering similar services &/or features
Threats
11
12
Voice & Tone
Narrative Once upon a time there was a Zwity... Zain, Witty, Impressive, Trustworthy & You. Put them all together & what do you get? Zwity of course! Zwity was founded on the core belief that a social networking site should be free from on-line predators & made nearly impossible to hack into. You may ask, ‘how is that possible’? Zwity will utilize facial recognition technology in order to grant access to each guests personal profile & networking pages. In fact, our social media site will be completely password free in 2016! Zwity will host family, friends & business on one social platform while separating each group into individual easy to use tabs. Today, many social media sites sell a persons private information such as phone numbers & emails, & don’t do enough to protect their primary asset; YOU! At Zwity we understand that you are the most important part of our network, to that end we endeavor to always keep your protection & privacy as our number one concern.
13
Zwity takes its theme from our core principles that are also part of our name... ZWITY.
Zain:
The word Zain is from Arabic origins meaning “beautiful”. We couldn’t be any more plain. We believe that everyone has beauty, inside & out.
Witty:
In today’s society it isn’t possible to be to well understood or to widely read. One must maintain themselves amongst the elite of intellectual & savvy individuals. With this in mind we express certain wit through imagery & design elements that are both smart & have a cutting edge.
Impressive:
Most people don’t pay attention to things that are not eye catching or have a definite message that is compelling & deep. Our themes express this impressive quality by using unexpected color combinations & simple yet direct shapes & imagery.
Trustworthy:
In design theory, there are a lot of ideas that center around what certain colors & shapes mean. By employing these ideas & also changing the rules on some others, we convey a feeling of trustworthiness not only through that imagery but also through communications & copy.
Theme 14
& Style In order to maintain a look & feel consistent with our Narrative & Theme, Zwity pulls from many different inspirations. Some examples include imagery & design inspiration from: • • • • • • • • •
Pop Art Café Culture Coffee Shops Bright & Simple colors Nostalgic cartoon-like imagery with a modern twist Smooth edges Round corners Andy Warhol Mary Catherine Mark
Just to name a few... Growing up doesn’t mean we have to forget our sense of childlike wonder. 15
Character / Persona Casual, Playful, Inspiring, Witty, Serious, Professional, Warm, Generous
Tone Personal, Honest, Happy, Zain, Witty, Serious, Direct, Humble
Language Simple, Fun, Savvy, Expressive, Serious, Whimsical, Uncomplicated
Purpose Engage, Delight, Entertain, Connect, Protect, Inform, Enable, Sell, Amplify, Create 16
Like this: Break out the cellphones/laptops & celebrate! The Zwity Official Launch is here - what events are you gearing up for? Not like this: Don’t miss the Zwity Official Launch, unless of course you don’t love your friends.
Like this: We love our guests like family! Get everything you need right here at Zwity to connect with everyone in your world, your way! Not like this: We are the best. Choose Zwity or lose out..
Like this: Our face to face Help Center is the bees knees & one of a kind. It’s service at your fingertips 24 hours a day with a caring live person! Not like this: We can solve your problems. Our help desk has nice people.
Like this: Selfie selfie on the wall....Zwity wants to see you all! Join our selfie contest & show us how you use Zwity everyday. Snap a shot & send it in to win & be asked to participate on our newest campaign! Not like this: Wanna be kewel? Send in a selfie & you might get something.
Strategy To the left is a table demonstrating through example, our overall strategy pertaining to Zwity. We have broken everything down into four sectors: Character/Persona, Tone, Language & Purpose. These various parts are homogenized through key words & a created persona called Amy. Amy acts an idealized vision of our target demographic. Examples of good & bad copy/communications are provided in order to truly understand the Zwity spirit overall.
Hi, I’m Amy! 17
18
LOOK & FEEL 19
Textures Zwity can be described in texture as warm, friendly, slick & modern. Use textures that reflect these principles & words. Smooth & burnished metals, vintage cloth, modern wood, natural stone, watercolor & art styles with bold & bright colors are what Zwity feels best dressed in.
20
Design Elements Using simple shapes makes Zwity more approachable & still keeps the look & feel clean & neat. The rounded corners of the edges allows us to feel open, perpetuating the sense of honesty & welcomeness as well as being relateable on every level. Circles represent Zwity’s dearly held belief that nothing is more important than YOU, the guest. Everything we do comes back to you, after all, we are YOU! Our use of complex polygon shapes helps to convey the clean modern feel as well as suggest a deeper more complex relationship between Zwity & YOU, the guest.
21
Color Palette Primary Zwity Colors Zwity Plum:
Hexadecimal: #7a0089 R: 122 G: 0 B: 137 C: 65 M: 100 Y: 8 K: 2 L: 29 a: 55 b: -43
Blood Orange:
Hexadecimal: e6502f R: 231 G: 80 B: 47 C: 4 M:84 Y: 92 K: 0 L: 56 a: 57 b: 51
Dark Steele Grey:
Hexadecimal: #5e5c5e R: 94 G: 92 B: 94 C: 62 M: 55 Y: 52 K: 25 L: 39 a: 1 b: -1
Lime Green:
Hexadecimal: #00d33f R: 0 G: 212 B: 63 C: 71 M: 0 Y: 100 K: 0 L: 75 a: -67 b: 57
Light Grey:
Hexadecimal: #b5b5b5 R: 182 G: 182 B:182 C: 29 M: 23 Y: 24 K: 0 L: 74 a: 0 b: 0
Silver Grey:
Hexadecimal: #e5e7ed R: 230 G: 231 B: 237 C: 8 M: 6 Y: 3 K:0 L: 92 a: 0 b: -4
22
Secondary Zwity Colors Cobalt Blue:
Hexadecimal: #303393 R: 48 G: 51 B: 147 C: 98 M: 96 Y: 3 K: 0 L: 26 a: 24 b: -55
Chartreuse:
Hexadecimal: #a4cd3a R: 164 G: 205 B: 58 C: 41 M: 0 Y: 100 K: 0 L: 77 a: -29 b: 63
Raspberry:
Hexadecimal: #c656a0 R: 198 G: 86 B: 160 C: 20 M: 80 Y: 0 K: 0 L: 53 a: 51 b: -18
Pale Lilac:
Hexadecimal: #c7a1cb R: 199 G: 161 B: 203 C: 20 M: 39 Y: 0 K: 0 L: 71 a: 19 b: -16
Pale Lime:
Hexadecimal: #cfe088 R: 207 G: 224 B: 136 C: 21 M: 0 Y: 60 K: 0 L: 86 a: -16 b: 40
Cornflower:
Hexadecimal: #6b8cc7 R: 107 G: 140 B: 199 C: 60 M: 40 Y: 0 K: 0 L: 58 a: 0 b: -35
Imagery
23
3
Logo 34px
37px
37px
34px
37px 37px
37px
37px 34px
37px
37px
34px
3
Development 34px
24
34px
The Zwity logo is our unique stamp on the World...our ambassador of goodwill & the way in which we present ourselves & treat others. Remember Zwity st&s for Zain, Witty, Impressive, Trustworthy & YOU!
25
Examples There are many ways for you to use the Zwity logo & still remain fresh & fun. Be kind by observing the following rules when using the Zwity logo & all will be happiness & sunshine! The Zwity logo should primarily be represented in either full color as a White logomark on a field of Zwity Plum or a Zwity Plum logomark on a field of White. If in single color (black & white), the Zwity logo should appear as a Black logomark on a field of White or a White logomark on a field of Black. In its transparent use the Zwity logomark should be either White or Neutral Gray #3 with an opacity setting of 50%. It may also appear as a White or Neutral Gray #3 Field with an opacity setting of 50% & the Zwity logomark removed from the field leaving a negative space.
26
Clear Space 37px
34px 37px
34px
34px
37px
In order to maintain the integrity of our “face” & brand, please allow at least one square distance of the “dot” from the logomark “I” in all directions so that we can feel unfettered & uncrowded. 27
Correct Usage Remember those examples from before? The PRIMARY RULES? Well yes, those things. Those are the most common ways that Zwity should be portrayed, however alternatives do exist. If you wish to have an alternative color for your Zwity representation, then the logomark should always appear as a White logomark on a Colored field from the approved Secondary Color list in the color palette. Any deviation from the color palette will wash out the logomark & it will loose its impact.
28
When placing the logomark on a dark textured background, the logomark should always appear in white. Also there must be enough contrast in order for the logomark to appear easily in the image.
When placing the logomark on a light colored/ textured background, the logomark should be either Zwity Plum or Black with enough contrast that the logomark stands out easily from the background. 29
Incorrect Usage 30
Do try to help us out & not do the following:
• Do not use the full color logomark on a dark colored background, it should ALWAYS be white on dark colors. • Please do not stretch or squish us...its rather unpleasant. • Do not use alternative colors for backgrounds or for the logomark that are not on the approved color palette. • Do not use a dark colored logomark on a dark or busy textured Background...we might get lost! • Please refrain from using monochromatic color schemes even if they are colors from the approved list. Visibility is at a premium & we don’t want to disappear. • Do not use light colored logomarks on light colored or busy backgrounds. It makes it very hard for people to even look at us then.
31
DEFGHIJKLMNOPQRSTUVWX abcdefghijklmnopqrstuvw 3456789~!@#$%^&*()_+-=<> LMNOPQRSTUVWXYZ ABCD ghijklmnopqrstuvwxyz abcd @#$%^&*()_+-=<>?:; 12345 ABCDEFGHIJKLMNOPQRSTU abcdefghijklmnopqrstuv
Typog
32
XYZ ABCDEFG wxyz abcdefgh >?:; 12345678 DEFGHIJKLMO defghijklmnop 56789~!@#$% UVWXY vwxyz
LMNOPQRS ghijklmnopqr @#$%^&*()
raphy
DEFGHIJKLM abcdefghi 3456789~!@# ABCDEFG abcdefgh
33
Web Fonts Headers Century Gothic
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 123456789~!@#$%^&*()_+-=<>?:;
Secondary Headers Century Gothic
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 123456789~!@#$%^&*()_+-=<>?:;
Body Arial
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 123456789~!@#$%^&*()_+-=<>?:;
34
Print Fonts Headers Century Gothic
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 123456789~!@#$%^&*()_+-=<>?:;
Secondary Headers Century Gothic
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 123456789~!@#$%^&*()_+-=<>?:;
Body Arial
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 123456789~!@#$%^&*()_+-=<>?:;
35
Design & Style Guide 2015
36