Visual and UI Design Foundations: Create Visually Appealing Content | Julia Zaytseva | Skillshare

Visual and UI Design Foundations: Create Visually Appealing Content

Julia Zaytseva, UX designer and a go-getter

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
11 Lessons (60m)
    • 1. Introduction

      1:28
    • 2. Why visual design and what's in this class?

      2:01
    • 3. Design principles

      10:38
    • 4. Grid

      6:36
    • 5. Typography

      9:32
    • 6. Typography. Using Fonts

      6:19
    • 7. Typography. Level up!

      7:52
    • 8. Color and Imagery

      6:58
    • 9. Trends

      4:12
    • 10. Inspiration and Tips

      3:46
    • 11. Summary

      0:37
16 students are watching this class

About This Class

Do you recognize the feeling that something about your design is just not quite right, but you have a vague idea how to fix it? This class will provide some tips and rules to make your designs look more neat and put together.  

You will learn the foundations of the visual and UI design that you can directly apply to your work. We will focus on the three main concepts: use of color, space and typography, and also will talk about imagery, trends, related topics and helpful resources. The concepts covered in the course are universal and will also help with creating appealing presentations and posters.

As a project, you would take some text (think an article, or your project description, or a short story), find appropriate imagery for it (photos, illustrations, icons) and create a new layout for it using the principles learned in this class.

The main tool I use to create UI is Sketch, but the focus of this course is on the principles, and not the design tools that change every now and then.

You don’t need any prior design knowledge to enter this course, however, some familiarity with design tools, such as Sketch, Photoshop, or Axure might make the project work a bit easier. This class is geared towards:

  • UX designers who struggle to make their wireframes/prototypes look good.
  • People who need to create visuals or documents (presentations, documentation, calendars, posters, etc).
  • Anyone who is interested in creating visually appealing content.

Music: https://www.bensound.com

Transcripts

