Move from Graphic Design to UI/UX | Design a Mobile App From Scratch

1. Introduction: Hi. My name is [inaudible]. I design visual and user experience for digital products. Design has always been my biggest passion and became the major role of my life when I chose graphic design. After graduation, I got my first job as a graphic designer in a company working on healthcare products. I design models that certainly widely is designed, for working with technical, interacting with US designers, [inaudible] product measures, then [inaudible] the combination of design and technology things you [inaudible] should look into it. At first I didn't know how to do it, I start with self as studying, taking online courses, reading articles and watching YouTube tutorials. It took me a while to learn the basics of U I Unix design process, mixed mythologies and learning more about how to design a website, modal application, or a dashboard from scratch. Now [inaudible] that I'm working as a graphic designer [inaudible]. Today in this class, I'm going to take you through all the steps I've taken to some small graphic design to U I Unix design. But we'll talk about the similarities and differences of D steel fills. Well or to tools and software is you need to learn what you should do to switch to U I Unix design, and finally, we're going to design a split sharing application together. [inaudible] As soon as generating your first U I Unix project for your portfolio. We'll design this project in four steps. First we are going to reset, I allies, but also about user interviews, online surveys and compensate. Next into second step where it can all create personas, storyboards, and user flows. [inaudible] and brainstorm ideas like sketching, making prototypes and creating vibrates. Finally, you will design the U I using figma. As [inaudible] for graphic [inaudible] designers? [inaudible] Design [inaudible] itself [inaudible]. 2. Understanding Design Roles: Before diving into the project, I'd love to give you more information about [inaudible]. Once upon a time, design means graphic design. But today, there are more design-related positions like UI, UX, visual designing, attraction designing, [inaudible] keeps piling up. I'm about to give you a very short definition for a [inaudible] so you don't get confused by the titles. Let's start with graphic design. Graphic design has probably have one of the best new job titles in the world of design and tech. They often work more with print designs and deliverables. Graphic designers know the fundamentals of design, like typography, color theory, illustration, and even photography. The other term you've heard frequently, it's user interface or UI design. Simply put, UI is every visual element a user might interact with other technological device, including mobile apps and websites. A UI designer is essentially in charge of how everything aligns on page in relation to each other. She decides the higher work of elements like [inaudible] , textiles, colors, etc. The goal is to make interaction as simple and efficient as possible. On the other hand, UX, which stands for user experience design. It's primarily concerned with how the product feels. UX designers look at design from the mindset of a user and solve potential problems. For doing so, they research, sketch, make prototypes out of white frames, and do various kinds of testing with users to improve the initial idea. UI is focused on how a product looks and operates. This includes everything from designing the navigational flow of a website to its visual design. UX, however, is focused on how product feels and makes sure everything is satisfying for users and makes them happy. Imagine a human body, the bones are the code. UX is everything inside that makes the body function well and UI is everything outside that makes the body looks appealing and nice. The other design rule is visual design. Visual design was born out of a mixture of graphic and UI design. It focuses on visuals of a website or any other digital product. Does the finish product look good? That is the question visual designers answer. Also, you may have heard product designer. Product designer is a sum of term to describe a designer who's generally involved in the creation of the look, UI, and feel, UX, of a whole product. Did you understand business objectives? What problem this product is going to solve? Who has this problem? They work with larger scopes of responsibility and oversees the product vision from high level. There are other design-related positions in the industry but I wanted to highlight the ones you may have heard frequently. In the next video, we're going to talk about why good graphic designers with a strong design capabilities can easily switch to UI/UX design. What are the similarities between these two fields? 3. Big Benefits for Graphic Designers Moving to UI/UX Design: Graphic design and UI/UX design have many overlapping skills. The career shift may come naturally to those who already have great design skills. One of the similar skills is emotional design. Both graphic designers and UX designers try to create an emotional connection with their users. Graphic design is about evoking users emotions through imagery, color and typography, but UX designers are limited to the visual part of design. We focus on: information architecture, interaction design and accessibility of designing. The other skill they both have is attention to details. Design is in the details, and graphic design skills are often oriented towards great concentration of detail like text scanning and alignment of elements. UX designers are the same; they pay close attention to details that would improve a product and bring a better experience for users. Also, they are both skilled at Creative Thinking. Designers are problem solvers. Graphic designers and UX designers are equally skilled at creative thinking and solving problems. To understand why UX designers need creative thinking skills, you should first learn about UX design thinking process. Design Thinking is a continuous process that flows through the following stages: empathize, define, ideate, prototype and test. Within each stage, problems are framed, questions and ideas pop up until the best solutions appear. The other overlapping skill is Design Conventions. Conventions are the selection of good solutions that users liked or found easy to understand over the years. To understand better, let's consider conventions about color and shape usage. The first sign uses two strong conventions to convey danger; the color red and the rhombus shape. Although the word warning is visible on both signs, the first image can convey the message without the texts. The second image requires a text in order to instantly identify it. Many graphic designers are already familiar with conventions in web or app design, which means they can easily adapt to a UX design role. The other similarly skill is Aesthetics. One of the benefits for graphic design moving to UI/UX design is that they can make things beautiful. Graphic designers have got this natural ability to make things visually [inaudible] by using alignment principles of visual hierarchy. But visual design can improve the overall user experience of a product by making users feel better about it. Don't forget that graphic design skills are an asset while working on a UX project. Design fields are transferable, so if you aim to learn a new specialty, you just need to practice, nothing is impossible. 4. Why Should You Switch to UI/UX Design?: Working in tech designing innovative digital products and interacting with consumers is so enjoyable. I want to give you some reasons why UI/UX is the best job in the world. UI/UX designers are in high demand. [inaudible] smart appliances has become an essential part of our lives. With this, constantly for UI/UX design. The other reason is that UI/UX designers are more than graphic designers. A UX designer earns more than a UI designer, while a UI designer earns more than a graphic designer. According to PayScale, the average salary for a graphic designer in Amsterdam is €29,000 while an average UX designer receives €58,000. The other reason why you should switch to UI/UX is that when you're designing a digital product, you'd never feel boring, because UX designers face different types of questions every day. You are changing people's lives. The central role of the product design is to make people's lives more comfortable than ever so you as a product designer will feel so satisfied because you are directly connected to users and you can see the impact of your design. One of the most important reasons why I love UI/UX is the collaborative design process it has. UX designers work closely with other designers, developers, product managers, and even stakeholders, in order to ensure that the final designs match everyone's expectations. The other reason for switching to UI/UX field is having the chance of product research and testing. You will do a lot of research and this seems like a tour to you. You will need a lot of people, and speak with them, and analyze how [inaudible] affect their lives, how they feel, what they need. This is a very big advantage over traditional design sites sitting behind the desk over time, and just designing without any interaction with the end-user. The last reason is the demand for multi-skilled UI/UX designers. Companies prefer to hire a UX/ UI designer rather than designing a particular rule for UX. [inaudible] depends on the company's scale or budget, but fortunately for graphic designers turned UX designers, that you'll be able to stand out from other candidates because you already know visual and communication design, and you are a multi-skilled designer. What is the road map for graphic designers becoming UI/UX designers? In the next video, we're going to talk about ways you can choose to practice those skills. 5. Roadmap for Graphic Designers Becoming UI/UX Designers: Graphic design is already speaking the language of design. You just need to brush up your skills to include those that are unique to UI/UX design. In this video, we are going to talk about ways you can sharpen these skills. The first one is education. We can look for your local top universities which provide specialized courses like; human-computer interaction, user-experience design or interaction design. The other way to gain new skills that I myself always choose is learning with great educational programs, online platforms like Skillshare, Coursera, Udemy, and LinkUp. There are many other online platforms. I just listed the most famous ones. Also, you can search in YouTube. YouTube has got many tutorials from designers teaching product design, design software, or simply expressing their experiences. Number two is reading UI/UX articles. A good place to find UI/UX articles is Medium. There are some good publications you can subscribe like Muzli, Prototypr.io, UX Design, CC, UX Planet. org. Other sites to learn about UX includes IDEO, UX Magazine and Smashing Magazine UX section. Number three is learning prototyping. Interactive prototype makes it possible to truly experience the product, so it's essential for any UI/UX designer to learn a prototyping tool. There are some prototyping tools like InVision, Marvel App, Axure, Framer or Flinto. Number four is getting up to date with UI trends. Former designers and Behance to being taught with UI design trends. On Behance, there are a lot of creative professionals showcasing your latest works on the platform. Dribbble is a social design portfolio platform that is similar to Behance, but mostly showcases works in illustration and user interface design. In order to post your works on the platform, users have to receive an invitation from other fellow users. Do a search for invite and toggle to recent for new posts by users. These users usually hold a mini competition to review their works before forwarding an invitation. Alternatively, check out UpLabs and Awwwards. Number five is to starting practicing UI/UX. There are a few ways you can practice UI/UX design. If you don't have actual projects where you can apply, UI/UX knowledge, you can participate in the daily UI challenge and put your favorite ones in your portfolio. You can find a lot of cases to studies about design of an app or website at Medium. Last but not least, you can gain more practical skills by applying for internships. You have the chance to learn from other designers in the design team, as well as the opportunity for building a portfolio from an actual project. Also don't forget to get into the habit of asking for feedback. Again, Dribbble or Behance are great places for showcasing your design. Number six is focusing on building a UI/UX portfolio. In design industry, whenever you want to apply for a design position, the employer always asks for a design portfolio. One of the best places for finding hundreds of design portfolios is Bestfolios.com. You can see designer's portfolios, their projects, case studies, or their resumes. For your portfolio, you can use your graphic design works like visual designs, brand identities, infographics, logos. They are all to your advantage. People are visual creatures and they enjoy seeing a beautifully crafted design. But for your UI/UX portfolio, you should write case studies. Case studies are process or record of your researches and decisions for designing a digital product. You should mention the problem, your solutions, your thoughts, and everything you experienced during designing your project. Also for building your portfolio, you don't necessarily need to build a website from scratch. There are some website builders that offer portfolio templates for a fixed price per month, like Squarespace, Wix, or Webflow. Number seven is attending workshops and events. Networking is essential. Sometimes best opportunities are found when someone in the field recommends you for a position. For networking, you should find local UI/UX communities. You can find some on hackerthon.com or simply Google for design jobs or UX competitions in your area. Also check meetup.com for finding workshops, conferences, and UX gatherings near yourself. If you want to move from graphic design to UI/UX design, it's not going to be as difficult as you might think. While there is a gap between graphic design scales and UI/UX design scales, it's not an unbeatable one. You just need to practice and include those that are unique to UI/UX design. 6. Research; User Interviews, Surveys and Competitor Analysis: This part is the best part of our class. Just before diving in to the project, I'd love to ask you, do the project step by step with me and upload every piece of project, assignments at the end of each step. Also don't forget to ask your questions, don't leave any questions unanswered. Let's start, with all design is Split Sharing Mobile Application. I chose this topic for the project of this class because I thought you're already familiar with scenarios in which a Split Sharing Application is used. I think you mostly understand this when you go out with friends for a meal and after the dinner [inaudible]. Most of the time a break, we'll go ahead and his credit card foot the bill for every one, not just stupable but if its a big group of friends that's where the pain starts. When you want to design, a mobile application, website, or any type of digital product. The process you go through varies according to the company's scale, the project's budget or time frame. However, the design process normally starts with research and analysis. Let's define the goal first. Have a clear mindset about what we are going to design. The goal of this app is to solve problems, with bill splitting between friends for a dinner. In a real project when you have [inaudible] you get more information by conducting is stakeholder interview. Stakeholder interview helps you to find out about business schools, technical constraints at stakeholders current leads about user needs. The main goal of this interview is getting information about what are the business goals? Are there any existing research or design material? What is already known about the users? Any feedback? For example, enough feedback, customer support calls, messages, reviews, the important thing is that it doesn't replace a proper units of research. Other questions might be, who are known competitors? How the market looks like? Are there any technological limitations? Other project specs like deadlines, team members. During a stakeholders interview it's so easy you can do in three steps. First, you should prepare your questions so you don't waste each other's time, then you think about the interview. If it is a small project you can give it in one interview, but if it's s a more complex and bigger project, you should do it in several interviews with several people like product managers, product owners, technical manager, lead designers. In the first step, you should record the documents all your notes and their answers. The second step helps you to get more information about the project and avoid misunderstandings. Painted, user journey, imagined we have five friends entering a restaurant, they sit and then they wait for the menu. After browsing the menu to scenarios might happen. Is waiter ready to get the order? If no, they should wait more and that's the frustration. I highlight frustrations with red color. If yes, they will order and get food. After eating. When they finish, they will ask for the bill. They get the bill and start chatting about how to pay the bill. Two cases are possible. They should split it evenly or per pay per item. If they split it evenly, then it's much easier as a total amount will be divided by five people. But in most cases, dishes are different for one is more expensive, while another may have ordered a cheaper food, so they should calculate each one's share. Friends take out their credit cards, two scenarios are possible. If you found payslip on payment method, which results in longer weightings for waiter to process payment. A pay [inaudible] pays the whole bill, then the rest should calculate how much each one has to pay and how to pay? Which is the bills frustration for our goal user? Then they all pay him or her back. At the end, they will leave the tip and then leave the restaurant. Let's list hypothetical problems according to user frustrations in determining that. Here we'll just focus on problems they experienced with sharing the bill and payment process. The hypothetical problems are thinking about how to split the bill, to pay splitter pays for everyone. How much everyone should pay if they had different orders, waiting for a waiter to process the payment, then we make hypothesis about who has this problem. Youngsters with the range age of 18-35, so that's a good first hypothesis because they are using technology on a daily basis and are already familiar with making payments through an app. For a validating hypothesis you should talk with people. For example, you carry out five diners it's s crucial observation or your customers understand their needs, house or lives are like and how your product would fit in their lives. For doing an initial user interview. You don't necessarily need to invite people to office. You can do it in the coffee shop while you're waiting for your friends to arrive, or even do it remotely via Skype or Google Hangout. Always surfacing your hypothesis testing in the context, for example, when you are out with your friends for a meal or taking online surveys. Online surveys if they are consulted carefully it can be great use still. Especially if you use them as and additional and supplementary talk. Just remember the shorter your survey is the better. There are great tools for conducting an online survey, like Survey Monkey, Google Forms and Wufoo, if I'm pronouncing it right, they provide you with clear data in form of summary for each answer. Based on results of using tenures and surveys, you can verify any sharp hypothesis. Say that's not what happened. Most of the people in the interior, you mentioned that usually 1 percent pays the bill and calculates for others and they don't have any problems waiting for a waiter to process the payment. But they also added that imputing items manually is frustrating and it's hard to split on even group expenses, let's say about customer hypothesis. We understood most of the interviews are college students who are living on their own, so they care about their spendings. Then you should test new hypothesis and if need them, refine them. We iterate the customer development cycle to get closer to our potential customer. We make hypotheses, we test them, and according to our learnings, we refine it. Then if you have a better understanding of the users against the market to see what competitor applications are doing. What are they offering to customers? This research is called competitor analysis. Competitive Analysis is about ticking out what competitors are doing at the moment. Just bare in mind not to copy mistakes from your competitors. For avoiding competitors mistakes. You may conduct user testing of the competitors application or website. The goal is to identify their mistakes not using it in your design and looking for a better solution. For doing a user test you simply need to give your campuses application to a friend. Give them a task and write down any difficulties they have. For example, for a split sharing application, I will tell my friend to create a new experience with their friends and I will write down whenever I see if she gets confused those are the newest problems you should not copy in your design. For finding competitors, you can simply Google Splitwise. As you see, there is a list of stuff, split sharing apps which helps us to find our competitors. One of the good tools is SimilarWeb. It enables you to check everything in details, even keywords the competitor has used. The other tool I like for finding relative products is alternativeTo.net. When you search in the search box, AlternativeTo shows you information about the app, like website, it raise features, tags and also screenshots. Another tool for finding competitors is Product Hunt. Just like AlternativeTo, you can see the product information as well as relevant products. Here you read people's reviews. This is so good. It lets you know how people think about the Splitwise. For your hypothesis analysis you should write your composes information, like website address, screenshots the strength like a nice feature a beautiful user interface or a weakness like [inaudible] students. For this class, we will review a Splitwise. First, we will write a short summary for the product. You get whatever you know about the product, like website address, product rate in Google Play, and [inaudible] store and so on. Who's the target customer? In the Splitwise, target customer is roommates and friends who share expenses. About the product, service, or pricing a Splitwise is free, but it offers some features exclusively for users who have subscribed for $2.99 per month. You must know what your competitor offers to its customers because you can take advantage of that. Strengths here are great features like auto calculation, splitting evenly and unevenly, making payments through app, requesting for payments, assigning items to friends, and displaying the payment history and weaknesses of features or options. Splitwise doesn't offer imputing items automatically, don't scanning received in free version and not being real time. I also save the screenshots and tried to check the app and write down the notes. Also, I work with the app and record my screen. I see the functionality, features, animations and if the competitor makes any changes and releases new versions, I can get back to my recordings and slingshots. For your assignments download and install a one split share application or use any split sharing app you already have in your phone. Like the example here. Write down one thing you like about it, and one thing you see could be better. It would be great if you upload the screenshots for what you like and what you don't like so your classmates can understand your point of view better. So good to see and read your reviews. 7. Analysis; Personas, Storyboards and User Flows: After you talk as real users based on the information you get, you can create personas. Personas are fictional characters created to represent different user types, that are going to use your product in a very similar way. The best practice is to define 3-5 different personas, and describing them as if they're real people. Start with a name, a job, life and style, or their hobbies, and maybe even a code that the user might say. We'll use this to create actual profile for each persona. For example, in here we have Dan. Dan is 25 years old. He's a marketing intern. He's so precise. He cares about not getting screwed over by his friends carelessness, when it comes to the bill. He mostly pays for his friends, documents the receipt, usually by taking a picture, then goes home and messages each individual of the party separately, to identify what they got before doing the math is some calculator. He will rarely forget to charge. Usually, he'll send some nice reminder for forgetful friends. We also have Sarah. She's 28 years old. She's a graphic designer, and she doesn't care about a couple of cents difference, much to the precise Dan. She usually leaves a couple of eros to texts and tip, and depending on her mood, she'll either be more stingy or be more generous with the amount they add in. After dinner, she'll proceed immediately pay her bill splitter friend as to avoid forgetting later. Another persona is Robin. Robin is 22 years old and he is a student. Robin is much less careful than it comes to paying, and oftentimes is hunted down by different parties to pay his bills. Usually, he has a very terrible cell service and will refrain from picking up his phone to pay his dues immediately. That is likely to find three types of personas in a group of friends. With personas, you can create storyboards. Storyboards are great tools to describe and illustrate how a user attract to the product. They display any traction required to achieve a goal, like a comic. Dan, Sarah, Robin, and Mia enter the restaurant. They sit and order food. They finish their meal and Dan asks waiter to bring the bill. Friends start talking about who pay for meal. Dan takes out his mobile phone and suggests he pays for everyone. They can pay him back. Waiter brings the bill, Dan pays the money. Then create a group with his friends. Takes a picture of bill via Happy Split. Happy Split scan the photo and shows lists of expenses to Dan. Dan assigns each food to order and taps on charge. Sarah, Robin Mia, receives a notification on their phone. They tap on pay back. Friends leave the restaurant. Now based on storyboards, we can create users flow. We can use user's flows layer to review the journey, and we can create reference on top of each step. User flow is the path a user takes on a website or app to complete a task. There are awesome great tools you can use to create a user flow. The one I enjoyed working with several project is flowmap.com. It's so easy to work with. The other tool is macflow.com. You can also create wire frames and sitemaps with these one. For this project, I would like to use flow maps, so let's get started. Dan opens the app. He wants to create a bill and then create a group. So he adds his friends to the group and then he can either scan the bill or input items manually. When bill is added, he should assign items to each friend. After he adds tip and type on charge button, he sees a success page, telling him his friends received the bill. For you assignment, create a persona for a college student. Like the sample, write down his needs, his goals, and his attitude. I'm looking forward to seeing your persona and discuss them with you. 8. Explore; Sketch, Wireframe and Prototype: Now that you have everything ready from your [inaudible] , take your pencil and notebook and have fun. For this class we're going to work on Home screen and adding a new expense or build process. Let us start. Now that we have seen competitors apps and we know what we are looking for at this stage. In the first home screen, I'm want to show a summary to user, like a total balance, the amount of money she's owed, and on the other hand, the amount of money she owes. She sees the list of her friends and the amount of money they should give her or she should pay back. In tab all she see is friends, groups, add button for adding a new bill, notifications and settings. Also, I add such books for finding friends and a button for adding new friends. If she clicks on the "Add Button", she goes to a page where she's got to choose other recipients of the bill. Again, we have a search box, the subgroups, list of friends and at last list of contacts. When my friend is chosen, the next button appears. If she chooses more than one friend, the next button converts to create group. So she can distinguish easier what's happening. When recipients are added, she's got to scan the bill. I add flesh icon, if she's using the app in darkness, just like camera, she can also enter items manually. When that bill is a scanned, everything is split evenly among friends, but she can choose a split unevenly option. Sudden, she's got to assign each item to a friend or assign an item to the whole group. Then taps unconfirmed button. The lesser step is choosing the amount of tax. I give some options like no tip, five percent, 10 percent, and also enter a custom tip. All the expenses are listed with the recipients names. And then when she taps on charge button, she sees the success page which says friends receive the bill. That's it. Paper prototyping, as you might have guessed, is a sketching screenshots of paper to present it like a digital product. Paper prototyping has different levels of complexity. The most basic ones are sketches of each screen on a paper, and any usability tests, the sketches are switched according to user actions. However, you can go further and produce more advanced prototypes with essentials. It helps you to quickly, accurately pre-create buttons and icons. At the most advanced stage, you can upload photos of your paper sketches into digital prototyping software and add actual interactions with a tool like pop prototyping on paper. After testing your paper prototypes, if you found any problems, users have while they're working with your prototype, you can iterate the process again, this gets your sketch [inaudible] again. If everything went well and there was no problem, you can structure your idea and add more details to create wireframes. A wireframe is a low fidelity, simplified outline of your product. Wireframes are the backward for design. Why you can't go into too many details. You need to create a solid representation of the final design. You are on your city path for the whole project and for the people you're working with like Project Managers, other designers, copywriters, and the whole team so they need a well created, well structured wireframes. These tools for creating wireframes are [inaudible] that you already know, just in mind, which provides UI elements for wireframes and high fidelity prototypes. The other one is wireframe CC, it's a minimal tool. It doesn't make creating wireframes complicated. The one I love to use today to create our wireframes is [inaudible]. Just like just-in-mind, moqups has ready to use stencils for all popular use cases. Also, we can simply create your wireframes in a sketch, [inaudible] or even Photoshop. I create wireframes on top of the user flow so I won't leave anything behind. So let us just start. This is the Canvas you have in Moqups for changing the size of your art board. Go to Workspace and choose page settings. This is the size of an iPhone 8. Also, you can find iOS and material design components. These libraries makes the process of creating wireframes much easier. I start with bringing in and I use the statutes bar. In the comments section, you can find all common objects you need for creating your wireframe, like a rectangle, button, text filled, and so on. For all of our sketches do not forget anything in your wireframes. Sometimes you may need to feature a part in your design, but normally it's better to not use any kind of color in your wireframes. Wireframes are destructor for design and they are not supposed to present any kind of visual spec. Especially if you want to present them in your meetings with the rest of the team, like Developers or Product Managers. It's better to not distract your attention to any color. Don't make it false out wireframes. The sketchs, paper prototypes, and wireframes are inexpensive tools to design and test the product. Don't spend a lot of time on something that needs many iterations. Wireframes are not supposed to be beautiful. From there we transfer wireframes into low fidelity prototypes. We want to test new tractions as soon as possible. We use InVision for making a prototype. Making a prototype in InVision is so easy. We just need to upload your wireframes, images or if you have designed in a Sketch or Photoshop, you can download the craft plug-in to sink and send your designs easily to InVision. For building a prototype, you need to create hotspots. Those areas that will be linked to another page, like a button then select the paste destination. You can also share a link to your prototype with your team so they can leave feedbacks. Remember you should test design in each stage. First with hypothesis, then with the sketch, the third stage with wireframes, and then with the final design. This each time you test your refine and improve your design and iterate the process again. For your assignment, draw your ideas for the whole screen sharing application and then covert your sketch into a wireframe. Like the example we see you sketch a home screen having following features: list of friends, list of groups, expenses add button for adding a new expensive bill, notifications and setting. Decide how you're going to put all these features into a single screen and then when you're done with sketching, choose one tool for converting your sketch into a more detailed wireframe. It could be [inaudible] or simply Photoshop. Upload your work and get feedback from your classmates. 9. Create, UI Elements, Icons, Fonts and Colors: It's time for adding more details and design a UI, the user interface, a [inaudible] frames. Designing the UI, the user interface is the easiest work for graphic designers because you are already familiar with the visuals designs. But for doing a more design application, the first question you may ask is that how should I know the differences between Android and iOS? How should I know the guidelines? What about the sizes? Let's just start with Android and iOS differences. First, they have different guidelines. Google uses Material Design, iOS uses human interface design. I've mentioned their links in project's resources. Google created a design language called Material Design. If you're designing for Android, this is something you definitely need to check out. There are so many great tools to check, UI patterns, icons, colors and test designs. For example, color tool helps designers pick color parties. For iOS, there is the human interface design guidelines by Apple. This is an exhaustive list of design patterns for iOS apps. Apple, even provides some sample Photoshop or Sketch resources on this site. Moving backward and forward between screens is a common action users take on apps. On Android, there is a universal [inaudible] at the bottom. The back button is an easy way to go back to a previous screen and it works in all apps. The approach on iOS is a little different. Obviously, there is no universal back button here and this changes the design a little bit. Every other screen needs to have a button on the top left corner. Just to better understand, let's compare an old version of Facebook App. App Settings and Options. Apps for both platforms again follow a different approach here too. The most popular patterns here are the hamburger menu on Android and tapped menu on iOS. Medium's Android App has a hamburger icon on top, which shows different App options and areas. Now, coming to Medium for iOS, there is the familiar button tap approach. Notice how some options from the Android's apps hamburger are pushed into the user options tab on iOS. Uniformity. After all, there are always exceptions. Not all apps follow different interactions and UI design patterns for the two platforms. Some apps follow material design patterns on iOS like Gmail, others follow the same human interface model on both, like Instagram. For example, in a sketch you can choose your art board and see all sizes on different devices, like Apple, Android, responsive web and paper prototypes. [inaudible] is the same, choose art board and you can see the list of device sizes. Also on Photo shop and Illustrator. You can choose your device size easily. An important element in user interface design is icons. Icons should be so simple and streamlined enough that they look great on the small view port of a model screen. In an iOS situation you have enough time to design your own icons for every project but in reality you're under so much pressure and you have to use the ready icon sets. There are great websites you can find and download icons from like Flaticon, Icon-finder and Icons8. Just remember you better use a set of icons rather than downloading icons individually. It provides a more consistent design. A font can easily be the most subtle and engaging differentiator for your UI design. There are four fonts I mostly use for designing a website or mobile application. First one is Open Sans. Open Sans is optimized for print, web and mobile interfaces and has excellent legibility. Roboto is part of the Google family and it's the default Android phones since 2012. It works well for body types. Avenir Next is a geometric San Serif type face, it is very versatile with six ways and is readable at all sizes. Proxima Nova is suitable for modern content centric websites and mobile apps. Equally great for headings and body type. One of the vital stages of your creation is color charts, sometimes we spend hours to choose the best color parity. Now, [inaudible] and tips to chose your color parity easier. First one is color meaning. First, you should know about fundamental concepts about colors. Each color has a meaning that varies depending on culture. Second instances colors create emotions. So you should learn about the meanings to use it in the right context. For example, blue is associated with reliability, productivity, trustworthy, and safety. You see various shades of blue color in major social media platforms like Facebook and Twitter. Get inspiration from nature. The best color combinations come from nature. They will always look natural. Also, you never see pure gray or pure black in nature. So add a little bit of saturation to your color. Subconsciously, it'll look more natural and familiar to users. Number three is drawing attention with contrast. Using contrast mix, consuming information easier. A very common example is black or dark gray and white. These two colors produce a lot of contrast. High contrast can actually help make your content more readable. Exaggerate lightness differences between foreground and background colors and avoid using colors of similar lightness. Number four is getting inspiration from Dribble or Behance. When you are designing UI, Dribble is one of the best places for getting ideas. It also enables you to search by color. So if you're doing visual research about a particular color, how other designers used it, and which color combination fits well, you can use this tool. There are some popular tools you can use to find your color parity easier. The first one is at Adobe Color CC, which was originally named Adobe Color. It is a free tool. You simply choose a color scheme style and drag around color choices to build your new design scheme. You'll get full RGB hex details, and most colors can be adjusted to include lighter, darker hues that still fit within the scheme. The other one is Paletton. It is similar to Adobe Color CC, but you are not limited to only five tones. If you have primarily colors, you can play with the additional tones. The other one is material palette. It's a great tool to see a preview of the colors in action. The web app pairs two colors together into a mock UI design with dominant and subordinate colors. Although design is limited to material design colors, the live statistic feature is a great way to train your eye and learn which colors often work best together. There are number of softwares you can use for designing good websites or apps interface: Sketch App, [inaudible] or Figma. Four years ago, I switched to Sketch for Photoshop and I've loved it so much since then. Figma is very similar to Sketch. They are both vector-based. They have an infinitive canvas where you can create art boards to design out. But with Figma, you can share a link to your project with the rest of the team, especially other designers to leave feedback and comment on your design. They can export elements and even they can edit the project with you. Generally, it's a very collaborative tool. Also, you can use Figma whether you have a Mac or PC. Today, in this class we will design our app in Figma as it's agreed for both Windows and Macintosh's students, and you can easily share your project with us. It's my first project designing with Figma. It will be interesting. Figma has a desktop version as well as a browser version. We can log into your account and see the previous projects you have worked on. Let's go ahead and create a new project. As you see, we have to canvas here. These are the layers, the components and for starting, we use this tool frame to create an art board. You choose the size of your design frame here; phone, tablet, desktop, watch, paper, or even social media posts or banners. I choose an iPhone 8. I renamed the art work to "Home". Before starting, I downloaded iOS UI kits from iOS design, [inaudible] for Figma. These libraries help a lot. You don't need to create companies from scratch. Also, Figma has library for material design if you want to design an app for Android. I copy a toolbar from the UI Kit. I want to create my tool bar upon it because I don't have the phone used in the iOS kit. I replace it with Avenir Next. I've already prepared my set of icons in Illustrator. According to the wireframe and sketches, I bring in the icons to the tool bar. For Add button, I draw a circle with a plus in the middle. For the color palette, I decided to use a cool green with the reddish orange. Do not forget little details. You can bring in your wireframe page to design the UI upon it. For icons, I almost always use feathericons set. They are very simple and minimal. Also for text and titles, I never use pure black or pure gray. I prefer to use a dark color like dark blue especially when you have green or blue in your work, it looks very appealing. I love emojis. I always love to have the chance to add emojis to the interface design. I feel like people get on very well with them, especially youngsters as they're using them all day for chatting with friends in messenger apps. When the overall layout is done, you can add more details. Details that makes the design more beautiful. I use other colors for small parts. I believe if this is an app for college students, it must look fresh in a way that youngsters would love it. One of the most colorful apps I've seen in my life is Zenly. If I'm not wrong, Snapchat has acquired it. It looks so fresh. I love the use of colors. The app looks so lively. Homepage is done. Don't forget to download Figma file. There you can see the homepage and the complete process of adding a new bill, pages, recreated wireframes , and prototypes for earlier. In Figma, you can also create prototypes. It's just as easy as InVision app. Here you can choose design's frame. Is it vertical or horizontal? Even the model of your iPhone. It's great, you see. Also you can choose the background color. For getting started, you select the frame or objects in a frame and connect it to another frame, like creating hotspots in InVision app. In the homepage, when the user clicks on the Add button, she goes to the next page where she chooses her friend or friends to create a bill with. If she chooses more than one friend, the Next button converts to a Create Group button. So it's easier for a user to distinguish what's happening. Then she captures a photo of the bill, and then she chooses Split evenly, and then assigns her friends to expenses, chooses the tax, and tap on Charge button. The last page is also linked to the homepage. Let's preview what we did. You see, this is the prototype with Figma. You may have seen beautiful interactions for mobile apps and websites from designers in Three bill or Behance. You can create such animations of principle. It's a very handy app and super easy to work with. For your assignment, design the UI for the home screen page. You already have the Sketch and created by a frame for. You can do that. You can design interface in Figma or any other software you already have and you feel easy using it. Just upload a JPG of your final work. Share it just like the example. This is the final assignment and shows what you have learned during this class. I'm waiting to see your split sharing apps. Also, don't forget to ask your questions. 10. Closing: All right. We've come to the end. We've done a lot of awesome work. I hope you, creative guys, had fun creating ideas for a split share [inaudible] application in a short time. It is important to know all the efforts will get you to launch. With actions you take after launch, will it get you closer to your app's perfect UX? It is your responsibility as a UX designer to anticipate user behavior. Creating friction-less visual experience is not easy. It takes time, effort, dedication, but with the right tools you can optimize your app quickly and effectively. By using analytical tools to learn from the in-app lifetime of your users, you can create the user experience of a lifetime. Also remember that you'll be a good designer if you work and share your work with others to get feedback. I know how it feels at first when you've just started and you are not satisfied with what you're designing yet, but believe me, working and sharing with others to get feedback helps you to get better and work more. Work, practice, share it with others, get feedback, and good luck.