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 thing, but it won't work as its shoot, so let's talk about it in the next video. 38. How to Quickly Resize the 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 thing, but it won't work as its shoot, so let's talk about it in the next video. 39. Let's Make the Image a Bit Darker: in this, we don't They're going to make our image a bit darker, cause if we take a look at the original, we can see that it's actually well. It's darker than other than this original image because we want to put this light typography against this image. And especially in the case. In the case of this image, if we were to put lights typography against this background, it would be barely visible. And that's not good user experience. So what we want to do is we want to make a darker so one thing that you might be tempted to do. If you're trying Teoh just, you know, beat. The system was trying several times you can you can be tempted to just use the fill tool. And for the fill type, you might want to choose some color. For instance, if we just go with solid, you can see that we are actually not adding a color. But we are changing. We are changing the whole photo, and if you want to go for this kind of an artistic effect, will be my guess. You can choose many different colors and actually change the way this car this that this image is actually will look in, but that's really not what we want. So remember to well not to use this option if you. If you want to just make the image darker, don't go for the fill color to make it. But if you want to try to beat the system, you won't beat it like that. You can, however, just grab the rectangle to create a small rectangle and fill it with a dark color. So I'm simply going to choose. Maybe this color and I want to make it as big as the image. And since it is 1920 by 700 that's what I'm going to input right here. 700 just like so we can now simply place it over our image and make sure it snaps just like so. And now we can simply drop the opacity down. Let's see to something like maybe 40%. I think 40% should should be fine because, as I said, the underlying image is quite light, so I don't think that we should drop the opacity down to something like, I don't know, 17% Goes said That just won't make any sense. Of course, we could maybe try adding a darker call it maybe, like, black color and then weaken. Drop the opacity down even a further. But I think I'm gonna just go with my original color, and I'm going to increase the capacity to something like, maybe 35 40% just like so. So now we can simply grab both of the image and the rectangle and weaken. Simply group them if you want. You can rename the group as maybe Main image, Something like that. Just so you know what? It actually is right here inside this group. So now we can start adding of that typography we can start at in this main text. The main text right here. Remember, we created a specific text style for it, but I think that we can start doing it in the next video. 40. Now Let's Add the Main Text: Now we can start adding the main typography and to put it against against this darker, this image background. So I'm simply going to grab the frame tax tool and I'm going to create I'm going to create a text frame just like so it doesn't have to be all that big numbs. We're gonna grab the texts tool and I'm going to choose insert filler text, just like so and from our text styles, I'm going to choose our thinking called it main heading. I'm going to align it to the left and now move it, move it somewhere. Here, let me just see if snaps nicely moovit summer here now, if you want, you can of course. Ah, well, type some real words here like I have in the like I have in the in the original, but I'm going to leave it up to you. I just want to show you how to how to create this kind of this kind of an effect. Now, if you don't like the way this is looking, if you don't like the way the characters are being placed if you don't like the way on the line Hi, Tim is being, Ah, well displayed here. Of course you can. You can change some things about it. So, for instance, we can just grab the character panel and, for instance, we can try to change, increase the leading, maybe to 78 just like so. And of course, we were gonna have to expand this frame just like that. You could also try to increase the distance between specific characters. And that is, of course, the tracking. So let's see for you just enter one. I wouldn't go overboard with it. We're seeing some slight slighter increase, but not that much. And I wouldn't go too far with it. Maybe let's just stick to five. Something like. So this should be fine. And also, if you want, you can maybe try with the other front weights, like regular, semi bald. I wouldn't go with light and maybe medium. I think bold would be the best because it would give us, well, a feeling of consistency across our design. I mean, the logo is written in any bolder version of the font. The text links well, the manual ing's are written in a bold version off the front, so I would just simply stay with the state with bold If you want, you can choose Teoh, underline this whole text if we take a look at the original because you can see that I've underlined to this word only the created world. But that's possible on Lee. If you only if you will add a real piece of text book is if it's just that this automatic filler text is just a filter and you won't actually be able, Teoh Ah, manipulate Onley separate works. So just as an example, if I just grab this guy and if I just copy it over, I'm gonna be wanna make sure that I'm on the right later here and I'm going to get rid of this guy. And if I just move, it's up here just like so Now if you want, you can just grab on the frame or the artistic textile. I'm just Maybe I'm gonna grab the artistic textile and we can just select specific words. So, for instance, let's let's just grab fascinating. Let me just grab it. And now I can underline it, or I can even double underline it if I want to, but I cannot do it with the just this filler tax that you can use from from the text manual . Because, as I said, it's just a dynamic filter and you're actually not able to manipulate single single words. And of course, the last thing to do he would be to just grab the text and the Underline background and simply aligned these guys to dissenter, just like so just to make sure that everything is looking nicely. So if we now just have a look at our progress, this is what we have so far. We got the patent, the header. We got the logo, we got the menu, we got the social icons, the social media icons. We got well, almost the finish finished hero section. And if you don't want to create a slider navigation, you could just to move to another section to the next section. But I think we're going. Teoh are definitely going to create that the slider navigation buttons down here, But so far so good, we have what could easily be basically finished, finished part, top part of the design because we got the header. We got the hero. Now we would move to the next next to Section two featured item section. But before we don't be before we do that was actually creating the navigation of Styler navigation down here in the bottom, right, so stay tuned. 41. Let's Add the Slider Navigation: creating the slider. Navigation is actually a pretty straightforward process. So let's is start building it right now. First of all, I want to create an ellipse that is going to have a stroke color, and it's not gonna have any fill color the stroke with the canopy. Just one point. We can always change it later. And I'm simply going to create an ellipse. Ah, at around 25 pixels in well, both with and height. Let me just zoom in closer so you can see what I'm doing here. And what I'm gonna do is I'm simply going to clone it to the right two times. So it's one and two just like so. Now what? I'm gonna do it. Let me just maybe move this guy bit to the left and to the right, this guy. But of course, we're going to fix it, fix, um, the space. And in just a second, So the first Well, the first icon the first circle is going to have a Phil is going to have a great infill that would correspond with the Grady in tow logo. We want to indicate that actually, this this slide is the first slide in the stacks. So that's why this first circle circle is going to have a fill. Sounds simply going to click on my great and fill in my swatches just like so. And now we can just create this triangle buttons on the left and on the right. That would actually be our previous and next bottoms. So from the tools panel I'm gonna create, I'm going to select the triangle tool. And I'm simply going to create a triangle that is going to look something like so of course I don't want it to have a Phil. I wanted to have a stroke, some simply going to exchange these guys thes colors. And I wanted to be light just like so Now let me just rotate it. I'm holding down the shift key, and now I will clone it to the right and from the tools panel. I am simply going to juice their Philip core of horizontally command just like so. And now if I just choose all these guys, I can again go to the align panel and actually, you are going to be using this line panel a lot. So I advise you that you I advise that you get yourself familiar with this panel because it's extremely important in website designs. It sounds simply going to choose the space horizontally click. OK, and then we can simply just group all these guys and make sure that they all stay together just like so. Now I will just move them, just line them to the grid more than slightly up to somewhere here and just zoom out a bit just like so. And there we go. We got to the navigation that created, Of course, if you want, you can always make him. We'll have the A is, well, stronger stroke. So let me just grab all these guys like so and in the stroke panel, I'm going to increase it to maybe two points. So it's just so they are nicely visible against our background. And if I now just get rid of the panels now we can see that we got the whole header and we got the full heroes section hero section greeted along with our slider slider navigation. So the next thing that we would do is we would start creating this featured section, this big section right here. So let's actually start doing that in the next video 42. Let's Start Creating the First Featured Secion: the next section we're going to create is our featured items of section, So it's Ah, it's actually divided into two separate parts. This main part, as you can see, is put against a pink background, and there's this big section heading and some text beneath it. Then we got a part of the section that has a lighter background and ah, 1234 eight featured items in total, and each item comprises off. For one, I come a heading Andy piece off text. We could add a like a read more button right here or a link, but it's ah well, it's not necessary cause this whole section right here can be a link. And it's actually well, easier to clicker or to tap on a link like this that when it's a big as this whole and featured item than just a small link down here in the bottom, was actually start creating them that this section from this top of pink part. So again, let me just bring back the panels again. I will start with the creating in a separate layer for my for my section, and I'm going to call it something like featured one just like so And I'm going to put it beneath another hero, a hero layer. So I'm just going to grab the rectangle tool and I'm going to create and rectangle that is going to stretch all across our our canvas. I'm going to make it bigger. There's should we find something like so we can always change it later. And of course, I don't want it to have any stroke. I wanted to have a filled and I wanted to be. I wanted to be pink, just like so. Of course not. What we have to do is we simply have to add to that typography. So I'm gonna grab her the text, a friend tal frame textile. I'm going to create a text frame that I'm going to populate with some filler text, just like so. And since we have a subheading, a section heading, well, text style, I'm simply going to use it right now. Although I'm going to change is slightly. I'm going to ah, line it to the center just like that. Now, what we can do is we can simply borrow this piece of text and clone it down and simply change in the text style to body light, just like so. And if we want, we can make it even bigger, just like that. And if you think that is that it's too small or maybe too big, you can simply go to the top panel and maybe make it 18 if you want. But it's a totally optional. I mean, I think I would just go with the simple 16 points as this is them. A May nah, phone size, the typical from size for Old Boy Tech. So I just go with with 16 just like so. And of course, we can play around with the position in just a bit. And once it's all set, we can just grab both these guys, grouped them and then shift click on them that the background. To add it to the selection and weaken, simply make sure that everything is being nicely aligned to the center. 43. Let's Add the Featured Items: now, As you can see, we are starting to lose some some some room right here. We need to move this guy. We need to expand our our will, our board. But before that, I think we might want to maybe just move these guys just a bit up and maybe make this guy just a bit smaller and again align everything nicely to the center. Just like so. So now we can just grab her The art board Still, just like so, click on the art of board. Let me just zoom out a bit and simply extend our our our boat and extended even more do somewhere Maybe here, just like so. This should be fine. So the next, um, part to do the next piece off artwork that we need to create east? Of course, this bottom bottom part of this featured featured items section. So this time I am not going to start with creating that background. I am going to start with creating just one featured item, just this one. So again, I am simply going to navigate to the folder where I keep my where I keep my eye colors and I'm going to bring one into my document. Okay, so I got the folder right here and now I can just bring maybe this responsive I come into my into my document just like so. Of course, it's way too big, so I can simply make it smaller to something like So this should be fine. Just a minute. But And of course, again, if you want to change the color off our of our I cant we cant use just this Phil and a stroke for stroke color tools. We need to add it the document and now we can just select all And we could maybe get rid of the stroke. I don't think we're going to need it. And again, we need to find our our swatches group and simply changed the color. And we can no close this guy, just like so Now next. What we need to do is we need to add that tax to beneath our icon. So again, I'm gonna grab the frame textile, create a small frame again, insert some filler text, But this time I'm going to use the featured heading textile. Just like so. Of course it had can have one line of tax it hand, it could have two lines of text. I'm going to leave it up to you, which which, well, how big this lot of text is going to be in your design. Next, I'm simply going to borrow this guy in Kelowna. Dour extended just a bit, but I'm going to change this textile to body dark just like so. So as you can see, working with textiles saves us a ton off time. It makes the whole process easy and and enjoyable. Really, it's, um it's just a matter off adding the filler text and the right to text style, and we're basically done. But with this, I could weaken. Now simply make sure that everything is being aligned nicely to the center, just like so, and we can simply group it now. Another benefit off work in this way is that if we now just make it smaller, you can see that the filler tax is also adjusting itself to our two to the size of the new size off our Aiken, sources hope, no matter how small we're going to make it or big, it's always going to be well being displayed nicely in proportion. Of course, we can always just select, select it and maybe expanded a little bit, so it to look so well a bit differently. One thing that we need to bury my when creating these guys right here is if we just go back to the original, you can see that we have 1234 featured items right here in one row. And of course, we have two rows. Which means that since we have four items, we need to make sure that it's not bigger than three columns, right, Because four times three east 12th. So right now I can see that I am. I think I'm gonna be okay, cause my icon is not is not to bigger. It's not wider than just the three columns. So really, all we need to do right now that justice amount of it, all we need to do now is to simply cologne. This whole group, these all these guys to the right, just like so and then just press control J Control J. And of course, we you might want to do some house cleaning. We might want to do some. There's some some alignment, just like So just to make sure that all these guys are being aligned to align proportionately And of course, you can play around with the size of these icons. I'm gonna leave it up to you. What I want to do what I want to show you here is how to create him. This the section off featured items. But of course, we don't want all these icons to be just computers and mobile devices. We want them to be different icons, right? So, just as in the case of our social media icons, we can simply select and will 11 image when I can right here. And remember that you can target him a subgroup or an object within a group by just double clicking on it, just like so, just like that. And now we can just hit, replace document and just find the image that we are looking for. I'm gonna do the same with the rest off the document. Some simply going to replace the document. Replace that was the brochure. Maybe that consulting, um maybe there growing. Why not the next one with buildings next one could be the camera and the last could be the i d card. Just like so. Of course, we still need to change their colors, right? I mean, we want these colors to be well, somewhat. Well, exactly. Well, in correspondence with the other colors with our with our color scheme. So I would make these colors as well along with these with these pieces of text, I'd make them make sure that have the right color. Well, we are good to go with these pieces of text because remember that we created text styles when we were creating these textiles, we added the right color, which is indicated right here. But these icons still need to have the right color to be added to them. So again, if we just double click on a on a specific specific embedded to document this icon right here and double click on it again, we can embed with isolated in a in a separate window. And now we for just select everything we can again, just make sure that we are adding the right color and the process is the same as it waas before I know that the change is very slight here. I mean, you cannot actually will really see the difference in colors. But trust me, there is a difference in the colors. And for the sake of being nearly consistent about your about your design, it's it's good to know it's good to make. It's good to make sure that all the colors are being displayed properly. So let me just double check this guy and should be good. So let me just quickly add the well, the right colors toe all these guys and I will be right back with you. So once all the colors are at it and all the colors are well correct, we can now simply select all these icons and group them. Now we can make sure that we are drawing behind them. So I'm going to activate the insert behind the selection mode, just like so, grab the rectangle tool and just create directing that would stretch all across the canvas just like so. I think this should be fine. And of course I'm going to make sure that it has the right field. This time is going to be this a bit darker. Grey. Just like so Now the last thing to do would be to just make sure that everything is being alive nicely to the center, just like that. And of course, if you want, you can still maybe make this well, this whole background bigger if you want to, or maybe the icons just a bit smaller. But as I said, I'm going to leave it all up to you. I want you to experiment with all these techniques because this is the only way how you are going to get good at them. So the next section that we are going to create is going to be our second feature section, which is this guy right here. And by the way, this this will create in this section will give us another opportunity to opportunity to but to work with images inside, offending to designer and see and how we can also manage. Will images place an images inside the fit into designer, so stay tuned 44. Let's Add the Second Featured Item Section: in this video, we are going to discover yet another important aspect off for handling images inside the affinity designer. We are going to create this feature second featured section right here and we are going to start. Let me just bring back the panels by creating another layers. So I'm simply going to create one and rename it as featured to This will be fine. We're going to bring it beneath featured one again. I'm going to use her the place, image tool, and I'm gonna choose this image right here. What I want is I want this image to be well stretched across the left part off the view port. So I need to make sure that it's not getting across the sixth Collins column in our in our great. So it's 12345 six. So I'm gonna make sure that it's aligning with this column nicely. Just like so. Just like that. And as you can see, the image is getting cropped here on the left. By default, affinity designer will crop anything that is that is touching its its edge or it's going across its. So if you're familiar with photo shop and If you're familiar with with illustrator, you will notice that, well, those two you already know that those two pieces off software handle images in this kind of situation a bit differently. In Illustrator, you can put an image outside the art board and moved freely around and in a photo shop. By default, the image is going to get collect by the art board, so to speak. In Afinitor Designer, you get the best of both worlds because as default, you concede that image is being clipped right is getting clipped and direct angle is getting clipped or this whole section is getting a clip. Everything is getting clipped. However, if you just bring it far enough, you can detach it from this from the cannabis from the baseboard itself so you can have it beside. You can have it on the side, so to speak. You can you can make it well, you can make turned into your schedule, your notes or something like that. But if you want, you can bring it onto the design and you can make him the baseboards clip your whole your whole whole image, and this is actually what I want so I want to put it on the sixth column. So it's 12345 and it's six. Let me just make sure that it's nicely aligned, just like so maybe just a bit up. I'm just gonna Nagy it up just a bit. And, of course, the next piece of artwork that we need to create is the right part off this section. So I'm just going to grab the rectangle tool, and I'm going to create a rectangle that is going to stretch like so. Of course, if I wanted to, I could go and stretch it out like that. But I don't need to. So I'm simply going to leave it like that and give it a proper, proper color. And now I'm going to make sure that everything is nicely aligned just like that. And the last, the last thing to do here would be to just just to add the text. So again, I'm gonna grab the frame text tool and create a text frame. Fill it with next, and I'm gonna make sure that it has the proper text style, which would be the section heading Align! It's to the left on maybe just make it smaller, Just like so like that. I'm gonna make sure that it's nicely aligned with my maybe with this column, just like so. I'm gonna bring it up. Brennan's down, clone it down, actually, and changed this to text style to body light. That may be extended just a bit, just like so. So you can see how easy this once you have the filler tax and you have the text styles, how easy it is just to add some pieces of tax and manipulate text with that with the text stars. So I'm just going toe, grab these guys, group them and make sure that they're they are aligned to the center, just like so. And we got this section created now weaken Just I hope all these guys just to make sure that they are, they are well put together. And there we go. We got him and the second feature future group created. Let me just grant where it needs to go, just like so. And there we go. The next part, the next section that we're going to create is going to be this blawg post will block post excerpts actually, right here so this could be like from our Blawg section and all these guys could be blocked post block post excerpts and again. And this creating this section will give us another opportunity. Teoh work with images in a yet another way that well, this So this way actually might come really handy in your everyday will every day. Well, website a design work, so stay tuned. 45. Let's Start Creatig the Blog Section: before we start creating on from our block section, we need to expand our art board just a bit more. So I'm gonna make sure that this art board still is selected. Click on the yard board and extended even more to somewhere here, maybe even just a bit more. Now I have to extend the grid itself. So let me just find the grid. It's right here that I'm simply going to bring it down just like that. Let me just lock it again and I'm gonna create another layer and call it Ah, block. Just like so. So let's start with the creating the section hang. So I'm going to grab her the frame textile and simply create a text frame that is going to look something like that. I'm going to insert some text inside, and I'm gonna make sure that the section heading is turned on as this style. And I'm going to make sure that a line center is also turned on just like so. However, I want to change the color of this of this headings. I'm simply going to choose this darker color just like so Now I'm going to maybe make it just one line of text this time and I'm gonna make sure that it's being aligned to the center of my art board. Just like so when we take a look at the original, you will notice that thes featured images are actually squares. And if you want, you can grab the factor crop tool, import images and try to crop them to, you know, to match the square proportions. But there's an easier way off creating square images inside a furniture designer. So let's take a look at it now. I'm simply going to quickly create a new document that I'm not even going to save. But I am going to make sure that it has actually the square proportions, so to speak that I'm creating a square canvas. I'm gonna make sure that the with for instance, 200 pixels and height are the same, and I'm simply gonna hit. Okay, Now I congee just grab the place image tool, and I can just navigate to the folder where I keep my images and start at in images. So I'm going to start with this guy right here, and I'm going to place it, and of course, it is way too big, so I need to make sure that IHS what? That is smaller. Let me just zoom out a bit and I'm holding down the control key and I'm making it march much smaller. Just like so. Just like that. And now, as you can see, my canvas my our boat is acting in a way like a clipping mask. So I am on Lee going to be saving war. I can see inside inside my campus. So now my, my artwork is 250 pixels wide and 250 pixels tall. So now I can simply just go ahead and export the whole document because it has the right dimensions and right proportions has a J pic. I will just bring the quality down to around 75% and I can simply hit export. And of course, since I already have these images created right here, I'm just going to name remember differently, maybe as a just like so and then B c. D. Etcetera. So now what we can do is we can simply grab this image and choose replace image, and we can now choose Maybe this guy right here And as you can see, it's Ah, this image is feeling the same proportions as our previous image. So we don't have to resize anything that may be like change the proportions. Nothing like that. We can simply replace an image and then just maybe used the control all plus Shift Plus as a shortcut to get the export settings. And all the preview settings are already here, so we can simply go go ahead and click Export. Rename this guy and do the same will repeat the process once more. So let's just grab on this this image, like So again old control shift s export, see and enter replace image. Maybe this guy right now, old control shift as export And this guy is going to be, I think d just like so again replace image And I guess it's going to be Maybe maybe this image this time again. Old control shift as. And it's going to be and replace image. And let's grab thinking this guy too many images, I think. But too many images and export and f just like so. So now we can simply close this document. We don't really need it, but Now we can simply just grab the place image tool, and we can start place in images. So let me just find my a image just like so. And if you want, you can make it smaller, simply can just drag by one of its corners and make it smaller, just like so. Of course, if we made the documents smaller, we would we would we wouldn't have to resize this image at all. But just for the sake of from learning specific techniques here inside the furniture designer, let's just do it the longer way. So now we have an image and all we really need to do is to add some text on the side, cause if we take a look at this original, you can see that there's an image and there's some textures, a heading and there is some text on the right and actually both the I mean, the heading and the text. They already have specific textiles in our in our library, so really only need to do is to get and grab the frame text tool and just create a text frame at some text and from the text styles choose featured heading make it maybe justice just a bit smaller. Align. It's to the left and maybe just smaller, just like so. And then just clone it to the bottom just like that and extended a bit changed. Ah, text style to body dark. Just like so. And this is how we can create one featured featured item, one block excerpt enough into designer. We can, of course, play around with some position in just a bit, since we want to have ah three featured well featured items across our pace board. One featured item cannot exceed four calls, right, because three times four equals 12. So now we can simply just grab the image, grab the text and simply make it smaller just like that, and make sure that famed designer is doing all the heavy lifting for us. It's ah making the image smaller, and it's ah, making them that the text of frame smaller as well. But now we can simply just maybe put it here and extend the text frame like so maybe extend this guy as well just a bit. And there we go. We got we got our frame. Well, we got our featured image created 46. Let's Replace the Images: So in order to finish our a blogger posts section we have to grow ramp our featured item weaken group it if you want to. And now he's simply have toe holding them to control key clone and to the right, Just like so. All we have to do now is to press control J to duplicate the last transformation. Now, if we select all these featured items and bring them down toe somewhere here we can now create six featured items elements. And all we have to do now is to just grab, double click on this image to grab it and click, Replace image, find the the image, do the same with this guy. This will be see image, just like so this guy will be the D image like that. This will be the image, and this will be the F image. Now let's just add a simple link that would say See the blawg. So I'm going to grab the artistic textile type in, See the blonde, that block, not necessarily in the log. And now we can just ah, had the featured heading textile to it. But I don't want to these characters to be capitalized. So I'm gonna make sure that in the character panel the capitalized function is turned off just like so And I will make sure that the color is proper. Just like that, I'm going to put it summer on the right. Uh, somewhere here, this would be fine. And of course, now we can just make sure that all these guys are grouped and all these guys are group. So now we can simply add the background beneath them so we can grab the the rectangle tool and start drawing a background just like so. And of course, we're going to make sure that it's not this dark, although it could look nice. And but it's it's gonna have this light color Aziz background. Just like so Now we can just grab both these guys, make sure that that they are aligned to the center properly extend this guy just a bit to make sure that it's it's also put well, exactly in the middle of the art board. And there we go. We got the block section created. Next, we will create this Instagram feed section and we are going to have a lot of fun with the masking inside a fit into designer. First, we're going to create a bunch of rectangles, and then we're going to use them as clipping masks to create this instagram feed, so stay tuned. 47. Let's Start Building the Image Gallery: our website is starting to look nice. We already have the header section right here, along with the navigation and social media icons. We got the hero image with the background image, the both typography and the slider navigation. Then we got this big section of featured items right here that would divide it into two separate subsections. And then we got to this Second featured a featured item, the subsection that is actually dividing our whole website into two halves left and right. And then we got our from our blawg section. So next we will create the instagram feed a section for our design. So I'm going to create a new layer as usual and we could call it Instagram. Or we could simply call it gallery, just like so, in the process off creating the gallery, you will learn how to use a clipping masks inside of furniture designer, and he's going to be the last technique off using images inside this software. So what we want here is a Siri's off rectangles and squares that are going to be the containers for our images. So I'm just going to Grandpa the rectangle tool, and I'm simply going to create. I'm simply going to create a rectangle that is going to be, well, something like So why not? No, I'm simply going to clone it to the right just like that, and maybe make it just a bit smaller to something like So Then I'm going to clone it again to the right and extend it than clone int again and extended even more. And then I'm simply going to grab this guy, move it into the right and make it significantly smaller, just like so lamps and be going to maybe change some of these colors just so it doesn't look so boring just like so. And what we can do now is weaken simply bring these guys down and clone them down, just like so, turn them into a group and simply flipped them just like so. So now our will. Our Gallery of Instagram feed is not so repetitive. I'm going to on group these guys and each and every off these little elements off these little rectangles and squares is going to be 11 container for our for our images. So what we can do right now is weaken simply start adding images. So I'm gonna use the place image tool, and I'm going to navigate to my instagram folder. I specifically made these images just a bit smaller, just so you don't have to see me re sizing them. And Justin, them will too much sound simply going to open this guy and place it just like so. So now you can see in my later spend all that I got the image and I got all these rectangles right here. So how toe actually clip this image using one of these rectangles? Well, it's easy and not easy at the same time. It is easy because you can just grab it and move that beneath the rectangle that you want. Teoh. The Children, too, will work as a clip in a mess. So let's say it's going to be this green guy right here. But as you can see, sometimes you just have to You have to just drag and to find the right spot for this technique to work. But once you find it, you can see that right there you can make it a clipping mask, just like so, and we can move it to somewhere here. This should be fine. So again, I'm gonna make sure that I'm on the right player right here and grab another image. Maybe this Maybe these crayons, like so And I'm simply going to click like so. And I really wonder this image to be clipped by this green rectangle. As you can see here, my layers panel, all all of these rectangles has a different thumbnail, and it's Ah, I think it's a good idea to make these guys to give them different color, because now you can see that they are different in the layers panel as well, so it's easier to just distinguish which rectangle is which. So I'm gonna move this guy beneath this rectangle, but as you can see, it disappeared really well. That's because it's falling outside our clipping mask. But if we move it over our our rectangle, it's magically reappearing. Just like so. So now we can just repeat the process with all the remaining images, but I think before we do that, we can maybe change the colors off some of these rectangles because we have four ping correct angles here, and it might be a bit confusing in our layers panel So let's just that just quickly choose some arbitrary colors. Just so our rectangles are well better visible in our in our layers panel. Maybe this black one as well. Let me just change its color to some bluish color like so. And now we can actually make sure that we are on the right layer. Place an image, Maybe this guy And let's say that it's going to be clipped by this green guy right here. So let me just find it in the layers panel. It is this guy right here, and I'm simply going to move it there. Then again, I'm gonna make sure that I'm on the right layer and maybe this one and let's maybe brain it over this red one so again here and move it up. So let me just quickly do this process with all the remaining images, and I will get back to you in just a second. And there we go. We got the gallery created, the instagram feed created. So just remember that in order to create a clipping mask, well, the easiest way inside, if into designer is just to place an image and then just put it will place it inside a container like an ah, well, rectangle or a square or a silica or any shape that you want. So now that we have this section of created, our next order of business will be to just create their footer. And in our case of Footer is well is comprised of two parts with from this one against the greenback ground and the smaller one here in the bottom. That's actually a repetition off our Hatter. So let's actually start doing that in the next video. 48. Let's Create the First Column of the Footer: in this video, we're going to start creating our footer. And as you can see, I've already extended our art, but because it was getting too small. So let's now create another layer. Let me just do some quick housecleaning right here. So let me just quickly creedy new layer and call it footer just like so I'm gonna bring it down here beneath the gallery, and I think that we will start with the creating the background because our tax is going to be white and I just wanted to be easily visible for you. So I'm going to grab the rectangle tool and simply create a background that is going to be this big. I think it should be fine. Of course it needs to have have the proper color. And maybe I'll just note it up a bit, just like so. But I will do right now is I'm going to Gramp the frame textile and I'm going to create a text friend that is going to be maybe three columns wide. Just like so and again. Insert filler, text off course, if you had some really text former client, you would populated with this. But since we don't have it. We are simply populated with populating it with the some dummy text. So I'm gonna go ahead and choose text styles and choose section heading and let me just put it up just like so Maybe extended just a bit like so and put it a bit up to stumble here. This should be fine. Of course, if you don't want Teoh have this will text frames so big you can simply make it smaller. Or you can just grab the frame text tool again and again and create another text frame and insert some filler text because this time offended designer will most probably give you some other words to the editor that you can use in order to simulate the simulator that, well, heading every specific section. Let me just deleted. I'm going to clone this guy down to somewhere here quite significantly. I'm going to leave it for just a second because now I want to grab the pen tal. I want to make sure that I'm using up the stroke, but not off this guy so that we just diesel elected. I'm going to grab the mental again. I'm gonna make sure that I have on Lee the stroke, that I don't have any Phil and I want to stroke to be light. And I'm going to create a line that is going to be scratching from left to right all across these four columns. And I'm doing so because if you were to leave just this one word right here, it would look kind of empty. I mean, we are going to have some links here in the left in just a second. And if we just left it like that and then entered another column and another column, because in total, we're going to have three columns. It's just would look like they are wasting a lot of space. And this line right here is acting as a nice divider as a nice Philip. There is not too obtrusive, but at the same time, it really looks like it has its place. So right now, I'm just simply going to change this from a section heading to body light, just like so, and I'm going to make it just 11 word just like so. And I'm going to bring it up and clone it down maybe three times just like so And of course , again, if you want, you can simply add another that text frame and to change the text filler. Or you can simply just type in some other. There's some other words well, that you choose. Maybe some really links if you want. 49. Let's Finish the Design and the Whole Footer: in total. We want to have three columns. If we take a look at the original, it's three columns. It's these guys right here. So I want to make sure that each of these columns is properly aligned. Teoh the proper a grid call. But this background is blocking my view of it. So I will make sure that this Phil is selected here inside the swatches panel that I'm going to drop it down to something like 25%. Maybe I'm going to bring it back in just a second. So let me just zoom in a bit. And now, if I grab all these guys all these elements and I'm going to group them now, I can easily move this guy to the left and then just press control J to clone it to the right, just like so. And now we can just grab our background and bring back the opacity to 100% in the original . We have some more text to right here on the right, So something like a like a about US excerpt right here on the right, instead of just links here on the left. So I'm going to just click on these guys, remove them and then double click on this guy and just extended just like so. Maybe just a bit. Just a bit up and maybe clone it down just somewhere here. And if we just remove the panels for just a second and maybe zoom a bit out, we can see that we have created our columns with the links and some text right here. So really old. It's left to do is to simply just make sure that everything is being aligned nicely. So we have to just to group all these guys bring back the panels, added the bedroom to the selection and just a line, everything to dissenter. So, really, the last thing that we need to do here is to just borrow the Header Paul of these guys, just like so called Pete and just go down here, find the right finds right later, basted inside and just bring it a bit down. Maybe let's move it up. And now what we could do is we could simply make all these guys smaller because usually if you are repeating a foot in a header, so to speak, usually these guys are just smaller all these elements or smaller. So I'm going to make it may be this big and saying goes for this menu. So I'm simply going to make it smaller, just like so. And of course, we can just remove our hardboard, bring out a bit up and there we go. We created our our design. So I really hope you learned that they know too. But most of all that you enjoyed creating this website along with because I really do hope that you created it along with me. If something isn't right, just rewind the video, watch it again. And if something is still not too not clear, you can always just ask a question In our discussion board, the design may be finished, but to we are not done working with still have some things to do. We still need Teoh make it. We'll get it ready for deliver in it to the client and delivering it to a Web developer. If you will be working with one if you're not desire developing the website yourself. But the design is done 50. Delivering the design to the client: When you are done with the designing a Web page, it's time to deliver it to the client on various stages of communication with the client. You will be presenting different, slightly changed versions off the design, so it's good to know how to quickly save and share your work. Using a thing to designer, The most obvious way of presenting worker would be to save the design and send it to the client. In most cases, they won't have offended designer installed under computers, so you need to send a file that will be common, easily recognizable light and that will preserve the quality of your design. The easiest and the most foolproof file format to choose to send to your clients is, of course, J. P G. Save your work as a J pic file is as easy as using the export command that you confined under the file menu. Really, the only two options you needs to pay attention to a this stage is that the quality slider and the area selector, as I imagined before the best compromise between good quality and small file size, is 70 to 75%. One major drawback, though off using a J pick as a file format is that it doesn't support transparency. If your design has some graphical elements that do contain transparency, batter choose P and G as to file format. PNG supports transparency, but as you can see, there is no way of controlling the quality, which basically means the level of compression applied off. Their file. Vet means that usually PNG files are bigger than J. P G's, but you already know how to compress P and G's so the larger file size shouldn't be an issue. As for the area, you want to export Jews whole document or a specific art aboard if Europhile has multiple designs spread across multiple art boards, like a lot of questions from students asking what father formats they should deliver to their clients. So let me address this issue really quick, assuming that the design is over and that the client is happy and has paid, it's time to hand over your design. The file formats you put inside their delivery package should include all the major ones, such as P and G. J. Paige. Pdf PSD tiff and last but definitely not least the source file, which in this case is dot a f design. I'd recommend exporting the design to all those file formats and then zip in the files in tow. One smaller file but the client is on. Lee won end off the design delivery process. The other one is the developer that is going to be developing the website. I mean, if you are the developer than you can skip the next video. But if you're not, let me walk you through the process off handing the file and different assets to the Web developer next. 51. Delivering the file to the developer: If you are ready to send the designed to a developer, there are a few things you need to take care of. First of all, chances are that a developer you'll be sending the file to will have Photoshopped just old on his or her computer photo shop is just so ubiquitous that you should really be fine sand in a PSD or TIFF file. Exporting to any over those five formats is, of course, down through the expert command found under the file menu. But exporting to a PSD, you could choose from one off three presets from which only first to should be a subject of your concern. You could either tell designer to preserve maximum accuracy or maximum edit ability. Unfortunately, none of these presets will maintain text as Aditya Ble. It doesn't matter if you used the filler text or type in some real words. Designer will convert them into pixels. All of the layers and mass should be preserved, but not the auditable text. So it is just something you should bear in mind. Another important factor to consider in this specific process is exporting the assets you used in your design. I am not speaking about anything you put inside the assets panel, but about the images, icons and other graphical elements you used. There are basically two ways off export from those assets in designer, so let's take a look at them both. The 1st 1 is great. If you just needs to export one or two assets quickly, simply select an image icon or even a piece of text like our logo and used the export command. Choose the file format you need, and don't forget to change the area. Option to selection without background hit export, and you can export any assets you want very quickly. But a friend to designer comes with a special workspace dedicated just to exporting. It's called the export persona, and we will take a look at it next. 52. How To Use the Export Persona to Export the Assets in Bulk: the export persona is a whole different workspace and set off tools created just for exporting your assets. Its main tool is called to the slice tool, and it allows you to create small pieces off artwork called slices, and those slices can then be turned into separate files, thanks to the slices panel. But there is one major problem with this tool. Sometimes quite often, really imagine the slice with the actual object you want to export can be extremely difficult. Unfortunately, you can't just select an image or any other asset and then choose the slice stole to create a perfect slice. I don't know about you, but to me that's really frustrating. But luckily, there is a solution to that. If you just grab the selection tool and the right click on a piece of artwork, you can select the create slice option and what designer created the slice for you and even give it a name correspondent with its name in the layers panel and what's even cooler. You gonna select multiple elements at once and create multiple slices using the same method . Once all the slices are created, you can move on to the slices panel and choose which ones of them are supposed to be exported. Simply tick or antic them, then either export just a single file or all of them at the same time. Don't forget to choose the export preset that suits your needs to. This is how you can use the export persona to save single assets from your design. I think it's a great way off exporting multiple pieces of artwork when you want to save time. 53. Thanks for watching the course: So congratulations. You've completed the course. I really hope you enjoyed it and that you learned a lot. I mean, I hope that by now you are feeling way more comfortable about using a fainted designer to design websites. So in the course, you learned not just how to use its tools and techniques to put a website together, but also Web design trends and inspirations. How to choose best funds and colors for your websites. Where to find great images, how to work with icons, how to work with colors, basically all the essential tools, things, techniques and tricks that should get you started and allow you to design websites independently. So if you like this course, please give it a honest review. And I hope to see you in one of my next courses have a nice design. My name is David Tyminski. 54. 1Let's Discover the Wireframe for the Design: in the next videos, you are going to learn how to create this modern creative block design, and we're going to create both the first page and a single post page. But before we move on to the actual design process, let's take a look at the wire frame that I created specifically for this design. And let's actually start with the wire frame for just the main, the front, a blocked page. So as you can see, I've started with the header and you can see that there is a logo on the left and a navigation system on the right. Now the background is dark because I want will. Ultimately, I am going to create the background that is going to be dark, and I will put some contrast in lighter elements like the logo and the navigation system. Against that background beneath the heather, we got the hero of section, and even though in this wire frame it looks like we are just going to create a single image , in fact, in the main design, we're going to create something. We're interested. We're going to create a carousel slider with the multiple images, block post excerpts and of course, navigation. Beneath that, I've decided to divide to the main sections into two sections. So on the left we got the block Boast excerpt the main featured block boast excerpt. And on the right, I have decided to create a sidebar. So first on the left, we got to the future image off the future to block boast. And then we got some simple wife frame representations off the date. Of course, all these elements are a simple text. So we got the the date wire frame element on the block Post will head her title. We got to the author info the number of Commons here. We got some small representations of the social media icons we got to the block post excerpt on the tags or the categories and the read more button here on the right. And all these guys, all these elements are being displayed against a contrast in background this container as a different by ground, a wider while a light background. And it's in contrast with the whole background off the whole blood block Web page. How, beneath that we could continue. We could just duplicate this idea and simply clone down all this, all this whole container for a block post. Except But I've decided that we could spice things that the little we could divide this block right here into two separate sections into two separate columns. However, we are duplicating at the block post. Except But of course, we are making it much, much smaller. And these two columns host will 123456 block post excerpts together. And beneath that, I've decided to put a bottle or a text link that would navigate to older block posts within this website and on the right. We got the sidebar right here. And the cyber is also separated into specific Collins. So maybe let me just quickly zoom it, zoom a bit in just like so. So we got to the search box right here, Then we get the first. The first section that is ah, well, that starts with a small label right here. Then we got the image text and some social media cycles. And this whole this whole section, this will fragment is going to be our about me about me section. Then we got another label and some text. Then we got something like a most popular or trending block boasts. So we got a featured image on the left on the block. Boasts title on the right, the date and the will, the date on top and the category or tags here at the bottom. And as you can see, these small containers are being separated by a divider line. But not all of them. The last one doesn't have this this line, because here we got another label. So this divider line right here would look redundant. I don't think that we needed right here. So and then, of course, we got just a simple label and some images the and this section. I've decided to decided to make it like a container for some ads. Maybe So when all that is done, we can move to the footer off course if you want it, you could maybe add some instagram feed right here. But since we created this instagram feed in our previous design, I thought that I would leave this decision up to you. I mean, if you want to create this instagram feed container down here, you already know how to do it, and you can included in this wire from in this design. So I've decided to just move on a straight to the footer. And as you can see, I've separated it into three columns with the same labels as we can see as we can see in our in our sidebar right here. And of course, we got some links on text down here, and I've repeated that repeated the header. But of course, it's who swell, smaller way, way much smaller than the main heller on top. And, of course, based on this wire frame, we are going to create this design. But I think that we will break it down and in the next video. 55. 2Let's Discover the Blog Design : So in this video we are going to take a look at their main design. Now we know what the wire frame looks like. So now it's time to take a look at the main design. How the whole concept to will look like, based on that wire frame. So again, in the top left corner in our hatter, we got the local, which is a simple, simple text on the right. We got the navigation system with the social media icons right here. So it's a pretty, pretty basic concept, but I like this minimalistic approach when it comes to headers. Then we got the hero image. And as you can see, we created a carousel. The type slider, a carousel slider, is a slider that host not just one image, one big image spending across the whole view port but a serious off, smaller images that when When? I mean when you click on one off there, the navigation buttons simply moves to the left or to the right, just like a carousel. So each of these, like containers for images, has its own unique title right here. And of course, we got these navigation buttons right here And if you're wondering why these guys are white , this title, this title and this arrow and this title and this arrow well, the Bagram for this arrow and are I guess it's like a dark pink color. Well, that's just because I'm indicating what I would look what I would want to these links to look like Whenever you hover over this this arrow I want the background to turn pink. And whenever I hover over this title, I wanted to turn to pink. Same goes for this home. Well, for the for the current page link right here. But this photo owed logo is going to be is going to be, well, pink all the time. So next up, we got, of course, our sections. So we got the main main image the featured image right here. The data, the block post title. We got to the author info, comments, icons, text, some tags and the read more button down here. We already will saw in the wire frame part what? What all these containers should contain. But notice that some of these guys are, well, the same color. I mean, this diet date is the same color as the block bows. This by text is the same. Cholera. The text excerpt is the same color as our the colors for them, the social media icons. However, all these links right here the comments, the photography lifestyle travel tags are written in a different color. This is the main color for the links inside these containers. However, when you hover over them, they said they're supposed to turn into pink just like these guys right here. That's why they are written in a different, different color. But when you go to these thes post, except you consider, have decided just to leave the basic links colors which are green, which is green in this case. And of course, all these pieces of texts are being shrunk, so they are smaller than the main, the main tex up here. And of course, we got two columns and we got different photos, and we got six elements all together. Now, as far as them as far as the side Margo's, you can see that we got this simple magnifying glass here that this container has a simple , simple border, and I've got the text search here inside, and then we got to the labels. Then we got the photo text that is, um, aligned to the center Social media I guns. And then there's the text that we just saw. Of course, the label and the text. This text is not being aligned to the center, but to the left. And then we got the most popular block boasts. So this featured image. It's spanning across from top to bottom. But of course, it's just taken around 1/3 off the whole container. We got the date on the block post title and the category right here, and we got 1234 containers. And then we could just got a container, 40 ads. And of course, it's just some plain images. And then, of course, we got the food. Or let me just zoom back out of it. We got the footer with some legs. It's just some placeholder text. And of course I've been will duplicate it. But, um, but shrunk the header from top down here to the bottom. So we got the logo. We got the navigation and some social media I got. So there we go. This is what our basic design is going to look like. But, of course, we still need T o. Take a look at what will our assets at the colors, the funds, the images that we are going to be using to make this design happen. But I think that we should do that in the next video. 56. 3Let's Take a Look at our Assets: So to make this design happen, we are going to basically need three things We're going to need collars, images and typography. Now, this forest colors go. We got in the swatches panel this whole group created right here. So we got 12345 colors. We won't need more. We got to this very pale, very pale, great color that is actually the color off our main background. This is this guy right here. We got to the accent in white color. That is the color off these links the navigation links, these social media icons, of course, the backgrounds off the containers, a swell. Then we got to the main typography color, which is this very, very, very dark gray color. It's not black, it's very for a dark. And then we got to these two main accent in colors, which is this bank this dark pink and this green color. And I've created this whole palette. They using coolers that co this tool that were already well, we learned one of the previous videos and I started with just a I knew I wanted to create a darker will lie to great background and I wanted to put some white containers against that background. So I first I just simply typed in the value for this great color, the white color. And then I just added this very, very dark gray color. And then I just let the the algorithm to come up with these two accent in colors for me. Of course, we got a lot of images right here. And they are. They are all going to be supplied to you in a separate folder s so you can work along with me. And as you can see, there's quite a lot of these images and they are indifferent to sizes and in different containers. And this kind of design will allow us to again work with the put in images inside specific containers like square containers, rectangular containers. So I think that it's central to know how to smoothly work with images inside a frame. The designer, when you are designing websites and let me just tell you that we are not going to use masks , were going to use another technique of working with images inside a friend to designer, that might be a bit easier for you. Oh, it already might not tire. At the end of the day, you have to decide which technique is easier for you, whether it's masking or this other still a bit mysterious technique. And after we are well after we know after you know both these techniques masking and the other one, you'll be able to decide which one works better for you. So this forest typography goes. I've decided to go with the Roboto Superfund family. Now it's called Super Family because you get different typefaces within that family and different funds with then those families, for instance, the logo right here and there Block post titles are written using the firm, the Roboto Condensed and its bold version of fund. But the main body text is written is written using Roboto regular. But the links right here are written using Roboto, italic and, of course, the read more text here and they are using Roboto bold that condensed but roboto bold and all these guys have separate text textiles right here. However, I think that in this in this case we are not going to create textiles first. But I think that we're going to create them last. I mean, with designs like like this one. It's what? Until it's finished, it's always a working progress, right? So you might change your mind from time to time or more often than from time to time and as to what your funds should look like. So until you are completely decided on, say, the blood post titles or the links, you shouldn't. I think that maybe not. You shouldn't. But it's a good idea. May be to wait till you have the concept all figured out and then just to create the textile. And I think that that this is the approach that we're going to take in this design because working with textiles in a friend to designer can be a bit tricky. So maybe using this way will help you harness the textiles enough into designer and allow you to work with them a bit more efficiently. Okay, so we got the wire frame covered. We got we broke down this design and we know what assets we are going to need. Also don't remember the remember Don't forget that we have thes thes sections put against separate layers. So we got the header layer. We got the hero layered the section layer sidebar, footer. And, of course, this whole design is being displayed is being put against a grid that you can see right here. So I think we got everything pretty well covered. Don't be surprised if, from time to time I am going to be referring back to either the wire frame or preferably this this main design, because I don't want a I want to spend too much time looking at me, trying to figure out what the original was. Forgive me if I just from time to time, simply take a take a glance at the original Swyche and so I can show you the techniques needed to create this design a bit quicker without trying to figure out the phone size or the color. So, without further ado, let's actually dive right into the main design process. And let's start with the creating the Hatter 57. 4How To Create the Logo and Nav: So as you can see, we are going to create our design and based on the 12 column grid we used before. So if you want to work along with me, you can just download the same five that you could download when we were creating our previous design and simply worker using that that file. But before I started designing anything, I'm going to create a layer for our header. So in the Layers panel, I'm simply going to click on the new layer. I I come and I'm going to call it. Header has her just like so head like that, and I'm going to move it to beneath the grid. So I'm going to start with creating the bag ground for the header and let me just quickly take a look at the original to check the dimensions of this background. And as you can see in the transform panel, it's 1920 pixels will wide and it's 100 pixels tall. And of course, it's 1920 pixels wide because this is the with off our view port off our web page. So what I'm gonna do is I'm gonna make sure that, of course, I am on the header layer grabbed the rectangle tool. Create a rectangle that is going to have, like, very arbitrary in the world dimensions. Because right now I am going to make sure that my reference point right here is set to this top left corner so I can move it. Teoh the top left corner off my web page. So I'm simply going to enter zero for the X value and zero for the wild. Why value Just like so To make it snapped to this top left corner right here. And now I'm simply going Teoh. Well, I'm gonna make sure that this link option is not checked. So I'm going to type in 1920 and I'm going to type in 100 for the height, just like so. And there we go. We got our background created. Of course, we still need to give it a proper fill color. So I'm going to click on this darker swatch right here and now we can start creating our our well logo. So again I'm going to refer to my to my original. I just want to see the size of this off this front as you can see it's 42 points like that , and it's a of course, written in the rebuttal condensed, bold. And by the way, if you don't have this Roboto Super Super Family installed on your system, you would have to go to the Google Web funds and simply downloaded and from there. But we already discussed how to do it. So I think that you shouldn't have any problems and they just downloading on that front and installing it. Insider Afinitor designer. So I'm just going to grab the artistic textile, just like so course I'm gonna make sure that I'm on the right layer. So with the artistic textile, I'm simply going to click and drag to start creating text. I'm going to set the front to Roboto condensed just like so, and I'm going to choose its bold version. And I'm going to type 42 for its size and change the color to this, uh, pale welcome back pay of a dark pink color just like so. And I'm going to type in foe towed just like so. And I'm simply going to and of course I need to move it to the right layer, and I'm simply going to move it up until it matches their my my, uh well, might grit. And of course, we can simply select both these guys to make sure that this ah logo is sitting exactly in the middle off our background. And I'm simply going to go to the line off the arrange panel and choose this guy right here . It says a line metal just like so. Press OK And we are done with the logo. So next up, we would create this this will this navigation system along with that wood, the well will social social media items. So again, let me just check the height off this guy. It's ah Roboto medium 16 points, as you can see right here. So I'm simply gonna grab the artistic textile again. Click and drag. I'm going to change the color to White that I'm going to type and maybe home just like so Let me just move it against the darker back room. So you concede. And so it was roboto a roboto medium roboto medium eight on the height was 16 I believe. Let me just check that again. 16 and ah, What we want to do is We want to make sure that all of these navigation links are written using Onley capital letters. So I'm going to go to the character panel and I'm going to choose this option right here that says all caps. And if I just click on it, you can see that this all these letters are being changed to true to their capital versions . But as far as I remember, our home link was written using this pink color, which indicates that this is actually the active page. So I'm going to change it to the pink color, just like so Now the only thing left to do here is to simply duplicate this guy to the right, and I am holding down the control key and the shift key to constrain the movement just like so. And I'm going to change the color toe white, and I'm going to type in something different, for instance, maybe gallery and notice that we don't have to press the caps lock nor the shift key in order to make them these letters old calf. Because they are, They still have assigned the old caps attributes right here. That was said, just a second to go in the character panel. So now we can simply let me just close it. Now we can simply cologne this guy to the right again and ah, type in and maybe my gear and maybe one more that just simply going to be, uh let's say maybe contact just like that. So now we got the navigation. Ah, navigation system I created. I'm going to move these guys a bit to the side, just like so. Maybe all of them, but further to the side. So what we have to do now is we have to do is we have to add these these guys right here, these social media icons right here. So for that, we are going to use the police command. And I think that I think that we could do that in the next video because we're going to do some editing with our social media icons. So I think that I think it would be best if we did that in the next video 58. 5Let's Add the Social Media Icons: So before I start place in in on the social media icons, let me just quickly check how big they are. Let me just zoom in a bit and let me just click on this guy right here. It's Ah. Well, let's say it's 16 pixels right here. So what I'm gonna do is I'm going to click on the place Image tool, and I'm going to navigate to where I keep my social media icons. And I'm going to start with the Twitter icon and I'm simply gonna hit open and I'm going to place it somewhere here. Of course, it is way too big, so I'm going to make it smaller this time. I'm going to make sure that the lock aspect ratio option is jacked. And I'm going to type in 16 to make this guy way, way smaller. But of course, the color of this icon is, well, not good. It's supposed to be white, but as we already know, we can simply change it in our tools panel. We have to go to the added document option, and we have to simply just choose white color like that and close this guy so we can now have Ah so we can now have at this icon improper colors. Next, I can simply just cologne this guy to the right go to replace document and choose maybe Facebook. But again, as you can see, we again have to have to change the color. I really wish a friend to designer. Well, I guess it's not a box. So I can say I really wish they fixed this bug, but I think that it would be best if they just added dysfunctional that if I am cologne in this guy this imbedded document I am cloning its attributes as well so they could be a clone. Like in this case, the collar could be cloned to the cloned object as well. But since it's not, we still have to go to add a document, click on the white, a swatch, then duplicate the Facebook. I come to the right duplicated let me just duplicated, just like so again replaced the document with the Instagram logo, added document and again cloned this guy selected and clothing to the right. Replace it with a pinch arrest logo edited ed, white color. And there we go. We got the eye concert created. So the last thing to do here would be to align everything nicely. So what I want is I want equal distances between all these guys, not just the text links, but also with the Aiken's. So what I'm gonna do is I'm first going to grew up this Pinterest logo I instagram, Facebook, Twitter and all these guys. And I'm going to make sure that they are being aligned properly to dissenter to the middle , just like so Now I could move them to the right and aligned them with my with my grid. Just zoom in a bit, just like so. This should be fine. So what I want to do right now is I want to make sure that the distance between all these guys ease equal. So not only between the text links, but also between text lings and social media icons. So what I'm gonna do is I'm simply going to shift click on all these elements to select them. But just these guys and the social media icons as well, just like so. And I'm going to go to this. Maybe let me just move it a bit down so you can see everything better. So I'm going to go to this range panel and from the align horizontally option, I'm going to choose space horizontally. And if you want to leave it, as also distributes, well, you can do it. But if you want to make sure that the distance between all these elements is exactly the one that you want, you can simply on check, order, distribute and just play around with this slider here. Maybe. Let's see something around 20 or 24 pixels. I guess that this should do so now we can just move these guys to the right and make sure that they are nicely aligned with our grid. Maybe just a bit to the right. Something like that. And we could just group them by President Control G on our keyboard. So now that all these guys are created lineages, zoom back out, All these guys are created. We can again make sure that everything is being is being nicely aligned. I guess I have to group these guys again just like so, Control G. So we can just make sure that they are aligned properly as well like that, and that they are aligned properly in relation to the background, just like so. So there we go. We got we got this Hatter created. If I just press tab, we can see our website. I guess this guy moved a bit. We can see our website in its whole beauty. Well, website, it's just it's just it's just our our header. We can quickly just maybe get rid off the grid just like so. So we can see. And our and there were guides so we can see everything better. So this is this is what our and this is what our header looks like. I think it looks like it looks kind of minimalistic, but at the same time, this pink color is that in a bit a bit. Ah, well, it makes this whole whole header looked a bit livelier. So the next order of business would be to create our our slider. Let me just zoom back out to create our slider to create these photos to created these block. Well, they are actually leading to a block post. So I guess we could say block post titles and that navigation. But we are going to do that in the next video 59. 6Let's Add the First Images: so as usual, we're going to start creating the hero section by creating and inappropriate layer for that section. So again, I'm going to simply add a new layer and ah, name it. Ah, hero. And I'm gonna move it beneath the header layer just like that. So what I'm gonna do again is I'm going to simply grab the rectangle tool and I want to make it as toll well as wide as the website itself. And I'm going to simply position it properly, just like so. Because what we are going to do now is we are going to create three separate containers for these images. Eso in order to have three separate containers, we need to divine this rectangle right here. Let me just so men ever so slightly just like that. So at this stage, the height is not important. It will be in just a second. But for now, what is important is that our rectangle is spreading across our web page across our view port. So since we want to have three separate containers, we need to divide our rectangle by three. So in there and I'm simply gonna first, I'm gonna make sure that I'm divided it from the stop left anchor point. So what I'm gonna do is I'm simply going to type in ah slash three, which is going to divide the this a rectangle by three, just like so. And as you can see, it's with its 640 pixels just like that. So if I want this container to be a square like here that I have to just simply make up the height equal to the with. So in this case, 640 just like so now, another thing worth well noted is that main distances between between sections or within sections and between main elements off sections are usually 25 pixels or double that which is 50 pixels. So the distance between these containers is this gap right here. This margin is 25 pixels, and the margin between this slider and the heller is also 25 pixels. So now I'm simply going to move this guy up the snaps with the header and for the y value again, I'm gonna make sure that my reference point it sets well on top right here. And I'm simply going toe. Add 25 just like that. But I am going to move this guy 25 pixels to the left because I want to create this kind of a carousel affected this thes containers are are actually going out off the view port. So again, I'm going to move this guy to the well, I'm going to move it to the left by 25 pixels. So for the X value, I'm simply going to type in a minus 25 just like so. And then I'm simply going to clone this guy to the right till it snaps with the original. And I am going Teoh, add 25 just like that. And then I'm going to clone this guy to the right snaps with the original that I'm going to add 25 just like so. So now we got three separate containers that well, the left container and the right container are kind of like going out of our view port and of course, them in the middle. We got to this whole square container. Of course, all these guys are square containers, but these ones might kind of look like they are more of a rectangle. Since we can see this 25 pixel gap right here. So again, if I simply just make sure that these guys are on the right layer on the hero layer, I can now use another. Another trick to make to make These guys will behave like they are image image containers. So if I just twirl open in my layers panel, you can see that I got all these rectangles right here. Okay, So I quickly made sure that my rectangles are on the right player that the right layers on the right are bored, and I could make sure that they are being displayed in the right direction. So let me just quickly check it. So I'm going to move this guy down. So now all these rectangles old while these squares can work as our image containers and that's as easy as simply selecting one and then making sure that the insert insert inside Selection option is checked just like so And then if we just will either juicer the place image to or go to the file menu and then place navigate to the spot where where we keep our images now weaken simply, just choose an image Maybe. Maybe this coffee image. Why not? And now, if we just click, this image is going to be placed inside that red container. That racked angle will square in our case, and now we can simply just maybe make it just a bit smaller. We can. You can move it around if we want to. Just like so. So again. Select the rectangle. Make sure that this insert image will insert inside. Selection option is checked. Place an image. Just navigate to the folder where you keep your images. And maybe this time I'm gonna choose, um, something a bit more contrast. E. Or maybe not. Maybe. Let's let let's keep let's stay within the bar and the bar theme. I'm going to go with the cake click like, so make sure it's it's just a bit bigger. Um, maybe like that, this should be fine. And the last one again, Selector. The the rectangle collected inside. Insert inside selection option and place the image And maybe this time the sandwich. Since since we are at a bar, let's just remain in the in the bar, the bar theme, Uh, just like so. So there you go. This is how you can simply use the simplest. The simplest really tells to create nicely looking image containers. So we got the header we got. We got to this hero section will almost finished. We added him the images. We created the rectangles and then we turned them into image place holders. But of course, what we still need isn't the navigation which will be the arrows on the left and the right and, of course, the block post them titles. But let's start to doing all that in the next video. 60. 7Let's Add the Shading to the Images: So I'm going to start creating ah, the remaining pieces off our carousel slider by first checking the font that I added to the original design. So, as you can see, it's written using the Roboto condensed, bold version of the fund, and it's set to 46 points. And, of course, on the middle. One is not to use in the white full but the thankful because it is indicating that it's that it's being, like, Highlight that, that it's in the active link right now. So back with our design, I am simply going to grap the frame textile just like so. Of course I'm gonna make sure that I'm on the right layer and I'm simply going to click and drag just like that, and I'm gonna set the front to Roboto Condensed and I'm gonna choose. It's of course, bold version. Make sure it sets to 46. I think it's I think it was 46. I'm gonna make it white, and now I'm simply going to choose text insert filler text to just like so, and I'm going to align it to the center. I'm going to make this frame a bit smaller so we are left only with three lines of text, just like so that just move it a bit to the right and I'm going to move it down to summer. Here, this would be find it. So now I'm going to move this guy to the right just like that, and this guy to the right as well, Just like So now I'm going to turn this guy to this piece of text to think, and it already is a bit more visible, just like so. But as you can see, since we cloned this first filler text once and twice to the right, well, it still is the same text, right? But we can quickly change it simply by first selecting a piece off filler text, then going to text menu, insert filler, text. Just click it to de select it and then select it one more time in order to paste some other piece of text. So again, de select, insert filler text and then insert filler text again. So it's ah, another piece of text. Right now, however, chances are that from time to time your text might not be too visible against a certain certain background against a certain image. Bankers like in this case, if you were to just leave it as white, you can see that we can't will. We really can't see it against now. This will plate on right here. Ifit's set Teoh to pink. Then, yeah, it's visible, but without that, it's not really visible. So how can we fix that now? In situations like this, it's a good idea to have some kind of a slide bag ground. Add it to your will image containers right here. So what I am going to do is I'm going to simply create a rectangle that is going to be, well, the same as our Assauer image of placeholder. But it's going to be put over the image, and then we are going to add a Grady int to it and drop its opacity down. I know it sounds like a lot, but it's really, really easy. So trust me, just trust me on this one. So I'm gonna go into a selective, this image placeholder, and when I go to my layers panel, you can see that I got this coffee right here. It's a rectangle with a coffee image inside it so what we could do. And actually, what we have to do is well, I think it would be just easiest. Teoh duplicate this image container that we have here. So I'm simply going to find it in my layers panel. This is this guy right here and you can see that it says rectangle and that there's this coffee image being will put inside this rectangle. So what we could do is we could simply right click on it and choose duplicate. Or you could always use the control plus J shortcut. And what it does is it creates a duplicate off this image of this well, whole object above it. So we have a rectangle and we have a coffee image right here. So what we could do is we could simply select this coffee image like that. And if we just deleted, you can see that we are just left with a plane rectangle. And if you go to the field tool just like so, we can change the type of the filled from solid two linear to create a Grady int. And if you know, click on this icon right here, we can change the will the capacity, the position, of course, the type as well. But what we want here is we want to change this color from gray to just simple white just like that, and drop its opacity down all the way to zero, just like so. And now we can simply still using the filter move the Grady int up just like so. Just like that. Of course, we can still click on our Grady int and maybe changed this collar to plane in black just like that. And if you want, you can just drop its opacity. Let's say maybe 15 just like that, and it already looks looks much better. So again, just as the repetition let me just grab this guy. This, uh, this rectangle and I'm going to again and duplicate it. Get rid of the image inside this guy right here. Then using the filter will change the filled to linear changed a Grady int this Grady in color from gray two plain white drop its capacity down to 50 or maybe even zero. Just like so, changed this guy's color to black, change its capacity to 50 like so and then just bring this guy from down from bottom to top just like that. So now our were well, titles can be visible a bit better. So if I now just change this guy from pink to white, you can see that it's that it's visible so much better. So again I'm gonna grab. This is sandwich rectangle. I'm going to duplicate it just like that. And again, I'm going to get rid of this of this image, just like so and again Go to the fill tool, change it from solids too linear and change the Grady int. Let's just go with zero opacity This time, let's change. Let's change this color to plain black, just like so again, change the opacity to 50%. And let's move the Grady in from bottom to top, just like so. And there we go. We got we got the slider the carousel created except off course for the navigation which we are going to create in the next video 61. 8Let's Add the Navifation Buttons: So before we start to create in the navigation of while for our Carrizalez leather, I think that we should do some simple, simple housekeeping. I mean, I want to make sure that all of these elements, all these pieces are nicely grouped and labeled. So what I'm gonna do is I'm simply going to clicker both mouse buttons and I'm simply going to select these guys and press control. G. And I am a celeb pressing both the left and right mouse buttons to, in order to select on elements adjust by fragments off their off their bounding boxes. So again, I'm simply going to click and select. But sometimes it doesn't work properly, and you have to really click again just to make sure it Zebina selected properly. So again, click and collect and select, just like so, Control G. And there we go. So now we can maybe labeled this guy as, uh, let's say image one. There we go, then. This guy as, uh, image to and the third guy as image image three. Okay, so now let's create him of the navigation, and that's going to be your fairly easy. What I'm gonna do is I'm gonna make sure that my well, for this moment that my stroke is set. Teoh this dark color and I'm going to grab the pencil and I'm gonna leave it to in this in its default pen mode. And I'm simply going to hold on shift and click ones click twice and then quick once more. In order to create this kind of a this kind of an arrow had just like that. Let me just zoom in a bit closer. So now let's just a grabber, the rectangle toe and hold down the shift, the key to create a square that is going to look something like that. So now what we can do is we can simply make sure that these guys are being aligned properly . And if you want, you can always maybe make this guy bigger. If that's that, that's your well designed choice. But I think I'm going to leave it to leave it like that. Now, of course, we not want Teoh select both These guys clone them to the right and simply reflect them to created the second beast off our navigation. But as I mentioned, and if we take a look at the original, you can see that this guy is Well, this arrow is being put against a pink background because this is just indicating that when this arrow is being selected, when the user is clicking or tapping on it, it's supposed to change. So in this case, I am simply going Teoh, maybe press a shift, acts to exchange to fill with stroke and, of course, changed a stroke to this pink color and make sure that it's being put to beneath the my my arrow just like that. Now that we have these guys are created. Maybe before I move them up, let me just maybe turned this guy to turn stroke to white. Same for this guy. And of course, since they are way to bake, we can quickly make them smaller. Do something like so and grab these guys. Maybe all group quickly put them somewhere here like that and then grab these guys put them somewhere here and now we can just group them like so and make sure that they are aligned to dis entered the dissenter properly, just like so. Of course, if you want, you can let me just make the zoom in real quick. If you want. You can maybe maker the stroke, but bigger. So instead of Juan, let's just try to just like so the same goes for this arrow instead of one. Let's make do so it's just more visible. And of course we have to do the same for this arrow instead of one. Let's make it two, just like so. And if we now just zoom back out, this is what our This is what our slider looks like Course. Maybe. Let's just grab these guys and make sure that they are being aligned properly. Of course, vertically as well. Let's just bring them down like so. And now if we take a look at our dollar design, it's starting to look. Look nice. We got the header with the logo with the navigation with the social media icons. We got the carousel slider with them, the arrows on, of course, the slides and that text. So we got to the heather and the hero sections created. So next up, what we would do is we would move on to the more complex parts. So we got warned up. Now we can move our move on to maybe this first big block boast excerpt a section, so let's start creating it in the next video. 62. 9Let's Create a Container for the Blog Post: Let's just start creating a featured images container by first bringing up of the grit. I wanna see the grid because I want to know how. Why'd you shoot the block Post container, How wide it should be. Because when you go Teoh, when we take a look at it the original and we take we take a look at the grid. We can see that it's spreading across a certain amount of columns, and the cyber is also spreading across a certain amount of columns. And in this case, the block post is spreading across the nine columns and decide bar across three goals because nine plus through three equals 12. So in our case, we have to make sure that our A block post container I mean, well, our featured image container is spreading across nine column. So, as usual, I am going to start with creating a new layer just like so. And I'm going to name it, uh, blood boast featured. Let's let's take You didn't like that. I'm gonna bring it down, so I'm simply going to grab the rectangle to, and I'm gonna make sure that it has some visible color attached to it. but maybe to the film, and I'm going to spread it across nine columns just like so I'm going to bring it up so it matches. So it touches my a hero, a section right here, just like so. And let me just bring it a bit down. And what I want to do right now is I want to move it down by 25 pixels. So I'm going to add 25 to the Y axis value, just like so. And this is our image container, Of course, as far as its Ah, a zits. Ah, what? Maybe let me just just the with as well, because I can see that it's not too. It's not, too. Yeah, this guy that this time it's OK. It's spreading across exactly nine columns, and as faras them, the height of this container goes in this case, it's pretty arbitrary. I mean, you could leave it moral like a square if you want, or you can go for the standard 16 by nine ratio if you want, and I think I'm going to go with this something like 5 50 pixels. I think it's snapped that obviously, 16 by nine. I mean, it's a It's a photography blawg. Rather So it doesn't have to be all that, like video aspect in terms off in terms of its images. So now that we have this ah, this container created what we could do is we could maybe simply bring it down to create the container for our well text excerpts. And this will be the background for our text excerpts. And I'm going to change the fill collar to to, well, this white color. So I'm gonna go to swatches choose White, just like so. So now we got When that we got Teoh, let me just move them just a bit to the right and again make sure that they are being nicely aligned with our right column. As you can see, sometimes it just It just requires a bit off tweaking to make everything pixel perfect, just like so. But it's a I think that it is important. That's why I am paying attention to these little these little details. So again, now that we have these guys created, we could simply again and grab this rectangle right here and again choose inserting site selection and find a inappropriate image Maybe this. Let's see. Maybe this big Ben a photo. Why not? Let's just click. Too tired to place based in just like that. Spread it up and there we go. We got our and we got our main image created. Of course, that was the easy part. The harder part is adding all these pieces off text. Of course, it's a It's not difficult to add the text, but to make sure and to design them so they interact with each other just the way they should is sometimes quite of a challenge. Because take a look at them. These guys have to be a bit different. I mean, not only inside, but also they are italic and that these guys completely, completely not italic. It's a bold, it's condensed, it's really standing out. But these guys also have to stand out, but in a bit of a different way. They have to be informative, visible but not obtrusive. So it's that kind of a balance that quite often is difficult to achieve when you're creating these elaborate, elaborate pieces off text. So let's start creating our pieces off the text. Our block boast links, text excerpt and this read more link in the next video 63. 10Let's Add the First Pieces of Text: So before we start creating the text, we have to fix one problem. I mean, if we now take a look at our block post excerpt container and look at the background, we can see that there is absolutely no contras between these guys. It's not intentional, I gotta admit, but actually will give us a good and the chance to discover one. A feature of affinity. Designer in offended the designer you can and colors not just to objects, but also to the whole art word. So in this case, we don't have to create a separate rectangle that would pose as a as a rectangle as well as a background as we would have to in other design software like Illustrator, we can simply select the art aboard and weaken. Just click on this great the grey swatch to make it look like so. And just like that, we filled the entire art aboard with just one color, and now we can see that we actually do have this have this will difference this contrast between our between the background and the container right here. So we are going to start the process of creating the text for our block post except with the date And even though it's just one line off next, I'm going to use their frame tax tool for for this piece of tax because the frame Texel will treat a bounding box that is going to allow us to align everything nicely. And he's going to make the data frame reusable. So let me just grab the frame textile and click and drag to creating text frame. Now the fun that we are going to be using is, of course, Roboto. It's italic version. The fun size is 14 and of course, the color is this very, very dark black color. Now, if you want, you can use some filler text. But I am going to type in the date 2017 just like so and now I am going to make this frame smaller till it is fit in nicely with my date with the date. So not what we have to do is we have to pray in it all the way to the stop left corner till it snaps with it nicely, just like so and now we can move it to the right by 50 pixels. Remember that we have our original point origin transformation point set to top left and down by 50. Just like so in this piece of text is going to be our kind, like an anchor for creating the remain in pieces off text. So now we can do is we can reuse this piece of text to create the block post title, so I'm simply going to select it, hold on the control on my keyboard and duplicated down just like so Now I'm going to extend this text frame all the way to the right until it snaps with the background. And since it's a text from well, it became is much like an object. So we can simply subtract 50 from our front from the width to make sure that the distance between this not like that the distance between this left part of the text friend is the same as the distance between the right part of the text frame and the background. Of course, we have to change the text. Will the text size found and all along that. But first, let's move it down on by 25 pixels, just like so and now it can change the font from Roberto to Roberto Condensed. It's bold version and let me just check with the original. It's 54 points. Eso bolt remote. Oh, condensed 54 Just like so. And of course, we can still fill it with with someone with some dummy text. If you want to type in something meaningful, be my guest, but simply going to go to I'm simply going to insert some filler text and extend the text frames so we got some more or text. 64. 11Let's Add the Remining Pieces of Text: So the next pieces of text are the author's name, comments. And of course, we got these these social media icons down here. So again we can just grab this guy, cologne it down until it snaps with the original, and we can simply maybe make this guy smaller. Just like so changed the fund from rebuttal back to remote, oh, condensed back to Roboto And this time, regular 14. Just like so. And instead of filler text, I'm going to just type in the word by. But before I do that, let me just add 25 just like so. And I'm going to type in by just like that. And of course, let me just make it significantly smaller, and I'm going to Kelowna to do the right. This should be fine. Something like this may be a bit to the right, and I'm going to type in author's name, and I'm going to extend this text frame, and in this case, we're going to change the color from this grade to green and from regular to italic. And then we just have to cologne this guy to the right to create the link for comments like that And maybe we can just group these guys. And all that's left to do is to just add the social media icons, these guys right here. But I don't I don't want you to look, get to me clicking and doing all this all the same things we did when we were creating the header. Because again, it would be just, ah, adding the documents, editing them, replacing them, changing the size. I mean, I think that you already know the drill. You know how to do it. So let me just take a shortcut and just copy these guys to make the process faster and more enjoyable for you. So I'm simply going to copy these guys, and I'm simply going to pace the been just like so and align them properly just like that. Okay, so next we would, uh well, the next thing we would have to do is to simply just borrow this guy, align it with these guys down here and let me just quickly check. I think it's 25 pixels again. So again, I would move this guy just Justin down, press enter, and then change the front back to Roboto or regular 16. Check the leaden and change it from 16 to something like 22. Just like that. Let me just close it. And then again, just I think that we still need to this. Yeah, these Ah, these pieces of text right here, the photography, lifestyle and travel Eso I'm simply going to grab, just zoom in a bit, grab this guy and clone it like so again, do plus 25 and type in the tags. Now let's extend this text frame just like so. And the last piece of text that we need is just this read more button down here. So again, what we can do is we can simply clone this guy to the right and maybe let's move it a bit down. So it's a bit more prominent, just like so and for the character in the character panel. I will change, and I will make sure that these letters are written in all caps, just like so change it from right Alec to I think it was medium, but let me just quickly check No, it was bowled, some going to change it from medium too bold. And of course I'm going to type in, read more just like so. Maybe I will align it to the right and maybe let's change it from green to this pink color . So we know that this actually easy a link. And now we can just grab him of the hour, our background and move it up and then just add 52 it 50 pixels. But not I don't want them move. I don't want to move it. I want to add to its height just like so. And if we now just zoom back out, we can see that we created our text. Well, I will first block most. Except so we got the image. We got the tax, we got the icons, we got the links and everything is is looking is looking really nice. If you want, you can just go maybe grabbed this piece of tax and maybe make it a bit smaller. And then just just add another, another paragraph to make it look a bit. And we'll bit different a bit more, I guess, livelier. But just remember that you would have to make sure that these distances again are equal. And maybe let's just quickly change the stacks to something different, just like so. So it just looks so a bit more dynamic. Let's put it like that. So there we go. We got the first block post except created. Our next order of business would be to create the columns with the both and with both the worlds, smaller images. Some back out with these smaller pieces pieces off text. But we are going to start doing that in the next video. 65. 12Let's Start Creating the Blog Post Grid: in the next few videos. We're going to create these block boast excerpts. These cards right here. We already have the main featured block post right here. So now it's time to add them. Cut like older on the block boasts container down here. And as you can see, we got two columns, the left and the right column. And each one has three block postcards. Eso I guess you could say that there are three rows and each one hosts to to block boast carts. Now, what's important to understand here is that we need Well, we want to maintain the same gaps between thes thes elements as we as we created toe here. So what's also important to understand is that these cards are going to be like much, much smaller than our main block post. So we might want to consider maybe removing some off these elements instead of adding all these tags, social media icons, all these links we might want to simply like a trade them the design elements for more simplicity and the usability. So let me had back to our main design right here, and let me just quickly bring up the grid So the first thing that I will do is I'm going to create a separate layer for my block post grid. So I'm simply going to add a new layer and rename it to block post grade. Now I'm going to move it beneath the block. Post featured like that now. So what we want to do right now is we want to create Ah, something like visual guides that would assist us in creating containers for our carts. So the first thing that I am going to do is I'm gonna grab a simple rectangle tool. I'm going to give it somewhat visible, failed. Maybe this darker feel, just like so Now I'm going to create a create a rectangle that is going to stretch across all these nine columns just like so. And let me just quickly see if guy if I aligned everything properly and I believe I did just like so So I want to have a 25 pixel gap between this main container and my next containing my next grid. So, in the transform panel, I'm simply going to add 25 pixels for the Y axis value right here. But just remember to set the original point to one of the top points right here. It can be either left center or right. As long as it's a top point, we'll be fine. So I'm just going to add 25 now. In order to maintain equal gaps between our elements, we would have to create a 25 gap between Will 25 gap between columns for our cards, right? So again, let's grab the rectangle tool and this time create maybe like a more vertical rectangles, just like so. And maybe I'll just change its color to something. Maybe this pink color so you can see everything better, and I will make sure that it has. That it's with is exactly 25 pixels, just like so. And now we can just grab it, move it up and make sure that it is being a probe that this bean and we'll incident in the center off our main like our main visual guide. So I'm selecting both the ball, these rectangles, and I am simply position in this guy exactly in the center spot, just like so. But of course we won't be needing this this rectangle, So I'm going to select all of them. And here I am going to choose subtract from our from our path operations just like so. And now I can be sure that to the distance between my containers is exactly 25 25 pixels. Now, if you don't to see these rectangles, but you still want to have some visual guides helping you establishing the size of the containers for the cards you could always simply bring out to their guides. So first I'm going Teoh, show the rulers I'm gonna go to view show rulers. Or you could just go with control plus our shortcut that would be even faster. And I'm simply going to start printing out the guides just like so. So I know where my were my containers and where my containers start just like that. And we could bring out one horizontal just like so and one vertical just like that. So now if you don't want Teoh, let me just make make sure that these guys are positioned properly. So if you don't want to see those rectangles, you can simply play around with the guys. But I would definitely recommend starting with the rectangles. So you know where to position their guides. So once they are done, you can You can simply remove these rectangles. And now all they would have to do is to just grab the main this main image. Let me just turn off the grid, this main container, clone it and simply play around with its size and the text. But I think that this is something that we are going to do in the next video. 66. 13Let's Create the First Blog Post Card: Okay, so now we can start creating our cards for the grid. So I'm going to turn off the visibility off The rulers by President Control. Plus are just like so. And I'm going to select everything on this block post featured layer and I'm going to copy it and paste it all my block post grid layer, just like so and now group everything. So right now, this whole container is just one is just one group. Let me just make sure that it's on the right layer, just like so. So now we can simply move it using our guides. Move it to the stop left corner, just like so. Let me just zoom back out a bit real quick. So now if we start making this guy smaller just like so, we can either make everything smaller proportionately and leave the text well, untouched. But we can also grabbed by this top Bob bottom right corner. Bring it in. And as you can see, since we created our text as well live filler text, the text frames are changing. They're trying to adjust themselves to the new size off course. It doesn't look that it's not even remotely all right, but we're going to fix it in just a second. But before we start Krug, well, it's just in the tax. Let me just quickly change this Big Ben a photo, some going to double click on it to navigate to it and reveal it in my layers panel. So I'm going to get rid of it just like so and then select this rectangle again. Make sure that I have to uncertain side selection option turned on and just navigate to them a place where I keep my images and maybe let's go with this cake photo. Just like so I'm going to click at just the size and there we go. We got to the the image created. So as I said before, we could sacrifice and the amount of design elements we have here for for like, more visibility, better visibility, battle usability. And I think that this is something that we're going to dio right now. So, first of all, I'm going Teoh, turn well, this spink the Spink text into into a green text. I don't want it to be. I don't want to be a link anymore, so I'll just leave it like that now for the for the date. I'm simply going to double click on it and expanded, just like so Now I am not going to be using these social media icons. I'm going to get rid of them. I'm not going to be using the comments, so I'm going to double click. Sometimes you have to double click a few times in order to navigate to a group within a group within a group that it does work. But sometimes you just have to click. Could coiled click twice in just one more time. So now I'm going Teoh, maybe grab this these tags and extend them just a little just a little bit. And I think I'm going to maybe just leave one wound tag just like so, and bring this guy to the left ever so slightly. Of course, our were. Our main concern is this title right here, because it's going to be the most visible thing in our cards, so we need to make sure that it is visible, but it's not too obtrusive at the same time. Some going to double click on it, and I'm going to change the fund from a 54 to Let's see 22. Maybe I think this fine and maybe let's just slightly increase the line height from 22. So let's see. 26. Let me just zoom back out to see what it looks like. This would be fine. I think we can leave it like that. We can always play around with it later. So now we can simply grab our main text things Main container for our post excerpt and let me just quickly maybe extended a little bit to three lines of text move. It's just a bit up, just like so now. We could maybe grab the title and move it a bit down just like that. And let's let's see what it looks like right now. I think it looks all right. Weakened. We can leave it like that. Of course, we could play whole afternoon with all these elements, trying to find them the perfect balance, but usually just a matter off off. Adding one point Teoh to the phone size or two points. So I will leave it to you. But I think that that it looks fine right now, So I'm going to I'm going to leave it like that. So all we really have to do right now is we have to just copy or duplicated this whole, this whole group to the right and then to the bottom, change the text, change the images and our grid will be complete. But let's start doing that in the next video. 67. 14Let's Add the Remaining Cards: Now we can duplicate our first card to the right and then duplicate both cards down twice so we can create our grid. So I'm going to grab this card first, hold down control and shift to clone this guy to the right, just like so. Then I'm going to shift, weaken both these cards and again, control, shift, click and bring them down. And of course, we want to these guys. I mean, we wanna have the gap between these guys to be 25 pixels. So again, I'm simply going to add 25 just like so And now again, we can just click on both these cards, click and drag, of course, holding down the control key. And then we can again add 20 five. Just like so. All we have to do now is we have to just change that text. Of course, we have to change the images and and the great will be basically complete. So again, I'm going. Teoh, isolate this. Ah, this image right here. And as you can see, I got it here in the control panel in the layers panel. I can just to know, delete this image and again make sure that the insert inside selection is option is turned on place the image and grip, maybe the cat photo. Why not just, like so do the same thing with this guy so isolated in my layers panel. Grab the image, remove it and again just to insert inside selection just like so and again. Maybe add this image just like that. So what you could also do is we could change the text. Just remember that since this is a filler tax, this is a filter applying filler text weaken. Still, we can go to the text menu on Chek insert filler text and then do the same thing. Insert filler text again. And this time affinity designer is given us a different set off dummy Lauren Gibson text. We can do the same thing with the shower will post, except so he can just isolate it unchecked the insert filler tax and then just click insert filler text again just to make it look a bit a bit different. So again, I'm going to navigate to this image, find it in the layers panel, delete this image like so make sure that I am based in the image inside the selection. Grab this coffee image. Maybe this time. And as you can see, it's way too big, so we have to make it smaller. So I'm holding down the control key right now. Teoh make it smaller from its center point. Just like so. This should be fine. Let's maybe change at least the title. So again, go to the text menu and insert another set of filler text again. This image, like so DoubleClick Oona to find it in the layers panel. Remove it in certain side selection. Corrupt the photo just like so over just a bit around. So it fills our placeholder nicely. Do the same thing with this image so you can see a furniture designer really east, flexible when the when it comes to adding images, creating block post excerpts, I will actually create in any kind off any kind of image of placeholders. Maybe let's make this guy but smaller because, as you can see, it's just a bit too big. And once you know the simple techniques, you can really speed the process up and create a professionally looking blogger block front , front page. So I'm just going to changed this text like so maybe changed this image. Change this title like that in sort of filler text. And there we go. If we now just go back and maybe let's turn off the visibility off our guides. Just like so we now have the main image made block post. And then we got this grid right here, looking looking really nice. Now, remember that this is just 11 kind of good you can create to show other will smaller block posts within your design. You could always just create him, maybe duplicate this main image this dismaying block post just duplicated a few times and have a list off big, big image and text containers. Or you could simply just create a list with the image on the left and text on the right. But we will create it in the sidebar. That's why I didn't want to, like, duplicate this concept here. And you could also create something that is called a maze and regret, which basically looks like a pinch arrest feeding. So in a mason regret you just have bigger images may be a bit more tax, so containers look like blocks of different of different sizes. So now we know how to create a block post grid we created to first. We created some visual guides, remember we created to the rectangles, then the guides. And then we just copied this main container from top. We contended we competed in to our to our layer that will change its size. And then we just change the text in images and got rid off some of the elements of, like social media cycles and some links. Of course, if you want, you could add some more. Some more con, some more containers right here. But I think that for now I am going to just leave. This has is. But I am, however, going to add the older posts Battle right here, and we're going to add a narrow because we want to the users to have them the ability to click and on this button to see older boats within our design. But let's actually do that in the next video 68. 15Let's Add the Older Posts Link: so I want to make things simple for you. So when you are recreating this design, you can simply your recreated faster and ah, and see and get a better look at what's what's going on here. So I've decided to just name a, well, these cards, all these groups. Accordingly, I've decided to give them numbers. So when you just look at this file, you can simply work with it a bit easier. So now it's actually create this older posts. Ah, link down here. So I'm just going to grab her the artistic text stool images quickly zoom in and I'm going to click and drag and type in older posts. As you can see, I'm using the Roboto condensed font. Let me just make it. This will dark green color and I don't think I want it to be this big. Let's make it a bit smaller. Let's try 20 20 should be fine. And of course, we wanted to be put exactly in the centre between these guys and we wanted to be put the way we want to create a 25 pixel gap between in this a piece of text and that containers so again. What I am going to do is I'm going to add 25 just like so to bring it down like that. Of course, I wanted t be on the main layer, so I'm going to I'm going to put it on this block, bows, cred, layer just like that. And maybe let's move it down to somewhere here. Now, if we take a look at the original, we can see that there is this little little arrow down here. So in order to create it, we can use her. The custom shapes inside a fader designer. So I'm simply going to grab the arrow toe and quickly create a narrow that is going to look something like so. So from the context menu, I'm going to choose known for the left and just like that and prenup, bring them the thickness down. Let's see, maybe 10%. This should be fine. Let me just quickly make it smaller to summer here. And as far as the right and ghost, let's change it from arrow to barbed just like that, and change its color. And right now, if we change its size, you can see that we can still manipulate this arrow just like so. And of course, if you hold on the shift key, we can proportionate to make it smaller till it's something like that. No, let me just bring it up to somewhere here. And maybe I will extend that ever so slightly. I don't want to be too big. And of course we can still change the thickness. If we want Thio, of course, we can change the ends. We can change the thickness of our of our arrow. Let's go, maybe with 20%. So let's change the thickness of this to 20% to remember that it's going to be really, really small. So maybe it's a good idea to make it a just a bit more visible, just like so and maybe just have been smaller, right? So now we can move it a bit to the right, group them and make sure that they are positioned somewhere in the center, just like so let's add 25 and there we go. We got the grid created. Our next order of business would be to create this side workers. Right now we got to the header. We got this slider we got to the main image. Well, main block, post container. And we got the de block posts Grid, along with the older boasts a link here on the bottom. So now let's actually move on to creating the slider. And we will explore this this kind of design in greater detail starting in the next video. 69. 16Let's Explore the Sidebar Project: in the next few videos. We're going to create this sidebar, So let's a take a look at it to right now. First of all, you can see that it's a stretching across three columns right here, and it's divided into separate. Let's call them ideas, and each idea is, ah, tag is labeled right here. So first we got a simple search box. So it's just a simple rectangle with some text inside and they the magnifying glass icon right here. We also have this first idea, this first container that is this about me container. So we got to this label. We got to the image, and as you can see, it's a It's a square image, some text container and container and social media. I comes down here. Then we got a simple, simple, like a text container with a with another label. And then we got the most popular container. This is a kind of like a blogger post feed, but it's showing on Lee the most popular, the most popular block boasts, and these and these block boats can be the ones that have the biggest number of comments likes or that were shared. The most times. And as you can see, this little rectangular container is divided into two parts. So on the left we got a square image, and then we got a text container right here with a date with the of course, um, with the post title and the tag. And there's a small line dividing these guys right here. And of course, the last container doesn't have this dividing line, because beneath that we have this label that is starting a next next will section contain the ads, which, of course, in this case are simple images just to represent the ads inside our design. So let's start creating our sidebar right now, and let's start creating it with with a new layer. So let me bring back that panels and let me create a new layer, and I'm going to call it sidebar. And now we are ready to create our first a section in our sidebar. Which off course is them that the search box item right here at the top? So let's start doing that in the next video 70. 17Let's Create the Search Box: So I'm going to start creating the such box first by using the rectangle tool. And I'm going to make sure that it has the white Phil and they darker stroke and that the stroke is not too big. One point should be enough. Let me now just quickly zoom in just like so and now we can create a search box that is going to be something like So it doesn't have to be, doesn't have to be too big. We can maybe even make smaller to like 50 pixels, just like so Now I'm going to get rid of the grid. I don't need it anymore. What I do need, however, is the text insight. So with the artistic text tool, I'm going to click and drag and type in something like Search Here. And of course, we want to change the font from Roboto condensed to simple roboto. Maybe not thin but italic. Just like that. Change the size to something like 16. Let's change the color to this dark gray color just like that. And of course, let's make sure that we that it's actually, uh, the feel that were affecting, not the stroke, and let's now maybe trump capacity down to, let's say, 50.50%. And what we have to do right now is, of course, we have to create the magnifying glass, which shouldn't be a problem solid. Just grab the Ellipse Tal, create an ellipse. And now let's grab the rectangle tool and creating a rectangle that is going to have a filled, darker, filled and I don't want it to have any stroke, just like so And let's make it smaller. Let's let's go with maybe even one pixel. Why not? And let's rotate it from its one of its bottom points by 45 degrees, just like so And let's make it just a bit smaller. Let's go down to 10 pixels something like that. And now we could just maybe bring smacking finalist down a bit. And if you want, of course, you can make it smaller, so I'm just going to group them and make them smaller to something like so. And of course, we can also drop drop its capacity down. Let's see 50% as with our text, And of course, we need to trouble your passage down off all the elements percent again, I Let me just zoom back out. This is what it looks like. Glutton. Just maybe move this guy a bit to the right. As you can see, it's not really difficult, but it just needs a lot of tweaking. Let me just maybe bring this guy bit down to 12 points, just like so well but a bit to the left. And now let's see what it looks like. It might be too small for you. It might be too big for you. It's already know, really a matter of bird personal preference. OK, let's leave it like that. Let's not spent too much time making it to make it look. Look perfect goes from my experience. I can tell you that it rarely looks perfect, and and I am spending way too much time on making just, like, really, really tiny adjustments. Still, it looks OK, but as we know done is better than perfect. So let's leave it like this. So our next next part would be to create this first container, which was the about me section. So we have to create the label, the image and then some text with social media icons. So let's start doing that in the next video 71. 18let's Create the About Me Section: So I have decided to group the elements creating our search box. And I named the group well, search box down here. So now we can move on to create in our first about well, first badge, first label and then the whole about me part off the sidebar. So what I'm gonna do first is I'm going to grab the rectangle tool, change the color to this red color or pink. And, of course, make sure that the opacity is backward to Beckett 100%. And I'm going to start creating my rectangle from this bottom left corner off the previous rectangle. This should be fine. I'm going to leave it for now, just like that. And now I'm going to create another rectangle stretching from right two left, just like so and again. I don't want it to be too big. What we have to do right now is of course, we have to add some text inside here. So I'm gonna grab the artistic textile, click and drag right about me, just like so that I'm going to change it from metallic too bold, just like that. And of course, we're going to change the color to white and let's maybe bring this a bit down to, like, 14. 14 should be fine, and I'm going to bring it up. And as you can see, we might need to adjust this rectangle a bit. So everything looks nice. Maybe even just a bit to the right, just like that. So now we can grab all these elements, grouped them and simply bring them down. Starting from the resent from the center will top point bring them down by 50 pixels. So now we can start creating these thes image. Will this image and this text container So I will just again wrapped the rectangle toe find this bottom left bottom, left corner shift, click and drag. Make it a bit bigger to make it actually square written it down by 25 pixels. Of course, the color off this container doesn't really matter at this point, but I am going to clone it down, make it a bit smaller, just like so and of course, turned this in this rectangle into a doing image container. Some going to click on this insert inside selection option and find the appropriate image. Maybe this this image because of course, This isn't about me section, so it would be best to show some. Show the photo off the person who is the author off the blogged. Let's center it like that. Let's turn on the color of this background, too, right? Grab the text frame, toe frame textile and create a simple piece of text that is going to look something like that. I think that should be fine. We're going to align is properly just a second. I'm going to fill it with the with some with some filler text. And, of course, make sure that I have the rebuttal regular but 16. And of course I want to change, and I want to change the the color as well. Just make sure that I have everything selected properly. 16. Change the color to this dark gray color, just like so. And, uh, maybe let's align it to the center and let's take a look at the line height. Let's drop it down a bit. 2 22 Maybe I'm going to print just of it up, and now we can make sure that everything is aligned to the center in relation to our background, and I'm just going to quickly borrow these social media. I comes. I'm going to copy them over here and again. I'm going to make sure that they are being aligned nicely in the center, in relation to this container. And now we can just grab the text and the the icons group them. And now a line everything nicely to the center, just like so. So we got our container container created. Now I just noticed that I think that I should have just created well added 25 pixel gap instead of a 50 pixel gap. But you know, sometimes these mistakes well, that that I make actually will give us a, well, a nice incentive to learn some new things about different to designer. Our kind of like solving design challenges that you definitely main come to when you are designing websites, because chances are that you are going to make mistakes, and that's all right and it's actually even good. Well, it is good as long as you learn from those mistakes. So I'm going to grab all these elements. Let me just make sure that I'm grabbing all these elements. I'm going to group them and now what we can do is we can simply make sure that we have this guy set this original point set to top and simply in order to bring it up by 25 pixels. I'm going to do some maths here, so I'm gonna go with minus 25. And there we go. Since we had this gap right here set to 50 pixels, anyone to have it set to 25. So always really have to do is to just subtract 25 pixels from this gap right here. So this is what it looks right now. So we got our search box. We got our about me section. We got the the image got, um, this this text container, and we got to the guidance. So we got the first. Well, 1st 2 parts off our sidebar created The next part of the sidebar would be to create this. Let me just go back to the original, this little piece of text right here and this little label. So let's do that in the next video 72. 19Let's Create the Text Section of the Sidebar: So now we can create them My blawg section off our sidebar. And again we are going to reuse the elements that we already have here. So first, I'm going to grab the label just like so and copy it down until it snaps with this, uh, this container, let me bring back the panels and I'm going to put it down by 50 pixels just like so And let's change all red, then the about me text, Let's change it to my block. So with the text told the Artistic textile, I'm going to select this text and just type in my blawg just like so. And of course, depending on how big or how wide this text for our label is, we might we might have to. It's just it's background. So in this case, I'm going to grab this thistle rectangle and just make this this rectangle just a bit smaller, just like so. So now I can just borrow this piece off text right here and this background CO p and based it and bring it down like so of course, I'm going to on group everything. I'm not going to need these social media icons I'm going to get rid of them. I am going. Teoh, change the alignment from center Two left just like that. And we can simply maybe bring this this paragraph down. If they change some filler text inside. Why not? Just like so And now spread this guy down. Creating on this piece off like simple simple thanks can give us another occasion toe, learn one more aspect of working with different functions and told, Sir, In affinity designer, remember that we have in general gaps that are either 25 pixels or 50 pixels. So if you want, you can maintain this. Well, this idea within your text boxes. So for instance, here, if we want to make sure that actually that the gaps, the padding inside this box is set to 25 pixels on the use what we already have Well, that's actually really, really simple. All we have to do is to make sure that our text box is spreading across our well, our background in this case. So now what we can do is we can simply make it make it smaller. So first I'm going to make it smaller from the top to create the 25 pixels gap. So I'm going to set the original point to the bottom and I'm going to subtract 25 from its height, just like so. And I'm going to make the central point sit in the center. And now I'm going to subtract 50 from the with because I want to, and I want to create the gap on the right and on the left. And they both are supposed to be 25 25 plus 25 is usually 50 some going to add 50. I'm going to subtract 50 like that, and there we go. Now we can be sure that the distance between the top and the left and the right parts will edges of our container or exactly 25. So now I can just get rid of this guy and I can bring this guy down. And if you want, you can also make sure that the distance between these guys is 25. But I'm not going to go that well. I'm not gonna go. I'm not going to create that big gap. I'm going to maybe add 12 pixels just like so and again with this kind weaken do exactly the same. We can just bring it down just like so. And make sure that this is actually 20. That the gap here is 25. So we can eso weaken simply. Just grab what? Maybe this time from let's let's do the transformation from the top. And from the height lead, subtract 25 just like so. And ah, sure, we can change the next the filler text just like that. Okay, so we got to this piece right here, created so the next section would be to create this big, most popular blawg feed block post feed right here. So let's start doing that in the next video. 73. 20Let's Create the First Container for the Most Popular Posts: So let's start creating the next section again by just duplicating some elements. I'm gonna grab this label right here and bring it down till it snaps with with this top container and I'm going to add 50 pixels to it, just like so next, I'm going to just Gramp the rectangle tool. As you can see, we're using mainly really the simplest tools. And I'm going to create a container just like so bring into down maybe. And I'm going to simply again add 2025 pixels to it. And if we take a look at the original, we can see that it's divided into two sections. But honestly, it first was divided into three sections because I wanted to create kind of like a 1/3 2 3rd division right here. So how can we do that? The easiest way to do this is to simply first copy this rectangle some copy and paste in it like so, and let me just maybe quickly change its color so you can see the better. So right now we get do different two different containers to different rectangles. So how to create two containers from this one container that and one of those containers will be 1/3 off the total with and the other one is going to be 2/3 off the total with. So first, I'm going to t divide this first container this first rectangle by three. Just like so to create a 1/3 version off the whole whole this this whole container. So now we have this smaller rectangle and this bigger rectangle right here. So I'm going to grab both these guys and from the paths operation I'm going to choose divide just like so. So we have just this rectangle and this rectangle. But as you can see room this well, this is a rectangle And we wanted to be a square cause if we go to the original, this guy is a square. So since it's ah, with is 90 pixels, the height needs to be the same. Some simply going to type in 19. Just like that, Adam got into the same with this guy. Just type in 90 and this is our first our first container. Now the last thing to dio, of course. Well, container wise. I know. I'm I am sake. Container. A lot is to create a line. This said this division right here. So I'm simply going to grab directing to rectangle tool again and create a rectangle stretching across our three columns and make it hard. Make it just one pixel high just like that. And I'm going Teoh bush it down by 12 pixels. I don't want to split pixels in half, and I know that we usually have 25 pixels and we will soon have 25 pixels between these containers. But I want this line to be put exactly in the middle of this gap right here. So since 25 divided by 2 to 12.5 and we can split pixels so we can go with either 12 or or 13 on, I'm gonna go with the 12. And just like that, our first container is created. So he got the image placeholder on the left. Next placeholder on the right. And this line this this a border down here. So in the next video, we're going to start adding the content. We're going to add the image we're go to add the text and then duplicate this block post excerpt. Well, we are going to duplicate it down three or four times, so stay tuned 74. 21Let's Create the List of the Most Popular blog Posts: now, before we Kelowna this container and populated with content. Let's goodly change the text that my block to text to most popular. Of course, you can type type in something else, like other users are reading or like most read. No, the most shared, most like whatever you want. I'm just going to go with Standard, most popular and I'm going to change the size. I'm going to make the size of this background just a bit bigger. So now I'm going to go down. I'm going to I'm going to zoom zoom back a bit. So now we can just grab this this rectangle and turn it into the an image container using them that that's what this system we already knows. I'm just going to based on the image in just like that. And now we can start adding adding text. So let me just quickly borrow maybe this date or maybe from our from our most grid. So I'm going to grab the date the blows up the post titled and this tag copy them and based them over based them over here. And, of course, just bring them like so. And maybe I'm going to make this date just a bit smaller toe like 10 points. Hopefully, this still be visible for you and put it to somewhere here. Just some in like So now I'm going to make this guy smaller. Let's try 18 and let's change the line height to strike 22 or maybe even 20. And let's make the whole container much, much smaller and let's see what it will look like here. It still might be a bit too big. It's maybe let's make it a bit smaller. And maybe let's make the tax even a smaller. Actually, let's go down as a slowest 16. Maybe we can now extended just a bit, too somewhere here and now we can just grab this lifestyle December this tag. And since that was 10 let's go with 10 as well here and make it just a bit smaller. And let's let's type in the correct word, just like so Now he can simply grab all these guys and distribute them, just like so we can now group them. And there we go. We got our first container created. If you just zoom back out. This is what it looks like, and I think it looks. I think it looks a pretty nice. So now what we can do is we can just grab this whole container Kelowna down till it snaps with our line. This should be fine. Let's now add again. 12 or even a 13. So he got 25 just like so and again. We can just change Change this, uh, this image right here. This is this guy right here. And of course, you already know the drill. You know how to do it. So that's just quickly. Let's just quickly change at the photo. Maybe this time do these rocks make it the whole image smaller. Just like that. And again, we can change. We can change text just like that. And again, let's just Cologne is down. Let's add 12. And again, let's change the image insert inside. Selection maybe disappeared this time. Let's bring the image smaller. As you can see, it is way, way too big, just like that. And again we can change. We can change this text here Course. We could also change the tag, but let's not do it right now. And let's do the whole routine one more time, so I'm going to bring this guy down. I'm going to add 13 pixels because you want to have 25 in total, just like so. And this time I'm going to get rid of this off this line just like that, and I am going to change. I'm going to change this. This image, something else. I'm going to base toe. Maybe this Christmas, this Christmas photo in, just like so and again. Change this text like that. And there we go. We got our most popular, most popular blood boast feeder created. So the last thing to do would be to create the spot for these ads right here. So all we really need to do is to create this label and then just add the photos, the containers, Porta photos and the photos for themselves. So they all look like That's of course, if you want, you can design some really adds something like 20% off things like that. But I'm just going to go with the with simple images just to show you the process. And I don't want you to Teoh to spend time looking at me, coming up with some funky, funky sales pitches on some funky areas. Sales ads, things like that. So let's start creating our last piece off the sidebar in the next video. 75. 22Let's Create the Ads Section: So let's start creating in the ads section again by just borrowing the label. So I'm going to bring it down and I'm going to add 50 pixels to it. And instead of most popular, I'm going to type in, we're going to type in ads head. Of course, we have to make this guy smaller, and we will have to make this guy's much, much bigger cause. As you can see, it is too small. So let's just start adding, And by the way, you could hold them shift to add add values in in 10 pixel increments here in the transform panel. So I'm holding down the shift and you can see that I am changing the value by tense. Okay, so now all we need to do is to just create simple, simple squares that will host our our images. So again, I'm going to grab the rectangle tool holding shift to create this this square, just like so. And of course I'm going to move it down by 25 pixels like so, and I'm going to cologne it down, and I'm going to press control J to clone it down once more. But of course, these guys need to go down by 25 pixels as well. So once and twice in just a second like that. And now we can turn these containers into into image containers. So again, insert decides selection, grabbed the image, put it inside, make it smaller so we can see something just a bit smaller. Just like so again with this guy based, Maybe, maybe maybe this image inside, like so. And the last one based something inside. Maybe this sandwich just like that. So there we go. We got the sidebar Said were created. Of course not. Just a sidebar, because we already have. Then this, um, this header, we got the slider, and then we got to the main block post right here, and we got the sidebar. We got these well featured that featured blood boasts as well, and we got the ads. And the only thing that we are missing down here is the footer. And we are going to as well start creating the footer in the next video 76. 23Let's tart Creating the Footer: I'm gonna make sure that I have for this art aboard selected right here, and I'm gonna grab at the art aboard. Still that I'm going to extend my art board down to somewhere here, so I'm gonna do the same with the grits. I'm going to turn his visibility back on and I'm going, Teoh, unlock it. And then I'm going to extend it just like that. So if we take a look at the original, we can see that to hear the food er is divided into two parts. First, we got these these columns with links, but also have now the Hatter that is being repeated down here in the footer. I mean, it's the concept for the header is repeated down here in the footer. So what we can do is we can simply just grab the header. I mean, all its elements, just like so and make sure that we have the right layer created some simply going to quickly create a footer later. And I'm going to move it down just like so. And as soon as I paced Ah, those copied elements in you can see that they get based exactly in their previous previous place. But what we can do is we can simply set this original 0.20 just like so, and we can let Stipe in something like 2600 and weaken quickly print it down. As you can see, it is down here. So let's add maybe like, 2000 pixels to it, and it will go down here just like so. And of course, this guy has to be smaller, so let's quickly make it smaller. So I'm going to change this fund from 42 I'm going to set the original original point due to this middle left point from 42. Let's let's see 20 to be able to small 26 should be fine. And now, since that this guy is set to 2026 let me just quickly lock the grid and maybe even let's turn it turn its visibility off. Now that we got this guy created, we have to give make these guys smaller as well, so I'm going to grab them with this election toe, and I'm going to make them smaller, so I'm going to lock the aspect ratio and bring them, bring their height down or let's say 2 12 pixels. Maybe this should be fine. And there we go. This that this would be our that this would be our our well had her repeated in the Footer . We might even want to make this guy just but smaller, just like so. And let's make sure that everything is being nicely aligned to the center just like that. And let me just quickly zoom back out, turned the visibility off the panels off, and this would be the first element off our footer. The next element would be this. Just go back to the original, this big part off the footer with these columns and links and by the way, notice that these thes backgrounds the color of colors of these backgrounds are different. This one is darker, and this one is lighter, and actually, this is just one way off, creating like combined footers. Let's call them like that. Of course, this guy could be a darker and this guy could be lighter if you want, or both of these guys could have the same color, and they could be just divided with a line. For instance, if that would be your your design choice. So there are different ways of creating, like combined footers. Eso Let's just quickly take a look at, um at both. Well, actually, three designers scenarios how we can create a like a combined a later footer, layered, layered footer. But let's actually start doing that in the next video. 77. 24Let's Explore Different Footer Concepts: So one way of creating a combined food would be to give these guys the same color than that . The bigger the first part in the second part. The same a background color. So let's do it quickly right now so we could create the same the same well rectangle with the same background. Just like so. However, we could divine these guys with some with some lines, so we can simply just borrow this rectangle and make it much, much, much, much smaller and make it say a red just like so. But let's not do it that thick. Let's keep it simple. Let's go to maybe two pixels. But of course we wanted to be You wanted to be well spent across the whole art board. So let's unchecked the lock aspect ratio. And now it's just just ah, type in two. So now let me just quickly maybe borrow these guys. Just so you're going to see what I am talking about, we're going to create them in just a second. So if we're now just based these guys in something like so you can see that right now we got these guys, these guys will put against the same background. But these parts were being well separated with this with this line. So this one away off creating this kind of a footer, we could also just grab, um, this background and make it darker. Let's go with maybe not with black, but something really, really dark. Something like that. And let's get rid of this off course. If you want, you can you can leave it like that, but I'm going to get rid of it. So this is our original original design. And of course, if you want, you can maybe make this guy give this guy this caller this lighter, great color and we can maybe make it this guy darker, just like so. So it's really, really up to you up to your design choice with the which ah, which color scheme that you go for or if you decided to just go with one color. But to divide these elements with a with a simple line either way works. I just wanted to show you different different ideas on how to create this kind off. We'll design a website, a website element. So in the next video, we are going to end these elements. Don't worry, I won't leave. I won't leave it like that. We're going to take a look at how to create thes guys, and so it's actually start creating them in the next video. 78. 25let's Finish the Project and explore the next one: So I'm going to start with the bringing back of the grid just like so and I'm going to borrow 11 label. So I'm going to maybe grab this my blood label just like that. And of course, I'm going to make sure that I'm on the right player. This for layer lot right here that I'm going to paste it in, poured against my grid. I'm going to add 50 to create the gap, just like so Now I can zoom back out, and now we can create some Well, some links, some tax. So I'm gonna grab the next frame tool, and I'm going to quickly create a text friend that is going to spread across just these three columns, and I'm going to insert filler text and I'm going to change its color Two plain white. And of course, let's make it bigger 16 22 for the line height. And if you want, you can just leave it like that or we could just maybe make just a bit smaller and notice that if we just go back to the original, these lines are much, much well, why they're than just three columns. In fact, they're spreading across four columns, but the tax never exceeds those four columns. In fact, I wanted to keep these guys a small pond short because, you know, since it says links up here than I wanted it to look like links. But it doesn't have to be like that. I mean, like, on the left, you can have a column with some more text, which would be, say, like, I don't know, maybe some mawr important information that she would like to share with the users. So it doesn't have to be links to just for the sake of this of this design, I just decided to to make it to make it links. But again, we can simply just to make it some some plain text, just like so. However, what I definitely would like to do is I would like to spread this line across four columns , so it needs to go all the way to the right. Well, right here. So let me just quickly extend it. I'm going to hold on shift and pressed the up arrow so it sends to this to on this fourth call. Now I'm going to change the text. Let's see, Let's maybe type in something like, well, more text, just like so. And let's extend this, uh, this background, maybe not that much. This should be fine and not what we could simply dio is We could just grab this, uh, this label, this text and this text as well and simply cologne it to the right just like so and then press control J to clone it to clone it once more. I'm going to get rid off the grid. I'm going to turn his visibility off. And now, of course, we can simply maybe, like, change this more text to links and, of course, changed the size a bit like so. And as you can see, we again have to. It's just the size of this bar, so I'm going to make it bigger. And of course, we could simply maybe get rid of this bottom text about maybe let's just for extend this guy, cut it, get rid of this one basic back in front and maybe just make this smaller. So it actually looks like some some kind of links just like that. And let's leave it as more text right here. I'm pretty sure that you already know what kind of an effect that we are actually going for right here. So since this gap is 50 pixels, we want this gap to be 50 pixels as well, right? We want to have a coherent, consistent design. So I'm going to make this and make this background smaller, just like that. Maybe just even more. And now I'm going to, from its stop ad 50 pixels to its height, just like that. And now we congrats all these elements and moved them up like so. And now we can select this whole footer, layer this whole four layer, move it up to the older posts text, and now move it down again by 50 just like so. And of course, the last thing to do would be to just grab the Article two and make it make this guy significantly smaller like that. And there we go. We got no this. Well, this weapon webpage this front web page created. So this is how you can create a front page for a modern blawg. So we started with creating a logo and a navigation with some social media icons. We created the header, then we created the that while the hero section with the carousel slider, the image containers, navigation and the blood post titles. And beneath that, we added to the well the main feature to block boasts eso with the image and the text container beneath it. And then we added at the block post grid and on the right, we added, Ah, a quite an intricate side where I think with search box about me section text section, most popular blood boasts and on the ads section. And of course, we finished it off with the Footer, a section that would divided into two parts. Now, in the next videos, we're going to create the single post inside affinity designer single post page because we want to show the user and the developer what we think that the website should look like when a user wants to read a block post. So we are going to at an image container. We are going to add a lot of text. We're going to add a simple navigation, allowing the user to go to the next and the previous post, and then we're going to add the Commons section. But we also are going to reuse many of the other off the elements we already created that such as the Header, The Footer and the sidebar. So if that's something that you are interested in, just keep watching. 79. 26Let's Explore the Single Post Design: in the next videos, we're going to create a single post page for our block design and that we are going to do some things different. We're going to add some different elements, and we are also going to leave some elements that are already designed and are already parts off our design. So something's usually in a single block post change, but a single block post change. And some things stay the same. For instance, the header like this one, the side war, Because this was my design choice. So decided the site of our states the same and the food er stays the same. But all the other things are different, starting with the hero section. As you can see, we don't have the slider right here. I've decided to put the featured image here instead of the slider. And then, of course, we got a number. Well, the whole block post on the left. So our main design is divided into two columns again. So this block boast is stretching across nine columns. And of course, the sidebar is stretching across three columns. And right here we got to the data the block post title, some links the text. And then we are showing, Ah, the developer or the user how the image is going to look like. And then we were showing how some block quote the piece of text is going to look like We, of course, got some. Get some links right here, some tags, social media. I comes down here and then we got to a simple navigation for previous Post and the next boast, along with an image and a block post title. Then we got some cards for related block, both so these can be blocked boasts that forward in the same category that have the same tags and things like that. And then we got the comments section down here with that well dummy Commons dummy avatars and some Post will comment is boxes like the comment name, email post Common button down here, However, with the common section gold, there's one thing you have to bury mind, because when you are creating a blawg, chances are that the developer is quite often going to use some ready made from the plug ins for the common section. For instance, discuss or Facebook comments plugging, and those two are the most common plug ins used to create a block boast Commons under the block posts on that section ist. But in this video, I just wanted to show you how you can create completely, completely custom, the look of a comments section within a blogged post. So let's actually start with the creating our hero image. And then we are going to create a some visual guys that are going to help us in creating all these pieces off. Well, pieces of text, image titles, all the things that are needed there within a block post. Ah, single block post container. 80. 27Let's Create the Featured Image and the Post Container: As you can see, I don't have right here. I don't have any image. And the slider? I don't have any block Boast right here. I only have the sidebar, the header. And of course, the footer. Let me just quickly go down the foot or down here. So we're going to start with adding that featured image instead off our of our slider. Now, I already have a rectangle down here. This is this guy right here. And I simply quickly created it because I think you already know the drill. You know what is going to happen in just a second? Um, this is this guy right here. I just had created it really, really quickly to make it the container for our featured image. So again, I'm going to make sure that this insert inside selection option is turned on and I'm going to navigate to the place where I keep my images. Let me see. I think it was the big bad invention, this guy right here and I'm simply going to paste it just like so. And of course, make it significantly bigger. Move it somewhere here. I think that this should be fine as you can see right here There is a well 50 pixel gap between my image and this this search box right here. So in order to create a block post container, I think that it would be good to have some of visual guides for ourselves. So I think that we could start with creating the main background, this background, this guy right here for our block post. So first I'm going Teoh, I think we can just look this layer. We won't be working on it anymore. So let's create a a new layer and let's call it Ah, single post, just like so. And I'm gonna and it may be above the sidebar just like that. So what I'm gonna do right now is I'm going to create a rectangle stretching across all these these nine columns, just like so. So now that I have this container created, I can simply no bring it up just a bit. So it, Duchess, our featured image. And we can maybe quickly just give it a different color so we can see to just a bit better . So now we can just add 50 to the Y axis value to bring it down just like so. So now it matches our our well, the height off our sidebar. But of course, it needs to be white, just like so. And now we can simply praying it down to somewhere here. Not too far. I think that this should be fight. Maybe just a bit more, just like that. So now we would like to simply know how baker, this inner patting this inner end and should be and how much room we got to work with. I mean, we want to know how wide the text to this text this block post title needs to be. How why did this text and in the bottom has to be So everything looks nicely and it's for from following our idea off at in 50 or 25 pixels, gaps within our design. So how can we do that? Well, first weekend simply just grab our rectangle. This guy right here, copy it. And I think that we can lock it right now so we don't accidentally mess it up. So let's just quickly lock it. And now we can just based it back in. So now we have two of them and let's just quickly change its color. So now let's establish the transformation Origin point to the center and let's quickly subtract 100 from the whipped off our rectangle, just like so And now it's do the same for the height. Now I am subtracting 100 because 50 plus 50 is 100. And since we want to have a 50 big soul gap on top 50 pixel gap on the bottom and 50 pixel gap on the left and right, When I add 50 plus 50 on both sides, I get 100. So now I can just use this guide as my reference So we could maybe drop its opacity down to say 25% and maybe lock it and then just work against the well this background. But I want I want to see what my what my will tax the the content for the block post is going to look like against this wide background. I want to know what I am doing here. We don't know what I'm designing, so I'm going to quickly bring out some guides. So I'm gonna go to view gonna show the rulers and I'm going to quickly just grab a guide, a horizontal guide and a vertical guide. That's going to be right here. Let me just quickly see if I if I yeah, now it's no, It's sitting where it needs to sit. I'm going to just hide the rules by present control are. And now I can get rid actually off of this container I don't need to this rectangle So now I got Now I know how wide my my tax containers can be and we can start at in the first text container in the next video. 81. 28Let's Add the Blog Post Title: So in this video we're going to start adding the text and we're going to start with the block post titled. So if we just quickly take a look at this guy right here, we can see that we got the date the block post. Well, title. And we got to the author's name and the number of comments which are, which are plain links. So now I will make sure that I am on the right layer the single post layer right here. I'm gonna grab the artistic text tool, click and drag and type safe type in the date. Say this, that maybe 15 July 2017. Just like so. And I'm going to, of course, change its color and its size to save maybe like, 14. And I don't want it to be written in all caps, just like so change the color like that. Let me just quickly consulted with the original. I think it's I think it's for tonight, Alec. Yes, it is, I talic. So I'm going to change it from regular to italic. Why not? And let's just type in July like so and now I can simply move this guy Move this will text container to. Of course, it needs to be on the right layer and I can move it right now here to the top left spot to match it with these guides right here. So now we can create the block post title. So I'm gonna Gramp the text frame toe this time and I'm going to create I'm going to create the text box. Maybe like that this would be easier. Let me just zoom back out and I'm going to spread it across all the columns, just like so like that. And now we can just print it up. Still, it touches the 15 off the July 2017 and now we can bring it down. And in the original, I think it's I think it's 25 but let's just quickly check Let's check out the distance. So with the rectangle tool, I'm going to Yes, it will be 25. So now we can just grab this, Uh, this record will text frame toe, and we can just drop it down from the top. Drop it down by 25 just like that. And of course, it will be roboto condensed bold. But the front is going to be much bigger. We are going to see just in just a second how big, how big it's supposed to be. If we just insert some filler text, align it to the left, make it bigger, let's say Let's see 46 of course, let's make the line hide much bigger. Let's check 46 and let's make this frame just a bit smaller, like so let's see what it looks like. Let me just move it to the right like that and let's just quickly hide the guys. But president controlled semi column and let's maybe quickly hide the grid as well so he can see everything clearer. I think it looks nice, I think, let let's leave it like that again. If you want to change the text to hide line height or maybe the fund family as well, you can of course, do that. But I just want to show you the techniques and the way of thinking when creating this kind of this kind of design. So right now, what we can do is we can just grab this 15th of July piece of text, put it down right here and change the this text to buy and then type in author's name. And now we can just bring this guy to the right and then maybe let's move it by 25 pixels, just like so. And let's change this text to the number off comments. I'm going to get rid of this by word, but I'm going to type in and the number of comments just like so. So now we can simply bring these guys down by 25 pixels just like so. And of course, if you want, you can maybe brain this guy just a little bit closer to 15 pixels. That's that's really up to you. So let's take a look at the original. So he got to the author's name, the number of comments, the date and the block post title. Of course, if you want, you can maybe make these gaps just a bit smaller, too, like 12 pixels or 15 pixels. I'm going to leave it up to you. I want to keep the design inconsistent so whatever, I have 50 pixels, and if I want to make it like significantly smaller, a different gap, I'm just going to go with the half that value, which is 25 like Well, like here, Like in this case, Because I got to tell you that I am a bit of a like a symmetry and equal numbers buff. That Z is just That was just my jeans, you know, of course. Ah, us designer. You can go a little bit crazy if you want, and we'll take a do things a bit a bit differently. So I'm going to bring back my guides just like so so we can see that everything is touching nicely. And if you want, you can change tax to see how it's going to fill the frame. If you want to play with that course different, different words, we are going to fill this frame a bit a bit differently. So the next piece that we are going to create right here is Well, actually, are all these paragraphs, including this block quote And of course, we're going to add to the image and these thes tags down here. But let's actually do that in the next video 82. 29Let's Add the Paragraphs and Images: So now that we got to the title covered, let's create the main text for our blogged, and I'm going to quickly borrow this piece of text. This title right here because it's a frame textile is going to be just quicker for us to change some things about it. Instead of creating a new text frame, I'm going to make it just a bit bigger to somewhere here. And, of course, let's change the fund from Roberto come Dentist to Roboto. Ah, regular, Just like so And let's change the font size 16 and the line hide from 46 to something less less impressive. Let's try 26 maybe not six months, 26. Just like so. Of course, you can play around with that with the leading with the line height if you want. In fact, in many modern blocks, you can see that the line hide is actually quite quite big. Quite extensive, I must say. I guess it makes it may be a bit easier to read, especially in a smaller devices, So if you want to go with something bigger, you can do that. You can also maybe make. Of course, it depends on the front, but funds like Roboto or open sands are special, specifically designed to be displayed on on smaller screens or, you know, to be well visible on on the screens in when they're displayed, the digitally so you can maybe make it even smaller if you want to, and still play around with that with the bigger line height to make it look even more. Or let's say visible, if that's if that's what you want to go with. But I'm going to stay with the regular 16 and I'm going to go with a smaller line height, maybe 28. Let's leave it like that. So now let's move it down again by 50 big source, Just like so and noticed that something interesting is happening with the paragraphs in my in my text frame. I mean, if you want, you can just to maybe make the frame smaller and then bring it down to create a different paragraph, and then you would have to add the standard 50 pixels if you wanted to do 50 pixels. But there's an easier way to create paragraphs within text frames, so let's just bring this guy down. Maybe, like so And now let's go to not the character panel, but the paragraph panel right here and in here you get different spacing options so you can end end at the first line. You can indeed and will treat this space before the paragraph. But what we want is we want to create a space after that paragraph. So if I just go with zero right here, you can see that the paragraphs Well, actually, there is no distinction between paragraphs. But if I go with something crazy like 100 you can see that the gap is getting extremely, extremely big. And, of course, it's going to look look differently if it just changed the filler text. You can see that to the paragraphs still retain this 100 pixel space after paragraph, right? But of course, we don't want it to be that big. Let's go with 25 just like so and again. We can maybe change some some of the filler text to create a completely, completely different look, and we could play around with it all afternoon to make it look a differently. Think that I'm not going to be spending too much time on it I just wanted to show you how to use the paragraph options to create this kind of Ah, this kind of an effect. So now I guess we can. So we can add the image, This guy right here. So maybe just let me quickly Brenda's guy just a bit up to somewhere here and I'm going to grab the rectangle to, and I'm going to create a rectangle that is going to be something like that. In fact, I'm creating a perfect, perfect square. Of course, it can be a direct angle like this that is that it's simply your design choice. I just wanted to go with a square to make it look to make make it look a bit different, since it's safe for photography. Blood, let's get it. But let's get a bit creative. So let's go with maybe 200 by 200 and let's move this guy down by 25 pixels just like so. So not what we can do is we can just create some paragraph text to the right off our off our image so we can just borrow this text frame, bring it down and then move it to the right. And now I want to have the exactly the same gap as the gap between paragraphs. So I want it. I want to get to be 25 pixels, right? So what I'm going to do is I'm going to simply make this text frame smaller. So I'm going to make sure that to my transform origin point is set to the right. And I'm going to subtract 25 from this text frames with Just like so again, I can bring this guy down until it matches my my image, just like so again make it just a bit bigger. Maybe bread a bit up and again Add 25 like so. So now we can Maybe let's just quickly change the text, the filler text. So we got to get it. You know, we make it look like it's some really, Tex. If it's even if it's just some simple Lauren Epsom, just like so and maybe that's just a bit too much. So now we can simply just grab the rectangle and again insert an image. Maybe this pottery image this time let's make it smaller, just like so, And there we go. We got the image Well, we inserted to the image inside our block. Boast. Of course, if you want again, you can make the image bigger. You can make it spend across the whole well, our will text to the container. Eso It's actually maybe do that real quick, so I'm going to bring it down just like so again. Add 25 just like that and I'm going. Teoh, grab this pottery image and deleted. I don't going to make the rectangle span across our our world container. And maybe let's make it just a bit bigger to something like 400. Well, that may be just a bit too much. Let's make it 300 and let's leave it like that. So again, let's insert some image, maybe the city image. Let's make it bigger just like that. Now we can again bring this text down at 25 and now we can actually add the block. Quote this piece of text right here, and the blood quote piece of text is usually you know, something important that is within the text. If they're well, if the author wants to emphasize one thing, then he or she will usually use the block quote to make this piece of text stand out. So let's actually do that right now. Let me just zoom in. Maybe let's make it just a bit smaller. Just like so horrendous guide down again. Let's pad 25 and let's change some things about it. First of all, let's make it bold just like that. Let's make it. Let's line it to the center and make it a bit smaller. Let's maybe make it just a bit bigger to something like 24 just like that. Let's maybe add some line height to 32 Let's make this just a bit bigger and let's make the whole text frame smaller. I mean a narrower because usually these blood quotes are not that for spread out to the sites. So let's put it like that. Okay, so we got the block quote created, so the last pieces of next year would be to just Well, maybe let's just add one piece of text right here, and let's add that tags. Maybe I will just quickly change it from this filler text to some different filler tax, just like so and weaken simply, just quickly borrow this comments, text just like that. Let's go down and let's based in again. I'm going to move it till it's snaps with our that we've got with our guides, and I'm going to add 25. And let's change this text from from comments to some to some tax or that's been clipping. Just type in something like lifestyle photography on maybe travel, you know, things like that. Okay, so the text is created, and the last piece off the last piece of the puzzle would be to add these social media icons down here and these simple lines so the user can share our content. So let's actually do that in the next video. 83. 30Let's Add the Social Media Icons: So I'm going to start with the borrowing and the social media icons. Maybe from the sidebar. I'm just going to quickly get to them. I'm going to copy them. Let me just zoom in and I'm going to base them right here. And of course, I need to make sure that I am on the right layer. So let me just get on a single post layer and based in just like so And of course, I want them to be much, much bigger. So I will just let's see 32. 32 should be fine. And I will one group them because right now I want to not only change their color, but also add this elliptical background right here. What I'm gonna do first is I'm going to create in the lips like that. I'm going to put of course, the icon against this, this background and for this, the lips. I mean, I want this ellipse to be to indicate that whenever someone is hovering over this this ellipse, this link and it's well, it's actually indicating that its's been highlighted so we can just turn. It's a color just like so and now we can change the color off our icon. So since it's an embedded document, I'm going to edit it. We already know the drill, just like so, and the image gets well. It gets a different call. Let me just maybe make the Ellipse just a bit bigger. Let's let's make it. Let's let's double its make a double the size of the icon. So if the icon is third to let's make the Ellipse 64 just like that and now we can simply just move these guys to decide. Now we can just borrow the Ellipse. Let's just make sure that everything is nicely aligned. Borrow the Ellipse, put it beneath the icon. That's a line of these guys properly. And of course, this ellipse would be just simple green. And I want to this Facebook icon to be white. Now I will cologne it once more and let's align this instagram icon properly and let's added the document. As you can see it whenever we closed the embedded document, it keeps coming back to our 1st 1st document right here. So let me just go back to the one that we were working on and again Cologne. This guy, but it beneath her the I come select everything again, added the document. Okay. And we got the icons Creed. And of course, we can now just simply group all of these guys first the icons and their backgrounds like so saying with these guys. And now we can simply, sir, we can distribute them properly. So I'm going to go to the align and distribution option and distribute them. Of course, if you want to distribute them them by a specific number, we can do that. Of course, may be, let's say, 16 points. Don't forget to hit. Okay, Now we can just zoom back out and see what it looks like. And I think that it might look just a bit too big, don't you think? Just maybe too big. So we can simply just grab all of these guys right now. And instead of 64 let's go with something like maybe 48 maybe even smaller than that. Maybe like 36 I think 36 should be fine. Let's go. Let's not go smaller than that. We can now just group them, and now, since I want to align them in relation to my background container. I need Teoh. Unlock it. So first. Of course I need to find it. This is this guy right here. So I'm going to grab both these guys aligned them and now I can I know I can just look this background again. So the last thing to do here would be to put it where it needs to go. I mean, in terms off in terms of the alignment, just, um, it up. And now it's just put it, Let's just add Let's just had 25 to it. And now we can simply add some simple rectangles that are going to be really small. I want him to be maybe even as low as well, as small as one pixel. But I want them to be just a bit wider of, for instance, 38 or maybe 42. And I want I want them to be black or this off this very, very dark, great collar. And I'm going to put them put it right here. Now we can just simply cloned this guy right here, and I'm going to turn them both these elements into a group. So now I can just grab both that rectangles and on the social media icons and I can simply align them to the center in relation to each other. And of course, if you want to these rectangles to be closer to each other, you can just select one, like so printed a bit to the left, maybe just a bit more. But since these they still are a group, I can just select one. If I could just sell it one, like so and I can select the group, I mean the social media icons. And again, if I just bring them to the center, you can see that they are nicely aligned in relation to each other. But of course, I now have to group them and align them in relation to my rectangle, just like so. So now if I zoom back out and maybe turn off the panels, you can see what it looks like right now. Of course, the last thing to do here will be to just grab this thing container, add 50 pixels into its do its height. Let's had 15 just like so, and we basically got our main container created. So we added to the these pieces off text. We added that the block post titled These pieces Off Paragraphs the images, blood quote and the social media cycles. So the next thing to do ah would be to let me just go back would be to add these previous post and next boast navigation item because we want the with the user to reader to be able to quickly go to the previous post and next post to keep them on our site. So let's do that in the next video. 84. 31Let's Add the pre Next Post Navigation: in this video, we're going to create a the navigation system for the previous and next posts. So first thing that I will do is I'm gonna grab the rectangle tool and create a rectangle stretching across stretching from this bottom and left quarter off my container that I'm going to make its dimensions. Someone specific. I wanted to be, say, 300 pixels wide, and I wanted to be 75 pixels until I wanted to be fairly, fairly wide. Because remember that we have to have a image on an image on the left and some text on the right. So we we have to have a bit more room to work with. So I'm going to change its ah background. Well, it's it's filled, Dwight, and I'm going Teoh, bring it down by 25 pixels. So the next thing that I will do is I'm going to copy this guy and paste it in front, and I'm going to make sure that it's actually a square. So I wanted to have 25 pixels in with and 75 pixels in within 75 pixels in height. So right now we get this this image well this rectangle and a rectangle beneath it. So now we can grab both of them and simply and simply divide them. So we are left with just this square, this rectangle end this square. Of course, this square is going to be our well, image a placeholder. So again, I'm simply going toe quickly Place an image. Maybe this pier. I hope that you are that you're well that you're not award with these images. I really wanted to have a lot of them, but, you know, I guess it's inevitable that some of them simply repeat themselves. So let me just quickly make this image is smaller. So the Onley pieces of text that we are going to need are actually going to be the links for the previous post end of the block post title itself. So I'm going to grab the artistic textile click and drag and type in type in and previous post. And, of course, let's change some things about it. First of all, I don't want it to be italic, and I don't want it to be this big some maybe Let's go with 12 and let's just to make sure that these Elise the letters are written using all caps just like that. And maybe let's make it even a smaller to say 10 like so And then I'm going to bring this guy, but maybe not. Maybe I'll just use the frame textile. Let me just close this one and create a text frame. We're going to adjust it just a second. I'm going to insert some filler text, and this guy has to be roboto condensed, roboto condensed, bold. And let's maybe make it just a bit smaller, like 18. Let's line it to the left and let's change the line height to something like 24 maybe arm of even 20. And let's bring this guy down. Of course, if you want, you can have two lines off text right here, or we can even go for one line of text, just like so that you just quickly zoom out. I think that the just one line of text will actually look a bit better, so now let's just make sure that we got all these well. Distance between the edge is well, right, so let's quickly see what 2 25 he's going to look like if it's not going to be too much. I think the 25 is going to be just a bit too much. So let's go with 12 for the Y Axis movement and for the X Axis movement as well. Now let's grab this frame text and let's move it to the previous boast like that. And let's now move it down by, Let's say, 12. Just like so And let's see what it looks like. Of course, we could try with the different measurements, different ways of positioning these guys. Maybe let's actually bring this guy just a bit down, just like so much that might be again a bit too much. Eso Let's try, let's try actually minus 12. But let's add something like something like 20 and let's see now what it looks like. I think this should be fine. We could always suggest instead off trying to figure out the right. The management's the right distance between all these guys. Just go ahead and grab both these guys and just make sure that these pieces of text are exactly in the center off this off this well container right here because remember that maybe if we have this a bit. Well, the text is a bit longer or a bit bigger. If we just change of the filler text, some things might look different, but if we have both these guys exactly in the center, they should accommodate themselves to the container and still remain in the center off our over where will container. So right now we can just grow ramp This, uh, this will navigation. Well, box. Let's call it like that and we can move it to the right. Of course not clone it, but move it to the right. I think that this should be fine. So in order to make our job easier, we can just grab all these elements. And we can simply use the the toolbar to flip everything horizontally. But of course, as you can see, we also flipped that text in a way. Well, that is, you know, well, it makes the text unreadable. But before I take care of the text, I'm going to grab this image and I'm going to delete it. I'm gonna add a different one. So let's head maybe the cake image and again make it significantly smaller. Like so maybe a bit to the left just like that. And now if we just grab these guys again and flip them to the left, we are going to have the right text. The tax is going to be written properly, right? But there's still one thing that we need to do. I mean, if we just grabbed a friend textile and grabbed this piece of text, we can align it to the right and we can just grab this previous post text like so, and we can move it to the right and also aligning to the right, because right now, when we change this text, that will change it from previews to next. I noticed that the text is accommodating itself to its right, right anchor, so to speak. So we don't have to change anything right now. But of course we could maybe changed this filler text to make to link it to a different block. Most just like so. And there we go. We got to the navigation created, so it's simply we'll use the simple rectangles, added some photos, square photos and then added some text. And then we simply flipped the ball cologne and flipped this navigation box to the right and then just did some tricks to make it Luca properly. So the next piece of design that we're going to create is this related boasts, like a display off posts down here. So let's do that in the next video. 85. 32Let's Add the Related Posts Section: the related posts section off our page. So first, let me just maybe quickly borrow some of the off the assets that we already have, some going to grab this label and this first image, and then I'm going to and then I'm going to try to paste it onto the right layer, just like so and I'm going to train it up. Let me just zoom in. This should fight. And of course I'm going to bring it down by 50 pixels. And of course, we don't want it to say ads we wanted to save related boasts, some going to quickly change this next. And then I will just grab this rectangle and bring it to the right just like that, you already know and how to do how to do this. So maybe I will check first. If this distance between these guys is 50 or 25 should be 25 So we are good to go. So let's check with the original what it's supposed to look like. Well, as you can see this Ah, this image right here is more of a square, more of a rectangle, then it is a square, but of course, it is just my design preference. Just my design choice. If you want, it can be am It can be a well, a rectangle. So I am going to quickly remove this image just like that so I can just adjust this rectangle right here. So I'm going to go with 2 70 maybe by 200 just like that and I'm going to add an image. Let's see, maybe this Christmas image, why not? And let's make it smaller. It's made the image smaller. Remember that If you want to just the image from the center point. Just hold on the control key just like that. So now we can add to the text block post title and the read More taxi from Not mistaken? Yes, exactly. This guy right here. So I get I'm gonna grab the rectangle tool, find the right spot bottom left right here and created a rectangle to 70 by 100. This should be fine. Of course. I want to change the color toe white and again and grab the frame text stool. Create a frame that is going to be filled with some filler text aligned to the left Roboto condensed bold is totally fine. Let's go with two lines of text and let's move this guy to the left and put it right here. And now Let's check actually what it would do, what it would look like with the if it had 25 pixels, gaps all around it. So first, I'm going to make its going to establish the transfer origin transformation origin point in the center, and I'm going to make it. I'm going to make it smaller by by 50 pixels, so minus 15 just like so, and I'm going to push it down by 25 as well. There we go. So now we can just grab the artistic textile and type in read more just like that. So let's change it from regular too bold. And let's make it smaller. Let's try 14 and let's go with this green color like so, and let's see what it would look like if we could move it by 25 pixels from bottom and from the right school that's actually started transformation from the bottom. So let's move it to the left by 25 and let's move it up by 25 just like so it might be just a bit too big and could also maybe make it just a bit smaller. That C 10 can actually might be. Might be quite all right. But let's move this guy down then and let's move it up. 25 might be just a bit too much. I think it. I think it is way too much. So let's move it it down. Let's subtract two, Let's say 10. Well, it's adds, done like so That should be fine. Let's leave it. Let's leave it like that. Now I'm going to grab, of course, this whole fragment right here. And maybe let's just quickly turn the grid on like so. So now we can move this guy to the right once and then just press control j to move it to the right or to clone it to the right once more. Now we can just change this image just like that. Maybe the let's see, maybe the cat image. Let's make it smaller. Let's change this filler text like so, And let's change this'll last image from Christmas to something else, Of course. Been certain inside selection. Yeah, let's go with the sandwich like so And there we go. Of course, if you want, you can maybe make this container bit bigger. So actually, this size this gap right here is well is also 25. So we get the same gap here and the same gap right here. So maybe let's actually do that. And let's do that in one batch. So I'm going to bring all these guys up, and then just and then just ad right here. 52 their height, 25 not 50. That would be a bit too much. 25. Just like so. So this is how we can create this kind of a you relate boasted section. Let me just turn the grid off. Turn on the panels off. So there we go. This is what it looks like right now. So we got the featured image. We got to the text the block post. We got this previous next post navigation. We got the related posts. And the last thing that we still need to do is this comments section right here. So let's actually check how to create this section in the next video 86. 33Let's Start Creating the Comments Section: So let's start creating of the common section by making this artwork just a bit bigger, because I think that soon we are going to run out of space right here. So I'm going to go to the to the art abort, grabbed the art of boards to and bring this guy down quite significantly to somewhere here . Then we can just grab our food or let me just quickly find it somewhere Here. This is this guy right here and we can just We can just let me just grab it properly and weaken. Bring it down to hear, Just like so. So now let's get back to the right player and let's borrow this label. This related boasts labels. I'm going to copied bases in front, bring it down and add again to standard 50 pixels like so next. What I'm gonna do is I'm going to grab the rectangle tool and create a container for our comments. But I'm going to tournament back the visibility off the grid on and just create a container that is going to be quite big, quite told, and I'm going to move it down by 25 like so. So if you take a look at the original. The first thing that we need to do is, of course, change the label right here and then add on the image the avatar and then some text. The date The name of the person who commented the reply button right here and then weaken just will repeat the process with this, uh, well, with this reply and down here. So first I'm going to change that related boasts label to comments. Then Brenda's guide to the left. This will be fine. So now let's create their first avatar. This is this a beggar. Will this rectangle this square and this person right here? So, of course, we will start with grabbing the Ellipse store just like so, and let's turn it pink. So, in order to create the body off our avatar, let's grab that rounded rectangle tool. This is this guy right here. And let's quickly create a rounded rectangle that is going to look something like that. I'm going toe off. Click the single radius option right here, and I'm going to enter zero for the bottom left and bottom ride. Right. Values right here. Zero for this guy to so, as you can see, we just quickly created transformed this around it rectangle from like 1/2 rounded rectangle. And all we have to do right now is we Can we have to just play around a bit, too, with the with the other values, to make it look just the way we want. So maybe let's bring it just a bit up. And of course, we can still make this radius of bigger if we want to. Let's try 35. That's McNish, Allders, even 35 lakes. So I think this looks I think this looks all right. Of course we can always We can always just group these guys make them smaller, make them bigger. We can do with these guys, whatever whatever you want and let me just quickly take a look at the original. It's put against this dark square. Some gonna go wrap the dark square, and maybe I will just going use the inserted behind selection option to create a square like so and make a black and make it a bit smaller, something like so And let's know, a line. All these elements together just like that. So now let's just quickly maybe duplicate this guy so we don't have to do it again in just a second. And let's Ah, let's give these guys proper proper colors. Let's make them dark. And let's make this background pink like salsa. And now we have both the avatars created. So in the next video, we are going to actually start creating these pieces off text and these pieces of text. Aziz. Well, so our comments who look like they are really comes, so stay tuned. 87. 34Let's Create the Texts for the Comments: If you take a look at to the original, you can notice that the padding inside here this common section is much, much bigger than the margins that we usually create. I think it's, um, more than 50 pixels, and this is done in order to, you know, not to make everything symmetrical. But to add some dynamics into the design, you don't have to well, in the common section like this one, if you are creating it, you know, if it's a handmade custom, made a common section, you can get a little bit more crazy than wind with the all the other elements. So in this case, let's let's take a look at what our comments will look like if they have more room around them. So the first thing that I will do that just zoom back out is I'm going to use this avatar as my kind of like a anchor for other pieces of design that I'm going to create in just a second. But I think that I will make it just a bit smaller. Let's let's check 48 of course, let's make sure that that we link everything that this is a group and that we link its size just like that. So let's go with 48. I think 48 will be fine and I'm going to put it here in the top top left corner, just like so. And now I am going to move it to the right by 100 leads. Check 100 I'm gonna move it down by 100 as well. Like so. So now I will simply create well taxed will text off the comment. So I'm going to grab the artistic textile and create a date. It's going to be rib Otto. I think we usually go with metallic. Let's go with 14. Let's enter the date and maybe let's make it even smaller. 10 should be fine. You know what? Maybe I will lock this this background right here, so it we don't mess it up accidentally. So now we can move this October, Let's say by done, and maybe just a bit down, like so let's just take a quick look at the original, what it looks like in the original version. It's something like that. I guess we can. We can leave it like so we can just know, print this guy down and let's bring it down by 10. And let's change this a date to a name and this guy will be green in all caps and let's make it just a bit bigger. And now let's add the next frame like that, and what we can do is we can Britain this text from all the way to the right, as we usually do, and we can make it smaller. So let's tracked 100 like that, and let's fill it with some with some filler text that's that is going to be Roboto regular 16. Of course, as you can see the sometimes you just have to click once more to actually select the tax because fit into designers sometimes just doesn't want to cooperate when it comes to change in the text to you well, apparently have to have the specific text selected. You can just manipulate the text frame, which is a bit of a shame, So it's maybe just a bit up. Let me just take a quick, quick look and let's let's move this group down somewhere here because we still need to type in the words rippled word reply. Let's move it down by Let's see 15 and lets off click this old Caps option. Let's make it but smaller to 10. And let's type in reply. And I think that we might want to move it to the right because I guess it would be easier for people to click if it was well put on the right. So it's just a slight modification. So let's assume that someone actually has replied and let's put this bad boy down. Let's see 15 and we can just grab this piece of text, this piece of text, this piece of text and this piece of text clone it down and move it to the right. I believe it was 10 and don't. And there we go. Maybe let's just change this person's name, too, John. And of course, let's make this Texas frame smaller, even a smaller like so. And let's bring this replied text to the left, just like so. So the next thing that we would do is we would just create that form for the comments, this leave reply section down here, So let's do that in the next video 88. 35Let's Create the Post Comment Forms: so before we create the form for the Commons. So let's just quickly fix one problem that we have right here. I just didn't change the size off this avatar. This guy is smaller is it's 48 pixels with the wide, but this guy is not so It's quickly fix this one, So it's type in 48. And of course, we have to bring these guys to the right and make this whole frame smaller by 10 pixels. Well, let's go with minus 10. Just like so. So now I'm just going to create a the comments that the form for the Commons. But let me just quickly make this thing this container just a bit just a bit bigger. So I'm going to start with the adding of the text that is going to say, Leave a reply. Some gonna grab the artistic text tool, start somewhere here and type in the leave a reply, Or maybe leave a comment and let's make it pink. Let's make it. Let's make it bold, not italic, And let's make it smaller. Maybe not that small. This should be fine. Let's bring it up and of course we could. Them we could maybe tried to move this guy to the right to match it with the reply text right here and now we could we could move it down by 50 like so moved this guy to the left and move it to the right by 50 just like some. So now if we take a look at the original, we can see that we got this comment box right here. This is where people would type in the actual comment. We got the name for the people, for the person commenting his or her email and, of course, the bottom down here. We could actually maybe indicate two states when people are hovering over the button. So it's a regular state. It's idle state, and of course, it's Ah, hover states. So we could in the first create a green button and then create this pink bottom to indicate and what this bottom, what its background should look like when people are hovering hovering over it. But let's start with the arena of the boxes, the elements off our form. So with the rectangle tool, I'm going to create a rectangle. I'm going to stretch it across this container And then I'm going to simply subtract 50 just like that, and I'm going to move it down by. Let's see 50. I think this would be fine and I'm going to make it white. Or maybe Grace. We can actually see it. And then I'm going to grab the artistic tax tool. Just zoom in and I'm going to type in a comment. And I wanted to be about a regular, maybe 10. Let's given this great car, I'm going to bring it down and then I'm going to bring it up by, say, 10 pixels like that. We can simply let me just create this guy, your bed down. And now we can just grab both these elements, move them down and then bring them down. Let's let's check 25. Being 25 should be all right. And let's change the comment to I believe it was name and let's pray this guy up. Let's make it 50. Bixel is high and let's spread over to the left. Now let's bring this guy over to the right. Of course, I'm holding down the control key to clone it. And let's change the name to email, Of course, We need some room between these thes two rectangles, so I'm going to quickly create a rectangle that is going to be 25 pixels wide. Let's change its color. And we couldn't just quickly united these elements. Brenda's guy up. Let's put it in front. Let's make sure that they are aligned properly to dissenter, and we can just now, using the the toolbar. We can just subtract it like So unless just bring this guy to the right. This will be fine. So the only thing to adhere is, as I said, this post comment post common toe Well, button. So let's go back. And as far as I remember, this was 50 pixels. Yes, it was 50 pixels so quickly just grabbed the rectangle tool and creating rectangle that is going to be 50 pixels high, just like so. And I'm going to move it down by 25. So I want this to be my primary buttons, the the one that people see when they are about to post a comment, some going to turn it green just like so. And I'm gonna grab the artistic textile again and type in post comment. I'm going to change it from regular too bold, and I'm gonna make it smaller, maybe even smaller, and I'm gonna make it white. Bread it up. Let's bring it down to 18 and I'm going to align them properly. And now I'll just grab both of these elements and bring them down and then bring them down again by 25. So now I can just turn this guy into a red button. So I can just indicate to that developer that when someone is hovering over this this button I wanted to turn to turn red. And if you don't want, if you don't need this big of a gap, you can just simply make it smaller. So maybe just let's just instead of 25 let's just go with 10 just like so and let's zoom out. So now we can bring this guy up just like so and add our standard 50 pixels to its height like so. So really, the last thing to do would be to just bring the footer back up, some going to select it, brand it up and then add, Let's see, 25 or 15 maybe 50. We won't need this art board to be that big anymore like that. And of course, let's turn off Big Red. So there we go. We created a single block posts page, so we added to the featured a much instead of the slider. And then we added that well, the main content for our block bows, which was the text. We added some images as well. Then we added to their social media icons the previous and next post navigation. They're related post section and then on the Commons section. And of course, we kept some parts off our main image. Well, where our main design, which was the header, the Cyber and the Footer. So I hope you'll like this design and that you are going to share your own designs. Maybe inspired by this design with our community and definitely if them well, I encourage you to create your own designs when you come up with them not necessarily inspired by this design. But maybe you are using nothing to designer to design a weapon will website for a client. That would be great if you shared it with us, so l well, until next time, have a nice design