1. Introduction: Hi, guys. My name is Julia and I'm a UX designer is a part of my everyday job. I need to create vision appealing user interface, son. This course I would like to guide you through the visual design foundations that will help you create visually appealing content. The principles were going to cover our use of grid color, white space and typography. In order to practice those principles, you will need to complete the class project. That's for the class project. I suggest you take a text based material and design all redesign it. Think about the structure of your content headings, subheadings, paragraphs ordered or on ordered lists, maybe quotations. How you can use some pictures of photos, illustrations Aikens to highlight certain points of your text. A good example of that would be a Wikipedia article because it is already That's the structure. Other things you can consider it our, for instance, recipes for step by step guides. You can even think about short stories in your life. Just find something that you will find fun and interesting to work. If you actually decide to redesign an existing article, I would love to see before and after pictures. Let me know how it goes. I hope you guys will enjoy this class and let's get started 2. Why visual design and what's in this class?: in this introduction video. I would like to talk about what visual design ISS and with visual designers do and give you the overview off the lesson structure. So what is visual design? Often, people referred to visual designers graphic design, and that's only partially true because graphic design is a discipline that is applied in print. However, visual design creates a holistic look and feel across the platforms, so why bother with that in the U. X designed community? Often, designers think that visual design is not as important as usability, for instance, or ease of use. I believe that aesthetics enhances user experience, and it helps selling the products better. So how to do that? You need to know the rules and principles and practice, practice, practice. It's so who are the visual designers? Let's look at the example from Google at Google Visual designers, we've iconography, typography, color, space and texture together to help our users successfully navigate our products. We believe that all of our products should be beautiful and accessible. As a visual designer, you'll do life users with designs that inspire engaged and ExciteAtHome. That's a nice definition, isn't it? So let's get to the overview of the slaps. So we're gonna cover the following topics. Let's start with design principles and then go to grid color, typography, imagery and end with trends and inspiration. I hope you will enjoy this course and let's get to the design principles. 3. Design principles: Let's talk about the first for over class, the design principles. As already mentioned, those principles are from position contrast in late proximity, negative space and alive. So composition, the position is the placement or arrangement of the visual elements in the work of art. It, of course, doesn't always and only apply to the works of fart of weaken. Talk about the composition in, ah, design off course and in photography, I would like Teoh 0.2 interesting rules or principles that you can use in your composition forces a rule of thirds. In order to use the rule of thirds, you divide your, um, scream, for instance, into three parts horizontally and into three parts vertically and put important objects in the intersections of these parts. You can as well divide your content in the same proportion. For instance, 1/3 for the navigation on the left, Uh, and 2/3 for the conference on the right. Another interesting proportion is golden ratio and the Fibonacci sequence. The Fibonacci sequence eyes the sequence of numbers where every next number is the sum off the previous soup. So this leads us to a very interesting proportion, which is 1 to 1.62 approximately, uh, in percentages. If your reference is looking at the screen, that would mean that 38% of your screen is, ah, one part and, uh 62 is another part. Thes two proportions are pleasing to the eye and can help create an interesting and dynamic composition. So here is the example off using the rule of thirds in this photo, you can see a flower, and, um, I wouldn't pull, I would say, and, ah, the photographer used the rule of thirds to capture this focal. So as you can see, the flower is exactly at the intersection off two lights. Another two examples is the use of golden ratio proportion. One of them is the Notredame deputy in Paris. It's building that was designed and built following this, uh, golden ratio proportion, and the second example is the old logo off iCloud um, which apparently was also built using the golden ratio proportion. Let's move on to the next principal. The contrast contrast is used to emphasize certain objects are using color, shape, weight size and other characteristics. In this example, you can see that designers use color to emphasize um, certain parts of the screen. They use shapes as in the in the logo and, uh, circles in the navigation, um, and off course, weight and size. When it comes to text on the screen, the next principle is principle of proximity. Proximity means that objects that are next to each other are perceived as one unit, as opposed Teoh. If the object of scattered around, then they perceived a separate object. As you can see from the example on the slide, the squares on the left are scattered around, but the same nine squares on the right are perceived as one object. When we apply the proximity principle to text, it usually comes to captions and titles within attacks. Here you can see the example on the left is the good example. Um lies in a good example. The title is close to the paragraph it belongs to in the example on the right. The title is actually in the middle of paragraphs, which makes the brain perceives as the separate line of text that doesn't belong to to the tags below. Next principle is the negative space. Um, negative space is the space around in between the subjects of an image. Well, it's called negative because it's basically everything around an object. Um, so it doesn't mean that it's something better. Something negative about it. It's just more off inversion off the object. Um, it really helps to make him eligible when it comes to something to read on and acts as a separator. Andi, it really goes back to the principle of proximity. We just look, that And of course, the negative space creates balance. Former page. Let's look at several examples of use of negative space. 1st 1 is the USA Network logo here. The designers use the letters Uh, you and a and negative space between these two letters, uh, to create the shape of the letter S and r and our brain perceives this as three letters instead of two. Another very famous example of use of negative space. Just logo. FedEx. Uh, if you have never seen it before, you won't be able to unsee it. From now on, there is an arrow between eat and ex. That actually symbolizes the direction of the whole idea off the business of the company, right that they said they send parcels around the world and the third example is the modified Apple Lago attribute that they made Teoh commemorate Steve Jobs when he passed away. So here, instead of the traditional apple bite in the logo, you can see that Steve Jobs profile another example off use of negative space, which is a negative example of use of negative space. This is the gates and fences dot com. I am pretty sure this is being built on purpose like this. However, the lack off space around the elements makes it very difficult to navigate this website, although I must say it is aligned pretty nicely, and the proportions that they're using are also quite correct. On the other hand, Microsoft Office 365 is a good example of using the negative space. Um, it creates a really nice separation between elements, and everything is clear. There is enough air, Um, and overall it creates quite a nice, pleasing look. Another good example of good use of negative space is built by Buffalo website basically here They emphasized their logo on navigation, and, uh, then there of what they do and then the projects. And each part off on the page is separated by quite a generous amount of space. So it makes page brings, and it's very easy to perceive the conference on this website. Let's move on to the last design principle in this chapter. Uh, it's alignment. A lineman creates visual connection between the elements. I know this sounds pretty abstract, but basically what's important about alignment is that when things are neatly aligned to each other or to certain other objects on the page, it creates very pleasing effect to the I. And when things are not aligned, the eye perceives them as messy and not me, which creates a less professional look of your designs. When it comes to text, you can align it in four different ways. So it's left the line right the line center or justified, I would suggest, um, to Onley center aligned, the titles, the headings and maybe some taglines. I don't recommend the lining to the center big blocks of text because it's quite tiring to the I to find both beginning and the end off the light on when it comes to center alignment , Um, the beginning and the end of the line always change, as opposed to aligning to the left Winds of line always begins at a certain point. So another way, Another important way of alignment is baseline alignments of baseline is the line on which the text, uh, stance. And ah, this also creates an aesthetically pleasing effect, some sort of order on the page. Um, and the last thing that I would like to mention about alignment is do not justify text on the web. It is okay to use justify texting print if you can use hyphenation first of all, and if you can manually adjust the spacing between the words and within the world. But this is something which I consider quite advanced. And since browsers are not that advanced yet, um, I would recommend not to use justify text. So that's it for the design principles. Let me know if you have any questions, and please try to Not, is these design principles in, ah, websites that you use in books in photography in print and let me know what you think. See you guys in the next lesson 4. Grid: Welcome to the lesson Number two, where we're gonna be talking about grids. Grid is one of my favorite topics in one of my favorite design tools to create peace and quiet on the page. Basically, Grid is a structure made up of a series of intersecting guidelines used to structure the contact. It's nothing with lines on your page that he used to align things on that page. So how it works, it establishes a meter and rhythm. It defines and reflects proportion that we talked about in the principal's page. Um, you can use the rules of thirds and golden ratio. You don't really have to, but grid really helps you to. It does provide some foundation balance, and actually, ideally, you need to start your design with the grid. However, picking a good grid is also quite a difficult and challenging task, I would say so I guess here you can start from which other you would like and then adjust and then create, agreed and then maybe adjust the grid. So it is often on iterative process. Um, and it does work well with other key design principles, such as proximity and composition and contrast all right. So this is the typical 12 column Grateful Web, which a lot of websites are using. I would say this is the most popular grid on the Web. I would like to give you an example of the Grid System website, which actually uses the grid system, you know, as advertised. It is based on the principles that Joseph Miller Portman represented in his book The Grid Systems, And this is the book that I can highly recommend if you would like to dive deeper into this topic. So this is how the website looks as it is when you go there. This is how it looks with just a vertical grid. As you can see, it's also the 12th column grid. Every item on the page is actually aligned to this grid, so, as you can see to the grid consists off 12 columns and gutters In between them, I suggest you would use the multiples of eight for all your measurements, the important part for the grid that the gutter between the columns is fixed. But the column with depends on the width of the screen, because often on the Web, we dio responsive design. So the width of the column would be changing. I will get to the example of how to set up the grid, uh, later in this lesson. Another part of the grid is the horizontal grid. This is the part of the grid, which is quite difficult to implement on the Web. The key to implementing the horizontal grid on the Web is to use multiples of eight or multiples off a certain number, and in my practice, it's usually floor are eight for every single object on the page. So if we're talking about the phone sizes that they should be divided by eight. If it's the button size, the button height, it should be divided by eight. Um, so if every single measurement that uses divide herbal by eight, then you can create this really nice Um, horizontal rhythm on the page as well as, for instance, is done on this website. Grid used to be largely used in Swiss design in the middle of 20th century, and we can see a lot of this in posters from that time. If you're gonna go and Google, if you're gonna go Google for Swiss design poster, you could see a lot of examples off posters from that time and posters from our time that were inspired by those designs. Those posters were built and inspired by use of grid. He can also slant the grid and, ah, you can create quite an interesting dynamic composition. So I recommend you go and Google for those kind of posters. To get some inspiration, I would like to show you how to set up the grid using sketch up. First, we turn on the grid by using show layout button. Then we go to view canvas layout settings. Here is where our layout settings actually live, so we have just the total with it can be quite a random number for now, the offset eyes 48 pixels. In our case, the number of columns is standard 12. The gutter with would be 32 and the column with is adjusted automatically. So now we're gonna adjust the total width accordingly, and we can add grows. So the horizontal great the gutter height should be eight pixels, as we discussed before. So let's change it to eight. And, um, rural height will be five. So we have this boxes off five by eight on And as you can see, all our text is nicely aligned, both vertical and horizontal. If you don't have sketch or for the shop or any other graphic design tools, you can, of course, go online and find something there. One of the tools online is the modular grid. And there you can set up all the parameters that you need and exports Hugh Grid as the PM Jeep pattern or as a photo show pattern, or is it transparency match? So this is it. For the great part. I realize this is quite a complex topic, and you need Teoh practice and see what works for you. I find it quite challenging to find a really good work, Ingrid. So I encourage you to try to find the grid that works for you. That looks interesting. That creates good dynamic. Um, try Teoh, experiment with it, try to slanted a little bit. It doesn't have to baby 90 degrees all the time. I wish you luck with that and let me know how that goes and see you in the next lesson. 5. Typography: in this section. I would like to talk about typography. I broke down the typography section into three lessons because I think it's important to get a little bit, ah, deeper into the stop IQ, not only because it's my favorite subject, but also because I think it's really important. Teoh, uh, get to know a little bit more details about this subject we're gonna be talking about. What is typography? Ah, hierarchy in typography and the use of negative space in typography. So these are three, um, a small topics for this lesson, and then we're gonna move on to using funds, and then we're gonna level up a little bit and talk about quotation marks, dashes and more. All right, so what is typography? According to Wikipedia, it's the art and technique of arranging type to make the written language legible, readable and appealing when displayed. And as he can see, it has nothing to do. And it doesn't mention choosing of the fonts. Funds are important, but they are, in my opinion, a bit more secondary to the other rules of typography or other things that you need to take into account before you choose the phone also typography applied to the style, arrangement and appearance of the letters, numbers and symbols. You can go from mockery typography. So this is when you choose the phones. You, uh, think about the hierarchy in your text to use the white space. You think about the layout. You go from big things to also small things to the micro typography. When you think about the spacing between the letters and certain words, or between the words in a sentence, when you design the layout for a book, it is a new are to a certain extent. But I would say that it's mostly a craft, you know, certain rules, and you practice them. You start noticing, um, the difference between good text and the bat, Tex. And I'm not saying I'm an expert here, but I'm really passionate about this subject, and I would really like to share some of the things I know about this with you. All right. This is why I think typography is one of the most important and crucial skills for the designer Oliver right. Einstein claims that 95% of designers typography, So why is that? According to him, 95% of all the content on the Web is text, which means this text needs to be designed, which means typography, and I really like this idea. In order to be a good designer, you don't really have to create illustrations or know how to draw icons and know how to paint. You don't even have to be that good with color. But if you know the basics off typography, it would already elevate your work a lot. Let's get to some of the details and let's start with higher art and in typography. It relates to how the content is laid out in your design, and this is quite a vague definition. Hierarchy is about structuring your content, and on the Web you will need a certain size for body text. And by size, I mean font size, um, and other body text level items such as lists. And you will need 3 to 4. In the rare cases, more than four levels off headings, and what I propose is the following system. You take X as the body text font size, and in this case it's 16 pixels, and I think it's the minimum size of the fund. It's the minimum phone size for the text that you should use if it comes to articles. I guess 16 2024 would be the good sizing for the body text and then proportionally increase . Heading three can be 1.5 x heading to two x and heading 13 x. I think this is quite a simple Eurest IQ that can help you structure your text so it will look quite nicely. You can, of course, play around with this proportions and see what works better for you. Also here. As you may have noticed, I use bold text for the headings. It's also not necessary. Um, when you increase the phone size enough, you can also go with the normal weight instead of the bolt. So it doesn't have to be heavier than the normal text. I would like to show you an example off how to use hierarchy in the graphic work. This is some data, some text, and in the end it will be a poster. So this is the road data that we get for our poster. We have information about the place and about the lecture. How to put it in the poster in a nice way, using almost Onley typography. So first we separate pieces of information from each other by just one empty line. Then we shuffle some things around. Uh, and, uh, we used Bolt to emphasize a little bit the name of the lecture, then a bit more emphasis on the name of the lecture. With bigger phone size, the designer used a lot of white space around the name of the lecture and, uh, where and when it happens. So because these two blocks in the middle are the most important and the white space actually creates an emphasis on the this information. Now the designer moved certain things. So first of all, here she made the information about university and about the lecture much smaller, and moved it to the right in the golden ratio proportion. Here she moved the name of the lecture to the left so that it creates a nice dynamic in this composition. And then the next step is shuffling things around a little bit more, adding color ending some a bit of a graphic elements. I can imagine that between these step and this step, there's quite a gap, but generally in design work, you need Teoh create a lot of versions and a lot of modifications until you come out, come up with your final design, and especially if you need Teoh. Talk about this. Designed with some other stakeholders, this quick example can show you how to use the hierarchy in typography to emphasize certain information and to create structure in your text and the next. And the last topic of this lesson is use of negative space. Negative space place a big role in emphasising certain things on the screen, and it really makes text a lot more legible and breathe herbal. This example has a very, very small padding around both text and the pictures and this quotation, so that all makes it very difficult to read the stakes through. And this text is just not inviting. You don't want to read this because it's so just tightly spaced. This example is a little bit better, and here there is a plenty of space around the text. A some perfect, but it's already much easier to read and much easier to perceive. And the next example is to options of two views off Facebook notes. It's exactly the same text or exactly the same note in two different layouts. Ondas You can see the one on the right is it's actually not that bad, and you can see the hierarchy, the title of the note and some less important information in Gray about when it was published. And then there is some sort of like a quotation in italics and then a paragraph of text and then an illustration. It's not that bad, but the example on the right shows how it can be improved, and it is improved largely with use of negative space. So you can see already there is quite some space before you get to the name off the note, and you can also see similar second, their information about author and the date in gray. But then the first paragraph. The quotation is designed in such a way that it invites you to read it. It's it looks like a poetry. Well, it isn't but off course. It's not just the negative space, but here. Negative space invites you to read the text and make the stakes much more legible. Basically, this is it for this lesson. We looked at two important principles and typography, which is negative space in hierarchy. And I really encourage you to practice this things. To try out Teoh. We use more space instead of less space and see how it looks like. And please reach out for the feedback. If you need it, I'll see you in the next lesson about how to use funds. 6. Typography. Using Fonts: So in this lesson, we're gonna be talking about how to use fonts. I deliberately took out the whole subject off picking a phone because this is quite it hard to explain how to choose a fund and how to choose a good fund and what constitutes the good form. If you would like to know more on this subject on, I suggest you find a special courses on creating a phones. And the more details you know, off how the funds of Bill the more you know, actually how to choose one today. We're not talking about this, but we're talking about some really basic things, so funds can be serif or some, sir. This is the example where you can see the serif fonts of service of its like tiny things on the edge off the letters, which makes them more legible when it comes to print and Sunseri phones have no service, and these are the phones that are much more suitable for the screen, especially because you can scale them down quite a lot. And the first rule of thumb here is you can easily pick the son Serra fund for the heading and the Serra phone for the body text. So here we have a couple of rules of thumb. One of them is did not make similar funds, for instance, times in Georgia. And the reason is that the human eye will find that something is wrong. Funds need to be different enough. They could be to Sarah for to San Serif fonts, but they should be different enough so that the human eye does not get confused. Also, as I already mentioned, Sun's is considered more suitable for the U element. So when we are designing an application, be a Web application or a mobile, it's better to use on serif funds because they scaled better. So when you go to a very small font sizes the service, they really stopped working. And Sunseri phones work much better. And the third thing year is that contemporary Surf wants won't work well for the article text. So despite the fact that I mentioned that Sarah phones are much better suitable for the print, you can also use the Sarah phones for the article texts. Let's talk about choosing phones for body copy and headings and hear what I mean is more than the combination and the suitability of certain phones. First of all, display phones are used for headings, and they're not suitable for body copy. So what are the display fonts? Display phones are usually created to be used in large sizes. The logo off the company rise is made in this kind of fund. It is probably, and 100 and lettering. But if you imagine something hand written, it can work pretty okay for the heading. But it doesn't really work for the body text. If the whole text would be written in this fund, it will be completely illegible. So avoid using those for the body text the other way around the works pretty well, however, certain people can find it boring. But I guess until you are very comfortable in choosing funds and combining them, you should be OK with using just regular, so called boring phones. Another rule of thumb is better. Use fewer funds and buy fewer phones. I mean also different front weights and styles, so if you have, for instance, through different fund sizes, that will be three funds. If you have one bold, it will be the fourth fund. If you have an italic it will be the fifth fund. If you have something in different color, that would be the sixth month front. So the fewer of these you use, the better. It doesn't have to be just one because you can't create hierarchy with this. Um, but you have to limit it to a certain extent. So there is one trick here if you can eliminate one, and the perception off your text did not change, and it means that you don't need it. Also, Google has a very helpful guide on choosing phones, so I suggest you use it and I can put the link in the class description. This is an example that I made to show you the difference in using display fund for headings and for the body text. So San Francisco is written in the fund called Mench. And as you can see here, it's only used for the heading, and in this example it is also used for the body text on the body text is so much more difficult to read because a it is in all caps be the spacing is much different for the body text. The spaces between words are too big and your eye stops at every single space in this text . As for the topic of how to combine funds, Google has impairing suggestions. So if you go to Google fonts and you choose a fund in this case, for instance, we're looking at the bottle you can see different funds with which are about a pair as well . And here you can also see the examples of how that would look like, um then phone pair. How, actually help sparing Google phones further. So this is a separate service, and there is a website called Phones and Use that showcases the nice combinations of phones he used in print and web. So you can use that one for inspiration. This is it about using funds. I hope you find this tips helpful. Um, I'm very curious to see what kind of fun combinations you will find, and we'll see you in the next lesson when we're gonna level up and talk about more details in typography. 7. Typography. Level up!: So now we are at the third and final part of the typography section, and I call it leveling up because we're gonna be talking about the Dini dining important detects. And we start with quotes. So important thing to know that quotation marks are not inches. Police stop using inches instead of quotation marks. Luckily, um, modern software actually can replace the dumb quotes that our interest actually with the smart quotes. And that's great. So you don't have to think about this. If you would like to get a bit more specific, you can even set up the special typographical layout for your keyboard, and I can provide the link below if you're interested in things like that. So Inches originated from the old typewriter set up, and there was no proper quotation marks on the old typewriters. But somehow they moved from typewriters to our current keyboards, and they stay there. Um, anyways, there are ways of getting proper quotation marks, and please do use them. However, they largely depend on the language, and I can illustrate it with an example. Eso Here we have a word written in serie licks, and here we have French quotation marks and the quotation marks that in Russia are called nine and six is because, well, they kind of resemble knives and sixes. And in English, the quotation marks look like this like an example in the word word single and double quotation marks. Please use those. If you're using English language in your text, use those in German. That would be different in French. That would be different. So please check for your language, which quotation marks are correct and the right most example is using off incorrect quotation marks. So these are inches of done close. Don't use those, all right. Moving on to dashes. There are four types of duchess hyphen and ash and ash and minus. The 1st 3 are obviously different in length and different, and use it as well. The question here is what's the difference between an ashen minus? They are the same length, however minus is aligned to the digit, which can be higher than the average letter in the sentence, which would make minus appear a bit higher than an end. Ashley in the text. That's the only difference. So here you can see the hyphen and ash and am dash from Adobe Paramount typeface and obviously use hyphens to hyphenate the words either. When it's ah, you need to combine two words, or if you need to break one word down into two lines. Em dashes are used a lot in Princess Russian language in English. It is very used, and I think, because that we should focus more on and ash, which is a widely most commonly used dash in English language. So some examples off where you should use and ash when we're talking about range of numbers . Dates are time you use and ash without any spaces on both right and left when we talk about scores or results of contests, or where we need to represent conflict, connection or direction. Language's one of the important rules and typography is how wide the line should be. And it really depends on the small size, meaning that the smaller the phone gets than there are on the line. With exception for short texts or captions. The basic rule of thumb here is 60 to 75 symbols Pauline, and if you can stick to around 60 rather than 75 this light shows examples of good line with which is 60 to 65 characters, very short one and the very long one. And the very long one is the one that I see more often on the on the Web, especially so please keep an eye on that. And if you are designing articles, you better stick the 60 to 70 characters for like another thing is letting or line height. Light height is the distance between the baselines. A baseline is the line on which the text sits, and by that I mean all the letters. They don't have any dissenters. Anything that hangs down and the distance between two of these lines is the line. And the rule of thumb for the Webb is the length. Height should be approximately 1.5 all the body text. So if your body text is 16 then the line height should between before. However, another suggestion, which makes things easier in the light, is that every measurement that you use should be divided Ble by 88 is some sort of a magic number. Uh, that can create a really nice rhythm on your page. So if you have body texts off 16 your line hype would be 24 but if your body text is 24 your line height can be 32 or 40. Try to keep this heuristic in mind, and if you use the multiples of eight in your designs, it will make your life a lot easier, because then you will get nice proportions basically out of the books. Try this and let me know that goes for you. Police never justified text on the Web unless you can hyphenate it on the Web. It is possible, but it's manual labour, and I would advise you not to get into that. So please just stick toe left the line sex. So why justify in Texas so bad? It creates so called rivers in the text. So big chunks of white space that are floating from one blind to another, creating so called river. And the bad thing about the rivers is they are essentially a very big spaces between words . So your reading experience really breaks when you read the text with very big spaces, because you do not perceive it as a sentence. He perceived us separate words, So some alignment it's as already mentioned. Basic rule. Please just left the line. The body copy. You can center the bold headings or statements or quotations off course. Not everything has to be left line. Certain things can be centered. But please be careful. Did not send her big chunks of text. And some elements have to be aligned to the baseline. So here the baseline is shown in green. Aligning text elements to the baseline. Create order in peace. So this is it for the typography section of this class. I hope you like it. I really encourage you to experiment with typography in your work. Please share your works with me and with others in this course. And I would like to hear from you. See you in the next lesson. 8. Color and Imagery: in this lesson. We're gonna be talking about use of color and imagery in your designs, and I will start with color theory. So I would like to give some quick tips about use of color in your designs. First of all, colors could be warm and cold bordering around green and purple. Neutrals usually service by ground. And, um, if you don't know what to do or you cannot find a good combination of colors, black texts and wide by ground always works. Um, important to know that warm colors tend to go into foreground and cool go into the background. So, for instance, if he used yellow of beach as your background colors, keep in mind that they would probably jump at your reader. Certain combinations of color work really well. Um, and I refer to monochromatic, complementary, tragic and analogous combinations of colors. If you don't know what it is, I will get to that in a minute. And please think about accessibility on dime talking about contrast and color blind people . Also, if you would like to convey meaning, please use other means than the color shape intensity patterns. Um, and in order to check your contrast, you can convert your designs into black and white and see if those air still legible. So if you go Google for the contrast checker, you can pick a tool that will help you define whether your text has enough contrast or not . So one of the tools to combine colors is the adobe color CC adobe color sissy tool can help you find a combination of colors for your design. You can choose one off the color harmony, So now we're looking at the monochromatic one in the range of red. And of course, you can change it, and you can go into blues or greens or yellows. You can go to, uh, try it, and you can have the combination of three colors complimentary. These are the ones on the opposite sides of the spectrum compound. These are the ones that are two of them are close to each other and then shades That's basically, well, different shades of one color. Um, you can get into your custom mode, and the 1st 1 was analogous, so that's basically several shades in the road that they're next to each other so you can play around with this tool and see what works for you. So that's a really cool tool that I can recommend. And speaking of Adobe, this is an example of a really, really bad use off color, so moving on from color to Aikens Aikens are a great way of representing information when you don't have time or possibility to create illustrations or photos. Basically, Aikens is a schematic representation over concept, and this is probably one of the most difficult things when it comes to creating Aikens or finding Aikens, because when you have an abstract concept, you have to represent it with something specific with a specific image. And that leads us to the idea that if you use icons in the buttons or when they relate to certain actions, you have to use them next to the text. So the icons in the slide are from the gizmo set from the company called Dutch Pichon. And the main feature off the good, Aiken said, is that the Aikens use the same rules and they use the same style. So here as you can see, they all have, uh, similar size. The line widths are also the same, and the, for instance, used the same angles. That system actually creates this pleasing to the eye effect off the consistent imagery that chicken using your design. The next topic is photos and illustrations. A ready mag is a really good example of both photos and illustrations, and it's also one of my sources of inspiration. Actually, basically what the illustrations or photos do they maintain of yours. Interest in attention. They create visual structure for information and links on the page, and they communicate or explain ideas visually. But please, please, keeping on the contrast between the text and the background color. Because if you use a picture as the background and if it's a dark photo and you use very dark text and the text becomes illegible, a good example of using photos in the Web design is Apple website. They always use the stunning imagery for their products that makes them look so appealing. And every time I go there, I just want to buy all their products. Um, well, Media 26 is a really good showcase of the views of illustrations and Web design, and also the illustrations of people are really trendy nowadays, and this website actually showcases the strength that I would like to finish this lesson with certain things to have wake. So first of all, try not to use large files that at to the page load time. Uh, try to make a page load time within five seconds. If you really have to use large images, you need to come up with a mechanism toe, load them in a nice way. They also exist. Um, if you don't have a proper color palette or the combinations of your colors are just really weird. If they do not follow any rules, then you probably should abandon it and try to look for something else. And the third thing is the wrong resolution for images. And here I refer to more low resolution images because they become really blurry, especially on the really high density screens like a retina screens. This is it for the color and injury use in design, please find some great illustrations or Aikens or photos. Use them in your project and share this with me and your peers. See you in the next lesson 9. Trends: in this lesson, we're gonna be talking about trends. Usually, trends are something that is really popular right now, and a lot of people recommend Do not fall into trends. Do not follow the hype. However, I think it's important to know to be on top off this in order to have an idea off what a contemporary design looks like. The first trend is s symmetrically outs. They are pretty popular these days. I see them more often, and they may contradict certain ideas about composition and use of grid. However, in my opinion, this is a more advanced use of great. It's really complicated to figure out how to create the asymmetrically out that it actually looks tasteful. I find this trends quite visually appealing. It creates interesting dynamic, and your designs will differently, not look bored. Next one is due it on radiance. The do it on radiance have been there for some time, and they originated from Spotify, their collections of music, and they used a lot of dirt on radiance back then and now this trend is, well, basically all over the web. I think this is a pretty interesting visual way off the next trend is organic shapes. Organic shapes is a combination off geometric shapes, such as a circle or square or a triangle. It's somewhere in between. I see those are getting shapes more and more often these days, and they also create a certain interesting aesthetic of the website. And they had something extra, something more interesting to your designs without you creating Aikens or illustrations or using photography. So try this trend. If you like, it might actually work pretty well for your project. Next one is animations and videos in design. So I have a little bit of a video in this presentation, and it's look at it so L decay. Uh, is, um, it's an agency on and they have a very interesting lay out of their home page. And here at the very end, they also combined videos and animations with the parallax scrolling. So basically, this website combines a number of trends, and this is also something that I see in the very trendy popular, especially design agencies websites that they combine several trends in one. The next trend is minimalism, and I can hardly call it a trend because it has been trending for quite a while. I don't think minimalists is ever getting out of fashion or it's ever going to die. Um, and in my opinion, it's always a very good idea, especially if you need to showcase certain things. Or if you're designing, in my opinion, you will never go wrong. If you would go for minimalism. The next trend is micro animations. Micro animations is the tiny animated elements, and in this example, for instance, you can see how across transitions into a check box and back to cross. And the background shrinks from great and reveals the white and the last trend that I would like. It's talk about his use of three D. Um, a lot off websites I have seen is using three D, either as the product showcase of their action, that using pictures. But the three D renders all they use the three D animations or three D illustrations. So this is it for trends. I hope they also inspired you to try them. This list is, of course, is not exhaustive. There's a lot more turns out there, but I found those to be more interesting and visually appealing, and this particular examples actually combine more than one trends often, and I hope you will enjoy exploring them 10. Inspiration and Tips: Here's our last and one of the most exciting lessons of the class. The inspiration we start with interest Interest is a platform with photographs, and he can find inspiration in virtually in every area of life. Just type a term in the search box and you confined. Ah, lot of pictures that can give you ideas. Inspiration. The next sources. Dribble Dribble is a popular platform among designers where they showcase they work. In my opinion, that work is mostly conceptual, but this concepts can actually also trigger you to create something exciting that can be implemented in real life. A worse is the Web site that showcases the best Web design in the world. And, for instance, they have the section side of the day so you can check it every day for new and inspiring websites. 100 years ball house. This is the project that is dedicated to 100 years of Ball House starts acting experiments . That's the website of stats. AKI, who creates certain experiments with grid and with the visual design and this particular one about dynamic grid systems, is a really cool experiment. Of course, we'll, every beginner designer asks, How do I get better. And, uh, I guess the more you learn, the more you realize how much you don't know yet. So there is always room for improvement. So I would like to give a couple of tips where you can get inspiration and where you can learn. First of all, learn from art. Go to museums, explore exhibitions. There is a lot of things that already have been done that can inspire you, watch movies and studied the colors and movies. Or you can also study composition. In movies. You can study movement from movies as well. You can study color and composition in great photography. You can follow photographers in line. You can go to photography exhibitions, and I guess photography is a really endless source of inspiration and knowledge For designers. Another source of inspiration is architecture. Er, it can help you with understanding the composition and proportions. So basically, every time you go outside to take a walk, you can look at the buildings and you can try to figure out what kind of rules were used to create one building or another and just generally get outside and look around. You don't have to look at the buildings. If you don't want, you can look at everything around you. You can look at the way people dress, the way they combine colors and the way they can create proportions. You can look at vehicles, bicycles, cars. Hey, can look a abridges or other engineering construction everything around you, especially. Nature can inspire you and teach you something about design. Other way of learning is the construct. If you like the design of particular webpage or boaster, try to copy it. Try to figure out how that works, how it was built. If you can recreate and prime what make this design so great, it will improve your knowledge in your level of design as well. And the last if I have his exposure, the more you get exposed to great examples of design where there is a great use of color or typography or grid or compositions, the better you get an design. You develop yourself further and you develop your taste. I hope you got inspired by this examples. I hope you like this class and see you soon 11. Summary: So this is it, guys. In this visual design class, we covered very important principles and rules, such as working with grid typography, color images and white space that chicken applied to create your own visually stunning content. Let me know how it goes in terms of work on your class project or some other projects. If you need help for feedback on your work, I'm always happy to help. Please show this course if you liked it. Give me some feedback. I would love to hear from you.