Download pdf - HCI 590X Design Concepts: Brand and Logo Exploration · 2019-07-01 · Design for HCI, were extremely helpful to us as we explored designs for logos and branding. Dog Ears (favorite

HCI 590X Design Concepts: Brand and Logo Exploration

Iowa State University | HCI 590X | Spring 2016

Prepared for Chase Meusel

HCI 590X | Spring 2016 Mintz and Darko

Contents Research on UI Design for Older Adults Research on UI Design for Children

Typeface Research Finding a Name

Tagline Ideas The finalists

SmackTag Logo Exploration Initial Sketches Typeface Exploration Color Exploration Initial Logo Concepts Initial Sketches Typeface Exploration Color Exploration Initial Logo Concepts

Feedback on Initial Logo Concept Color Exploration of Favorite Logo Concepts

SmackTag DogEars

Typeface Exploration of Favorite Logo Concepts SmackTag DogEars

LogoFinal Concepts Colorblind Simulation of Final Logo Concept

SmackTag DogEars

Finalized Logo SmackTag

Written Analysis References

1


Logo and Brand Development The following research, notes, and sketches are from our logo and brand exploration for this project. Although some of the research focuses on how our key users interact with web sites, some of the research focuses on font and color selections so we include it here.

Research on UI Design for Older Adults Our research found two studies that focused on how older adults interact with web sites and software programs (Nielsen, 2013; Chisnell & Reddish, 2005). The recommendations of these studies, plus those from the National Institute on Aging (n.d.) are summarized below. We will refer to these recommendations when we develop the project’s wireframes.

Reduced visual acuity is probably the best known aging problem. Sites that target seniors should use at least 12 point fonts as the default.

Use large text for hyperlinks and command buttons and other interaction objects. This is especially important for two reasons: 1) to ensure readability, and 2) to make them more prominent targets for clicking. Also, you should use whitespace to separate interaction objects to decrease erroneous clicks and increase the speed at which users hit the correct link. These objects should be reasonably large to facilitate easy clicking.

Pulldown menus, hierarchically walking menus, and other moving interface elements are problematic for seniors who are not always steady with the mouse. Better to use static user interface widgets and designs that don’t require pixelperfect pointing.

Use a sans serif typeface, such as Helvetica that is not condensed. Avoid the use of serif, novelty, and display typefaces.

Use 12 or 14 point type size for body. Use uppercase and lowercase letters for body text. Only use underlining for links. Left justified text is optimal for older adults. Color: Avoid yellow, blue, and green in close proximity. These colors and juxtapositions

are difficult for some older adults to discriminate. Backgrounds: Use dark type or graphics against a light background or white lettering on

a black or darkcolored background. Avoid patterned backgrounds. Incorporate text within the icon if possible and use large buttons that do not require

precise mouse movements for activation. Use pulldown menus sparingly. Avoid automatically scrolling text. If manual scrolling is required, incorporate specific

scrolling icons on each page Let the user stay in control. Provide clear feedback on actions. Use the user's language; minimize jargon and technical terms.

2


Research on UI Design for Children Based on research on typefaces for children, we considered modern typefaces with simple, open letter shapes (Strizver, n.d.).

Typeface Research Two resources (Strizver, n.d., and NaranjoBock, 2011) recommended these typefaces that were designed specifically for children:

Sassoon Primary

Gill Sans Infant

Bembo Infant

Plantin Infant

Figure 1. Recommended typefaces for children These typefaces were initially designed for grammar school age children’s schoolbooks in the early 20th century. According to Strizver and NaranjoBock, the research for readability by young children the designer of these typefaces conducted holds true today for web and application use. These typeface are registered and are not free. They do provide examples of several characteristics we will want to consider when choosing typeface for our product, specifically, the shaping of letters that have descenders (a portion of the letter dips below the baseline) are simple tails instead of complex curlicues (g vs. g) and spacing for letterbyletter reading.

3


Finding a Name We considered several different names for the project:

Dog Ears SmackTag StoryPort TeleStory

Our objective was a name that communicated the project goal of reading and sharing, as well as simplicity, fun, and the concept of making an emotional connection with others. Feedback from informal surveys of friends, family and other students determined that Dog Ears was the preference. Our favorite was SmackTag. So we decided to explore both names when developing our branding.

Tagline Ideas Reading together while apart Connecting families, making memories Read a story, send some love Send some love Bringing love by the book

The finalists Deciding on the following names as our final two choices for a product name, we each took a one and began exploring. The concepts and principles that we learned in HCI 595, Visual Design for HCI, were extremely helpful to us as we explored designs for logos and branding.

