Bummer! This is just a preview. You need to be signed in with a Pro account to view the entire video.
The Hitchhiker's Design Guide to the Galaxy42:41 with Claudio Guglieri
Designers wear many hats during a given project. We research, gather requirements, sketch, conceptualize, coordinate with the UX team and brainstorm with the dev team. Further still we rationalize, come up with a look & feel, present it to the client, implement feedback, sync again, schedule milestones, present deliverables and so it continues. In this design focused crash course we will cover the role of designers throughout a project timeline starting from the very first kick off meeting to the final deliverable. While bringing up real examples you will learn about Fantasy’s internal workflows, fun facts during project development, the struggles, successes and all the scenarios in which designers play a key role to make a successful product.
[MUSIC] 0:00 >> My name is Claudio Guglieri. 0:04 I'm a designer. 0:07 I'm originally from Spain, so I hope you guys are not following the World Cup. 0:08 >> [LAUGH]. 0:11 >> It's not, it's not looking great, but I know 0:11 for England it's not looking great either, so that, that's okay. 0:14 >> [LAUGH] >> I live in San Fransisco. 0:17 And, I work at Finance Interactive. 0:21 At Finance Interactive, I have two jobs. 0:23 In one hand you know, I work as a designer, right, so I'm 0:27 a hands on designer who works with different companies all over the world. 0:30 So pretty much, you know, my job is to help them improve in their 0:34 products, so sometimes it's about, you know, 0:37 creating a website, some other times it's about. 0:39 You know, creating a product for them. 0:42 So many times about like, doing business recovery 0:44 phase to like, rethink how the industry could work. 0:47 On the other hand, I have another job. 0:51 After 12, no I'm just kidding. 0:54 So I'm, as the director of design. 0:56 Which is a new role. 0:59 My job is to actually make sure everything we're doing 1:00 from [INAUDIBLE] in San Francisco, is up to the standard. 1:04 So I'm really, really lucky to work with amazing designers. 1:07 Amazing user experience, [INAUDIBLE] as well and just my job is you 1:10 know, to make sure the ship is moving towards the right direction. 1:14 All right, so today, I'm not gonna talk, this 1:18 is, okay, I'm not gonna talk about a project today. 1:21 I think, you know, you guys might be used to like, what is the traditional FI talk, 1:24 where we actually show something we did last 1:29 year, and you already know, and you've already seen. 1:31 I don't wanna talk about projects today, I wanna talk about skills. 1:33 I want to talk about attitude. 1:37 And I wanna talk about the people that make, you know, great projects possible. 1:38 [SOUND] And that's why, you know, I'm kind of like, looking back. 1:45 Right, like I joined a [INAUDIBLE] back in 2010. 1:51 It was like the worst winter that I've lived in my life in New York. 1:54 and, you know, basically what I wanna share today with 1:59 you is, everything that I learned at FI these four years. 2:01 All the, situations where I thought I could be better. 2:06 I could be a better designer and, you know, all the 2:09 different learnings that, you know, I think you know, helped me improve. 2:12 So, I really hope they will help you as well. 2:15 So I know, also like you guys, 2:18 [INAUDIBLE] but it is not so look at that. 2:23 [INAUDIBLE] And that is Don't Panic. 2:30 Everything's going to be all right. 2:35 We work in an amazing industry. 2:37 It's a great time to be a designer. 2:38 I always say this, and it is true, like, 2:39 some people maybe think, like you know, can we change 2:43 the world, like, there's all this discussion, like, sometimes we 2:46 tend to, like, think that we can do a lot. 2:48 In reality, I don't know if we can do a 2:52 lot, but we can influence in a lot of stuff. 2:53 So, if you think about for example, Space Eggs. 2:56 Now they have this mission right? 2:59 They're building this dragon space shuttle, they wanna put a man in Mars. 3:01 Well you know, there are [UNKNOWN]. 3:05 Like they have touch screens and you know, I wanna believe 3:08 that, we have a, a pretty important role in that sense. 3:10 So, I'm gonna structure the talk today in four different points. 3:13 First one, is scenario the first date. 3:18 Second one, what I call the challenge. 3:22 Then, a personal touch. 3:25 And the final one, what I would like to call the design contest. 3:27 The first date, I love first dates. 3:32 I don't go on first dates anymore, because I'm married. 3:34 So, it's over. 3:37 >> [LAUGH] >> But, there's like. 3:38 There's a one, you know, there's a great first date scenes in New York. 3:40 So if you guys aren't coming from England, whatever. 3:43 Just, go for it. 3:45 I think the first date gets fairly close to what 3:47 is you know, to me the client for the first time. 3:49 It's like, think about a first date. 3:52 Right. 3:54 Like, you don't know each other. 3:54 But like, I mean, you, you suppose to not know each other right? 3:55 But in reality you're Googling that person. 3:58 You don't have expectations like, there's you will know up to a 4:02 point you know, where you can get from that person or not. 4:05 [COUGH] And that's why you know, like it, it is really exciting. 4:07 Like some people will get hooked up to like, [UNKNOWN] first dates. 4:11 so, in the first date I wanna talk about what is to meet 4:17 the client for the first time, how important that is and then scoping 4:20 a project, which is one of like, in my opinion one of the 4:24 most important tasks [UNKNOWN] actually have to, have to learn to do, right? 4:27 Like, saying how long it's gonna take to do something. 4:31 So let's get back to first dates. 4:35 New York, Fall, Central Park, beautiful. 4:37 Something you have to do before a first date is, do your homework. 4:40 Like you will then go nowadays to a first date 4:44 like, not even like you know, typing anything on Google, right? 4:46 Like you need to know, who you are meeting. 4:49 With the clients it's even worse. 4:51 Like, in one hand you need to know, enough to have a smart conversation, right? 4:52 Like, you need to like, you don't need to 4:58 make statements, but you need to ask the right questions. 5:00 The right questions in your opinion that, you know, from your 5:03 perspective are gonna drive the project to a good place, right? 5:06 So this is pretty much the same. 5:09 Something I really like, when I joined four years 5:11 ago, finance interactive I saw this in the media room. 5:13 And, I was actually like, you know, pretty amazed by it. 5:17 Like coming from Spain where everything is, a little bit crazy, you know. 5:21 These guys have a structure, and this is how you make a successful million, right? 5:25 In this, it's fairly similar to a movie. 5:30 Like, it's starts you know, with a good beginning, obviously you 5:32 need to catch downers in the first five minutes and that's awesome. 5:37 It goes to, you know, it meets a good script 5:42 so, you know that's why you don't skipping the second step. 5:46 I'll go to step three, to step three. 5:50 You have to save the client for a boring meeting. 5:52 You know, you have to talk about what matters. 5:54 You, you have to like make sure, you know, you're joking and 5:56 what-not but eventually you get down to the point, and the final point. 5:59 Number four, a good ending. 6:03 You need a good ending. 6:05 I mean, you need almost in my opinion, the first meeting 6:06 you have with that client, you need to leave the room high-fiving. 6:08 You know, giving high-fives to everybody. 6:11 Earnestly be like, this is gonna be awesome. 6:13 I don't know if you guys follow this comic, The Oatmeal, they have one 6:16 that I really like, Web Designers who go to hell, or something like that. 6:20 But, it pretty much describes the first day kind 6:25 of encounter, where at the beginning of everything's like high-five. 6:27 So you might think if you don't have a 6:30 high-five in the first meeting, it's not up to [UNKNOWN]. 6:31 Some of you folks over there, this is four years 6:34 old, as far as I know, it might be like older. 6:38 Tips. 6:43 Avoid heavy food. 6:44 [LAUGH] No heavy food in a meeting. 6:44 You have to avoid food comas, as much as you can. 6:47 [LAUGH] We can talk about this later but I had, few situations that it wasn't pretty. 6:49 [LAUGH] And be prepared. 6:54 Just like a boy scout. 6:58 You know, make sure, as I said, you know as 6:59 much as you can about the company you're about to meet. 7:02 Competitors, who, who they think is the leader, who they're looking up to. 7:05 You know, what's the situation, why are they calling you, 7:10 do they need a redesign, why do they need a redesign? 7:12 Watch the situation just to make sure you can ask the right questions. 7:14 And second step is coping. 7:19 It's not fun. 7:22 It's not fun, and it takes time. 7:23 You know, you get used to it, you might get faster. 7:26 But basically, if you wanna be a good designer in my opinion you need to be 7:28 a reliable person, you need to be a 7:32 person, you know, the client can actually trust. 7:34 If you say something that will take two 7:38 weeks, and in two weeks it's not done, you're 7:39 not gonna get fired if it happens once, 7:42 but if it happens ten times you might fired. 7:44 So, you know, it is really important to be able to know how 7:47 long you're gonna take to actually, you know, to get the job done. 7:51 Do based on what. 7:55 [BLANK_AUDIO] 7:56 All right. 8:02 So that was the first one, not really graphic related. 8:03 And then the challenge. 8:06 My favorite part, the discovery phase. 8:08 The discovery phase is something we started doing edify 8:11 when actually we started creating, like, a US department. 8:15 All right, before we will jump the Spanish way. 8:18 We were jumping through the project just to get it done. 8:20 Now everything has a plan. 8:22 This is funny because I can't, like, 8:24 complain about Spain, just because I am Spanish. 8:25 So the discovery phase is basically when you know, 8:30 you get invited by the client to this meeting. 8:33 And your job in this phase is to understand what the problem is. 8:36 You have to understand what they need, you know. 8:40 And you don't understand what they need just by reading 8:42 out their RFB, you know, you need to talk to them. 8:44 You get into like a whole process of 8:47 you know, interviews with state holders and whatnot. 8:49 Basically it has three different phaces. 8:52 First research, second experience and strategy, 8:56 and the third one, creative concept. 8:59 That's the one we're gonna be focused today. 9:01 How do you come up with a creative concept? 9:04 Well a creative concept is no Photoshop. 9:07 Like, if you rush into Photoshop sketch or whatever you 9:09 want right now it will be, it will be a mess. 9:13 The problem with Photoshop is like you're 9:16 asking the, you know, with creating visual contrast, 9:18 asking the, the client to ask on, you know, to decide on too many things. 9:20 One thing is how it looks. 9:25 Does it look good? 9:26 Does it look bad? 9:27 You know, do I like the font? 9:28 Do I like the color? 9:29 Do I think it's on brand? 9:30 Do I think this is like something that I could see as, you know, my website? 9:32 And in the other hand you ask him them to, 9:36 you know, you ask their opinion of how it works. 9:39 Where is the navigation? 9:42 Is this the side navigation? 9:43 It's on top. 9:44 Or the global components? 9:45 So like, even though sometimes, depending on for example, 9:46 for a page you have to take the risk right? 9:50 You have to actually say like, okay. 9:52 This is what I think you need. 9:54 But if we are already in the project, we would then rush to design. 9:55 And obviously you know, clients respond really well to design. 9:59 If you present design, they might hate it or not, but 10:03 they get the sense of like, okay, we're starting to do something. 10:06 And sometimes, you know, when you get there with wire 10:08 frames or just like with, a bunch of interviews, they're like. 10:10 You know, this is useful up to a point but it's not really helping me. 10:15 However, it's not their job to be clients. 10:18 There job is to be whatever they are right? 10:20 It's our job to teach clients how to, how to work with digital databases. 10:22 So that's why we jump into the framework. 10:26 I like putting the finish in from time to time. 10:28 What I understand framework is like, a 10:30 basic structure, underlying system, concept, or text. 10:32 I like this definition because, it works really well to define what is a framework. 10:38 So, frameworks is everything that makes your website. 10:41 You know, like, everything that is in your website, 10:44 if you have to, it will be contained a framework. 10:47 You know, the key components of our framework would be like. 10:50 Navigation, footer [UNKNOWN] and then some other like [INAUDIBLE] this page. 10:51 Or this other page. 10:56 It would be like, accessory. 10:56 It would be like more like how I move 10:58 throughout the framework more than the [INAUDIBLE] of the framework. 11:00 So, we do this a lot. 11:04 We do a lot of sketches. 11:05 We have, in San Francisco, a white board 11:06 before, but now we don't use that any more. 11:09 We bought, we bought what we call. 11:12 It's just butcher paper. 11:14 It's just like a long roll of paper. 11:15 We put it on top of the table and it's just a lot of fun. 11:17 I, it looks like shit, but it is fun. 11:20 So, you know, obviously we wouldn't present this to a client. 11:23 There's nothing you can understand there, but you 11:25 know, sometimes, using other Apps like paper or whatever. 11:27 He gets. 11:30 It gets prettier. 11:31 It gets like something you could present. 11:32 Some other times, we take pictures. 11:34 So, you know, that obviously is like final thoughts, right? 11:36 Like you were doing all that crap before, and now 11:39 it looks more like something you would present to a client. 11:41 Again, in the frame where present. 11:45 Everything. 11:47 You know, how it works, we'll get into details later 11:48 with some examples, but this is overall what we will present. 11:50 Another one, and sometimes we record videos. 11:55 So sometimes we have this like, massive 11:57 image, and we just record like, screen capture. 11:59 Talking over it. 12:02 Like this is the way it's gonna work. 12:03 We're gonna have these screens. 12:04 You know, if the user press here, it's gonna go 12:06 there, this is a lateral panel, this is something else. 12:09 They, they respond really well to this, 12:12 because you're like, somehow you're making them experts. 12:14 It's not, about going there, and delivery, and 12:18 leaving the room, it's about having a conversation. 12:21 If you present this you know, in my experience 12:24 they're like, they're really keeping it like they, they like. 12:27 And then obviously it's not a final piece 12:30 so you can always like, quickly you know, iterate. 12:32 Some of the variations, this is something, my, my good 12:36 friend U.A. leave you access on a hearing in New York. 12:39 The for nick love'em, right so, it's a bit crazy. 12:44 You see it, like, it looks like a sketch, it's, like, really top level UI, right? 12:47 UX, sorry. 12:52 So you have, like, how it's gonna work. 12:53 This is for nick love'em App, right? 12:55 So we have to before jumping in design, we have to actually present them, you know. 12:57 What do we think the system is gonna be like? 13:02 Are we gonna have a video right after the logo? 13:04 If you scroll horizontally are you gonna see one of the stars? 13:06 These actually will help them understanding, you 13:10 know, what is the commitment from their side? 13:13 Let's say they have to produce assets. 13:14 You know, how heavy would that be? 13:16 And sometimes you get crazy. 13:19 Like, that's what happens when you're making new things. 13:20 When you make something that, you've never seen 13:23 before, it's normal if you get to be crazy. 13:25 But that's fine. 13:29 More iterations. 13:30 So this is something, again, from the same client. 13:31 Here I'm presenting the whole system. 13:35 I know that, that's not even visuals, that's not even the framework. 13:37 This is more like. 13:39 This is the, the system your application is gonna live inside. 13:40 These are the interactions we can do. 13:45 You know, this is how you will see through the 13:47 iPad, what the transitions are gonna be like, this thing again. 13:49 You have like, all the layers of content as 13:53 well and, you know, how they will look if 13:56 you look them from the iPad or if you 13:58 just think about like, assets that you will need. 14:00 Let me get the [INAUDIBLE] interactions, and transitions. 14:04 Whoops. 14:10 So what key role do designers play here, why is this important? 14:10 I mean we're not in charge of this phase of the project. 14:14 At this point it's like, user experienced designer thinking control. 14:17 You know however, I think it's good just for the sake of 14:20 like, transparency, to be involved as much as you can in different phases. 14:23 You know, obviously you need to make a 14:27 framework that solves the client's, solves the problem, right? 14:28 Like you need to make a framework that is gonna work 14:32 from just, just a structural perspective, but also from a design perspective. 14:35 Sometimes designer can like bring some light. 14:38 When it comes to like content density. 14:41 You can say like, I don't think this is gonna fit there. 14:43 It looks great in the wires but, I think we should 14:45 structure in a different way so it's easier to actually digest. 14:48 In that sense, I, I love this, this iron principle. 14:52 Form follows function, right? 14:55 If you stick to this, you know, I think it's, it basically says 14:57 I'm gonna read, basically, like you know, 15:01 highest considerations are secondary to function considerations. 15:05 And that's great, you know, if you, if you think about the hierarchy of need. 15:10 Obviously let's say we're creating an email client. 15:13 If you create an email client, the animations are not that important. 15:16 You don't necessarily care, you know, that this whole thing is moving here, there, 15:20 but if you look at it from 15:24 a user experience perspective, animations are key, you 15:25 know, the fact you're connecting different scenarios 15:28 that if you press on an email and 15:31 it goes to the left, and you press back and it comes from the left. 15:33 That's, that's what makes the whole system work. 15:36 That what makes you feel, as like an entity, proper framework. 15:39 The reality is identify innovation and user experience is 15:44 always, what do you call it, an underlying, need. 15:47 What do I mean with this? 15:53 We don't wanna work, with clients. 15:54 We don't wanna do work that's gonna be, innovated in one sense or the other. 15:56 We're, we're really lucky when this really good 16:02 position where we can actually decide not to. 16:05 So every time you know, we gonna invest, it's an investment from our side as well. 16:08 To create a new project we need to make sure, it has something. 16:12 It has something, that we can call out you know, in 16:15 years they're gonna say, we did that because it was awesome. 16:18 So challenge yourself. 16:21 Challenge yourself to create something you've never seen. 16:23 Challenge yourself to create a new standard. 16:26 Challenge yourself to create something that just works. 16:28 Something that you don't need to explain. 16:32 [SOUND] Something that, I remember the first time I 16:34 got to, and I give it to my mom. 16:39 I didn't have to explain it. 16:42 It just works. 16:44 This is really pretentious. 16:45 I wish I would have this idea either. 16:46 But, at least we've got something where we 16:48 can look and say, you know, that thing works. 16:50 You know, let's try to create this same thing in our [INAUDIBLE]. 16:53 [BLANK_AUDIO] 16:54 All right. 16:59 So I could tell you many things, about like how to create a framework, like. 16:59 Think of the big picture live out of 17:03 the box, plan for all devices, things like that. 17:05 For me the most important thing here is, continuity. 17:07 The fact that the whole frame was gonna feel connected. 17:10 Continuity is, is something that, you know, it already 17:13 exists and has been applied to like again movies, 17:16 if you have a character stepping in the movie 17:19 the plane like, in a shot from the left. 17:22 And leave it from the right. 17:25 The next shot if you, you know, if 17:26 you wanna imply movement, it should be the same. 17:27 Now, if the next shop is he's going from 17:30 the other side, you're like, you're making a mistake. 17:32 You know, as a, as a viewer I'm gonna become, [SOUND] I'm gonna be confused. 17:35 So, continuity. 17:41 FI, long time ago we started doing all this, like, isometric craziness. 17:43 I love it. 17:48 I think it looks really good, even now. 17:49 But this, this whole purpose of this 17:51 whole exercise was, you know, to express continuity. 17:53 To make sure, users or the client can look at this. 17:57 And understand where everything is coming from. 18:01 Okay, here this is Broadway. 18:03 We're gonna have this save panel on the right. 18:05 But you can have it or not. 18:08 And then you gonna have this kind of highlighted 18:10 items which is that you just to have selected. 18:12 That matters you know, so the client and the 18:15 users can understand, but obviously, this just kind of like. 18:18 For us or for the client. 18:22 It doesn't have to, you know, it's not really to the project, you're 18:23 not pu, you not gonna put the, the project in there some other perspective. 18:27 But then again, to, to get the point across it really helps. 18:29 More examples, same thing. 18:34 So, a good discover face is gonna set the project for success, or for failure. 18:37 You can spend, one month in a discovery project and, you know, fail at it. 18:44 And then you have to suffer that for three months. 18:50 So, if you look at it from that 18:52 perspective, you better make a really amazing discovery project. 18:54 You have to sell it. 18:58 Like, I love actually this phase, because I will get to, talk to the client. 18:59 And it's, you're selling this amazing thing. 19:03 They're not even, they're not judging design. 19:05 You know, they're almost like rushing [SOUND] to get to design. 19:08 But you're like, you know, hold on. 19:11 Let's, you know, let's set a good foundation. 19:13 Challenge yourself. 19:16 The personal touch. 19:19 I like this. 19:21 The look and feel. 19:21 This is the brute force, phase. 19:22 This is when we actually have to, to do our job, right? 19:25 Like, we, we talk a lot. 19:28 We talk to [INAUDIBLE] we talk to the client, now 19:31 we go back to our corner and have to design stuff. 19:33 Something that we do [INAUDIBLE] obviously we create moodboards, 19:37 we create look and feel meaning like [INAUDIBLE] usual comps. 19:40 And, obviously we present it to the client. 19:44 When it comes to mood, when it comes to moodboards I, I'm like 50, 50 I think 19:46 it depends on, on the client it makes 19:51 sense or not, It depends on the boarding process. 19:53 You'll have to go, all over the discussion of like, do you like 19:56 this font, do you like the [INAUDIBLE] do you like the sound [UNKNOWN]. 19:59 It depends. 20:02 For example, when we worked with Nickelodeon, they 20:03 really like doing moodboard, so, so we did, right? 20:05 And it was, it was useful because it 20:08 wasn't that well defined what the outcome will be. 20:10 So, sometimes we did it, sometimes not. 20:14 This is like a quick one. 20:19 Is no big deal, just typography colors, trying to set a mood. 20:20 Sometimes we'll do the mood board, with our projects. 20:24 They will come to us because they like A, B, and C. 20:27 So, we just wanna make sure it's like, is 20:30 this in line with, you know, where you're thinking? 20:31 Send this. 20:35 Some of the times we will just, you know, 20:36 obviously get inspired by the community, which is awesome. 20:37 Some of that we put together, like different apps and what not that we like. 20:41 Some of the times, we just like, you know work 20:46 on typography, showing them how the typography looks on a browser. 20:48 How it renders on what specific sizes. 20:53 How it renders on top of color. 20:56 How it renders on top of white. 20:57 Things that are fairly important. 20:58 But again, you know I don't wanna talk 21:00 too much about mood boards, because again, the, 21:02 the only goal for mood board is to get you down to a calm official design. 21:05 That's what the product's gonna be like. 21:09 So, let's talk about it. 21:11 Look and feel. 21:12 You know, at this point you're in a pretty good spot, right? 21:13 You have the typography, you have a color theme, you have the framework. 21:15 You just need to put the colors to it. 21:18 That would be like, the known side of the definition. 21:20 What's left? 21:24 In reality, everything's left. 21:25 We haven't done anything. 21:26 We haven't even started the assignment. 21:27 At this point, you know, you still have to 21:29 find what makes this project special, from a visual perspective. 21:31 You have to, what do you call stay alert from for visual 21:37 complexity, is really easy and I see this working with designers all over. 21:41 Like, let's say for example, you have to 21:45 design the search results of a flex search. 21:48 You know, you start having information, and you create 21:51 this like transformers, kinda like mojos with gazillion items. 21:55 You know, it's just really complex, is 21:59 really easy to fall into visual complexity. 22:02 And finally small, small details have a, a great impact. 22:05 So, let's start with the beginning. 22:08 What, you know, find what makes it special? 22:10 What is it that is making this product a special? 22:12 Sometimes it's a color, like, I don't, you 22:15 know, it depends, it depends on the project. 22:16 You as a designer have to decide, right? 22:18 Maybe it's because for example, when we're working on, with desigual. 22:20 And we're gonna have like gazillion colors in the, in the navigation. 22:23 You gonna be dam playful. 22:26 That's something that will make it a special. 22:28 Are you gonna work as a designer with your favourite illustrator? 22:31 That will make it a special. 22:35 Another one, a proposal with you for Samsung. 22:37 Are you gonna illustrate, what is the biggest fun you ever seen in a browser. 22:40 That's another fake. 22:44 So, we'll have different stages. 22:47 This proposal for BBC. 22:49 My take here, if I take was like. 22:52 Let's make a video platform that is always playing videos. 22:54 That's something, that's something I've never seen. 22:59 You go to a website they'll, you know, 23:02 all the video like news provider they're concerned. 23:03 People are now concerned, are not consuming news. 23:06 They are not consuming news, because it will take 23:09 you five minutes to see a one minute video, right? 23:11 Because you have to get one minute and a half commercial. 23:13 But what if the video is just laying there? 23:16 What if, regardless of where you're going, the video is always there. 23:18 So, you can like, move left, move right, you can actually select [UNKNOWN]. 23:22 You can see how the video is always staying there. 23:26 You can like tap on the video, it will go full screen. 23:29 The video will finish, is probably you'll have some ads on the top. 23:31 Everybody likes that [LAUGH]. 23:35 You know the video finish, if you see another ad. 23:37 A [INAUDIBLE] that's great. 23:40 So like, clients like that, that's part of the requirements. 23:42 We need to have adds, because people, the users 23:45 are not consuming video on the internet for now. 23:49 So, finally, what makes this special for yourself. 23:53 You need to, to get excited about this. 23:57 And also for the client. 23:58 Define what's gonna make this project successful for the client. 24:00 Next one. 24:06 Stay alert for visual complexity. 24:07 I've explained this before, I don't wanna spend too much time on this. 24:08 Basically, it's a lot of nitty gritty. 24:11 I like it like, I call it This hand surgery, when you actually have 24:13 to, like, get down to the pixels and make sure it's not too complex. 24:19 So, imagine we have, like, a really nicely [UNKNOWN] card. 24:23 It's beautiful. 24:26 You put in a background. 24:27 You posted on [INAUDIBLE], and everybody likes it. 24:28 Everybody likes it. 24:29 But when you have 50 cards outside of each other. 24:31 If it is too complex it's gonna look like crap, 24:35 so you need to find a way so it's balanced. 24:38 And this one, small details have a great impact. 24:43 Small details. 24:47 We, we know a lot about details. 24:49 Or we pretend to know, right? 24:51 I wanna ask you something, how many video 24:53 players have you guys designed through your career? 24:57 All right, let's, let's make, really hands like. 25:00 More than ten? 25:03 Like ten to 20, you would say? 25:04 We have one. 25:07 A little wiggly fingers over there. 25:07 Say, would you say you designed more than 40 video players? 25:09 Now, it's good [LAUGH]. 25:13 All right, we're the same a lot, all right, so I 25:17 just,I made this exercise of putting, at least some of them together. 25:19 We've designed video players for Juiced, we did the FWA Theater 25:23 a long time ago, proposal for ESPN, our own video platform. 25:28 Nickelodeon, Red Bull TV, some video anime platform, BBC, LIfe Is. 25:33 This show thing. 25:40 Burton. 25:41 Fox. 25:42 EA. 25:44 Porsche. 25:45 USA Today. 25:45 Verizon. 25:46 Da da da. 25:47 CNN, BBC. 25:48 HTC. 25:49 Crawbaby. 25:50 CNN again. 25:51 Cinema Now. 25:52 We've done so many. 25:52 We've done so many that it's crazy. 25:54 We've done so many that if I have to design, a 25:56 video player right now, I'm not even gonna think about it. 25:58 I'm just gonna like slap it there timeline play button just get to it. 26:02 But that's, that's the point that I'm trying to make, right? 26:07 Things that we've done so many times. 26:10 All right. 26:13 Easily overseeing like ignore. 26:13 But you know, they sell [UNKNOWN] those two. 26:17 AOL, I can continue. 26:19 NCAA. 26:21 This other one. 26:22 This other one. 26:23 The point is you have to rethink the established. 26:24 You have to rethink, what you think you know. 26:26 You know, how many, there's so many components. 26:29 So, when it comes to like video players. 26:31 If you just slap another video player, it's just gonna be another video player. 26:34 And then someone else will post something on drivel and 26:38 you'll be, like, fuck, that's a really nice video player. 26:42 >> [LAUGH] >> You could have done it. 26:45 You had opportunity. 26:47 You've done more than 20 in you life, right. 26:48 So, you need to make sure. 26:50 We don't, you know, ignore any of those components. 26:52 Take a look at this example. 26:57 This is for, well I guess I can say it, it's for a juice company. 26:58 So, this video player basically the timeline 27:02 is almost like an orange you're peeling. 27:05 Like this creative concept there, in reality I mean, this is gonna be tiny. 27:07 This isn't gonna be like, too big. 27:11 It's gonna be tiny. 27:13 Not many people are gonna like look at this 27:14 company and say oh, look at that, but you will. 27:17 And your client will, and again, you know small details make a big different. 27:20 This one we did for Fanta. 27:26 Fanta.com. 27:27 Obviously if you have a slider, it's full of bubbles. 27:29 That's awesome. 27:32 These are one for desigual. 27:34 Maybe you don't need a timer, I mean. 27:35 It depends on the video, right? 27:37 If you have like a 30 seconds video, 27:38 you're not likely to go like on the timeline. 27:40 Sometimes we over design things when in reality the content is not asking for it. 27:42 So, sometimes we just need a play button, and a pause button. 27:48 Not even volume. 27:51 Like, who plays with the volume on a video player? 27:52 You would just go to your computer and set the volume, right. 27:54 Like you would just use your, your keyboard. 27:56 No one is gonna go do you have a specific 28:00 video player, just to change the volume of that specific thing. 28:01 So, let me ask you something. 28:05 How many play buttons have you guys design, have you guys designed? 28:07 Too many. 28:12 Too many. 28:12 I've done that triangle, too many times already. 28:13 How many pins? 28:15 I know so many pins. 28:18 You guys are laughing because I know you've done a lot. 28:19 How many magnifying glasses? 28:22 How many like search fields have we ever designed? 28:23 It's just overwhelming. 28:26 But you have to rethink it. 28:29 You have to rethink what you consider, what you've done so many times. 28:30 And that way you're gonna find what's special about it. 28:33 Finally, presentation. 28:36 This, you know. 28:40 If we were comparing the first time you meet a 28:41 client with a first date, a presentation would be, like, 28:43 you know, like going all the way you'll say, right? 28:48 [LAUGH] They know you. 28:51 They know you. 28:53 Talk to them. 28:53 You know, you already, they know your goods, they've seen 28:54 your work, they've seen box everything is going well, right? 28:57 But now, this is you hosting something or really do more like a madmen presentation. 29:01 You stand on the stage, everybody cries, right? 29:06 So, at Fantasy Interactive we encourage designers to 29:10 present their work, and it doesn't always work. 29:13 You know, even myself, the time I present, I presented a project was for EA. 29:19 We did the page for FIFA 11. 29:25 It was horrible, I was, I was in London in my room in my PJ's, you know, 29:28 call with California, through Tony Carts you know I, I had a really hard time, but. 29:34 Even, even back then I, I appreciated you know, how important 29:40 it is to, to be able to present your own work. 29:44 It was David Ogleby who said that, you know, 29:46 a good agency should be like a good hospital. 29:50 In one hand, you're taking care of patients. 29:52 And in the other hand you're, you have like a, like a school. 29:55 You're teaching people to become a professional, right? 29:59 So, this is pretty much the same. 30:01 We encourage designers to present their stuff. 30:03 On a traditional agency, you will have your creative director present your work. 30:06 I hate that. 30:10 You know, you need to be able to present your 30:11 own stuff, because no one knows it better than you do. 30:13 No one knows why that button is there and not there. 30:16 Better than you do. 30:20 And you know, like, we're not like the same monkeys. 30:21 We can present our stuff. 30:23 So, that's fine. 30:24 So, what we do is, we do a lot with the woofers, like, I think the sentence that I 30:26 repeated more in four years is, Hi, this is [UNKNOWN] from FI. 30:32 And this, in this video I'm gonna cover blah, blah, blah. 30:38 We do that a lot. 30:41 It's, it's crazy. 30:42 At the very beginning it would take me 10 takes to get the, to get my name, right. 30:44 But now it's fine. 30:49 Now, I'm getting fast at it. 30:49 And then we do video conferences. 30:51 Depending on the client, you know, we'll go out and visit them. 30:53 But the reality is like we work in a really 30:55 we're really lucky to work with clients all over the world. 30:59 So, sometimes, you know, we default to video conference. 31:01 What we normally view is, you know we post the design the day before. 31:06 So, we post the design, we post the work, 31:10 they watch it in the morning, and then we talk. 31:12 You know, that way we don't spend one hour presenting a PDF. 31:15 I mean you might, you're, you're likely to do it again, because, 31:19 you know, you get to the point to the, to the talk. 31:22 Hey, guys, have you seen the, the video I recorded yesterday? 31:24 Oh, no. 31:28 Just press enter again. 31:29 And you're like, oh my god. 31:30 But, you know, if they do their own work which is really likely 31:31 to happen, then again, you have a meeting that is really fast paced. 31:35 It's really like, straight to the point. 31:38 It's just useful. 31:39 When you present in stuff, don't make assumptions. 31:40 That's one of like, initial mistakes right? 31:45 You're presenting something, and you're like 31:48 oh yeah, you've seen the framework already. 31:49 Let's you know, jump to the visuals. 31:51 Don't make assumptions. 31:52 They, they have not, you don't know what's going on in their company. 31:53 You don't know if they've seen it. 31:56 They haven't seen it. 31:58 I, you know, then again, when you're presenting 31:59 stuff, all the work you've done can go. 32:02 You know, can be trashed. 32:06 Can be like, or like disregarded as we don't like this. 32:09 And the only difference is not your work, maybe you did great you know, great 32:14 stuff, it's just if you don't present it properly it's not gonna be a successful. 32:18 So, here's an example, we work. 32:24 A lot with airlines all over the world, right. 32:26 So, this is like, a quick presentation I was doing for Asian airlines. 32:30 You know, they've sent this already. 32:35 I, that was in the wood works. 32:37 They, they all ready know it. 32:38 I don't need to talk about the course again, 32:39 even though I did, right, but at least they know. 32:41 They see, it's like, oh, I've seen this, okay. 32:43 It doesn't hurt. 32:45 It's just five minutes. 32:46 Be Greek. 32:47 So, we will explain the create again. 32:49 You know, this is our job. 32:50 We're gonna explain then how whatever we're creating is gonna be 32:51 responsive, how it's gonna translate this great into a font, right? 32:54 Or how is the basement gonna be, you know? 32:58 Where there, where it's gonna be the, the breaking points? 33:00 When are we gonna jump to, like a thousand of you we're gonna attempt to make mobile. 33:02 We talk about the framework, and when we talk about the 33:07 framework, again we go back to the very beginning of it. 33:10 We don't show the whole website. 33:13 They've never seen your design just yet, right. 33:14 So, you need to make sure you introduce your design you know nicely. 33:16 So, we'll start describing all the components. 33:21 We're gonna have a top bar. 33:23 A menu. 33:26 You can press the menu. 33:27 It comes from left. 33:28 So, they understand. 33:29 Then I have those numbers to talk about. 33:30 One is this. 33:32 Two is this. 33:33 Then we talk about the sidebar. 33:35 It says tiki components. 33:36 Gonna be always there. 33:37 It has different states. 33:39 Logged out. 33:40 Logged in. 33:40 Latest deals. 33:41 What not. 33:42 Your friends activity. 33:45 So, we go all over, right? 33:46 We talk about this, we call them our key. 33:48 We talk about the different pictures on it, like if we 33:49 have a marquis for friends, a marquee for like more corporate messaging. 33:52 We talk about the widget in this case, right? 33:56 So, it's for booking flights. 33:58 So, we would isolate this widget and just show it like this. 33:59 What would happen if you hover, if you press on something? 34:03 It is just really important that you don't 34:06 assumptions, because you don't know what is going on. 34:08 You just need to make sure every time you present something 34:11 that you are providing enough background to justify all of your decisions. 34:14 In the sam context, production, I love this phase as well. 34:19 I love all the phases. 34:23 But I love this one especially, because you just have to do the work. 34:24 You've been paid, you've been trained to 34:28 do this, you're ready, you have the technology. 34:29 So like, what we normally do at this pace, what I call is the endurance test. 34:32 Some designers are good at creating like, a concept for two weeks, and they just 34:36 like, hand it over, but in my opinion, and you know, I find it attractive from. 34:40 The global creat director to whoever. 34:46 Everybody who has a design role, is able to actually do this. 34:49 Take a project from the very beginning, till the very end. 34:53 So, you know, when we talk about deliverables. 34:56 In reality, you know you're not just like jump in, in the water. 34:58 You always have UX, right? 35:03 So, UX get's approved, let's say, one week before. 35:04 And then they tweak. 35:07 And then you actually jump on the science. 35:08 So, you always, you know from that perspective you're safe. 35:09 You're not proposing things they haven't seen before. 35:14 Stay, alert. 35:18 Couple of things. 35:20 Well, the first thing is, your layout should tell a story. 35:21 You know the problem with is like, sometimes wires. 35:25 Don't really communicate what makes this special, right? 35:29 To tell a story is a way to communicate how your product is gonna be a special. 35:32 So, your layout, you know because of that it should always tell a story. 35:36 This is an example that we did for a hotel chain. 35:40 Basically, we have this beautiful full-screen marquee. 35:44 You know, I've seen so many websites of different hotels, right? 35:49 And the problem they always have is like, they don't tell a story. 35:52 They have the best building, they have the 35:55 best destinations in the world, everything is awesome. 35:56 Have you guys seen The Lego Movie? 36:00 Alright, [LAUGH] but when you go to the site, you just see a marquee. 36:02 With th girl in the water it is like okay, it is like okay, so why do I care? 36:07 How can I relate to this? 36:11 You're supposed to relate to that situation because, you're 36:13 gonna see a family or you're gonna see two friends. 36:15 But it's not really, they're not talking to you they're just showing it. 36:17 So, as an example of tell the story. 36:22 What we were trying to do here is like, what if you 36:26 could have a marquee that is gonna know what the time is? 36:28 Obviously of your computer. 36:34 And depending on what the time is, it's gonna tell you what 36:36 you'll be doing if you will be at this hotel right now. 36:39 So, when it comes to like travel, right? 36:43 We go through different stages. 36:45 The first one is dreaming. 36:46 You dream of work. 36:48 You dream of home. 36:49 So in my dream, you're checking this hotel website 36:51 at like 1 M.P and the website says, it's 1 36:54 M.P in this hotel and 1 M.P, you could be in the beach or you could be playing golf. 36:59 So, you're like, fuck. 37:06 And that still didn't work. 37:07 [LAUGH] So we're getting there right? 37:08 Like at least you can relate to it. 37:11 Like it knows what time is it you know, and it's asking you. 37:13 Actually it's not just telling you, that's what you could 37:16 be doing, it's telling you what will you rather do? 37:18 Will you be in the, in the water with 37:21 this girl or would you be playing with, those guys? 37:23 So, you can hover, you know, all right. 37:27 If I could escape right now I would go to 37:29 a private beach, or I will go and play golf. 37:31 You know, and once you've done that, maybe we ask you something. 37:35 Maybe you can, you know, even this component you could move it. 37:38 What would you be doing at 9 o'clock? 37:41 At 9 o'clock I could be. 37:44 You know, having the dinner or playing poker. 37:45 So, you know, in that sense, you're like targeting different users, right? 37:50 So, you've got already you know people who might be like not doing anything at 1pm. 37:53 9pm is like, you can go either family or you can 37:59 go either like bromance kind of thing, like okay, we're playing poker. 38:02 But you like targeting those users. 38:07 You like, you're learning more about the user. 38:08 So, nice copy. 38:12 Luckily they don't trust me for copy. 38:14 You know at once you know enough about the user, you get to book. 38:17 So that's, you know, that is a really nice story. 38:22 And let's say, depending, like, I'm not gonna show you 38:26 [INAUDIBLE] but, like, let's say depending on what you've selected, right? 38:27 You've selected I will be on the beach, and will be you know, 38:31 maybe you do something else and it's 38:34 something like, really, you know whatever related. 38:36 Maybe the search results you're gonna see are, like, for like beach lovers. 38:38 If you really interested in sports, maybe we can give you. 38:44 Rooms in the hotel that are really close to, you know a tennis court, or whatever. 38:47 Like, there's so many opportunities on every single 38:53 cover that we're just like, not even thinking about 38:56 it because we tend to oversee, we tend to 38:59 ignore things that we've done so many times, right. 39:01 So let's, you know, getting back to this we can establish. 39:03 I think with you now. 39:07 Next one. 39:10 Join the design contest. 39:11 Dribble porn. 39:13 Way before Dribble David Martin, which is Fi CEO. 39:15 Ira, he already mentioned this quote. 39:20 He said think, think about each component as if it could be presented. 39:22 To a design contest. 39:27 You know, design the footer that will win the design contest of footers. 39:29 That's really powerful right there. 39:35 Because as we tend to like ignore things that we've done. 39:37 We tend to not like some other things like footers. 39:40 We [INAUDIBLE] way before. 39:43 Which is funny, you know. 39:46 We, we did this kind of like practice way before Druble. 39:47 Maybe I would say way before Druble was as popular as it is today, right? 39:50 We had these case studies and we would be like, lights. 39:53 You know, we would try to make the component the hero. 39:56 You could win a design contest with that. 39:58 With whatever you proving the light in, that could win. 40:00 It just, it's just buttons. 40:05 There's nothing special, but everything is how you, you know, how you market it. 40:06 I mean, they're really special, they're really well done, of course. 40:11 Disclaimer. 40:15 You know than some others. 40:18 So that, that tells you, you know, like if 40:19 I, is one on because of the attention to detail. 40:22 And that doesn't just go with, you know, dribble. 40:26 It was way before dribble that we were actually doing this. 40:28 Kinda like. 40:30 This kinda practice, right? 40:33 Some of the stuff, you know, obviously where, others were in dribble, so. 40:35 We tried to post things that were not too obvious, you know, 40:39 that someone might look at it and say, I know that client. 40:43 Or we just post things that we did, like, a long time ago like this [UNKNOWN]. 40:45 And then you just like some components just to have fun, right? 40:49 At the end that's what matters, you need to have fun. 40:52 We're really lucky we're here and not in, 40:56 you know, in a field picking strawberries, right? 40:58 The, the worst day in our job. 41:00 It's not about that, I mean, you know, we, we have this 41:05 chief of operations, office manage, I don't know what he's what his 41:10 role is any more, but basically he, he worked before as a pilot. 41:15 He worked in a flight school and he told me this, he 41:20 said like, listen the worst day, the worst day you guys can have. 41:22 Is nothing compared to the worst day I can have in our flight school. 41:25 And that made me think, you know, like, we're here to have fun. 41:29 We're here to like make amazing stuff. 41:32 And take risks, sometimes. 41:35 You know, make sure we push for ourselves, and obviously for the client. 41:37 So, designers wear many hats during a given project. 41:43 We research. 41:48 We gather requirement. 41:49 We sketch. 41:51 We conceptualize. 41:52 We [INAUDIBLE] and we brainstorm with the development team. 41:54 We are [INAUDIBLE] belief that as long as you're ready, as 41:57 long as you challenge yourself, as long as you rethink established. 42:02 You know. 42:08 And as long as you enjoy the process, it's gonna put you in a really good spot. 42:09 To enjoy the process, to enjoy all those faces, is what matters. 42:13 You know, if you don't. 42:17 If you enjoy the process so much, you wont have to 42:20 worry about the results, because the results are gonna be great. 42:24 And that's it. 42:29 Alright, I hope you, you guys liked it. 42:30 Thank you so much. 42:31 We're hiring. 42:33 [SOUND] 42:33
You need to sign up for Treehouse in order to download course files.Sign up