App Prototypes #1: Let's get started! | Luisa Barbero | Skillshare

Playback Speed

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

App Prototypes #1: Let's get started!

teacher avatar Luisa Barbero, Designer. Bookworm. Professional wierdo.

Watch this class and thousands more

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

Watch this class and thousands more

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

Lessons in This Class

6 Lessons (29m)

    • 2. Lesson One

    • 3. Lesson Two

    • 4. Lesson Three

    • 5. Lesson Four

    • 6. Your Projects

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

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





About This Class

This class is the introductive class of a small series based on building Applications and Website Prototypes.

Specifically, this first class is entirely dedicated in understanding the process that needs to be followed before starting to design our prototypes. 

We will talk about the research you need to be doing, why, what are fundamental aspects you always need to be considering when prototyping, the importance of understanding your audience and last but not least the user testing process. 

The last step of this class consists in creating a debate: how are you going to make your research? What is the topic of your prototype? How and why did you choose a specific focus group?

Grab yourself a notebook and a cup of coffee, let's get started!

Feel free to ask and questions and state any doubts: I will try to answer as fast as possible and I'd be very happy to guide you through your prototyping process! 

Meet Your Teacher

Teacher Profile Image

Luisa Barbero

Designer. Bookworm. Professional wierdo.


Hi everybody!

I'm Luisa, I'm a freelance Designer and video editor living between Berlin and Torino. 

I'm graduated in Fine Arts and have a M.A. in Communication Design, currently living the craziness of Berlin,  seeking everyday for new inspirations and adventures.


Weirdness and curiosity are what I always strongly encourage and are the words that I love to use to describe myself.

My Skillshare classes will always be about all my greatest passions (photography, arts and design)  Keep an eye on my Instagram for my constant challenges..Have a look!




Colour // Flowers // Textures // Nature

See full profile

Class Ratings

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

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

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

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