Dog Ears (favorite of family and friends) SmackTag (favorite of ours)

SmackTag Logo Exploration The name SmackTag is a kind of portmanteau formed from “smack” and “tag.” In coming up with this name, we were looking for a “nonsense” word that conveyed connection, joy, and fun. Here, smack is defined as a noisy kiss. Tag refers to the child’s game of tag (with the idea of sending a recorded story as tagging someone). Loosely, the idea is that story recorders tag their kids with a kiss in the form of a personalized recorded story. The tagline for SmackTag is “read a story, send some love,” which we may abbreviate to “send some love.”

4


Initial Sketches Early sketches built on the idea of books, connection, and sharing, especially the idea of adults and children sharing together. The graphic images are iconic and abstract representations rather than realistic images. We felt abstract, representational images best fit a nonsense name like SmackTag and would give our product a modern look that may appeal to the sandwich generation who are our target buyers.

Figure 2. Initial sketches for SmackTag logo

5


Figure 3. Additional additional sketches for SmackTag logo

Figure 4. Final sketches for SmackTag logo

6


Typeface Exploration In exploring a typeface for SmackTag, we examined typefaces whose design met the recommendations for children: a warm friendly font with simple, open letter shapes. We also examined sans serif, nonitalic typefaces because they are recommended for adults. However for the typeface used in the logo itself (in contrast to the UI text), we felt we had more flexibility and looked for a typeface that is clean and legible, but is also fun and whimsical.

Figure 5. Typeface exploration for SmackTag logo. Although a few of these typefaces are more decorative, all are clean fonts with simple open letter shapes.

7


Color Exploration We explored blue, green, and orange as color possibilities. Because blue and green are analogous colors, which are common colors in nature (blue sky, blue ocean, green grass and trees), they are perceived as calming, comforting and relaxing when paired together.

Figure 6. Blue inspiration board. Blue calls to mind dependability, trustworthiness, sincerity and security (Shillcock, 2013). Depending on the shade and background, blue offers enough contrast to be legible for older adults.

8


Figure 7. Green inspiration board. Green calls to mind freshness, growth, renewal and safeness (Shillcock, 2013).

9


Figure 8. Orange inspiration board. We also looked at orange because it is perceived as vibrant, energetic, fun, friendly and inviting, and has the comfort of a warm color (Shillcock, 2013).

10


Initial Logo Concepts We started exploring logo concepts for SmackTag by picking a few of our favorite sketches and trying them out. For this initial concept, we stayed with one color combination (green and blue) and one typeface (Chalkboard). From these, we chose our favorite design concept to explore in depth with other color combinations and typefaces.

Figure 9. Initial SmackTag logo exploration, images 1A to 8. Except for the color combinations, images 1A and 1B are identical. We show them here to preview how the logo may be influenced by color choice. To reduce the number of choices and facilitate decisionmaking, the remaining concepts were created using the same color combination. All use the same typeface: chalkboard, a clean and playful typeface.

11


Figure 10. Initial SmackTag logo exploration, images 9 to 14.

DogEars Logo Exploration The name is a doubleentendre of dogears as used to describe the bookmarking habit of folding down the corner of a page and ears for the audio concept in our product. With “dog” in the name, one aspect of the logo seems obvious: embed a dog or dog features in the logo. An advantage of having an animal as part of the brand identity is that we created a mascot, someone to give a face, and later maybe, a voice, to our brand. Using animals in a brand identity helps in creating a persona where age, gender, and race are nonissue. The goal being to have a mascot that all users can identify with when they use the product. Meet Reader, the DogEars mascot, the virtual family dog, the little pup that traverses the cloud network to deliver books and notes from family member to family member. Figure 11. (Right) Sketch of “Reader,” potentially, the DogEars mascot.

12


Initial Sketches We decided on a shorteared pup for the logo graphic so that his ears resemble a page corners that has been turned down, or dogeared.

Figure 12. Initial concept sketches for DogEars brand.

13


Figure 13. More initial concept sketches for DogEars brand.

Typeface Exploration The MerriamWebster dictionary includes a hyphen in the spelling of dogears. We will want to either find a typeface where the hyphen is attractive, or take license with the term and eliminating any break between the words, as is popular with software applications and websites. In summary, options to explore include:

Dogears DogEars DogEars

In addition to the characteristics expressed for SmackTag typeface, we used specific contender criteria for the letters a and g for dogears:

Use Avoid

a a

g g

14


