Web Design in Affinity Designer for Beginners and Beyond

1. Web Design in Affinity Designer Promo Video: If you are thinking about starting out as a Web designer freelancer, you probably have tried to harness photo shop sometime in the past, and I know the pain I've dinner. I remember spending days after days, even weeks after weeks, trying to just to remember certain tools and effects. But luckily we live in times when if you want to start out as a Web designer freelancer. But you can just put photo shop aside. Hi, my name is David Tyminski, and in this course you will learn how to use a fin into designer to design websites from A to Z. This course is packed with valuable info. Any Web designer rookie should know, such as how to choose the best colors and funds for your websites. What makes a professionally designed website? What are the modern Web design trends you should know about? And that's just the introduction, because the real bread and butter of discourse is inside its practical parts. We will get our hands dirty and explore all the tools and techniques professional weapons and refuse to design a website inside affinity designer That includes building wire frames and grits, which are the building blocks off every website, using assets to make the design process ultrafast, creating text styles that lets you change funds in a blink of an eye. And, of course, designing a website, you will learn how to design it from opening the file through place and images, adding text and backgrounds right up to export in the design you would ultimately hand out to a client. We got a lot of the good stuff to cover in this course, and I truly believe that it will help you tremendously in designing amazing websites inside a fitting to designer, so I'd love to see you inside. 2. Introduction to the course: this course is all about using a fit into designer for Web design. If you're not too familiar with software first, you'll quickly learn what it's all about and how to set it up for Web design. Before we start designing anything in Afinitor, Designer will take a look at Web design concepts and good practices. You will learn how to choose colors for your design and where to find color, inspiration and ready made color themes. You will also learn basic weapons and topography, which is extremely important not just for good Web design but for good design in general to learn all about body taxed headings and how toe pair them for great user experience. Then we'll take a look at a typical websites structure. Design wise, of course. We'll talk about logos, navigations side wars and all the other websites building blocks. After that, we'll talk about what's in and what's not in in the weapons on world right now. We'll also search for some Web design inspiration around the Web. With all that knowledge and skills will move on to the design part of the course when the designs done will take a look at finalizing your work, you'll learn how to properly save and exported for various file formats. There's quite a lot of good stuff to cover, and I truly believe that once you've completed the course and practiced on your own, you'll start creating amazing website designs in a fit into designer in no time. So let's jump right into the course and start with the fundamentals. 3. What is Affinity Designer and how to set it up for web design: If you are completely new to offending the designer, here are a few facts about it. First of all, offending the designer is first and foremost a factor graphic design application. But that doesn't mean that it is not suitable for Scream and devices design. In fact, it's a great combination off tools and abilities meant for on and off screen work. At first it was just available for Mac OS, but since late 2016 you can also install it only Windows Machine. In this course, I'll be using a PC version off the software. However, if you have designer installed on a Mac, you shouldn't have problems following alone. Just remember that whenever I'll be using the control modifier keep, you would have to use the command modifier key. And whenever I will be using the Olt modifier keep, you'd have to use the option modifier key on your keyboard. The shift key is the same for both operating systems. What's great about designer in terms of interoperability is that it allows you to work on and export to various file formats ranging from standard vector, once like as V G and E. P s to a standard raster files like J. P, G, P and G and Gift. It allows you to open standard PSD and A. I files, and it does the job really well. It can also export your artwork to file formats that can be read by other pieces off design software like Dobie Photo Shop and Adobe Illustrator. So if you need to save your work as a PdF tiff or even PSD, you can do that in affinity Designer. So if eventually you'll be sending your designed to a developer, you can do it using a standard PSD file, and you don't have to worry that the developer won't be able to open the file. You produced affinity designer supports, layers, symbols, photo shop like effects, guides and grit, and virtually anything you would need to design websites with it. I gotta tell you that all that is just a tip of the iceberg. I mean, the software can do so many things, and there are some aspects of it that make it batter than illustrator or photoshopped. For certain types of design jobs, it's a really a one stop shop for design needs. You can design logos with it websites business cards, virtually anything that your client might want to be designed. But this course is not about learning. All there is to know about to faint a designer. If you need that, take a look at my how to quickly get started with affinity designer course where you can learn all that is to know about. The software in this course will focus on using the program in a Web design scenario, so I think we can take a look at the Web design abilities off designer right now. 4. Affinity Designer’s web design abilities: Afinitor designer is set up for great You. I design experience right out of the box. There's really not much you have to do in order to take advantage off all of its Web design abilities, which will take a look at now. First of all, offending. The designer supports layers, which is quite important if you want to make your design neatly organized. It's always a good idea to put your separate elements building separate parts of a website design on distinct layers. Elements comprising the header should go on a separate layer. Elements comprising the sidebar should go on a separate layer and so on. It's a good production technique to name the layers properly. Instead of leaving their generic names, such as layer one layer to etcetera, you should rename them and give them more logically descriptive names that would relate to the layers content. For instance, Hatter Food ER sidebar article, etcetera. I would even go one step further and creed sub layers worth logically descriptive names, for instance, that creates sub layers for just the navigation or Brandon blocks sitting inside the hatter layer. There's really nothing more indicative of a sloppy design and designer that holds all of its contents on just a single generic layer. If you are a fan of shadows, Grady INTs and blurs, you'll be happy to hear that designer offers a variety off effects that you can end to your artwork. They are non destructive, which means that they don't modify the artwork permanently but are being dynamically added to its and can be changed any time you want. It would be a lot more difficult to create website designs without our boards. They're the best way not only to design mobile versions of the Web site but also to showcase your work. The most important thing he needs to bear in mind when creating websites enough in into designer is that by default, when you create a new file, you will not create an art board. The southward lets you choose whether you want to create an artwork or just leave than default page. So remember that when you do want to create in our report, when you're creating you file, check the create art aboard option. Of course, if you simply forget about it or change your mind, you can always use the art aboard. Still to create an art board website Designs need pixel perfection, and you can use designers, whole family of tools and options. Just for that. What's great about this feature is that you can simply choose a you I design snapping preset and be sure that the snapping options perfect for Web design purposes are turned on . It will also turn on the force pixel alignment and move by hold pixels options just to make sure that all objects are snapping and moving properly. When you have the snapping. Turned on design will show you when the objects are aligning, but also will indicate the distance in pixels between specific objects. The U I designed snapping preset will also make your artwork snap two guides and snap to grid. So if there's using them in your workflow, you I designed snapping preset will let you align the artwork perfectly with them. And if you have never used the grid before because it was too confusing, you'll be happy to hear that Designer offers an automatic grid, which finds the best settings on its own. You don't need to count everything on your own. The grid will change depending on the Zoomer value you set. Of course, if you want, you can change the grid to manual and enter your own values. You can also use the guides manager to put your guides precisely where you want them to go . Afinitor designer is primarily a factor design program, but it allows you to mimic the pixel environment your website designs will ultimately live in. For Web design purposes, you could use the standard pixel view and a high pixel density retina view. This will let you preview or design as if it was made entirely off pixels. A website can't live without text. It is so important that many designers make it the center point of their designs, removing as Manny graphical elements as possible. And it's really easy to work with taxing designer. In addition to your standard character and paragraph options, you can create text styles which speed up the process off switching funds. Within your design. You can have tens and tens of different text styles, and you can change practically every aspect of them. Designer counts with the ability to build your own libraries off assets that you can use when designing websites. It comes with pretty find Iowa's 10 assets that you can just drag onto the paste board assets were kind of like symbols. About the difference between assets and symbols is that you can create libraries off assets that can be exported or embedded into a specific document. And you can't do that with symbols enough into designer. So say you're building a wire frame for your website. You would want just the schematic elements for that right? Simply create your own representations of a logo navigation system. Block boasts etcetera, then selected, and from the panel menu, choose and from selection. The element will go straight into the assets library and be waiting for you. Should you want to use it again. Offend the designer comes with these separate workspace meant just for exporting elements of your design. It's called to the export persona, and it's a great way to export sliced parts of your design. You can just grant the slice tool, create a slice out of a certain design element and exported as a separate file advocacy. There are a lot of tools and options that allow you to create gorgeous website designs in a fit into designer tools and Panelists like the layers are towards snapping. Manager etcetera will help you in creating your own Web sites. But trust me that we just skimmed the surface here. There's so much more to designing websites using offending to designer and you'll discover it all as the course progresses. I guess at this point we could jump right into creating our first design, but I want this course to be something more than just a showcase of design techniques and processes. I wanted to gain Thora knowledge on contemporary Web design. So next we will take a look at the principles of good Web design, followed by practical information on colors, typography and elements used to put a website together. 5. Top 10 Principles of Good Web Design: If you are a starting Web designer, the abundance of info you have to discover and learn can make your hands spin it. That is why I've put together a list off 10 essential principles off good Web design that will help you in getting started. Look at each of these principles is a kind of a guideline, but not an absolute rule that you can't band. However, following them, especially if you're just starting out, will allow you to avoid a lot of rookie mistakes. So good Web design always cares about to the end user. After all, as Steve Jobs put it, the design is not how it looks, but how it works. And it must work flawlessly in terms of serving the visitor in the best possible way, you must design the website with its purpose in mind. You must think, as the user would think when he or she would be visiting the site, think what the visitors will be expecting to find on the website information, entertainment, maybe products. What does this entice in terms of design and then designed the site accordingly? This one is extremely important, and I have to admit that I have a kind of a personal bias towards poorly executed text on the side. I'm not talking about specific topography, but about taxed composition. The user wants to find and consumer the information quickly and effortlessly. That is why it is so important to build your paragraphs correctly. Nicely composed text has headings, short paragraphs and bullet points for easy reading. I think that to the length off paragraphs is crucial for information oriented designs. In recent years, mobile copyrighting has been spreading around the Internet, making the whole paragraphs as short as one sentence. A good number of sentences in paragraphs is usually 2 to 3. It is generally agreed that sense serif typefaces, meaning the ones without decorative endings on letters, are easier to read on digital screens. I wouldn't look at it as a dogma, but I would strongly advise not to use more than two different typefaces within your design . Whether you go for Sand Saref or Serif Typefaces is subsidiary to stick into your funds choice throughout that design. If you decided to go for Sarah headings and some serif body, just stick to them. The layout of your website should help visitors in finding the information rather than making them search for it in frustration. That is why it is important to construct the design that allows the human eye to easily navigate the content from top to bottom and left to right from more important to less important. Soon you'll learn more about color theory and how to use it in Web design. But for now, just remember that the colors you choose can make or break your composition. It's essential to create color schemes that would help the users understand the message of the website and find the information they're looking for while making the design aesthetically pleasing. 6. Top 10 Principles of Good Web Design - continued: images can help you in knots, just making the site nicer to look at, but also to tell a story. They can engage the users on a deeper level if chosen correctly and paired nicely with the Sites color scheme, they will help you tremendously in creating a beautiful and useful design. Recently, it is getting much more common to use customer photography rather than just cheesy stuck photos downloaded from the web. Just remember to optimize the images when handing the design over to a developer, and optimize means to compress the images so they're smaller. Size helps the website load faster. Most contemporary websites are based on grids, and the one that is used most often is the 12 column grid. Think of it as a Siri's off invisible lines that help you in structuring your website design and in making it symmetrical and easier to code. Those lines are a great help when placing the elements over design. That's just the main containers. Aleck off alignment is very noticeable and creates a sloppy impression. You learn more about grits and how to create your own later in the scores. This goes without saying your design must look well on mobile devices. In fact, you could even create your designs primarily for mobile devices, especially smartphones, and then build desktop designs on top off them. It is called the Mobile First Approach and is a design in response to the fact that users go online much more often using their smartphones, not desktop computers. In any case, your design has to be ready to be displayed on any screen. There's nothing more destructive for a design and then a clatter. Keep your layout simple so they are easy to digest. That means choosing the right amount of colors, which typically is not more than five. It means being consistent about the found choice. But it also means making the interaction between websites elements easy to understand the right space and is important for one major reason. It makes the content consumption easy and enjoyable. There are different kinds of space, and you can use and must be aware off in your design. Spaces between lines. Off text have to be not too small, so the lines of text don't overlap, but not too big either. So the human eye doesn't get lost. I can also play around with spaces between characters. But I would leave for major headings if you want to go for more of an artistic approach in Web design and development world, there are also special kinds of spaces called padding and margin pattern is the space between pieces of content inside a container, and margins are spaces between containers. General rule is this. Pieces off content should never touch each other, and you should always have some space between them. Good modern Web design can't live without a decent amount of white space. White space means empty space between objects and is necessary for a clean, modern look. White space can direct a specific design in a certain way. Use it lavishly if you're going for an upmarket sort of a sophisticated look of your design . So these are the 10 essential principles of good Web design. There are, of course, other principles to consider, such as clear navigation, using the golden ratio or load time. But the general idea is always this. You should design for the user and, by having your clients objective in mind, used these principles as guidelines for creating aesthetic and successful designs 7. The most important factor to consider before choosing colors: just in the right color skin for your next website. Design is along with typography. The most importance make the colors you choose will be the first thing that will catch the visitor's attention and, if chosen correctly, won't make their eyes hurt and fingers rapidly look for the close button. The reason behind your color choice can be just the fact that you like it. It's a part of the whole strategy that helps send the message that your client wants to send. This may sound strange, but remember that you're not designing the website for yourself. You're not even designing it for your client. You're designing it for your clients clients. And that means that the cars off the website must help the visitors understand what the website is about. Browse the site without the feeling of confusion and find the content they are looking for . So how to actually choose the best colors for a specific Web design job? There are very few things you must take into consideration. This will help you understanding the message the website is supposed to be sending and understand what the visitors are expecting to experience. First of all, you must know, what is that your client does, Whether it's a high street company, a mom and pop shop, a charity organization, you must understand that business. You wouldn't go for the same color scheme for a financial company as you would for a toy store, Right? We will talk about color psychology a bit later on for now. Just take a note, too, that colors convey and kindle emotions, and it's extremely important to kindle the right ones. Sometimes of businesses, in a way, force the use of certain colors. For instance, if you're creating a website for an organic food corner shop, most probably you'd go for earth tones, and if you were to create a kindergarden website, you'd go for some more colorful and found color palettes. Secondly, if the company already has a logo or is redesigning it, you have to take its colors into consideration. This doesn't mean that all the colors within the website have to be exactly the same as the ones used in the logo, but they definitely have to complement each other. Thirdly, listen to your client, but don't succumb to clearly bad ideas. I mean, there is a reason why the client hired you instead of doing it themselves or asking their nephew to design their website. But of course, you don't have to be overly schematic if your client wants to stand out in some way. And if you take a look at his competitors Web presence, you can experiment a bit with color schemes. If, for instance, you're designing a website for a modern environmental a company, you don't have to go for dark blue and gray, but Sprinkle things up with the light brown or green. Look at the client earth dot org's website. This may not be the best design in the world, but it clearly shows that the message and emotions arm or important than collar correctness when deciding on a car scheme you want to use in the design. Remember about the type of business your client is and about the users there are going to be visiting in the site. Next, we'll talk about more practical aspect off choosing colors for your designs. We'll take a look at preparing the colors for the best user experience 8. How to mix colors for the best possible User Experience: There are a lot of designers who let their eyes judge of a certain color or color palette will be good for a specific Web design job. But the problem with this approach is the fact that so many colors can look beautiful. And so maney color palettes may seem appropriate for that specific design. So how to tell if your collar choice is good? Is there any way of judging the color combinations you chose? Well, likely Leary's. But we have to take a look at some aspect off color theory, but I promise it will be as practical as possible. Basically, we can talk about four kinds off color schemes, monochromatic, complimentary and the logos and to try attic. So let's talk about these for a second model. Chromatic color scheme uses one base color and various tints shades and situations off it. It's the best choice if you need cohesive design, but you can fall into a trap off using a boring color scheme. Here, compound color schemes, sometimes called split complimentary, are based on two colors from opposite size off the color wheel. When you want to create your own complementary color scheme, take a look at the color wheel and imagine that you are drawing an hourglass on it. Essentially, you're taking two colors from opposite ends off the color spectrum, which gives so your design more freedom than the motor chromatic schemes. If it's consistency you're after in your design, go for and logos color scheme. Take a look at the color wheel again and choose three neighbouring colors. These themes can create a unified field without being born as the monochromatic color askew's. To create a try attic color scheme, draw a triangle whose sides are the same length and choose the colors at the triangles. Endpoints. This creates a diverse but balanced color scheme with equally vibrant colors. Apart from these main types of color schemes, there are a few more factors you must take into consideration when choosing colors for your design. I am talking about complementation, contrast and vibrancy. Colors that complement each other sit on the opposite end points off the color spectrum because they are visually significantly different. It's easier for the human eye to distinguish them. That is why people tend to like batter that designs that are easy to look at, which means that they provide a certain balance and don't force the eye to look for slight differences between colors. In a monochromatic scheme, complementation is used in the Triassic and compound color schemes. Good user experience can't live without proper use of contrast. The most important choice when it comes to contrast is, of course, the big ground and text color. If you're not sure which colors to use, the best practice is usually to choose a very light color for the background and a very dark for the text itself, or vice versa. Vibrancy is the emotional side of the color scheme. Brighter, livelier colors provoke energetic feelings, whereas darker, calm, all colors relaxed the visitors, which helps them in the focusing on other things. These are the main theoretical tools that should help you in making more, well fourth choices for your color schemes. Of course, there are a lot more tools and ideas to use and to choose from in terms of choosing colors . But if you get yourself familiar with the ones we covered, you'll be on the right path to professional color handling in graphic design. Since we mentioned emotions provoked by colors, I think it's a good time to talk about color psychology, which is extremely important, not just in Web design, but design in general. 9. How to choose the “psychologically correct” colors: the colors you choose for your design, create a specific mood. You need to understand the psychology behind specific colors. Color psychology might sound overly scientific, but it simply describes the feelings and meanings people often associate with particular colors. By carefully selecting them, you can reinforce the overall message of a site. Let's take a look at some of the base colors you are most likely to use when designing your Web sites. Red is the most vibrant and aggressive color. It is the 1st 1 to attract men's eyes, depending on which colors who makes it with it can convey power and courage, but also love and passion. Since it's used in many road signs, it's frequently used in websites to alarm the user to inform of danger. Hence, it's a mistake to use it for your call to actions. Such a Spartans or links orange is one of the most pleasant colors to look at. It's hard to miss, and it can evoke fun and energetic atmosphere. Yellow is the color off, the some warmth and summer time. It's also the most visible color in the spectrum, so don't overuse it. Many people will find too much yellow irritating. It's especially eye catching when combined with white or black as it issues in safety equipment, school buses and taxis. If you ask people about to their favorite color, they are most likely to say blue. It's pleasant to look at its unobtrusive and makes you feel comfortable. Maybe it's because it's the color of the sky. It's also the color off water, so people connect blue with refreshment and cleansing blue, especially dark blue, is the most professional. Color, after all, is the color of the presidential suit. So use this color when it's professionalism you want to convey. With your design, green is the color of nature. If your eyes hurt from looking to longer a computer screen, look at the green. It's a perfect and most obvious choice for organic, environmentally friendly and healthy products, even though it is a color of the U. S. Dollar. If you are creating a website for a financial company, don't go overboard with green. Instead, stick to dark blue, dark grey, white and black to convey trust and professionalism. Purple is historically associated with the royalty, which makes it perfect for luxury brands. Also, when combined with other colors, it will lose some of its royal heritage. With red, it can feel intimate and romantic. With whites and pinks, it becomes playful and childlike. Why it means purity and innocence. But it also it's used to create minimalism and sophistication you're most likely to seat on sites. Focus on weddings, healthcare and signs as well as on modern, minimal blog's black is undoubtedly the ultimate elegant color. It never goes out of fashion. It imply strength, luxury, evil, death and avoid. Remember that you can decide which emotions the visitors will feel when looking at the site you designed, so you have an important role to play as the designer. Also, color meanings can vary dramatically across cultures and regions, so it's better to check if the color Joe's is appropriate in a given culture. Now you know a bit about the color theory, and I admits it might feel overwhelming. Luckily, there are tools that can greatly help you in choosing the right color scheme. So next will take a look at seven easy tools for choosing error proof color schemes 10. 7 easy tools for choosing errorproof color schemes: choosing colors for your next design can be a long and even daunting process. For me, it always takes way too long to find the right combination, but likely their whole process can be sped up with some online color scheme generators. Let's take a look at seven easy tools for choosing our proof color schemes. Let's start with Kohler hex a dot com. This sign is great if you're a color fanatic. All you have to do here is to type in any color, value or color name to get a huge amount off info owned that color plus, of course, different color schemes. You will also get examples of different uses off that particular color, along with alternatives for it. And if you prefer any off the alternatives, you can just click on it to see all the necessary information and color schemes. The second tool, called color dot, is really fun and easy to use. This tool allows you to quickly create a color scheme using your mouse drag left and right to change the hue, drag up or down to change of the lightness and scroll up or down to change their saturation . If you're happy with the color click to save it and repeat the process with another color. The tool will only show you colors that work well with the one you chose before you can repeat the process as many times as you want. The next two, called Palatable, is particularly fun to use. You can choose your own color or click on the dislike button so the program chooses the colors for you. If you like it, click Like and Seve, the next color that's supposed to match the previous one matches your taste. You can also remove a particular color to shrink the whole palette on color. Mind. You can choose your own color swatches, and if you like them, you can look them and hit. Generate for the program to find, imagine colors to the ones you chose. What's special about this stool in terms of Web design is that you can choose the website colors option and water palette being applied to a dummy Web page. Material palette was created to mainly for the purpose of fusing material design colors in your designs. So what's material design? Well, it's Google's concept design that's user experience oriented. It's specifically designed to work best on mobile devices and material palette is here to help you in choosing colors. Should you wish to design following the material design principles, all you have to do here is to pick two colors and let the program do the heavy lifting for you. It will not only create a color schemes for you, but also grander. A preview off the scheme applied to a mobile user interface you've probably heard of Can Va ? But have you heard of its color palette to you? Can use it to create color schemes out off imported images. Dragon image onto the interface and let the program pick up the colors from that image. And last but not least, is my favorite color scheme generator. That's totally different in the way it thinks about creating pallets. Instead of typing in the names of colors, uploading images or dragging the mouse to create color swatches, type in the theme event or any word that is describing your design. After a few seconds, you'll get color schemes related to that keyword. Pretty sweet, huh? All these color generating tools are a humble representation of an area of tools you can find online. Most of them will work pretty much in the same way. So if you just find your one or two favorites, that's really all you will need. Next, you will learn the fundamentals of topography in Web design, so don't go away. 11. A super short history of web typography: when compared to the more than 25 year long existence of the Internet. True Web typography looks like a kindergartener. It is only a few years old. Of course, even the earliest websites contained text. In fact, the first ever website was nothing about text, but the phone choice was limited, to say the least. Before the birth off. True Web topography designers could choose from five different typefaces, but only two of them, verdana and Georgia, were created specifically for Web use. The other funds, namely Aerial, Helvetica and Times New Roman, were pulled from the computer's operating system and loaded into a website. Of course, this doesn't mean that designers and developers politely agreed to that too limited concept of having only five available typefaces. The simplest alternative was to use image as text desires could use the funds installed on their computers without given too much concern, too formed license in. But there were two major drawbacks of this method. First of all, in order to turn the full of images design into a website, you had to slice it into a ridiculous number of images in a piece of software like Photo Shop. Also don't forget that this was the time off. Not that fast Internet connection. So the time it took to load a side full of images was significantly longer. Everything changed in the 2010 when Google created its own library off Web funds. They are free, mostly well made and definitely easy to use both for designers and developers. This has changed the world of Web typography. Nowadays, you'll find Web specific funds in all the major typography foundries, and it's hard to imagine designing websites. Without them. The rise off responsive Web design has made their typography go through a new kind of transformation. The fact that your work is going to be viewed on different devices makes it impossible to predict what a specific fund is going to look like on a specific device. However, there are some basic rules for choosing the right funds for the right kinds of jobs, and we will talk about them next 12. How to mix colors for the best possible User Experience: properly chosen. Typography for the project means that it helps to send the message off the website. It's also important to remember that typefaces, just like colors, can provoke certain kinds of emotions. That's why it's important to choose your friends carefully and with the reader in mind. People viewing the website will spend most of their time reading the body text. That's why it's a good idea to choose the fund for body text first. The typeface you choose needs to be unobtrusive ledge a ble and readable. There are a few ways of choosing funds with those characteristics, but I promised to keep it as regular designer friendly as possible. I mean, not every designer is super stoked on topography. So what are the features off unobtrusive and legible funds for your website designs? A readable found has lots off X height, which is the vertical measure of a lower case X. The shorter the X height, the smaller the latter will appear, which can cause the type to become illegible. On the other hand, too much X height can make the letters M and H difficult to distinguish. Take a look at the same word written in Lotto and open sons to compare their ex heights. The second thing to take a note off is how open the apertures are. But what our apertures apertures are the gaps in letters like a C or s. The more open they are, the more legible the letters become. You also must pay attention to the A. Senders and D centers of the latter's passengers are the strokes that extend above the mean line and D centers are the strokes that extend below the baseline. The more distinguishable they are, the more legible the text becomes. Most Saref typefaces are often ideal choices for reading longer passages of text. Due to the noticeable strokes in their A senders and D senders. Your body tax typeface choice should contain at least four different styles. Regular italics. Bold and bold italics. If the typeface doesn't contain an italic font, the browsers will forcefully slanted. And if it doesn't contain a bold version, the browsers will double up the regular version of the front, making the text hard on the eyes. The last thing to take a note off when choosing typefaces for her body text is the contrast between thin and thick lines within letters. When you take a look at typefaces like Play for display, you will notice huge contrast between thick and thin lines within separate platters. Typefaces like that can look great in heading designs for fashion blog's, but they won't work well as body taxed. Now you know what the five crucial traits off typefaces that will work fine as body text. Those typefaces will have generous X height, open apertures, distinguishable ass enters and D senders, at least four styles and weights and small contrast between lines within ladders. No, it's all good and fine about the main question still remains unanswered. And that question is, How big should the body text be? Well, the short answer is 16 points. It's the text size browsers display by default. It's the text size browsers were intended to display. Generally, this size works well for laptops, desktops and phones. And what about the line height, which of course, means the vertical distance between lines of text. A good rule of thumb is to add six points to the body text phone size, so if you are using 16 importance as the body text phone size go with 22 points as the line height. Of course, you can experiment with other line height values. In fact, many modern blood designs use more generous line heights, so we got the body. Text typeface is pretty well covered. If you follow all these rules, you will do the users a huge favor by making reading your site a pleasant experience. You'll always save yourself a lot of time and avoid typefaces. They're not worth ending up in your design. Next, let's take a look at crafting attention grabbers. We'll talk about headings. 13. How to choose the right fonts for headings: good headings and sub headings are those elements of a website of design that attract users and encourage further reading. That is why it is essential to learn how to create them correctly. If you are not sure with typeface to use in peril with the body fund, just go for the same phone family. For instance, if you chose open sands to be the body fund, go for a bold and enlarged two or even a threefold version of it for your headings. This will make the design Luke harmonious and reduce the time needed to loaded the site. That's the quick and easy way, but chances are that sooner or later your designer so will prevail and will urge you to mix different typefaces. You'll want to use one fund for body tags and another four headings if you want the best of both worlds. I mean, if you want to stay on the safe side and still spruced the topography of your website a bit up, you can stay within one super family. For instance, you can choose droid sons for the headings and droid serif. For body text. You'll find some good super families among Google phones, for instance, Roboto and Roboto Slab Merryweather and Merryweather Sands or Noto Santas and Noto Saref. The next big question is, how big should the headings be? First of all, remember that your side is going to use a maximum number off six headings. Not all of them have to necessarily be included in the design. I mean, typical designs don't go below heading for, but it's a good practice to develop a set of sizes for all headings to put them. Simple headings are titles off the websites components heading one is typically reserved for the sights branding, so technically it doesn't need to be text at all. It can encompass company's logo, the headings that most of your designs are going to rely on our heading twos. Those guys are your block titles, main section titles, etcetera. I would recommend making them at least 32 points big, which is double the size of a typical body text size. The line high troll of adding six points to the font size also applies here. All other heading sizes will vary depending on the job they're doing within the design. For instance, heading three is usually used as title off cyber elements. So it's size must work well with the whole design concept, rather than just be a percentage or some kind off a derivative Off the other headings. However, if your design will go deep down as head in six, I wouldn't recommend making it smaller than the body text size itself. I mean, heading smaller than the body attacks itself. That's just hilarious, isn't it? Now you know how to choose typefaces for both body and headings. So now it's time to look at mixing them together. Let's do that next. 14. How to mix fonts for headings and body text: lucky for us. There are a ton off resources and on lentils for easier for parents. Let's take a look at some of them now. The 1st 1 is a tool built right into Google funds itself. When you choose a typeface, let's say open sands and click on See Specimen. You will see a breakdown off the front. In the bottom left corner, you'll notice a list off popular front pairings. All you need to do is to choose a front pair. And what should being applied to the piece of text on the right? You can also check with the front is going to look like as heading and as body text. But there is one major drawback off this tool. You only get a modest preview off the funds in action. It's difficult to imagine just by looking at these pieces of text what they are going to look like in different scenarios. For instance, on a call to Action's Sliders cards etcetera to see some more front pairs. Along with extended examples, go to phone start great simple dot io. Here you'll find a few uncommon Google from Paris you can consider when designing your next website one off the largest and most visited fund parent, ALS, is front pair dot co. Here you'll find an extensive library off front pairs divided into specific categories. Convey you any combination off Saref, San Serif and cursive funds, and if you like any of the front pairs, you can just download it with a single click. You'll get a ZIP file that you need to unpack and install phones hiding inside. But of course, the biggest repository of Google Front pairs is Google itself. I mean, if you just Google Google phone pairs, you'll find Tom's and Thomas off articles on the ready made from pears for you to choose and use. So if you are always debated with yourself, which funds to use, it's a good idea to look at the suggestions from other designers who successfully went through this painstaking process. A word of caution here If you notice a word display in a typefaces name, that means that it is meant for headings, not body taxed. So if a fund pair suggests a display kind of fund for body text, that is just bad advice and ignorance. So be cautious off that these are the most common ways and tools to find great Google phone pairs. They can be a great way to design a unique website, just very mind that you're not just after the artistic effect, but also after legibility. Next, we will briefly summarise this section and focus on the three most important aspects off well chosen funds for your website designs. 15. The perfect font for User Interface design: Let's know something's up and take a look at three major aspects off any fund that will be grateful your Web designs. I think that by now you understand well enough that your designs should serve your clients audience. If a user visits the sites you designed and leaves it after a few seconds because he or she can't read anything, that's a sign of a bad design. The best indicators off legibility are clear distinctions between letters that might look similar. For instance, Capital I and Lower case L well chosen typography stays out of the users. Wait, so to speak. I mean, it makes the reading process easier. But reading is not just for viewing block posts. It's also for reading product descriptions, reading called Toe Actions on buttons about me sections of websites. Therefore, typography is a mean off getting the user from point A to point B as fast and as genuine as possible. So dependent on the websites goal, whether it's selling, subscribing or informing easy to absorb topography can greatly help or impede region of those goals, and lastly, good you I typeface works well across different screen sizes, no matter what device or website is popping up on the typography mass remain legible. Some people claim that Sarah funds are harder to read on smartphone screens, then sans serif phones. And in fact, people with reading disorders or visual impairment might find smaller serif tax harder to read. But if a serif web typeface is well composed, it should be easy to read, even on a smaller screws, even for people with reading disorders which ever found to choose. Remember that the purpose off any text on your website used to help your users accomplish their goals. Consider the whole context, rather than just relying on a set of rules when you make your design choices. So far we've learned quite a lot about colors and typography in Web design. Now it's time to take a look at the building blocks of a typical website. 16. Header, branding, navigation and Hero sections: When designing websites, you must remember about certain blocks building it. Some of them will always be present in the design, but some of them are optional. Let's take a look at how a typical website is built. We're going to dissect a website starting from the top and moving downwards. The very first building block of a website would be eats Hatter. It is a container that usually holds the Brandon information like the logo and tagline, some kind of navigation system and sometimes contact information, including social media wings. A lot of website designs, including search box in the header as well. Typically, the Brandon sits on the left and the navigation on the right. The optional contact information and search system can also go on the right, above or below the navigation. But this is just one way of presenting the Hatter. In some designs, especially modern blood designs, the Heller contents often get centered, so the logo is in the center and the navigation goes beneath it, and he's also centered. I think it makes the design even better organized and easier to understand. What goes beneath the heather is optional. I mean, you can include something that is called a hero section. So what's that? Basically, it's a component showcasing key content on your side. Its main purpose is to quickly grab the user's attention and explain what the Web site is about. You can often see it on the market insights where you're asked to enter your email address to get a free e book. Ooh, a report or something like that. Typically, Hero section contains a full background image or a video with overlaying content that topography is big and bold, and most often you will find some sort of a call to action here as well. Sometimes the full background image is shared between the header and hero sections in response of versions of the design, especially in mobile phones, a hero section can transform into something completely different. The background image can be replaced or even a completely removed, making the design lighter. Another idea for the hero section is to use the slider, which is a showcase of images or a combination off images and text. Those images are interactive and change automatically or on user interaction. However, nowadays sliders are starting to become redundant. First of all, they are not too s yo friendly. Secondly, they are too heavy and a bit pointless on the small smartphones screens. But the whole hero section is really optional. In some cases, it can be actually obstructing the whole purpose of the website, and I'm talking about block designs. A blonde is mostly about the articles, so user visiting a website should be presented with what he or she is expecting to find here, which is the articles exactly. Of course, the articles can be presented in a more interesting way than just clatters off text, but we will talk about and about other sections that go beneath the hero in the next video . 17. The center and bottom sections of your website design: Now let's move past the header and the hero sections and stop of the articles and sidebars . These sections will look different not only because of your design choice, but mainly because of the nature of the site. They will look different for a blawg different free corporate or personal site. Annual C variations within those concepts to make things simple. If it's not a blawg, the section beneath the hero image will look like horizontal boxes, separated by content and colors they can contain mixes off icons, text images and links. The main reason behind creating these sections in a specific way is to make them easily readable on mobile devices. The key here is to create the desktop design on top off the mobile design. Anything that will look good on a smartphone should also look good on a desktop computer in case of block designs. These sections will most likely encompass the articles, and they can be presented in various ways. But one common denominator is that they always will have the articles titles they can also present featured images, block post excerpts, links and other information. Sometimes, if it is an e commerce website, articles can contain product photos, descriptions prices at another website building block that can sit next to the sections or articles is a sidebar. A typical sidebar contains information that, in a way is complementary to the main message off the website. It could be the blog's author info. Social media feed latest posts, tags call to actions, related products, etcetera. Interesting thing about sidebars is that they can sit on the right side of the page on the left side or on both sides at the same time. Of the last central building block of a website is it's footer footers have really grown over the years from simple one line sections containing mainly the copyright in folk. They've evolved into sophisticated boxes with lots off additional data. Footers as well as headers are the same on each and every site, and they contain information that doesn't change. No matter what page the user is currently viewing, they are a one stop shop for all the essential information user might need. That's why, in the footer sections you'll see quick bios or about me links to most important pages or recent boasts. A recent Commons social media wings or whole subsections with social media feeds such as instagram photos. Footers are usually easily distinguishable thanks to the use of contrast in colors in relation to the whole website. If they are done correctly, they make the whole site look professional and neatly designed. To sum things up, a typical website will contain a header. A hero section sections with articles, sometimes sidebars and always f footer. Now that you know how to structure a website, it's time to look at grids. They might look scary at first, but they help in creating a symmetrical and easier to code websites, so let's take a quick look at them next. 18. What are grids and how to use them: So what's a grid? Think of it as a serious off invisible lines that help you in structuring your website design and in making it symmetrical and easier to code. Those lines are a great help when placing the elements of your design, not just the main containers. A lack of alignment is very noticeable and creates a slumping impression. A typical grid is constructed of units, gutters and columns. Let's take a quick look at those using a 12 column grid as an example. Units are the basic building blocks off every grid. They look like long, a bit narrow columns with a bit of space on each side of them. Gutters are spaces sitting on, both left and the right side of each unit. It doesn't matter if it is a center for right or far left unit. There is always the same amount of Ghadir on both sides of them. The columns have the most confusing name off all the grits building blocks. Basically, they are clusters off similar content, spread out on a specific amount of units and got hers. The most common and versatile grid is a 12 column grid. It is a great common ground. For both designers and developers, it's the biggest advantage is that it can be easily divided into different clusters of units. For instance, you can have four columns created out of three unit clusters, six columns created out of two unit blasters and so on. The beauty of this system is that you can mix columns together. For instance, on the left, you can have an eight unit plaster and on the right, a four unit cluster and so on. The trick here is to divide the grid into columns whose some is always going to be 12. You can also makes columns horizontally, so to speak. One section can be divided into two columns, another into four, another one into three and so on. I'd advise using the grid all the time. At first it might be a bit awkward, but after a while you love the grids. They will help you tremendously in creating cohesive, aesthetically pleasing designs. If it is easier for you, you can just download a PSD version of a 12 column grid and easily use it inside. Affinity designer. You can just google 12 column grit and you'll find lots and lots of examples, but I think that for the sake of understanding it a bit better, which would design our own let's do that in the next video. 19. How to design your very own grid: Let's open up designer and create a new document that is going to use the Web profile for the page preset. I'll go with full HD and I'll check the creat art aboard option. I'll leave all the other options intact. Before I start creating anything, I'll make sure that to the U I design snapping preset is turned on. This will help me in creating a big slipper fact grid. Let's start with creating a basic cracked angle that is going to be 1200 pixels wide. This is important because we're going to be creating designs based on a 1200 pixels grid with and 1200 pixels is the most typical with of contemporary websites. Let's make sure that the rectangle is exactly in the middle of the art aboard, and now we can move on to bringing out the first guides. Oppressed the control, are key combination on my keyboard and bring out two guides that will snap on both sides off the rectangle. Our grid is going to follow the bootstrap guidelines. If you don't know what bootstrap is, let me just quickly tell you that it is a Web development framework that it's widely adapted in the W W W world. It uses a 12 column grid system where all columns have 15 pixels off patting on both sides . That's why now I will divine the rectangle by 12 using that transform panel, and I will make sure that to the transformation starting point is sitting on the left. After that, I will subtract 30 pixels from the result in rectangle, because 15 pixels plus 15 big slips off patting on each side equals 30 pixels. The last thing to do is to move the column by 15 pixels to the right, and the base unit is ready. Now let's clone on the first column to the right by pressing and holding the control key till the cloned column snaps with the original. After that, all we need to do is to move that guy by 30 pixels to the right. Now, if we just clone in the second column to the right, designer will show us the distance between the columns and snap them in place when the distances are equal. All that's left to do is to press control plus J on your keyboard. To duplicate the last transformation, which was cloning and moving. We need to do it nine more times until we have all the 12 columns. Now you have your very own custom made 12 column grid for a website design. If you want, you can change the color off the columns, change their transparency and, of course, its size. Once the design grows in height, when we move on to the actual design part of the course, you will see this very same grid in action. But before we do that, let's take a look at what's in right now in terms of Web design. Let's discover the latest Web design inspirations. 20. 7 web design trends that rule the web design world: In the next couple of videos, we will take a look at modern Web design trends. This will help you in understanding the design of patterns that designers are following these days. Let's start with menus that are hidden at first Glenn's. They usually hide behind three chorizo NITEL bars called a hamburger manual. Just click on them to see a full flashed navigation system. If you think that this is a way to mimic the mobile APP menus, you are absolutely right. Since more and more people are browsing the Web using their smartphones, it makes Santa's to transfer some of that experience to the desktop website. The designs, one off the benefits of hidden navigation, is that it creates more space on the main page. It allows main contents to be more prominently featured. Another benefit of the his name menu is the fact that you can combine it with a traditional menu if that design needs it. If you have a lot of places to take the user to, you can hide some of them under one menu and show others in the visible menu. Design wise mobile menus often used background colors contrast in with the overall color scheme of the site, making it to stand out from the rest. The text links color contrast with the background for easy navigation. It seems like users have grown used to see navigation systems as simple three lines that needs to be collect in order to see what's hiding underneath. That is why you can freely experiment with hamburger. Manu's in your designs. Contemporary user experience is slowly shifting from visuals two words. That is why typography is playing a bigger role than ever before. But what does big and bold typography mean? Well, it certainly doesn't mean that you absolutely must use only bold versions of the typeface and set it to the highest size possible. It means that a lot of designs have a decent amount of space for clean and concise text right in the middle of a certain section. The most obvious example of that are, of course, hero's actions. With big typography over lane background images, the modern UX shifts towards slogans that are clean from size and useful, which means that in the future, typography is role in design will be bigger than ever before. The smartphone revolution has undoubtedly changed. The way people interact with the Internet world. But there is one aspect of that revolution that is quite often omitted, and that is really important for US designers. Until just recently, the main operating system used to go online with Microsoft Windows. But now it is Google's android, and Google has come up with their design system, called material design and material design light. That is why designers who want to create a seamless you I experience for the users hand to use material design visuals. Ideas in the Web designs. Material design isn't away in a Hanson flat design. It also focuses on the simplicity but adds a touch of three dimensionality. If you want to use it in your designs, you'll be happy to hear that it comes with a whole spectrum off you y tools, colors, topography, interactions, etcetera. You can check them allowed on the material that I owe. Website. There is no denying to the fact that fastest growth and development is in the mobile devices world. It has significant repercussions for Web designed to, with the emphasis on the word design. Visual communication shift started by the mobile APP design is making its way to Web design as well, and it all started with Instagram's logo change. Contemporary design often uses more and brighter colors. Together, he has Grady INTs are back, but they are consigns and somewhat subtle. They're often prayed with simple flat design icons and prominent typography. What's interesting? Radiance are making its way toe icon and logo design as well. But as always, in the case of Grady INTs, you have to be really careful not to go overboard with them. Luckily, there are online tools that can help you in create nice looking ingredients for your Web designs. The best example is a tool called U I Grady ints dot com. Here you'll find a fantastic collection of beautiful Grady INTs, along with the color codes for Easy Implementation, one of the fastest growing elements in website design. East. The use off video from full screen moving images often used as backgrounds instead of images to pop ups and embedded video from social media video is a must have when it comes to content. The most widespread usage of video is it being displayed as the background in the hero sections of websites. The best way to use video in this format is to make it complementary to the message and a call to action that are being put over the video. But sometimes, especially on personal websites, videos are unobstructed by any visuals. They are kind off presentation off the website's owner. There are also videos that in a way mimic still images. The movement of the site is limited. Imagine wind blowing in the trees, making them perfect as a background videos, but added that extra special something to the design without being distracting. Internet says that video is king these days. It's quite possible that at some point of your design, career will be asked to design a website that is going to be using video in some format. That's why it's a really good idea to take a closer look at this trend. More and more designers accept the fact that they really need to think about their designs as being viewed more often on smartphone screens rather than laptops. That entails a total shift in developing of their designs. The desktop version of the site becomes Onley, a derivative of its mobile original. That designer must ask him or herself. One fundamental question will it look good only smartphone. But the question may eventually change in the future with the development off wearables. Maybe it's time to start asking ourselves, Will it look good on a smartwatch? Which brings us to the last rent on our list, which is cards you I design. The idea behind cards is to stuff the content into small containers to make it cross device . From smartwatches to large desktops. Each container is a cluster of information on a specific idea. The interface is simplified and easily understandable. This approach is also used in many modern blog's, where one article on the landing page has its own module. These are the seven most important trends in Web design today. It's a good idea to be aware of them as they're not just about visuals, but they are rather whole concepts off effective content delivery to the users. Next, you will take a look at a few places around the Web where you can find some great Web design inspiration 21. Where to find the RIGHT inspiration for your next design: In this video, we will take a look at a few places around the Web where you gonna find great inspiration of your next Web design project. The first website that I would recommend is called a words dot com spelled with a triple double you for www. Here, you'll find many different design examples collected in categories such as illustration, corporate blogging, etcetera. If you like a particular design, you can visit the source website and take a look at how they are constructed. What, if any, trends there following and simply learn from the best second website that I would recommend is a WordPress theme marketplace called theme forest dot net. Here you'll find not just WordPress themes, but also HTML coded side designs. It's a huge repository off different designs For your inspiration. You can choose from a lot of different categories, and you can also preview how a certain design works in real world. You can also visit Web design inspiration dot com here, even also just specific tags and categories you wish to sort their designs by. It's a big resource off various designs. I think it is the variety that is the most important aspect off this Web design repository vilified lots and lots off Web design inspiration repositories around the Web. If these three are not enough for you, although I think that for starters they will do just fine, you can just Google Web design, inspiration and immense yourself in the Web design world. I think that by now you have just enough no list to start coming up with your own designs. You know the principles you know, the trends and where to look for inspiration. The next part is to start to using affinity designer to make your ideas come to life. 22. Every website design needs scaffolding: from a typical eager designers point of view. Creating a wire frame for a website design is as boring as it is redundant. Well, that's not true. In fact, a wire frame can help in tremendously speeding up your workflow, and it can save you a lot of time. Many ideas that seem great in your head when you are picturing them tend to look poorly when put on a computer screen. And trust me, I know this from experience, but what's a wire frame, and why am I making such a big deal about it? Wire frames are schematic versions of websites that help you in visual izing of the websites building blocks. There are a ton off plug ins, online tools and resource is paid and free that to help you in creating wire frames. But in just a second, we will design our own wire frame library, or at least the essential elements of a wire frame, and then we will import them to our assets library. But first, let's dissect the idea of wire framing and its practical application. For starters, you might want to create simple boxes that would correspond with the websites elements. It's a good idea to put it against a good you already are familiar with this preliminary stage is the most basic way off. Building a website scaffolding Think of it is a simple doodle that is supposed to show you if what's in your head will look good on paper or screen. The most typical boxes would be representing a Brandon Element navigation heroes section, image, banners, footer, etcetera. The next step would be to build to the information hierarchy with type. At this stage, your font choice is not as important as is using different fund sizes to show the differences in importance of the websites elements. Typically, the more important elements will be presented to use in a bigger font size, and the less important elements will be presented using a smaller font size. Next step in emphasizing the importance of the websites elements is by using different shades of gray. The general rule says darker colors mean mawr. Important elements and lighter colors mean less important elements. So this is what a typical wire frame looks like. I think it's a good idea to have your own wire frame library so you can use it whenever you are designing a website. Affinity designer allows you to build your own wire framing elements and put them in separate groups off assets. Let's take a look at the process of building these elements in affinity. Designer. 23. Building your own wireframe in Designer: when building your own wire frame system, I think you should start with those elements that you are most likely to be using in a typical Web design scenario. I mean, if you want you can a creed, all the elements you can possibly imagine. But I think that if you create the essential elements first, we'll have a great base for building and expanding wire frames. But what are those essential elements? I think we're going to start with a brand in block a navigation, along with a hamburger menu, a hero section block boast, a horizontal text and background divider. Icahn Sidebar and a footer. These days, it might be a good idea to create a video wire from elements to for reasons you already are familiar with. So let's build our essential wire frame library. I want you to consider it as a starting point for building your own library. I want you to learn the process and the logic behind it. This will allow you to create your own extensive wire frames. I got a simple full HD document already created, but honestly, any documents, signs that would allow me to create your artwork comfortably will be fine. Notice, though, that I didn't decide to create an art board for this kind of a sketching work. I don't think an art board is necessary. I will also make sure that the U I Snap in preset East turned on. I will start with creating an image block. This one will be used in a lot of elements, so I think it's quite logical to start with it. I will just grab the rectangle tool and create a rectangle in the transform panel. I will enter 16 for with and 94 height, and I am doing so because 16 by nine ratio is the most typical screen aspect ratio. And images on a Web site will are usually displayed this way, and so are the videos. Of course, it is way too small tube usable, so I will look their proportions in the transform panel and increase the size off the rectangle. But the fact that we started with the 16 by nine pixels will make the new rectangle foe that 16 by nine aspect ratio. I don't want us to have any stroke, but I do want to have a quite a darker gray, Phil once it's created, I will draw two intersecting lines that will indicate that to this, actually is an image element. So I will grab the pen tal and put it in the line drawing mode. I will joy, Simple line that is going to have a one point white stroke. And no Phil, of course, I'll drop the opacity down to around 25 to 30%. Lastly, let's copy the line and based it back in. Then let's flip it horizontally, using the context panel. All that's left to do is to bring it into our assets library. And by the way, if you don't have the assets library on, just go to the View and then studio and choose assets in the assets panel. I will create a new category, which I will rename as wire frame. Now I can just select the image and from the panel menu choose and from selection to start building their library. And just like that, we got the first element created, and we already started building the library. Let's continue, though, in the next video 24. Let’s continue building the library: I'll start by creating a video wife ring element. And for that I'll clone the image element and get rid of the inside lines. Now let's create a play button symbol for that. Let's grab their triangle tool and created triangle that we will have to rotate and re size a bit. When that's done will give it a white Phil. Drop the opacity down to 25% and align it with the rectangle. Let's group these guys so we can now add them to our wire frame library, just like we added to the image element. Now we will create an image and text combined element. Again, I will reuse the image I already have, but I will add a title and excerpt elements to it. For that, I will grab the frame text tool and draw a text box that will be as a Zweig as the image. I won't right any text in, but I will use the insert filler text option instead. Of course, it's a good idea to make the title look like a real heading, so I will change the font along with its size and style. I will clone it down now and change the front family, Sonny's style and the leading as well. So with this part can look more like a Blawg post excerpt. The benefit of creating this element in this specific way is that after I turn it into a group and then into an asset and then drag it onto the page, I can no resize it and let the software populate the text frames with text. And still, if I want, I can resize the text frames, do shrink or expand both the title and text excerpt, and that's pretty handy. Next element will create is they'll logo again. I will use the image element, but this time I will turn it into a square. I'll also add one word on the right side of it. Now I will group of these guys and turned them into an asset. Next up will create a navigation system. Well, that's as easiest at in one piece of text editor, then duplicating it. They're fun to use for the Manual Inc shouldn't be too big nor bold. Let's also create a hamburger menu. And that's those three horizontal lines covering the main man. You remember? Okay, great. Let's grip the pen tal and then make sure it's in the line mode has created a simple line that's going to have a two point someone to dark stroke and no Phil. When that's done, let's duplicate the line twice and turn our hamburger manual into an asset. Our next order of business is creating a hero section, and this will actually give us an opportunity to take advantage of a pretty big flexibility when it comes to creating assets inside a designer. I was stuck with borrowing the image asset and in large, and it quite a bit. Next, let's create a big and bold heading written in contrast, in light color, followed by some smaller body text. The last accent here would be to add a call to action. So let's create a button using the rectangle tool and the type tool, of course, that will group the button elements and then group old pieces except for the background but a line everything nicely to the middle of the background image. If we know group all these elements weaken, turn them into one hero wire frame element, but if we keep them separate, we can enter them to the assets separately, which allows us to have one hero asset and separate elements such as a bottom heading any piece off body taxed. Well, that's pretty handy, don't you think? With all these elements, we can now create a feature item. You can drag the image asset onto the paste board, then the heading and their body taxed. Now it's just a matter off turning the image element into a square and change in the front of the heading and body taxed to make this so while frame element work. - No , we have pretty much all the elements we need to put together a website wire frame. Occasionally, we will have to use the rectangle tool to create a plane by grant, and if you want, you can create rectangular wire frame elements. But I will stick to the essential blocks and create backgrounds as I go. So let's actually do this. Let's take a look at adding wire from elements to create a schematic vision of our website 25. How to use the assets to create a wireframe: Once all your assets are created, they are ready and waiting for you to use them to build your wire frame. In this video, we will take a look at how to practically use your assets to create a wire frame. The process is super easy and enjoyable. I would recommend using a grid as a base for your wire frame. It's a good idea to simulate a real life Web design scenario when creating a wire frame. However, if it's a very, very preliminary wire frame, if you want to just get the feeling off the project, you don't absolutely need to use the grid. Let's start with creating the header section. I'll bring over the Brandon and navigation blocks and position them properly, leaving quite a decent amount of white space on top and bottom. No, it's quickly create a light background for our hatter first all group the header elements and initialized the insert behind selection option in the toolbar. Now, when I start creating erect angle stretching all across the page, you can see that it gets inserted behind the heavier elements. The last thing to do would be to align everything nicely to the center group all of the elements and renamed them as Header No. Let's entered the hero section of the website. Most probably this asset will need some fine tuning. For instance, you might want to expand or contracted. You might want to change the position of the elements and maybe the phone size, too. The beauty off for working with assets in effin into designer is that you can easily select elements within groups by double clicking on them and change in them as you would change regular objects. I'll start the next section by adding another heading and a sub heading. Those guys also might need some tweeting, depending on how have you created them earlier. They might need to their fund color to be changed. Size adjusted. Maybe we'll want to change the alignment from left to center there really flexible and in effect. If you decide that you might need them in your wife frame assets library, you can just group them and add them to the assets panel. Yes, you can create different assets out off already existing assets. No one springing some featured items. I'll create two rows with four items in each one of them I'll bring in one of featured item and tweak it until it looks just the way I wanted. And since I want to have four off them in a row, one item can't exceed three columns of our great. Once it's created, I will just duplicate it tries to the right and then all of them once to the bottom. Lastly, I will select all the pieces, grouped them and draw a background beneath them, using the same technique as with the background for the header. Now I can rename this section and call it something like featured. But you can name it anything that would make this section easily recognizable. The next section we can create could be a from our blawg kind of a section. So let's bring in the section heading and adjusted of it for the block boasts, we can use either the featured items, elements or blawg articles. This is just another proof off how flexible this program is. I mean, you can grab the featured item, make the image go on the left and the text on the right while preserving int as an asset. I want to have just to block boasts in each row, so one post can't exceed six columns. I also wanna have to rose off boasts, so we can just clone the top corner. - Of course, as before, we can know group all these pieces and create a slightly darker background for the blocks action. You could even experiment with putting light elements on a dark background, but for now, I will keep it simple. - The last part will create is the footer Section. Footers usually have a distinct background and are quite big holidays. They can hold company's logo and tagline. Some links, including Social Media, Ling's Instagram, feeds, extracts, etcetera. This time I will start with creating a darker background on which I will place the footer elements on the left side. I will added the image block that would represent the logo. It might need some color adjustments, so it is easily visible against the darker background Beneath it. I will add some taxed that could be the about US extract for some additional information. I mean, it is just a wire frame, so we're just testing out the placement off certain elements, not trying to create the final design. I will create a variation of on instagram feed extract on the ride, and I will build it, using the image asset that I can resize slightly if I need to, and I will create two rows of images here Underneath it, I will add another piece of text and a few small image elements representing social media. Aiken's. - The last stage would be to group all the footer elements and named the newly created group properly. And there we go. We created our very own a wire frame. I wanted to show you the process of building a wire frame out off assets that you can create yourself. Just imagine how intricate your wife frames can be if you just spent some time on designing nicely looking assets. As you get good at creating a wire frames, you will add more and the more elements to your library. And soon you'll have all of the necessary elements to create y frames, with zero to little adjustments needed. But if you don't feel like creating your own a wire frame libraries, you can always look for some tools and resource is online. They have their limitations, but it's a good idea to know how they work and check. If you want to use them in your own Web design workflow, and we'll explore them next 26. Wireframing online: There are a lot of tools, and resource is online that you can use to build your own wife frames and prototypes. The problem with them is that the majority of the ones you are most likely to find are paid . They have some limited free capabilities. But to uncover their true potential, you have to pay in most cases, a recurring fee. There is one. Till that you might want to take a look at the it's called wire frame dot cc, and it allows you to quickly build prototypes off websites. If you want to use it, I would recommend starting with changing some settings. First of all, you can choose to display a 12 Colin grit, which always is a good idea, and secondly, I recommend changing the width and height of the wire frame in the bottom part of the settings tab. The only thing that you have to do to start building a wife from here is to start drawing. The tool will show you a box of options to choose from. You can turn your drawn into a box dext image list paragraph, etcetera. You can group the elements you created and even arranged them properly if you need to. One major drawback of the stool that only seems to be completely free is that in order to share or down with your wife frame, you would have to sign up for their service. And if you want to do that will be my guests. But there are other ways off speeding up the wire frame in process. If you google free wire frame templates, you'll find a lot off free wire frame. Resource is to download and utilize in your own wire frame libraries. I mean, if you don't feel like building your own, let's actually take a look at creating a wire frame library out of those ready made elements before we start. I think it's worth managing in that if the file you've downloaded is a PSD file, you'll be glad to discover that open it is a piece of cake for designer. Even if it is a illustrative file. Offended, the designer will open it without a second of hesitation. Most of these ready made a wire frame repositories will contain elements you can use to build your own libraries. You can big those that you like and makes them together for stunners. Grabbed the assets panel and create a new category. Rename it to your liking. But grace somewhat descriptive name. No. You can just a drag and drop the elements you need and like to the library so you can use them later. Of course, this whole process is optional. I mean, if you want, you can just to leave the file as is and copy and paste the elements you need over to your wire frame file. Eatherly works, and it will be your task to decide which one suits your specific workflow batter. I would, however, recommend using the assets panel as you can always keep them handy in your workspace, and you don't have to look for those specific while of wire frame files. So I think we got the wire frame and matter pretty well covered. We can move on to another important aspect off getting ready to start designing, which is choosing and optimizing images, and I comes 27. Let’s talk about images and icons: it's hard to imagine a website without images and other graphical elements. True, there are some designs that use Onley typography, but they are very, very neech projects. Chances are that in your career as a Web designer, you'll be using images in your projects and you'll be using them a lot. It's essential to know how to handle them in your designs. So let's explore the subject now. The easiest way to add an image in affinity. Designer is said to use the place. Image tool. Once you hit it, you'll be asked to select an image you wish to place. It's a, by the way, the same as choosing the place command from the file menu. If you were using an older version off illustrator before given designers shot, you probably have been frustrated quiet a lot whenever you want it to crop an image because , well, there was no where you could do it without using a clipping mask. A furniture designer comes with a factor crop. It'll that can crop images easily and quickly. All you have to do is to grab the bounding box by any of its edges and simply drag. But that's not all you can freely reposition the image inside the new bounding box, and once you're happy with the operation, you can just quickly safe just this image by using the export function in the Here. You can choose which file formats you want to go with, but I would recommend to stick to the files. Native former. I mean, if it is a J pick, just choose J. Pick and maybe drop down the quality to around 75%. This will be a good bounds between a reasonable file size and good image quality. Just remember to choose selection without background as the area you wish to export when older images are ready on, advise you to further compress them. It's extremely important for the overall page speed, which affects the search and optimization in plain words Google likes. When images on the page are nicely optimized, there are a lot off online tools that can help you with optimizing your images. About the one that I tend to use the most is called tiny J p g dot com to take advantage of its compression capabilities. Simply dragon image onto the window and letter that tool do its magic. Now let's briefly talk about places on the Web where you can find good quality images for free. I've been It's a perfect situation when your client wants to pay for stock images. But luckily there are online repositories with good free images you can suggest as an alternative. My favorite place for free stock photos is the sign called pixels dot com. It's a big source of photos pulled from other stock photos repositories, so you don't need to browse each and every STUCK photo service to find images you're looking for. Just enter the keyword you need and choose from dozens of high quality images. As for Aikens, Onley tend to use flat icon dot com the most. It's a great website for free to use high quality icons for your Web design project. When you found a Nikon, you like. You can either put it into a collection or preview it, and if you want, you can download it on this spot on advice. Choosen s v. G. As to file type. It's a standard factor file type that will work great in any kind of design application. I also visit free pick dot com, which is a huge repository off all sorts off design resource is images, icons. Pia's these vectors, etcetera. No, though, that some of them are paid. So this is how you can work with the images inside of fit into designer. Of course, as we move on to the design part of the course, you'll see some real life examples off handling images in a Web design scenario. For now, I just want you to remember that you can import them with the place image tool. You're gonna crop them with the factor crop tool, and you can export them using the export command. Let's now move on to the last part of the preparation stage, which is creating text styles. 28. How to create font styles in Affinity Designer: text styles in offended designer are a great way off speeding up a Web design process. If you are a fan off, change in font sets too quickly. Preview different variations of your design. You will love text styles. How to create a text style based on the characteristics of a piece of text you've already typed in. Simply select that text and then head over to the text styles panel and choose that style you wish to create. Have a dialogue box that pops up immediately allows you to adjust all the character and paragraph options you can access from the character and paragraph panels. It's best to start with entering the styles name, and I'd suggest to making it somewhat descriptive. Your text style will be shown in the Text Styles panel, so given it an easily distinguishable name will make the design process faster. A good production technique is to name your style based on its most important features. If, for instance, you want the text style to use the Roboto Condensed fund, have ah, only green characters that are 32 points in size will put that information as the text style name. When you're done your text, I will be ready and waiting for you to apply it to any piece of text you wish. The process of creating text styles in Afinitor designer is really flexible. You don't absolutely need to have some previously created taxed to create a text style out of it. You can just press any off the greet new text style buttons in the text styles panel and choose their desire type from the list. And if you need to change some things about your text style, but you were to preserve the original, it's best to simply duplicated and to duplicated text style, right click on it and choose duplicate. The same dialog box will pop up where you can enter the adjustments you ish without a fact in the original text style. By default, the duplicated text style will get a numerical Suffolk's. So again it's a good idea to start with changing its name to delete a text style right click on it and choose, delete or press the trash I considered in the bottom right corner of the panel. Creating and managing text styles in Afinitor designer is a straightforward process, and so it's sunny in text styles to your text. I'm sure that once you start creating a lot off website designs, you'll find them essential in your day to day. Routine text styles concluded that preparation stage of the Web design process. You now have the knowledge on all the tools and techniques that are essential to design a website in affinity Designer. So let's start the design part. 29. The Design Part Overview: welcome to the design of part of the course. In the next few videos, you will learn how to design this landing page using affinity, designers, tools, techniques and some tricks. But before we jump into design and the design process, let me just quickly break this project down for you. So here on top, you can see the header, and we got to the logo on the left that it's basically just some some letters, a piece of text with the added Grady INTs to it. And when we will be creating this solo, you will learn how to add ingredients to life Fund to life. Text in affinity Designer on the right. We got the navigation along with em batted a social media icons. These guys right here are all as V g files, and soon you will learn how to in bad as V g fast, like these social icons and how to work with them inside a feeling to designer underneath the header we got to this hero section right here, this big image in the background, with some small rectangle being put over its to make this image a bit darker. We, of course, have this big piece of typography right here. And we got this small piece off a slider. Navigation. I mean, I thought that if you ever want to create a slider for your for your designs is a good idea to alert how to create a small navigation for a for a slider section. Next, we got another section with the these featured items right here. Of course, before that, we got this big divider with some section heading and some subheading text and got to these aid icons right here, divided into two rows. And for columns right here I left the text to the same for each and every off this of these pieces. The pieces off featured items because I thought that, um, you know, type in everything in ah type in new words new phrases would be just redundant. Eso I just copied the text and then just replace them thes icons And those two just like just like the icons here in the header. They are two. They are as v g elements embedded into this document. So again you will learn how to embed as V g m icons like these into an infinite designer document. Next we got another section that would be kind of like a divider between the featured items and well, the next section that is coming right here. As you can see that a big image on the left and we got some simple taxed on the right with a dark background. This is this is another maybe not a whole trend, but a piece off trend and that is that is being using Web design right now. I mean, dividing the whole page into two sections and putting some well, well, an image on one side and some other piece. Well, piece of text on the other side. Well, that's just one off one of the designer trends right now. Next we got to something like a from our blocks action. So I created a lighter section right here with a lighter background. I've added some images on the left and these guys, as you can see our squares and adding these images will allow us to learn another technique off for working with images inside. If into designer with these guys, this image right here, this big image in the hero section. Well, these guys were going to be using the factor crop tool. But with these guys, well, we are going to use Well, it's slightly different technique on creating perfect images for your well featured image on block post for your block Post excerpts like these guys right here. Then we got some kind like an instagram feed I wanted to. I wanted to make it look like an instagram feed. And actually here we will learn how to add images and how to use clipping mask inside, offending to designer. And this will be yet another, I think, third technique way off using images inside a furniture designer. I mean, I promised you that while once we get to the design part of the course, you will learn how to practically use images inside affinity designer when designing websites. And these three techniques, I think will be a think will satisfy satisfy your hunger for for for image handling techniques. Next, we got a footer right here that, as you can see, it has a completely different, completely different background color. I wanted to make it to really contrast in. I wanted to make it stand out in this design and we got the three sections with some with some links and some text right here. And of course, these dividing lines, horizontal lines and the whole design is finished him with the well, a repetition of our of our header, but it's much smaller. Logo is smaller, the navigation is smaller and the whole Hatter background is smaller too. So I guess we could start designing. But before we start designing, we will have to take a look at the assets that we have at our disposal. We will have to create some text styles to make our work easier. We'll have to create some color swatches as well, and we'll have to take a look at our images and I come so we know what we have at our disposal and what we will be using inside this design. So let's actually take a look at to take a look at how toe prepare yourself to design a website like this 30. Let's Create the Color Swatches: The document that we are going to be using for our design is exactly the same document that we created when we were learning about to the 12 column grit. But it's not just the grit that we are going to be using to make this design happen. It's also some colors, topography, icons, images, all the good stuff that we need to to make her the website of design happen. So let me just hide the grid for a second and let me bring these guys up. As you can see, I got song colored squares right here, and I got some dark background down here. So the squares are going to be a base for our color swatches. And down here I got some dark background that in a second is going to be well populated with some typography. And I made this background dark because, as you can see in the original design, most of our typography right here is a filled with with an off wide color. So I think that it just would be easier for you to see that off white color against a darker background off course, we also have some darker a darker pieces of text, but we will take care of these guys later, so I'm going to start with creating a new new Swatch palette. So, as you can see here in the swatches panel, we can choose ad will either application or a document palette. The difference between these two guys is that if we add an application of palate, the color swatches will be available. And every time you create in your document, and if you just add a document palette, this color swatches group will be available on Lee with this specific document. So, actually, I'm going to create just a document palette just like so. And as you can see by default is, it's cold. Well, actually, it's It's called on the name, so it's It's so it's not really cold. So I'm going to rename this palette, and I'm going to name it something like, Maybe created us. This is the name of the site. Let's put it like that now. The set part about creating the colors inside, if into designer from existing square so that you can have, is that you have to do it one by one, so I can't just grab all of these guys and just maybe, like, put them here or choose some, choose some option from the menu to add all these guys a separate swatches. Unfortunately, there are ways of creating calls from from the whole document. But since we have a Grady int sort you right here, well, great infill, if in the designer world would add a lot of different the colors that are between the left , part of the great aunt and the right part of the great, and and we I really don't want that We want just simple swat colors. So I'm going to grab this first radiant fill right here. And I'm simply going to click this palette icon that says at Phil to palate, just like so I'm going to be I'm gonna add all these remaining colors to my swatches palette, just like so. And once I'm done, I have my color swatches that are called Created, and I can use them inside this document. No, of course I won't be needing these rectangles anymore. I can just delete them. And now, if I just create a well is simple rectangle. I can use any off my colors just like so Okay, so now that we have our colors created, we can now move on to creating the text styles that we're going to be using for our design . And as you can see, there's what a lot of different colors will mean that colors but styles going on right here . But I think that we can start creating the textiles in the next video. 31. Let's Create the Text Styles: this design off course would look pretty sad if it didn't have a lot of images and icons. So I prepared some images for you. And of course, you will find these guys well in a folder that I will link Teoh inside this well, the course description. So if you wanna follow along just to take a look at that folder and download all the elements and all the pieces that you will find there. So as far as the images go where we have the blogger excerpt images right here, these small squares we also have this instagram feed images and we also have some bigger images for our hero hero section. So if you want to go with with another image, you don't want to go with the one that I used you can choose. Choose it from here. Now we will be adding these images using using the place and place image tool right here. However, when it comes to icons, we are going to be adding them in a bit of a different way. But we will We will get to that in just a second. So my icons are sitting in this folder services So these are all all these icons right here . And I also have social media icons. There are these guys right here, and you're not going to be using the place command or anything like that. We are simply going to be dragging all these icons into our design. But as you will will notice in just a second. It's and it is easy, but it there will be some. We will have to do a few things about these icons these embedded. And that's the key word here. There was embedded Aiken's We're going to a drag onto onto the document, but that's gonna happen in a just a second. We will start their design process. Let me just move on to the main design. We will start the design process with creating the logo right here. So you will learn how to how to add actually them and the great and fell to your to your well piece of text piece of life tax. Because if I just grab the artistic textile, if if you want, we can still change some things about it. We can distance apostrophe and just typing e. And still this ingredient is being Ah has been applied to them to the tax, and it's being updated on the go. But I'm going to leave it leave, leave the live the apostrophe in. And yet I think we can move on to creating, to create in our first piece of design, which will be this logo. 32. Let's Take a Look at the Images and Icons: this design off course would look pretty sad if it didn't have a lot of images and icons. So I prepared some images for you. And of course, you will find these guys well in a folder that I will link Teoh inside this well, the course description. So if you wanna follow along just to take a look at that folder and download all the elements and all the pieces that you will find there. So as far as the images go where we have the blogger excerpt images right here, these small squares we also have this instagram feed images and we also have some bigger images for our hero hero section. So if you want to go with with another image, you don't want to go with the one that I used you can choose. Choose it from here. Now we will be adding these images using using the place and place image tool right here. However, when it comes to icons, we are going to be adding them in a bit of a different way. But we will We will get to that in just a second. So my icons are sitting in this folder services So these are all all these icons right here . And I also have social media icons. There are these guys right here, and you're not going to be using the place command or anything like that. We are simply going to be dragging all these icons into our design. But as you will will notice in just a second. It's and it is easy, but it there will be some. We will have to do a few things about these icons these embedded. And that's the key word here. There was embedded Aiken's We're going to a drag onto onto the document, but that's gonna happen in a just a second. We will start their design process. Let me just move on to the main design. We will start the design process with creating the logo right here. So you will learn how to how to add actually them and the great and fell to your to your well piece of text piece of life tax. Because if I just grab the artistic textile, if if you want, we can still change some things about it. We can distance apostrophe and just typing e. And still this ingredient is being Ah has been applied to them to the tax, and it's being updated on the go. But I'm going to leave it leave, leave the live the apostrophe in. And yet I think we can move on to creating, to create in our first piece of design, which will be this logo. 33. Let's Create the Logo First: So let's start that design process by creating a that logo. But first, I'm just going to hide the grit. I won't need it just just now, but I'm going to create a new layer that I'm going to rename A and I'm going to call it, um, header, just like so. And I'm gonna grab the artistic text tool and I'm just simply going to type in create did just like So Now the fun that we are using is, well, our main for remain heading phone, which is called hint, as we already know. But of course, we don't want it to be this light. I mean, when we create, if we created a darker background, of course we could go with this light color, but you want to add a Grady in to do it. And since we have this swatch right here, this fill this great info, we can simply added to our to our text. However, if you don't have a great and great into swatch right here, you can simply go ahead and activate the filter. And in here where you can see type, you can use solid, which would be a simple color any color that you would want just like that. But you can also choose linear ingredient, elliptical ingredient, radial, conical or even you could add a bit map to your local, but that that would be strange for a for a logo on a web site. So I'm simply going to choose linear like so. And as you can see, we already have this. Just zoom in a bit. We have this Grady int Grady int slider right here. And if you want to change the colors of the great and slider, you can simply click on this and this box right here and you can change the colors off your Grady int off your Grady in stops. So maybe that's choose something like that and even darker. I mean, you can play around with it a whole afternoon and you can just click and change the direction of the slider just like so. However, as I said, I am simply going to use this this Grady int swatch right here, and I'm gonna make it significantly smaller now. I will bring back migrant just so I can see what I'm doing right here. And I'm going to move my logo up here. I'm going to place it against to my left to left column. But this first column right here and I'm going to increase the size. Let's see 36 maybe, and there's gonna be a bit too big. 28 should be fine, just like so. Of course we can. Always We can always change it to later if we weren't so. Now that we have our logo, just quickly show you what it looks like right now that we have our logo that actually might might need some treatment it might get. We might wanna extend it just a little bit too somewhere here. Why not? So now that we have the logo, we can move on to creating the navigation and embedding our first Aikens, those social media icons that we just saw in the previous video. Let's actually let's actually leave the logo for just a second and then let's move on to creating their navigation 34. Let's Build the Menu Links: in this video, we're going to start building that navigation off our website. And it's actually as easy as just grabbing the artistic textile, clicking and dragon and typing in something like calm and you link. Why not? It can be. It can gonna read Manual Inc now. They're front. There are going I'm going to be using is well, is the same fund as the logo. So it's Hinde? Of course. I wanted to be significantly smaller. Maybe 18 or maybe 20. We will see in just a second. Of course, I wanted to have a different color, and I wanted to be written in all capitals. So I'm going to go to the character panel and in here I can change anything I want about this text. Well, about this Well, had this thing's navigation item. So first I'm going to change the color from this Grady int. I'm going to choose my swatches, and it's going to be this light color, just like so, and the word that you can see it right now. We're going to fix that in just a second. Okay, so now I'm going to click this all caps bottom right here. So Now we have our manual ink written using Onley, the old caps, the well, the all cap CIA. Let's now build to the whole navigation system Well, as as easier as it can only be. I mean, let me just close it. I mean, we can simply hold down the control key and hold on the shift key to constrain the proportion and weaken just cologne this guy to the right. And now, if you just press control, j weaken duplicate the last last transformation of which was copping they were just coping and ah, and moving. So we got 12345 manual ings just like so. And I know that you probably are not seeing it too well to clearly. That's why I'm just going to group these guys and that I'm going to group them along with the logo, just like so. And now if we just click on this insert behind the selection option that we are already familiar with and now just grab the rectangle tool that just zoom out a bit. And now if we just create a rectangle, we're going to create it in the bottom. This should be fine. You could make it bigger. You can make it smaller. I'm going to leave it up to you. I'm going to leave it like that. And of course, I want to have wanted to have a different kind of ah different color fill, color this darker color. And I hope that right now you can see everything clearly. But of course I don't want to these guys to be grouped anymore, so I'm just going to on group them. But I'm also going to group these guys because right now I want to make sure that the distances between these links these items right here are equal. So I'm going to buy shift, click, and I'm going to select all of them, just like so. And from the A line tab, I'm going to choose this guy right here that says space horizontally, just like so and that I'm gonna hit. Okay, so now I can be sure that on these distances are equal. Okay, so now that I know that all these distances right here are equal, I can simply select all these guys and group them again, just like so. So our next order of business would be to add the social media icons here on the right. And as I mentioned before, we're going to embed the as V G documents inside this document. Now it might sound like it's complicated, but it's really not, but there actually is a few things that 35. Let's Add the Social Media Icons: So, as you can see, I've opened to the folder where I keep my images. So these 1234 icons are ready and waiting for me right here. So the easiest way to just add and embed a document inside another document here, enough into designer, especially Aiken. Documents like these. It's the just grab it and simply place it here inside, inside this window. Now it may sound Ah, well, it may look like it's a super super easy, and adding, actually is but change in this icon changing its its color Well, that's that's not as straightforward. I mean, you might Well, you might think that the all it takes is to just grab, grab this icon and just change its fill color to something different. Like so. But as you can see well, actually, nothing is happening. I can't change to fill. I cannot adder the stroke near to this icon. As you can see, nothing is actually happening. I'm not making it bigger. I'm not changing the stroke. And why is this hap? Why can't I? Why can't I change anything? Anything about this I can Well, that's actually because it is an embedded document. Afinitor designer is considering this guy right here as just a representation off the original. So you are not actually. Well, you're trying to affect this icon because you might think that this is actually well, the original, but it's not. The original is still sitting eso somewhere else. And the easiest way to get to that original is by clicking this added document option right here. And as soon as you do that, you can see it. Affinity Designer is just opening this document in a new window. As you can see, it says embedded right here. So now we could simply add the fill color to our document to our I come in this case. And but as you can see, we don't have our our color palette right here. We only have it in this document because we created it as a document palette and we don't have it even in a somewhat virtual and the dynamic document right here. But that's definitely not That's definitely not something that we can handle. So I'm simply going to go to my original document and in the swatches panel, I'm going to choose export palette. I'm going to leave the name as is Click Save. And then when I go back to the embedded document, I can now choose import palette, and we could choose it as an application of pallet. Why not that I'm simply going to choose this guy. Double click on it. And as you can see, we got our our palate right here and now we can choose now this light filled just like so. And now when we go back, we can't even close this guy right now. And now when we go back to our document, you can see that we got our guy our our Aiken created right here. It's changed the fund and even even though here in the panel in toast panel it so shows that it kind of like has an applied stroke and fill. And as you can see, the head wait, They're different colors than this Phil call. It really is this called it? That's being applied to our to our and I can. So now we can just make it smaller, put it somewhere here against our darker background and make it even smaller than this. Maybe not that small. Something like that should do I think it should be fine now, in order to speed the process up, weaken Simply clone this guy to the right. I'm holding down shift and control like so. And now you can use this replace document option right here. And if I choose maybe Instagram. I am changing this document. However, I am not adding the same. The same collar filled to my to my will Aiken. So again I have to go to added document and I have to go to created color swatches and I'm going to change that just like so. And now if we just click control J, we can clone that guy and move it to the right. Just like so again, Replace document. Choose me. Twitter at this time again added the document. Choose appropriate appropriate color like so. So as you can see, the size remains the same. But the car will unfortunately is not changing for us again. We can clone it to the right. Replace the document this time with the Pinterest I come now we can edit it, change the collar and we can just close it, just like so. Okay, so now we can make sure that the distances between these manual ings are the same as the distances between well manual ings and social media icons and between these social media icons. So I'm simply going to on group these manual links and then I'm simply going to add to the selection these guys right here, some shift clicking on them. And now if I choose space for Izon Tole and click OK, weaken down. We can now be sure that all these guys are spaced evenly. So now we can just group them, move them to the right if fact weaken maybe even a line of to our to our grid and then just move them up somewhere here we can now just friend this logo down a bit to make sure the line nicely. And there we go. We got the header created. We can, of course, maybe move this guy just a bit down. Of course, you can maybe make the distances between all these guys bigger if you want. Well, that's totally up to you. But the last piece of business that I want to do right here is they want to indicate which off the sides is actually the active side so I wanted to have a different color. Now then, Now then the other links some simply going to double click on it and that this is the way you are a targeting, um, an item within a group that I'm simply going to add this Grady and filled just like so. And we basically have a where have our well header created? Just like so I think I think it was pretty easy. Don't you think there are something that you need to be aware off, for instance, adding, Ah, the grading filled to text, especially Erin, that svg icons or other documents embedding them and then handling them properly. But I think that all all those techniques are really well, quite simple. They need some some getting used to, but to once you get the hang of them, you will use them smoothly and quickly. So our next order of business would be to just grab a large image. Put it. Teoh will make it our prominent to the most prominent piece of this world, the stop part of the design, and then put some darker table well, lighter typography against it and create this navigation system right here. So let's actually start doing that in the next video 36. Let's start by adding the main image: the next section that we're going to create is this hero section right here. Of course, what's most important about it is that it has this big image as background. There's also this bold typography, and we also have this navigation system down here in the bottom, and creating the section will actually give us an opportunity to discover one off affinity designers the techniques and tools that that is allowing you to add images. And this method is the most straightforward one. It's it's the easiest one, so we are going to start with. But before we add an image, let's add a layer. So I'm going to create a later right here. I'm going to name it as ah hero, just like so. And I'm going to move it beneath the Hatter section and Heather Layer right here. So the easiest way to add an image inside a fit into designer is simply by using the place image tool, which is this guy right here. What it does is it simply allows you to open and place an image, which is something that can also be done using the file place command. But this command also allows you to embed other file formats, not just images where it's place image so is specifically designed to add just images to your will. To your document sounds simply going to click on it and all these images, by the way, we're download from the axles that come a website that we discovered in one of the previous videos. So I'm simply going to choose maybe this image, and as you can see well, nothing is happening. I guess you can't see anything because nothing is happening other than our Kherson cursor getting a sidekick. And this small icon is actually indicating that if I now just click anywhere inside my document, I'm going toe. Add this image. And as you can see, it is big. It's way too big for our purposes, so we need to make it smaller and in order to make it smaller, weaken simply just dragged by one of its corners, just like so, until it gets well, as small as we need it. And by the way, you don't need to press and hold down the shift key because, well, a faint designer by default assumes that you want to keep the proportions as they are. You don't want to distort your image, and that's actually very handy because we don't want to distort our. You don't want to start our our image. So if you want todo phone your document have the same with as your canvas. You can simply enter them here inside that transform panel. But what's what's important right here is that we want our section to be pulled this background image to be smaller. I mean, we wanted to be as wide as the whole can last. We wanted to go from the left side of the View port to the right side of the view port, but we don't want it to be that toll. We want to make it smaller. And, of course, if we just grab it by one of the handles right here, we are going to distort our image, and that's definitely not what we want. So how can we make sure that, well, the image stays in proportion, but it's not as big as well as this original. We could maybe use the clipping mask for it, but I think that it would be easier to just grab the factor crop till this guy right here and simply move this guy a bit up to, I don't know, maybe somewhere here we're going to check it in just a second. So the vector crop tool simply allows us to crop the image. Even though it's called vector crop. It allow us to crop an image just like so without affecting and the image itself we can even know move this guy around inside our inside our or cropped image cropped frame, just like so to make sure that it's well, it looks just a way as we want it to look. So if we just zoom in a bit closer, and now if you just take a look at the layers panel, you can see that we got beneath our image. We got this rectangle added right here. And, as you can see by its thumbnail, and if you are familiar with photo shop it, it kind of looks like a mask, don't you think? Well, that's basically because it is a mask, its a mask being a dynamically applied to our image. If we just turned it off, you can see that we are getting our whole image back. But if we turn around, you can see that it gets clipped just like so, and it has one major will benefit. I mean, adding a mask to to our image, even even though we didn't Adam ask. I mean, a friend to designer added added this masculine automatically, but we can just go wrap this rectangle and we can go down here to our transform panel, make sure that our transformation is happening from one off the top points. And now we can just change this height of value right here to something like, I don't know, maybe 700 pixels. Let's see. And as you can see, it's our mask is being cropped to exactly 700. So now we have 920 by 700 pixels, just like so. And if we now just previewed in 100% and get rid of the panels just like so we can see if if we actually like this well, this height, so if you want to make it bigger, we can make it bigger. We can make it smaller if you want to, but I think that I'm gonna I'm gonna leave it up to you to decide whether you want to experiment with it a bit more. You know how to do. It s Oh, so you can do it now. You can do it yourself. What I want to do, however, is I wanna make this image darker because I don't like the fact that it's so It's so light , especially considering the fact that I'm going to be put in some light typography over it in just a second. So what I want to do is they want to make it a bit darker. But, um, there is one thing that you need to be cautious about, but I will tell you all about it in the next video. 37. Let's start by adding the main image: as you keep building your website, design you and keep adding images and big images like this one. Your document is going to get bigger and bigger and bigger and go. Your computer is going. Teoh run slower, slower and slower. I mean, the more big images it has to process this is the slower that more ram and the process of power consuming the whole process is going to get so there's one little trick that you can do to make sure that everything looks nicely. But at the same time, everything I'm in the process is fast and smooth. If you know that you are going to be well, leaving this image as is you want your hero image to be as tall as this guy right here. And you wanted to be cropped like this, you can simply select it. And now if you just go to file export, we can just select selection without background, make it a J peg, drop down the quality to around 75% just like so And now when we export this image with the these settings, the whole image is going to get cropped. This it's no no longer be a huge image. It will be much, much smaller. But it will be, well, the same as the one that you are seen right here. So if I now just go ahead and click Export and I'm going to call it as, um, image cropped just like so And now I can simply delete it. And now if you're gonna go to the place image, tool and that I can check where I put my here is there? Here is And if I just click here, you can see that I have my image cropped and perfectly aligning with my with my whole on the whole website design. And this is actually you can do with all your well, at least those big images. If your computer is maybe a bit slower if you don't have enough ram or your processor is a bit slow, you can always just ah tell offending to designer Teoh Inouye, optimize the images by simply making them smaller. And once you have them cropped, once you have them well prepped just the way you want them to be. You can simply save them as separate assets and then add them again. But they will be much smaller, and the quality will be pretty much pretty much the same, and everything will run smoother. So now we're actually ready to start adding the collar in the to our image. And again, there will be something that you left that you have Teoh Barre mind when adding a color to your images because you might be tempted like I am usually attempted to do one