Web Design in Affinity Designer for Beginners and Beyond | Dawid Tuminski | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Web Design in Affinity Designer for Beginners and Beyond

teacher avatar Dawid Tuminski

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

88 Lessons (6h 45m)
    • 1. Web Design in Affinity Designer Promo Video

      2:08
    • 2. 1Introduction to the course

      1:49
    • 3. 2.1What is Affinity Designer and how to set it up for web design

      3:11
    • 4. 2.2Affinity Designer’s web design abilities

      8:43
    • 5. 3.1Top 10 Principles of Good Web Design

      3:53
    • 6. 3.2Top 10 Principles of Good Web Design - continued

      4:34
    • 7. 4.1The most important factor to consider before choosing colors

      4:06
    • 8. 4.2How to mix colors for the best possible User Experience

      4:36
    • 9. 4.3How to choose the “psychologically right” colors

      4:37
    • 10. 4.4-7 easy tools for choosing errorproof color schemes

      6:32
    • 11. 5.1A super short history of web typography

      2:41
    • 12. 5.2How to mix colors for the best possible User Experience

      5:18
    • 13. 5.3How to choose the right fonts for headings

      3:37
    • 14. 5.4How to mix fonts for headings and body text

      4:18
    • 15. 5.5The perfect font for User Interface design

      2:35
    • 16. 6.1Header, branding, navigation and Hero sections

      3:52
    • 17. 6.2The center and bottom sections of your website design

      4:13
    • 18. 6.3What are grids and how to use them

      3:08
    • 19. 6.4How to design your very own grid

      4:09
    • 20. 7.1-7 web design trends that rule the web design world

      8:58
    • 21. 7.2Where to find the RIGHT inspiration for your next design

      2:28
    • 22. 8.1Every website design needs scaffolding

      3:13
    • 23. 8.2Building your own wireframe in Designer

      4:41
    • 24. 8.3Let’s continue building the library

      10:08
    • 25. 8.4How to use the assets to create a wireframe

      11:19
    • 26. 8.5Wireframing online

      4:28
    • 27. 8.6Let’s talk about images and icons

      5:53
    • 28. 8.7How to create font styles in Affinity Designer

      4:00
    • 29. 9.1The Design Part Overview

      6:01
    • 30. 9.2Let's Create the Color Swatches

      4:05
    • 31. 9.3Let's Create the Text Styles

      2:34
    • 32. 9.4Let's Take a Look at the Images and Icons

      2:34
    • 33. 9.5Let's Create the Logo First

      3:25
    • 34. 9.6Let's Build the Menu Links

      4:04
    • 35. 9.7Let's Add the Social Media Icons

      8:05
    • 36. 10.1Let's start by adding the main image

      6:41
    • 37. 10.1Let's start by adding the main image

      3:02
    • 38. 10.2How to Quickly Resize the Image

      3:02
    • 39. 10.3Let's Make the Image a Bit Darker

      3:14
    • 40. 10.4Now Let's Add the Main Text

      5:04
    • 41. 10.5Let's Add the Slider Navigation

      3:47
    • 42. 11.1Let's Start Creating the First Featured Secion

      3:35
    • 43. 11.2Let's Add the Featured Items

      10:07
    • 44. 11.3Let's Add the Second Featured Item Section

      5:40
    • 45. 12.1Let's Start Creatig the Blog Section

      8:13
    • 46. 12.2Let's Replace the Images

      3:05
    • 47. 13.1Let's Start Building the Image Gallery

      7:13
    • 48. 13.2Let's Create the First Column of the Footer

      4:13
    • 49. 13.3Let's Finish the Design and the Whole Footer

      3:56
    • 50. 14.1Delivering the design to the client

      3:39
    • 51. 14.2Delivering the file to the developer

      2:30
    • 52. 14.3How To Use the Export Persona to Export the Assets in Bulk

      2:29
    • 53. Thanks for watching the course

      0:52
    • 54. 1Let's Discover the Wireframe for the Design

      6:08
    • 55. 2Let's Discover the Blog Design

      5:30
    • 56. 3Let's Take a Look at our Assets

      6:06
    • 57. 4How To Create the Logo and Nav

      7:38
    • 58. 5Let's Add the Social Media Icons

      6:18
    • 59. 6Let's Add the First Images

      7:22
    • 60. 7Let's Add the Shading to the Images

      7:57
    • 61. 8Let's Add the Navifation Buttons

      5:24
    • 62. 9Let's Create a Container for the Blog Post

      5:16
    • 63. 10Let's Add the First Pieces of Text

      4:29
    • 64. 11Let's Add the Remining Pieces of Text

      6:07
    • 65. 12Let's Start Creating the Blog Post Grid

      5:57
    • 66. 13Let's Create the First Blog Post Card

      5:19
    • 67. 14Let's Add the Remaining Cards

      6:35
    • 68. 15Let's Add the Older Posts Link

      4:17
    • 69. 16Let's Explore the Sidebar Project

      2:37
    • 70. 17Let's Create the Search Box

      3:54
    • 71. 18let's Create the About Me Section

      6:37
    • 72. 19Let's Create the Text Section of the Sidebar

      4:48
    • 73. 20Let's Create the First Container for the Most Popular Posts

      4:06
    • 74. 21Let's Create the List of the Most Popular blog Posts

      6:29
    • 75. 22Let's Create the Ads Section

      2:50
    • 76. 23Let's tart Creating the Footer

      4:07
    • 77. 24Let's Explore Different Footer Concepts

      2:35
    • 78. 25let's Finish the Project and explore the next one

      7:08
    • 79. 26Let's Explore the Single Post Design

      3:13
    • 80. 27Let's Create the Featured Image and the Post Container

      5:47
    • 81. 28Let's Add the Blog Post Title

      6:21
    • 82. 29Let's Add the Paragraphs and Images

      10:11
    • 83. 30Let's Add the Social Media Icons

      7:18
    • 84. 31Let's Add the pre Next Post Navigation

      8:26
    • 85. 32Let's Add the Related Posts Section

      7:21
    • 86. 33Let's Start Creating the Comments Section

      4:46
    • 87. 34Let's Create the Texts for the Comments

      5:55
    • 88. 35Let's Create the Post Comment Forms

      9:02
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