ABeeZee Dog-ears Dog-Ears DogEars Aclonica Dog-ears Dog-Ears DogEars Actor Dogears DogEars DogEars Amaranth Dog-ears Dog-Ears DogEars Andika Dog-ears Dog-Ears DogEars Autour One Dog-ears Dog-Ears DogEars Bree Serif Dog-ears Dog-Ears DogEars Bubbler One Dog-ears Dog-Ears DogEars Caudex Dog-ears Dog-Ears DogEars Chelsea Market Dog-ears Dog-Ears DogEars Comfortaa Dogears DogEars DogEars Coming Soon Dog-ears Dog-Ears DogEars Courtette Dog-ears Dog-Ears DogEars

Delius Swash Caps Dog-ears Dog-Ears DogEars

Delius unicase Dog-ears Dog-Ears DogEars

Didact Gothic Dog-ears Dog-Ears DogEars Fredoka One Dog-ears Dog-Ears DogEars Galindo Dog-ears Dog-Ears DogEars Gloria Hallelujah Dog-ears Dog-Ears DogEars Gochi Hand Dog-ears Dog-Ears DogEars

Handlee Dog-ears Dog-Ears DogEars

Happy Monkey Dog-ears Dog-Ears DogEars Imprima Dog-ears Dog-Ears DogEars Kotta One Dog-ears Dog-Ears DogEars

Londrina Solid Dog-ears Dog-Ears DogEars Muli Dog-ears Dog-Ears DogEars Paprika Dog-ears Dog-Ears DogEars Patrick Hand Dog-ears Dog-Ears DogEars Poiret One Dog-ears Dog-Ears DogEars Questrial Dog-ears Dog-Ears DogEars

Quicksand Dog-ears Dog-Ears DogEars Rajdhani Dog-ears Dog-Ears DogEars Salsa Dog-ears Dog-Ears DogEars

Schoolbell Dog-ears Dog-Ears DogEars Short Stack Dog-ears Dog-Ears DogEars Sniglet Dog-ears Dog-Ears DogEars Sofadi One Dog-ears Dog-Ears DogEars Text Me One Dog-ears Dog-Ears DogEars Vast Shadow Dog-ears Dog-EarsDogEars Viga Dog-ears Dog-Ears DogEars Waiting for the sunrise Dog-ears Dog-Ears DogEars Figure 14. Typeface exploration for DogEars logo.

15


Color Exploration Using the colors we selected in our SmackTag color exploration, we decided to explore the concept of using spot color for DogEars. Applying color where you want users to focus creates a “deliberate impact” on the user (Heller & Anderson, 2016). The use of a mascot provides the advantage of adding a narrative aspect to the user experience. Spot color theory extends the narrative approach to the visual realm. The world of DogEars is black and white until people and books become a part of it.

Figure 15. Color exploration using spot color theory

16


Initial Logo Concepts

Figure 16. Handdrawn and photo stock combination series. The concept series in figure 16 (above) required handdrawn sketches. The book is photo stock to combine realism with illustration. Using the same layout structure and color scheme, the series focuses on typeface and scale. In images 1 through 5, the only color is the blue of the book, incorporating spot color theory. In image 6 blue is used in the typeface, adding impact to the dog.

17


Figure 17. Stock illustration logo concepts. These images are watermarked for design purposes. If we decide to use stock illustrations, license fees will apply. We used stock image illustrations to develop the concepts in figure 17 (above) and we added complexity to the spot color approach. This series extends the spot color theory to illustrated objects, not just the photo images. In concepts 13 through 15, the dog has a pink nose and ear. The pages she reads are in blue pigment text and gray (nonpigmented) text. In concepts 16 through 18, the red collar on the dog. Playing with spot color theory provides an opportunity to potentially develop some interesting themes around the virtual world characters and objects versus the real world users and objects. Concept 13 follows a traditional seal or coin composition. The layout of concepts 14 and 15 encourage eye movement. Concepts 16 through 19 focus on scale. In concept 16, the book is in scale with the dog and is open so that the focus is about reading. The dog is presented as a participant in the activity, which supports the mascot idea. In concepts 17 and 18, the book is oversized and serves as foundation to the dog. The dog can be used as either a logo icon only, or incorporated as a mascot.

18


Feedback on Initial Logo Concept From the SmackTag suite, we felt logos logos 4 and 8 best represented the aim of our brand.

Figure 18. SmackTag concepts 4 and 8 were our favorites. In image 4 (left), the sizes and proximity of the spheres suggest relationship, age difference, and closeness. Image 8 (right), suggests an adult and a child reading together, and can also be read visually as a goofy, childish grin. We noticed that logo concepts 10 and 11 incorporate triangles that can represent dog ears. Consequently, we later explored using these shapes as a concepts for the DogEars logo.

