SS P R O C E PBSROSOOCKBEO OK
BRANDON GRIFFIN BRANDON GRIFFIN
CONTENTS
01 06 I N T R O D U C T I O N Project Description Thesis Question
02 10 B A C K G R O U N D Magazine Overview Mobile App Overview
03 18 I N S P I R A T I O N Concept Motivation
2
06 52 S T Y L E G U I D E
04 22 R E S E A R C H Magazine Comparative Analysis Print vs. Digital
05 34 D E V E L O P M E N T Logo Design Magazine Layout Design Mobile App Wireframes
Logo Color & Typography
07 58 F I N A L A S S E T S Maneuver Magazine Maneuver Mobile App
4
01
INTRODUCTION Maneuver is the combination of a mens lifestyle magazine and a mobile application created to engage the reader beyond the typical magazine interaction. It was designed with the purpose of guiding the user to an enhanced, personal experience based on both an article of interest and user preferences. DESIGN QUESTION Thinking from a regional perspective and concentrating on a specific target audience of men between the age of 24 and 50, the question was asked: “how can design be used to create a successful print media and digital touchpoint combination for outgoing and adventurous men in the western mountain states?” After reviewing the current offerings of magazines for men, realizing our appreciation of print media, and acknowledging society’s reliance of digital devices, the concept for Maneuver was conceived.
6
8
02
10
BACKGROUND The first print magazine tailored to men was published in 1731 in London,1 and there are now more than twenty in circulation today in the United States alone.2 There are many different types of magazines for the male consumer that range anywhere from sports and fitness, to automobiles, to fashion, to general interest. However, these are just a few examples, and a quick search will reveal that there are plenty more offerings available in a wide range of subject matter. Included in these options are several publications that are dedicated to the male lifestyle, many of whose topics are either very specific, or generally broad and attempt to appeal to a universal market. Take for example Whisky Magazine and its singular focus on a particular beverage, and Man of the World which highlights culture from an international perspective. In fact, out of all of the mens magazines available, there is not one that could be considered a cohesive resource of activities specifically geared towards the lifestyle of outgoing and adventurous men aged 24 to 50 living in the western mountain states.
12
MAGAZINE Maneuver aims to provide a solution to a traditionally non-cohesive approach towards mens lifestyle magazines by appealing directly to the target audience with articles whose subject matter represents both urban and mountain lifestyles, with topics for both in each publication. The urban experience is represented with subjects such as dining, craft beer pubs, wine and whisky bars, coffee houses, entertainment, music venues, art and architecture. Whereas the mountain/outdoor lifestyle is personified in articles with topics like hiking, camping, biking, skiing, snowboarding, and gear. These lists are not necessarily absolute, and some of the topics from either group, like beer pubs, dining, or gear can certainly be cross-over content into both urban and mountain lifestyles.
MOBILE APP The digital element of Maneuver begins when the mobile app is accessed by the user after reading an article in the magazine that he would like to build an excursion around. Initially, the user would set-up his preferences by rating the importance of each topic mentioned above. Then, once an article code (Figure 2.1) is entered, the Maneuver app creates a more complete excursion by suggesting additional areas of interest for the user that are geographically based around the main article of interest.
Figure 2.1 Each article has a code that is represented below the article title. Once the mobile app has been accessed, the user can type in the code to begin generating a personalized excursion based on the article.
14
16
03
INSPIRATION The concept for Maneuver was inspired by the fact that there are active men who live in the region of the United States know as the western mountain states, yet there are no media outlets dedicated inclusively to this group. It’s one thing to read an engaging article that inspires you to want to replicate an experience, if only you had the time,
18
money, and means to travel around the world to do so. But, it’s another thing to actually be able to do those things by taking a short flight or just driving a few hours from home. As great as our big planet is, there are so many opportunities for the millions of men that live in an urban environment with the
mountains in their backyard, and vice versa. Because so many members of this group split their free time between these two spaces, it is the intention to design Maneuver as a two-part project: a magazine that inspires one to take action, and a digital app that becomes the tool to do so.
20
04
RESEARCH PRINT vs. DIGITAL In todays expanding digital age, the conversation regarding which medium is better for the production of a magazine has been considered. And, while a digital user experience is often sought out for many of our interactions with media, it appears that consuming information from a printed magazine is still preferred over a digital version.3 In April, 2014 the Freeport Press released its findings from a survey they conducted to learn more about the behaviors and preferences of over 350 participants. The results
22
conclusively showed that people are still more engaged with print magazines than with digital versions. The survey concluded that 25% of respondents had read five or more print magazines in the last month, while only 1.8% of those same people indicated that they read as many digital versions. It was also clear that readers engaged considerably longer with their print publications, as 50% noted that they spent more than 30 minutes with each issue. However, only 12% responded that they spent an equal amount of time with a digital publication.4
It is also important to point out that the participants responded that they subscribed to 2.02 print magazines versus only .6 digital versions. In addition, access to a digital device was not an issue when determining their medium preference, since each respondent had at least one digital device such as a smart phone, tablet, or desktop computer.5 A second factor in the decision to design a print version is based on the added perceived value that one places on the information received from a print magazine. The PanEuropean print organization Print Power stresses “With all good publications there’s a feeling of substance, of stimulating the senses, that the thing in their hands has been
24
crafted by experts in their fields. The quality of the paper and the high image resolution also play their part, as well as the ability to be put down and picked up again easily.�6 A third reason for printing is to examine the sensory experience that one has reading a magazine in print. It has been determined through studies that people retain information and experiences better through physical interaction. The act of holding a magazine, while being able to thumb through the pages, write notes, and highlight passages are all aspects that are stimulating to the reader. Many people appreciate this format so much that developers are still trying to replicate these features within digital mediums.7
One final example that emphasizes the notion that consumers prefer print over digital is the idea of the concentration gap that occurs when reading content from a digital medium. Recently, scientific neurological studies have confirmed that people process information differently when it is received either from a print format or a digital source. The research shows that when people are exposed to print they are able to maintain their ability to read longer articles because the environment offers less distractions. Readers are more inclined to develop a capacity called deep reading, which brings about a state of deep thinking. However, when reading from digital formats, it is argued that people who read material on-line become used to small amounts of information and are much more easily
distracted. This results in the reader losing their ability to focus on a single subject for an extended length of time.8 This current data is what lead me to decide to design a physical, printed magazine to ensure the best interaction with the media, away from the distractions of the everincreasing digital world. That being said, an app designed for a mobile device is an important part of this project, since it can be used as a tool, or a touchpoint, to enhance the user experience. Being able to utilize the app in real time is what will allow the user to create meaningful excursions based on articles they feel have value.
DETAILS The first magazine examined as part of a comparative analysis is Details, a monthly mens lifestyle magazine that focuses on themes such as fashion, health and fitness, grooming, entertainment, design, and cultural trends like food & drink, and tech & gear. Currently, 72% of their readership is men between the age of 25 and 49, with a median
26
age of 34 years old.11 Since it was started in 1982, their print circulation has grown to more than 500,000 magazines per month.12 Taking into account their target audience and growth over the last few decades, they were selected as a point of inspiration since they are somewhat in-line with the urban subject matter proposed for Maneuver.
28
OUTSIDE The second periodical assessed for its content is Outside Magazine, a monthly publication that focuses on topics related to outdoor life. The publishers state that “The mission of Outside Magazine is to inspire participation in the world outside through award-winning coverage of the sports, people, places, adventures, discoveries, envi-
ronmental issues, health and fitness, gear and apparel, trends, and events that define the active lifestyle.� They do not necessarily promote themselves as a mens magazine, and their articles include themes for both males and females. It is interesting to note, however, that 72% of their readership is male and only 28% is female.13 Since their
introduction in 1977 their circulation has grown to more than 690,000 magazines per month.14 This magazine is a good option for a comparative analysis, taking into consideration the successful connection they have established with an adventurous outdoor target audience.
5280 The third magazine considered for analysis based on its content is 5280, a regional publication centered in and around Denver (mountains included) that focuses on both urban and outdoor life. Topics include eat and drink, travel and outdoors, culture and events, and health and wellness. Since their introduction in 1993 their circula-
30
tion has grown to around 85,00 magazines per month.15 Even though a mjority of the readership is female, this magazine is a good option for comparison, taking into consideration the successful connection they have made with their audience through the publication of articles concerning both urban and outdoor topics.
32
05
34
DEVELOPMENT Before creating assets or prototypes for Maneuver, it was important to start with designing the logo. It was important to start with this visual aspect since it would play a major part of the brand recognition, influencing the look and feel of other major elements that would come later. Next, magazine layouts and mobile app wireframes were created. Careful thought was put into the design of the layouts considering feedback from field research that included a focus group and survey. Much of the spread designs were influenced by magazines such as Sidetracked and Cereal due to their artisinal aesthetic that focuses on photography and typography. Wireframes for the mobile app were then designed in order to test functionality and ease of use.
5.1
Initially, rough logo ideas were sketched with pen and paper to try to determine what the look and feel would be. Before focusing on details, it was important to works towards a concept that would communicate themes such as guidance, movement, and direction. Symbols like chevrons and compasses were utilized in several of the rough sketches as a way of conveying these themes (Figure 5.1.1). The three logos that seemed to be the most successful based on representing the image of the magazine, as well as feedback from peers, were drafted digitally (Figure 5.1.2). In these renditions, the chevron and compass symbols were still being utilized, however a simple directional line was becoming more prominent as it was less obvious of a symbol. After considering the subtlety of a simple line, the final logo (Figure 5.1.3) was refined to incorporate it as a way of conveying direction through the overall design, and also contribute to how the viewer would read the logo from left to right and then down.
36
Figure 5.1.1 Rough Logo Sketches
Figure 5.1.2 The final three logo concepts, drafted digitally to determine the success of each in their ability to convey the message of the magazine. Before refining the final logo, the chevrons and compass symbols would be dropped from further renderings, as they appeared to communicate the idea of “travel” more than the intended concept of an “experience”.
38
Figure 5.1.2
Figure 5.1.3
Final Magazine Logo
Final Mobile App Logo
5.2
Several layout designs have been created to avoid redundancy throughout the magazine and provide a sense of customization (Figure 5.2.1). It was learned through a focus group and survey of individuals that fell into the target audience that photography was the most important aspect for them. They also stated that good typography was very important as well. Therefore, the layouts have been designed to provide a photo-driven editorial with emphasis on the typography, primarily in the headline. White space is taken into consideration, with room for the necessary elements such the headline, kicker, a pull-quote, and a drop cap. The combination of a unique spread for each article and body copy that does not overpower the white space will provide a contemporary, yet artisinal look and feel.
40
Figure 5.2.1 Examples of different, yet structured, layouts designed to provide a unique look and feel to the magazine. To avoid redundancy, several of the page layouts can be combined to create new spreads throughout one magazine.
42
5.3
Wireframes for the Maneuver mobile app were sketched by hand initially to determine a starting point for the layout as well as to figure out what components would be needed for functionality. During this process, it was determined that two user workflows would need to be designed for the user: profile setup/preferences, and excursion creator. The next step was to develop them into high-fidelity wireframes (Figure 5.3.1 and 5.3.2) for Marvel App, a mobile prototyping application. After testing the functionality of the wireframes by several members of the target audience, they were tweaked and simplified for ease of usability. These high-fidelity wireframes would then be used for the basis of the final prototype design.
44
iPad
CARRIER
82%
12:00 PM
82%
PROFILE SETUP
Figure 5.3.1 For a first-time user, it is a six step process to setup a user profile that also includes user preferences. However, it is simplified to a two step process for a returning user who just needs to adjust their preferences.
46
EXCURSION CREATOR
CARRIER
82%
Back
GREAT! Where would you like to start?
Back
Article Code
You have selected:
CODE
STEP 2
82%
CARRIER
Done
Article Code
HIKING IN BEAR LAKE
Please!
Choose Option
From Volume 3 / 2015
HE5C_
LOCATION
ARTICLE CODE
STEP 1
STEP 3
Press Excursion
EXCURSION
PROFILE
Type Code Press Done ADVICE
Q W E A
TOPIC 123
Figure 5.3.2 The process for creating an excursion based on an article of interest from the magazine requires eight steps to complete. Testing showed that each step takes less than two seconds to complete, with one step requiring four seconds to enter the article code.
48
82%
CARRIER
82%
CARRIER
R
T
Y
U
S
D
F
G H
Z
X
C
V
space
I J
L
B N M @
.
Is this correct?
O P K
return
STEP 4 Confirm Choice
No Continue
82%
CARRIER
Back
Set Parameters
Back
Article Code
82%
CARRIER
82%
CARRIER
Done
Done
Back
Excursion Map
Back
Details
Save
STEP 8
Enter the number of miles to add to your main excursion area
Enter the number of side trips to add to your main excursion
82%
CARRIER
Done
Press Save
STEP 5 Enter # Press Done
4
STEP 6 Enter # Press Done
Bear Lake
STEP 7 10
TRIPS
MILES
Select Marker
Bear Lake
Hiking
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at auctor ex. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac. DIRECTIONS
CONTACT
50
06
STYLE GUIDE PRINT LOGO This logo is to be used for all printed collateral including all printed publications, advertising, posters, and product packaging. SCREEN LOGO This logo is to be used for all screen work including the mobile app and website. However, the screen logo will be used in the publication where the mobile app is referenced. The negative version of each logo may be used when necessary. However, colors other than black or white will be avoided as color will appear in photographs, illustrations, and graphics.
52
COLOR
Several color combinations were considered before being finalized. The black and greys were selected for their neutrality as well as for being timeless. The orange was chosen to add a pop of excitement and vibrance. Orange can be difficult, so extra attention was given to find the right hue so as to not overpower or appear washed-out. The combination of the colors creates a contemporary and masculine palette, one that will be primarily used in the mobile application, as most of the color in the magazine will come from photographs.
CMYK CMYK CMYK CMYK CMYK
54
75 68 82 67 82 79
67 90 60 60 67 46
00 0
0 00
00 85
00
95 00
RGB RGB RGB RGB RGB
00 0
0 00
40 48
53
87 97
105
255 2
HEX HEX
0 47
000
#283
035
#556 169 5 H EX # ffffff
55 25
210 9
HEX
#000
HEX
#d25
a2f
GOTHAM WEIGHTS
AB C D EF GHI J K L M N O P Q R STUV WXYZ
a bcdefgh ijk lm no pqrstuv wx y z NUMBERS
0 1 2 34 5 6 78 9
TYPOGRAPHY
ALPHABET
Gotham was chosen for its modern aesthetic and also because of its versatility. It has several varieties of weights that can be interchanged to add variety to text within the same font family. To set the articles apart, each headline in the magazine will have a unique typeface incorporated with its layout. However, Gotham will be utilized to convey consistency throughout the magazine in regards to subheads, bylines, kickers, and pull-quotes. Gotham will be used sparingly in the mobile app, generally as an accent or to just add a little fun.
56
07
58
FINAL ASSETS MANEUVER MAGAZINE A prototype printed on 80# premium paper with a perfect bound soft cover. Each article is unique in its design, with dedication to an artisinal layout where photography and typography enhance the reading experience. Its purpose is to inspire the reader of the western mountain states to move beyond the act of reading and share in the experiences of what they have read about. MANEUVER MOBILE APP A prototype experienced through Marvel App, that has been designed to act as a guide for the user by creating a customized excursion based on an article of interest as well as personal preferences (Figure 7.1). Its ease of use and simple functionality allow the user to plan their urban or mountain experience by utilizing an article as a staring point. Since the app knows the users likes and dislikes, it only takes a few seconds to create an excursion that will suited to the individual.
60
Figure 7.1 Images of two screens from the mobile app prototype. The image on the left is the home screen display, while the image on the right is the first screen of the excursion creator workflow.
62
END NOTES CHAPTER 2 1 Nikola. “History of the Magazines.” Magazine Designing. March 26, 2013. Accessed February 16, 2015. 2 “Men’s Magazines Circulation Statistics.” Statistic Brain RSS. October 2, 2014. Accessed February 15, 2015. http://www. statisticbrain.com/mens-magazines-circulation-statistics/. CHAPTER 4 1 David Pilcher. “Print vs. Digital: How We Really Consume Our Magazines.” Freeport Press. April 4, 2014. Accessed February 15, 2015. http://www.freeportpress.com/print-vs-digital-howwe-really-consume-our-magazines/. 2 Pilcher. “Print vs. Digital: How We Really Consume Our Magazines.” 3 Pilcher. ”Print vs. Digital: How We Really Consume Our Magazines.”
4 “Print Power.” Why Should Sprint Media Be Part of Your Media Strategy? Accessed Feb- ruary 16, 2015. http://printpower.eu/ en/why-print-media/why-print-media/why-should-sprint-media-be-part-of-your-media-strategy. 5 Daniel de la Cruz. “Digital vs. Print: Which Is Better For You?” Accessed February 17, 2015. http://associationmediaand publishing.org/sidebar/Digital-vs-Print-Which-is-Better-ForYou. 6 “Print Power.” Why Should Sprint Media Be Part of Your Media Strategy? 7 ”Details – Media Kit Print | Condé Nast.” Condé Nast. Accessed February 15, 2015. http:// www.condenast.com/brands/details/ media-kit/print. 8 “AAM: Total Circ for Consumer Magazines.” AAM: Total Circ for Consumer Magazines. De- cember 31, 2014. Accessed February 16, 2015. http://abcas3.auditedmedia.com/ecirc/ magtitles. 9 “Outside Magazine - Media Kit 2015.” Outside Magazine Media Kit 2015. Accessed Feb- ruary 14, 2015. http://www. outsidemediakit.com/audience_demographic-profile.php. 10 “AAM: Total Circ for Consumer Magazines.” AAM: Total Circ for Consumer Magazines. 11 “AAM: Total Circ for Consumer Magazines.” AAM: Total Circ for Consumer Magazines.
PHOTO CREDITS P7 P19 P19 P23
Margot Pandone Alejandro Escamilla (L) Ali Inay (R) Patrik Gothe
PHOTOS USED IN MOCKUPS P41 Jeffrey Thompson P58 Adam Bove P60 Adam Bove
64
THANK YOU
ICHELLE CARPENTER RAY SA
S
JASON BO
ERS