Transcripts
1. Going beyond the Logo: an Introduction: Hi everyone. My name is Sofia and I'm art director, graphic, and UI designer. In this class, we will understand that giving a great digital boost to what you design, can be very simple. During my work experience, I realized that designing a strong visual system is not enough to guarantee the uniqueness of an identity, especially in a digital context. I found myself designing cities interactive map, out of a graphic pattern. I created vector illustration to speak to a brand's younger audience. I developed infographics in order to make data easily accessible, and turn them into material for social media poster. Always ensuring the brand's coherence from traditional to digital media. That's why I can't wait to teach you, all the tips you need to design a successful brand identity with a digital-oriented approach. In particular, we will discover, all the secrets to turn a brand's graphic element in a unique and outstanding UI system. We will learn to design a proper icon set to have a correct typographic approach to integrate animations and build guidelines for your colleagues to follow. This class is for a designer who already have some experience with Adobe Illustrator and steel sketch. But we will proceed step by step. Everybody who wants to understand how to design with a digital touch, will find a lot to learn. Ready? Let's go.
2. Our Project: Hi everyone. I'm glad you've chosen to start this journey with me. In this introduction, I will quickly explain what we will achieve together by the end of this class. We can take our short description as a starting point. Indeed, it already summarizes in a concise way, two of the main focuses of our lessons. One is brand identity, meaning in our specific case, the main visual traits defining the subject we will choose for our project. They could be existing brand elements or other visual features we will turn into meaningful digital experiences. The second one is effective UI, meaning the outstanding digital system in which we will transform the brand identity elements we have highlighted in the previous slide. Everything we learn together about identity and UI will eventually gather into a special project you will build and complete lesson by lesson. The project is a great website homepage. Wait, I didn't say a homepage, I said a great homepage because, as we will see, it is no easy task to do it right. To recap what we've said so far, we will start from the brand identity and through an effective UI design, we'll get a great website homepage. Cool. But since learning while having fun is the most important thing, our website would be a common one. I would like you to choose a character you deeply love or you're very interested in, whether he's real, fictional, human, non-human, funny, even romantic, brave, and build his own website homepage. The most important thing to remember when choosing a character is that he must be visually well-defined with a lot of interesting features to be used in order to build this digital presence. Eventually, we will see how these amazing study of the character and generally speaking, what we will learn in this class could easily be considered as a training for what we all should do while dealing with a real-work assignment. Would you like to see a little preview then? I knew it. Well, I could begin revealing. I will choose Henri Matisse as my character. I will study him with the help of a mood board from which I will design colors, typography, and recognizable graphic styles. Later on, I will use these elements to design the UI of my future homepage, defining, for example, it's icon set. Thanks to a brief journey through the wonders of information architecture, user journeys and interactions, we will define step-by-step our wonderful homepage. That's why whether you are a super-skilled graphic designer or a brilliant art director and want to learn how to give a digital boost to the brand identities you design, this is the class for you. Some experience with Adobe Illustrator and XD will be great. But since we will proceed step by step, everybody who is interested in understanding how to design an identity with a digital touch, will find a lot to earn. Ready to start? Here are some small suggestions I'd like to give you before we go through this journey together. Always have fun while experimenting with your design, work on something you really like and want to deeply discover, and never ever give up when something is not working at the beginning. Just in case you'd like to know even more about what we are going to do together, I suggest you to have a look at some of the super interesting articles I put at the very end of the course description. That's all for this entire lesson guys. Get ready with your laptop or notebook, and see you in the next lesson.
3. Online Success: Hi everyone and a very warm welcome to the first lesson of this class. In the following slide, we will begin our journey with some great case studies. Thanks to them it will be a lot easier to understand what we're talking about when we say successful digital identity. In the first part of the lesson, we'll examine four great examples of brand that build a very cohesive identity from physical to digital touch points. While in the second part, we will begin to deal with the first steps of our project. First of all, why should we focus on brand consistency? Well, because in the digital age is very likely to see our identity getting lost inside a universe full of contents, therefore, we must guarantee that our brands keeps its unicity and strength in every visual expression. All of these expressions should also be very carefully considered because today, we need to give values to our customers, not only visual outputs. This values can be conveyed thanks to all the features we build around our brand identity. In the third place, we should not forget that a brand today is also social, connected, and faster. Every brand expression should mirror this never-ending development, but at the same time be consistent with each other. Why shouldn't we begin our journey from the case studies I selected for you? From visual consistency to animations, from social media to brand guidelines, I will guide you to discover the keys of their success. The first brand I'd love to talk to you about is AESOP. I personally love it and really think that as a case study, it can give you a great amount of inspiration. Because when you look at their packaging or you go inside one of their beautiful designer stores, you have this same feeling of elegance and beauty that you perceive when you scroll their Instagram feed, or simply when you look at their logo. As we can assume from their packaging, for example, their main visual features are very essential and simple. Designers at the AESOP are really super good in always mixing them in a super balanced and elegant way. It's also easy to see how they managed to translate all the graphic elements we can find in AESOP physical universe into the digital one. They cared also about finding the best digital counterpart of their institutional typography. Here is a short journey through their website. As you can see everything says AESOP, from the color matching to the smooth transitions, decorated product images, and the clean typography. Here is another example. Let's completely change perspective and talk about a giant within the digital universe. Google, who better than them could give us some good inspiration? Of course, I know that Google already is a digital product, but it's very interesting to see how people at Google are able to diversify and expand the brand, curating even the smallest details. As you can see, their identities plays around an iconic topography in four very distinctive colors. Setting those as a starting point and with a taste for use of geometric shapes and animations they manage to make their identity alive. Here you can find a brief recap of what we said before. Four colors, essential graphic lines. If we got deeper exploring these, we'll discover that thanks to an incredibly skilled use of animations and transitions, they really make the shapes talk in such a way that is perfectly understandable from a wide range of users. Using this declination of their digital identity, they go beyond words and languages. Another case history I'd love to show you is Kinfolk. Kinfolk is worldwide recognized as one of the most refined magazines you can find in bookshops. It mainly deals with lifestyle, home, and culture. These days reflects the word of people featured inside. What really strikes at a first glance is the incredibly tasteful and balancing use of typography, editorial grid, and beautiful images, which will amaze you page after page with always different and smart solutions. If we try to summarize, the main visual features of Kinfolk editorial layout, we absolutely must mention the grid, the use of blank spaces, and elegant typography pairings. These same features are what define and make their digital identity so highly unique and recognizable. The grid is present and helps to distinguish between the main and secondary launches. The use of black and white and the typographical experiments are used to convey the same elegance and balance you can find on paper. The last example I'd love to share with you, is Monki. Monki is a relatively new brand from the H&M group with a target mainly consisted of young woman who wanted to express themself and their values through fashion. What strikes the most about this brand is a strong community that quickly grew around it. Here is as small and not exhaustive overview of their Instagram account. As you can see the use of a diverse yet consistent color palette with parcels and feminine tones together with cohesive typography experiments works really well. Is beautiful to see in particular, what can be done with just a one font, if we decide to creatively decline it, but without distorting it. In the end, what's really interesting about Monki is that it communicates boldness, self-esteem, and fun with a cohesive and impactful approach, both from tone of voice and art direction points of view. Now that we've seen a lot of great examples of digital identities, are you ready to set the basis of your own project? Time has come to choose our character, the absolute protagonists of our design. Wait, wait, wait, don't panic. I know what it means to start from a blank slate. That's why in the following slides, I'm going to review some advices which I'm sure will be helpful. When choosing your character remember what we said in the last video. It could really be anyone that inspire you. It could be real, fictional, human on human, funny, evil whoever you'd like to tell a story about. It will be even simple if you follow these rules. One, choose someone you really admire and want to deeply explore, you will become his number one fan. Two, your results will be even more stunning if your character has some recognizable features. Three, have fun, and let your imagination run wild. As I was mentioning in the previous video, my choice will be Henri Matisse for more than one reason. When I discovered his cutouts while visiting an exhibition, I fell in love with their organic forms, demographic compositions, and their color explosions. I think they have all the features to be my inspiration to build Matisse website. Cool. Well, It's your turn now. Now that you have chosen your character, I'll guide you through the creation of his moodboard. A moodboard is a super useful tool that gathers in a single place all the visual inspiration that describe the direction of your project. In our case, it will collect the most iconic images representing our character. We're talking about a very useful tool that will help you in keeping a visual consistency while dealing with the different step of your project, but will also help your clients, allowing them to clearly understand what's going on in your mind. To build the perfect moodboard always remember that you don't need lots of images to express your idea. A few but well chosen are enough. You also don't necessarily have to stick to one visual universe. Inspiration can come from a lot of different sources and can be conveyed through different media. After a conspicuous collection of images, I decided that these would have helped me in building Matisse website identity. Why? Well, two of them belonged to his own body of work. It's important to have at least some original references to avoid going too far from your starting point. But these images also tell a lot about colors, color matching, and organic shapes. These other two images are instead additional references that will help me to build my color palette and define my graphic style. I want it to be soft, organic and handmade. Are you ready? It's time to start collecting images and select the ones that best represent your character style. Once you get them, put them in a moodboard and stay tuned for the next lesson. See you in the next chapter, guys. Thanks you for watching this.
4. Find Your Style: Hi everyone, welcome to our third lesson. Together we will understand how to define the visual characteristic of our project, starting from the mood board we have defined during the second lesson. As you can see in the next slides, we will learn a lot of stuff in order to have all the basis to build a consistent visual identity. But before we start, let me remind you once again that we are focusing mainly on a digital landscape. What do we need in order to build our digital identity considering a visual perspective? To discover it we must first analyze our brand values. Values are the keywords to communicate our project, and will help us designing in a more effective way. To define values we need to study and get very familiar with our brand or in our specific case with our character. The first step we should take to find the word to represent our project is analyzing our mood board. By the way do you remember the mood board we prepared during last lesson? We collected the representative image used to summarize our characters work. I choose Matisse. As far as Matisse is concerned first of all we can notice from our mood board that his brushstroke is usually not precise especially his cutouts. In the second place, we can assume that Matisse work is characterized by a very minimal and simple way of representing things. Colors are plain and lines are reduced to the essential. We can also say that generally speaking we're looking at a very elegant work, but without the impression of it being too complex and unreachable. Let's call it an unpretentious style. At the end of our analysis we have therefore collected these three key points, imperfect, simple and essential, and unpretentious. These are the values we will use to communicate our project. Now that we have our key points, we will use them as a starting point to build our visual language. To make this happen we will need colors, typography, and an outstanding graphic style. Colors are the basis of our design, we need them to reinforce quality, to communicate actions, and give information. While choosing colors, remember that less is more, you will obtain better results if your color palette sticks to maximum three primary colors. The more color you use the more complicated it will be to manage your design. If it's too difficult to choose you can always use a color scheme, 60 percent for your dominant hue, 30 percent for the secondary color, and 10 percent has to be used just for the accent colors. Always remember to pay attention to the visual culture in which you are working in. For example, in India orange carries a series of meaning you shouldn't ignore. Before we discover how to choose the colors for our project, I have some other practical recommendation for you. In order to simplify color selection, try to start from what you have such as the material you have already collected. It's also important to always keep in mind the audience you are working for, and to avoid competitor's color, it will help you to stand out from the crowd. Coming back to our beloved Matisse, if these are the images we have already selected, these could be the colors to consider for our initial pallet. Just to be clear, remember that if you are not 100 percent sure of something you can change your mind at every step of the project. We are following the specific path because it helps us to define a process in designing our website, but feel always free to experiment and change ideas. Besides the crazy good colors we drew from the mood board, it's essential to also include grays in our design especially because we are working for the digital world. Usually it's better to choose at least two shades of gray, one dark and one light. To pick them you can follow an easy method developed by smashing editorial, in this slide you can find the link to see the method. Here we are with our final color palette not so difficult, right? Now we are ready to go to the second chapter of our lesson, typography. Web design is 95 percent typography as Oliver Reichenstein said. Typography is essential to guarantee readability and accessibility, and to give your website a correct graphic balance. As we said regarding colors, using more than three typefaces can make your app or website look busy and unstructured. It's better to limit the number of font families, two is plenty, one is often sufficient. To create rhythm when selecting typography start with two very different fonts, because contrast and differences create balance. Finally, be aware to choose the proper font size with any method you prefer but remember less than 14 point dimensions could become difficult to read. As a rule remember that body text is the most common element in a product, this is what all your users will see and experience. As a result the look and feel of your body texts will have the greatest impact on the quality of your design. As we did with colors, let's start from the references we have found. Be sure to select font the with distinguishable letters to guarantee legibility. It's not unusual in fact to find typefaces with confusing letter forms specifically with I and L. If we have a look to the old exhibitions poster of Matisse we can direct our font research. We can, for example, look for handwriting fonts similar to Matisse's signature or we can select Serif fonts to communicate the natural elegance of his painting. To create contrast it will be great if we select both are Sans-serif and a Serif font. For example, I found these amazing free font on line, it could be a good choice since it has two different weights which change a lot in terms of style. The light version remind me of Art Nouveau and Liberty details, while the regular one is bolder and more readable. Now that we have colors and typography, it's time to think about our graphic style which will help us to better structure the whole art direction of the project. At this moment it is not necessary to define all the styles aspect, but it could be helpful to delineate at least the main concept. Graphics style is a key point of a design because it helps to communicate the brand personality. Do you remember the three values we selected at the beginning of the lesson, every graphic style choice will announce and underline them. That's why when you build a brand you will need to define a lot of different aspect, from font to signs, buttons, and down to images. Everything need to be beautiful and consistent. Finding the right graphic style is something that will help you during all the process of art direction and design. It's a first visual exploration to start picturing the direction that your project will follow. Once again to define your style starts from what you have and don't limit yourself. For example, you can think to develop particular patterns or specific graphic elements to help you imagine the future steps of your project. But it's always important to not overdo at the beginning, stay simple. Remember that you have to think for digital where everything's need to be ready to be transformed. If we again have a look to what we have collected, we can isolate single feature and start to imagine shapes and line that can be applied to our design. For instance, starting from Matisse cutouts, we can isolate flat organic shapes to be used inside the project and some undefined lines. We can also think about a photographic size that leads well with the choices we previously made. Well, we will arrive at the end of our third lesson, not so difficult? Now it's time for you to start practicing what you have learned so far, I can't wait to see your results. Stay tuned and see you at our next lesson.
5. Bring It Online: Hi everyone and welcome to our lesson Number 4. Get ready and fasten your seat belt. This one will be very exciting. We're finally jumping into the world of UI. As we always do, in order to follow a step-by-step process, the first part of the lesson will focus on a basic introduction about the actual meaning of UI and on some very good case studies. The second part instead, will be entirely dedicated to the development of our project. As I mentioned before, understanding what the term UI really means is one of the main goals of today's lesson. We all know how it quickly became a very familiar term, but let's be sure to use it properly every time we find ourselves talking about it. Using this term correctly is essential since UI is the way in which as designers, we make sure we are meeting our client's needs and at the same time, ensure an easy and intuitive fruition of the digital products we design. Last but not least, in this lesson, I'd like you to understand that even if we design within some boundaries and rules, this doesn't mean our results will be worse or less creative. Anytime we find a good way to merge best practices and branding needs, that's when we create real value. Let's start from a very quick recap of what we did together during the third lesson, which was the style of our digital identity in terms of colors, typography, and graphic elements. We also collected some photographic references. If you like, you can collect all the materials in a board and keep it handy during this lesson. We really have everything we need to start, so let's go discover UI. What exactly is UI and why is it so important to build a digital identity? User interface design is the process of making digital interfaces with a focus on looks or style. Designer's aim to create designs user will find easy to use and pleasurable. It's exactly what we need. To make things even clearer, here you can see a simple graphic from which you can understand the difference between UI and UX design. These terms are often confused, but as you can see, the difference is quite visible. UI within UX is what we need to specifically define the resulting look and feel of our design. If we would like to be even more specific, there is also smaller part of UI called, the graphic user interface, which relates to everything regarding visual perception. Talking with a more practical approach, we could say that UI can actually involve a lot of those elements. We will need to build a website. But in order not to overwhelm you with too many information, I'll stick to those three. Both because they are the most used and well known ones and because they allow us to have fun while thinking about how to design them. However, we could set some golden rules before starting to deeply examine buttons, icons, and shapes. Remember to be cohesive in what you design. If you think a particular behavior fits your purpose, then stick to it. The user will thank you because he will be able to find anything he needs without someone explaining where to look for it. Let's start our analysis from buttons. The first thing you need to know is that they must differ from other elements in page, so they can be easily noticed, remembered and used. In many website, whether they are commercial, institutional or informative ones, buttons are for different reasons they user's point of destination. They symbolize the achievement of the user's task. That's why they must be recognizable, easy to find and out explanatory. In my opinion, a brand that actually use buttons in the clearest way possible is Spotify. But before showing you the next slide, I'd love to do an experiment together. Try to think at your Spotify Dashboard. What is the first thing that comes up to your mind? One recalls anyone's attention at a first glance is obviously the difference between the dark background and the green buttons. Is there a best way to make things get noticed? Maybe it's not always that easy to be so explicit with buttons. It really depends on the elements of our digital identity. In other cases, icons, can help us. Icons are super important vehicle for your digital identity. They help you build the imaginary around your brand. You can use them to reinforce its visual characteristic and to support the users while they navigate your website. Last but not least, remember they are also an incredible tool that allows you to go beyond cultural barriers and speak to anyone. Here we can see a good example of identity reinforcement through icons. Uber state that the design of their icons is inspired by transportation. Here is a quick video showing the grid in which people at Uber designed their wall icon system. As we will see in the second part of this lesson, using a grid is a great way to ensure consistency between the graphic compositions of the different icons. This is a quick overview of their icon system. As you can see, they can immediately be recognized as part of the same visual universe. They have consistent traits, balanced details, and above all, there are immediate catchy and a real guide for the user. You won't misunderstand them by any chance. The third and final aspect I'd love to analyze with you, is one that maybe could be hidden at a first glance, but that will reveal its strategic importance when you deeply analyze a well-made design. We are talking about shapes. Shapes are very interesting to consider, not only from a consistency perspective, but also because they have the power to convey a real meaning in terms of communication and expression. Like icons, shapes can talk. Here is an example of an app: Shrine, designed following a cohesive use of shapes. We can see how angles are the basis of many UI elements within the app. Starting from icons to buttons, edges, and other small gems you can find scattered all over the layout. Also Spotify can provide a good case study when it comes to shapes. People at Spotify took some visual characteristic from circular type phase as our starting point. I think this is a super smart approach to ensure a great UI result. Here we can see how they took recurring graphic patterns for letters and leaf, and translated them in the design of the wall icon system. Same edges, same angles, same overall look and feel. After all these great examples, I think we are really inspired. What about starting with the UI basis of our project? In this section, I will show you how I came up with my results in terms of icons, buttons and shapes. I'd love you to take this consideration as is and generally guides for your own project, even if the overall look and feel you choose is very different from mine. Let's start from the icons; to begin building the system, let's set up a 24 per 24 pixel grid. This will be your design playground. Within the grid, let's define a safe area of 20 per 20 pixel. This is the area in which you're main designs will take form. I only recommend to integrate your grid with other elements. I'm talking about guides, vertical, horizontal and diagonal ones, and other geometric shapes which create useful interaction that can become distinctive traits for your icons. Here is my first icon. Following the grid I used round shape as main edge. I design with a 45 degrees angle and try, generally speaking, to stick to the rules I set up in the previous stages. As for the graphic look and feel, I choose a thick stroke and soft lines that, as we will see, will match with my graphic shapes. Small hint, as you can see, the look and feel and consequentially, what icons communicate, can be very different with just a slight switch of some parameter, like for example, stroke. That's why it's so important to carefully choose your icon style. To complete the design, I choose from my color palette, the right tones for the different parts of my icon and as a final touch to embrace and highlight even more the values I recognize the Matisse work. Do you remember lesson three? I decided to give a fuzzy twist to the colored area of my design using Adobe Illustrator's fisheye effect. Here, you can see some other examples from my icon system. To match with the style I've chosen for my icons, I go with some rounded corners and overall soft look and feel, also for buttons. In Adobe XD, I selected out 35 degrees radius corner for all the different buttons. As for the shapes to enhance even more the use of softer rounded elements, I decided to make this graphic style a defining pattern from my website homepage, making it visible in a lot of different modules along the page. For example, here you can see how I decided to integrate my shapes in the calendar module. A nice and easy trick, but very useful to reinforce my digital identity. Here we are guys, at the end of this very intense lesson. I can't wait to see your results uploaded and to meet you in the next chapter.
6. Into The Flow: Hi everyone. Welcome to our new lesson. In the following slides, we will talk about how to identify user behaviors in order to build a perfect user journey. We will discover what we mean by human centered design and how it works. We will then define our target stereotype, which we will call our persona. To define at the end of our lesson our website architecture. We can consider the website structure as its skeleton and we need to follow a step by step process to define it. In this lesson, we will talk about three of those necessary steps. First, defining the objectives of our website in order to define what we are doing and why. Second, establish a target which will identify who we are designing for. Third, understanding the journey, the path the user will do to reach his personal objectives that we did in our website. First of all, let's start from the definition of human centered design. Human centered design is the practice that puts the user at the center of the design process as its main character, always considering his needs, hidden or not, his desires, aims, and issues. As I said before, to apply human centered design, we need to know our user and therefore to study him. In order to successfully do this, we need the so called user research, which could be made following a quantitative or a qualitative approach. The quantitative approach is based on numbers, usually people read reports, collect and analyze data. The qualitative approach, on the contrary, is based on fewer users, but it usually goes deeper thanks to specific interview and direct observation and with the help of workshops and meetings. Nevertheless, sometimes it may happen to find ourself without enough time or resources to find real people to interview. In those cases, to guarantee the results of our research, we can make an exercise of imagination. We can start by defining a series of questions to better know who we are designing for and which is the final goal of our website. At the beginning, it's better to investigate different users in order to diversify the answers and to give a larger spectrum of possible outputs. For example, for Matisse website, I can imagine that the user could be a collector, a modern art critic, a student, or simply an art lover. Secondly, we can ask why these people are interested on modern art. Giving us an answer, all of them will carry a different perspective. To make an example, the collector will approach the contemporary art market to make an economic investment, while the student has to go deeper in the subject because of educational needs. Following this method, we can continue to ask questions and try to answer them to better know our users. For example, we can ask where they hear about Matisse, or what they are looking for it and especially why they need to discover Matisse. This question is particularly important to understand to what extent Matisse is different from other painters in our user size. For the next exercise, we will choose one of the characters that answered our questions and we'll try to build an actual world around him or her, therefore, we will transform a generic user into a real person armed with its needs and objectives, we will build a persona out of him. To define my persona, I choose the critic. I imagine to give her a face and age to make her talk and I added some quotes to her profile. To better understand her, I define her needs and her rational and emotional goals. She has to write some articles for a local newspaper, but she dreams to discover a new art Avanguardia and being remembered as the best critic ever. Now that we have clearly defined our persona, we can start creating your customer journey, leading her through the path she will follow inside the website to reach the information she needs and satisfy her final goals. To create a correct customer journey, we can imagine to divide a timeline in different moments and fix some pain points inside it. Pain points are difficult moments for the user where we, as designers can act in order to solve problems. That's essentially the reason why starting from a user journey, we will be able to get a complete list of requirements for our website. This is an example of how to structure a customer journey. As you can see each row represents a different subject related to the user that needs to be filled in. For example, I selected for Camila, five different moments during her journey. In each one, I tried to imagine a possible thoughts and emotions and I used emojis to have a more visually definite reaction. As you can see in the moment in which she reads articles and publication, our emoji express confusion, this could be considered at a pain point and becomes therefore a great opportunity for us to think about a way to make her journey easier. When we will design our website, we will care about giving information in keywords in the easiest and clearest way possible. To come to a conclusion with our user research, we have a last exercise to do, it's called the only-ness statement. Only-ness is by far the most powerful test to define a strategic position. Brands need strong positioning because customer have preferences, if you don't stand out, you lose them. To win the positioning game, you have to answer one simple question, what makes you the only one? For our Matisse website, the only-ness statement will sound like this, "Matisse website will be the only online portfolio suggests and relates to Matisse topics for curators who want to write something smart." At this point of the lesson, we have known enough about our final user and goals, it's time to structure experience our website. The discipline, the structure, it's called the interaction design. Alongside, we will also need another key technique, which is called the information architecture. Interaction designs try to define users possible thoughts and behaviors, as well as the way the system will reply to them. More specifically, interaction design uses information architecture to represent and visualize subdivisions, groups, and relationships that exist within the website system. Information architecture also known as IA, defines the skeleton of the website showing us the different section which divide it. In certain cases where we face a more complex system, it helps us to develop a user flows. For flows, we mean the deliverables visualizing the complete path that users follow across the whole solution. There are different types of information architecture, the most common are the hierarchical system, the sequential one, and the use of a matrix. Let's try to imagine, for example, the IA of our website. These could follow a sequential organization, where users shift between different topics on the same level. On the contrary, this one could be the visualization of the same contents in a hierarchical diagram where users can go step by step through the contents to accomplish their tasks. Are you ready to build the basis of your website? Complete the exercise we went through in this lesson and be ready for the ones to come, wait for you in the next chapter.
7. Let's Wireframe: Hello everybody, welcome to our sixth lesson. Time has come to put what we have learned so far into practice. So let's wire frame. In the following slides, we will proceed step-by-step as a first step, but we will set our Matisse artboard. After that, we will see how to define the modules that will feed your homepage and out to place them inside a wireframe. While doing so, we always must remember our final goal to design the home page for the personal websites of our character. That's the reason why during this lesson, we will keep an eye both on the design side and on the content one. We will see how they are deeply linked to each other. First of all, we need to choose on which dimensions we want to design our home page. Of course, being either a website, it can be seen from different devices and it must work for each of them. But in my case, for showcasing reasons, I will design for a desktop screen. Here you can see the most common ones are, which is the bigger resolution for this class. Coming to mobile sites, you will probably have heard about the mobile first expression. But what does it mean? Today, most of the people enjoy website directly from their phones. Many designers prefer to sketch first for mobile rather than for desktop screens and here you can see the resolution representing the best-selling and most popular devices. In other cases and for some particular experiences, like editorial or interactive ones. As for example, a virtual reality happen tablet size could be more suitable to design, I will suggest to download the trial version of Xd, a software licensed by Adobe that has been released it to our designers to easily create their layouts. Also sketch is a great tool when it comes to designer layout in a quick and super precise way. The sketch trial is free for the first month. After that, you can pay $99 for your personal license. If you don't have time to learn a new program, also, Adobe Illustrator or Photoshop could be suitable tools to design. But I warmly suggests you to learn in your sketch because they are really intuitive and extremely helpful when it comes to digital. So guys, let's go with our class project. Let's build a wireframe. In short, we could say that the wireframe is the skeleton of our homepage that collects and organize all the elements of our layout. The first things to do in order to build it, is to go back to our information architecture and keep it in mind while designing. For example, if we think about Matisse and the final goal of his website, which is showing his work and these are poetry. Probably we will use big images, a lot of graphic signs and big texts. First of all, the space on the top of the page will house the header. The other, is an essential element because it allows the user to reach every section of the website anytime they i could be variable, are generally designed it the maximum 100 pixel i for a desktop resolution. The first must-have element inside the other is the log of the brand, which usually redirect to the homepage itself. In my case, I will place Matisse signature as a logo. Another necessary element, of course, is the menu or rather all the labels linking to the different sections of our website. In this moment, in particular, in which social media plays such an important role in communication. Let me suggest to place inside there, there also some social icons. They need to be very visible on your website. Placing them inside there, there could be a valid option. In my case, these icons will be directly linked with the social network of Matisse. Above the other we could also provides some space for a commercial slide in which to inform the user, for example, about news or upcoming heavens. Usually the space is using commercial website to inform customers about delivery services or special offers. Okay, now it's time to think about the first big visible area of our website. Since this one will be the first content your user will see landing on the website, it must be bold. Invite the user to continue scrolling and discovering other contents. For this reason there, you usually can find videos, big images, or a carousel of images. This is the moment to sell. As for the copy, think about a remarkable title. Every member to always add a call to action. If the user doesn't scroll, it's because he wants to click. In the second scroll, we will present the character, in my case, Matisse. Don't overdo the words. The central is that people don't like to read a few words, but well-thought would be enough for the user to quickly understand what we're talking about. In this section, I also decided to save some space for attack cloud. It could be useful if you want to give the user the chance to immediately reach what is looking for and at the same time, to understand in a glance what Matisse art is about. After being attractive and informative with our first section, it's time to display our actual content with a series of modules arranged the inner Chu column screen. I will show some remarkable example of Matisse work. As you can see, each module is made up of an image, a text with project title and short description and some texts. These modules potentially are endlessly replicable. But let me suggest again not to overdo people's attention is very fleeting. The good thing is that if the user has been scrolling your website until this point of the page, it will likely continue until the end and if he scrolls until the end, he will probably want to visit the next Matisse exhibition. That's why placing their calendar module at this point of the page, could be a smart choice at the very end of the website, try not to lose your user attention. I suggest to give him a quick overview from the social media universe together with a recap of the other, so it can continue discovering other sections of your website. Don't forget to save space in the footer for older legals infos, and now it's time to fill this wireframe. This means that in the following slides, we will see how to integrate contents according to the decisions we have already to key in terms of graphic style and look and feel. If you remember, during the four lesson, we collected all our visual elements in a board. What you see here, it's mine, related to Matisse. I have two different phones. In terms of size and style a great color palette with two different grays, irregular shapes and some images with natural light and the romantic atmosphere and yeah, this is my fill the page. As for the adder, I decided to go with a transparent solution because I prefer to see my wonderful image in full screen. I chose this particular picture to express the power of Matisse art, thanks to its color and composition and because of its complexity, I need titles, texts, and call-to-action to clearly stand out. That's why I choose white for texts and dark gray for buttons. As you may remember, my buttons have rounded corners to announce a Matisse playfulness. This is my second scroll where the user can find an introduction about Matisse. For visual reasons, I decided to give more space to detect cloud. As you can see behind all the contents along the page, I decided to place the irregular shapes characterizing Mattise style, as for the work highlights, I choose to use different kinds of photography to balance the storytelling. For example, for the stained glass windows, I selected a photograph, an interior y for the lithograph, I directly use an authors picture. For detail from the sheaf. Just to make another example. I use a photograph which was taken during an exhibition. As you can see, I choose to use the icons I designed, the Aztecs. Those same icons that you can find in the [inaudible] stripe just below the other. In order not to lose the link with the previous sections, I decided to put my graphic shapes also inside the exhibitions calendar module. In the last module, we find the Matisse social feeds in which there could be a mix of photographs, exhibitions and artworks and at the bottom of the page, there is the footer with a dark gray background to differentiate it from the homepage color explosion. In my case, I decided to highlight the newsletter subscription module. The more followers we are able to collect, the more our message will be spread worldwide and that's all for this lesson, guys. What do you think? Are you ready to build your character's homepage? I can't wait to see your artworks. Remember to leave some comments if you like this lesson or if you just have questions, don't hesitate to contact me and to upload your work. See you in the next chapter.
8. Animation: Hi guys, here we are. This is our lesson number 7 and since we are approaching the end of the class, it's time to add some finishing touches to the beautiful homepage we have designed. Yes, we are going to talk about animations and how they will give a boost to the UI elements on our page. Maybe at the end, it will be something really simple, but believe me, it will be enough to improve your user experience. This lesson is also to show and prove that the designers work doesn't end with the layout. Our mission is ensuring that the brand is perceived also for these small but significant details. All of them added together, can be an additional way to reach your audience. But these details are also necessary for users since they engage a dialogue with them and make their digital experience clear and easy, but not unusually or so funny and rewarding. Of course, even if this one could be an exciting part of the work, it's important not to overwhelm the user. So don't add tons of effect or super complicated animations. Always remember that less is more. Let's start from the basis. In the following slides, we will see some essential definitions of micro interaction and action feedbacks, learning how they will substantially work. To be clear from the beginning, in this diagram, we find a definition of the difference between them. Micro interactions are triggered by an action or by an alteration in the system's state. Action feedback are a response to this trigger, which are visually communicated to the user, thus generating a virtual cycle. Furthermore, feedback are necessary to keep users informed, letting them be sure about what is happening in a specific moment during an action. Even if you don't realize it, mostly every digital product is filled in with micro interactions. If you don't notice them while using an app, well, it could be mean they are good ones. Before we go on, here is a brief recap of recommendation and best practices we mentioned in the previous slides. While thinking about animations, remember, it's very important to create habits so user can easily get used to the digital experience they're living. Don't overdo redundance animations, but make sure users communicate with the interface and understand it. Well, after this recommendation, it's now time to see some great examples of interactions, animation, and feedbacks. I hope they will make you understand how even the smallest twist could make a great difference in terms of digital brand success. Here we are again. This is the list we saw in lesson 4. When we first met our UI elements, as you can imagine, each of them could have its own animated effect which can improve its performance and make it clear to the user. But of course, since we have little time, we'll go quickly through an overview. Starting from the simplest and most common animation you can find to some complex ones that could help the user to perceive your brand in all its entirety. That's why I choose an example to show you, which are most related to the elements we have already designed during our class. I'm sure they will explain you how this animation can actually contribute to build your digital identity, giving additional meanings to your designs. Let's start from the icons. In lesson number 4, we saw how changing some parameters while designing, we can make also change the values they communicate. The same can be said for an animations as we can design them according to our brand positioning. For example, we can perceive at a first glance the difference between the icons at the top and those at the bottom of this page. While the first one are clear cut, the latter are soft and fluid. Here, for sure, the ones on the top, give an immediate feeling of playfulness, while the bottom one's seems to take a run before fully expressing themselves once they become filled, giving a more dynamic perception. Yeah, we can say quite the same also for buttons. In this slide, for example, while the outline one is very reassuring, guiding the user until the action is done, the second one is direct and informative also with the help of the green color at the end. Because yes, feedback can also be given by colors. Here are two interesting examples in which interaction are visually connected to what they actually mean in a literal way, communicating their values with shapes and colors. As for text fields, we can say that there are different ways in which we can boost them giving, for example, a more formal or informal twist to the action of filling a simple text input. But as we were saying before, not only micro interactions can be applied to provide users a more accurate perception of our brand. Some animations can be directly related to our digital identity, such as the ones regarding the logo and other page elements. For example, let's talk about the logo. We all consider it the most obvious expression of our brand. But do we ever think about animating it since we are acting on a digital environment? Here are two different logo animations. As we have seen for icons and buttons also the way in which we animate the logo can express the values of our brand. In this cases above, while Mailchimp is more immediate and compacted, Ubers' logo gets its way being filled line after line. There are really a lot of other things we can do when talking about animations for UI elements. Look at the first view port of Hello Mondays website for example. All in the speech portion, we can see besides the main illustration, the text animation and the opening of the sidebar with the following interaction on over on the menu voices. As you can see, everything is very smooth and softer and sticks to a black and white color palette. Here is another example showing how simplicity can also deliver a lot of information. Just have a look to the menu animation. When you order on a label, you can immediately have a preview of what you will see in that section, which is very helpful to get the user right where he wants to go. Now, it's our turn. I know that when we talk about animations not everybody feels comfortable. They always seem hard to do. Well, let's get deep on that to see what we can do together. First of all, remember that a great part of the animation you see on a website are made directly with code modifying parameters with CSS. This means our role as designers is that of providing developers with a clear idea of what we want to do. We can give them direct links to some online references we like or prototype something. For this second option, we have different tools we can use. Adobe After Effect is great since it allows us to be very precise in providing a mock up of what we would like to see online. For the simplest animations are, for example, gifs. We can also use Adobe Photoshop. But, to cover a wide range of animations, saving a lot of time, principle will be the best. Not that immediate, but surely worth the effort. I used Adobe After Effect to create two examples of animation I'd love to see on my Matisse website. The first one is the call to actions over effect. To record the playfulness and imprecise lines, we recognize that as iconic of Matisse style, I decided to use a soft transition to make the button answer to my action. I also wanted to animate the icons. We see inside the tech buttons for these elements, I choose to emphasize the unprecise color field, giving it as moved movement when I go on over the buttons. What about the elements on your homepage? Which one and how do you want to animate them? Don't forget to upload your results on the comments. Then here we are guys. This is the end of this lesson. Now come with me to the next one. I am giving you some overall best practices to complete our project.
9. Best Practices: Hello, everybody. Welcome to this new lesson. Since our work is done at this point, in the following slides, I'm giving you some helpful advice for the overall management of the project. As you can see, they will basically be a recap of good practices. To be precise, we will understand what design with pixel perfection means, and how to build graphing and photographic guidelines. Each one of these points are necessary to guarantee consistency within your website. At this stage of the class we are talking about the next steps which will allow you or other designers in your team to carry on the great work you did, and to design new pages of the same website. That's why we need rules to follow together with clear graphic and photographic guidelines. As a matter of fact, looking of what we have done, it's easy to understand that we are likely just at the beginning of our work. We need to complete our website, designing the remaining pages which have to be consistent with the home page and part of the same system. For sure, the first rule we need to follow is pixel perfection. This is not directly related to consistency, but it will allow us to work with solid design basis and avoid future problems. As you may already know, a pixel is the smallest controllable element of a picture represented on the screen with 1,920 pixel by 1,080 pixel display. For example, we can have 1,080 columns and 1,920 rows of pixels. Therefore, the total number of pixel will be 2,073,600 pixels on screen. Following a pixel perfect method means having sharper exports and more precise artworks. Pixel behave like a super tiny grid and we have to stick to this grid to make sure our design will be perfect. What we need to do to be pixel perfect is, first of all, to keep an eye on numbers. Our outer dimension and the ones of all the elements we will design on the page need to be full without comas. Icons need to be designed inside a precise pixel grid too and don't overlap at the borders. For example, having a look back to our icons, we can see that we have already designed inside the grid. We set some geometry guides and use them to draw our icons, respecting limits and directions. Our filling method overlaps the grid, but this can be considered a graphic site choice, and it doesn't interfere with the method we follow to design our icons. Now, that we know how to ensure a great designer courtesy, let's understand how to merge into a graphic style guide all the rules we need to design our website. If you look at companies like Dropbox, Google, and Spotify, you will notice that each one of them has its own unique aesthetic. Across all their products, there is a strong sense of consistency and uniformity. This happens also because they have clear guidelines to respect, but what exactly is a style guide? We can think of it as a document summing up the entire design system and acting as a guide, both for the design of new elements and for the following implementation. A style guide as a whole can have several sections and explore a great number of topics, but for this class purpose, I will make just some examples related to the elements we have already focused on. Clearly, the more you go into details, the more consistent your design will be. Let's talk for example, about colors. In this style guide, we can collect all the decisions we previously made in terms of palette, and define for which elements designers should use one specific color. For example, coat actions will always be shown in their dark gray for the default state. Has for typography, we can define a list of sizes to be used through all the pages. For example, each big title will be on Panamera Regular 120 point. The body instead will always be in Panamera Light 36 point. To make things easier there are some codes we can use to refer to particular titles usage. For example, H1 is usually linked to primary titles, H2 is four secondary ones, and so on. For buttons, we need to specify dimensions and margins, but we also have to define how they change accordingly to their status. We can, for example, associate a different color when the user click on it and define which one communicates that the button can be clicked. It can also be very useful to have some interaction example within the style guide. In this way, we can ensure that foreign animations will be designed accordingly to this style we have defined for the first one. As I said before, this is just a taste of what a style guide can be, but from these examples, we can gain some useful golden rules. First of all, remember that the guide is an output that comes after the design process. Summarizing it, therefore, design until you are satisfied, then standardize it. It could be great if you also include some design principles that inspired you during the work process, together with some new studies in order to let other designers and developers understand when to use specific elements. Now it's time to go into the last chapter of this lesson, photographic guidelines. Photographic guidelines define which kind of images you and other designers should use it to correctly convey your brand's voice and identity. Uber, for example, dedicates a lot of space to photography inside it's spread guidelines, going very deep in detail and considering different categories. As you can see, people at Uber divide photography in sub chapters which are related to five main topics, interactions, compositions, casting, lighting, color, and locations. Each sub chapter include best practices and recommendations for that specific topic. From Uber's case study we can learn a lot. First of all, always keep your brand at the center. When choosing images, ask yourself, Following my brands principles, which images will be good ones for its communication? Then remember to define the kinds of subject that will be seen on your pictures and in which context they will act. In the third place, define lights and tones which are essential to convey specific emotions and feelings. Let's try Uber's categories on our website. Do you remember Matisse brand values? We said they were imperfections, simplicity, and unpretentiousness. Probably instead of displaying only artworks we may suppose to also show other types of content. Well, considering the images we have already put inside the layout, we can say that our settings will be opened in modern spaces with natural and warm slides. People who want to be the center of attention but Matisse art will be, therefore people won't be recognizable. Preferring, for example, blurred people in the background. Their interaction with art will be immersive and contemplative. To end this chapter, here are some additional advices I'd love to give you. Always tried to provide high quality original contents. It will be a super plus for your brand and users will recognize it. If you're on a budget, consider stock catalogs, some of them are freely accessible and allow you to download great images in high resolution. Otherwise, don't forget that also, illustration can convey your brand identity. Give them a distinguishing style and you're ready to go. Guys, we are now at the end of this lesson. Don't forget to write some comments if you love to. I hope you will follow me to the next one, which will mark the end of our class together. See you.
10. Advice & Conclusions: Hello my dear friends, here we are. This is the last lesson of our journey. I'm very sad, but at the same time, I'm also pretty sure you will apply everything we've learned together to design something amazing. Before we bid each other goodbye, I have a few advise about the design process I'd love to give you as a conclusion of your PAF. As a matter of fact, it's useful to know that there are tools and best practices that can support us during the different stages of the project development. In this lesson, we will see some popular tools to share, both with our team and the client, the ongoing development of our project, and a few best practices to properly export assets in order to let developers do their best work. In addition, we will also discover that there are some easy rules to follow in order to ensure a joyful work environment among team members. We really need to be aware of all of this, simply because most of the time we won't work by ourselves. Therefore, it's super important to learn to properly collaborate with the different actors involved in our play, such as the design team, clients and developers. Maybe it won't always be easy and fun. We will need a lot of time to learn to manage a project. But the more we get experience, the more we will be able to handle different and complicated situations. In order to collaborate, the first thing to consider is how to share outputs without being too chaotic. In this section, we'll have a quick view on two of the best known tools that teams all over the world use to share everything related to design, from concept to our boards, up to comments and specs. This recommendation is really important and should always be keep in mind. Be always aware that at the end of the design phase, the work isn't finished at all. For instance, you can use InVision to share your designs, which is a web service that helps designer showcase and prototype digital products, likes website and apps in a very quick, easy, and intuitive way. The first upload is open and accessible to all, why? For more than one project, you will need a subscription. When you upload your screens, InVision displays them in a way that mimics an actual browsing experience. Those who have access to the project can also inspect the different components of your design, and leave a correct comments in order to keep an easy and direct dialogue regarding the project. InVision is pretty useful because it allows us to prototype and share the products preview with the client or other team members. Clients can leave comments, and this features allows a clear conversation among people who often don't even speak the same vocabulary. With InVision, you can also directly turn your artboards into design specs-all, and communicate with developers without any other tools. To share outputs, you can also use Zeplin, another great online tool that works alongside with the most common design programs. Like on InVision the first project upload is free. So you can try it and understand why it's so amazing. Zeplin allows us to upload, organize, inspect and comment our design. The interface is super clean and won't let you get lost during the different stages of your work. Zeplin's most amazing feature is that you can export your files directly from the design software, whether you are using Sketch, Adobe XD, Figma, or Photoshop. With just a plugin, it automatically generates tailored specs that you can collect in organized style guides. So everyone in the team can access the latest design resources and get notified when changes occur. What we have seen so far are tools that among their features give us the chance to get assets without the inconvenience to manually export them singularly. But in case you need to export your assets one by one, which may easily happen, there are a few things you need to know in order to do it right. Once you get them, nothing will stop you, and you will be the developers hero. Are we sure we all know what assets are? By assets, we mean all the materials we need to successfully deliver a project. According with web design and development terminology, assets typically referred to text content, graphics, photos, videos, audio files and databases. To ensure a pixel perfect result, assets need to be at a double resolution because retina displays have a higher pixel density than traditional ones. High definition export can turn the load speed of your website very heavy, which could influence the overhaul website or app experience. You can easily solve this problem using appropriate online tools to resize images. For example, TinyPNG can lower the weight of your images while not undermining the overall quality. When exporting assets, remember to select the right format. For example, SVG work for vector files like icons, but can't work for images. It's better to choose a PNG or JPEG format. Also the color mode is very important. So remember to always export in RGB, we are working for the digital world. Here is the third part of our lesson, last but not least. Since no one succeeds alone, you may be asked to sign your creative ego and start to think in a team oriented perspective. But why ensuring a cool work environment is so important? During your career, you will likely find yourself working within a team, it's very important to keep in mind that whether you are the big boss or the young intern, you will have to accomplish your own task of your best, and in consideration of the general team direction. So if you are in charge of a team, try to know your mates, and which are the things they like to do. Remember that each member of your team is an expert in his own discipline. So be open to their opinions and inputs. Be that kind of person other people want to work with, making sure the entire team feels comfortable and safe to express themself. So here we are at the end of this class. Hope my inputs may have been helpful. I'm here for everything you may need, and I'd love to see if you are using something we have learned together on a specific work. Of course, I love to see your result. So don't be afraid to contact me, and see you in the next class.
Sofia Girelli, Design will save us!