Figure 19. SmackTag logo concepts 10 and 11. These concepts provided inspiration for the DogEars logo. Before diving into revising our designs thus far. We decided to explore merging the the concepts for shape from the SmackTag logo concepts with the color spot theory of the DogEars approach, we mocked up concepts 1 through 4 below. As these potentially lose the puppydog concept, we added facial elements to create concepts 5 through 9.

19


Figure 20. SmackTaginspired logo concepts for DogEars. The additional concepts were interesting and a good exercise, but we agreed to not pursue these concepts further. From the original DogEars suite, we landed on logo 3 and 17.

Figure 21. DogEars logo concepts 3 and 17.

20


Color Exploration of Favorite Logo Concepts

SmackTag After identifying our favorite logo concepts, we tried various color combinations to further explore our favorite design concepts.

Figure 22. Color exploration for logo concept 4

21


Figure 23. Color exploration for logo concept 8 Of these color explorations, the following were our favorites:

Figure 24. Favorite color and design combinations. We agreed that this orange and green combination was most appealing for the design on the left. The orange also made the brand name pop. However, this color combination was not as appealing for the simpler design on the right. Here, the blue and green combination seemed to best suit this design. The green made the book/smile pop while the blue makes the brand name easy to read.

22


DogEars To explore color options for the DogEars concepts, we converted the photo of the book as seen in concept to 4 below to an illustration.

Figure 25. Color exploration for DogEars. As we are using spot color theory for the DogEars logo, the book and the dog’s collar are the only elements to use in exploring color. As the dog is a licensed graphic, we do not have the rights to alter the collar color at this time.

23


Typeface Exploration of Favorite Logo Concepts With a design and colors selected, we explored various typefaces.

SmackTag

Figure 26. Typeface exploration for logo concept 4

24


Figure 27. Additional typeface exploration for logo concept 4

25


Figure 28. Typeface exploration for logo concept 8

26


Figure 29. Additional typeface exploration for logo concept 8

27


DogEars

Figure 30. Typeface exploration for DogEars logo concept 3

28


Figure 31. Typeface exploration for DogEars logo concept 17

29


LogoFinal Concepts After exploring the logo design, color, and typeface, we selected our favorite concepts. In making a decision, we considered legibility for both our older adult and child users. We balanced this consideration with our goal of finding a concept that represented our brand. We kept the following adjectives in mind as we evaluated logo concepts: connection, sharing, joy, laughter, and effortlessness.

Figure 32. Final two SmackTag concepts. The concept on the left uses Noteworthy typeface. The concept on the right uses Comic Sans typeface.

Figure 33. Final two DogEars concepts. The concept on the left uses Chelsea Market typeface. The concept on the right uses Aclonica typeface.

30


Colorblind Simulation of Final Logo Concept

The Colblindor website for color blindness (n.d.), which we were introduced to in HCI 595 (Visual Design for HCI), has a color blindness tool that we used to simulate how a colordeficient person would perceive our logos:

SmackTag

Figure 33. Final SmackTag logo as simulated for colorblindness. Although the logo is not as appealing to colorblind users, it is legible and the readingtogether concept comes across.

31


DogEars

Figure 34. Final DogEars logo as simulated for colorblindness. As with SmackTag, the logo is is legible and the graphics are perceivable.

32


Finalized Logo

SmackTag Below is the finalized logo with hex color swatches. The primary symbol, signature, logo variations, and system fonts follow.

33


34


Written Analysis

We both really liked the idea of a “nonsense” word for a brand name and were smitten with SmackTag. We believe it conveys connection, sharing, joy, and laughter. As mentioned earlier, SmackTag is a portmanteau formed from “smack” and “tag.” We define smack as a noisy kiss, and Tag refers to the child’s game of tag. Loosely, the idea is that story recorders tag their kids with a kiss in the form of a personalized recorded story. The tagline for SmackTag is “read a story, send some love,” which we abbreviated to “send some love.” To complement this concept, we looked at colors that worked well together and had positive associations. We ultimately chose shades of bright green and bright orange. Green because it is associated with growth and safeness; orange because it is associated with energy, fun, and warmth. Our final typeface selection (Noteworthy bold) is legible, but is also fun and somewhat whimsical. However, because research from the National Institute on Aging (n.d.) recommends the use of a sans serif font for older adults, we decided to include a san serif supporting font set. We chose Verdana because it complements Noteworthy bold and is clear enough to use for buttons and instructional text on the UI. Because Noteworthy bold is not legible enough to read at length, we may use it for decorative areas of the UI. The symbol itself suggests an adult and child reading together. We believe an abstract, representational symbol is well suited for a nonsense name like SmackTag and gives our product a modern look that may appeal to the sandwich generation who are our target buyers. Although abstract, it calls to mind the overarching goal of our product: to facilitate the universal custom of sharing of a story even when separated by geography and time zones. All in all, we’re very happy with this final logo and think it conveys our brand well.

