Astronic Styleguide We are out of this world!
158 41 06
158 23 44
158 44 85
158 66 85
156 23 18
Media Case 1 | B303 RenĂŠe Coers Masoud Banbersta 30 October 2013 1
Content page Concept introduction________________________________________________________________________________ page 3 Print guidelines_____________________________________________________________________________________ page 4 Web/screen guidelines_______________________________________________________________________________ page 6 Audiovisual guidelines_______________________________________________________________________________ page 9 Merchandising______________________________________________________________________________________ page 10 Color scheme______________________________________________________________________________________ page 11 Typography________________________________________________________________________________________ page 12 Logo use__________________________________________________________________________________________ page 13 Website concept and inspiration_______________________________________________________________________ page 16 Imagery___________________________________________________________________________________________ page 17 References________________________________________________________________________________________ page 18
Concept introduction Quick look Astronic
Allow us to introduce ourselves: we are Astronic. And we, and our product, are going to take you ‘out of this world’.
Mission statement Our main goal is to provide a nutritious and easy to prepare product that will
Astronic is a brand offering healthy
quantity and our future generations
be informational as well as satisfying
product line of smoothies for chil-
deserve to be raised in a healthier en-
while being easy to incorporate into
dren. Our goal of establishment is to
vironment. This is why we, at Astronic,
the busy lifestyle of parents.
increase the health and overall quality
are engaged with challenging the food
of life of children. The way we accom-
and beverages industry to provide
plish this mission is through raising
consumers with products that do not
To become the leading brand in the
awareness among parents about the
put their health at risk.
healthy beverage/smoothie market in the Europe and Africa, known for our
necessity of fresh and nutritious diet for their kids. Furthermore, our prod-
Our goal is to empower kids to play
transparency and unique combinations
uct facilitates the needs of busy par-
and explore with Astronic, to learn
ents for it does not require more than
from our package about space, and
seconds to prepare and serve.
grow fit and healthy.
Tagline(s) ‘Out of this world’
As ambitious as we are, we fight to
Currently we are there for our little
reduce the overweight and obesity
friends in United Kingdom and South
problems among children at the stage
Africa with the goal of expanding on
of early growth by replacing their
common junk intake with our highly nourishing smoothie. We believe quality comes before
‘Nothing to hide’
Print guidelines ‘Readability’ and ‘successful product’ go hand-in-hand. Without clear guidelines on how to treat copy material within Astronic, it becomes harder to blow people’s minds with our hard work. Also, without guidelines, it becomes too easy to make us look bad.
2. Type color
requires more leading.
We are no longer in the 80’s: not every color combination looks good. For readability, printed text should always be black and white. If using colored text, it should be restricted to front page, headlines and titles:
Welcome to Astronic. We are Out Of This World. Why don’t you stay a while?
3. Point size Please keep these guidelines in mind when handling copy material:
1. Contrast Readability is our #1 priority in all internal and external communication. Using high-contrast colors for background and text is required for optimum readability. Next to dark colors on white, here are some alternate examples:
Bigger is not always better. Keep the point size between 12 and 18 (point size varies between variation of the font family and style). Also, consider the audience when choosing a font size; corporate reports will require a different usage of point size than employees. Our use: 14 for headings, 11 for body text, 18 for titles
4. Leading Leading is the space between lines of type. Ours should always be 30 to 35 percent of the point size. This makes the text more pleasant to read and seem way less chaotic when a heavier typeface is used. A heavier typeface
Leading is the space between lines of type. Ours should always be 30 to 35 percent of the point size. 5. Font family + font style The best font choices are the ones where readers do not notice the font, but the message. Sans serif fonts are made for web displays and are known for their minimalist style. Seeing as how Astronic’s communication will be mainly digital, and our style minimal, this fits our identity perfectly. A sans-serif font will be applied for all text, on all platforms. Gotham Black (18pt) will be used for all titles in copy material, Gotham Book (11pt) for all body text, Gotham Light (15pt) for all headings within the body text.
Gotham Black | 18pt Gotham Light | 14pt Gotham Book | 11pt
6. Font heaviness Italics and UPPER CASE LETTERS will never be used in copy text. Bold text will not be used for a consecutive large body of text. Capital Letters Will Be Used Sparingly and according to grammar rules (with exception of Astronic products and other brand descriptions).
7. Letter spacing We are not at a concert, so there is no need to crowd the text. Keep a wide space between the letters. Gotham is a monospace font so steer clear of all proportional typefaces.
We are not at a concert, so there is no need to crowd the text. 8. Margins and columns An easy guide to stick to: • Indent 1 inch at margins • Justify left margin, unjustify right margin • Double space (30-34 pt) between paragraphs or other bodies of text • Use block paragraph style, no indents
9. Paper finish Use a matte or non-glossy finish, without any watermarks or background distortion. The paper should always be white, ivory or within the lighter shade family for optimum readability.
10. Clean design + simplicity Targeting two audiences is a chore. So the style that will be maintained throughout the design of every document will be minimal and simple. The color use will always be within the family of Astronic’s color theme. Please see page 11 of this style guide for the codes to every color.
11. Footnotes + references All footnotes and references will be formatted in APA style:
Author, A. A., & Author, B. B. (Date of publication). Title of article. Title of Online Periodical, volume number(issue number if available). Retrieved from http://www.someaddress.com 12. Maps, charts, graphs, graphics 5
We are no longer in kindergarten, using images does not substitute intelligent content. The image use within the document depends on the target audience. For internal communication, graphics may be used to support/highlight the accompanying text. For external communication, all images (except for graphics, charts and tables) will be placed in the annex. However, all images used in communication should be of high quality and, preferably, self-produced images.
13. Use of words (guidelines) 1. At the beginning of every chapter, the words ‘South Africa’ and ‘United Kingdom’ will be spelled out in full. In the rest of the chapter, the abbreviations ‘SA’ and ‘the UK’ will be used. 2. There will be No Use Of Capitals For Titles. 3. If reading speed is most important, use longer line lengths (75-100 characters per line). If design is most important, use shorter line lengths (fifty characters per line).
Web/screen guidelines Our website will be a direct reflection of our identity. This means that our website, and all its content, will look well put-together with a touch of playfulness and colorful graphics. Please keep these guidelines in mind when designing for web and mobile:
General 1. On all web- and digital platforms content will be provided that is engaging, relevant and appropriate to our target audiences. The Astronic website and application will have an interactive game for the kids while the parents can read up on nutritional facts and healthy, quick-to-make recipes. This format will be applied to all external communication.
User experience 2. We will ensure that our website format will meet user’s expectations and that it is attractive to our target audiences. By choosing a colorful minimal
design, the parents will not feel like they are browsing a kids’ site, but the kids will enjoy the incorporation of cartoons and colorful graphics. 3. We will actively involve users in establishing user requirements so that we can be on top of our game when it comes to satisfying our customers. Through feedback possibilities and customer service options, we will keep in touch with our customers and their wishes. 4. Even though our focus is to capture our audiences with a smashing visual identity, we will focus on achieving a high rate of user performance before dealing with aesthetics. We want to optimize the user’s experience.
How we plan to optimize the user’s experience of our website and mobile application: • No pop-up advertisements on our website or application • A minimum of visible advertising by partners and sponsors • Minimize the number of bytes per page to facilitate fast page load-
ing; - allow users to choose their required format (i.e. the metric system in the UK, centigrade versus Fahrenheit, 12-hour clock (SA) versus 24-hour clock (UK)) • Format recipes and nutritional facts that it can be read through print and digital (study shows long documents, over 5 pages, get printed while short documents get read online) • If a process takes a long time, such as downloading several recipes, use a loading bar (for 5 minutes or longer) or hourglass (for 10 seconds or longer) for Window Users
Technicalities 5. Not everyone will be using the same browser to access our website, so we will develop and design for the most common browsers. In SA the most commonly used browsers in 2013 (in order of popularity): 1. Internet Explorer; 2. Google Chrome; 3. Mozilla Firefox; 4. Safari. In the UK, these are: 1. Internet Explorer; 2. Google Chrome;
3. Safari; 4. Mozilla Firefox. The same is applicable to operating systems. The UK and SA share Windows 7 as their most operating system, with Windows XP as the second most popular. In the UK, Windows XP and MacOSX are in line for second place. 6. The connection speeds in every country differ. The UK will have more households with high speed internet, while SA has more landline internet speeds. We will design for the connection speed that is most common for users.
Screen 7. Today, most visitors have a screen resolution higher than 1024x768 pixels. By designing for this resolution, our website ensures the accommodation for the majority of Astronic users. When it comes to color depth, today most computers use 24 or 32 bits hardware to display 16,777,216 different colors. Older computers use 16 bits display hardware, which gives a maxi-
mum of 65,536 different colors. We will use a fluid layout that automatically adjusts the page size to these monitor resolution settings (responsive web design).
Functionality 8. Our homepage will meet these requirements: • The users will be able to access the homepage from any other page on the website. • All major options will be presented on the homepage • The homepage will set the standard of our website’s (design) quality- first impression is key • The purpose and value of Astronic will be made clear on the homepage. Our tagline and mission statement will be in the header or footer so that there is no mistake when entering the site. • There will not be a large sum of text on the homepage- only headlines and additional explanations if needed, indicating the most important and visited areas of our website (one screen of information).
9. The most important items of our website will be at the top center of the webpage to facilitate how users find the most relevant information. The same counts for information on every page: we will apply a high-to-low level of importance when it comes to displaying information. Important information will be places higher on the page than least used information. 10. All pages will have navigational options. Also, the primary navigation menus will be placed in the left panel, and the secondary and tertiary menus together. 11. We will provide information in multiple formats as Astronica has two distinct audiences who will be interested in the same information. The parents will want more direct, easy to swallow information while kids would prefer to learn in a playful manner (through games, quizzes, cartoons).
12. Text use on digital media: • See print guidelines for textual content information • For large use of text, we will use dark text on a plain, high-contrast, non-patterned background • The format of common items is consistent on every page (HH:MM:SS / mm/d/y) • Draw attention to specific parts of a webpage with the appropriate (but limited) use of moving or animated objects, size differential between items, images, brightly colored items, and varying font characteristics. • Avoid using unfamiliar or undefined acronyms or abbreviations • Sentences should be in active rather than passive voice. • Write instructions (recipes), in affirmative statements rather than negative statements (tell the users what to do, not what not to do) • Make rare use of users’ terminology to describe elements and features of our website
sparingly and when used, they will be simple and transparent as to not bother the user’s reading experience. Complex backgrounds can also substantially slow down download rates so our motto, when it comes to design, will be “the simpler, the better”.
14. All clickable items will be clearly labeled and set apart from normal text. 15. Automatic playing multimedia elements (video, animation and audio) will also be used sparingly and never without the user’s consent. 16. Astronic’s logo will be consistently placed on every page.
Design 13. Background images will be used
Audiovisual items fall into two main categories. Astronic’s main focus will be on New Media, as this does not limit its accessibility to all audiences. Everyone with internet access will be able to access our information. Other media we will be focusing on are non-radio recordings and television.
Examples of the content posted on YouTube/Vimeo will be Snacks For Tots (healthy snacks for youngsters), DIY Smoothies, Ingredient of the Week, Smoothie of the Week
The media we will be implementing for moving image and sound: • YouTube/Vimeo • Podcast • Song/track • Television program • Television advertisement
1. YouTube/Vimeo (non-broadcast television material) YouTube will be used to visually communicate our brand to our target audiences. With the popularity of viral videos, our team of highly creative individuals will consistently produce unique content that will be of high quality and educational with a slightly
2. Podcast A Podcast is an audio program, like a homemade radio show, that is made by someone and then posted to the Internet for anyone to download and listen to via iTunes or any portable media device. Our free/sponsored Podcasts will feature nutritional specialists, dieticians, pediatricians […] that will inform our audiences on a bi-weekly basis of the newest developments in healthy food. These Podcasts can be listened to on the way to work, dropping the kids off, any activity that our busy audiences will be performing on a daily basis.
3. Song/track Astronic will have a recognizable 3-second tune that will be a signature on all audiovisual media. The Astronic tune will be featured on all audiovisual
media. It will be in the beginning of every Podcast and YouTube/Vimeo video (to create brand recognition) and at the end of every advertisement.
4. Television program The ultimate goal is to have Astronic feature on several local television programs. In SA this could be Doctor’s Orders (the series debunks health myths and answers health, lifestyle and vitality questions and delivers the latest information from dermatologists to dieticians, cardiologists to acupuncturists) and in the UK this could be The Food Hospital (The Food Hospital examines the science behind using food in medicine, tackling patients’ health problems through the food they eat). Being featured on one of these shows will largely increase Astronic’s brand awareness and reputation.
5. Television advertisement Morning television is filled with cartoons and kid-friendly shows. By creating a 30 second commercial that can be featured as an advertisement during one of these shows, we can subliminally start building our brand in the children’s minds.
Merchandising In order to create awareness and stimulate the interest of our target audience (parents and children), we need to have a strong set of merchandising guidelines. Please keep the following guidelines in mind when it comes to merchandising
Product design The design of our smoothie is one of the most important steps to consider as far as visual merchandising is concerned. Many food companies tend to keep busy design in order to draw the potential buyer’s attention. However, this is not necessarily the best solution to this idea. Instead of leaving our customer puzzled with lots of images, typography (big letters) and information, we have decided to keep it as simple, clean and minimalistic as possible. The same goes with colours and typography, just as we have already mentioned above. By doing so we’ll provide a neutral product design that will be applicable to both parents and
Selection Except for the stores, where Astronic will mainly operate in, we have come up with a wider selection of merchandising options. An example would be the regular healthy food pop up events in which Astronic will take part. We’ll certainly have samples of our smoothies so that people could try out or buy, but we also plan on including our brand on employees’ shirts, banners , pens and also hats. By buying an Astronic smoothie the buyer will get a free pen. If they buy the whole product line (our three exclusive products for: brain power, stamina and energy), they will receive a free t-shirt.
Pricing Pricing also plays big role when merchandising sales is concerned. We’ve decided to keep Astronic smoothies balanced in price- not too cheap, nor too expensive. We’ve taken into consideration our target audience- in this case the focus should be on the parents as they will be the ones buying the smoothie for their children. We’ve
created this product especially for children whose parents have a job. This leads us to the fact that if we implement a cheap product price strategy, this will inevitably alert parents that our product may not be of such a good quality as we have promoted. On the other hand, the Astronic smoothie will not be extremely expensive as our aim is to create awareness and send a message about a topic as serious as healthy eating habits. If we create a very expensive product, we risk losing the main objective of our campaign as it will be targeted at the upper class only. Everyone deserves to have access to our brand.
Display Last but not least, display in stores is also a very important aspect in our merchandising policies. We plan on giving the Astronic smoothie an important spot in any store. Our product will be placed in a logical “department”- just right after the groceries part. It will be displayed in the middle of the shelves so that good eye level balance is kept between children and parents when they notice it. It won’t be too high for children and too low for their parents.
Gotham Black for titles
Gotham Book for body text
Gotham Light for body headings 12
Logo use Logo variations
Logo use | Doâ€™s and Dontâ€™s
Never Strech the logo
The Astronic Logo can be used by downloading it from the official page.
Always white backround if the logo is black
Never transparent Always use white background in case of using the colorful version of the logo
Never another backgroud color than the ones from the Color Theme. Never image background.
Always one color background. (from the Color Theme) if the logo is white.
Logo use When you print the logo, always have in mind the Dos and Do Nots. The logo will be available on the official website for download. We will provide the logo as a vector .png, therefore it can be enlarged by any size. Keep in mind: if you have downloaded the logo from another source, check if it is the actual logo and use at least 300px for printing.
Website concept and inspiration The Astronic homepage is minimalistic, easy to access and fun. It will try to attract both target audiences by using a colourful background combined with clear and little body text. The body text will always be white or black for a better visibility. Please check web/screen guidelines for more information.
Imagery Created especially to attract the children, the astronaut is a minimalistic character aiming to animate the brand. The Astronaut will be placed on the packages of Astronic Smoothies as well as within the digital media. It will be a tool to introduce the educational facts, the game, astrology facts and other topics related to the overall theme:
The imagery we are aiming for throughout our campaign will be ‘minimalism’. Minimalism is defined as: “A minimalist design is a design stripped down to only its essential elements.” This way we can attract different target audiences to our product.
Other examples of minimalism
References 1. Mokhov, O. (2011). Minimalist Design: A Brief History and Practical Tips. Spyrestudios. Retrieved from: http://spyrestudios.com/ minimalist-design-a-brief-history-and-practical-tips/ 2. Walton, Z. (2013). Windows 7 Still Most Popular OS On PCs Sold In The UK. WebProNews. Retrieved from: http://www.webpronews.com/windows-7-still-most-popular-os-on-pcs-sold-in-the-uk-2013-02 3. Statistics for browser use in the United Kingdom and South Africa http://gs.statcounter.com/#browser-ZA-monthly-201209-201309 http://gs.statcounter.com/?PHPSESSID=j2juf5bil673j4vrso39eijui6#os-ZA-monthly-201209-201309 4. Browser Display Statistics http://www.w3schools.com/browsers/browsers_display.asp