Creative UX/UI Design Mastery With Figma

1. Class Intro: Hello, guys. My name is Ran siblHh, I'm XI designer, concept artist, creative coder, and graphic designer, and a lot of other things. I have 20 years of experience working in the field with many clients. I created this class, the creative UHI Design Master with FIGMA to help you transform your design ideas into stand user friendly digital experiences. In this comprehensive course, we will go beyond the basics guide you through the entire design process from initial concept to a polgPtotype. You will master Figma, the industry leading tool, as we cover creative briefs, in depth research, competitor analysis, mood board, content strategy and navigation maps. You will then dive into practical skills like wire framing, layout design, working with typographics and color. Content blocking and even ready motion design and interaction. Learn how to effectively receive a feedback and confidently present in your work and create robust style guide for a professional consistency. To further enhance your learning, I will provide you with detailed HTML files equipped for this course to help you get the most information you can have, along with the quizzes to test your knowledge every step of the way. Get ready to unlock your creative potential and build design that truly stand out. 2. What Inluences Me : A For designer, recognizing the importance of influence extends beyond their own creations to encompass the vast landscape of existing designs. Observing and analyzing the work of others, it's not about replication, but about discerning the underlying influential principle that make those designs effective or effective. By deconstructing successful interface, a designer can identify the subtle cues. Intuitive pattern and persuasive techniques that guide user behavior, allowing them to internalize this insight and apply them to their own projects. Critic and less effective designers reveal pitfalls in areas where influence has been misapplied or overlooked. Discontinuous learning from the collective design consciousness homes the designer ability to wield influence intentionally and ethically, ultimately leading to more impactful and user centered solution. Let's take a look about some of my influencer. Colin Moy portfolio is a great example to watch. Is special due to its highly interactive and engaging Ux UI. A standout feature is the creative use of eyes that spells out his name in the hero section. These eyes are not just a visual surprise but also serve a functional purpose. Click in them, activate in light and dark mode, Tuggle, and trigger animation where the eyes follow the visitor. Subtly inviting further exploration of the site. This clever strategy combined with a consistent play pool style, where O is in navigation like about portfolio and contact are clickable to reveal more information, contribute to unique and memorable user experience that keep visitors engaged and encourage them to delve deeper into his work. Another site by Justin Solly the design stand out for its exceptional interactivity, dynamic visual blend of aesthetic, which have earned its accolades like site of the month and award site of the day. The site feature captivating interactive animation, an interactive header, and WebGL, mouse interaction that create highly engaging and immersive browse experience. The dynamic interplay of element keeps user actively involved. It utilize the Brutal Style menu with the playfull twist when hovered over. This menu reveal project summaries, accompanied by distinctive Windows lag screen effect, adding a memorable and interactive element to navigation. The design incorporates a continuous evolution of the color typography and animation, leading to an experience, liking to play in a game. This is further enhanced by unique page transition and horizontal case studies offering a fresh approach to content display. Another site also by Carlos Carr the site is built with a focus on dynamic content and design system, showcasing an advanced understanding of how digital experiences can adapt and evolve. This suggests a cut and edge approach to web development and design. Breaking away from traditional portfolio structures, the website acts as an interactive archive where each piece of work is treated as a separate entity rather than being grouped thematically. Navigation is uniquely handled through search bar and specific tags, which fundamentally redefine how user interact with portfolio by flipping the usual navigation on its head. The use of platform like Webflow and spline indicates strong intersas and sophisticated graphic and motion design. This combination likely result in a visual rich and highly engaging experience for visitors. Another interesting site by Milly agency, the website design is considered special due to its highly interactive and unique user experience, which has garnered recognitions such as Awards Mobile Excellence and hornble Mansion. And feature as one of the web flows ten standard portfolios example. The site offers a distinctive and engaging experience, highlighted by an X ray mode and extensive custom code. This element contribute to a dynamic and memorable interaction for visitors. It accords from platforms like words underscore the high caliber of its design and development, signaling innovative and impactful UXI. The design incorporate interesting layouts and subtle custom details throughout this indicate a meticulous and creative approach that goes beyond conventional website structure. This is one on my favorite site, which called flakes. It's highly acclaimed and considered special due to its innovative blend of minimalism and maximalism, exceptional interactivity, and sophisticated technical execution. It has received multiple awards and feature from prestigious design platform, including awards. The site masterfully balance a minimalist foundation with the maximalist elements. It utilize large animating variable font, a vibrant yet unconventional color palette and then to recreate detail that quick rich visual experience without feeling cluttered. It features extensive scroll based animation, complex three D element, including a challenging three D logo and smooth transition powered by modern technologies like nm dot Gs, Vlt and web DO. Subt interactions such as cursor transforming into a light source on a desktop further enhance user engagement. Breaking away from a conventional multi page menus, play.com offers a seamless single page journey. Projects are showcased through Concess screencast, allowing visitors to quickly grasp the work without being overwhelmed by excessive content, focusing on impact and simplicity. One of my favorite two is a strange pixel. The site heavily emphasized the use of animation to create visually stunning and innovative design. This focus on motion enhance engagement and add the dynamic layers to user experience. Trench pixels employ creative use of color often featuring high contrast schemi with vibrant accents, such as a pop of yellow against white and black base. This is combined with a strategic use of large bold typography to make strong statement and enhance visual identity. The design often strikes a balance between minimalism and impact. It lies in clean lines, fractured layouts, and a limited color palette to achieve maximum effect. French pixels focus on cracting digital experience that go beyond meri functionality, aven to provoke throw and emotion in every project. Their portofoo showcase diverse work including web ap and ecommerce design. The cursor design is one of my best element of this website. It makes the interactivity very beautiful and very engaging. This element collectively contribute to strange pixels repetition for creating a cut edge and memorable web design. Our last in the list is Dennis Snellenberg. Dennis has received multiple accolades from awards, including Rona Bal mentioned and site of the Day. This recognition underscores the high quality, innovation, and impact of this website design and development. His designs are notable for their subtle yet sophisticated necro animation, smooth transitions and engaging interactive element. These details contribute significantly to polish and immersive user experience making the site feel dynamic and responsive. As a freelance designer and developer, Dennis Kraft scalable website from Scratch that fits seemly with the design. This holistic approach ensure that functionality and aesthetics are perfectly integrated, resulting in high effective and great project. His proficiency in modern web development tools like Webflow, HRB CMS, and animation library such as Framer motion and GSAp allows him to quit visually rich and highly interactive experience that push the boundaries of web design. In essence, Dennis' website is special because it embodies harmonized fusion of aesthetic, brilliant, technical skill, and a deep understanding of user and production all validate by industry recognition. So as you so, guys, this is sum of my influencer. You should always find the people that influence you and also try to update yourself with everything new in the field. This is the way to assure you are on a page as a designer. 3. Learn About Creative Brief: A the design brief is an important document for our process. Since with it, we will determine what the objective of the project are. It's important to collect as much information by the client since this information, it will help us define the objective of our product design opportunity, and what are the riskies that we can have in our design. For our project, we're going to create a TikoCden brand. We're going to read very well the brief we get from the client and understand all the necessary thing he want for his design. As you saw all the information here, like the brand essence, the objectives create visual strike immersive website that embdedTkubnds identity. As you see also the target audience, the design direction, the color palette, the typography, all the elements that we need for our website design. This is another kind of creative brief I created myself. This is your own creative brief you can send to your client to represent yourself or your work. It's not necessary to do this, but it's something they should consider. As you saw, we have antleduction, a question example like why hire us? The website design process, what we do example, like understanding the brand, the concept, the review, and the revise, what our customers have to say if you have already customers feedback from your past work, the pricing of each of your work. This is another creative brief I created myself also with the HTML file. You can see it, it's more detail. It has all the elements that necessary for a creative brief to understand it. The website goes, the target audience, the brand identity, the content requirement, technical specification, and timeline and deliverable. You see all the question necessary can be asked. If you got a brief from your client and doesn't have some question you need to be answered, you can create another brief from you and you send it to the client all the question and the information you need more to collect from him. What is the primary purpose of your clothing brand website? What are the top three competitor in your market space? What makes your clothing brand unique from competitor? Who is your primary target audience, age, gender, interest, and income level? This is where he's going to fill in. As you saw, I just created HTML file, but this should be a PDF file for the client to fill it. Content requirement here, the integration need is. You only send the question that you didn't receive in the creative brief from your client. Don't ask the same answers he already delivered to you. After reading the brief, you should always align with the client objective. Then you keep on communication with the client by sending concepts and taking his own feedback. In short, the brief is the way to ask the right question. We must first understand who we are as designers and who is our client. We are designer for the user or we are designing for ourselves. This is an important question to ask yourself in each project. Once we have understood who we are as the designers, for this project, we must know that the client is looking for us to meet goals and objectives. These goals can be to sell a product, grow in your business, hire a new staff, make yourself known or explain your services. And they can even be all of these in the same informative website. So our objective as a designer is to achieve these goals, and for that, we must align ourselves to the brand, to their values, and their way of communicating. Let's go back to the brief. The brief is a document which will obtain customers information. This information will be used to understand the project, the brand for which we are working, the sector in which the brand is located, and the products related to the project. These are some of the question we can ask in the brief. What do you hope to achieve with the website? What is the story behind the brand? What is your differential? What is your position in the market? Are there or not limitation in terms of budget and time? What is your target audience? We saw that already. What are your servers and products? The answer to our question that can come in a different way. We can obtain them through a meeting, a video call, a written document, or even in a brand manual itself. There may be answers to our questions. We must know that not all answers, they will come first hand. That's why it's important to ask the right question. This will give us a relevant information for our product. Some recommendation to keep in mind, by the time we do a brief phase and we want to get the best response from customers, the question we ask can offer us different creative possibilities. When we ask what we really expect is to broaden the field of action of our project. We don't want to limit it. Don't be afraid to ask all the question we give us valuable information to build our product. These are some questions that you can also generate to receive more information from your client. What inspired them? If the brand were a person, how would it behave? Do they have a style that identifies them? This is our first phase to start our product. It's important to read the creative brief very well, take the key elements, and all the things that makes you align with the objective of your client. 4. Learn Research And Competition : I the process of investigation and discovery is essential to create a successful project, since it gives us a lot of information about the sector in which we are going to develop the project. In addition to showing us creative opportunities, the risk is that the project may have among other things. I feel this is one of the most important process I do as a designer. Let's see a little more in detail. In this step, we carry out our own investigation process to find relevant information, opportunity and riskies that the project may have. It's important to align ourselves with the client in this process to make sure we understand the project in the same way, the objective to be met for us as a design, create an informative website of a TCO brand where people can explore fine collection of clothes in a friendly and interesting way. Design opportunity. We'll explore different effect on images to create a more interactive experience. We want to introduce interesting way to filter the project also that are different from the traditional category. Technology recommendation, we must have a content manager, image optimization, a website optimized for mobile devices, animation and transitions that are designed for mobile devices. Brand considerations. Much of the graphic proposal of the website will be based in the image that has created the portfolio. On the other hand, we have challenges to communicate the aspects of the brand. Observation about user. They are young people with access to high speed Internet to navigate the site. Much of the traffic that will reach the page, it will be through Instagram. That's why more than 50% of the users will see the mobile version of the website. The people who are going to visit the site are people with design sensitivity, and that's why we will take great care of the details of the page. Project also may have risks to consider. In this case, the navigations and the basic functionality of the page, they can be difficult to use. High visual load to the number of images, lack of information about the project site once the website is already live. What are the function of the navigation map? Define the final section that will make up the website. Understand navigation flows between the section that make up the site. Understand the type of content that each section can contain. At the beginning, we need to take a look about some of other competitors that they have great website design. As you can see here, like this website from Gucci, it's very loaded with images, very good qualities. The experience is so simple and minimalist. One also of the important website to consider is Zara. The site also is so simple. It's easy to navigate and it's easy to understand. You see the structure of the site where you can find all the information necessary. An important step I always do also is take a look about the reviews of each site that I use. Here you can learn about the pro and cons of this website. I read well the negative reviews from the people to understand what mistakes I should not make in my website design. In my process, this is very important to take a look at and study it very well. I read all the bad comment and the good comment and understand what the weakness of that site. As you see here, in a medium, we can read a case study of Zara website, how design aesthetic, how can influence purchase intent. As you can see here, I have a PDF very detailed about the website. As you can see the size thesise on style via site speed risk is conversion. So you should always find a balance between these both the impact of sacrifice and usability and accessibility for design. This is very important, as we said before, that the site have a great design, but also very easy to navigate and very easy to read. Navigational hurdles disrupt the standard ecommerce flow effective search functionality erodes users confidence. Missing customers reviews, diminish trust and disrupt shopping journey. So this is something you can consider. If your site is ecommerce, it will be very effective to put a section for the reviews of your client. Here I have an HTML file I created for you to understand more supporting element and enhancing of your website. Here you can understand all the things that always to consider to make a great website. The color schemi, typography, the imagery and graphics, the typography guidelines, accessibility, color contrast example. The security and maintain sections, the section is not for you as a designer, but it's for the developer. You can read all this information here to understand more about the website design and how it should be effective. We dwell each of these element and understand it very well. Every step you take before you start in your design, give you a roadmap and it make your work very easier. Finally, this time of the tools I recommend to use for the navigation map, Mero Whimsico and Tig Jem. It's important to understand that navigation map is the starting point to organize our project. We're going to see more in the next lesson. And 5. Gathering References For Moodboard: In this liston, we'll talk about search for inspiration and references for our project. This is a very important step before you start that will allow us to look different ideas to make our project more interesting. Inspiration can come from anywhere, but with a clear process, it will be much easier to find interesting idea that we can use later in our product. In this design process, we make sure to create the mood board where we gather all references and inspiration that we find for more other projects on the web, in the books or even in art exhibition. This way, we make sure we create something that communicate what we want and that stand out from other private. To start the search of references, we will like to start looking for projects or companies who are in the same category as our client. For example, if our client is a company that produce glasses, we can search for similar company in the region. Companies that are direct competitor of our clients or companies in other places that fall into the same category. In this way, we make sure we know what interesting ideas are in the category, how other companies communicate and what we should avoid. To make sure we create a project that stand out from the rest. After this, we can expand our search to categories similar to our project. For example, Tiko brand is going to be a website. The use of images will be very relevant. Therefore, we'll be able to look for a project where they use images. For example, in architecture, where every day we are looking for a project that interests us. Then maybe looking at a project from other category or industries. Let's find ideas. As you can see here, this website called Word. You can find light of examples you can go through and find lot of ideas. This is one of the site that use images for their own creation. There are many of them you can check everywhere. This is not in our category, but I found it is important to look at because I want to know some new creative ID. Let's take a look about one of the examples here. As you saw, this website use nice images layout. It can be an idea for our website. So I'm going to check more about how it works and how it navigate. As you saw the website is very beautiful, check these websites to get some ideas about interactivity example. Here, the cursor interact is very beautiful by showing many images while you are dragging. Another style also to consider is the style of a black and white. It has a lot of a graphic, but it come out mostly about the geometric shapes and the typography. The interactivity is something special I never saw before. As we click here, you see the square element appear with the cursor. The typographic style and the lines make it so special and very different from other websites. This is something we can consider for our website. We can create it with a different way. I don't think anyway I'm going to go with something like these guys because I can't even make more design about clothing brand, but with a different background. For example, I'm going to do switch style urban brand, I can consider something like this. The awa.com also is a great resources for inspiration. This website with a lot of experience and recognition, who has been publishing and rewarding digital projects for many years. I highly recommend this website to find digital projects, a bit more experimental and that they get out of a traditional website design. Another site that I found really important also it's Ana. It's not a website focused on design or a digital project, whether this website allows users to create dashboards and upload images and links on any topic. Similar to Pintors and it's becoming very popular nowadays. It has many categories you can go through and learn pro. Like this one example of Illustration general, it has beautiful design you can consider in your works. This godly website, constantly find a new web page where you can look for new references and inspiration. Because we can easily see new ideas in motion and animation. There are many references to check and give you great ideas. Like this one here when I click example, give me all the information for the design of the website, of the elements they use in their website design, like the fonk, the framework, the hosting, the style, and all that. And also, by the bottom, you find another similar site. Keep checking learn and gather more information and references till you find the things that align with the idea in your mind. Load More is very interesting because it's focused on project for mobile devices and has a very experiental design approach. It seems important to create categories for our references because in this way, will be much more useful when we design. For example, for our project, can direct the decision we make regarding typography. As you can see in this example here, I'm going to go with something like son ser. It looked modern and clean. I can consider also another kind of typography. This has more geometric shapes on the edges. The typo is very beautiful, but I don't think it doesn't align with the brand identity. This is very beautiful and clean typography I can consider also. Here we take a look about some of the color that we can use in our website. The colors are very interesting. I don't want to go more than five colors in this site, and I may go with some degrees of each color. This color is right here, the red coral and the green forest, it look very beautiful. I already think I may consider this for my product. Here we can take a look about some of the interaction of the layout of the images. This is very important and give me the idea of parallax effect already. How we can filter the content that we are going to have on our website. We can filter the content by color or by category. I also found ideas that I may go for and may not, I'm still not sure. Here I lay out all the references for my website design to check by category. I put the typo alone, the colors, the imagery, the graphics, the links, and the interaction. All this element is going to work as a draft roadmap for my creation. I will always look for ideas right here and check back to the reference to enhance my imagination. Now, this is all for our reference. We see how to create a mood board and how to start thinking of ideas. Let's keep on in the next less. 6. Learn About Strategies And Architecture: I Strategy and architecture, it's the key to understand the content that we have in our website. That's why we are going to organize it in a clear way so that our users consumes in a good way. Two discipline are responsible for this content, the content strategy and information architecture. That's why we want to talk a little about them. Now, let's get started. To understand them, we must know that each of these issue resolve for its part, the content strategy. So the question of content should we design for website? A tip to keep in mind for content strategy. As a designer, we must lighten the customer burden as much as we can. This means a support and the client with the contents. Many times our client knows our product or service very well, but what happens most of the time is that you don't have the time to quit them specifically for us and your website. That is why here as designer we are going to enter and are going to quate content to help us get started and give intraction to our project. We're going to create an initial content that is placeholder, so that later we have a conversation with our client. And we can refine it together with him. The information architecture solved the question, how should we structure the content of the website? To start with the content strategy phase, information architecture, we must understand our project very well. That's why we have done a discovery phase of research. This phase has given us all the tools to understand the purpose and structure our project correctly. Now that we have understood our project, now it's time to start proposing our content. We can do it in two ways. We can discuss a possible list. Then we imagine what the website may contain. To start, we have an example of what our website may contain as an option. It may have home about look book, store and card. This is if it's ecommerce. But for our website, we need only to consider home about contact and support M. To start, I'm going to open mind right here. I'm going to create an architecture for my website. The element that my website may need is home, contact, Look Book, and support. I add another topic maybe store for the home need filters. Reverse slide follow us another topic for contact, the mail and the number. I'm going to add another one which is about us, and it's going to have two subtopic, which is team talks and publication. I may also add services. All this element can be on one of each option. AI agent example for support and phone support. This store has collection pieces, the payment methods for sure, and the price. Also can have measures Now for the book, it should have layout. I should have collection, and also images, images photography. So as we saw here, we have subtopic in each of our topic. Now, this is also I created myself with a HTML about an architecture with notes. As you see, each one has also a subtopic, like example, home portfolio, filter projects follow us. The project phase can have case study about us, can have talk, team publication, words, services, and also we have the contact. This is the main hub architecture of my website. I can change many elements if I want. Another file also I created can help you with your work. It's about the architecture. As you see it have informative information. In each layout you click, it scale up to can grid it very easily with very well all the information you have right here. That would be very helpful to understand how to create your own website. This file you can have it with you in each project you are doing. I give you here option to change the color and to add more layout and more information. So as you see, I can choose or create a new one. This one I found it very useful for each of my project. I have all the information and idea necessary to put in front of me before starting my design. Try to use it is going to be very helpful for you. So as you saw guys, to quit our project, we go through many processes before even we start the design perse. We start with the creative breed. We made a research, we gather references, and we prepare the architecture and the strategy. And each of these processes I found very important with this method, we assure the effectiveness of your design. 7. Learn About WireFraming : The wire framing process is essential to align ourselves with our client about the structure and navigation of our website. In addition, is the starting point to find creative solution, problems that are often solved in a boring way. Let's get start by creating our visual proposal. Wireframes are very general schemi where we show how we are going to organize the content in each page. The first thing we will do is to create the artboard. We can see all the available size option. I'm going to choose the desktop one. We already have the work table. I'm going to change the size a bit to improve the proportion a bit and we'll rename it. Now I may change the color to white. Then we're going to put the logo name. For sure, if you have a logo, you create it already, you can put it instead of the Tikkuname. This is just an example. Now we're going to quit all the other options for the structure of our website. Contact about us. Copy and paste. Then Look book. Then we arrange them at the top and try to change the size of the typo. We need always to create a scale balance for that we need the logo to be more bolder than all the other options. I try to arrange them which one come at the first, which one come at the second. Follow the guide of Figma to put the correct space. Okay. Now with a rectangle tool, I'm going to create some layout. I want to create something different, so I may create smaller rectangles and bigger ones. Okay, here I created four rectangles with different shapes and a different color. At the bottom, I'm going to add another options. I may add, example, collection, category, and start. I add also with color and all. A now try to arrange them and change the font size. Here we are quitting on our option to navigate our website with a different way, like example with a color. We can go through collection with color or with the style or example with categories like pants, jacket or coat or whatever the category. Now I'm going to frame each one of these. I click on each one of them and make frame selection. And give them a stroke too. This way, I want to make them look like a boton. Then we're going to create auto layout. And try to change the pattern and the size. Okay? Okay. Heap tweaken the pattern. Keep twig. I'm going to make it rounded. And I'm going to do the same for the other bottles. Okay. Do the same for the categories and style and with colors. Do the same, make them rounded. Make the pattern and dimension of the layout. Now, as you see here, we have five button fragrant and with different shapes. The old button, I want to fill it with the black and change also the font and make it white. I wanted to make it different from the other buttons and make it more special. So I'm thinking also to change the way we organize our option at the top, the classic core way. For this one, I want to change a little bit and quit different way of laying out our option. So I'm going to put each one in a square. Okay. Okay. There it is. Now we're going to copy and paste the artboard and delete all the elements. We're going to create another page. I change the placement of the option and I put each one in a corner. Now I want to frame all the artboard. Okay. Now in the layout grid, we create one. And then we're going to choose not a grid but a column. We choose a number of a column, which is 12. It's one of the famous number they use in the website design. Then I change the color and make it fade little bit. Okay. Now I'm going to change the margin value to 20 pixel, which is the space between the column and the edge of the page. And the gutter is going to be 32 pixel. With this, we can adjust all our elements to this margin to give the image more room. In the layout, listen, we're going to go more deep on how to decide the values for good grid and a good layout. The next thing we are going to do is to create the title for the project. This one of the most important element on the internal page of the project. Therefore, the hierarchy that we are going to give in typography, it must be very large with respect to the other elements. I need to make it also larger. We're going to name the title, the road two stars. Make it bold, line it up very well. For this project, we want to create a very large images and navigate through the different images of the project. For this project, we want to use large and small images and that they occupy several column. We create moon squares with different shapes and size, change the spacing, where frames are also spaced to explore creativity. With this column, it's very easy to fall into solution that we see very easily on other websites. For example, using layout where the image occupy three columns, et cetera. However, what we want to create here is an interesting system where people feel they can interact with the page as they scroll. For this, we are going to use images of a different proportion, and we are going to use a little layout that we have to arrange the images in a different places. In addition to this, I'm going to create the test, we will be able to see all the information. As they scroll through the project and they see the images, they can also read the description right here. Let's add a titan and also a subtitle. We're going to say description for now and we add any paragraph we like. You can put anything because this is just an example. It's not going to be the final website. So we're going to make the title in a bold way and the other in a medium or regular way. I may change also the small color, the small squares, give them some color, to give some style to my page and consistency to the other page. So as you saw here, guys, we use the columns to create the page of the collection, and also we created the main page. We're going to keep on in the next lesson. 8. Learn The Difference Type Of WireFraming: And Now, to finish, we're going to create the footer and we're going to add some contact detail so people can communicate with them whenever they want. It can be a clever way to add the contact details in each of the page at the bottom. There people can access easy to the contact details whenever they need. We have to keep in mind that we can use this footer and the rest of the pages that require. The contact details goes like this. The number, the street the city the email for sure. And also, I can add the social media platforms and link them with the arrow. Every time the user click on one of these arrow, it takes that specific social media. Keep checking the spacing to be correctly for the three of them. With this, we finish our photo and the internal page of the project. Something very important to keep in mind when designing wireframes is this can be made in a different fidelity. For example, low fidelity wireframes. They do not contain so many details. They can be done by hand even, and they are used when we want to validate an idea very quickly. On the other hand, high fidelity wireframes they are much closer to the design, contain much more details of the content that will go on the website. Typically, these types of wireframes are using much more complex project. Chosen fidelity level, what we want to achieve in our wireframes. It has a lot to do with the industry in which we are work and customer preference among other aspects. As a designer, I believe this level of fidelity that we are achieving here is enough to continue the process and start the visual design stage. Finally, at this stage is very important, how we represent ideas to our client. Furthermore, that we align ourselves with them and that they feel very safe with us when moving on the next stage, which is the visual design. For this, I recommend always to represent the wire frame as a Figma prototype. To quit the prototype, I'm going to bring the wireframes. In these wireframes, we organize the content of the two page that we need. The first is the A page where we organize all the information we have about the brand. The information are very easy. We just adds and we put the necessary information about the brand in a very creative and organized way. Here we can add some images of the brand, most important Tipo example. We can put a paragraph about the brand and its history, and maybe also some collaboration they did or some famous media news they talked about if they already have, because as a new brand, they're not going to have a news media cover for them. Where did also all the city the brand are in? And at the bottom, we added the same contact information. The last page is going to be the contact page where we put different data that we have so people can get in touch with the brand. The last thing we are going to do is to create a very simple prototype, to be able to represent the wire frames and to be able to navigate them in a way that is very clear to our customers. To create the prototype, we click on the right side of the screen where it says prototype, and we begin to link the elements that we want to use. Hit the element that we want to use when representing to our client. For example, I want this image to take me to the collection page or the internal page of the product. For this, I select this circle with the plus button that appear on the right edge. I drag it to the next page. For example, I want this image to take me to the A as page. In the auction, we choose one click on click, navigate to A as page, and we choose Dissolve. And then let it on 300 millisec. Then let it on 300 millisec. Now we're going to link other options like contact. First, I want to add Autoayout and then I'm going to link it to the contact page for sure. We the same option on click and also Dissolve. We link all the contact options to the same page of contact. All the A S you have in each page, you link it to the same AS page. The TICO link it back to the home page and the Lookbook link it to the page of the book. So we keep doing the same, linking all the options to their pages. So we're going to create the flow at the first page. These tools allow us to create much more liberate prototypes. But for our case, these options are enough. This way we are created our prototype that we'll be able to navigate and represent to our client. Finally, we make sure that the link also leads to the homepage, as we said before, and everything in its place just keep checking and twiaking. Now we already have a prototype to share with our client. I'm going to go to the prototype view by clicking on display button and check if everything is work. If I click on the contact, take me to the contact page. If I click on the collection, take me to the collection page. About us, take me to the About us page with a nice dissolve animation. Explore us. Also take me to the collection page. Contact us. Click on Teco take me to the main page. At the end of the wireframe design process, it's very important to take into account some recommendations to ensure that we are correctly aligned with our client. And in this way, to be able to use it with the visual design stage seamlessly. I will tell you about all in this next lesson. 9. What WireFraming Recommendations: And Wireframing recommendation. At the end of the wireframe stage, it's important to know how we're presented to our client as well as aligning ourselves with our client to make you understand the importance of this phase structure, content, and navigation. In this lesson, I will give you some of the recommendations to ensure the success of the wireframe phase. So let's get started. The recommendation I have perpeation of the wireframes are aligned with the customers first. What we should review in the wireframe process, structure, navigate and content. Here it is important that we do not define what design is because this is very important phase to define what structure is. I like to think that wireframes are a gray house. This house in gray construction, you know how to navigate it. You enter the house, you know that the kitchen is here. You know that the sofa, the bathroom, and the room are there. However, it still lack the design layer, the white work, so to speak, in the face of gray work or wire frames is where we as users, we will be able to navigate each of the section. We can enter and navigate our home in a good way. For this reason in this phase of wireframe that we want to decide what does our house need to determine what you need to arrive at White work or final design. Second recommendation is wireframes are the starting point to define the content that we live with the website. That's why it's important to align yourselves with the client in which the content will be since is the one that we will organize so that it can be consumed in a good way. So when we present the wireframes to the client, he will be able to determine if we are arranging the information in the best way. Third recommendation has to do with the design. That's understanding that wireframes, they are not a limitation for our design. It is itself an opportunity to explore the different ways to display our type of content. Fourth, the wireframes, they are just the starting point for our project. So with the client, we agree what we can have in terms of content. However, we may continue to adjust it in the future. What would be the best way to arrange all these content? Here, as you see, while we are talking about our recommendation, we are checking very important examples. I'll let you the links for each of these websites. All these websites we scroll through. They all use the same method of framings and the column. You see the way they organize their content from images and typo and information. Everything look balanced and well organized and can be navigated in a good way. When we finish our content strategy and wireframe process, it's time to start our favorite phase, which is the visual design phase. One of the important element of this phase is the layout. So let's get started. 10. Learn About Grids And Layouts : The first element that we take into account is the choice of a grid and layout, where we will organize all our content. In this lesson, we are going to talk about the different that we use to design in addition to the creative opportunity we have with the use of this. These are tools that we have at our disposal to organize and compose the content on our website. One of the two type I use in my work is the first type which is layout we are going to explore right now. It is the most used in web design, and this one on the best consists of a column. In order to use it, you just equate a blank artboard, then add layout. And in this out grid option, by default, Figma grid this grid based ten pixel squares. But I'm going to change the option by clicking here and changing the grid crew column. As we can see by default Figma create five cols, I'd change the numbers of a column to 12 since the 12 column layout is one of the most used in web design, since this can easily be divided into 64, three, and two, and also very flexible to work on a different screen sizes. The option that I can quickly set here is the margin, which is the distance between our layout and the edge of our screen. And the gutter, which is the distance between our cold and the layout will adapt to the size we want. To adapt this layout to different screen sizes, I'm going to duplicate my artboard and I'm going to change the name. I'm going to change the size of my artboard to 800 pixel, since it is a size that is usually used to design por tablets. And it's same option, I'm going to change the number of columns. The margin between the layout and the edge of the screen and the space between the column. And to adjust to mobile device, I'm going to do the same. First, change the name. I'm going to change the width of my artboard to 300 pixels. What is the sizes that we usually use to design for the devices? This measurement may vary a bit depending on the product. And finally, I'm going to change the number of columns. Usually, four or six columns are used for mobile, the margin between the columns and the border, and I'm going to leave, in this case, the same space between column. Those we have created are one of the most used layout in web design that give us many creative opportunity to explore. For example, in this project that I designed, I used the same grid of 12 columns, but always look for a much more creative way of playing with the space. For example, I seek to create a different rhythm with the space occupied by each of the model. In this way, navigation became much more interesting. In this page like the detail of each project, I seek to generate moments where through elements that occupy more or less column, hierarchy and contrast are believed. In addition, I use elements that occupy all the columns. Elements that each occupy 50% of the artboard, or I seek to explore new uses of layout. In this way, we look for the layout of 12 columns, not be an impediment to explore new creative solutions. For example, we are looking for that the arrangement of text, image and white space was much more expensive. And although we are guided by the same layout of 12 column, give ourselves much more creative freedom to propose more risky things. In the project detail, we can see that the use of the columns gives much more importance to the white space, and by that, it created a very interesting read. In addition, we're trying to create a balance between images, text and white space to give a very pleasant feeling to users who visit the page. Going back to our project, we can see how the layout of 12 columns guided many of the design decision we make throughout the pages. And we can see how we seek to explore different arrangements of texts and images in each of the models. The other type of layout I use called Vander graph. I use this if I see the opportunity to create something much more visual, impressive or experimental, since it allows us to make freer use of space. To create this layout in figma, you have to do it manually, and we are going to show you how. The first thing we need to do is to create diagonal lines from corner to corner across our entire page. Then we create a vertical line across the middle of the page. And after the lower corners toward the top center of the page. Then the opposite. And we repeat the same from the upper corners. In this way, we see that intersections are quitted between all these diagonals. And from them, we are going to start creating vertical and horizontal lines. Okay? Okay. Okay, speed up by copy and paste. Okay. This process can be repeated several times as entersearching come out with the lines that we make. Here we create another horizontal which we replicate at the bor. And this last vertical much closer to the edge. Okay. Keep on. Keep on, quitting more lines. More lines. We can repeat this as many times as we want according to the numbers of guides we needed for our design. Once we have all the guidance, I'm going to lower the opacity a bit. I'm going to group it and I'm going to lock the layer to be able to create our design proposal on a top. In this way, we have a layout that allow us as many more creative freedom and that we can use it at times when we want to impact that also that we don't want to depend so much on the 12th column. This type of layout has been used in a project like this website. As you can see the arrangement of element, it's very different from the project I showed you previously. This make more use of a corner space. In addition, it is very useful type of layout for websites where navigation is a bit more experimental. As I said before, this type of layout, we use it when we want to create a very strong visual impact and also attract. Another project this type of layout has been used to also, it's this website. It has arranged the element in the corner on the sides. However, the project is very progressive, that the address was going to be much more free and interactive. Serve it very well at the beginning of the project to give the first design decision. The last topic I want to touch in on this liston is the vertical spacing between elements. I usually make sure that the space above and below each element, there are also multiples of eight pixels. In this way, we can create consistency in our design regardless of the size of the screen on which is going to be viewed. And we also make the work of developer much easier who are going to work on our project. An easy way to create this vertical spacing in our project with the different sizes that we are going to use and that there are multiple of eights. With the rectangle tools, we create these bars. We keep multiplying each one by eight. Okay? Okay. In this case, I created 4-56 pixels. And then we can use these blocks to make sure that the spacing of our project is correct. However, the easiest way to do this in FDM is by selecting any item and using the option key on Mac or the Alt key on Windows to measure the distance between various elements. In this way, we can adjust the spacing that there is. And with this, we make sure that our design will be much more consistent. And that the spaces will be much more organized as the user scrolls and it is found with a different elements of the page. We have already defined our clear grids and layout for our design, and next lesson, we're going to start blocking our final design. 11. Preparing Assets In Photoshop: Okay, before we start blocking our web page, we're going to start by preparing some assets we need for our cages. We're going to open Photoshop. We're going to create any document, and then we're going to import some images we need. Okay? As you see here, we have different images. The first thing I need to do is to remove a background. After removing the background, I need to do more cleaning to the image. So after removing the background, we're going to select the mask and click on select Mask. Here we're going to enter some options where we have many slides to tweak to make our mask better. So we just start by the radius, the smooth, the feather. Try to tweak till you see that your mask is better. Okay. As you see here, I can see that I already this was so much, so it erased some of the face. So I need to weak again. This is look okay, but I still have something I need to clean in the evens. Well, I'm going to do this by the brush. You just select the mass, and then with the black color, I'm going to erase some parts I don't need from the earrings. Okay, things look better, I guess. Maybe I play a little bit with the shift edges. More radius. I think this time it look better. Okay. Now we're going to do the same for another image. Remove the background, then select the mask and tweak the slides. Okay, the radius, B. I think it looked nice. There is something more you need to tweak, you can do it later. Now I just want to save it at PNG. The last thing I need to do is to create a poster in a red coral, and then in the front, I'm going to create Earthtones. Okay? Now, the idea here, I want to make separate part. The top part and the bottom part means separate layer. So from the middle the market tool for select, I'm going to select the upper part, and then with Control G, I quit it on a new layer. Then I beg to the main layer and delete the upper part. Okay? Now, as you see, I have both of them and a different layer. Okay? The Now, what remain is just to export each layer alone. You can export it at GPEG or you can export it as PNG. Okay, it's so simple? We just created some assets for our web page, a design. If you don't need things like I need right now for my web design, this is not necessary to do. 12. Start The Site Blocking : I Okay, now we're going to start blocking our website. The first thing we need to create is the main page. So with the metric tool, I'm going to create a rectangle and I give it a dimension. The dimension is going to be 1440 by 900. Then I'm going to change the color to white. Okay. Okay. Okay. Now I create tao by making it a frame. Then sure I change the name and name it like home. The dimension we have here is the dimension going to appear on the desktop of the user. In the layout guide, we're going to use the column principle. We already saw in the previous lessons. So from grade, we're going to change to columns. Change the column to 12, the margin 22 and the gutter 20. Okay? Now I need to lower the opacity. So. The dimension, you can change it as the way you want your website to look for the. I can make example horizontally larger. I just make a rectangle like the one we have here. You can play with a different dimension according to your website design. Now, I want to give my rectangle another color. I'm trying to get closer to the color for the website. We're going to have a separate lesson for that. We're going to see more how to do that. Okay, give it a color badge and give it lighter. Now I'm going to quit my layout. So first thing I need to create is a rectangle in the corner right here. I want to make small rectangle. I want to have different sizes. I make it rounded for sure and change the color. Make the color darker for the contrast, sure. Okay? Now I'm going to quit another rectangle. This time, I'm going to quit another rectangle by copying s one. I copy the same rectangle by holding out and drag. Then quit the middle rectangle larger. Do the same when you want to make it larger, it just hold control and you drag also. Now I keep copying without and drug. Always keep looking to the guard of the figment to make the spacing correctly. I want to make this more larger. So by that in the main page, I want to have four layout with different shapes with different sizes. This is the way we create the balance. You see right here. I'm trying to enlarge my rectangle little bit to create a balance on the main page. Okay. The spacing should be always the same should be correct. Okay? Drug by the arrow. I keep tweaking the sizes of my rectangle. The middle rectangle right here, I want to change its color. Maybe orange. Why now, I'm going to let it orange. Now, what I want to do, I'm going to change the bigger rectangle color also. This is the first blocking guys to see how the thing is going to look before I move on to images. I want to see at the beginning how it's going to look everything. Now I want to add image to the largest rectangle. I want to add an image. I have an image right here. I like the color of this image because it's much what I have in my mind. So go to image, then upload from computer. As you see how the image fitted in the rectangle, so I need to move it down to show the faces of the girl. So to do that, instead of fill, we go to crap. Okay. Go to crap, then move down your image. I think this is look good. Okay. Things look good enough. You just put them in the middle. Okay. So that's how it looked our first layout. I think the color correctly when I need it, so I'm going to do the same for other rectangle aptimageT time, I just let it feel. Now, sure, we're going to create the options. This is the architecture of my main page. When it home, change the color to white. Okay? Okay. This is our first blocking guides, but still we're going to see later about typography and color more in depth. So I need to change the size of my option right here. Try to place it correctly. Now we need to create the other options. Hold Alt and drug to create more copies. Okay. Okay. Check the spacing. Okay. Okay. Try to check the space and always with the guide of Figma. That's very helpful. Okay. Now I'm going to name each option. The first one we have right here is collections. The second one about us and contact so simple. This is the sinless option you can have on the website, but your website can be more complicated and have more options. It's according to the design, you need to do. Example, if this was the ecommerce, it's going to have more option for sure. We're going to have category, we're going to have the store, we're going to have the card. We're going to have many, many things, guys. This is like a portfolio for a brand. So after I change the sizes, trying to place them very well. Now, if you have a logo as B&G, you can import it and put it in the corner. My logo is going to be just a typo, so I'm going to create it alone by typing the name on the color. Another thing I need to do here is this orange layout. We need to create an option here a fra earth tones and symbol. I'm going to make it bolder and change the color to white. This layout, I'm created right here is going to be the layout for the filter color. That's why I wanted to create it differently. While you are designing your website, you should always think each option where it's going to lead and how the page we link to it is going to look. And also another thing you always think about while you are designing website is the animation. What element you will need to animate and what things you will let them static. So now I created here tone and tumble and then So here we need to create a typo contrast by sizes. So I'm going to change the size of rooted in nature, style it for you. This fra I want it to look more smaller. I may also change the spacing of the Earth does and sample. Trying to find the greatest structure for this product. We keep on in the next list. 13. Creating The Collection Page : So now we're going to keep on by creating the collection page. As you see here, first thing I needed to do is to like the ruler guide. You just choose the option of roller Guide, and then from the top, you pull a line to put it on the top, and another line, I put it on the bottom. This why I sure I have the same size for each page. Okay. Now, just create it a rectangle, little bit larger and I put in the first rectangle, I add an image. Then I brought my poster that would create it in Photoshop and I lay it over the image. It's not a big deal, guys, it just the same way we did before. The only new thing here we did is we added this poster recruit in photoshop over the image. Now I want to lower the opacity so I can see better how to fit over the image and then crop it. I go to crap and crap. When we crop it, we just crap it from one size, so I need to do the same for the other side. P here. Okay. Now I select the one and go to crap and then crop it this way. I go to A crap again. This is to say. Okay. Now this way and assure me to select only the part I need. Now I'm going to try to lay them correctly to assure not appear the same. Okay? So try to drag by holding control drag and try to lay over each other very well. Okay. Okay. Keep tweaking until you make it correctly. Now, get back to the opacity. Let's make the opacity 100%. Now, as you saw, we're going to bring the image that we created in the Photoshop. Okay. We lay it on the bottom. Then with the rectangle tool, I'm going to create to rectangle. Try to put them in the middle. Okay. Okay. This is how Try tweak to you find the correct position. Now sure I need to change the color. So I may change to green. Let's try green and orange. So so finally, I decided to make them orange. Now I'm going to create on each to square a phrase. Make it bold. Okay. Put the new I make it lower capital, I guess. I'm going to make no capital Ntor then take the size in the position. Now, already I'm thinking also that I'm going to animate this part. So every time I add some element, I'm thinking how it's going to be animated. And according to that, I may position it differently. Here, I'm going to say there palette. As we have right here. Now I need to arrange the image on the top. So I just choose. Now I'm going to bring these both images. I quit it already. I just create a rectangle with a larger size and then make it rounded and also upload image from the computer as we did before in the previous list. So I push them down to the bottom. Okay. Now, I need to quate a bot. With a rectangle and just make a small tangle and then make it rounded, align it in the middle. Okay. Then push it on the bottom, give it a color. The button always need to be in high contrast color. So just going to name the button. Explore more. Okay. I created this green rectangle and I call it natural palette and add any froze not important. You could add any froze you might grave not important. No, I copy these images, and I'm going to see if I let or I do something. Okay. Okay. I'm going to position them with a different way to create a balance, but with a different way. Dam is sure we're going to change them because we're not going to have the same images. Going to change the size of my rectangles, push to the top. Some ideas come and goes while I'm designing the website guide. So I don't always stick with things that I have in my mind when I start. Always it change according to what I'm thinking about animation and about design. Now, I quote it more rectangles. And at the bottom, I'm going to have this small green rectangle also. We're going to have the website. By now, I have these palettes. I put it next to me to choose some colors from. These are the primary color. Then later we're going to see how we're going to make the color board perfect for the website. Now, what I did is just I changed the images of each rectangle. I have an idea already how I'm going to animate that. We're going to see later. Now, with each image, I need to add some description. They or the first one. I may say blazer, jacket, jacket worn as part of a smart catch. This is just an example, guys, so not trying to change the size of my text. Make it also smaller, then I'm going to position it better. Okay. We're going to do the same for the other images. Put here. And the frost maybe two other things like suit. Casual blazer and pants maybe like green, the same we did before, change the size, change the font weight. Mean medium or regular or bold. We keep on doing the same for the third image. Okay, so we say smart and casual blazer, vibrant, and name it blazer and pants. Maybe we should take casual suit just Te What more we can do for our collection page. We're going to see. First, I need to position the description very well. Okay. I may change the color of the rectangle also right here. I don't want to have the same color, or I may do something much better by making an image as a background. Now for the last two rectangle, I made image as a background. You just know how to do that guy, so it's not important. Not important know already how to do that. This is also very simple. I just quitted six small rectangle. I make them a little bit rounded, and then I did the same by select each square and I add on each square an image. Add an image in each square. I'm trying to change the size of the cibt right here. Okay. Make it bigger. Then I'm going to position three images in the middle and the other is going to be outside of the page. Why I did that? I did that because I'm going to animate this part, and to animate it, I need six images, and I need only three images to appear each time. So as I told you, guys, when you are working on the design, you're already thinking about the animation. According to that, you position your content. Now we need to make them closer and align them near each other with the same spacing, okay? Okay. Okay. Okay, great. Thinking of adding more images. Okay, I may create more images if I need to animate more this part. After thinking, I decided to put the images at the bor. Okay? So I put them in the bob and change the images. Ki. It's so simple. It's not complicated. Now I have this paper texture that look folded, only give effect to my last background image. So I lay it over the image. Okay. I already how to do that. Now I'm going to go here to the drop where it's the blending option. Then I'm going to choose a blending. I'm going to choose multiply. Then this is how it look. I'm thinking of lower the opacity of the texture. I don't want to have that big effect, just need a little bit of it. So lower the opacity. Then I recess the texture. Cold control and drug. Okay. At the bottom, I created this green rectangle, and I said, 2025, all right, reserve it or you can take whatever you need. At the bottom here, you can even put the contact information of the brand. Square is going to be in each page. Bring to the front or the rectangle and the frog because I want them to be over the image. Okay. Now, I wanted to create another rectangle, make it larger, and also I will apply an image for it. Okay? You just select it and go to the image and select an image from the compute. Just so simple already, we did that before. This is the image we have. I need to make it larger. Now another things come to my mind in the moment. I have this color palette right here and I was thinking of using it at the bottom of the page. I give it a new touch. Okay. I will resize it and put it at the bottom. I need it just in the corner. Resize it that way. Okay, so I'm going to create a rectangle and give it a color range, I make it smaller, then copy and make another larger rectangle. Okay? Now I decided to put the other rectangle on the bottom, and the other one, I add an inch to it. At the bottom rectangle, I added the color palette. Then I resize it, make it smaller and put it at the bottom corner. Now I have right here a stamp I created myself. This stamp, I needed to put it at the bottom. Just attached to make my page more creative thinking out of the box, by example, adding this texture, adding a stamp, adding this color palette. Some ideas, it may come along while you are working on the design. Some ideas, you may have them before. Just combine all the ideas you have in your mind and try to come up with something more creative and don't think always the classic way as everyone that try to be more creative and open to try new things. Now, try to arrange this at the top. Now I have another stamps right here. I'm going to crap and choose one to put it at the bottom of the myPage also. We keep on on the next lesson guide. 14. Creating The Final Pages : So, hello, guys, now we're going to create the final main page for our website. I just created another page, make it larger, and frame it. Then I just put at the top about Tiko and then it's going to be in a bold. Then I quit it IFRS, talking about the brand. Anything you can say, an example. No problem. And also put it in the white color. This is going to be the A us page. Now at the bottom, I'm going to put the square I needed to be in each page that could be a contact or in my case, I put 2025 all the rights reserve. So this is so simple. Now we're going to create a rectangle. Gonna make it rounded, then make it larger. I make part of it outside of the page. Then create another rectangle over it. I put it only over the part I need to delete. Select both, and then go to the option right here at the top and select substract. This way we deleted the part that we don't need outside of the page. We let only half of the rectangle. Now select the rectangle, and I'm going to choose an image from my compute. Now put crap and I try to position this image. About us Paige, I want it to be more simpler. I don't need to have a lot of information like we saw in the Pergus lessons. We are going so simpler here, but creative and elegant. Now I'm just trying to align the image. The best way I need to do. I'm going to put it to the bottom. Then I align also the text. Now what I'm going to do, I'm going to copy the same page and then delete some elements I don't need. Copy the 2025 the right reserved, put it in the bottom, and then I'm going to change the color of the square. So simple. This is going to be the contact page. So with the rectangle tool, I'm going to create a big rectangle. I give it a color. It's going to be maybe red. Okay. Then I create a small horizontal rectangle. I create the first one. Then copy and create another one and another one. The third, I want it to be more larger and then create another one, put it at the bottom. This is going to be smaller in size because it's going to be the bottom. Okay, I give it more contrasting color because I want it to be the most important element the user can see when he go to the page. I'm going to give a name to each box. The name is going to be in a bold and in contrasted color. I'm going to say full name, email address and your message. This is what's going to be the box for e task. At the bottom, I'm going to say send message. This is going to be my butt, okay? Okay. The idea here is the client can send a message by putting his name, email address, write any message you want to communicate with the brand, and then click Send message and the brand is going to receive his message. Okay, I make the contact more easier. Now at the bottom, I'm going to bring what written in the previous lessons, the email, the number, the city and the links for the social media page. Try to align them very well. Okay. Okay, so simple. The pages are not complicated. They have all the necessary things, but in an elegant way. Now I'm going to change the color of this information. Okay. Okay. Okay, that's what we needed by now. So I put them right there. And that's it. This are the main pages we needed for our website. We already created them. We want to see more with the typo, the color. We're going to see what the interaction. There is a lot more to cover in our class. So let's keep on. 15. Working With Typo In Ui: Typography it's the most fundamental part of a design project. Therefore, it is very important that we have a clear process for the choice of the phone. In addition to having very clear rules for the creation of the typographic palette, all of this is going to make it possible for us to create a proposal that is much stronger. We need it to be aligned with the objective of our client and stand out from the rest. Typography is one of the most fundamental parts of the design proposal. So go so far as to affirm which is more than 90% of the success of the project. Therefore, there are certain basic rules that we must follow to ensure the success of our product. The first of these basic rules is to treat each of these project in a different way. Each project is a different word. That means when every product arrive for me to work on, I will not want to apply the same strategy that I implanted in a previous product in this new product. With each product, we are solving a communication problem. This reflected through the text. When we talk about texts, we are talking about typography. To make a selection of typography for each of our project, what we do is to have communication with our user. The second of these basic rules is that we must have a very clear purpose or the choice of font. The second of these basic rules is that we must have a very clear purpose for the choice of font. The decision must be born from the alignment of our client and with our brand. Since each of the decision we make about typography, it's particular to each of the problem that we are trying to solve. Therefore, deciding on font brings with it many considerations. What we should consider. Some of the consideration is that typography must be a balance between something emotional that connect with the user and also natural. At the same time, it must have personality that is characteristic, but also practical that we can use at different times. Finally, it must be readable so that users do not have problems reading the text of the web page. But also we need it to be flexible that serve us in a different context. Other consideration that we must have when choosing our phones that fonts should help us optimize readability, that is that our user can read it correctly to improve accessibility. In other words, when choosing this typeface, they will not have reading problem so that everyone can read the content. The last thing is to optimize usability. That through this typographical selection, user browsing the page to find content in a very easy way. The third of these rules is that we must know well the main characteristic of the font. For example, its main classification, its most characteristic features and the difference between them. Also, when we select a font, we talk about various things that have a chain reaction. For example, select the font, and in doing so we must take into account the size. When selecting the size, we will take into account the line spacing. And with this spacing, we will have to decide what is the background and font color. Another important feature when selecting the font is the height of the X. We can have two different fonts, but they are in the same score, and when we compare them, we are going to see that the typographical box are different. After selecting a font and the size that we are going to use for the text, one of the most important relationships and decision we will make is the size of the lead. A good starting point is to multiply the font size by 1.5, and from there go modifying the values according to the font we are using. As in editorial design, it is important that we take into account the number of characters we use per line. Since a paragraph with a very short or a very long line of context can hinder readability. This is a guide that we can use as a base with different scores that will help us to make sure that the main text of our website remain readable on all devices. Finally, one of the most important feature to consider when selecting a phone is its format. Usually, we find two formats, TTF and WOFF. The big difference between these two formats is that the WFF is equated and intended to be used in a digital product while the TTF is containing information for a print and screen. Now I want to share some tips for good font selection. The first thing I recommend is to search direct for the sources on the website of a foundry house, which are the companies that are in charge of quitting and distributing the funds. Some of my favorite foundry house are Pen gram Pen gram, clean type, snopon and Grilli type. The second tip is to use three very different font sizes as a base. This will help you create reading moments so that the user can have contrast between the fonts and thus be able to highlight each of the texts. Also keep in mind that these typographic bases that we select, we can modify them as we design our product. The third and the last tip that I want to share with you is to limit the number of fonts that you use in the product. It's very important to have a source as a base and add more sources in case it's essential or that generate value in the product. We must take into account the number of typographic weights available that we have in our base typography and use them before searching for additional sources. For example, working on a project, the client may send you a manual with different fonts. But for our project, we're going to search for our typo and limit ourselves to one or two fonts. First one we have on the menu is the font bay. You can just download it and then open it and make it run on the background. As you see, it has a lot of different phons. Each font has different weights and sip. You can choose example one to work with, and it's going to be active on your computer. Now, another one on the list is Google Phones. From here, we can search for fonts that may go well with our project. As you see, I'm searching for something like example, mocerf and also clean. Other maybe have some geometric shapes. I already chosen some of the things I want to work with, and then I'm going to click to download them. Okay. Another one also to check is font share. You can choose a font and then view all it's family. Let's see example, you have regular medium italic bold, K. You can even check the numbers how they look and letters how they look. It gives you the option also to play with the size, see how the text is going to look when it's wet and already. How the text is going to look with different sizes and different font weights. This is very nice website to start film. Another one also you can check is mplust.com. Here you can see also there are many different faulty choices and each font like a choice or even how it look example on a different kind of a product. Here you can purchase or you can find a free phone, but it has 1 million of a greater choices out. My phone also is another place to go through. You find also man choices you can buy or some of them are free. I already show you also how it look on your graphic project. So after you download your phones and you need to use them in the FEGma online, you need to download the font Installer. You just download it and open it and install it and make it run. Now we're going to go for our project and we're going to apply fonts that we choose. First thing I need is that I'm going to create different kind of font and check the best choices. So the first one I write here I'm going to choose is Donser. Okay? I'm going to try to check different weights family that work and copy and try to choose different kind of weight. This is how it looked in a bowl how it looked in a medial, and this is how it looked in regular. I think I may go with this choice already. So let's delete and let's apply this typo to my work. I may check before some of other types. But no, I'm going to sew with open sense. This is the side. I need you to be extra bold right here. I don't think bold or extra bold and go with extra bold. For the next text, I'm going to choose the same font but a different ways. I'm going to put it on medium or regular. Or maybe Seibold the medium. After it. So I choose a medium. Now, we do the same for the other also text. The logo going to open seers, also extra bold. The other options, I will choose an I like it. To open pens, and then I will see if I choose medium, in bold children medium. Do the same for the other ones. I have two main pages here because I have some ideas about animation, I may need two pages, but we're going to see late. So we do the same for the same page. Okay. For the collection page, I will also do the same, choose extra board, for the title, and then choose again. So as you saw right here, guys, I'm working only with one font and with a different weights. So I chosen right here. Don't mind, guys, if some structures look different. This is just an example. We're going to see later the correct structure when we are animated. Here I'm just trying to experiment with Santa. Okay? But you saw the collection page design already in the blocking page. This is just an experiment. Okay. So we keep choosing the fonts that we need and apply to our page. This is not something you see guys that's going to do the same thing. Some title will going to be in the same font, but with a different weights like bold and regular or medium, do the same for about us. The title sure it is going to be bold and the text is going to be either medium or regular. There it is. Okay, I change the ones right here to lower cases. Okay. Okay. Okay. Okay, do the same for the rest. Say informed with the same different traits. I limit myself right here so much by working only with one typeface. This is the best way to work in my opinion. I will never go further than two fonts. I always prefer to work only with one font or two maximum. This is the cleanest way to work, but anyway, you can go more with four or three. This is your ideas. But anyway, I will never advise you go more than four phone at maximum maximum, okay? And the best way to work is with one font or two. That's create consistency and doesn't create chaos for the design. Okay, so that's it, guys. This is what we need to know about the typo. I hope you understand very well how to work. We not complicated. We saw all the necessary thing to make a great successful design. So we keep on. Next lesson, we're going to see how to work with Cool. 16. Working With Colors In Ui: Usually the color on a website is functional indicate the actions that we can perform on website. In addition, it highlights which color are related to the brand. However, we believe that we can give it too much creative youth. If we use them in the right way, in this listen, I will talk about the use of color and webpage and how to apply it in a more creative way. This is decline creative brief. Supposedly, I created myself. We will be able to understand what are the correct uses and the color palette that they have in their brand. As you see here, the color palette is very rich. It has warm cream, forest green, golden sand, and coral red and soft beige. The information we have right here for each color, the code of the g, RGB and the CMYK. This is what the brand want their color palette to be. At the bottom, we can have the color application, the background colors, foreground and the text color and the website element. I give you example how the color can goes with each example, the color of the text and the color of the background. This is very important to go through and learn about each of them. Very important element is the contrast combination. We have high contrast and medium contrast. This is all I ensure the optimal readability and accessibility across all brand material. The brand color guidance. Here is also good information to know about primary use, the supporting color, and the accessibility. So as you can see here is all the information. This is about the color application for the brand. So when I'm working on the web page, we need to align ourselves to this brief right here. Now I want to show you something also very interesting is this website called Colors. Here, we can start by generating a color palette. We're going to try to recruit the color palette from what we have in the brief. If you want to get idea about color palettes here you can work with, you just quick generate color palette and you keep clicking on space to have a different color palette. Always click on space to have a different color palette. If you find example, an important color and you want to let it and change the other colors, you just log. Okay? Or if you want to get rid of one color, you just click on X. Now, as you see here, when I click on space, make me have a different kind of a color. All this option we have right here is to lock and to change. So to have the same color we we're just going to bring the code and insert it in each of these color palette. Then we lock it with same for the other color. Till we have this color palette, you have it right here in front of the view. Now I'm just going to download. Okay. You can also check the trending color palette. They give you idea of some of them that you can use for your work. Another option also to check the corner contrast to check. Here, you're going to put the background and the foreground text you're going to use and see if the contrast is readable and it's good. So as you saw here, we just answer the code of the text color and the background color. We want to choose from the brief, we want to choose the codes. As you see here, it tests very good. So this way, we know we can work very safely with this color. You can keep check another color. And prior to see. This is example, the color of the background is the first green and color is soft beige. So it says very good and give it a good number. So I know I can use also this kind of combination. This is another website of a color text. You can also want to let all the link of all the sources on the class material. Maybe I have different kind of color palette, and I have also different kind of contrast color. As we saw, I put it some background and foreground colors and put how they contrast with each other. This is going to be a guide I may use in my work? And also I created a degree of each colors we saw there. Now I'm going to apply the colors to my web page and to do that, I want to choose with the I drop the color by selecting each object. I'll select the soft badge for the background of the main page color. Then I'm going to choose the colal red for this layout. The same red for this layout. Hose it. They look more interesting. Now I'm going to choose the color also red for the logo. I'm going to choose the color for the option. Always, you keep yourself aligned with the brief of the color from your client. Forced to green, the born is going to be also force to green, the squares in the bottom is going to be force to green, and the color of the text is going to be soft the color has rolls in each of the web page. So some of the colors in faces, some of the elements that we need them to dominate and we need them to attract the user's eyes. So these element we need to create them in the high contrast, like example, the buttings or very important information. Okay. So I keep on adding the green forest for the element at the bottom. This is less contrasted I want them to be. So now here as I see, I created another page, this is going to be the color picker. I just make a rectangle, apply an image to it. I put the information at the bottom, and then create small square. Other page, it has image and each image have small square and also a little bit of description. Now I want to choose the color of each image and put it on that square. So for example, the first color, it has this dark signs, put it to that and also this small square right here, it's going to be orange flourish, add it to that square. And here also, I'm going to add the same color of the brown. The same color of the brown. These pages is going to be linked to each other. We're going to see later in the anchor action. It's so simple, it's not complicated. You saw how we created them with God to match the color of the images to the color of the square. Now I keep changing the colors of the text to before how to be contrasted. Okay. We keep on adding to the other same element, same color. Okay. Okay, now that page a little bit. Okay. Don't worry, guys, if you see something you don't understand on the pages right here, this is not the pages we're going to use. As I told you, this all experimental pages. The pages that we're going to use for our interruption is the pages that we already created in our lessons. Okay? So let's keep on. Maybe I change the color of this page also and choose the send color. For sure, the red color now doesn't contrast with the send color that we did, so I may change it to more contrasted color, which is the soft bese. Then the boxes, I will change them to send color. And for sure I need the most contrasted element in my page here is the button. I will it in red colon I all the buttons in my website here, they're going to be in a red color, which is the most contrasted color. I may change also this text to green forest. Text also here to green forest, and also the other text. Okay? Okay. Try and experiment more with the color. So then I decided to change the color of the page to bedge and the square to send, okay? I think this is better. Each color has its role in this webpage, try to apply them with the correct way and according to each role and how you're going to guide the user's eyes. Finally, we'll talk about accessibilities and colors. When we design a web page, an application or a digital product, it's very important that we take into account the contrast and the accessibility of the users. Accessibility means taking into account to all these people who may have a low vision. So that's why we must be careful in the color selection and how we check it. For that, I'm going to show you two tools within figma. It's the same we saw before at the beginning the ones for the contrast. Here, also, we can have it in figma. This plugin called contrast. And it will show us whether the selected color schemi is accessible or not. What the A means is when there is a very large text, and the A is if it works when there are long text. For example, in this case, when we have a red background with the superimposed black typographics, or darks green, it will work. However, when we have a black background with a red typo, it will not work. When there are long text, it may not work. We can do the same with another exam. I show you that here it shows you work very well. As we saw before in the first of the class, but I wanted to show you also how to use the plugin in fegma. So that's it, guys, this is how you apply the color for your design. I hope you understand very well, and you know how to use the contrast and to guide the eyes of the user and to make also things very readable for the user. 17. Adding The Graphic Elements : Okay, guys, here, we're going to check some graphic elements that we're going to need for our website. Graphic elements, we use them to enhance our webpage. Don't make a mess by creating overwhelming elements. We use only things that we think it's going to add to our design. We can start here example in SVG in this SVG website. You can download many elements like ARO squares or wherever, or you can use the Illustrator to create your own element by yourself, for example with the geometric tool, and then you save them as SVG or PNG. I prefer always SVG because I can change the color directly in the Figma. Here also free peek, this is another website you can also download from some graphics, some texture or whatever you need. Now, back to our project here, we have all the elements I need. I'm going to change the color of this arrow. Directly here, I can change the red color. The first thing I'm going to add is this arrow I created by myself. I want to apply this red coral page. Then another stamp, also I apply it on the other layout in a small side. The first thing I need to do is to apply the gob arrows. This is going to be in each page at the bottom. Also the square arrows, I want to edit in the color picker page. So edit right here and I give it a col. Some small elements may be also animated if I want. I may animate these square arrows because it's going to work for me as a guide. I keep applying the gob arrows to the other pages. Okay, drag some element in front of me here to see what I'm going to add and what I'm not. This is the color collection. I'm going to add another stamp right here at the bottom. Okay. Okay. Now I'm going to add this pattern of the dots. I want to edit in front of each of these images. So as you saw, I feel a little bit more the space with the elegant way by adding this element. Do for each of these images? No, he also another stamp. I crap it, and I'm going to put it at the bottom where it's smaller. Okay. Okay. I have also this square. I need to put it in the middle. I'm going to add it to my key. At the bottom of the collection colors, when I have the collection page, I add this other rectangle. I add this other rectangle at the bottom. I add this image, and I add also this color palette in the bottom, and then I'm going to create two rectangle and a different pvision. Okay. Now I'm going to add images to the over one of the image, I'm going to create two rectangles small. Then I will add a color from the same image. I want when the user visit the color picker page. When he click on Explore Moe, you take him to this part of the page. Now I'm going to add color to these small rectangles. With the eye drop, choose the color from the image. So simple. Now I'm going to add small description right here. H. Now, as you see, I created this small extractor color right here by HDML. Here, when you open this file, you can have this extractor. You just uproad any image you want, and by default, is going to create a color palette and add those circles over image. You can move the circles around to have different colors and give you a different kind of a color palette. As also you can click on the plus button and you add more color to your color palette, or you drag away and get rid of some of the color palette. With each color, also we give you the hex code. So this is going to be very useful for any work of any project you do, guys. So I'm going to let it for you and the material for the class. We keep applying some elements to our pages. We add these small Also circles to the collection color page. Go to add and fill the spaces, but the balance and creative way. As you saw right here, guys, something you may notice as this color page, I put it this PNG file that we created in Photoshop. The image just put it over the background side to make it bigger also and became part of the background of the page. You fill in the spaces with this graphic element. And as you saw, we created the color picker and created the page for that, and it looked also very nice. These are an optional pages you can create, but it's also very nice and creative way for the user to explore the collection with a different way and give it a different kind of experience. Now, we finish all the design process, and we're going to start the animation process. 18. Learn About Motion Design : I In the middle of digital design, include animation in a visual design proposal can make all the difference between an excellent website and a regular one. Therefore, in this lesson, we'll talk about motion design. The fundamental principle to be taken into account and the opportunity and the tools available we have today to create animation for the web. Let's get started. Once we finish the visual design stage of our project, we can start adding animation interaction and other graphic elements. That will add a lot of interactivity to the proposal, and that will make our design much more interesting. In this lesson, we'll talk about motion design, which encompasses all the animation proposal that we are going to create on our website. To get started, we will talk about several basic principle of animation, which will allow us to quit animating proposals that are very innovative and they have a lot of personality. The first principle to take into account is speed, which refers to the duration of the animation from the beginning to the end. If the duration is short, say less than a second, we'll make the element move very quickly. But if the duration is much longer, we'll make animation look much slower. And the second principle to take into account is Ethen. What is the acceleration or the acceleration of the elements? Why the animation happen? Many default animations are linear, which make them look a bit dual and serious. But playing with this element, we can create animation that are much more expressive and with much more personality. In order to understand this principle, more clearly, there are tools that allow us to visualize change in speed and easing and thus understand how each one affect our animation. For example, this website called eins.com, allow us to play with different values to understand the changes between one and the other. To start the duration or speed, which refers to how long an animation can take from the beginning to the end, in this case, the default value is 1,000 milliseconds. That is 1 second. If I change this value to something much smaller, we can see that the animation happens much faster. I'm going to leave the value in the thousand. And on the left side, we can explore easing. This is the acceleration or the acceleration of the elements. Easing is visualized with the curves that are equivalent to mathematical value. Easy in means that our animation is going to speed up towards the end. And as I change the value of the easy in, we see that this acceleration becomes much more evident. And conversely, the easy out means our animation speed up at the beginning. And then it slowed down as the end comes. As we can see in this example, each of these acceleration options got a different value on the sure curve. This value can be delivered to the project developer to make sure that the animation is as we are imagining it. Lastly, the easy in out means that the animation speed up at the beginning and also at the end, which a deeper understanding of easing and speed. We can start generating animation that are much more interesting and have much more personality. For example, playing with the easing and speed values, we can achieve animation proposal like this one. We can see how the animation proposal and other details move. As the person scroll, they try to be reflection of the brand. Okay. This brings us to very important point, what we are going to use in our animation. It's through the attributes of the brand with which we are working. This will guide many of the decision we make when it comes to animation. And then the same will happen if the brand is irreverent. For example, this brand of the help devices communicate in a very clear and a very direct way with the user, which is reflected in this animation proposal that use a very low speed and very accelerated movement to animate the element of the page, such as text and illustration. Another different case is this Melhip site dumpling delivery. This website wants to create an experience close to video gain. Therefore, use much more expressive animation. And with the resources such as rebounds and other element to make your animation much more entertaining and not simply to communicate the message in a direct way. And finally, this brand of items for home, try to be much more delicate and subtle in the form as it is presented on its website. Which is also reflected in the animation, which have much slower speed and very subtle movements that go according of the personality of the brand. For our project, we're going to use more interesting animation. It's called Parallex Animation. Parallex animation is a website design technique whereby ground images move at a slower rate than for ground image, creating an illusion of depth and immersion, like looking out of a car window nearby object, blur past quickly, and scenery appears to move much slower. We're going to see how to do and apply that. For example, for a project like this, you need to share example references with the client. To align themselves for the type of animation that they are going to implement in development. Therefore, it's very important to align ourselves for the people who will be in charge of implementing the animation. Since the tools, the amount of animations or the effort to implement them, it can vary according to the project and the time we have. Finally, these are the programs I use the most and recommend to create animation for webpage. First, there is after effect, which is one of the most used program in the world. Second, there is a ate which is a tool that allows you to export the animation that we have made after effect in the format that make it easier the implementation of this animation on the page. Finally, there is green SOC, which is a code library quated for animation and very worth learning. If you are interested in the development of the page for sure. Once we finish the animation proposal, we move on on creating the interaction and the micro interaction on the website. 19. Creating The Vertical Parallex Animation : Oh To create a micro interaction in user interaction, we must understand what we can implement with our website, what they are and how to create them. Here we go into detail on the essential topic for the web design. Let's get started. A micro interaction in a product is an interaction that allows or help the users to complete the task, either going from the homepage through project until reaching and about. Micro interaction are presented everywhere on the cellphone, on the computer, in our household appliance, or even in the environment. In digital design, we have several examples. In buttons, the scroll or in the navigation bar. Micro interactions play a very important role in the user experience since the help us to improve through interactivity, the usability of a product. I will show you some cases for the work study. Your various micro interaction, they had been implemented well. For example, this website, the elements appear in a beautiful way makes the user feel the experience already. It looks like you have to explore more the website. In this website, the micro interaction of how it detects enter. It had to give the idea to the users that he's going to see something very interesting. In this website, also you have micro interaction where you invite the user to open the menu, to be able to navigate the other sections as they have implanted. The logo is stand well and the element begin to pass over. It gives a very good readability of the project and also a creen way to interact with it. Now we're going to start the process of our interaction. The first thing we need to create here is the vertical parallax animation. And for that, we're going to have many separated parts and frames from the collection page. Thing I did, I copy paste the part where we have earth tones, which include a rectangle with the image and this earth tone graphic. I put it in a frame alone, then copy and paste another frame also. And this time, I'm going to make it larger at the bottom. Then I pull the graphic open. One side is going to go to the top and the other going to squeeze it down. And as you see here, I position the square of nature outside like this and the square of palette outside also and the image at the bottom. Then there is an important things to do is to check clip content. This way, you make all the elements that you have outside of the page not visible. Now I'm going to go to the prototype option, and I'm going to start creating the interaction. So now we're going to create the interaction. Okay? So we're going to click Navigate to Collection two, Smart animate, and we're going to let it on 600 millisecond by now. We're going to make an interaction back the same. So the idea here is every time we click graphic open and reveal the image inside. So as you saw right here, guys, that's what we have the position of each of our element. I saw here the born graphic part, I need to squeeze it more. So I did it too. Also, the beginning of the frame, you always need to create flow. So I created the flow already. Now, let's click on the Play button and see how our animation look. So we click. So we click and then it reveal the image. Now as we saw we have this position right here, we're going to copy this collection too, and then as you saw the position right here, I positioned them on the bottom outside as we saw in the previous, as you saw before. Now, in the collection three frame, I'm going to push the graphic and the image revealed to the top, make them disappear. And the top. You can see them right now because it's a clip content. Checked make it and check. You're going to see what I did. I push it all to the top then I position the bottom frame in place of it and I position it this way. So idea that I did is that I positioned them outside. Then when you appear on the frame, they're going to make like this. So they're going to animate by enter each square from the side and the image is going to pop up. So I'm going to create another flow, and then I'm going to create the interaction of the second and the third. Let's try and see what we have by now. So as you saw right here, I just click Close, click again and it up. No, I'm going to create re interaction of the both. So from collection two, the Collection three, Create the flow, and then from collection two to collection three. I'm going to make on drag navigate to collection three, Smart Animate slow at 600. This time, the animation is going to work by dragon. Okay, so you saw right there, the position in the previous frame and the position in the mainframe. This is going to create our animation and it's going to initiate by drag. So so let's check. Okay, so click Reveal drag, and that's how the animation is going to appear when we drag. Click, click again to close. Click to open, drag and that's how the animation is going to appear. Okay. At the bottom of this also, we have this frame longer because we're going to position as you saw. So at the bottom of this frame, we didn't see this as before, but at the same frame at the bottom, we have these two images in the bottom. So we're going to copy this frame and put it first, I need to push this here. I need to push this. Then the next frame collection f, we're going to do the same, push the previous frame to the top and instead make only one image appear right here. Okay? So so when I check clip content, I'm going to show you how it looks. So you saw. So as you saw the previous frame, I push it to the top, make it disappear, and then put this image instead, and the other image, I let it at the bore. I don't want them to appear together. I want them to appear one by one, okay? So I'm going to have different kind of frames. It's going to reveal the first image. And the second frame is going to reveal the second image. Make create collection fight by copying the collection fd. And this time, we're not going to push anything to the top. I'm just going to make the other image appear in the other frame. Now in the next frame, we're going to have two images. To the other frame, we're going to have the button appear. So let's start, click drag one image appear, drag again, another image appear. What we're going to do, we're going to create the same thing by copy and paste and bring from the main collection page the other part, which is those three images. Not forget always to create the flow. Here example create flow four. The animation, as you saw, was the same we did with the previous drag. Navigate two, collection four, and also from collection four to collection five goes by drag. Drug Navigator and smart Animate. And this is we made it a little bit faster eight millisecond per second instead of 600, 800, make it more slower. Let's try it now. I it appear and slower. Check all. By now, this is all we have. Next frame, I'm just going to copy and paste, and then I will make the button pop up in this six a frame. Make it longer and bring the other element from the collection page, bring another element, copy and paste and position them in the bottom of the frame six. We're going to animate those elements in the next frame. So in the seven frame, we're going to first push up all the previous frame to the top. Then we'll replace it divide the next frame. So let's keep on in the next li. 20. Creating The Image Revealing : So in this listen, we're going to create the image revealing animation by the mask. So first thing I need to do is to create a rectangle the same size of the image. I'm going to arrange the square behind the image. We're just going to do that by pulling down the square on the layers behind the image. Then select them. They should be over each other, guys, okay? On the layer section. This is very important. Then select both. First, I want to group them. You can name the group to wherever I want. Okay. Now I select both. I select the rectangle and the image. Then go to the option here and click Use as mask. So as you saw in the layer right here, it created the mask for my image. Now what I need to do is I squeeze the image down. I select the rectangle, not the image, the rectangle, and then I push it down to make it disappear. Okay. Now also to animate the text, so I'm going to position it outside. I want to also animate this graphic element, so I'm going to make first the opacity zero. Now copy the frame. Push to the top the previous frame and then push the other frame instead to the page. To the mainframe, right here. Now, what I want to do is correct the position of the Bro. I want them to appear in the mainframe. I position them down. Now I make some part of the image appear. I make 50% of the opacity also appear of the graphic, and also I push inside the text little bit. Cut another frame. And this time, I'm going to reveal, I'm going to make the opacity 100 and I push the text to the final position. Okay. Now I'm going to create the interaction. So on drag, Navigate two Collection seven, smart animate. I'm going to make it slow. 600 millisecond. Do the same. This time, I'm going to choos the option after delay, one millisecond, one millisecond. Navigate to collection eight, smart animating and slow. Easy out. Now I'm going to quit flow. Start from collection six. Let's go to Prototype. Let's click Play and see what we have. Now, I drag, appear, I drag, tape the buttons, I drag, I drug, and now the image review. Bug have this animation of image reveal and text animation. Okay. I need to change something in the interaction I'm going to change it to slow and make it 600, okay? So This is better. Instead of easy out, I change it to slow. Now, we're simply going to copy the same method for the other two images. Before that, I want to squeeze this more down and see the animation now. I look nice. Okay? So we're going to do the same for the other images. You're going to copy the frame eight and then push the previous to the top and then create the other images like we did before. So let's see Okay. This is the image you need to copy for the others, okay? So let's keep on. 21. Creating The Parallex Horisontal Animation: I Now, after we created the image revealing with the mask for the three images and create for each image two frames, now by default, we're going to have 12 frames. So this is our 12 frame. At the bottom, we're going to have this image right here as the background, the image of the background, that we copied from the collection page. Now at the bottom, we put this part of our collection page right here that we're going to animate horizontal parallax. So in this frame, I position the images outside like this and also the square outside. I pushed the previous a frame to the top with the others. Okay, that's how you see it. Then we're going to copy the same frame. Now, before I got to click to check again, clip content, I wanted to show you from where I brought, guys. This is the part where I brought it all this part. We still have more parts to do to animate. But by now, we're going to animate this part. Clip content. So I position my element like this, clip content to make the element invisible. We're going to push this frame to the top. So they can push also the background. Okay? We push put the other to the top. Now we position the three images inside. Okay. Copy the same frame and push different images inside and make the other slide outside. Copy again the same frame. This time we're going to push this frame to the top. Instead, we're going to make first this square appear inside, position it this way. Again, copy, I'm going to push also more the background to the top in other frames and make also the other three image appear. Okay. So this is the final animation position. We put it right here. At the bottom, I want to put all these final elements right here. I'll just position them right there. So simple, guys, position in the previous frame, then reposition to the way you want it to appear. Now for this one right here, I want to create also a mask as we did before, create a retain on the same size of the image. You position it at the bottom, position it behind the image, then squeeze it down to disappear. Copy the frame, push the previous frame to the top. Take the other one and then reveal the image. Simply reveal the image. This time, I didn't create two frames for the revealing. I just created one frame. Push also now all to the top and now make simply the image take its place in the main frame. Okay? Then make another copy of the frame, then make the last element of the collection page up here in the astafray. I can go further even and animate this animate also the color palette, but I'm not going to do that for this part. Then we're going to create the interaction so simply, okay? Let's keep on in the next lesson. 22. Creating Components Animations : And Hello, guys. In this class, we're going to make different things. We're going to create a component animation. So I'm going to take this layout and then I'm going to frame it at Autoayout. Then I will hold out and drag to quit. Now first thing I need to do is to select it. Select it, select it, then go to Constraint right here and put it in the mid. And Then simply copy paste. Check the constraint in the same in the middle. Then I'm going to choose the scale two and scale it to 1.3. I may change the scale a little bit less like 1.2. Like 1.2, okay? Now select both. Go to the option right here and create component set. Rename the component. I'm going to name it layout one. No, create the interaction. So the interaction goes like this. We need every time we hover over the image, we need to scale up. So for that, we're going to put while hovering, change to frame 23, smart animate, and then we tweak this curve. Okay? Tweak this curve like this. I create the interaction back. I did it like this, then go to the assets and search for layout one. The assets, you find it on the left of the page, you go to assets and search for layout one. Then you drop it and you replace it with the static layout. Okay, now position it very well. Now, let's go to prototype and see what we have. So as you see here, while we hover the image, it's scale up. Okay? So every time we hover over, the image scale up. There are some things need to tweak. It was the same for the other layout. So what we did first, I grouped the image and the stamp together, and then I did the same as I did with the previous one. I did the same with the other one, I created the center constraint. Then I scaled it up to 1.2. Now, we create the interaction the same while hovering, smart animate after we created the component set for sure. Now, let's go to assets, bring it from there and replace it with the statetic layout. Replace it there. And every time I hover over one of these, they scale up. I need to tweak the size and the position. So I go here to the main page and try to tweak their position. Trying to tweak their position a little bit. So fix the position by changing the sizes of my layout a little bit there to make it appear more cleaner way. Okay. Okay, that's it. Let's keep on to the next lass. 23. Creating The Page Transition Animation: And Hello, guys. Now we're going to work on our page transitions. So the first thing we're going to do, we're going back to our frames and quit the interaction. On drag, navigate to collection 13, smart animate slow 600, we may change it to another number or let it they say. We see our animation, and according to that, we decide. So now, do the same 13-14 on drag. Same slow and 600. 14 to 15, the same on drug, navigate to 16. Now on drug, Navigate. Ragate also, and then on drug, the same guys till the last page. Now what I'm going to do, I'm going to resize each page. So keep greeting the flow and then check. I think creating the flow again. C on the floor right here. So before we clean our work, I need to check what we have by now. Click drag, drag Image reveals horizontal parallax, drag again, horizontal parallax, then image reveal right here. Then also the stamp upear. Okay. So that's what we have by now. So let's work about our page transition. The arrow will link it to the homepage. All the arrow I have in each page, I want to link it to the main page. So every time I click on the arrow, take me back to the main page. We're going to click on click, Navigate to homepage, Disol and slow. Okay. Okay. Now, click. I take me back to the page. Don't worry, guys. There are some element not in the same layer. I will fix that. So I need to do the same for each arrow on the bottom of the page. Now we're going to link the collection option to the collection page. The first frame on click and dissolve and the same vals. Now keep linking the other options. So link AS to the AutSPageo right here. Same option on click. Navigate, dissolve and all the same option. Now keep linking the other elements. Now contact. If you click on each option and doesn't appear the plus button, that means your option is not framed. You got to back to design phase and click on it and frame selection before you can apply interaction to. Okay, so I apply the contact on the contact page and about us to about us page, the collection to the collection page. Now, I want to link this layout to the Color picker page. So every time someone click on that layout, it taken to the Color Picker page. Okay. Okay. Then also link back the arrow to the main page as we did before. The same for the other arrows. Okay. So let's try to see what we have by now. Click. Take me to the color picker. Okay. Click Condor Take me back. Now on the collection page, a drug, a drug. Okay. Okay. Check what we have by now, but we're going to see more on the final interaction list. And we're going to fix subsff. So the page transition work very well. Each one link it to each target page. Let's keep on with the last lesson for the interaction. 24. Creating The Final Interaction : We are about to finish our interaction lesson. The final step, we're going to tweak and fix some stuff, and also we're going to work on the color picker page. Okay? So let's go and see what we have by now. I click it some stuff. As I see, I can click and scale up correctly. This is very nice. I wanted to change the scale of the components. Make it less. You can make it one by one, 1.1 example or wherever you like. Okay? So as you see now, it works better. Now what I did to all my pages, I drag it from the bottom till it reach the main size. When you have clip content, you can do that so easy. But now I'm going to create this interaction of arrow I will create component set right here. I'm going to make the first arrow Opacity zero, frame it at the beginning. I need to frame it, then copy it. The constraint should be in the middle also, and then the first one should be opacity zero and the second one opacity 100. Then select both create component set and rename it. Okay. Then after I rename it, I go to the prototype and create the interaction. The first introduction will be after delay, one millisecond, smart animated gentle, and do the same for the other one. So it's start at opacity zero then become 100 and then back to opacity zero and then keep on like that. Animated loop will never end. Okay. Now we'll replace it with the statticErrw. We'll go to the Assets and search for Arrow. So that's it, everything look clean now. As you saw right here, what I did, guys, forget to tell you right here but the color collection page, I created many frame of it. Each image, I put it in one frame. We just copy and then do the same, push the frame to the top and replace it with the other frame and like that until the lasa frame is going to look like this. Okay? So, so I added this arrow in each of the frames. We do the same as we did before. Create many frames. Each frame should have a different image. Just copy the frame, put the other elements at the bottom to the main frame and keep on the same procedure. Till you have each image in different frame. Only the bottom of the page, I let it like this larger than the other. So that's it. Clean all the pages and put them in the correct position. Okay. What I did for the color picker is so simple. I link each square with the frame of the image that has the same color. This is learn more button. I link it to the bottom of the page of the color college. Okay? So we're going to see I'm going to see that. So let's see the animation. As you see, we click, scan up. Now we go to collection page, we drag drag, drag. Okay, Image review, image review, image review right here also. Horizontal parallax. Okay? Okay. The image review of this. Okay. Go that's it. Now, click on the arrow, going to go back to the main page. Click on the color picker, click on any square. First, let's check. This is the component we created. Now I click on this. I take me to this image. Click on the arrow, take me back. Take me back, choose another color. Take me back. The animation is the same, dissolve and slow. Click and take me back. Now if I click, now I can drag down and see, click on Learn More and take me to this page. Okay. Click on the arrow and back to the main page. Now, about us take me back. Lead me to the page of about us, arrow, contact. Click the links they're going to be linked in the development phase. Okay, so that's it. This is all our interaction. That we created for our website. It look beautiful, creative, and neat. We could navigate our website very easy and everything is readable. 25. Learn About Gesture And Interactions : Gester and graphic details in design process give us opportunity to create details that surprise our users. In this listen, we are going to talk about different ways to add graphic details and gester to our design proposal and to create also another level of interaction with the users. Let's get started. These additional details or interaction include change the default cursors when we visit the website page and another additional interaction that add a lot of interactivity with the users and that also make the experience much more fun for them. The only limit we have at this point is that gester are usually difficult to implement, as they require advanced technology and a lot of development knowledge. But on the other hand, the graphic details, they are much simpler and they can add a lot of personality to the design that we have made. To give an example of these graphic details, I'm going to show several examples. And this web page example the first thing you see is the black bar at the bottom with the message that animated and repeating itself. And the users see it while visiting the webpage. The second graphic details is the cursor. They changed the cursor that had by default for one little bigger and with a pixelatedtyp. That goes very well with the personality of the page. In addition, the cursor changes as we interact with a different element of the page. Finally, they wanted to add this section, we be able to drag the cards around the page. This detail that feel that gives a lot of personality to the project, and that's the user find it very interesting. Another Also website, they add detail that find very interesting and also add personality to the project. This detail is a mask that move with a mouse where you can see in the back construction of the typographic nodes, and it's relatively easy detail to implement in development. And also the user will find it very fun. Here I want to show you several examples from a different website where throw graphic details and other interaction, make the user experience when browsing the page much more fun. For example, this Feldman Studio website is full of interaction that allow the users to create the experience as they navigate the page. Using action like a click and drag, allow users to create the experience. For example, in this section, the circles in the background react to the mouse movement. Also as a click on the page and adding circles that are integrated into the background. It also create a very interesting experience. The next model, where as I move the mouse, I'm adding light hollows to the bottom of the page. Also, the details, although they are not part of the visual design proposal as such, are element that we can propose and add to the page and that make the end result much more interesting, that what we do stand out much more from other webpage. Another web page I found also full of interesting details and interaction Nathan Tokyo, where each of these models react in a different way to the action that the user does with the mouse. For example, in this model, the letter changes. In the follow, there are very funny animations. In general, each of the model react differently to the user interaction. What makes the experience of visiting the website very interesting and very funny. And without doubt, it's web page that you always still remember. Each of the models can differently as you see here. And some of these are very easy to implement on the website, and they will make what we believe much more fun for the users that also our design proposals stand out from the others. And what happened on this website, where I move the mouse, I generate different images, addition to the image in the center. Follow the movement of the mouse to create a very interesting effect. Also with this website, example right here as a designer portfolio, you're combining animation and other simpler graphic details like the change of the cursor or these changes of the color in the background. We can create a proposal that although it does not have much content, it does stand out visually. In this type of website, the experience is created as the user interact with it, and this is something that we found very interesting. Another so website we can check this one from Daniil Spedzek the centric element to the TV play a big role for the introduction of this website. Every time I choose an option, shows us animated sequence on the TV, and that is make it look so different and so beautiful. And every time I click, it show up the work project on the site. Another example in this website where it has a IFrame globe, you can interact, such as a spaceship going around this globe. And every time equate for you a click u Ball option, while you click on it, you take it to another page, it has that work. This is look very interesting and creative way to check the works. And for this website, the centric element of it is this three D element where you can interact with and scroll to see the work. It looks so simpler, but all these elements give a personality to this website. Here, also the final website I want to check is this website that give you instaga from the people who born in the 90s or in the 80s, where you can see an old product, lays it on a table, and you can interact with. By clicking on each of this project, it gives you the name of it and also showed you animated video about this is a nostalgia alphabet. This is a very creative and a very beautiful experience to have and will provoke a lot of emotion for many people. This website also can create a bond with the users that fell on this error. Also at the bottom, we have this keyboard with the keys clickable. Each time you click on one of these, it takes you to a different social media site like X or Instagram. From general, the experience of this website give a lot of fun and give a lot of happiness to the users. So always stuck with him and may visit a lot of times. Finally, I want to invite you to always be very open to the possibility that allow you to design and develop a web since more and more new technologies are very interesting and also worth studying. And that also will allow us to create a web design and development project in the easiest way, along with other resources such as videos and sound and also artificial intelligence. This limits of what we can achieve are less and less with time with the new technology appear. It open for us more possibilities to make our works more creative and more easier. At this point, we should have finished the design proposal of our website. However, there are processes that are just important as the design to guarantee the success of our product once we finalize the design of our project. 26. Learn About Representation And Feedback: Representation and feedback. Presentation to the client in a design process, it's important to have an assertive communication with our client. Since it will help us also clarify our ideas and thus continue with the project. This listen we will talk about how to present a design proposal to our client. A good relationship with our client, it will allow the project to continue advancing and see the light. Some of the recommendation to present to the client are first, it's important to make our customer understand how design decisions support your objectives. In addition to making them understand the process behind each decision. This is going to help us show the client that all of the elements that we have decided, they are justified for some reason. Second, for each decision point, we will show that we decided according to the brief and the research project. This means that if we decide to take a color, this is, for example, red, we are going to show you where that information came from from that brief. Third, when we come up with a more creative risky design ideas, we can show our client how things bring them closer to companies that are much more innovative and also distance them from their competing. Fourth, so that the customer give yourself an idea of what you are going to receive in the end. What we like to do and it's good practice is to quit prototype of Figna in its desktop and mobile version. This is going to get you very close to what you will receive when the page is already developed. Fifth when arriving at issue of interaction and motion. Something we like to do and it's good practice is to advance or show progress of this animation made in after effect. Or we also use referees from other websites to make our client understand in much clearer way what we want to achieve with the product. Six, at the end of each of the design stage, it's important to receive an approval from the client. This will avoid delays and setbacks in the future. This other recommendation for representing your work for the client, another important part of the communication with our client is being able to receive the feedback from them. Many times, we see that the feedback process is something that limits us to create a design proposal that is interesting and creative. But if we create this process in an organized way and click, it can help us a lot to improve our proposal and to create also something that is more and more interesting. The good feedback process is very important to be able to advance in the project in an organized way. Furthermore, it is essential to create a good relationship with our customers. And for there, it's very important. Feedback is accurate, actionable, and visible to the entire team. It is very important that we do not see the client as a person who kills creativity in the project. On the contrary, we must see as an ally and as part of the design team. I recommend avoiding immediate and variable feedback. Some of the feedback may come from a meeting or a presentation, but it's very important that at the end, we consolidate everything in writing. These are some point that we consider very important. The feedback has to be visible. It's important to have the feedback in writing and a tool that allows the whole team to visualize it. The feedback also has to be clear. It's important to detail in the feedback process, which part of the design we are referring to, for example, to which page, to which section or to which device. Feedback should be also actionable. It's important to avoid ambiguity and point out what should be different and how should be different. And finally, there are many tools that allow us to organize the feedback, such as Notion, Asana, or Trello. The important thing is that they are tools that the whole team can use. At the end of the design and feedback stage with the client, the last step is to make sure that what we created throughout the design stage is reflected in the same way in development. As you saw right here, all the things we're talking about it. It's written very details in this HTML file of UX UI guide, I created myself for you and for this class. We let it in the material source of the class for you to open it and use it. It's so simply as the other HTML files I created, you just double click on it and going to show up in the browser and you can go through it. Now, in the next lesson, we're going to talk about Style Guide. 27. Learn About Style Guide : It's very important to make sure that the design we create, it will be implemented in the final product. A very good tool for these are the style guides. Here we can generate clear rules about the style of web website design, such as typography, color and component among other things, which are very useful to start the development process. Let's see why these style guides are important to our project and how we can create one. In this style guide, the ideal is to be able to organize fonts, colors, and spacing, other component that we use in our website design stage, ensure that the end result of the project is just as we imagine and design it. As a recommendation, it's very important to agree before quitting the style guide with the people who will be in charge of the development of the project. In the valves they are going to use on topics such as typography, color, spacing, and others. In this way, we make sure that if the typography is implemented in pixels, for example, likewise, we will do in the style guide. Likewise, also if the colors are going to be used in hexadecimal in GB, among others. On the Internet, we can find many examples of style guide and design system we use it by the world largest companies. One of the most famous and important is called Material Design by Goog. And on their website, we can find all the finishes and all recommendation for using style and component that they use in their projects. It's very good guide to start and to give us an idea how to build a style guide and later or more to complete a design system. For example, we can see the definition around color. What is the suggested use of colors, combinations, the accent, the main and secondary colors among others. This comprehensive guide included resources such as Figma file, technical documents for implementation in development. As we can see, it's very extensive and very complete guide, since there are many digital projects which are based on material design. We can also find definition, typography, recommendation for use, and also typographical scale. Recommended by Google, base it on their roboto and noto fonts. In addition to the main section of a style, which are color and typography, we can find complete section dedicated to the component that are rejected in the project. For example, one of the most important are the bottle. Here we can find example of use, recommendation, restriction among other. We also have section dedicated to very important components, which include design specification for all sets. Examples also include geogs, menus, navigation bars, and much more technical resources for development. Not all digital projects require such as a comprehensive style guide. My recommendation is to start with the most important styles and components that we know are used throughout the project and grow step by step as the project scales. Another example that I found also very interesting is the IBM's design system, which is called carbon. We can find the different guidelines of the most important design principle that they use to create to all their digital projects. As in material design, there are recommendation and explanation on the use of color in addition to the use of typography, which in the case of ABM is called IBM Plex. The typographical scale, the use of different styles restriction among others. From this design system, it's worth highlighting the motion section, since it reflect very well how we can bring brands values to life as productivity and expression in animation proposal. In addition, it includes another important topics, which is spacing we also define spacing scale pixel based. Finally, we can see that they have complete sections. For many component, for example, forms in each of the fields, progress bars that can be used in a different digital project. This design system is very complete and is very well explained. So I recommend taking a look, understand each of the component that they propose to take it as an example when creating a design system. For our project that is easy to understand, that it can be used also by all people in void. Last example I want to talk about in the milk chimp design system, although it's much simpler than the others that we have just seen, it contains essential to understand how to create a digital project based on the brand. For example, color definition, start with the main brand color, and they add functional color and feedback color to give a success or error message accent color for those moments where we want to attract attention. As we can see the definition of each color contain the essential to be able to use in the project. For example, the higadisimal value inaccessibility definition to know if each color can be used with a black or white text or more natural color. This design system also explain in a very clear way the use of grades so that design and development teams can use them. And for the typography, it's also explained very easily how to use each of the weights and site, both in headlines and paragraph. And also include the most common component like buttons in their different states, tables and more global elements such as navigation. As we can see, this design system is much more concrete than the others we saw. But it's very good guide for design and development team, include what is necessary to be able to create a digital project using the male chimp brand. Also, it's a great tool to save time in the design and development process. In this way, we also make sure that the result of our project, it will be as consistent as possible. To continue, I think it's very important to look about the difference between style guide and design system. Since these terms, they are often used to refer to similar topics. In short, style guide is a basic definition of element, such as typography, color, spacing, and basic components to be used in the development. On the other hand, the design system is used in much more complex and robust projects is usually created when there is a constant process between design and development of adding, editing, and deleting components. There is a lot of information on design system on the Internet. Since it's very relevant topic today, especially in technology company that this project require a constant update and lot of consistency as a project get larger. The component that allow us to use element that will be used on other pages, all variation of the same component to be used in our design project. An example of this, these are all the states that booting can have. And the last tool that I recommend to learn is autoayout which allow you to create a group of different elements and means them in a very easy way. For my project, I usually use these websites for typography. Example, A tipo foundry. This is a very interesting website for typographic weight. We check how the phone's been applied. There are a lot of choices, and also it represented in very beautiful way. The main definition I think very important for delivering the development project. For example, the first thing is make a guide on typography, y define all the styles that going to use for the headlines, paragraph and other text elements that can be used in the design proposal. Each of these definition include the use that you intended to give it to each of the font size and weight. For example, these are big headlines like H one, H two, and H three, which will then define the values of these phones. In this way, the person who's going to develop the project can find the exact definition of the typography for each of these uses that are quitting. This is very useful and saves a lot of time in the development process. Make sure also that the style are going to be implemented just as we are imagining. In the same way we define the styles of the paragraphs and include from size like spacing, the weights of the source among others. And in this part, I wanted to include another text style we use throughout the page, but they do not enter the definition of headline or paragraphs. For example, numbers, links, whether internal or external. I believe that with such a clear definition of font like this will make life so much easier for the person who is going to be in charge of the development of the project. And in addition, you can create consistency in the design for screens such as mobile or a tablet or much larger screens. And this gut also includes some definition of color. Example, the main color of the brand with its respective pigs a decimal code, which makes it much more easier to implement in the development of the project and also the complimentary colors, which we use more than anything in the filters of the peg. Likewise, this section of a color can continue to be complemented, for example, with different tints or shades for each color that we can use in different actions like the Hover on the buttons or in complimentary element such as illustration or icons. Before I keep on, I want to show you some examples of my previous work. In this website example, I use it very simple element to make it special. I played with a typo and created this circle geometric that keep looping. And also the transition I make it so beautiful every time I click on the bottom, it shows the color and take me to a different page. Another A website I created is also simpler, making this bar at the bottom animated in loop, and the user can interact with the spher they're noded to each other. You can see if I click on work. I don't have images right here, but this is how you turn dish between is very simple, but also very creative. This site is very nice because I worked in the interaction of the colors bars right here. Every time I hover, I can interact with these bars. They are the centric element of my website. And then when I choose each of these option, you can see how the transition works. I counted so much on the colors in this website to quit it this way. Now, as you see here to deliver our development project, I feel that his basic definition of color is more than enough. And finally, I also wanted to add, I put a guide for a color right here. You can check. And finally, also, I wanted to add a guide on spacing, where we define the spaces that has to be between all the element on the page. For this spacing guide, I rely on eight pixels that are already explained in the previous lessons and also define the relationship between layout spacing on desktop and mobile. This is why it's much clearer for the developer, how to define this spacing in the style sheet. And we can also continue completing this style guide with component that we use being reused throughout the webpage. For example, buttons links among other. It's a very good start though. To align with the project developer and those guarantee that the style that we are proposing in Figmre are reflected in the same way in the development stage of the project. And also I believe that more important than style guide is to have a very good communication with the people in charge of the development, all style and component of our project. Upon completion of all design stages, the next step is the development of the project. By here, we finish all the website design that we started from the creative brief and research and the strategy to go throughout the wireframing, the design stage, and also the graphic elements, the interaction, the motion design. All these lessons that we go through make you create a good and clean and readable website design for any client, for any project. I hope you learned everything necessary to start your journey. That's all and I hope this very helpful for you. Thank you for taking the class. I 28. Class Project: At the culmination of this course, you will apply every skill and technique you have learned to design a complete user centric website for a concept to interactive prototype. Your challenge is to select any business niche or idea that inspire you, whether it's a local coffee shop, a sustainable fashion brand, a unique tech startup, or even a personal portfolio. You will then create a responsive engaging and highly interactive website that perfectly serves its purpose and target audience. This project isn't just an exercise. It's your opportunity to build a powerful portfolio piece, show in case your ability to tackle a FOUXUI design challenge from start to finish for a real world scenario of your chosen.