35


DogEars Below is the finalized logo with hex color swatches. The primary symbol, signature, logo variations, and system fonts follow.

36


37


Written Analysis

The name, DogEars, came to us by brainstorming through terms we associate with books and reading. The minute we heard it, we thought it would please users young and old. Similar to using a skeuomorphic approach, the term harkens back to the days when a wellloved book was rife with dogeared pages. As for the youngsters, well, who doesn’t love a puppy? This logo also opens up the concept of creating a mascot, Reader, the virtual family dog that delivers books and notes. Who knows, when we get gamification inserted into the mix, maybe he’ll bury a bone. As mentioned earlier, using animals to give an application a face and a voice is a good choice to make sure that users are not alienate by race or gender. Having a dog live in a virtual world works well with the spot color theory approach. His world is black and white until users bring family and friends together with books. Having a hyphen, the letters g and a in the name called for choosing a font where the letters are simple and open. Chelsea Market is a legible font with a handwritten quality suitable for our users. The title hovers just over the dog’s ears as if labeling them. The dog appears to be nudging the book toward the viewer. The slogan informs the viewer that the this is a friendly exchange, a gift connecting one person to another. The combination of illustration and photography creates a unique concept of place, a virtual and tangible world woven together by family, love, and the love of books.

38


References Chisnell, Dana & Redish, Ginny. (2005). Designing Web Sites for Older Adults: Expert Review

of Usability for Older Adults at 50 Web Sites. Washington, DC: American Association of Retired Persons. Retrieved from http://assets.aarp.org/www.aarp.org_/articles/research/oww/AARP50Sites.pdf

Colblindor. (n.d.). CoblisColor Blindness Simulator. Accessed from

http://www.colorblindness.com/cobliscolorblindnesssimulator/ Heller, S., & Anderson, G. (2016). The Graphic Design Idea Book: Inspiration from 50 masters.

London: Laurence King. How to Draw a Cute Puppy Face Step by Step. (2014). Retrieved from

https://www.youtube.com/watch?v=HvV3WBLUIIQ

MerriamWebster Dictionary. (n.d.). Retrieved from http://www.merriamwebster.com/ NaranjoBock, C. (2011, June 7). Effective Use of Typography in Applications for Children.

Retrieved from http://www.uxmatters.com/mt/archives/2011/06/effectiveuseoftypographyinapplicationsforchildren3.php

National Institute on Aging and the National Library of Medicine.Making Your Web Site Senior

Friendly: A Checklist. (n.d.) Retrieved from http://www.nlm.nih.gov/pubs/checklist.pdf Nielsen, Jakob. (2013). Seniors as Web Users. Nielsen Norman Group. Retrieved from

http://www.nngroup.com/articles/usabilityforseniorcitizens Shillcock, Rachel. (2013). Understanding the Qualities and Characteristics of Color. Retrieved

from http://webdesign.tutsplus.com/articles/understandingthequalitiesandcharacteristicsofcolorwebdesign13292

Strizver, I. (n.d.). Designing For Seniors Fonts.com Fonts.com. Retrieved from

https://www.fonts.com/content/learning/fyti/situationaltypography/designingforseniors Strizver, I. (n.d.). Typography for Children Fonts.com Fonts.com. Retrieved from

https://www.fonts.com/content/learning/fyti/situationaltypography/typographyforchildren

39

http://assets.aarp.org/www.aarp.org_/articles/research/oww/AARP-50Sites.pdf

http://www.color-blindness.com/coblis-color-blindness-simulator/

http://www.merriam-webster.com/

http://www.uxmatters.com/mt/archives/2011/06/effective-use-of-typography-in-applications-for-children-3.php

http://www.uxmatters.com/mt/archives/2011/06/effective-use-of-typography-in-applications-for-children-3.php

http://www.nlm.nih.gov/pubs/checklist.pdf

http://www.nngroup.com/articles/usability-for-senior-citizens

http://webdesign.tutsplus.com/articles/understanding-the-qualities-and-characteristics-of-color--webdesign-13292

http://webdesign.tutsplus.com/articles/understanding-the-qualities-and-characteristics-of-color--webdesign-13292

https://www.fonts.com/content/learning/fyti/situational-typography/designing-for-seniors

https://www.fonts.com/content/learning/fyti/situational-typography/typography-for-children

https://www.fonts.com/content/learning/fyti/situational-typography/typography-for-children