Typographic Layouts: Create Layouts for Content Heavy Websites and Apps

1. Introduction and Setup: - Hey, - guys. - Welcome to create topographic layouts were content heavy websites and apps. - My name is Cavalleri. - And first of all, - I would like to thank you for joining me. - I'm really, - really excited about this subject. - And I really hope you enjoy the course the way they classes. - The structure is I created nine units. - Um, - and each unit will come with a video lecture covering basically theory and also like - bringing up some real examples on some of those humans are a bit more hands on will come - with a second bigger lecture where I will actually go through the process of designing. - Um, - the assignment for the class, - which is to create the nurses were there. - Welcome to Unit One introduction and set up in this unit. - I'm gonna be covering the set up for the class. - I'm gonna talk a little bit of with my background, - and I'm gonna also talk about the reasons that made me create this curse they set up for - the class. - Um, - I'm gonna be using other way for the shop to great old examples. - You don't have to use it if you don't want to. - Oh, - if you feel just more comfortable with a different somewhere. - That's totally fine. - In case you wanna use it and you don't have it, - you can download it from adobe dot com slash for a shop. - I'm sure you can get a trial version there, - but it really doesn't matter because we're not gonna get a We're not going to get that - technical into the tool is gonna be more on an abstract level on, - like, - the same principles that actually, - you know, - tricks about for a shop. - So that's fine. - And I'm gonna be using also some pen on paper. - Teacher backroom. - That's me. - So my name is clever, - witty, - and that's my website. - Why don't we try to come? - Um, - formal background will be. - I worked as an art director. - Be really New York. - Before that, - I worked at Finest Interactive in New York as well for about three years. - And before that I used to live in London, - where I Friedland's and work for the company called Playing Concepts on. - We actually create, - like, - tons of visual concepts for Microsoft, - so that's a bit formal, - but in reality, - a money signer, - I decided stuff. - I try as much as I can to make my work relevant and trying to make things that matters on - things that somehow improved users live in one way or another. - It could be like by taking the weather by taking picture pictures by reading news, - anything that can actually, - uh, - mean something for somebody and somehow improved process off on their lives. - My website. - Oh, - first weaken, - you can find me on Twitter. - You can find me a medium you can find your drivel. - And also Lincoln on my website is why don't we try not come? - I think whether we dry it pretty much encapsulates the way I approach my work and assess it - before try not to being pretentious. - I designed stuff and I tried to push it as much as I can and just tried to make it, - um, - relevant. - And in that case, - you know, - why don't we try? - I thought he was like a really good moto for that. - The title off The Curse is creating topographic layouts for content, - heavy websites and apps. - If you break this tunnel down a little bit, - we're gonna be creating layouts based on topography. - So layout are normally made off text and pictures and we're gonna be using pretty much - typography to create all these divisions and all these like parts of the layout that will - normally rely a visual elements. - We're gonna try to move away from that and rely just on typography as much as we can on - We're gonna make this for content Heavy websites and apps This is pretty much self - explanatory, - but we're gonna have a you sing in a way we're gonna be creating temporary layouts for - platforms websites where the content is king. - But here comes the tricky part. - We just don't know what that continents so think about news, - reader news sites, - agency news. - You know, - dynamic content size portals where you know on our work is actually to create the framework - so journalists can feel thes whole framework with information. - But we need to decide it in a way that users can do No other thing that just really, - you know, - we need to create to treat this time in a way that is just easy to read. - That isn't Tyson. - That actually makes people read the articles recent. - It's entrance. - Why this class? - I wanna go through different trends that I have seen that actually made me think about - doing this curse. - The 1st 1 is the fact that Internet Webby shifting towards a more user center orientation, - and it's definitely less technology focus. - Example of that would be just a really well known fact that we graphic designers, - Web designers. - We've been like using fixed standard for solutions for a really long time. - And this is no, - this is not news for anybody, - but we've been using, - you know, - like from back in the days Back, - back, - back in the days 800 by 600 to like 10 24 by 78 768 to like even like the last one before - the responsive drink came in. - It was like 12 80. - Um, - but now everything is different. - We we definitely there's this movement of responsible adaptive design that actually really - understand users. - Andi actually used technology to serve content to the user in a better way, - regardless off the size of the scream or, - um, - for the device they're using. - So that's that's great. - That's the one thing that you know, - we we definitely if I have a massive screen, - I'm not gonna see just a 10 24 website anymore, - I will see something that it's actually optimized for the output that I'm using at that - point. - A second trend that I really like is the fact that Internet is going more content oriented - and definitely less visually overwhelming. - There's there's no more, - no more fear for like, - the horror back we it's actually the opposite. - You know, - White space is good as long as you know it. - It gives the content all the relevance that it deserves. - And it is funny because we actually I mean, - obviously the print decide has been there forever. - Um, - I feel like we're getting to a point where bring design and digital design is finally - coming together. - And all these amazing knowledge we have from print design can be applied to digital design - . - So all this stuff that you actually see you in a newspaper that makes you feel like you can - read an article in National Geographic magazine can finally be applied on the digital side - . - And that means we don't. - You know, - there's definitely, - like we're moving away off from all those like super complex navigation tools and related - articles, - and we let the stuff and we creating like more custom articles be where the continents came - on. - Example of this trend will be also like all these crazies. - Que Murph is, - um, - um trend that we had and the fact that we moment moving towards a more flat design, - Um seem And I have a little bit of fallen that I definitely enjoy the signing bookshelf - back in the days like reading hardcore with pictures, - and it was fine. - But if you really think about it, - um you know is definitely not about the craft is about how relevant and how is it the - continents to digest. - So I wouldn't say it's humorous ism. - It's horrible, - and flat design is great, - is the Flay. - It depends on the content, - and it depends on the project, - and it really is. - The focus should be on any visual. - Regardless, - Flat are full of pictures. - The focus should be on. - You know, - what can we make eso? - The content is king, - and it's over everything else. - The last round that I would like to highlight is the fact that relevant content is so - Michelle when is actually relevant for real. - And there's something of really, - because for a really long time. - I'm just so tire off, - like, - you know, - thinking about big portals, - like a year old who were, - like, - even CNN the fact that you did reading an article. - But they're, - like so many coal to actions. - And there are so many related information trying to grab your attention That is really hard - to read the article. - So we shifting towards this, - um, - this new scene where you know, - the focus is on on the article. - If you're reading an article, - if you're in the article page, - there's nothing around it apart from the article and only when you finish when you finish - actually, - like the flows on this side, - you get to the bottom of the page. - That's when you get, - like, - such essence of what to do next and, - you know, - just really practical examples. - Practice example is actually comparing the current New York Times versus hopefully what? - This sneak peek. - We've seen what the New New York Times gonna be. - That as long as we know it's definitely gonna get closer through this website. - They did last year, - which is this Know full. - And I can open it really quick. - You see how, - um, - if I scroll down. - We get to a point where there's nothing in the pate apart from the text, - there's obviously some like supporting information to this text. - So they give you like, - um, - context do, - let's say a character like a person. - This a video there. - But everything is Everything revolves around the article and on Liang gonna go really fast - only when you get to the end you actually get to see, - you know, - previous or next, - but you don't see that before. - And that's the magic effect that they respect. - The fact that you're reading an article, - um, - and they don't actually try to drive you somewhere else is flying. - So getting back, - I think this close up the first unit. - So thank you so much and I'll see you in tough to do 2. The Ideation Phase: - Hey, - guys, - Welcome to Unit to the ideation face. - So before studying, - I have a little bit of five this Kaymer on. - And that is that through the course off the whole class, - I'm gonna be covering some processes that you know, - It depends. - Where do you work? - Maybe they are cover by a specific role. - Seem that they signed apartment. - So, - for instance, - I might step in a little bit into what a product designer will do. - Some of the dynasty will be more related to an interface, - the center. - And maybe just at the end, - I will get into, - like, - purely visual execution details. - There are only relevant to visually signers. - But just because of my background that I could use to work with a small group of a group of - people, - we got to know actually the whole thing. - So, - you know, - just take whatever it's useful for you and yeah, - I hope that helps. - So with that said in this unit, - we're gonna be covering three ideation and inspiration face. - I'm gonna be talking about also some design principles and definitely showing some real - projects and real examples. - So, - first of all the ideation face this is definitely the most important face on any project. - It is really important that you get out of this face with a clear understanding off what - you're gonna do. - You know, - you normally might have already on assignment and that could be created a news reader that - us it is in this class. - But that might be your own assignment because you did take some lack in the industry that - you think you can cover through a nap. - Or, - you know, - in any case, - it could be either yourself or a client assignment. - But in any any scenario, - the ideation face is gonna is gonna be super important to determine if you're creating, - you know what you're creating, - and it is important that we spent a lot of time in this face on in this light as I'm doing - myself. - Um, - just to make sure that whatever we do is actually, - you know, - in few words in a nutshell, - it's actually great and awesome. - So, - for instance, - if we talk about video sites there definitely Tom's of video sites out there, - But in this aviation faces that, - if you know, - to create a video side is your task, - you have to ask yourself, - What can I do to improve what is out there? - And you know, - something's happened that you just say, - Did you see something new? - And you get, - like, - blind by how new and brilliant? - Iss But there's always something. - And the funny thing is like, - you sometimes only see that there's something that you could have created when someone will - that's it. - And is this feeling off? - You know, - saying like, - shipped. - I haven't in from my face, - but I couldn't see it so basis all the stuff we have to think in the aviation face less mad - men style sitting the couch lay down in the couch, - Get up again, - Go get a drink, - come back. - But don't stop thinking about this until you actually are sure that where you're doing is - relevant. - I'm sorry, - but this Lisbon want. - So in this aviation face, - you definitely This is like what Picasso said, - right, - Like, - expression is there. - But you have to find you working. - An inspiration is this is a friend of my said that in the talk, - and actually, - it made me think a lot. - Inspiration is the difference between great design and just okay. - decide, - and I don't think any any of us wants to make. - Okay, - sign that sounds pretty OK, - but he's definitely no greatly side eso. - It is important that we actually think about what we're doing before we get hands on and - just try to make something remarkable in one sense on the other and just to say one more - time, - because it really makes a difference. - And there's always one example that comes to my mind when thinking about you know, - these ideation face on that is flip or I'm I'm sure when the report came, - came up with the idea they went out for dinner and they had, - like, - the best night of their lives because they just thought about a concept that is just really - nice close up. - So if you look at people, - um, - I mean a service. - There is nothing new about it. - Me now with no all the operations that they have their stuff in a lot of stuff that is - awesome. - And you But you know, - the yes and so Fleet Board is just an RSS reader. - Eastern arrest. - There's with them for your iPad that is just more visual and take advantage is off. - Take advantage off all the like capabilities that you can use in your iPad and not even all - of them, - but at least gestures. - Um, - so if you compare flip or two and this is a really for compression. - But if you compare Freeport to the actual Google reader, - even though it's gonna be retired, - you know they display the same information you have. - You can start the content you can. - You can share it. - You can keep us read. - You can email it, - um, - it is the same content, - but there's definitely a craft based, - awfully. - So one care about how this Texas laid out how, - like the title is in the center, - and it's definitely the hair Chi is. - It's clear, - um, - and again does something. - And I really think that help, - but in my opinion, - were really like Make Flipper. - Amazing is the fact that just something as simple as the transition, - how they're connecting the different parts off it has become the name of the product, - and you know, - the product itself itself. - So flipboard. - It's called Flipper because you actually fleet the page, - and it's a simple is that and it's awesome and it's easy to read and issue city. - They just so that's that's great. - When thinking about, - um, - the product that were were doing the project on the ideation face, - there's definitely like some design principles we we should think about, - and I pick up on do that, - grabbed my attention and because they actually director. - But they change as soon as we look at them in the light of the success criteria. - So this is the same principles. - Are the hierarchy off needs? - And that says, - in order for the sign to be successful, - it must meet people's basic needs before he can attempt to satisfy higher level needs. - So if we just create like a visual presentation of this principle, - we see a big permit, - and at the base of it, - we have functionality. - So it definitely let's say we're talking about unusually there. - Um, - you respect? - You know, - the minimum requirement off that news reader is to actually display news. - You can agree. - So you know that satisfies psychological meat stepping up a little bit. - We have really, - really ability this Harmon end up basically satisfy safety. - So, - you know, - stepping on, - we have disability proficiency. - And at the very double fit. - We have creativity. - So obviously, - if you have, - if you're creating a mail service, - the basic things you should cover ist if I that you should be able to send and receive - emails. - Um, - but, - you know, - and then you will step out in the fact that the brother has to be solid issued and crash - should be reliable. - Um, - use ability. - You should be able to use it in a way that, - you know, - it becomes part of yourself and your behavior. - And you don't have to think about, - um, - what to do on them proficiency on creativity at the very top, - as something that is not necessary at first. - But he definitely had something on the top of the promise. - Another principle design that I would like to talk about. - His form follows function. - It basically says that beauty and the sign results from purity off function on also says - the aesthetic considerations in the sign should be secondary to functional considerations. - I recommend this book is somebody in the in the first comment I did in the course, - and I actually wrote all these books and so you're going to take it out But, - you know, - I think overall this two principles true, - obviously from a news reader you want to read the news and anything you need, - like, - aesthetic that gets in between you and a basic need on a basic requirement with brother - should be removed. - But at the same time, - you know, - we have, - ah, - we have the light off the success criteria on that said that when making the science - decisions focus on the related importance of all the aspect of the design, - form and function in this light of the success criteria. - So again, - obviously, - if you make him animal service or a news reader, - you should be able to read the news. - But their problem is that that is just not enough, - because that is out there. - We got to a point where is really hard to actually innovate in some specific products - because there's like a big separation in the market. - But that doesn't mean we can do it. - I mean, - obviously we have to set this fire's always like that, - the basic needs of the product, - and we have to make sure that, - you know functionality is there. - But if we just don't cover the top of the triangle if we don't cover creativity is not - gonna work. - So look at Dropbox. - I mean, - drop oak is an FTP client. - Their taunts off FTP clients. - There were tons when Dropbox came out, - but they just they just added some more stuff off the top of the triangle. - They just made it. - He's here to use wasn't the most important thing. - No, - the most important thing was the fact that I work. - But was it relevant on the light of the success criteria for this product to actually - become successful? - Yeah, - he was totally necessary just to wrap this up. - Just keep in mind that every time you discuss with your team, - obviously you need to satisfy your product news to satisfy basic needs. - But you should always push for the best experience. - And that might be by doing things that you will normally put at the top of the triangle. - And that is, - you know, - creating animations, - getting being like putting time welcoming transitions between the different sections, - everything that creates the best experience for the user. - Now we'd like to show you a couple of examples that I have the opportunity to work on - during the last years, - and they're definitely, - like, - really isolated examples off ideas we have within projects that we thought he could make - them stand out a little bit more. - Andi, - definitely. - Like they're like different considerations. - Like you can find, - you know, - assessed before Freeport is the best example of, - like, - an idea that actually becomes the main point of the product. - But that's not always possible. - Eso you Actually, - you know, - if your idea doesn't define the brother, - at least based on the design sex criteria issue, - definitely add to that success in one way or the other. - And that's what I want to show right now. - I have a couple of examples. - First, - is some lookups with you for USA Today? - So the idea on USA Today on the article page was to create the biggest, - um, - title of the article you've ever seen in a new site. - So if you look at the happy don't boast and you know, - sounds like that they definitely moved towards, - like, - a big title, - something that is easy to digest. - So we wanted to create the same something that you actually will see. - And, - you know, - you will definitely create the title before anything else. - So just you know, - if your example of that with a friend, - different components and then the story goes you have, - like, - obviously, - um, - additional content that complements the story on so on. - And once you finish you off, - obviously half like the previous story within the within this theme on the next one as well - . - And if you move a little bit, - you will see what relates to actually your current location where you can change. - But I think the point of this for me was actually to create such a big on both statement in - the article page, - something you have never seen before. - And it definitely drives you drive your attention towards the title of the article and - there was some power in that. - So they're like different, - different variations. - And there's another examples that are example I want to show. - And then it's, - um, - this interface I create for Nickelodeon for their iPad app that they released not to known - ago. - So this is a work in progress off the environment we were creating on. - I will touch base. - Don't touch base, - um, - on this framework in the next chapter, - but here. - I just wanted to show the idea we have for the menu. - So you will be actually moving on infinite rate. - You will move, - You know, - you move the screen by dragging on the iPad, - going to one place the other. - You can see how you have different content, - depending on the nature. - So sometimes he might look like a set of pictures sometimes is more like a video sometimes - is like a quick tweet. - But we thought it would be really cool if the menu is always the Zeppelin here in the top - left corner. - And every time you want to access the menu, - it doesn't matter where you are, - you just put it down and it actually turns off the light. - So the meat do this again, - you might, - And you just like, - pull it down. - New blacktop. - Now you in the dark. - So this is obviously a work in progress. - You know, - there is some other stages of this menu, - but I just wanted to to highlight this idea of like turning off the light just because - again is one of those examples that you could definitely say it doesn't at. - It's definitely not at the base of the triangle. - But you know, - these Renton, - like the small details that step by step little by little create really amazing product for - the user. - One less example I would like to present today is sexually a website with it not too long - ago at the Rio, - it's called Escape flat. - And he basically lets you Jews so gives you, - ah, - bunch of options off places you can escape the this upcoming weekend from, - you know, - really from your selected criteria. - So, - for instance, - if you care about the price, - you might select prices, - your, - um, - criteria, - and then it will give you results on that matter. - You can also select whether hassle and then you can add, - like preference system like culture, - food, - nightlife, - outdoor and so on. - So what I would like to talk about this website is something that is not really, - um it doesn't relate much to the concept, - but it definitely add to the user experience. - And that is where you've seen already at the top. - We have these drop downs, - and every time you change, - um, - the option, - it actually flips. - So the boards are flippen, - and you get to see how It's changing from the previous election to your selection, - the way that works. - You can see how the same change in values. - They said, - like a shine shining animation on the go button, - actually telling the user that now they actively go to actually select search with those - criteria, - your president and you actually get your results. - But just a simple as creating this animation. - And you can see how you know when you actually changing letters because with letters. - But if you changing icon, - it shows icon there are, - like, - fun. - They don't really add anything percent to the service but assay yusor you feel like - satisfaction would actually interacting with those elements and does the magic of the user - interface. - So that's something we should definitely always pay attention to. - And even though he said that tough the triangle, - we should never forget about it. - So just to wrap this unit up, - um, - I'm gonna be showing as part of the ideation face some ideas I had about the assignment of - these cars, - which is to designers are, - says reader. - So this is gonna be the first project on deliverable. - I'm gonna ask you guys to post online I would like you to, - um post This catches you have and the areas you're having on these are, - says Reader. - So we can just go three together and commented So the way I am looking at it on just based - on my own behavior, - you know, - I I'm looking at it from a really functional standpoint. - It's like the place where I will go to actually read my my feets and read my arse, - says articles. - Not as a place that I will go to actually get inspire. - So but this is just my point of view. - I mean, - please feel free to actually approach this assignment from the point of view. - You think so? - It's better for you, - for me is pretty much is pretty much it. - The thing with Freeport, - it really works in the iPad, - and it will be a beautiful a beautiful website as well. - But the way I I digest our service is is way we're functional. - So just grating a layout where, - you know, - we have, - like, - a big picture and then small components. - He will imply some sort off Cherokee hierarchy on the content. - And that's not the way I look at our assess. - Really? - Because I actually want to be able to read everything or just make sure I've seen - everything. - Assess Everything has the same relevance for me since I described so a little bit off - explanation on this screen you have top left corner. - You can see how I'm thinking about a new structure similar to Twitter and similar to, - like council different mobile apps. - Where you have a menu on left on that it's pretty functional. - It's gonna tell you only the feet. - You're gonna have, - um, - aside, - a central column that is really enticing. - And that is the one you're gonna be clicking or not to see the article because he will - contain a preview of the article. - So I've seen that pretty similar artist says we there to this one. - Um, - cold Reader R E V E r. - The problem is this enticing column and talking about, - And maybe we can see better in this sketch the enticing calling, - the one that actually has to inspire you and show you a little bit off. - A preview of the article is purely text. - What's the problem with that? - When I am browsing ourselves? - Feeds, - um, - just for the nature of the content that I actually subscribe to. - Their normally galleries off pictures on the title is something like, - um, - you know, - inspirational packaging this time. - So the title is not really telling me is no really, - like inviting me to actually say I mean, - he's really descriptive, - But if the article has pictures on it, - you know, - this ourselves called reader and I'm talking about fail to inspire me. - So again I would like to digest. - I would like to get inspired by preview of those articles in a way that it will be like - Twitter. - But actually, - as you can see in this sketch, - showing up any media content that I think on my half. - So he finished after you for an image. - If it's a preview of a video or something that, - you know, - it will actually drive me to tap on it. - So getting back to explain this a little bit more, - you can see at the bottom how is bursting for world this middle column that I call enticing - Call him? - Um, - it's gonna have, - like, - cut out articles, - and you will be able to scroll up and down. - Um, - the U. - S. - So let's let's move onto the next one here. - I'm just like it's getting out a lot. - All the different states that many on the left is gonna have. - So I'm looking at the layer, - and I am actually defining what areas are gonna be responsive and what others are gonna be - . - Adaptive? - No, - that that they just adopted. - So you can see how you know this many ways. - Definitely adaptive, - because it depends on fixed points. - It will have one size or another. - However, - the enticing menu is definitely responsive after a certain point. - So it's a mixture between responsive and adaptive. - And finally, - this functional breather off the article is definitely responsive. - And that will be the area that will increase the use of rice in the window so you can see - how the menu collapse armor will be like a mobile. - You Why? - But you can swipe to actually see the options. - Um, - let's move on. - And in this enticing column where you know is actually with the usual is gonna look t to - select what they're going to read. - I was thinking on specially touch screens. - He would be nice if we could, - like, - swipe it kind of like Twitter the way they're like swiping it roll. - And that will reveal options like at the favorites. - Mark s unseen or share. - It should be the way of approaching. - This is like super simple, - straightforward. - I don't want recommendations. - I don't want related feeds. - I just want to see the feet I subscribe to in the most kind of, - like, - functional way. - So more screens assess it before, - like different states in the menu on mobile and also like Omo will be at the stop normal - size. - Some details like when your school in the article and you get to the bottom, - issued a flea, - go towards the next one and so the same thing when going backwards. - So you will see always the next one in the previous article that make sure that they so - wish that continually on then user navigation, - the use of flow and they never get start getting to the end of one, - um, - journey. - But it's always like a continuous flow off unseen articles. - And this a pretty top level view how we have three main areas, - ABC, - on how those will show on a tablet so you can see how A and B on the tall in the middle - will be visible. - But see, - we display when you tap on one of those previews and it will display it will be displaced - layer on top. - Same thing for Movil with the difference that the menu being a is collapsed as well. - So just a bunch of different sketches, - random ideas. - Then you can see here, - for instance, - how on the many on the left I have some Parsons are like about that the adaptive on the on - the white access, - some other sort of responsive because they will have a feed and you will be able to scroll - down on those on some at the bottom again. - Options like outfit or a manager account will be fixed on, - therefore about there, - and you can actually also group feeds. - And so so I'm looking forward to see what your sketches and ideas are. - In the meantime, - please take a look at this, - and I think just the end of listen to think you 3. Sketching a top level Framework: - Hey, - guys, - welcome to Uni three. - Let's get him a top level framework before starting. - I have a little disclaimer again on, - and it is pretty much I just wanted to talk about how to decide when you see in visual on - the Grateful you know so far, - especially dedicated to the U X and Y frames. - Or, - you know, - went to go with for a show, - which is like Han Drone you X. - And you know there's not just one answer, - but I in my experience, - for instance, - if if I'm working on a project that is not it doesn't include many pages, - I might do it myself. - However, - if it is like a big portal or like a big corporate side that it has a leader, - a lot of different pages, - several different variations, - you know, - I might have a U X person with me. - Um, - just totally dedicated to the wife rams on the reason for it. - Um, - the recently is pretty functional, - and it's just because when you're presenting something toe a client, - you know they might need to prove these you eggs toe, - prove it and any any little tweak or any little change or any little comment they might - have. - You know that to improve it is gonna take longer if you do it in for show you if you do it - on a visual on the Grateful. - So for like, - a small project is totally fine just to the photo shop. - But as soon as you know it gets bigger than a certain point, - is definitely a night Mary, - if you don't actually work with that, - you X person that you know it's pretty fasten. - Can, - like, - actually tweet those things on the fly by using, - you know, - the show regretful or whatever that person feel comfortable with. - With that said, - what is the framework? - So according to Google, - there are two descriptions. - The 1st 1 is definitely not ours on the second gets a bit closer a basic structure - underlying the system, - concept or text. - So think about this system concept or takes a star website or us are up. - Basically, - the framework is the structure there underlies the up, - so it basically connects all the different sections in their on makes it just one working - piece. - So think about the framework as first and the navigation, - the navigation that connects all the different sections think about part of the framework - that will be any global component. - So every time you actually press himself Insect two favorite favorites that work across all - the sections is part of the global framework. - What I normally like to do 1% then framework to our client or just for myself, - is still actually room percent. - How those layers are late in a three D space and it doesn't really make much sense, - but it really help to understand the global ecosystem off the up eso you see, - like if they're stack on top of each other, - they might understand that they're like cars that stack on top of each other or this, - like many of the slaves from the left. - But it's on top of it pushes the content. - Those are like, - um, - you know, - top level pictures that the client or just yourself might have you, - my honest them just easier. - Another thing that I recommend when doing the framework, - especially for clients, - is to create a graphic with the ecosystem of the up, - and I'm getting to the next section. - We're gonna show some examples, - and I have something also related to this So this is I mean, - obviously the names on the right, - But take this is an example of the ecosystem often up. - So you have a home screen, - you have city, - and you can see the more you have must do lists and then you have, - like, - components. - So you show the whole ecosystem on how those sections are connected. - You know, - from this graphic and understand from this home screen, - I can go to either this section or this section. - I understand that. - You know, - from this section I can actually search, - and I can And I search in this three different with this different values. - And that might drive you to this other thing that is connected somehow All these - connections is at first heart on this time. - But when you actually start reading over just going through specific, - all the doubling down is pretty easy to understand. - So an example of a framework This is Ah Furley Easy one. - I create this camera for the iPhone, - and it is actually pretty simple, - but it works with, - like, - a few different layers, - so you can see how is totally no design. - What I'm doing here is just a matter off explaining how the different components work. - So we have here, - like the camera capture. - We have the iPhone, - and then we have I menu that slice from the bottom. - It's this one and I was the one that is at the top. - And, - you know, - whatever the real background is, - there is a very abstract, - but it really helps to actually understanding how those panels work. - Another example would be whether up I did a while ago that again you could stuck all the - sections on top of each other just to like breaking down all the layers that create the - user interface. - So we have using the friends we have weather layer, - daytime layer, - and then that creates a city. - And then we have, - like, - different city packages. - Another example. - This is a big issue. - Afghanistan. - So this is pretty much a proposal for, - um, - a video side campaign on, - and you can see how I wanted to explain that you might be in a video and there is attack on - a video. - And if you pressed attack, - this video component will slide to the left on you see here how after prison on the attack - , - it will move to the left and several EU. - No, - this video becomes about the time you just press. - So if I seem out, - you can see it both of the same time. - Pretty much video, - you tap on it And these slights, - and you can always go back to actually get back to the video where you were a firmly simple - interaction. - But, - you know, - it is really nice to actually go through the exercise off building created some top level - ux to explain what is going on. - Now I want to show you when is probably one of the most complex frameworks have I've done - and we're not gonna go in detail, - But I just want to show you, - like all the actually categories that I'm covering with this framework. - So in this case, - I'm going really abstract. - It was basically a night but up designed for Nickelodeon, - And we wanted to make um, - like a world, - you will explain, - Horace, - um, - you will explore horizontally on this. - Will will have, - like, - different layers. - So imagine we have that. - But here, - imagine. - You see the world through the iPod, - the iPad, - this a window. - So, - you know, - they're like some global components like the menu indicator. - And this is actually what I show in the previous episode. - If you remember, - and then if you continue looking through this window, - you might see these layer, - which is the play number three is the foreground environment. - So they're like Lums. - You know, - the roof there like people that are super close to the camera because they're in this layer - that is closer to your point of view. - The next layer is actually the content layer. - So again, - content on that is gonna be shown underneath, - which is like behind these components of layer three. - There's some details like you can slide up and down and so on, - and then they slather Layer one, - which is the backbone environment. - So again, - you can see there some characters there's still some content merge with with the Bagram - components, - and there's some interactions to be separate from interactions. - Three. - So excuse me. - So first ones here, - you can change the background off the call of the background. - You see some videos and so on. - This is, - uh, - a pretty complex framework, - and it gets even better because you know all what I was expending here on this isometric - perspective. - Now I show you how it works. - The floor seems to the iPod. - So all these layers, - you know, - all that complexity is actually encapsulated here, - where it actually doesn't look as complex anymore. - And that's the magic of it. - You know, - it's not about creating complex complexity because of just the sake of it is about trying - to explain the concept. - And then, - um, - you know, - obviously making it complicated just to make it simple at the end. - So we explain also, - they set top level menu, - and that's what I actually spent the previous unit where you can actually just, - like, - pull it and it will turn off the lights. - Um, - we explained that actually, - this environment that we're like browse in horizontally is modular and scalable. - So again, - everything is based on a template, - and they're like different templates. - One is one person and content that you can actually slide. - Particularly another template will be one full body person we'd like content on its left. - Then we have, - like doors that drive you toe, - take you to a different um, - room, - and we have a template without characters. - I know the temple with characters again, - An interactive template where actually actors will go and we'll do something in the glass - of the past. - So you have to actually stop it. - And so is the same component here with a different templates. - So in this case, - instead off, - um, - like para clean the glass, - they will be like taking out the, - um, - Islam from it slime. - Um and then obviously explaining how easy to a scale this concept and, - you know, - creating more templates if necessary. - A spot of the frameworks were explained. - How do we interact with the sections? - You know, - all the gestures we're gonna use, - So we're gonna say content by drawing a circle, - we're gonna actually open content by doing but like painting with your fingers painted back - will actually close content. - You can actually create like secret handshakes with some characters within some of the - windows. - You can move from left to right. - And again, - it is a sensitive, - like, - fairly complex. - So I'm just going to the worst case here for you guys to see, - you know, - how much detail can we put in the framework? - So again, - as in a sample of interaction week until the device, - but we contest rotated as well just to wrap it up this example. - There's some animations, - except, - um yeah, - example. - So character jumping, - as you can see, - is definite about this sign is about the showing. - How this is, - you know, - is a showing the concept off what will happen, - how content in this case will be revealed by, - like, - a character that jumps by, - like a door that gets open or by, - like, - character that runs and actually reveal the content its a mask. - So let's zoom back just so you can see it. - Ihsaa Pretty massive print work. - Um, - and it's a really top level description just for the client and another quick, - fragrant disease Easier. - I wanted to show, - um is just a website where, - actually, - you know, - I'm illustrating how the screen looks here, - the size and how this is gonna be always taking the whole skin of the size the navigation - from being at the bottom askew school down it comes to the top, - you know, - just going through some of the content. - We have kind of getting maybe a bit too much in detail here. - But, - you know, - just trying to explain to the client that how the sections are connected. - So this full screen image as you scroll down there's a map and you can click on some - pointers and it will slide to this or the map, - Um, - and so on. - So let's get back. - Those were some examples off frameworks, - and now I'd like to just go really quick through some must. - And don't that you actually have to do when creating your own framework. - The first thing is definitely think about the big picture. - Don't pick up on details and dump a couple content descriptions because, - you know, - picking up on details or content at this stage of the off the project might end up in - discussions you really don't want to have with a client just yet. - Now the point is to get this approval on the frameworks so you can actually move on, - like getting into details on specific sections. - But at this point, - you know, - tried to keep it really like top level and just explain how those sections were with each - other. - More than getting into details again. - What's the connection between all the sections? - You need to detail that like you need to explain how those sections are connected to each - other. - Oh, - and you know, - you things like a navigation like a animation in between was the transition if it is like a - physical connection in between them, - So think about like one section will push up the other, - or it will, - like common top all those details. - It would be nice if you could explain it, - reflect all the functionality. - We don't care about the content, - but we do care about the functionality at this point. - Sorry. - Days like, - um, - like a saving functionary like a starring something or there's like a, - um, - sharing all those things that might trigger like new scenarios is, - I would say, - important work with 100% funds. - I mean, - you might not even need phones, - but I just have somebody experiences in the past where some people will do you x with a - really, - really small typeface. - And you know this That's always trouble because they're doing a job that you can actually, - you can't translate to the sign later on. - The claim might approve something because they just they were just, - like move their worries to design. - However, - you know, - at this level, - you days any fun. - Just trying not to go too crazy with this isis and try to, - you know, - keep yourself closer. - The closer you can to reality life out of the box. - That's a funny one. - So I think maybe I mean, - this is exaggerating a little bit. - It's good to think out of box, - you know, - like as I always said, - the fact that he hasn't impossible definitely means that it hasn't been done before, - but it doesn't necessarily means that it can be done. - So I just encourage you to actually think out of the box as much as you can so you can - actually leave out of the box. - Tried the great new solutions trying to actually, - you know, - drop down for a main navigation. - Might no be the best solution. - Maybe this a cool job done you can do just like trying to innovate in those components. - Um, - obviously into navigation met methods. - A. - So much as you can use to show how all those sections are connected. - Plan for all devices. - This is actually pretty important with it before, - when sketching our ideas. - But even here, - you should actually think about you know how those sections are gonna be lay down on the - different on the friend output, - different screens and again, - just cannot like getting back to the first topic of official details is really important - that no one understand this as design. - But this is our overall description to run up this unit. - I want to show some really top level friend work that I've done on, - um, - on the RSS reader. - And I don't have much focusing on the different sizes that it could have on also, - like, - what part of the layout will be responsive What part of the layers will be adapted? - But I would like to actually one of the assignments from this unit for for you guys, - this is to actually create away more complete, - um, - framework off your idea based on the examples we've seen. - So I'm as I'm gonna show, - you know, - I'm just, - like, - um, - focusing on part of the layers their adopted adopted one of the layers that are responsive - . - But I would like you guys to actually work in a way that you can include animations and - decisions. - So I said said super top level not designed at all, - But we pretty much see the different sections off the layer, - you know, - and how the many on the left would be adaptive. - How, - Then the feats will go right on the right. - And they will include media, - if they have it, - and how the article will be responsive taking the rest of it with and we also detail. - I am so detail, - you know, - the height off the components. - What part of the components will be fixed on what on the part of the components will be - actually responsive to on the output. - This head of the browser, - Um, - again, - how will this apply to, - let's say, - um on output that is similar to a tablet. - More birthday, - golden horizontal. - So again, - we have this new version off the navigation that is collapsed. - But you still see, - like the main information unit, - and you can always, - like swipe to reveal more info on. - Then defeats take the whole scream, - so it's gonna be more inspiring. - And as soon as they used to click a one, - it will go to the second screen we have on the right where you actually will take over this - stack of feats. - And again, - how will this translate to a mobile device so you can see how their many a translator it. - We actually hiding it completely. - We just live a little bit off indicator on the left. - And that will actually let the user know that there's this money. - They can drag and reveal order than that. - The whole scream will be used for Theis. - Big section with previews, - Any they tap on those us in the tablet version. - You know you will come assn. - Article on top. - So, - Dustin, - Simon, - You know, - based on the ideas you has happened producing its it will be cool to see what kind of - framework can you create? - You can also make a site map if you want. - And yeah, - I'm looking forward to see what you can come up with. - That's the end of the list on three. - Thank you so much. 4. Building a Grid: - everybody. - Welcome to unit for live Integrate in this unit, - we will cover the definition of a great components that make a great great specifics From - what design? - Some common factors between great for Web and print design are real examples that I worked - in the past. - And finally I'll go through the great actually built for their arses reader. - So what's a great and why do we need it? - Well, - one definition of great is framework off space, - bar their apartment two or cross each other a grating, - but a definition actually like better. - Is this one from Wikipedia? - Pretty much a typographic, - really said two dimensional structure made up off a serious off intersecting vertical and - the horizontal access used to a structure content Well, - you can you can actually, - really on the screen that pretty much agree this this and you can see how I'll explain all - the components further later on. - But just here you can see, - like some of the components that make the great So you see unit easy columns. - You see a baseline and so on. - Pretty much this greatest helping me right now to organize this firmly simple framework - which is just what I'm using for the presentation in a way that is easy to absorb and - structure. - There's this quote from soybean in his book, - Order and Disorder that says, - Since time immemorial, - everything mankind has perceived has been subject to continual search for order. - The book is totally highly recommended, - especially for this section. - You pretty much talks about greet it's region and the reasons behind it, - and it also applies them to what the same later on. - But when I when I read this quote, - I actually thought about this tumbler blow that I really like. - It is things organized neatly, - Um, - and this tumbler is pretty much about like taking pictures off objects. - They're pretty well organized. - And there's some visual pleasure about, - like, - seen this picture. - Um, - so this ask again, - What's a great And now why do we need it? - Main reason is it makes the difference. - You can really tell when any sign has been done, - but use integrate or where it hasn, - and some people are really, - really good at that. - And, - you know, - I met some designers in the past that never use secret, - but they were just, - like, - really specific and really metallic and how they organize their incompetent. - But in reality, - you know, - if you can actually use a great you're gonna say Tom's of time when organizing their info - and building the layout on, - do you know, - it is really important to actually have a great that help you actually working. - Some people take this like, - Okay, - I have to use secret, - but, - you know, - they almost spend more time up. - They didn't agree to their needs then then actually, - you know, - saving time because they're using a great. - So it is important for you to know that, - you know, - a great is the result off previous research and the previous thoughts on what you actually - gonna build. - And once you have that in mind and it's fairly clear, - the great is gonna help you all the way to make that happen. - And this is an example of the arsons reader. - I'm building this an example for the class, - and you can see a little bit of the create I started building. - I actually explain this further later on, - but just like a brief description, - you can see how we have on the left thes main coming with the feet and that is taking, - like, - one Collier made of two units. - I'm gonna have, - like, - some margin with, - like, - this pattern just to help myself. - How items are gonna be your line. - And I'm also marking what is gonna be mobile devices and phone size and also like tablets. - And those that I explain later are, - like, - different, - like break points on the responsible after creep design and build them, - um, - resource we also need to create. - And this is again court in Caribbean. - In his book order in this order greets at order continually and harmony to the presentation - off information on frequently high density webpages. - And in that send andan example would be USA Today again. - So in this article page, - I'm using a five common street and you can see how everything is being organized between - you know, - within those five columns we have in the 1st 1 actually of serious story updates and then - stick on thing goes in the other ones. - Another reason will be greets. - Health yusor splenic worth different information from page to page floor from behavioral - state to behavioral state, - which aids in the communication of that information and using the same example is before we - have five columns and we used is that the three in the center just to display the main text - And then we're gonna use the 5th 1 on the right to display additional content. - So again, - users that they go through different articles will understand eventually that the Fifth - Column within the article view is gonna have always like pictures and video batteries. - Another reason greats make it easier to add new content to a website in a manner that in - American system with the overall vision off the regional website. - So again, - I mean pretty straightforward, - like pretty much we building a website that has to be updated and as everything works - within a great you know, - later on we wanted that. - I think more information on new modules. - It will be fine as long as we stay to that credit. - Another one groups making is here to plan for different Mr Dissensions off the same content - while keeping a comprehensive structure. - So this country, - well with this responsive and adaptive grid, - because as we build in this website that laissez has a great we know we will plan with it - within the grid. - How that website is gonna look depend on depending on the Buber size. - So it doesn't matter if it is 9 66 40 Whatever. - It always will keep the same consistency and this in the same look and feel. - All right, - let's talk now about the different parts of a great So the minimal, - the smallest division on a grid. - That's what a school unit a unit is normally to think too narrow to actually contain or - like house any textual content. - So that's why we combine them into columns. - McCallum's is a group of unit that you can see, - and they basically combined together to create. - We call workable areas. - So in this college we can actually have content because they're like white enough, - and they actually combined themselves into regions and regions. - Is that group off columns and, - you know, - at the end they form page. - The next component is the baseline, - and I'm really I know about the best land because it is really, - really, - really important when you actually build like a layer of what designed to use a baseline. - It really helps this pit due to actually measure the spacing between lines and especially - between blocks off characters. - When you change in the typography, - it's gonna say, - for instance, - the space between a title on the body copy right below that is super helpful to have the - basement, - so please use it. - All right, - so the next one is gutters. - The gutters are the empty spaces between units and coins. - You know, - when the unit's recombining cummings they absorb. - They got her within them, - but they don't actually get the one in between the one that separates them from a different - unit of from a different column. - And the last one is the pattern on the market. - So margins are the space outside a unit or column and putting is the space within that unit - or column. - And you might know some of these appear like familiar with HTML and CSS because these are - like properties you can actually work with. - That's pretty useful. - Next This greet specifics for Web design. - Well, - needless to say, - greets are really old. - No. - Then when you see now on interactive, - but obviously they have a legacy off printed sign and before that, - they have a legacy of like painting on drawing so on so that we have ah really, - really long tradition off greets. - But when it comes to interactive is definitely a whole new world. - So I would like to highlight a few things that I think are specific for Web design. - The 1st 1 is dynamic layouts. - So we actually have to build great for unknown view, - precise. - And in that sense, - we definitely don't know that with because it definitely depends on the user on the - platform. - The user issues at that point. - And they're like this. - I don't want to say trends, - but like different solutions that we found the problem and we could divide it in adaptive - and responsive design. - So just describe a little bit Adaptive is actually designed that works with fixed break - points. - So think about I have an example for you. - Think about this'll a out the cats who coat so it is fixed because it has, - like, - different break points. - If you resize the window, - it actually changed the layout when you hit one of those break points, - you can see here, - but nothing apart from that. - Nothing is being precise. - So it doesn't matter, - you know was the size of this of this as long as you don't reach the break point, - you know it would remain like that and responsive decide in the country. - I would like to show it to show it by showing this example, - my friend Israel Pastrana So is pretty much at the sign that actually resized gradually - with the browser. - So again, - you know, - this is not something you sirs will do. - Recites that we know there's no point in doing that, - but this Make sure that, - you know, - regardless your tablet is an iPad or a Windows tablet or whatever there was solution might - be different. - These will make sure it actually looks great on at the same time. - It also has spread points so you can see a break point here is to make the menu collapse or - not, - so it definitely is a mixture between the two of them. - So moving on, - think mobile, - the smaller the screen there bigger than tanks and discounts within Because, - um, - yeah, - definitely. - Right now, - the moment we live in mobile devices says have a bigger or more density more resolution - than desktop screams. - And I'll say as an example, - like, - your desktop screen might have, - like 72 in just a point for interest, - while your mobile device might be even double. - So because of that, - if we have a text with this size of 12 points, - when your desktop and you translate that into mobile, - just like that is gonna look really, - really small. - So just think about mobile devices is something users obviously take with them and they - check on the go. - And definitely the Texan needs to be bigger. - I think that sounds. - I actually check this just like a random portfolio where I checked on my mobile and I could - see like just the text was really, - really small. - And, - you know, - think about myself in the subway or so well is not something that you might feel invited to - read. - On the contrary again, - one of my favorite websites at the moment 1,000,000 dot com, - you can see how just the farm is way, - way bigger and definitely nicer. - And he's here to rate something. - I also think it's unique to Web design is the fact that we decide for a non content density - . - So if you compare a magazine, - you know they obviously have already a framework, - a style they have to follow like in every different article, - but at the end of the day, - they know what the article is. - So, - you know, - they they work with that knowledge. - However, - run interactive design we built, - we build the framework we actually build in the framework for, - um you know, - whatever their article of the journalists over, - whoever wants to post and it has to work for all of them. - And in that sense, - I would like to talk about two different scenarios. - The 1st 1 is overview pages. - So think about the main home page off a new site or a portal site. - You're gonna show, - like, - different articles you have in the page. - But obviously, - you're not gonna show the whole thing. - So you know, - you might show just like a snip it off the title. - And maybe they're subtitle. - And in that case, - because you gonna at some point you're gonna deliver this project to somebody, - and that person is gonna use it. - You just need to be, - like, - really specific. - Um, - you know, - when detail in things like the character count, - you have to say it feel How was the maximum number of characters that that fuel can - accommodate and just have to let them know that if they go over, - you might have to make ellipses in that content. - And I have a couple of examples of that one is, - um, - this prototype for USA Today And you can see, - you know, - this is obviously this home page where you actually have a title at the outer on. - Yeah, - more covers. - And if we scroll down, - you know, - all these guys here are these guys here they unique to actually set up a maximum, - Otherwise, - you know that he signed can go shape. - But that doesn't mean, - you know, - you don't have to be really. - You have to be also, - like, - a little bit flexible. - So you know, - it cannot come on that a minimum off this specific one of characters and a maximum of this - on the specific. - And in this modules, - you can see here how have in I was a little bit flexible, - so it could be like two lines. - It can be one line, - but the picture on the left, - it could be like whatever it is a model for sports with two lines and sometimes Iranian. - You can go to three lines and so on it needs to be. - Obviously, - you need to account for everything as much as you can. - Another example would be these other proposal for Google, - plus the brown pages. - So again, - this is says the overview page. - So if you're gonna talk about, - you know, - music, - for instance, - or whatever you have to articles here and the title Stary can be up to +12 maybe like, - three lines. - But then you start writing the text, - and we don't know what that text is gonna be. - But we need to. - Actually, - the limited was the maximum that that's gonna be eso. - Actually, - where was gonna work with these framework can take care of it. - So getting back the other different scenario wanted to talk about is the detail page. - So here's a different scenario, - because before we actually couldn't contain all the content of the article but in the case - were in this case, - we actually have It is our responsibility. - The theoretical is, - you know, - can fit perfectly in our layout and actually look good. - So some examples in that sense are, - um, - just like, - different things that will over time, - this will be one of them, - you know, - Actually, - this is like a pretty sure article view where you actually can see a title and you can see - how this title, - in case it gets to two lines. - It would just push the content down. - So everything is flexible in a way that if it is longer, - it just pushed content down. - Same thing for this, - like really short interaction and same thing for actually that. - Thanks, - Tom below I know the example will be This article makes for USA Today and again it's just a - matter off, - like reading different modules. - So actually, - if the company's short like that is almost the worst case an area that the continents - really short because if it is long you just have, - like, - tons of different motives you can combine. - But if it is sure that can happen, - you also have to be ready for that. - In this case is pretty long as you can see it. - So you have like this that can be longer. - It will push the content down. - We can have, - like, - quotes that will make the content go around them again. - Breaking the body is to make it more playful with like quotes or whatever And then also - finally, - this came around here. - Another one will be, - um So here, - for instance, - you know, - if you're, - like, - browse in this page and you, - actually, - but this is it to see your like browsing, - this page is called down, - and you actually want to click in one of those articles you tap on that book. - It opens its an overlay. - And now, - obviously, - you know, - this can go down all the way. - But if you actually we created this system that you can comment on specific, - um, - lines kind of like the way medium is doing now. - So, - you know, - you will actually select the line here book, - and this panel will come on again. - Comments is not something you can actually, - um, - you know, - like cut. - They have to be there all the way. - So again, - if this gets longer, - it will just get longer. - Now, - getting back to presentation, - it is important to be playful. - There's something like, - I will explain that further on us. - We move on, - especially on typography. - But, - you know, - it is important to actually organize the country in a way that they use for feels like - actually reading it all right. - Another specific on Web design for grits is typography. - Fullbacks. - So this is definitely changing with services like Type kid or Google phones and so many - others. - But you know, - pretty much before you will establish one of those like weapons. - And if the user it doesn't happen locally in their computer, - uh, - you might select like a fullback for the topography for the phone. - And so, - you know, - times in romantic will go to a different, - different serif and so on. - And the only problem that you can run into when doing this is like the typography mile be - maybe, - why they're so again you just need to actually build. - Agreed that can come with a different, - um, - with off different types. - And you know, - that's it is really important when you actually think about a typographic composition, - because that can change totally if the phone actually is no, - the one you intended to be. - And the last one is. - Obviously, - phones are being rendered by the browser. - So again, - this is something that is becoming more standard, - but it's still sometimes with the signers. - We work in our to like photos show, - but whatever and they have, - like, - different ways to render phones and they look beautiful for a shop. - And then you actually see the phone on that a specific set on the browser and it doesn't - look that good. - So it is really important. - As you go on, - you design your projects to actually be actually test your faults in the browser all the - time. - Well, - so we actually talked about the difference. - But let's talk about the common factors, - because in reality, - you know, - digital actually drinks from the legacy the previous I already have. - So it's not like we coming from, - actually know where we they really Spain credit already we just using it. - So began lay out rules on every size, - every every different science we can have Doesn't matter if it is a mobile device or tablet - or that stop. - You know, - the layout rules are always the same. - And you know the fact that we need to read that content on the layer used to be nice - applies to every every size and then obviously typographic and readability rules. - It needs to look good, - but it also needs to be easy to digest from the user. - And, - you know, - we still pretty much targeting the same user group humans. - So if something, - if you can read something on a page, - it doesn't matter. - If you see that on the iPad, - it should be a still Assisi to read, - as you know, - on a physical actually platform than just a scream. - So how do we make this happen? - They're two quotes that are really like in this regard. - The 1st 1 said, - the simpler the great, - the more effective it is totally true on the 2nd 1 is each problem requires dedicate a - solution. - That is definitely not just one solution for everything, - even though there's some guys nights, - Frank. - But the reality is like, - if I finish the unit just like this, - you know, - you might not have, - um, - a good opinion about me. - So let's talk about some real examples. - Now we can see those grates. - The 1st 1 I would like to show is the terms and conditions page on skate flight. - So you can see here the grip I used when we actually build the site, - you can see how, - like the Tobar actually gets to use, - um, - like a couple off vertical units, - half but it's pretty much everything is a line on the baseline. - Then we have this yellow area that again you can see how it fits perfectly on the create - and as we go down despaired, - ensure how even the buttons and this takes. - Everything is sitting resting on that baseline on that really helps to actually create like - the space. - And that is nice between the title on the body of text. - So for the button as well, - so is pretty much about, - like following, - obviously on this baseline and also like, - you know, - I bill two regions. - So it's a fairly simple great off just two regions, - one discarding when you have the menu. - And this one the actually body of tex, - where you have, - like, - all the content. - So that's one another. - One is the detail, - overly so. - There's nothing more complex, - and I follow it at some point. - But some others I didn't, - so you can see how again, - like obviously the Khobar and the framework follows perfectly, - all the content to be like on top of baseline, - even the weather conditions as you move down here. - I just needed to go more in detail, - so I'm actually not getting to use the baseline that much, - but as soon as I can hear everything, - it's actually perfectly aligned and he creates, - like, - blocks of content, - an example of, - like, - character count. - So when we build actually this clocks here, - um, - I we have to give them, - you know, - the defendant person also, - like the eternal team, - a maximum number of characters they could actually, - this column could actually have main reason is we're have much time for, - um development and also resides in the large amount of pictures we have for all the - different destinations. - So we aimed to actually have, - like, - this maximum, - so they will actually always work together really nice. - And you can see how moving on again all the areas are like, - really like snapping to the to the great all the time as much as we can. - Another example will be again The article page I showed before So you can see how they hold - them. - It works with took Ritz. - One is five columns and another one is just two columns. - So again, - here is five. - You can see this is taking one this blurb human That quote takes too. - If we move down. - Now we have this, - like additional content there that takes the fifth column. - We break in the three columns on the center sometimes by putting content like this and - right at the end, - you know, - with you by the company just to with more stories next door is in the coverage and finally - with four modules, - like more content from your city. - The last part of this unit is the R. - Says reader. - I wanted to share with you guys my progress on the design and also like the great that I - built for It s so what you can see on the screen. - If you remember my friend work, - I was actually going to do by the screen in in three different areas. - So when will be the list off all the feats use Describe when you can see the new post there - are available. - You could see like your favorite. - Or you could just see like a list off feeds. - Another central Colleen will be, - um when you actually you know, - when you select a specific feet, - you will see the news listed there, - but you won't see just the name on a little bit of the description, - you will see. - Also, - like any media content they come with, - um and then you will have this area on the right where you actually will see the article. - So I'm gonna jump two for the show, - and that may be easier to visualize it. - So it is a little bit like reader is doing. - I'm just not really happy with some of the functionality. - Is they have. - So, - for instance, - for me, - this middle column is really important to actually make me decide to read an article to - have been an article or not. - And just because I I'm subscribe myself to a little feats that, - you know, - they don't really have a relevant title. - Maybe there's, - like, - type inspiration. - Um, - so you know, - is no really enticing is not really actually making me click on that. - So I wanted to show a little bit more either media video they have here, - so I can actually, - um, - you know that problem to click on it, - But that's pretty much what I explained. - We had this column here where you can see your feet. - You can see a new post. - You always considered favorites, - and then you see individually defeats use described to. - If they come with an icon that will be visualized if they don't, - we'll have, - like things like that. - It's just like a default. - I come for them specifics on this that I thought it would be kind of cool. - You will have, - like groups. - So you can always track this one internal there, - one and they will get, - um, - there will become a group does, - too. - And another thing I wanted to show is the fact that you know, - you have this number that tells you the number of articles you haven't read on that feet - and you know, - dependent. - If you don't have any article on the fifth, - you will see the title like this kind of like them out. - So you know it's empty. - If you have articles posts to read, - it will be a bit more highlighted. - So you actually know there's something there. - Another visual indication I wanted to do in in that sense was the I come like I thought, - it will be actually really cool if let's say you read all the all the posts in, - not for paper so the icon will actually disappear and will be shown as like a tiny circle, - but it's only as soon as you have one. - You need to read book. - It will provide. - It will become big again on. - The reason for this is because I want to show them. - You know, - this column when the left has two different views, - what is expanded and the other one is collapse. - So when he's collapsed, - You know, - you might not care that much about the text about the title because you could upset because - just, - you know it will get that it will be that size several into your screen. - You can always expanded, - though, - But if you collapse it, - I wanted to thank all the textual content out and just leave a visual indication that might - let you know very soon article that you need to read on that feed or No. - So, - you know, - by having it like this, - you actually get a really quick idea off the feats. - Are you already read and those that I still have, - like, - outstanding item for you to read. - So those are some ideas. - And then this guy here and just like the signing, - you know, - different modules like does it come with a picture. - It doesn't come with a picture. - It's just the text. - It just it takes with the scripture and so on. - Let's dive a little bit into the cream. - So what? - I thought for this, - you know, - it, - really? - We have this unit here, - and it really doesn't matter of the number of units you have, - because I'm planning for this to actually adopt, - do whatever the size of a solution off the screen. - ISS. - However, - there's some adopted components. - Is it is like the, - um the feeds many here. - It will depend on the size of your screen, - all your device that will be shown completely or not. - And there's also like a web, - a phone version where it will actually be collapsed at first. - So, - you know, - I think those the number of units actually doesn't matter. - But it really matters that we are aware off what is there with off a phone? - So I'm taking us a reference that I found 6 40 pixels with and also a tablet. - So again, - I'm thinking it's a reference, - um, - the iPad, - um, - with, - um as well on in that sense, - obviously, - you know, - it's just not a matter of like showing the content from but actually doubling the size when - you get to that device for real. - Okay, - so you can see just just talk about the different components we have. - As we said, - Um, - I always like to actually mark a little bit the baseline and then I remarkable anymore. - It really helps me to organize visually like this space in between type and sometimes in - this case, - and actually did it even more deeper without five pixel separation. - And then we have the units and then I'm creating. - I like to create markers for, - like, - patting within the units. - So if I see, - um, - you know, - this fits many. - You can see how all the items are left aligned to that part in within the unit, - that's for me is really useful, - and he really helps me to actually keep it like, - snappy and really organized as well. - In that sense, - I was have the same on the right, - so that's a maximum, - like the text should never go behind beyond that point. - Otherwise, - it will break the margin departing within the unit and you know it will look like clatter, - so that's important. - Also to tell the developers we have the same kind of like Mark in highlighting the parting - within the unit and this for this column article. - So again, - you see how neither the images or the content goes before that part of it. - The only actual content that goes that comes we will be with before is the search feel. - And it just doesn't like half, - because otherwise, - you know, - you have to actually think about the type. - It nearly it really needs to breathe a bit more than X ray some of the components. - So since this is like them out, - it is fine to actually not follow the same pattern. - In my opinion, - um and then same thing on the right, - just to make sure, - like, - not takes girls, - they're the only finished again. - The search field. - It goes like half of it. - So that's this text. - The thing about this Texas like it only shows up when you hover the article. - So you will see I'm still working on it. - But we'll have, - like that date where this was posted and also the options to make it to market its favorite - . - So you can actually, - really later all right. - So that's my progress on their asses. - Whether and I would love to see yours, - I got oppose this. - Great. - So PST is when you actually can use it Or just using this a reference on your assignment. - Thank you so much. - And I'll see you in the next unit. 5. Typography, Look and Feel: - everybody. - Welcome to Unit Five topography and look and feel after Sure, - introduction will cover the basics off typography and a section I call. - I would love to read your texts. - After that, - we'll go through, - Um, - where am I at with their artists reader, - which is the assignment for the class. - So a little bit of interaction. - First, - I was actually watching this keynote by Jason Santa Maria, - which is one of the X Create directors off type kid. - And he was talking about web typography. - And there was, - like, - several things. - You said that. - Actually, - I thought they were pre interested, - and the 1st 1 was like, - If you type is bad, - did he sign fails? - And I think that's really true in reality, - if you tell me about the sound fields. - But he also said that you know, - is not about How about is the type is Abbott is about how bad is the use of the type. - So in this sense, - you can see in the screen how amusing comic sense. - And I was actually pretty surprised when I changed the topography because I actually was - expecting horror of look to it, - and I might say I don't dislike it so much. - I mean, - the stills comic sells, - but as long as you keep a right spacing and you know the right herky is definitely the use - of the type of what makes your design fails on top off your time selection. - Another quote by day symptoms from Santa Maria that I thought he was with irrelevant is the - type is an important decision to be considered in every step off the design process. - That's really important. - And, - you know, - it's something you actually decide at first. - But you actually need to be flexible enough to revisit your decision through the design - process just to make sure that you making the right decision. - And this is a quote that I just came up with and this is text is meant to be read. - Was the reason what these things mean? - Well, - I'm one of those designers there for a really long time, - you know, - I will always say, - like, - Oh, - nobody reads the text, - they come on, - nobody reads the text, - and that's true. - I mean, - nobody just checks. - But the only reason why users don't read text it's because we don't treat the text with - respect. - I mean, - if you want thanks to be ripped by users, - you actually you need to put more for on at them, - you know, - making the type release more and, - you know, - hard to see you know that they're not gonna care about the oldest side. - They're not gonna It's not like, - you know, - this famous book don't make me think it says free. - Much like users are not stupid, - they're just lazy. - So let's treat the text with respect. - And, - you know, - let's make sure that all the victory having the screen is actually readable. - So in an example, - in that sense is they Wikipedia website. - This is a for Leo website and it is totally responsive. - Their problem with it is it has a really liquid layout, - and it doesn't it doesn't actually use percentages. - It just goes all the way. - So all the area where you can read now, - little Medina, - you know that will get a stretch with your browser. - And I personally have a really big screen, - and I tend to have the browser taking the whole screen. - So when I get the situations like this, - you can see how the measure off the line is so big, - it's like four times the recommended measure for this text that is really hard to read. - So every time I get into the Wikipedia, - I actually have to resize the browser because otherwise I can I can read the text. - It is really hard to follow up with the text when we have such a big measure. - So let's go through different basics off typography. - As we said before, - I think in Chapter one, - typography can be defined us. - They are on technique off arranging type in order to make language visible. - So, - you know, - basics of typography will be all those different components that make type visible. - That makes language in a way that users can bring it. - So I'm gonna use this big, - big paragraph as an example for like actually describing all the parameters. - So the 1st 1 is measure. - Measure is the left off your line They sent recommended measure of like 60 65 characters on - . - If you get over that, - it just becomes like a Wikipedia example that is really hard to follow. - Another one is leading. - Leading can be described as the distance between the baseline off two different lines - within the same text. - So that's why you can see in this example that we have a big living in the main title. - Because just that you know, - the base that the living between those two the distance between the baselines is bigger, - but it's you go down to the subtitles. - You can see how the linen small within that block of text, - and it becomes increasingly smaller with the body text. - Another concept is tracking. - So tracking is the distance between characters, - Um, - as seeing this a group. - So you know, - this is a bit of it confusing when you actually think about tracking and turning. - But think about tracking. - It applies to the whole block of text so you can see an example here on the left, - this whole paragraph with a tracking off 10 points comfort to the same hope. - An aircraft with a tracking off 50 points. - In that sense, - another concept is Kerr name. - So Kernen is the specific space between two characters, - so tracking is like a top level. - It applies to the whole group. - On Kernan, - only supply only applies to their relationship between two characters. - So you can see how on the left. - We have the same tracking forwards, - and you know, - they're like tricky characters like a and why or a M V in this case, - or W and A that require on a specific Kernan on that turning is not applied on the left, - but you can see how it is supplied on the right, - and it just looks better and another one is hanging punctuation. - Or I think it's colors well, - Rommel, - punctuation. - And that's just, - you know, - you need to make sure that any quotes or punctuation you're having in your text, - it gets out of the crate out of the measure of the line. - So if you have this calling Mexicans, - he here. - Just make sure you don't break the alignment by having that quote inside the column. - And that's actually pretty see thing. - You can be in for a shock when writing quotes. - I know the concert. - Ragin. - So Ragin is actually you see how the measure off the land is one specific. - But as everything is left online, - you know, - some lines finish before some others. - It depends, - was the last worries. - It will go a bit more or less so we have to try as much as we can. - And that's also like one of those pretty fine options in editors like Photo Shop or - Illustrator to make the Ragin, - the more that the less extreme we can to make the lives, - the more consistent that we can. - So it looks just better. - Another concept contrast. - Contrast. - It pretty much, - you know, - defines how attacks should show up if you have a white background or, - on the contrary, - a dark background. - So that's a quick, - um, - rule of thumb. - If you have the text on a dark background, - the tracking and the leading off the text should be bigger. - However, - the weight off it should be smaller, - so it's really hard to see because that's why we do it. - But here you can see how the main title, - the quick brown Fox jumps over the lazy dog on the left hand side is really really ball, - while on the right is semi ball. - And it's really hard to see because that's the point off. - Um, - the contrast. - You need to decrease the weight off the funds or otherwise it becomes too bold A and it - doesn't. - It's not easy to read anymore. - The same thing for the subtitle. - Comey's For whatever lollipop. - You can see how the weight off it is is, - um, - it's less heavy on the right over dark, - there on the left over, - just like a white background. - However, - when we get to the body Tex, - you can see how I increased the tracking Onda. - How increased the leading off the lines. - And that is because if we just keep the same over a black background, - suddenly all the characters get really clatter on is really hard to read a text. - So that's why is recommending from a visual perception standpoint, - toe actually increase the tracking, - increase the living and decrease the weight off the fund of the type hierarchy? - Well, - I mean, - we use sizes in order to make the stakes readable and in order to actually highlight - specific hierarchy. - So what do we want the user to see first, - when they look at this chunk of text, - the first thing we want them to look is obviously the main title. - So that's number one second thing will be the subtitle. - So that's number two, - and you can see the hierarchy and the weights and off those like I faces are like way, - way more relevant and, - for example, - what will be the third thing I would like to see, - which is the author and the date, - even though that might not happen just because the way users read in, - you know, - Western countries where we read from left to right, - we tend to draw a ness. - So author and they will probably be the first thing they will read. - However, - the hierarchy and in terms of weights and colors, - is telling you to read a text first. - The next section is called I Will Love to read your text as long as you want me to. - And this cause back to goes back to what I was talking about before about like the signer - saying things like or nobody read the text. - Actually, - I mean, - people read towns of text, - but what you can expect this so want to actually read Thanks you don't even care about. - So, - you know, - as long as the signers care about the tax and trying to make it as readable as they can - uses will get to read it. - But where you can pretend is to put the chunk of text with no love and no break points and - no attractive to it And, - you know, - try to have a user actually going through it and bring it down. - It is probably not gonna happen. - So the first, - maybe the first thing we could say on the senses, - like break it down, - make account. - And that means like, - if you really want uses to read it, - you have to break it down. - You have to articulate that text in a way that is totally interesting. - And an example in that sense is the about page I'm I have here off escape plan. - So, - you know, - obviously, - as every signer of this project for to make their about page is pretty much I got like a - dog file and that says there's obviously all the text that would go in this page on the - fact that we will have a video. - How can I make that attractive? - Well, - you need to create like a new order you need to create, - like a hierarchy off elements. - Ah, - hierarchy of things they used. - It's gonna go through. - So first of all, - if you get to this page by clicking, - you know about you will come here. - The first thing you read is Now let's talk about booking flights. - So there's like a statement. - That's the first thing you read. - Like Now we're gonna talk about booking flights. - This is what this page is about. - It's not about anything else is about booking flights. - And if you continue with them, - so you have the videos, - you can click on it. - And then do you know this feeling when you're stuck and then pretty much explain what the - project is about, - but it explain it from I really like advertising way, - you know, - It's really like it makes you excited about it. - But let's continue. - So then continue with the text is like a normal flow going up and down. - Then, - when you have the world love, - love, - love, - love, - love, - LA you know you read this block attacks that's OK. - And then we believe this is more away. - So take it out. - Now let's talk about booking flies. - We believe there's a smarter way I'm following. - I'm using the same phone. - I'm actually this is at the same hierarchy, - so you can actually connect those two and not with this text, - and you still get the idea of What is this about? - And after this motorway, - we get escape light, - and then we call it skipped life. - So here, - you know, - purely a text. - You can breathe it you can not ready. - You know, - it's about this. - You know, - it's about traveling from here to all those places, - but still, - you know, - it's a free service, - and I could have break this down even more. - But there's definitely a balance when you actually you know, - you can actually break it down even more because otherwise it becomes like a Tarantino like - a serious off pictures. - And there's nowhere we trying here. - But we basically we have to divide the whole text. - We have to the main points. - So again, - we believe this is smart away. - If we follow the hurricane, - we call it escaped flight. - And if we follow the hurricanes like if you don't know where you want to go, - great. - You respected the type of person we're looking for so you can see like even just with the - titles were created Generation to make sense on drives the use of down. - So, - you know, - you're the one type of person we're looking for just kick back. - Tell us what you're interested in and will on. - When you want to leave, - we'll take care of the rest. - So I'm Amy. - And here I'm thinking about tell us what you're interested in on. - These icons here are actually your interests. - Are you interested in nightlife? - You interesting food, - exploring themes, - you know, - shopping. - I think that was a luxury. - I only ever with this anymore. - Like romance, - things like that. - And then it's like the next one. - You're exactly the type of person we're looking for. - A better search. - So now we described, - like describing, - giving big statements or what is this? - A better search is about providing blah, - blah, - blah, - blah, - blah, - blah, - blah. - You continue. - You know, - like I am highlighting the sunshine above all else. - Excuse me on dissension actually get reflected here. - Whether I killed social consumption, - everything is connected and then continue describing simple on visual weekends. - Only starting now so you can see how the whole flow is driving you down. - You getting Davia? - Maybe you don't even need to read the text because, - like just with the title says enough And if you know you one of those users that want to - die them. - Here's the text for you. - You can actually read it. - And it is all organized in a way that is no, - really heavy for the user. - They can dive in if they want. - Otherwise they get the point. - So we get down and it's like So where you waiting for? - Give it a try. - You'll be surprised by their results and we end up the flow. - The holy Science ends up with a call to action search now. - So just think about hierarchy. - How the texture says are communicating the whole idea and how we end up the flow. - No, - with of that and where the user will be like. - OK, - so what do I don't know? - No. - They know what they have to do. - They have to search now. - Um, - yeah. - So that was That was one example that I would like about, - like, - you know, - break it down. - The Texan make it in a way that users can understand some escaped light. - So maybe don't you know, - what can we do when the text is just try? - So I have a few examples. - The 1st 1 I didn't do this one, - but it's a website that I really like And is that the great discontent? - Basically, - you can check it out is the greatest content. - They come and they post interviews toe, - you know, - really, - really interesting people. - So feel free to take it out. - This is really amazing. - What I like from this side and what I would like to highlight right now is just how you - know they're cretin. - They're making something really nice from just an interview. - The way they're breaking down the text, - it just makes so much sense. - So, - you know, - you obviously wanna have always the opportunity to create illustrations around your message - , - and that's totally fine, - you know? - But there's still, - I think, - the great discontent. - It's a great example of how, - just with type, - you can create a layout that is really nice and really easy to read, - so you can see these three condoms. - First we see this guy Jason. - Then as you scroll down first thing you see, - if you follow like the you know the way were it left to right top to bottom about Jason. - Awesome. - We continue some sponsor stuff and then here, - you understand this is the main body and then as a supporting content. - We just have a quote on that quote. - Totally Describe something about this about Jason here, - and then as you go down is like, - Oh, - my God, - I know this is becoming, - like, - really hard. - They they're like breaking down the text. - So you have a different paragraphs. - Different highlights as you go down. - You know, - they they're trying to make it easy to read, - and they even have quotes, - the break, - their layer. - And that is amazing. - They break this whole Collier with a layout, - taking the whole with. - And that is just like, - something really nice visually that would, - you know it will make you continue. - Really? - Um, - so you go down again. - More fame, - some support and officials. - It is just really nice. - And it's example off assess. - It just typography being really well used to make a layer that, - you know, - could be dry if you don't play with it. - But just because they're like doing this thing, - it's actually really nice to see him. - I will definitely engaged in Griffin it. - Right. - So the other example is USA Today on this one. - All right. - So long time ago, - I work in this in this reporter for this well, - it was pretty much, - I mean defined framework a little bit and doing some of the press sections. - And, - you know, - I does something that I took us a realized challenge because it's definitely a section they - , - you know, - not so many people care in terms Off the sign is just a corporate section, - the press section. - This is just for journalists, - but, - you know, - they also deserve a great sign. - So I thought it would be kind of interesting if we could actually, - like, - create some bold statements. - So imagine when you type on when you click on the decibel story, - the first thing you see is like it's not the same. - That's just one of the biggest statement that defines Desi Wallace. - A brand as a corporation is just not the same. - And that's the first thing you see when getting this again. - You know, - you go down, - and it's important to have quotes to break down the text as much as we can. - If we have a video, - you know, - put in the way that it makes sense again, - don't know some contents, - and this is all up to the assets and you have. - But still there's a way to actually make account and making nice Another that you might - recognize at this point is again this article page and just again, - you know, - highlighting how we're breaking the call. - Liam here with this quote how we have the subtitle in a different weight How we have this - big capital M to start the paragraph and so on. - You know, - it's about giving second, - and it's about making the content, - engaging for the user, - moving on, - illustrating a case study. - So something I work for a while finished interactive. - And, - you know, - I definitely learned taunts in terms of design, - and it was we started creating case that is so you know, - some projects where may be your best. - A sign didn't make it to the final release or for whatever the reason. - You know, - even shyness. - Muchas you would like it to, - but you did actually like great designs or work a lot on a specific illustration. - We thought it would be really nice to feature all those like working burger stages in this - loan case study and you know that will work as well to promote all the craft and all the - love we were putting on those independent components. - And I just want to put up example here. - So this is one of the case status with it for Google site guys, - and it's just a part of it is not the whole thing, - But I work on this one, - and it was really actually really nice to, - you know, - trying to think what? - How could you make this text in a way that people would read it? - No, - we're not trying. - I'm not pretending to have users within something that I will never break. - So how could we make this interest in and again? - I think if you compare it to this day, - great discontent is definitely not the same. - Because here we have assets and we have the passivity to create illustrations wearing the - others we don't. - But again, - it's a matter of like doing creating a story, - creating a story in your page that actually drives users down to read the whole thing. - So let's take a look at this one. - You know, - where were the body in, - like faces? - Like you? - Excellent strategy. - We have a subtitle on, - you know, - right away is such a visual thing. - We have, - like, - already some of the sketches with down and takes that this crime it not too much, - just enough. - So, - you know, - if you read the text, - if you read the title you get What is this about? - And if you want to dive in a bit more, - you also you know, - you have that option So that saying final wire frames again trying to keep it short, - trying to keep it like, - really well organized and always trying to, - like, - show complementary artwork to meet. - So it's not try breaking down the section. - So you see how we we went from you extend a strategy and now I'm gonna start talking about - this sign. - So which is like break it down with a really nice illustration just to like. - The same process is to open the section in a way that people are like, - OK, - I get it. - Now we're gonna talk about this a really bold statement again building the hierarchy. - So it's really easy to this. - Can it? - This is the first thing you're gonna see on as you go down. - You know, - you might end up looking at home page and so long again something Tractor components. - It is a really, - really long page with like, - I'm marking with a close like, - you know, - proposals that they're making that final release. - Some others that made it again, - final descent here. - So I'm not gonna repeat the whole thing over and over, - but you're gonna need the elf like it's all about treating the text in a way that, - you know, - you can actually ask people to read it, - And it's not a big pain for them, - right? - So moving on, - I think the last thing we were talking, - this unit is the ourselves reader. - So one of the types of actions have done and, - you know, - things that actually define the look and feel of it. - What I want to show in this unit is pretty much like different stages off things. - Big work in progress off my AR, - says reader. - I'm really looking forward to see what you guys can come up with. - So I want to show you basically, - in terms off, - like look and feel and typography what I'm doing. - I think I should have some of the screens already in the previous unit, - so I might just talk about some of the physicians have done in terms of the sign in terms - off designed, - not just about the create. - Okay, - so you can see how this is the first attempt on it. - I I made. - And I haven't even, - like, - modified much. - But there's, - like, - a few things that have been like making it more tire entire every time I actually come back - to this PSD and pretty much like one of the first decision was had from, - you know, - from the user perspective is like, - I will have a circles that actually like, - um, - identify what? - The feeding. - So they pretty much described with Michael. - What is that? - Figures described him. - So there, - after Lou A B in the 1st 1 for instance. - And you will see here you have 11 post. - You haven't seen assignment in Germany. - You have, - like, - 23 so on Some of them, - uh, - let's say they didn't have ah, - um and I come, - we're gonna use this default. - I can't that we will change color just to make it more playful on again. - You have this first thing this first time you see at first which is unseen articles. - And then, - you know, - this is like 188 and you can have defeats and 80 year account. - However, - as I was thinking about this, - I was thinking like actually the numbers. - Daddy is really important. - Like I'm truly entering this in a way, - as a C. - It's not important. - But you know, - you you know, - already I come you're real. - You probably know already that this is sites of the day on the afternoon or you already - know that this is unseen articles. - But if you visit this website 200 times, - I can tell you when you're gonna be interested. - It's in this little number, - so let's try to work a little bit more on that. - That's why I think this is my first, - my second iteration, - where I actually take the number. - I took the number out of it and just create, - like, - a big statement, - and this is actually what people are gonna see. - But at the same time, - I want to give a visual indication of, - like, - this stuff you have to see on. - That's why I put this I here so that I would change its color if you've seen. - You know, - have you seen the model day? - Something new. - And in that regard, - you guys hear how I just go back to their previous the previous, - um, - one you can see here like all these guys are visible. - But then I thought, - you know what? - If I can make it even better, - What if I can? - Actually, - you know, - if you just rent all the all the different articles from that feet, - I'm gonna hide the icon, - and that's going to mean that. - You know, - that means that you read everything. - There's nothing for you to ridges like it became small. - However, - you know, - if you get one new postal, - whatever you know, - he will come back to be, - like a real shape. - And that's gonna help us. - When we actually collapsed this bar because you will see just like dots. - They're, - like, - really small or really long. - And that means it is something to read their Or maybe there is no. - Um, - so that's one decision. - Another one is, - um, - making these guys. - You know, - if you see here, - they will have the same color. - But here, - depending if this article's supposed for you to read or not There's gonna have a different - color is gonna be more subtle or, - like, - more, - um, - like bright. - If there's something for you to read so again, - you know, - small decisions that actually, - I think make the experience better. - Um, - some other. - I think it is really hard to see. - But the search bar, - uh, - you know, - he became a bit bigger. - We don't do the same. - The next situation here. - I was just trying to make you know, - to make the version of this collapse bar. - So as I explained before, - you have some of those who read already and they're, - like, - small and some others they're still have post for you to read. - They will show up to speak. - And obviously, - you know this parent, - you will be able to actually expand it as you browse in. - Then I actually started doing this column on A says that in my previous videos, - this is actually a really important calling for me. - So, - you know, - I know I'm taking a really traditional approach for analysis reader. - I'm not trying to create a new inspirational magazine and trying to create something that - is really functional and really easy to understand. - and there's this really good reading. - They're called breather R E B E R. - And what they do is they have these three columns, - which I really like because it's like a progressive disclosure off information based on - really strong hierarchy. - So first used to defeat you, - Select the fit. - You see the articles in the outfit, - you select the article and you see the article. - However, - the problem they have, - in my opinion, - is that is in this in this middle column is really dry. - There's nothing there telling me to read anything. - And, - you know, - I just want to make it more visual. - So that's why I started playing with a D elf like, - um then, - like a bit more like being me more playful, - with the text being more playful with us paddles and showing any media content you might - have if any, - However, - you know, - again, - this was my first iteration, - and as I was doing it, - I realized I was just going to bay. - I have, - like, - few examples of that takes in different types. - This is Gibson and amusing Miria losing the ground for the body text, - which I would like, - Um, - but again I thought I was It wasn't going right. - So actually, - the don't pay attention to this on the right. - But actually, - I felt like we needed to make it smaller. - So that's why I started playing with Gibson with a small size and at last I switch back toe - area on. - The reason is like I think Ariel on small sizes, - like 12 or 13. - It is actually really beautiful when you actually see it. - Um, - bold. - So I started playing around with that phone and see what I could come up with. - So coming out to photo shop, - um, - just to describe, - like, - different things have been trying so again, - you know, - as I explained before, - uh, - we're gonna have, - um you know, - this bar that actually collapsed or expand You can see how everything is following the same - line. - Everything is perfectly aligned. - And then I was trying like different things here with the search bar and so on. - So again, - from a typographic perspective, - I'm using different in creating a hierarchy off photography by using sizes by, - you seem like a different, - slightly different corner on the body text I'm trying to create, - like the different modules that you're gonna see through the RSS reader, - that is, - with an image without an image with just text without text and so on. - And yeah, - so I think this is what I have so far in the next units. - You will actually see this part as I'm working on it. - All right, - so that's all for unit for this unit. - So I'm really looking forward to see your examples. - And what can you come up with? - Thank you. - And see you in the next unit. 6. Visual Weight and Composition Balance: - welcome to Unit six felt some visual weight and composition balance in this unit will cover - . - These two concepts will cover the factors that create more visual weight, - work over the types of composition balance, - and we'll have this final section called dashi designed Flow. - So first off, - what is it and what is it for? - Well, - objects that attract user attention more than others have a bigger visual weight. - This can be determined by the size, - about the size of the objects, - by the shape, - by the position, - by the density by its color somebody, - the factors can make a non object pops up more in the composition than some other, - and then composition balance will are the right treatment off visual weight on visual - directions. - Create its composition balance. - This is necessary to create like a smooth experience and, - you know, - if it is necessary definitely to actually make sure we deliver the message trying to - deliver through our work. - This the concepts come from this book from Brittle Warehime. - The book is called Art and Visual Perception, - a psychology off that created I. - This book basically describes the psychological process that take place when users create - or look at art. - It's a book that I've read back in the days back in college, - and I really recommend it to you guys if you have a chance to pick it up because it is. - It is a classic, - and it pretty much describes how we actually receive information. - And you know, - all the different association we do in our brain based on that, - well, - factors that influence visual weight, - properties of volatiles. - They're definitely Tom's of different factors that can make another your heavier than - another one. - So just to go through the list really quick the first what could be size so pretty much, - you know, - objects there are bigger appear visually heavier than all this. - There are smaller shape. - Basically, - basically like, - um, - regular shape appeared to be heavier than some others that are not regular form and space, - well, - positive forms with more than negative space. - This is that isolation objects are isolated, - tend to be appear heavier than some others that are like surrounded by some others. - And that's the important off white space. - Overall, - um, - well, - density. - So, - you know, - the more you convince objects in a specific area, - the more heavier it gets colors, - so some color seems to be heavier than some others. - So first in such colors tend to appear lighter than dark corners or even read seems to be - the heaviest color, - while yellow seems to be the lighter Ah, - the value. - So it primer says that you know the darker on object. - It's the more weight you actually associate to that object. - Eso fetus lighter, - it seems, - actually later influence interest. - So it'll complex interrogated, - just like shades that grab your attention. - Because of their way there, - they're don't they're their shape. - Tend to be usually heavier that some others that might be perceived as more common texture - . - Um, - this prima says that object with texture appear to be heavier volume. - So if we have an object that has, - like some sort of like three D death through it, - he will appear to be heavy, - heavier than some others that are like just to be shaped death off. - Feel this Primus says that the greater the papal feel often area, - they created the visual weight off that area. - Iss, - um, - proceed physical weight. - This'd is really self explanatory, - but you know, - if we have in a composition, - let's say, - a picture of something that is really heavy in the reality, - so we will perceive it as something heavy as well. - And finally, - location or position of the element. - This says pretty much like the closer an object is to the center, - the heavier it looks, - but at the same time, - it can be countered by a really small objects close to the edge. - So as you can see, - all these rules apply in one way or the other. - But, - you know, - obviously it's up to your except a year sub. - You're up to your eye, - your expertise to define and actually understand the visual weight off a composition. - I wanted to highlight just five values off everything that I explained here and give some - examples as well about those the 1st 1 I like to talk about again. - A sites assume respect. - Um, - bigger objects tend to appear as heavier. - So something already show in the previous unit iss. - Um, - this part of the website for decibel and how I decided, - totally opened the section with a really, - really big statement that actually defines the company. - And again you can see here. - It's not just contrast because it's the biggest him, - but it's also its size. - What makes it really pop up in this layer? - So there will be another one. - A 2nd 1 that a sexually we can discuss, - like different factors in this composition is a proposal for the home page and it, - like, - really don't them ago. - But you can see how the biggest type in this composition is dream. - And if you scroll down there like different components, - this is the Khobar stay for this model and then some binders and so on. - Um, - but in reality, - even though this is the biggest type on it, - this is actually what craps my intention. - And it cannot relates to one of those principles because it is it has, - um, - but it's an intrinsic interest. - It's such a complex picture that you are not normally, - like, - used to see that it grabs your attention, - by the way, - so you can see how you know it's summer of like mixing those concepts in terms. - Official weight and some things is one the one that you know is right. - And sometimes as you combine different factors, - maybe it's another one in this case is definitely intrinsic interest off this picture, - the next one is cooler again. - So, - as we said before, - like some corners, - her perceived a Sevier more heavier than some others. - And an example of that, - uh, - we could find it here. - Oddest, - but nothing Where us again. - You know, - like colors like blue. - Um there, - like, - really likes creamy are still like less heavy than some others. - Every darker, - like this title and some others like really, - really lighter like first. - That's where we have in the search bar are perceived as lighter than actually thinks one. - The darker next up is density. - And this concept premise says that the more objects you packing a specific space, - the more the heavier that specific space tend to be. - So getting back to the example, - you can see if we stroll down how you know, - if you just look at the density off the content in the right column is way, - way more clutter that this left left column here, - this left region and the reason for that is like even though we just we almost have no - content on the left. - We just have a picture and the text compared to what we have on the right, - which is a crazy one of information. - Just the fact that we have a visual here, - like a picture photograph. - It's making definitely like balance right away. - If this will be empty or just a cooler, - the composition will fall to the right. - But as we have this picture here is when we saw before on the decibel home page, - like it actually balance the whole composition. - The next factor is value. - There's a little bit like color. - It says that the darker and object is there heavier, - it appears to the user. - So getting back to this guy wither up example, - we can see how that is actually a really common thing to do when training text. - So, - for instance, - here you see, - like the contrast is so big. - So it actually it is easy to see that as we go down Celtics that it might no be that - important as thes text feel here. - What's your even allowed dress? - Well, - I just put it like, - really, - really great down relight, - and that means it is not that important. - So again, - you know, - we can follow the composition just by reading the text on it, - save different locations anywhere in the world and you get the message there. - This is less relevant, - and that's why it's cooler is a bit more gray. - So you can see how we do that all the way, - even here, - Mr Few more gray. - And just just so we can create with these higher key off content by, - you know, - by size, - because the titles are definitely bigger, - and also by using the cooler and its value on the last factor in this laces whitespace. - It basically says the positive space waits more than negative space or white space. - All right, - moving on types of composition balance. - So there are pretty much four types of composition balance. - We have horizontal, - vertical and then symmetrical and asymmetrical. - So horizontal and vertical for that example will get back to, - um, - the sky weather upset just to show how you know, - definitely the composition balance distributed on the horizontal access of it. - So in this case, - we definitely have the phone that is really heavy. - So is the hand really sharp? - And he grabs our attention and here because of the contrast and its size, - and also like the white space around this to balance each other, - but definitely the way it's a bit more on the left is definitely horse until violence here - . - So as we move on, - this is pretty symmetrical, - like we have the weights in this region here, - distributed on the left and the right. - Equally. - You could say that about this component as well, - even though it's a little bit more on the left, - done in the right because of this, - but still it course more than 50%. - So it feels balance a little bit, - Um, - so again we get this section and this is against symmetrical, - a little bit vertical more than horizontal. - But anyway, - you can see how the symmetry between the section on the left on the right, - because we just have the fun of the center and then with describes like features around the - phone. - And finally we go symmetrical till the area and again, - now symmetrical versus a symmetrical. - So Shannon Michelle just working progress of something that we're like a really long time - ago and also my website. - So this is why don't we try, - which is pretty much call Liam and everything in center. - So this will go within the symmetrical bucket and Then there's this other thing about the - show and that IHS here is Theis website working pros for Skylanders and Activision. - Well, - we pretty much have this idea of, - like, - showing, - you know, - block past in a way that will be, - like, - more dynamic and because they actually have, - like, - three specific categories off blockbusting we're gonna post. - So it was easy to actually create, - like, - a visual language for those. - And you can see the composition here is just not symmetric little. - But that was the point off that you will scroll an issue scroll. - It will make sense. - But if you just take a screenshot, - it definitely looks like on balance. - So that was It was a critical project, - like especially a 10 stations were pretty pretty nice. - And the last section off this unit is dust your design flow. - So, - you know, - I just want to highlight again that all these factors are up to you. - I mean, - you're the one that has to actually think about those and, - you know, - consider what is more important in what case? - And you know what? - It's more predominant than the other end. - You know, - it depends with scenario. - So as we saw before. - We have this picture of the girl with the were here, - and that was definitely like the heavier thinning the website have this thing in the - website just because he's such a rare picture that will drag attention. - It doesn't matter if you put the biggest typeface close to the girl because of the you know - there's some hierarchy. - Also, - when it comes to those factors, - um, - so this big question does your design flow? - Sometimes you see the signs there, - Really? - They're really pretty. - But they like Herrick either, - like a flow the like, - the like generation. - So they're, - like, - really hard to follow. - And just to reiterate through this example that I put before on the about page and skip - line, - it is just pretty easy a citizen. - The case studies that I show in the periods units to actually follow the flow because you - know usually and demand that much activity from your user, - you should actually give them as much as you can. - So the process of breathing through a page is so easy on in this case, - this is the flow that you will follow if you get to this about Paige. - So you know, - basically, - you go reading chunks off text on as you go from one to another. - They saw with some visual to actually engage here. - And, - you know, - they also mean something in in relation to that text just to wrap it up. - Consider, - was that these have no rules. - There are no rules here. - There's only the only principles for you to consider. - And you know, - these principles will help you to create a composition that it's actually balance and to - create a design flow that actually means something for the user on so on. - So with that said, - I am looking forward to see what you guys can come up with, - and I'll see you in the next unit. - Thank you. 7. Sharpening your Design: - Hey, - guys. - Welcome to Chapter seven. - Thoughts on sharpening your side for these unit. - I put together some categories that will help me when I'm looking at someone off the sign. - And I also I take into consideration when I'm actually working on something specific myself - . - So this category is the 1st 1 treat your type right Revolves from typography. - 2nd 1 contrast, - I will talk about the contrast when you know, - creating different areas of content. - How do we create a separation? - The Yusof iconography also use off for over finger the sign and the last section that I - call the design contest. - So first of all, - treat your type, - right? - I'm gonna get into the RCs example in for show on. - I'll talk about spacing, - size and hierarchy colors. - And finally, - you know what to highlight when you're actually working with text. - So let's get to it. - Okay. - Dokey. - So this is actually, - if you can see that here. - So, - as you know, - this is the the assignment we working on. - It was to design, - and I says we either. - So I've been doing, - you know, - some Marcus for the iPhone. - How would it look? - Have like some screens. - Um, - how would you live with the menu? - It's he when you open actually an article, - even like if you want to search something. - We had that dinosaurs look, - he would come down and you will be able to search by tapping and also with corners that I - thought it could be cool. - So that's the guy from part. - But I want to talk about typography now and spacing and someone so we can actually make it - do it in in the desktop version. - So the first thing that is spacing and this is something that we've been talking because, - you know, - right? - Topography definitely, - like is really close together to write spacing. - You can have an amazing topography, - but if you actually don't treat it with the right space in it can look like crap. - So again, - we made we get some thoughts on, - you know, - how do we separate like the the line height off the body, - copy and so on. - But it is important that obviously their spacing, - it really depends on on the size of the topography on the text. - So, - in this case, - if I just take my great out, - you can see how you know, - I'm living. - That's 20 pixels in between these baseline on this lead on this one, - and I'm living even more. - I'm leaving, - actually 60 between this guy and that guy, - I'm what I'm trying to do is basically tried to group, - um, - content in here. - So even though, - you know, - everything belongs to the same article, - I will rather I have this title and this comes this actually attack line published by David - . - Whatever. - And, - you know, - two minutes, - right? - That's even though it relates to the whole article. - It definitely don't the way you, - sir, - scan countem. - It belongs to the title. - So you see that title you see who publish it And you see, - like, - how long is this? - I think I'm gonna be on then, - you know, - Then we start with a body copy for the body company, - You know, - I mean, - I left like a like a firm, - a lot of space in the baseline, - and see, - I exactly left 30 points for a type off 17 pregnancy here, - and I got I think it's definitely on the perch. - Like if I do it a bit more, - is gonna feel like too much, - But just like this is really good for, - like, - digital like it might not be the same if you doing print, - but like from reading on a screen, - especially with white background, - I felt like this was really actually really nice. - And then again double spacing here and just like this final title them, - the spacing is really, - really important. - So is there space in between the title and the body copy or the space in between this title - and actually the picture? - We have a top and I was someone of example we thought a picture, - but you can see how it just feels right. - It feels right. - Like it's like, - OK, - I get the title. - I get kind of like an overview here and now I dive into it. - The second thing I would like to talk about is this size on hierarchy. - So obviously we want the use for it to actually pay attention to what is more important on - one of the ways to do that, - to be of these hierarchies, - sexually by creating different sizes and, - you know, - if you know a little bit off HTML, - this is like 81 h two h three so what I want. - The most important thing I wanted to do in this page was actually, - um, - put all the attention in the article and for that, - like, - obviously you can see the biggest type in this, - um, - in this reader is actually the title, - um, - off the off the article. - And also like in building this hierarchy, - he also will use colors. - So again, - I want this to be the most important thing. - So it's actually gonna be one of the darkest color, - like more contrasting colors in the whole composition where I might not really care about - this. - Like, - if you see has been published by David last year, - That's cool. - Or if you say this is cool. - But it's definitely the most important thing on a really good example is here. - Like if you see the top bar that the colors of the top are, - you will see how the title is definitely dark, - and then at freak is important and it's a link. - So it has a different color and then seen ad. - It's like is one of those feelers like, - obviously you need that because otherwise it doesn't make any sense. - Is like name of the article and then a trick. - What does that mean? - You need like you need to be all the sentence. - And for that you need, - like, - this kind of feelers, - But they're not really important. - Um, - when you know from Ah, - you I perspective they're necessary, - but not the most important thing in the page. - Actually, - when you finish with in the article, - I wanted to do this kind of cool Finn where you will get Teoh the benefits. - So I'm gonna This is the way we weren't you basically really in. - So you're screwing up and then you will get here and it will come of leg room. - This is the next on at Frick and they will tell you that all the article so again here you - see how next on is no really highlighted at Frank it iss But then the most important thing - based on size is the title of the next article. - Something you have to watch out when you're doing this is like try to pay attention because - if you try to highlight everything, - nothing is gonna be highlighted. - And what I mean is like, - if I actually take these texts on making bull you know, - and I You know, - if I may call the body Text bowl, - suddenly it is not contrasted anymore because there is nothing to contrast it with. - Everything is bold and you know therefore everything is both. - So nothing is highlighted. - It is important to keep, - um, - the whole composition really quiet. - Yes. - So you can actually highlight one piece of content when you want it. - And I would recommend, - you know, - in just one in one. - Look, - if I just, - like, - take a look at this right now, - I will see what is the most important thing. - So let's try to not overdo it. - Like if I have more than what important thing I have, - like two main call to actions thus gonna start like feeling a bit like Okay, - what should I be looking at? - Because their two things screaming for my attention on the problem is like the more things - you have, - the last effect you're making into users because suddenly everything is huge. - Everything is calling to your attention. - And you you know, - therefore you're ignoring everything. - A second point that I would like to talk about is contrast when creating content areas. - So sometimes when designing on our website. - Whatever. - You actually have to create areas of contact for obviously like many or this place where - you will display like updates, - whatever component, - or just like even that. - The main article and it is really important. - And this is something that I then it really makes your design look better if you actually - make those hearings in a way that complement each other but at the same time kind of like - divide the content. - Eso What we can see in this green right now is a mocha off Anapa working on school fund - album. - You can see how I'm dividing the actually the different sections of it. - This is really an inspiration for me also when working on their says reader. - So we have a many on the left that is like, - really, - really dark blue. - And then, - you know, - then we have these Google weapons, - many of that it's actually not gonna be there all the time because you can open it and - close it. - But you can see right away how he definitely has a different contrast is a component that - if it is always there, - you will almost be annoying like is no, - really nice When it comes to radium, - Foreal is not nice to do it on top off a corner. - So but for one of these components is totally fine. - And then we have, - like, - the main the core off the up and that is these three columns is collections, - phones, - archive and filters. - You can see how collections and forms like I kind of like relate to each other. - The definitely one is the selector. - The fielders collection on day one is this space where you will see the results and so the - background in that I wanted to be really similar. - But if you make it like super different, - you actually like it is becoming like a cake off layers and colors and he could get a bit - too crazy. - So what I'm gonna do in this section I'm gonna go through different examples that I think - can illustrate really well this point. - So I wish showing this is a different screen. - But distance an example. - You can see how here this is one color, - obviously with the texture of whenever and this is just like white is no that different. - But it is different enough. - So you can understand. - One is filters on one is the body of couple you're supposed to Actually, - you know what you're supposed to put the content that uses will just and something really - important when creating contrast in between sections is actually the divider, - something like a highlight that is a bit darker than any of those two sections. - But it helps to the user to understand and to see, - like a sharp separation between blocks of content. - And in that sense, - I was actually I really like the new Google plus really sign. - I thought it was me. - And that's when I started this week. - And I just wanted to show you guys how this thing I'm talking about can you know a supply - every day to the signs we see everywhere. - So this is the normal you and I think it's cream shop and I'm gonna go to photo shop the - doctor in and just basically there. - So you see what I'm talking about? - First, - we have way with digestive content, - and that's that's purely white. - But then we had the bathroom, - which is great, - and that's totally cool. - But if you actually just put this background with this great background. - That's right, - this white back in with this gray background together with no separation if you might need - a bit more conference. - So I really like creating areas of the same almost like the same dumb, - but not the same. - But when you're doing that, - you actually like you find actually create here like a super great background and then a - white books. - You know, - this is not the most contested them you could do. - But if I want to go, - be that's this more like it is just really hard to see the separation like it almost is - playing tricks with your mind. - However, - if you create just is choke and just make it super light but disappeared darker than the - background just like this and you can see how it sitting 4% capacity. - It already makes a difference. - And how I perceive those two areas. - So the same thing goes here that you can see this great this color then this is pure white - . - But then here in the middle, - they have this stroke that is slightly darker. - Is that the background? - But again it helps to create that separation. - And so the same thing with this is like a gray, - this of the gray. - They're really close to each other. - But then you have this guy that is just a big far into the dark and eat health screening, - that separation. - So that's a really important. - Listen, - I think is definitely something that is up to you is not like you have to do this to make - your design better there tons of different styles. - But this is definitely one trick that I use. - So get him back to this is not a Google project. - I work. - Ah, - while ago and again you can see here how this back on is great. - This is white. - And maybe this is a bit, - um the stroke. - I went a bit too much is too big to contrast a But then there's this shadow here and that's - another one. - When doing shadows on, - like, - backgrounds and bodies of content, - there really similar. - So here we have, - like pure white, - really like gray and then the stroke. - It is important that the shadow is a bit lighter than the stroke. - So the shadow being lighter than the stroke. - But of the darker obviously, - in the background again just to create, - like, - layers off content that actually are perceived as really sharp by the user. - Um, - some more examples of this, - this will highlight it, - and then you move around, - You can see what I'm talking about, - and you can see how you know it only applies when they condom when they actually like the - areas. - We're really close to each other, - but not really when they're far. - So first off, - I don't need a stroke when going from this spread to this white. - Because the contrast between the red and the White House is so strong. - That is just enough. - Like if I create a stroke is gonna feel like over the sign. - Kind of like I mean, - all school, - too. - Some examples and then this guy ratio last time. - But you can see how every time we divide the content. - You know, - this like a divider, - that it's actually slightly darker. - Then, - um, - so here we're going to see darker than the the two sites. - So here I'm just using the shadow. - But again, - you can see how the shadow is darker enough, - um, - to see that. - Okay. - So more tricks when actually separating or dividing garrison in your layup. - Another one that I would like to show is, - um, - back this kid flick so something can call that we didn't escape. - Flight was to we list like, - different things, - different experiences you might have in a in a place. - And I wanted to create likability dynamically out. - But just, - you know, - because off but then and so on, - we wouldn't have much time for it. - So actually, - everything follows the same layouts on this kindof blurb. - Here is the same Have the same ley Ellis, - this one. - So this one. - But you can see even though we are actually listing the same template, - it is done in a way that, - um it alternates like a dark, - slightly darkest background in odds and then not in the other one so that we're Ukraine - like a rhythm If I do everything with by white background. - So if this is you see, - this bloke here is white. - And then this block here is a B is like like Ray. - If I left everything white, - this lying will become like way too two lining will be you almost like to everything that - I'm trying to do by the content And now that I see these like months later, - I almost feel like I should have done that like that line lighter. - But again, - you know it is Have Teoh. - It was a while ago and again talking about contracts said here a tricky thing of this - website. - It is that we didn't know how you know what this pictures we're gonna be? - Obviously we can populate a lthough different destinations that we had. - So if you have a back a picture that is like, - really, - really dark that we don't have anything here C five location. - But if we have a really dark picture, - it makes sense to actually have a shadow. - But asle here it looks OK almost every too strong. - But if you have a like a picture like this one salary, - the same shadow if you also be too much if you are a bit too close to the real picture And - therefore, - like the different areas, - emergent ondas dangers because that can get to like a dirty look if the different areas - emerging with you too. - So there's something we should think about when Korean like shadows and someone because he - depends on the content you know, - it might be 12 years or not, - and then something else I'd like to talk about is the cake effect on the kick effect. - Let's see, - for example, - the kick effect is the effect that you see when you have this sort of divider, - not specially that, - like that part of ballet dividers in between sections. - Way too often. - So imagine I have this divided here. - I have a really small space, - and then I have another divider. - And then that means, - like for a user, - they're going to see right away in just one screen three dividers to divide. - There's three content areas, - and that is where we called the layer layer cake effect. - So that's something you have to avoid as well, - because the background will should never become way too relevant or should never be more - relevant than the content that is actually housing. - So that's that's important as well. - And the last thing I would like to show in talking about contrast on background is, - um, - clean cuts between sections. - So they're probably the king. - Cut is like you, - sir. - Sir, - I'm no expert. - So what? - What is this? - Stephen Crabb was saying like don't make me think Users are no late. - They're not stupid. - They're just lazy. - So if you make a clean cut between one section of content on the other, - you know, - some uses might think that the content is down like they're finished within the page and - they might not scroll down. - It is important because of that. - Directly link all the sections to each other Really well, - So when you're actually reading and following the story line, - you can you know, - you do enviously. - Do they set ups. - There's an icon is a clean cut over there. - But with this cycle on top, - so you actually jump over the cut and always understand that this is more stuff coming. - Your grabbing users attention here. - And because of that, - they're almost like ignoring this cup and they're jumping from here. - Do you hear? - He sold about how people perceive your design and you know what's the best thing you can do - to actually not break the flow? - So the third point I would like to talk about is iconography. - Well, - I love drawing cycles. - I love three exercise off, - actually, - condoms. - In trying to encapsulate on after concept into a illustration that people will understand. - But the funeral I comes is like they they need context, - and I wrote here sometimes. - But in reality, - icons always need context. - That context can come with attacks that supported or sometimes it's just like the - environment that's around the icon. - So you understand right away what it iss. - So first of in this camera, - Aiken you know, - if you don't have any other reference than this you actually, - my thing is something related for roughy. - But, - you know, - it could be Galleria photo gallery. - It could be like, - I think a picture I come or it could be, - I don't know, - like a camera model. - ICANN is really hard to say. - You need you need text or, - you know you need something in the environment that tells you when it's gonna happen. - In that sense, - there are some examples that I like to talk about. - Um, - every stones one is in this page together for this seawall where I was thinking about, - you know, - like, - what does this I can mean? - Because I used to use that I come for so many things in my life already. - That and if you think about it. - It doesn't have much off a minute, - he said. - Arrow that is going down. - I mean, - based on what the years have in my back browsing the Internet, - I would say, - Okay, - is this a narrow down? - So he's definitely gonna take me somewhere, - or he's gonna download something because there's Paradigm has been associated to, - like, - download stuff. - But in this case, - the only reason when I use this I can. - It's just as a way to indicate the user the day something interactive in this component. - So you can see this is the Khobar State, - and this is what would happen that the user will say This magazine covers will hover one of - them and they will actually see, - like this pdf icon and then they call to Action Dollar. - So in reality, - the purpose of this hiking here just to call the addiction over something and then - obviously, - you know, - tell the user exactly what that IHS um, - another example in in icons that I'm always confused, - like I always for some reason, - a few times in my life, - I have the assignment to do and I come for Internet, - and this is probably one of the hardest thing you can do. - Like, - what is Internet connectivity? - Is it the world? - You know, - how can we making I come to say, - This is Internet and that's why I like, - you know, - I comes in that sense, - they need to come up with context that can be text first times and something Also, - that is curious is like thinking about the world as an icon. - I'm sure the different designers that Facebook had this same challenge when talking about - the notification I can. - So if I go to my Facebook account, - I have, - um that's those are messages, - those people. - And this is my notification and is the world. - And I don't know why the world will mean notification for anybody, - but they're using the way and is fine, - because again, - you understand that is up there, - and all of them they open like an overlay. - So the commitment of present this is really low, - since you're not going anywhere. - So that's why, - in my opinion, - it works and they also use, - like, - kind of like numbers to tell you how many notifications that you have and you know that - compared to medium, - it is really different the only thing that medium does to tell you that there's some - activity on your profile is to actually have this bottom line in color. - And that's what you know, - apse on your iPhone. - Like vine they do. - They don't tell us. - Likely how many notifications do you have or even Tweeter? - They just tell you like there are notifications. - So here I see you have, - like, - three activity thing is, - but if I actually ticket out, - you can see how is not there anymore. - So that's that's how can I like I get to the side and it's like, - Oh, - there's something new. - I don't need to know how many new things there for me is just just the feeling of like Okay - , - there's something new around my profile that happened. - That's enough to actually make me curious about it. - Something I did on this regard in our assignment is here is, - um, - 10 notifications to actually tell you like how maney unseen articles do you have. - So here you see how if I opened the panel, - you can see how it will be like dump. - It comes with a text because otherwise you don't know, - and that's fine. - But when this is collapsed, - I still I'm doing this thing where I'm actually changing the color off the I. - So if you actually I don't have a notification the I wouldn't be there. - Or maybe it will be just like blue. - But if it turns green, - it means like you have like, - unseen posts already there and something. - I I thought about it. - It's like, - OK, - even though we have this, - we might need, - um maybe like a hover state when you actually over one of those bubbles. - He was he like, - Oh, - you know, - five. - I'm seeing articles from spy Inspire, - so that's that's tricky. - But, - you know, - you have to understand that sometimes I can't. - I mean, - we'll need to come with, - like, - a text on some sort of like context. - I tell you what. - It ISS and some other times when the engagement is really low. - What? - Actually, - you're not gonna do any crazy thing on the user knows that is fine. - If it doesn't come with that, - um, - with the text. - So getting back to this example, - it's okay if it doesn't come with the text, - because if I want to write, - don't know. - Tex here totally uses. - They can don't know this. - We couldn't repeat the download thin over and over and over in this layout. - Well, - I just have, - like this which purposes to actually call users attention. - And then I certainly over I tell them what is gonna happen. - The next point I would like to talk about is you seem photography on your decide. - So in my opinion, - using photography is always tricky when playing with text, - especially without control. - The picture, - 100%. - And you know, - that happens when we actually build insides with you. - Prepare for like, - really like heavy content portals, - for instance, - over, - like, - new site or stuff like that, - where we actually know they're gonna be like, - tons of pictures. - But we don't know what the picture is gonna be, - you know? - And it becomes tricky if you don't know what the pictures. - Maybe because you don't know if maybe be of the text on the left. - But you know, - the heaviest. - The most important part of the pictures on the left. - You might have everything on the left in your composition, - and that might not look nice. - Or maybe, - like the most important thing in your composition is actually, - you know, - right behind the text. - Is that off being so where else? - Where? - Actually, - it will balance the composition, - so that's always tricky. - And I had some experience with that by working with clients like CNN or USA Today A well, - our escape flight Now on dare differently. - Some tricks designers do in that sense and well, - the first and easiest one issue obviously separate the photo from the content. - So if I look at, - um, - again our favorite example the ours is reader on the iPhone. - Maybe if I look at, - um obviously something like this, - it is really It is just really easy to separate. - They can't them from the picture just separated. - The picture's gonna look awesome. - This dude, - which is one of the most important things in the picture, - can be in this corner can be me. - So the corner, - you don't care because everything you have to do is just, - you know, - happy there. - Unless you scroll down something you don't really care because he's separated. - Sometimes, - however, - we we don't separate it. - So we tried to put it together. - And that's where you know, - we just have the picture and the text on top. - And if we control actually 100% that picture, - that's gonna be great on example. - I have for that is one of my favorite sites lately is it's Ah, - memoir is like a diary but basically have different chapters, - and the home page is always the same thing, - but they play with different corners. - So this is Chapter seven and then you see the tax really nice. - Big jumbo, - Easy to read, - um, - and so on. - But if we go back to the main Marquis, - this is super nice, - because obviously the designer had total control over this picture. - And if we change that to another one, - Her Majesty again, - we see how they're applying this filter, - how the pictures are in the color, - and it's just really easy to read the text, - release it to read the title and so on. - So again, - this is not something that happens when you actually building a site for a news, - a news platform or like a nurse's really influenced. - And so it's tricky to actually put the Texan top. - However, - if we want to do it there, - wasted it, - and the classy way to do this it's actually to use a Grady in on top of the picture. - And for that, - I actually have here their guidelines we had when creating, - um when creating the guidelines for, - um, - escape flight Simon opening here so you can see it. - And basically, - where I was describing how these marquee area was going to work, - depending on how much thanks. - We we have so here escape flight here, - pictures, - market guidelines. - You can see how again I'm do seem like really quiet pictures. - And that's what I thought we were gonna have. - And then I'm putting the text here on the left. - Plus this Grady, - um, - if I just look at the picture composition, - I'm describing how the visual weight of the picture should always be on the right so we can - actually place the text on the left, - and it's OK. - And then I actually go to describe, - like, - some examples here. - So obviously you know, - guidelines for the pictures, - the themes nature streets open fields like tried to avoid amateur ish photography, - crowded scenes, - clutter clear scenarios like super exposed age. - The are pictures or vignettes or like social like instagram pictures. - So I this something wrong but you can see how their pictures really quiet. - And in this case, - the Graham is nice and it works. - But however, - as you go to some other ones, - like here in this crime in like what not to do in this murky, - so too much brown, - you know, - too tacky being yet be too strong, - Just like the colors is really, - like, - really, - really bad. - And again, - you know how the techs will play a role in there. - So again, - we have the Grady. - Um, - we have the text, - and that takes it depends on the on the size. - It might be bigger or smaller and again, - you know, - I'm just here, - like some examples with different takes on line length. - So what we have with six lines, - what will happen with five lines? - What will happen with four lines here and so on? - This is something you can do, - but again, - if you playing with fire because you really don't know what those pictures are gonna be on - . - As you know, - as much as you can have a specific guidelines, - it depends in the medium, - there might not be always able to complain with those guidelines. - So you might end up in a place where, - like, - here, - they actually have a really bad picture or they have, - like, - all the details underneath the text, - and it doesn't look as nice. - So again, - I I'm kind of like shifting myself towards, - like, - separating text pictures every time. - I can't control totally the quality of the picture. - Um, - so there's something to think about for you guys. - The fifth last point I'd like to talk about in this unit is treat every component as as if - it could be presented toe design contest. - What does this mean? - Well, - again with the signers. - But we start human. - Obviously, - we always try to do our best, - But sometimes I think you know some things, - like there is some components that we don't care about or we care as much as we can. - But I'm I might not be the most important, - but off the job for us. - So that's That's definitely the Rhone approach to it. - And that's what the sentence is trying to say. - It's like we have to treat every single component with the science, - as if we could actually take your of the design. - I'm presented to a design contest. - So that's something I learned the hard way. - I learned by, - like, - doing, - redoing, - redoing and actually, - you know, - trying to enjoy every single step in the design process. - So even even a food er can be a fucking amazing food. - Er, - if you actually put the energy to make it awesome. - So in that sense, - I would like to show this example off a video player. - Um, - I did a while ago, - but again how? - Like, - I just tried to actually step back. - And this is already, - like, - three years old. - But still, - you know, - I can see, - like, - all the low if I try to put on it and so on. - So I have, - like, - different scenarios like we'll be an overlay will be another over layoffs. - Like people commented on your timeline. - This close buttons will only show up if you hold them, - um, - again, - like different components. - See how if you press on close caption put, - he will come up. - You could be able to define the size or not. - Just like look at the love I tried to put in this component. - And it's easier to see when actually we look at this like you know, - it's all a matter of, - like, - the right space in the light treatment you conceive in here. - Like, - almost like three years ago. - I did this and now it feels a bit over tweeted like it feels I wouldn't do this like this - anymore. - But obviously, - designer and they're like, - transitions are hard taste changes and so on. - But still, - when I did this, - I like I paid all the attention I could to actually make this pace in right here and there - and here You can see how it keeps the frame on, - actually doubly get this space there. - So everything, - everything has, - like, - a lot of love and even 1% in this. - You know, - I actually make I don't know if you can see the glow on the background like those - telephones, - you know, - just so I can see it in the best way, - and people can actually enjoy it and then, - you know, - just as a matter of like, - showing the love that things component hat I was just describing the different units that - make the component the different part off. - Actually, - the layer that make the the component and just like a super big jumble, - crazy close up of the component where you can see, - like, - again all the details. - And so and obviously this is fake. - Like if I zoom into this, - I'm not going to say this, - but also like for clients. - They just love to see that you love your work is really nice to talk to somebody who - actually is really passionate about their work. - And this is a way to show it in case you can actually talk to them. - And maybe, - you know, - I think example that social like around here, - like just this pace in, - like, - the different you can see here, - like this outline which is like pure black capacity but works really well when dividing - this white and this yellow because it makes as we said before, - like a darker separation between those you know, - All those little details is where the love iss and maybe I'm just not this this chapter - with this self, - for you guys like it is really important to care. - And the more people you will see in your career, - I think you see people that don't care as much. - And then you see all the amazing people that care taunts. - So I think is a really nice, - um, - set off skills from a designer to actually care about things and tried to make it always - the best you can. - And with this we're wrapping up. - You need seven. - So thank you. - And I'll see you in the next chapter. 8. The Importance of a Case Study: Hey, guys, welcome to Chapter eight. The importance off a case study in this union will cover basically the definition of a case study. Why is it important to create case that is? And finally we'll go through the structure that you can use to create your own case study? So 1st 1st of all, what's a case study when you know what? Actually, I'm wondering about general concept like this. As you know, I like to go to Google. And basically a case study, as they said, is the process or record off research in which detailed consideration is given to the development off a particular matter over a period of time. So let's take this particular matter, and that's definitely our project. So we cannot pretty much explain the process off research and all the detailed consideration that was given to our project over a period of time. We basically have this product that is pretty much finished, and now it's time to actually explain all this time we went through, you know, from the very beginning, from the break initial brief off the con off the project. How do we work that out? And how do we consider all the different variations and go to the final project. That's a case that just a reflection of that. How how do we do that? You know, pretty much we work in the digital media, so we do through digital throughout digital blood, from which is potentially like website. So we pretty much create this side where we explain all the reasons and all the rational behind their process. And why is this important? Like, Why do we care about this? I think I mean, it is really important from Tom's of different perspectives. Like if I look at it to save from a designer pine of you, I think from a design perspective, it is really important to actually be able to create cool stuff, be able to actually get a brief really through, and come up with a really good idea that address all the needs of the breath and actually make something out of it. And that's the project. That's amazing. And that's definitely one of the most important skill said that the center should have. But it is a secretly important to actually being able to talk through your concept, being able to explain to somebody why you've done something in the specific way and not in other way. You know, like I think, um, I think being able to actually explain all the thoughts and all the process you went through when actually given a brief, it is really important. It's really important to know how to communicate your ideas and then so that will be from a design perspective. But how? How do we look at this from a business perspective? Well, you just think about like a company and all the stuff they produce that you know, you will never see Allah's You work within the company. You know, there's so many things that can go wrong. And there's so many great ideas and great executions that sometimes done don't go life because they didn't make it to the final release. So this is a project for companies to actually the most trade, how good they are and how good some of their solutions of just the process off credit in this project with the client worth out. So it's a promotional co workers, a promotional weapon to say from purely production company perspective. But it's also like a personal development has explained that concept through is really useful. And how is it structure? So what I think about structuring against Ali, I always think about, um, you know, stories. So it's definable telling a story and story pretty much have the set up the conflict, and there were solution. So if we think about the set up and that will be the first point we need to describe the situation. So we need to actually describe the reason why we're actually doing this project. Is it because it's a brief from a client? Could be, they said, because we saw a lack in the market that we think we can feel with our project. Like, you know, like, you know, a few a few months ago before members, he was like, We need to actually create something better because the email process, it has been like that forever. So that will be the set up. A email hasn't changed in 10 years, is the way in our case, our says we there? We think there is no anuses reader that address all the user's needs in a compelling way, and for that is really useful to actually encapsulate your concept. Have a pretty clear concept that can be encapsulated in just one sentence. This is an exercise that I I started doing recently and he really helped on exactly pretty much one explaining your concept to somebody else. The power of saying explaining your the one sentence and the other person, like get any right away is really powerful. Okay, so we explain already. We have in our case study. We already have describe the situation. We have our proposal in one sentence, and now we have actually to explain the whole thing. So based on our proposal, the body is when we actually explain our concept in death. What does this mean? Well, I mean, it really depends on the project, But first, if you push in, maybe like the social participation in your irises reader, this is actually the place to place to explain it. If you like doing crazy animations that you think connect the whole the whole floor like, really well, this will be Actually, they come the place to promote it on that works. You know this work with any protect you pretty much have to find those highlights that make it special. Is it is it because it's really simple. So maybe you should talk about this simplicity off your approach in this section, and finally you have to wrap it up. So, you know, you're really explain the market. You explain your proposal, you actually gave details about your proposal, and now you have to actually rapid up so they use or know what's next. You know, if let's say this isn't up, um, initial ready in the market next will be actually the link to Don't know they're for real if it is not or if it is now. But it's still being developed next. And, you know, next steps and final section in your case that it should be, like sign up for the better or like sign up for new. Sir, if you want to know when is he gonna be released? It is really important that we actually end up the case study with a clear call to action. Um, otherwise, users get to the end of the flow and you know they cannot feedback. And that kind off could be like the end or your communication with the user. So the more you can engage them with your product um, the best results you're gonna get. Obviously. And this takes us to the end off chapter eight, important off the case today. And I think it's the moment actually saying again, big big fans to everybody who actually joined the curse. I hope you guys had enjoy it. And this is definitely is thea end of the units, but is not the end of the course itself. So the next step is I'm gonna be posting during the next couple of weeks my progress on the RSS reader assignment so we all can follow up. And I'm also looking forward to see what you guys can come up with on more like practical hands on example. So all the amazing projects that have seen out there, So thanks again and keep up the good work. Enjoy.