1. INTRODUCTION: Hi, everybody. And welcome to this new skill shirt class. I'm Louisa. I'm a designer. And today we're gonna talk about at pro dividing. We're gonna go into deep and process that and the steps that you will have to take before starting to actually design your application or your website prototype. We're going to talk about what is useful to know how the you tailor your application and what are the reasons why you might need to have a prototype. So without further ado, let's dive into the 2. Lesson One : So let's start with the rear riel basics. Why do we need to build an application or a website prototype? Well, there are many reasons, and let's talk about the most common once. So if you are a designer, could be a Web designer or another developer. You will need to talk with your clients about the projects you're gonna deliver. But before spending hours and the days and hours coding an application or a website, what you need to be always sure is that the product they're working on does match what the needs of the person that is giving you this job on, and also that is mashing, especially the needs of the future users off your product. So what we need to do whenever we start prototyping is really having a clear idea off the reasons why we wanna have this product working in a certain way and working first heard an audience. Another reasons why we might like to have a functioning prototype is because probably we're having a research going on. That might be about every possible type of topic, but we need to have a proof that we are able to test on a wider basis. What we are researching on an application could be a very good way to test, for example, the functions off something or how people react to a certain type of simile on the last but not least idea that we could have, because prototyping could be their useful is the fact that maybe we are trying to understand if we could be able to work more on the coding side or on the design side off this things. So maybe if we don't have it figured out by that moment, prototyping is a great idea. Because prototyping puts you and into the prototyping is what makes you need make to think about the design and functions at the same time. But you won't have to think about how to code a specific actions, because the prototypes you will be doing will have integrated functions, and you can decide why they're designing them. But you won't have to write a single line of code. So what you have to see when you're going for the prototyping process is do I feel more comfortable in sketching my idea and making it look functional through the prototype itself ? Or do I prefer to spend more hours coding, but then this makes me feel more comfortable. And then I will need to work with a designer in order to match my code. Perfectly wet. More, let's say a more designing version off my application. So these are the things you have to keep in mind is might be your goals whenever you think about prototyping and application or a website. Then whenever we, of course one of birth time, we have to have the tools to be able to prototype our application or website. In my case, I started using Adobe X'd on. I've been using it since the last year and 1/2 because before I was ready in Adobe User and I was comfortable with tools, for example, folder, shop or illustrator on. Therefore, when this prat looking out came out, I was very fascinated by the fact that you could have so many functions in Commons, and you don't really have to learn and all together at once. But it's something that you could learn by doing, and many of the tools combine what other previous tools that you already know, plus the new functions make it eat very easy because you can work in your design, for example, an illustrator. And when you're done with your violet in illustrator, you don't have to copy or do a lot of pass Ashar experts and so on. But you can, uh, immediately have the file working and functioning in the design side off. It'll be exciting, so that makes it very easy off course. Therefore, my conception off up prototyping and what prototyping is more based on my experience on Adobe XY. But feel free to choose whatever other softer it's comfortable for you, and a lot depends on the experience you have. I would suggest it'll be XY, even if you have zero experience, because it's so intuitive and it's very, very, very, very easy to use and has a lot of features that are coming every month, every two or three months. So you will always be able to work on new updates and new features you can add to your upper typing, which I believe is a very good plus point old. Tell me later, how does help me a lot during my application prototype being projects, but here we're not gonna talk about application prototyping in its let's say, functional parts today, but before we have to understand other concepts that are based off a prototyping. So when it's clear for you, why and what is your goal? Either research or eater a client? Then you have to go on a deeper level two off understanding off the application or website that you are probably. 3. Lesson Two: so I like to call this the historical and understanding part off the work off application prototyping. So whenever we prototype anything, it's off course, a product that will have to work with other people on. Usually, when you get a brief from a client or you're researching, you usually consider what it's called, like a focus group, a focus group, as a group of people that, dear to, for example, characteristics, off area age, um needs that you will need to fulfill in order to have a product that is working for the reasons why it's it's needed. So let's have an example. The last application I did prototype waas four people age between 20 and 30 traveling in order to change their lifestyle and the place where they were living. So it was for people that moved from the place where they were living to another place. Andi also meant to make it more specific. It was for people, and this eight range with this need that used to use public transport every single day. So, as you can see, I have this very clear on the fine idea. Who were the people I was considering? This meant that when I waas having my prototype ready, this would have been the people. I would give this prototype and see how they were reacting to it, which is fine. If you're just starting, You might think this is all what you will need to do. So identify your group and then after you're identified, your group, you work on your prototype and then you will test it. But actually this is not how it works. So you yes, identify your focus group. But before identifying your foot your focus group. If it's not a focus group that's giving to you in a breathe, you done will understand and research yourself about who are the people that could be using this product you're doing. So let's say you are giving a You have to make an application that ISS for university on you are told. Okay, uh, this applications, you should make university life easier, but what does it mean? So you will need to go to dot university that you're working in for and talk with the people and see why do you have struggles where they have struggles where things are working , talk with them and see OK the students are going to this school since blah blah this year or this people just came and have this struggles and other struggles. And then when you talk with enough people, you then can identify what the main struggles are, and this are gonna be what the points you can focus on. But that's not all of it, because we just don't need to talk with the people. We need to observe the way they are behaving. So this is cold and design research observations off course. Andi. It's actually a bit more difficult that when it sounds, because if you ever tried observing people and they are aware that you are observing them, they will start behaving in a completely different way because they feel observed. Of course. I mean, who likes to be stared up, right? So this is very interesting thing. You will have to learn how to do so. For example, I had to observe how people were moving around public transportation stations. So what? I did waas literally for two months and 1/2 every couple days, go with like my backpack or dressed up as I was going to university and then spend a bit of time and the station and I was trying to makes what the people that were there and I was maybe asking for informations or I was just may be looking at other people and tried to communicate with them, or I was going to the information office and ask, Oh, can I have a map and then going round and see if people were talking to me and in university context what you could do could be, for example, go to lunch on engage conversations with people or just go to lunch and read your book and every time stare and say, OK, this group of people is doing nothing or you go to a lecture and you see out there's this a group of people that are paying attention This other group are not paying attention. Why're dig no paying attention? So it's all a matter off participating in what you are doing. Of course, it's not always easy to be able to be physically there. Maybe you are working remotely. Your freelancer or you just physically can't be in that place. Then what you need to do is document yourself as much as possible with document yourself. I mean, read articles about the place or the situation. Get to know some people, even just by their own line presence that might be included in this thing that you're investigating on. Watch YouTube videos read articles. Go on female like on skill share. And someone made a class about that thing because all data you can gather can give you a broader and bigger, more complex idea off who the people you are trying to tailor this thing on. And then when you got enough information, what I always suggest is creating this to personas. So only two, because you need to try to narrow down the types off informations you have. And I always say it's very useful to have these two representatives off the people that you might working for, so that whenever you think about something in your application, you can always refer to the super Sumas and think, OK, how would they be interacting with this? Would they be happy? Will they be unhappy what they need it when they not. So what I do is I write down on a piece of paper or on my computer, but I heart paper person. Um, all the data I gathered, and then I tried to see if some of those things have things in common. Like maybe something doesn't work. I don't know. Maybe the canteen does not have really good food, but the containers. Also that place where you can sit with your friends and have some good time when you're eating food that you are not actually enjoying. So this two characteristics could go together, and they could be something that characterizes this persona. A cold eyed anal. Call it however you like. I usually like to have a male and a female. If it's like a broader spectrum off course. If it's a problem that specifically tailored for a gender, then you will have to create a persona that matches that gender. Or if you don't need to have a specific gender, it could be at persona. That is, whatever you feel, it's more fitting at that precise moment. I mean, gender is partially having to be taken into consideration is not always what makes the difference, but sometimes you have specifically tailored applications. You need to be doing eso. You might always have to consider that to when you're creating your personas. So, um, I usually also like Teoh personal personalized this persona So they have a specific I don't know clothes, maybe, or because maybe they're like university students or their people that have to work in an office. So they have to say in the specific or office standard, eso make this personas the most. Let's say, humanize as possible. They should become the people you look out when you need to think about your application. So now that we're done with our personas, it's time to go on another, deeper level that we still have to consider for our applications. 4. Lesson Three: So now we have our personas. We have our focus group, but something we also continue need to consider as where is this all happening? So some applications on some websites don't need to be thought as something that has to be functional in a specific place, especially when it comes to websites. You can go on a website whenever and wherever eso you might be needed to think more about the device you're looking at your website on rather than the space. You are looking at this. What side or application in, Um, but let's continue thinking about the university example. So if we have to tailor a specific application for some students off a university, then we might need to know more facts about this application. If this is something that helps the student to move around the application, we might need to know more about how the architecture er off this university works because maybe there are some constraints in the architectures that we need to think about. Or maybe we can integrate our prototype with something that works in a specific area off the school might need to know about how many students are there. How many teachers are there, Where do they come from? Which are the studies? They are studying all the subjects and why are they studying? Some subjects may be answered in the area or if there are tailored areas to specific subjects, because that could be also helpful. We might need to know if they need specific procedures in order to, I don't know, register for exams. And if there were already out of procedures that they were using and why they not work, why they work. And again, you need to gather data on why was something working and why something was carefully not working, because that is what helps you to understand if you're working, going towards the right direction or if you're just repeating some problems that are already existing or if you are creating new possibilities. Because what is the most important thing to keep in mind when you are designing a prototype so the person type will help you to understand what works and what does not work. But a prototype is not done. The first time you do it is not done on your first layout is not done on first design. Absolutely enough. The most important part after the research on off course, the design but the design needs to be treated on a complete different level is the fact that is not the 1st 1 you will do. That's gonna be the perfect matching one. So whenever you might be working on an application, the prototyping process takes a very long time. But it's what is gonna bring you to the best result ever off course. While they also have to take into consideration is the time you need to be able to prototype. I would always say that in order to prototype effect Lee an application, you need to test it for an entire week. Eso you start on Monday and then Tuesday, Wednesday blah, blah, blah. You go on showing the prototypes with different people, giving them maybe some place where they can right there, Yes. Write the thoughts about it where you can have a child and just discuss about the experience they had. It is very important to look on, like how they will look at the application and if they will make some sort of comments on whatever thing, like never assume you have done everything right because That's an assumption that as designers we tend to be doing, Um, but always keep in mind that the application your prototyping might not be for other designers might be for people that don't care so much. Maybe about the color you it took you two hours speak. But they might think that the funk you pick might be a bit too harsh or might be a bit too childish or might not match what they're actually doing. Might be hard to read. Might be too small to beg to all center to in the center. So whatever it's been told to you, take notes about everything and make sure that the notes you are taking haven't order and are organized. So no flying papers, no, like random notes on your phone. If you're taking notes on your phone, make one big note and you write everything in there. Then you put it on your laptop, a new color coded or you just divide, like how many people said the same thing. How many people complained about this specific feature? How many people appreciate one thing, and why always also consider why? Because this is what will help you to say OK, maybe those people, this group of people didn't like this fund. Why? Because it was not matching with the whole situation, and they felt that it was maybe too serious for the type of application they wanted to use . So if you see that they have this type of reaction, the next prototype you will be doing will have a different fund that will be a bit more funny, a bit lighter. And then when you will show it to people, uh, you could can see if you showed it to the same people. You showed it the first time that they will see the difference. They will notice the difference. They will come in on it and they will be happier. Or they may tell you. Okay, No, this is too childish again, like is there anything in between what I personally love doing is also trying to print out my prototypes in order to have them on paper. So when I make a person, try this maybe second version or the third version off a prototype. I can always show them the whole development history and say, OK, do you see? Can you know this changes and this is something you can do also. What? Your client always make sure to have a double check when you're flying about application prototyping process because your client might tell you Oh, no, I don't care. I don't care about what uses her thinking. I like it this way on. It's completely fine for me and okay, that's your clients choice. That's what your client's needs and once. So there is that moment where you have to stop and say, Okay, this is a product I'm delivering to you. But before doing that, you always need to make sure that if it's not told you what we want this fund, we want this colors. We want this working in this precise way. Then it needs to be double checked at least twice. I would say 5. Lesson Four: So the last aspects you have to keep into consideration when working on your prototypes is if you have anything that is already set when it comes to color worries or rules off, for example, funds on something that has to do with the branding. So if you're working for a specific brand once a website or an application never loved, they might already have their asset off funds and colors and shapes. So you have to work with that and off course. You have to ask your client to be given all of this information before you start working. If you are not giving all this set off informations, then when you're doing your initial research about where this work application is gonna work and what are the functions, then That is the moment where you have to start being creative and think about your color palette and your fund and your shapes, because this might not seem something that can influence your work if you're not a designer , but especially colors and shapes are two things that are gonna influence a lot, how people will perceive and interact with your application or whether also your website, you need to study a lot of color. Derian Off course. That's part off. Designers work on how you, you know, get on with your education. But what I usually suggest is if you are a tailoring an application to a specific service or to a specific place, then go into that place and look for the colors that characterise this place. Because what is very useful and very easy to help the user to connect with the space is creating a repeating pattern off colors. This means that if the colors that are characterizing the application are also the same colors that you find in the space, then the user will easily connect to space and the application and the functions, rather than having a complete different set off colors. Same thing works for funds. Eso If the place that you're taking the application to has a specific fund or a specific let's aim aesthetic than the best thing to do is trying to find a fund that is the more similar to the aesthetic or that matches that aesthetic or just get given that specific funds from the from the company or you or the client they're working for for example, the application I did prototype Waas tailored to the use and Alexanderplatz. Bellion, that's station the main station off Alexanderplatz. And that is found in Berlin off course. So what? I did Waas going around the station and started taking notes off the colors. I was seeing more on, then looking on Pinterest and see. Oh, OK, if I Google photos Belene Alex in the blood's, then this type of for those will come out and they will have the stamp type of colors. Then I started asking around the people means, like, how have you seen this color like, is it no, like extreme right? And people were like, Oh, yeah, I remember. I always tell my friends than when they get lost they have to wait for me in the station that has a specific color and that was very useful because then I could work on the collar apartment there was specifically tailored to the specific place so that when people see that application, they will be able to tell me Oh, yeah, I already seen this colors. I know that they remind me about something and then when they use the application in the space for its state owned from, they will be able to say, Oh yeah, I recognized this color as matching to the walls on this It waas What will make people more tourney in using your application and more torrent, use your your service If you are trying to make a connection between the use on the service itself, this will help a lot to create bound and also to create what is a visual memory. So even if the people don't remember specifically the name of your application all or the name of your company or the name, all blah, blah your website. But it has a very strong visual identity on a very strong color palette and set of colors. Then people might be able to remember those colors and connected when your service this makes shorted. Even if they don't remember the name off the sport of specifics, they will find a way to find you and recognize you anyway. 6. Your Projects : So now we talked about what are the most important steps you have to take before starting designing your application. We are not going to talk about design in this class, but it's gonna come in a new class coming in the next weeks. But what we have to talk about two candor before is how you're gonna work about your application. So what I would like to suggest you to do for your class project, it started writing about what you want a prototype. How do you want a prototype? It maybe just start putting some pictures off the place that your application could work and or some references off applications you will like, maybe started thinking about who are the people? Your application is state or two. So if we all share our projects together, we can then have a discussion regarding whether we are maybe going in the right direction or not. And if there are some steps that are not clear, if there are some steps that you think should be improved or other steps that you think are more fundamental for your work and why so please feel free to share your project development in the project section, and I will be looking at it and responding to your comments on help you and guide you a little bit and give you some suggestions on during the next class. We're going to talk a little bit more in deep about how to design your application when Adobe 60 based on the research on the classifications you did doing this first part of our journey together. So thank you. Still, so much for watching on. I hope you learn a bunch of useful thanks in this class. And I can't wait to see a project, so see you next by