1,088

Students

2

Projects

About This Class

This course is all about using Affinity Designer for web design. If you are not too familiar with the software, first you will quickly learn what it’s all about and how to set it up for web design.

Before we start designing anything in Affinity Designer, we’ll 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 web design typography, which is extremely important not just for good web design, but for good design in general. You will learn all about body text, headings and how to pair them for great user experience.

Then we’ll take a look at a typical website’s structure, design-wise of course. We’ll talk about logos, navigations, sidebars and all the other website’s building blocks.

After that we’ll talk about what’s in and what’s not in in the web design world right now. We’ll also search for some web design inspiration around the web.

With all that knowledge and skills, we’ll move on to the design part of the course. And please note that you have to have at least some basic skills to follow along effortlessly

This course is not about learning all there is to know about Designer's skills. If you need that, take  look at my Affinity Designer for Beginners course.

By the end of this course you should be able to independently design websites using Affinity Designer.

Meet Your Teacher

Designer, coder and educational entrepreneur.
Adobe Certified Expert in Illustrator whose courses were listed in the Udemy's TOP 10 best reviewed courses.

Creating online courses on design tools like Adobe Illustrator and Adobe Photoshop, logo design, web design, graphic design freelancing, online teaching and digital marketing .

Teaching +30k students in 160 countries worldwide.

Loves the freedom of creating courses and prides in his teaching method, which is straight to the point and with a smile.

His motto: Boring instructors are worse than boring topics!

His students value his courses for their conciseness, professionalism and actionable tips and techniques they can apply in their day-to-day design tasks and online education businesses.

See full profile

Class Ratings

Expectations Met?
    Exceeded!
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

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. 1Introduction 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. 2.1What 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. 2.2Affinity 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. 3.1Top 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. 3.2Top 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. 4.1The 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. 4.2How 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. 4.3How to choose the “psychologically right” 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. 4.4-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. 5.1A 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. 5.2How 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. 5.3How 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. 5.4How 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. 5.5The 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. 6.1Header, 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. 6.2The 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. 6.3What 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. 6.4How 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.1-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. 7.2Where 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. 8.1Every 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. 8.2Building 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. 8.3Let’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. 8.4How 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. 8.5Wireframing 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. 8.6Let’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. 8.7How 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. 9.1The 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. 9.2Let'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. 9.3Let'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. 9.4Let'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. 9.5Let'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. 9.6Let'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. 9.7Let'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. 10.1Let'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. 10.1Let'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. 10.2How 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. 10.3Let'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. 10.4Now 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. 10.5Let'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. 11.1Let'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. 11.2Let'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. 11.3Let'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. 12.1Let'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. 12.2Let'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. 13.1Let'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. 13.2Let'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. 13.3Let'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. 14.1Delivering 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. 14.2Delivering 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. 14.3How 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 sin