Art Direction for the Web | Andy Clarke | Skillshare
Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
9 Lessons (58m)
    • 1. Introduction

      3:24
    • 2. Understanding Art Direction

      9:18
    • 3. Brand Values and Art Direction

      6:48
    • 4. Deciding Your Design Principles

      7:16
    • 5. Creating Audience Personas and User Stories

      8:07
    • 6. Designing a Customer Journey

      7:58
    • 7. Deciding How You Want People to Feel

      7:07
    • 8. Creating a Narrative

      6:38
    • 9. Conclusion

      1:53
86 students are watching this class

About This Class

In this course, you'll learn about art direction; what it means, why it matters, who can do it, and—most importantly—how it applies to the web.

If you’re an experienced art director or designer who works in print, this course will help you understand how to take your talent to the web. It’s also for web designers and developers who want to understand art direction and how to make it work for digital products and websites. This course is also aimed at developers who want to learn the design principles designers use every day so they can apply to sites on any platform.

I also made this Art Direction for the Web course for me because I’m weary of seeing websites which feel soulless and look identical to each other. I hope this course can help change that.

Transcripts

1. Introduction : Hi, My name's Andy Clarke, and I'm an art director and designer here in my studio stuff. Nonsense. For 20 years, I've helped companies big and small charities like Greenpeace and WWF to improve their website and product designs. Now, this is, of course, about art direction for the weapon. Over the next hour, I'm gonna teach you about our direction. I'm gonna tell you what it means and why it matters. I'm gonna explain who could do it. And most importantly, how it applies to the web. Now, if you're an experienced art director or designer who works in print, this course will help you understand how to take your talent to the Web. It's also for Web designers and developers who want to understand art direction on how to make it work for digital products and websites. This course is also end developers who want to learn the design principles that designers use every day so they can apply them to sites on any platform. I'm gonna teach you why Art direction matters for the Web by learning from some of the most influential art directors from the past 60 years, including Alexey Brockovich and his influential work for Harper's Bizarre Fashion magazine in the 19 thirties and forties. Be a filer who was one of Harper's first female art directors. A new cast. The first black model to be featured on the cover of the mainstream fashion magazine. And not forgetting Neville Brody, who rebelliously are directed the Face Fashion and Music magazine in Britain in the 19 eighties. So you'll learn how your brand values can influence our direction. You'll learn how to decide on the principles which will guide your design, how personas and user stories can help you create narratives on. Decide how you want people to feel. I'll teach you about where our direction can influence someone's experience when they using a product or a website where our direction could be most relevant. And then how to prepare to make what you designed. Mawr effective through thoughtful art direction. To help me describe how are direct designs, reports and websites I've made Will Man, which is an app for booking a fast car on a get away driver, plus a companion website which is chock full of advice on how to ensure you can get away clean. The wheelman website also tells readers about some of the infamous London criminals and gangs of the 19 sixties and the murders and robberies and violence that they committed. I'd be happy if you learn from the Willman examples, but I don't suggest that you follow in these criminals bloody footsteps. I've also written a book. Coincidentally, it's called out Direction for the Web, where I go into more detail all of these topics you can find out about that book at our direction. For the web dot com. I really want this course to be is enjoyable as it is informative. So join me on this art direction for the Web course and find out more about this topic and more in my book. You ready? 2. Understanding Art Direction: in this episode of art direction for the Web, I'm gonna teach you what art direction means and why it matters by learning from some of the most influential art directors from the past 60 years on looking at some incredible examples from the Web today to start, we're going to study these two stories their own example of art directing a news article about the U. S. D. A. Is longest running drug cartel case in two very different ways. These pages both contain the same written copy and many of the same photographs once from the Atlantic, where information is presented in on intentionally matter of fact manner. To make a reader think that the Atlantic is balanced and reliable. The other comes from ProPublica. Here. Illustrations convey violence with an intensity that would have bean difficult to stomach using photography. These illustrations make people feel tense in terrified and you know what? That's okay. Readers should experience these emotions when they're reading about shoot outs and melting drug dealers in acid. The process off evoking those feelings is called art direction, and these stories were art directed with two very different goals in mind. The decisions that were taken when designing these articles depended on factors which I'll explore across this course. How might we define our direction? Well, one interpretation of mine is that art direction uses designed to intentionally evoke an emotional response from someone. When they read an article, well, they use a product or they visit a website. Art direction has a long and fascinating history. Many talented art directors made work that's only stood the test of time, but it's also become iconic. I'm gonna teach you about three art directors whose work inspires me every day on the first person I want to tell you about Is Alexey Brockovich. You are directed Harper's Bazaar magazine from 1934 to 1958. So what can I say about someone who picked Pablo Picasso to win first place in opposed to Competition? Well, I tell you what. To much to squeeze into these few short minutes. Brockovich was Mawr than an art director. He was an artist and a really skillful photographer who talk amongst others, Diane Arbus and Richard Avedon. It's evident that it was brought up, which is knowledge of photography, that gave his work. It's classic feel, somehow he instinctively knew how to combine photographs with written content, often turning text into shapes. That contrast, ID with or mirrored the forms in his photography broader, which is art direction for Harper's Bazaar, the fashion Magaziner's influence designers ever since on I find his layout sketches to be the most informative, because I often learn Maura about how someone thinks by looking at their work in progress rather than just the Finnish result Now, until recently, I wasn't aware of the name beer fight, although her rolling Stone cover, which featured a photograph of a naked John Lennon wrapped around her fully clothed Yoko Ono, which was shot by any Leibovich, is one of the most iconic magazine covers at Designed in the early 19 sixties or more. Still only in her twenties, Feiler was one of the publishing industry's youngest art directors. We hurt bold use of color fight. Lear's work on Harper's characterized the optimistic mood of the United States in that period. But it wasn't just the color she used on her pages, which was memorable because in 1965 she cast the first black model to be featured on the cover of a mainstream fashion magazine. Oh, and she also wants kissed Andy Warhol. In the mid 19 eighties, I was obsessed with music, so it was hard not to know about the Face magazine, and you know something special about it? Well, at the time, I didn't know who never Brody Waas or even what an art director did. In case you don't know, the Face was a culture, fashion and Music magazine, which was published in Britain until 2000 and four on, Brody worked as its art director until 1986. Like Punk, the Face had a rebellious attitude to the establishment of much of Brody's what was experimental. He once described the faces a living laboratory where he could experiment and then have it published. His golden rule was to question everything. After the face, Brody worked on advertising and identity campaigns. He founded the Fuse Interactive magazine on the font font typeface library. So what can someone who worked decades ago in the worlds of advertising and magazine art direction teach us about our thoroughly modern medium? Well, designing experiences is more than just making something usable. It really pays to have a broad interest in art and design, and it always pays to be bold, and it sometimes pays to be rebellious. Let's go back to the art direction of devils deals and the d. A. The article from ProPublica. If I design a new story about a drug cartel, I need to lay out the facts off. Who, what, where, when, how and why. I need to know who is involved, what occurred where something happened when the events took place. Why what happened happened like the Atlantic. I can state those facts in a manner that's, well, matter of fact, but there's usually more to telling stories than just relaying facts. That's because when someone's reading about Mexican drug lord, I want them to feel something. I want them to feel either calm or agitated, anxious or terrified, encouraged, maybe obsessed. I asked myself how I want someone to feel before a star are directing every new design. Of course, terror wouldn't be appropriate if I'm writing advertising, marketing materials or maybe even product notifications. I'm not going to say your file didn't upload. You should be terrified, but drug barons are wicked. They do appalling things, and they're out there. That's why when are directing their version of that previous story, pro public. It shows a more dramatic direction because they wanted people to feel appalled while they were reading it. Their choice of illustrations help stimulate those emotions. When ProPublica chose to use Tim dollars illustrations of Chaos and Violence and Death, they changed readers from being interested. Swords being a port was the Atlantic's approach was much more factual. ProPublica wanted to provoke a strong emotional reaction to their version. My old friend damn all explained that without art direction, we're left with dry, sterile experiences are easily forgot. Whether you're working on a product or a website, maybe you're designing email newsletters or log in screens or notifications, or even an on boarding process. If you're anything like me, the last thing you want people to feel is that your designs are dry, steroidal and quickly forgotten. Art direction can prevent that from happening These days, it's common for lots of different people with lots of different skills to work on the design of all those things. The difference between print media and the web is the art direction needn't be a separate consideration from normal activities, just like accessibility on performance art direction should be part of everything that you do day today on the Web. Adoration isn't just one person's job. Graphic designers or product designers or UX designers and Web designers should or do our direction. General on product marketers cannot directed. Even The CEO can be an art director when they're concerned with how people feel while they're experiencing a business. Of course, our direction takes a good eye, but everyone can be taught. It takes practice, but no more than becoming an accomplished designer or developer. So do you need to convince your boss or your clients that art direction should be something to take seriously? No. Just do it. Bring art direction into what you design or develop every day. People are going to notice the difference. I hope that this episode of art direction for the Web taught you about the importance of art direction. Now be sure to watch all the videos in this course and find out more about this topic and more. In my book 3. Brand Values and Art Direction: in this episode, I'm gonna teach you about how your organization's brand values can influence the art direction of your product or website. Some people still conflict, branding within organisations, visual identity, the color palette, logo, tagline in typography and perhaps its tone voice. But branding is more than what people hear or see. It's about personality, purpose and, above all, about a relationship in organization has with other people. Now, this isn't, of course, on branding. So what do I mean by brand values in the context of art direction? A good business of any kind depends on good relationships. In fact, Howard Schultz, who was twice the CEO of Starbucks, said that if people believe they share values with the company, they'll stay loyal with the brand. If you want to create lasting relationships with customers, you'll need to define your brand values clearly so people can feel an affinity with them. Many organizations start by basing their brand values on how they'd like to be perceived by their customers. They think of words like friendly, professional, reliable and good value. But those kind of words could apply to any business operating in the same sector. Now I know some shady people, but have you ever met someone who intentionally didn't want to be perceived as professional or trustworthy? Words like these have become meaningless, is passionate, maybe about fish and chips or tax efficiency. Choosing these is your values won't help to define you you can trust. May I'm a professional now. Plenty of well known companies have clear brand values, and these air different from company to company. For example, Adobe is genuine, exceptional, innovative Andi involved. But I struggle to see how those values they're any different from any number of companies who make software and even some that don't. On the other hand, build a bears values perfectly matched the playfulness of their brand. They include diverse City, collaborate and celebrate. Perhaps my current favorite set of values comes from square space, and they include be your own customer. Design isn't a luxury empower individuals and good work takes time. If you're the owner of wheelman on app on a website for booking a fast car and a get away driver, what would you want customers to say about your service? Now? Don't overthink it. Instead, think about the three or four values you want people to see in your organization. For Willman, they might be fast. That's quick and easy to use, Quick to get you away honest, because even criminals want to know who they can trust. Reliable. No one wants to be left standing outside the back, not with the sword off. Brand value should be clear and consistent throughout everything you do, but what should they be? Let's stick with wheelman and go with the knowledge we know the best back road routes to escape down that's named after the exam that every black cab driver in London must pass. Have courage to drive fast and get away clean. Be adaptable because you never know what's around the next corner on organizations. Brand values form that strategy for art direction, and they help keep that strategy in mind. We're making decisions about design out of those brand values translate into what direction for wheelman. Well, they should inform Wheel man's messaging to customers about what the company does, why people should use them to get away. This is summed up in the straightforward tagline Gets away with it, which isn't to be confused with Get away with us, which might be the tagline for a travel company. Value should also influence the tone of voice of everything will my rights from the content of their website to the style of notifications and other micro copy in the app. Now this is an ideal place for wheelman to show their very distinctive personality, including burner email and set heist time. Will men's brand values of knowledge, courage on adaptability also influence the way they want people to feel when using their apple reading their website? They want them to be safe in the knowledge that wheelman drivers have the experience to get you to where you need to go, and that's not jail. They want people to feel reassured by their expertise. Even though the word reassuring isn't mentioned explicitly, they want people to feel confident, even if they don't say the word confidence. Both of these air implied and illustrated throughout everything that wheel man communicates and designs foundation styles, including a color palette, logo and typography, can also be influenced by brand values. Typography is particularly crucial for conveying the personality of a brand. Now people often say that typefaces have characters, but I prefer to think of them as having different voices. Every voice has its unique combination of tone and texture, and Tora images and how we display them also have an enormous impact on how people perceive our designs, whether that be on a commercial or an editorial website or inside a product. So has where the you choose photography or illustration to bring your content and functionality to life. For example, on the wheelman website, I chose black and white photography for historical articles like this one about the notorious South London enforcer Mad Frankie Fraser. Or about this about Amy Johnson, who was the first woman to fly solo from the UK to Australia. Her astonishing story deserve telling in a way which is as exciting as her long journey. Now I chose color photography for current day content, including this mini cooper on these suitcases, both of which you'll need if you want to get away after a robbery. Successfully translating brand values into art direction is essential for ensuring that any product or website reflects the organization who makes it. Have you defined brand values for your organization. If you haven't spent some time before the next episode, considering what you want your customers to say about your organization, product or service and how we'd like them to feel about it. I hope that this episode of art direction for the Web taught you the part that brand values complain art direction. Be sure to watch all the videos in this talk, and you can find out more about this topic and more in my book. 4. Deciding Your Design Principles: Welcome back. In this episode, I'm gonna teach you about how to define your organization's design principles and how these can influence the art direction of your product and website. Now a creative brief should tell you about the goals of an individual design project. But design principles are invaluable tools to help you maintain a consistent brand experience across products and websites. The process of deciding these principles could also be extraordinarily rewarding. It brings people from across an organization together and helps develop a shared understanding plus ways to judge whether a design reflection, organizations, brand goals and values. A few years ago, the owners of Smashing Magazine asked me to help them during the concept phase of their new website design. Redesigning a famous brand, particularly what which is so well known to its audience, is not a job I undertake lightly. After several weeks of workshops on dozens of design integrations, I delivered a set of concept designs and some ideas and prototypes so that the Smashing magazine team could communicate what they needed from a new designer. A lot more clearly. There were two of my concept designs for Smashing magazine, then armed with my concepts. The smashing team turned to Dan More on asked him for fully fledged designs, which felt right for smashing magazine's distinctive personality and their unique positioning. The team used words like community quirky on vibrant to describe their brand. I wanted designs which were, in their words, turned up to 11 clarifying what words like vibrant mean. Visually. It's something Dan does exceptionally well. To ensure everyone shared a common understanding. He created a page chock full of visual examples of those design principles. To use Dan's words, the Smashy community is a vibrant one, so let's have a color palette that feels vibrant. Let's use bright reds and oranges and blues, and then darker tones to offset down playfully represented this by giving rounded elements of radius of precisely 11 pixels that, if you haven't spotted it already, he rotated their avatars on other features by precisely 11 degrees. These discussions around design principles help damn to create a design that's distinctively smashing magazine. He applied their signature orange liberally on. He chose to typefaces one for readability on the other for its quirky letter forms. The Smashing magazine team also wanted to emphasize how their communities and content have dimensions, breadth and depth. So Dan lifted the design by introducing three dimensional elements, phone light sources and shadows on where it's similar. Sites display small advertise of their authors. Danna chose to emphasize the people behind smashing magazine's content by using large photographs, which he placed above and not below their writing. So is Dan's designed for smashing magazine. Quirky Hell yes is a vibrant. Absolutely many well known companies have now made their design principles available for us to learn from and just like brand values. These principles air different from company to company. For example, Google's mission is to organize the world's information on make it universally accessible and useful. They're 10 Things we know to be true includes focus on the user, and all else will follow. Fast is better than slow. You could make money without doing evil. The UK government's digital services principles are intended for people building digital services for the Golf dot UK domain. They include build for inclusion design with data on do the hard work to make it simple. Now, if you're the owner of wheelman, what principles would you want to guide the continued design of the app and website. When I was designing Will Man, the single word principles I kept in mind were bold, fearless and timely. The form your design principles take will depend on how much you want to clarify the meaning of your words. You might, as I did, just use a single word like fearless. Or you might expand that word into a phrase to provide little more clarity, like make bold choices which get the job done. Don't be afraid to make tough decisions for our customers. Give people only what they need when they need it. You might also bring these four months together like this so fearless. Don't be afraid to make tough decisions for our customers. Careful, though, don't use too many words, is This can sometimes dilute the principle, and it can increase confusion. Depending on your mix of design principles, it's not always going to be possible to address every principle. But even single principles can be an excellent tool for judging whether a design reflects your organization's brand goals and values. Which one of these wheelman designs best demonstrates my boldness principle. Boldness needn't merely be about prominent colors or boldness in typography. It can also be represented through your choice of layout and layout, which breaks with the convention off a full width Jumbotron banner and uses a full high image instead. Would also be a bold choice, changing the typical style of in APP navigation to both reflect the will man brand Andi. Improve usability on small screens would also be a bold move. Of course, principles like bold, fearless and timely would be relevant for every organization. So you should spend some time before the next episode considering the best principles to guide your desires. Now don't do this alone, because often the collaborative process of deciding on your organization's design principles could be just as valuable as the principles themselves. Design prints a portion influenced the art direction, design and development off every aspect of a product or website. But that could only happen when designers and developers keep them in mind. I found that the best way to ensure that everyone involved with the design keeps design principles in mind is to turn a mental items like posters or postcards, which I keep on the wall of my studio when in the client's office. This is something that government digital services did really successfully on their posters make it obvious that in a field like ours we can make tours as creative as our work. Now I hope that this episode of art direction for the Web taught you the part that design principles come play in our direction. Be sure to watch all the videos in this course and find out more about this topic on Mawr in my book. 5. Creating Audience Personas and User Stories: Welcome back. In this episode, I'm gonna teach you about audience personas and user stories and how they can influence the art direction of your product or website That first, a quick overview for anyone who's new to writing personas or user stories. If your user experience designer don't skip this episode, you'll no doubt already know about audience personas and user stories. But how do they relate to art direction? Plus, my take on personas and stories is probably going to be quite different to yours in marketing and in you X. We generally think about two kinds of personas by a persona on a user percent. I'll begin by listing some facts about my first persona. I want you to meet Reggie. He's 35 married. He's a former boxer on a nightclub owner, and he lives in Hoxton in east London. Now, as well as a table, I can add a short biography, which describes Reggie in more detail. I might say Reggie is the co own off as More Elders Bar nightclub in Knightsbridge in London, and he's several other diverse business interests, including a bodyguard and protection firm for Hollywood stars, including Frank Sinatra buyers are people you're selling to, who you want to convince to buy your product or service, and you want to make it easy for them to part with their money. Thes air, also often called marketing personas, a user persona. It's someone who consumes or uses the product or service you make. And if you work in editorial or news, they can also be people who read your content. These percenters could be mostly fictional, although they should be based on knowledge of real people who use your product or website. And you might get this knowledge by watching people use it or by interviewing them next. I had Maurin Formacion about Reggie, his personality traits and how experienced years in I t Social Media Room With software on , I use a simple sliding scale to illustrate those attributes. Sometimes a buyer persona and a user persona or are the same person to use a wheelman. Example. Someone who wants to learn about arranging a fast get away car is likely to be the same person who wants to get away in one personas, given name backstory and sometimes even a face to a person. When you create a percent you can at any relevant personal or professional information, for example, age and maybe their gender, if that's relevant, where they live their job if they have one, what their home or their work environment is like, possibly their goals and frustrations, or which news channel way prefer now be selective on only include what you need. I've seen lots of personas, which read more like many novels because they contain so much information, most of it barely relevant if it's relevant at all. I like to keep my personas really shortened simple. I constantly ask myself how the attributes in any persona, my influence, my art direction. After all, there's no reason to include information which isn't relevant. So, for example, is their age relevant or for wheelman? That's more likely to be important in someone's gender, because older people pull off robberies to where someone lives is important to, as I might need to avoid some cultural references or localized my copy writing for different countries, the news channel someone prefers would be more relevant if you're working on an editorial website, but less so when you're designing an app to help people get away my own persona writing goal is to understand someone's personality characteristics because understanding that will give me clear knowledge of how they might be feeling and help me to create better user stories. Although I really dislike the word user and I prefer the word audience. User stories are fabulous for capturing design problems because they encourage you to think not only about a problem but also the person who has the problem. That's why it's important to think clearly about your audience personas before you start writing user stories. Personas help you think about riel people in real situations on they will help you create accurate user stories. When you write a use of story, you should do it from the point of view of someone who wants to accomplish a task using your product or website. My user stories often follow a set former persona plus need plus purpose. It's a person with a characteristic persona or who what they are hoping to achieve, neat on what? Why they're doing what they're doing. That's the purpose. It's the why on this usually translates to as who I need or want to, so that the why I finally simple format keeps user stories. Easy to understand on ambiguous. But you can experiment with different story formats, which suit your audience and helps your team. I'm use that format to create two years of stories for wheelman. No, I know you probably won't be designing for people getting away after a robbery, but this format works just as well. No matter what job you're pulling off, start with characteristics. Richie as someone planning a robbery. Now add what Reggie is hoping to achieve. A someone who is planning a robbery. I want to get away car to take me quickly and reliably from the jewelry store to my safe house on finally, the reason for needing or wanting it as someone who is planning a robbery. I want to have a get away car waiting to take me from the target to my safe house because there's a chance that police may arrive on the scene quickly. Don't try and capture more than one problem in anyone uses story. The same persona might inspire more than one story, depending on what their needs are, for example, for Reggie as someone who is planning a robbery, I want to get away car, which can be traced back to me or any of my accomplices because the police will use video surveillance of the robbery to try to catch me. Once you have a solid basis for a user story, reduce and refine it by removing any information which isn't vital to the purpose of story . That's an example. I can simplify the language of this story as someone planning a robbery. I want an untraceable get away car because police will use surveillance. I like to develop both personas and user stories in collaboration with other people, as this helps me take advantage of the widest set of experiences and knowledge. Sometimes I collaborate with business owners, product owners and sales people. Other times, I might include people from development or from marketing teams. Audience personas in user story should influence the art, direction, design and development of every aspect of a product or website. But that can only happen when designers and developers keep them in mind. I found that the best way to ensure everyone involved with the design keeps personas and user stories in mind is to turn them into items like posters or postcards, which I keep on the wall of my studio and in my client's office to remind everyone who we're designing for on the problems we're trying to solve. This is something that mailed him, did very successfully on that. Posters make it really obvious. In a field like ours, we can make our tools as creative as our work. I hope that this episode of art direction for the Web taught you the part. The audience personas and user stories complain art direction. Be sure to watch all the videos in this course on. Find out more about this topic. 6. Designing a Customer Journey: Welcome back In this episode, I'm gonna teach you about customer journeys and how these can influence the art direction of your product or website. Now I always smile when I hate designers, referring to someone using a product or a website as a journey. After all, buying a cable or paying your car tax online is hardly the same thing is getting to mortal Still, whether their journeys or no mapping a customer's experience can be very helpful. Process to help you improve it. You don't need to be a wizard to conjure up a customer journey map. It's not a magical process. In fact, anyone can and should do it. So here is my five minute guys to customer journeys and art direction. So what is a customer journey? How do you map it? I think that Port Bow AG has the best explanation. And, he wrote, a persona focuses on the person, while a customer journey map focuses on now experience. Why make or again? I think Paul offers the best quote. Ah, customer journey map is a story designed to provide insights into a customer's journey. Customer journey maps give you a view over the entirety of a customer's experience and show you where there might be opportunities to improve it through our direction. Journey maps can be powerful for art emotion because they help you to understand not only what someone's trying to do but also how they might be feeling while they're doing it. For example, how might someone feel about pressing a link in an email or social post on before arriving at your website for the first time? What could someone be feeling while they're signing up for your product or service? How make someone feel when they receive a confirmation email about something that purchased or a booking that mate? Questions like these focus on the customer on how they might be feeling, which is something that's often forgotten when focusing solely on business objectives like increased sales or sign ups customers. Feelings will probably change as they use a product or website. For example, when they see a link in a Social post or an email, they might be curious and interested. After finding out more about what a product or service can do. They might feel relieved to have found a solution to their problem while signing up. They could also feel excited after making a booking or a purchase. We hope they're going to feel happy. A customer journeyman needn't be a complicated diagram like this one. In fact, the best way to illustrate what a customer might feel is to show you a map I created for wheelman. I divided this map into the five stages often mentioned in the marketing bias journey. The 1st 1 is awareness someone goes from not knowing about a product or service to knowing that it's available. They might see an advert, a recommendation on social media or they could receive an email. Then considerate. They realize that they're gonna need on your product or service can help satisfy it so they consider whether or not to buy it. This is where you're gonna need to do some convincing. Hey, you might consider not just their buying experience, but also what happens while they wait for activation, email or even a physical delivery. Retaining someone uses the product or service. You want them to have a good experience so they remain a customer and go on to tell other people how much they like your product or website advocating. There's nothing nicer than a happy customer helping to sell a product for you by spreading the word and telling their friends, I might sometimes be more specific about a particular area of a product or website, which, in the case of wheelman, might include. But can you get away driver or a food delivery to a safe house? For my example? In Wilman, I might map journeys like setting a highest time picking a destination, maybe a car swap, a private airstrip or safe house, choosing a get away driver, agreeing to the take and then confirming the job. Before you begin creating your customer journey map, Find out what information you already have about what people do when they using your product or website. The most obvious place to start is by looking at analytics, as these will often tell you the most popular parts of your website or product. If you don't already have analytics installed, now's the time to install them. Social media is where many people first hear about a product or service on. There are several tools, including Hoot Suite, which is one of the best free social media listening tools or tweet, reach or even Twitters tweet deck, which gives you useful insights into what people are saying. Data will only tell you so much that I prefer talking with customers. And if I can't get in touch with them directly, I talked with sales people or customer support staff who have contact with them every day. I found the best way to get people in an organization who will often disagree about the smallest things to agree on a customer journey map is by getting them together in a workshop. Invite customers if you can, and anyone who influences the design of their experience, including senior managers, because they'll often have the final say. Don't treat a customer journey workshop just like any other meeting. Instead, he should set clear goals on realistic games for what you want to achieve. Unless you product a website is incredibly simple. Don't expect to create a map in just one session. Choose one step of your map, perhaps awareness and focus on that in one session. Work on the next step in the next workshop and build your map from that jailing each workshop identify what people are trying to achieve. What do they need to know How might they be feeling? Think about the touchpoints they'll encounter, for example, when moving from buying to retaining touchpoints. My include sign up forms, payment pages, logging. So the on boarding process during the workshop plot. What someone is doing the questions. They're asking what they're thinking, the touchpoints they're encountering and how they're feeling. Do this on a basic customer journey map template like this. This template needn't be your finished product. It's just a tool to organize the information you gather before you design your final customer. Journeyman. Whatever your map illustrates, take care not to overcomplicate matters or confused people by including too much information. Your map should include only what's needed to describe what someone is doing and how you want them to feel. You should also design your customer journey maps in a way which makes understanding them easy and relevant for the people that need to use them. You can make them colorful or engaging. Your aim should be for people to pay attention to them, so they keep how customers feel at every step in the journey, uppermost in their minds. I like to think of customer journey maps. Is posters there could hang on my studio wall while I'm designing or on the walls in a client office. That way, they won't be forgotten or unused. I hope that this episode of art direction for the Web tour you the part that customer journey maps complain art direction. Be sure to watch all the videos in this course and find out more about this topic and more in my book. 7. Deciding How You Want People to Feel: Welcome back in this episode, I'm gonna teach you how you can decide how you want people to feel and how this can influence the art direction of your product or website. Now, back in Episode two of this course, I suggested that our direction could be interpreted as using design techniques to intentionally evoke an emotional response from someone when they read an article or use a product or visit a website. I began in that episode by looking at two very different interpretations of the story about the DEA is longest running drug cartel case. One was from the Atlantic, the other from ProPublica. Those pages both contain the same written copy of many of the same photographs. The interpretation by the Atlantic is presented in an intentionally matter of fact manner. Where is that? ProPublica illustrations convey violence with a Nintendo city that would have been difficult to stomach if they'd use photography. These illustrations make people feel tense and terrified, and that's okay, because readers should experience these emotions when reading about melting drug dealers in asset. When someone feels the way you intended when they read a story or use an application, you've succeeded in communicating your message, your purpose. A communication is what art direction is really all about. These stories that the Atlantic and Propublica were art directed with two very different goals in mind on the decisions taken by their designers were intended to support those goals. When I design a news story about a drug cartel, I need to lay out the what, where, how and why. Who is involved in what occurred, where it happened when the events took place, why they happened. And I can stay those fax in a manner that's, well, matter of fact. But there's more to telling stories that just relaying fax when someone's reading about a Mexican drug lord, Do I want him to feel calm, or do we want them to feel terrified? I've plotted those emotions on three scales. Do I want to read it to feel calm? No. Relaxed with a chance. Uncomfortable? Absolutely. I wanted to squirm in their seats. What about agitated? Yet I want them to feel frantic, wide eyed and worked up to I will want customers to feel relaxed, were less signing up to my product or service using their credit card. But when reading about a drug war? Definitely no. I won't want them to feel uncomfortable while they're reading my terms of service. But melting people in acid? Definitely. There's no way I want someone to feel agitated while using a banking application. But when thinking about the drug fueled violence on the streets of Mexico, you bet your bottom pay. So I did. What about encouraged? That cuts it when someone's learning how a product or service sold someone's problem. They should feel motivated to find out more driven, even if the offering is compelling enough obsessed when it comes to shutting down drug cartels, obsession is exactly the emotion I want to evoke. I asked myself how I want someone to feel before I start art directing every new design. Of course, terror wouldn't be appropriate. When I'm writing copy for a product notification, your password is incorrect. You should be terrified. Instead, I choose a different set of emotions more appropriate to the content or context. Male chimps, voice and tone guidelines contained helpful list of example emotions. They include negative feelings like anger, annoyance, confusion and helplessness, as well as positive feelings like anticipation, confidence, excitement and trust. When are directing their version off the drug cartel story pro public. It shows a more dramatic direction because they wanted people to feel appalled while reading it. Their choice of Tim McDonald's in motive, illustrations of chaos and violence and death helps to stimulate those emotions and shift readers up the emotional scale from interested towards being appalled about what happened. If, like the Atlantic, they chosen a more conventional photo montage, that needle might have moved less. Many magazines and newspapers have struggled to bring the quality of design and art direction from their print publications to the Web. But ProPublica is an exception. They face the same editorial, creative and technical challenges as other news organizations, but they've solved them by developing a process which engages art directors and designers early in the editorial cycle for Lost Mothers, ProPublica not only used the dots griddles navigation to a story about each woman, but also to illustrate just how many women have not been identified as their art director, Rob Waker. Explain to me, the idea behind the design was not to shock people necessarily, but to give you a sense of how little is really known or understood about what's going on. Each vignette also includes photographs of a lost mothers, family and loved ones. To give their story more emotional impact. People pay attention to powerfully articulated stories. They get noticed on. An Unbelievable Story of Rape are directed for the Web by ProPublica is design director David Slade won a Pulitzer Prize for explanatory reporting. Now this story is even more notable because it was written by two journalists, one was reporting from the point of view of the woman, the other from that of the police. In itself. This isn't unusual. But instead of merging two voices into one, the editor captain separate as the art director David recognized the two timelines and alternating voices made the story more powerful, so we emphasize the distinctions through his design choices. The woman's story uses specially commissioned illustrations, while the police story includes photography. Hearst always told on the left there's on the right with the introduction and epilogue that's relevant to both Placed in the Centre. An unbelievable story of rape is a compelling story that's told Maurin Motive Lee because of its art direction by look at some of the best editorial design on the Web today. I hope that this episode of art direction for the Web taught you the importance of evoking the correct feelings through art direction. Be sure to watch all the videos in this course, and you can find out more about this topic and more in my book. 8. Creating a Narrative: in this episode, I'm gonna teach you about art directing the experience of your product in website by talking about the process of creating a narrative. When he wrote Art Direction Goes Digital, which was his chapter in the book Art Direction explained. At last, Corbyn said, art direction is good storytelling. He went on to describe that throughout its long history, what we value most in the practice of art direction is this. The ability to control the myriad elements in a design in such a way as to produce a sustained, cohesive and distinctive narrative experience. Whether we want fact or fiction, sell or make products, the way we engage people, create desire, make them happy and encourage them to stay that way is by creating narratives. No, if you're not a studious type, a narrative is a spoken or written account of connected events. It's a story. What's important about that definition isn't so much that an account is written or spoken, but that the events of story describes are connected. Those connections create pathways in someone's mind, while there on those paths you can influence how they feel through art direction lessons are crafting narratives, usually teaching. But before writing your first word, you should decide on outcomes. Cast backstories on a plot In this example of a design narrative, I'm gonna play the role of CEO of watch company Pans era. They could be the author of this story. Every story and every art direction project should start with asking. What outcome do we want? How do we want someone to feel now? Pan. Zero watches are the best in their class. If I'm their CEO, I'd want people to feel happy to have discovered our brand and excited to purchase. I'd say we aim to make learning about buying and then receiving our products a fabulous experience. We want to turn casual visitors into customers on men, into ambassadors for our brand. Who are our characters? Did I say characters? We mean our customers or readers or our users, then mostly between 30 and 55 years old, on people who buy unique gifts for them. They have some disposable income but not unlimited spending power. They're prepared to spend more because wearing a great watch is important to them. The watch they aware makes a statement about them. I love talking about it you can think of these as user percent. Let me give you an example. Reggie is in his mid thirties, and he's the owner of a nightclub in Knightsbridge, which is a fashionable part of London's West End. He often visits other business people, and he wears watches partly as a symbol of this success, but also is a talking point. He's aware of our brand, and he's visited our website several times. What do we want to happen? Some narrative tutorials recommend flow charts to keep track of the plot in much the same way as I might map out a customer journey. Think of plot points as touchpoints. I'm I hope you can see just how similar designing user experiences are to writing stories. Reggie revisits us, and he sees our latest edition. He spent several minutes browsing photographs and reading, and with only a few watches remaining, he decides to make a purchase. The check out is smooth, and Reggie feels confident, even happy, and he smiles while reading the personal confirmation email that we sent a few days later, we deliver Reggie's watch, and he takes a sharp intake of breath when he opens the box before he's even put the watch on his wrist, Reggie posts a photograph on his social media feeds. On his next meeting, Richie can't wait to show off his new watch. All of this was Art directed to make Reggie feel at first reassured on, then delighted that he chosen to buy from the company in that story, Reggie's already familiar with the Brandt on That's No Accident. The company has spent years are directing their social media channels. Everything they publish is intentional and immaculate. They publish photographs and instagram regularly. These are all shot by professional photographers and carefully are directed to maintain a consistent look. A message as well as the content and style of photography and video art direction also influences the tone of voice and language of the company uses when writing on social another, marketing channels and zeros be making watches only since 2000 and nine, but watchmaking history resonates with their customers. The vocabulary emphasizes words like heritage concerning the company and modern vintage in Neo Classic whenever they talk about their designs. The website is well designed, and it's easy to navigate, but there's more to a compelling page. Justin, attractive design art direction helps insure a website design fully supports the company's values through the choice and style of photographs or illustrations. It can next visuals with written messages to tell stories and through them accomplish a company's goals for their website. Watches are an important talking point for Reggie to appeal to people like him. The PAN zero website emphasizes the most distinctive aspects of their timepiece. Design Copy focuses on their crown and hand designs reinforced by close up photography. The watch is only part of the story. Equally important is what people say about it, So the company includes reviews and testimonials to increase the product's appeal. Some people might describe insights like This is psychology, but I'm no psychologist to May. This is just knowing a little about what makes people tick and, of course, our direction. I have this episode of art direction for the Web taught you the part that stories play in our direction. Be sure to watch all the videos in this course and find out more about this topic. More in my book 9. Conclusion: okay. Now, like my wheelman drivers, it's time for me to make a speedy gets away. When I set out to make this course, I wanted to teach people about the importance of our direction for the Web and how it can help people to tell stories which better connect with audiences. I wanted experienced art directors to know how their skills could be as valuable for the Weber's. They are for the printed page. Above all, I wanted Web designers and developers to learn, have to make art direction work for digital products or websites where the you design websites, which run on platforms like Shopify or Squarespace, Wix or WordPress or you handcraft every aspect of a digital experience. Our direction will make your site s'more effective. Communicating, persuading and selling. If you develop products, art direction will make them more compelling and ultimately more enjoyable to use. I hope this course is inspired you to think about art direction and how it can make your work on the Web much better for everyone. Is our direction relevant for the Web? Absolutely. In this do we have the technologies and tools to deliver our direction for any product and website. There's no doubt about that. You can find out more about this topic on more in my book art direction for the Web, which is available from art direction for the web dot com. That website also contains my recommended reading list of other books on art direction books, which have influenced May on my work for the Web. I think I played my part. Thanks for watching. The rest is up to you and I'll see you on my next course.