Learn our UI design process - Prototype apps & websites. | Justin Marchant | Skillshare

Playback Speed

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

Learn our UI design process - Prototype apps & websites.

teacher avatar Justin Marchant, Owner/founder Black Bear Creative

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

7 Lessons (1h 11m)
    • 1. Class Introduction

    • 2. Class 1 - Define

    • 3. Class 2 - Plan and Sketch

    • 4. Class 3 - Wireframes

    • 5. Class 4 - Prototype

    • 6. Class 5 - Feedback

    • 7. Class 6 - Asset prep

  • --
  • 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

User interface or UI is the space where humans and computers interact. UI can include the actual physical devices involved such as a computer or mobile device, the keyboard, the screen and the mouse; or it can refer to the software systems, websites, and apps that help users perform tasks and perform actions with computers and devices. This class will teach you how to use our framework to prototype software systems like websites and apps.

If you're a freelance designer or new to designing digital interfaces and looking to add UI design to your list of design services. Or if you want to add some more tools in your designer toolbox, then this class is for you.

This class will cover:

  • Defining the project’s problems and goals
  • Planning and sketching out the process
  • Wireframing
  • Creating a prototype
  • Using feedback
  • Preparing a project for development

By doing this class you should have a better understanding of how to complete a UI design project, and have a framework to take on any type of software project.

This class isn’t for advanced UI designers and is not a tutorial class on how to use the programs. This class will go through the fundamentals of the design process, that we use to complete our client projects.

Meet Your Teacher

Teacher Profile Image

Justin Marchant

Owner/founder Black Bear Creative


Hi there!

I'm Justin from Black Bear Creative, I run a creative studio based in Australia and I want to share my tips and advice that I missed out on when starting my own business. Hope you find the classes useful and feel free to let me know if you have any suggestions for classes you want to see.

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. Class Introduction: What's going on, Everyone? It is just in from Black Bear Creative. I'm the lead designer Ah, and owner and operator off BlackBerry creative. And today got another class I would like to share with you and it's called you I design process. So this classes to teach you the framework we use when we prototype different tops of software systems for websites and APS. So before I go any further, what is you? I designed your I design stands for user interface design. So user interface, or you I is the space way Humans and computers interact so you I can also include actual physical devices such as computers, mobile devices, The'keeper's board, the screen, the mouse. But it can also refer to software systems ah, websites and maps that help uses, form, task or perform actions. So in this class, I'm gonna discuss more about the letter Ah, so more about the software systems websites in APS. This course is more for the freelance designer that is new to digital design. Designing websites designing interfaces on and is sort of looking toe. Add your design to their design toolbox or just want to improve or have some sort of foundation off. What type of process to use when doing You are projects. So what you gonna be learning in this class? Basically, in this class, I want to teach you guys how to the final projects. Problems in goals. How do plan and sketch out the user process? What? Our wire frames some time saving tips when creative interactive prototypes which we've learned over the past three years of using this framework, the feedback process and how to prepare project for development. If you don't know me and you haven't seen any of my classes before on the owner operator of Black Creative, it is a beauty ik home based studio based in the beautiful Australia. So I've been in the design industry forever half a decade and being running black, bake ready, full and nearly of afraid years. Now, um, we've been using this framework for those free ease, and we've been working with clients such a strange because banks, innovative startups, complicated software systems and even local business websites. So it is very versatile and can be used across any top of application or no matter how complexity can be. So what I'm teaching you isn't new. It's based off, you know, a typical design sprint, which is used in the industry. But this version is a very cut down streamline. Um, easy to understand framework that anyone can understand that anyone can use within their day to day design practice. So by doing this class, you should have a better understanding off how to complete a You I design project have some sort of framework when you take on a top of software projects. So this class isn't really for advance. You are designers. I will be touching on a lot of basic fundamental stuff about you are designed it. This class is more for someone that is new to the industry. Has no has never had worked on a, um, you I design project before or sort of being in the print side of the design industry and want to sort of add that to the arsenal of skills. So that's for you. I'm I highly recommend you learned this framework so you can go on and provide an extra service on DA all the other stuff that you do. So this classroom, any tape At 60 minutes, I'm gonna try my best to go through and condense a lot of information into just key. Take away points said this isn't a design tutorial class. So if you haven't ever used any design software before, I strongly recommend that you do some other classes that teach you the basic fundamentals are using the tools as this class isn't going to go through that I'm just gonna assume that you guys have used, you know, the Adobe software products. Um, this is gonna be really focused on using Adobe Eckstine, because that's what I use, and that's what I know. But it's more about the framework we use for the project as opposed for the intricate tools or the how twos and stuff like that. So just very mind if you're looking for more of a tutorial based how to use the tools, then maybe trying of across. But if you want to learn the foundation, the fundamentals off going for a U. I design project that this class is for you. So if you're interested, watch the first class. So also you be able to download our free creative brief, which is basically a template God. So when you're going into the first initial meeting with clients that's on the final face to face and you trying to gather all this information, Um, for the project. This essentially will help you ask the right questions and organize that information. So it's easy for you to understand and look back on as you go for your project. So hopefully that spark some interest for you. If so, what's the first class and I'll see there? 2. Class 1 - Define: all right, so welcome to the first class, everyone. This cost is how you will define the projects, problems and goals. So we've seen any type off software projects where roots, a website, app or any sort of complicated software system. There are certain things you need to know before you can start and make design decisions. You need to communicate with your clients and get as much information about the project as you can. So you need to understand how this software is going to solve a problem or challenge for the end user. So when I told that the end user I'm talking about not the quien I'm talking about who were the last people going to be using this software? It may not necessarily mean the client it was more the customer or the person that they're trying to sell the product to. So obviously you're quiet wants to build this software for a reason and most Tommy's because they have a you know, a problem within their business or they have a challenge that they want to sort of achieve , whether that be gained more more users, build more brain awareness or sell particular product or program that you know they have their own problems that you need to identify so you know what you're trying to solve. So from there you can and discuss you know how to successfully deliver a win for both the company and the end user, because in a day you need to keep the you're quite happy solve their problems, but most of the time you can't solve their problems unless you solve the end user problems . If you created an app that the quiet might like, but then the end user might find it too hard to use, Unreliable says. Then it's gonna create more problems for your client, and vice versa. So you need Teoh. Obviously, identify the problems for both both parties, and this will also make sure your design solutions based the common misconception is with you are designed that it's purely focus on the visuals on the looks on the aesthetic that is one part off the of the You are design framework. The best you are design is always solutions based, so it's always focused on how we're going to solve this issue for the user, how we're going to solve this issue for the client using a particular spread. It using a particular type of design when you're making design decisions is purely based on solving a problem as opposed to what you feel like. He's a good color. Good layout. It's more for what is best for the user. What is best to solve the projects problems. So when you want to define your client's goals, you need to know why are you current in this software app and website? What do you want to achieve from it? What are your project goals or mar stones? And this is particularly useful when you're trying to create the scope of the overall project. You know, figure out what the specific goals your client wants to achieve. Laz, you to easily set out the scope how much you're gonna charge when things should be finished . This also, L A. To organize the timeline for the project as well. Who will be using the actual software Apple website. We need to know who we're building. This software for a zit will reflect into our design decision making and also a handy tip. You can also use our you I design brief form. You can download at the end of the class to give you a better framework and to ask these questions and structure them for your brief. Okay, so we need to define the end users pain points and goals. So to do this, we need to find out what is to use his background story. And when I mean about background, story is pretty much a ways is user at in their current life status, you know? Are they married? Do they have kids? Where do they work? Ah, what did they aspire to be? Any information that may affect the purchasing decisions the way they use software. So we're gonna use this background information to paint a picture of this person to make him to make the more realistic to be more as a person as opposed to this imaginary fictitious entity. We want toe, bring it all together so we can easily picture this person in our head in your imagination . So where do they leave and how did they live? So where in the world they live? Do they live in an affluent area? Do they live in a socially economically challenged area? Who are the neighbors who are the people that interact we've. And how did these factors sort of effect their decision making process? One. The most important things you need to know is, what are you users needs? So using this backer and information will help you sort of identify the actual actual gold your user wants to achieve and obviously, how that's going to solve their underlying problems. So if you use a wants to purchase a product, we can use the background information to understand why they want to purchase that product . What is what is it? It's intended use. How would they like to buy the product? What are the things that are stopping them from buying this product and so on? And then once we uncover the user's needs, we need to understand how we can exceed these needs. So it's one thing to allow your user to accomplish a task with senior software, but there's another thing to go above and beyond and improve the whole experience. So also we need to understand what top of similar software absolute websites they use so we can use them as a benchmark. So it's a great way for us to compare the different software in absolute use. Figure out what works the best with those examples and figure out what doesn't work of those examples and to include that within our own software design. So use these goals and pain points as your North star. Whenever you're making any top of design decision, make sure it is purely based on what is the best for the user. It also helps if you have someone with a tech or software engineering background involved in the project, as they can help you identify the most practical way to develop your proposed solution. This is super important. If you're someone like me that doesn't have a code or doesn't have any software engineering experience, it's great to have someone with that background to oversee what your plan is and to let you know if there is an easier way to accomplish this or if there are any technical limitations that need to be considered when coming up with a solution. So once you've got all the information, it's time to bring it all together and into some sort of document. We left the court majority of brief document You can use our provided you are designed template to sort of bring you all the information into one cohesive, easy to understand document, So this will allow you to look back and refer to the top of uses you're designing for. It also allows you to find waste is simplified the use of process and to find any technical limitations, off platforms and integrated software. And it can also be used to keep both you and your client on the same page. And this is a very important one. As you go along through the project. It's easy for both parties to sort of think of new ideas, thinking new stuff, hearing there. But then you don't want to get into the issue off scope creep where your client starts proposing more and more and more different solutions that you know you both didn't agree with in this start, and then you end up doing more work, then you agreed to in the beginning of the project. So it's super important to keep everybody on track to keep everybody on the same page and something you can refer back to so you don't end up with scraped crate and doing more work than you should be doing 3. Class 2 - Plan and Sketch: All right, so in this class, we're gonna be talking about plan and sketch. So before we jump onto any sort of design program, we need Teoh. Have a good understanding off held. This software is going to work. What are the processes involved? How the user flow from point A to point B. Eso What you'll need during this phase is a good old fashioned pen and paper. Doesn't matter which taught. Doesn't matter. What type of pen doesn't mean it was a payback. Or you can use a white board, which is very handy, especially when you're sort of working with more than one person, can get everyone's opinion on board, um, and have more of a sort of group discussion or something to record your work. So where there be post its or at the end of every sort of whiteboard session, you take a photo and you have that on fall. And you can use that photo as reference when you designed the wire frames and going through the later processes. So the most important part when you're doing this is to map out the journey and when whose journey? I'm talking about the users journey the end uses journey, so start by mapping out the end Users journey go for the entire process from start to finish. So from the moment they lend on the page order from the moment they look into the app so to the final stage, where they complete their use a goal. So keep expanding into cover all these goals from step one. So every action that you identified in the beginning make a hole user flow until you complete each separate task. So from he, you should be able to identify any possible hurdles or issues that the user may come across during each process. So this is a great way to sort of see any hiccups along the way or alleged to sort of expand fervor to avoid possible problems that they may come across. This is a good way to put yourself in the user's shoes and use empathy to sort of create a process, studies easy and seamless for at the whole software system. So to give you an example, what I'm talking about, you've got the image on top there, which is one that we've done for sort of an admin system to give you an easy, simple example of a user flow. Let's take a look at Instagram, so I'll log into the instagram up. So from here, this can even further expand. If I may be forgot my password or want to log in via Facebook or Google, whatever the option is that can expand fervor. But assuming that I logging first go, I'll jump onto my newsfeed, where I can scroll and look for all the different pitches. But then, from there at a photo or out of video, once I uploaded my photo, I can add the descriptions Adama, Hashtags and at all of a different type of information. Then, once I've done that, I can review my posts. Make sure I've spelled everything correctly. Make sure I'm happy with the photo. So if I want to just cancel it and maybe didn't crop the photo the way I like that, it just so they asked me to go back and just up re uploaded, or maybe make some changes to the description. But once I'm happy ago and post it so that is basically a very simplified user flow just to give you an idea of what I'm talking about, so this will also L. A. To determine the scope of the project. So when you're pricing a project, it's very hard to figure out how long it's going to take you. If you haven't done any of this sort of planning or sketching face because you won't know how many screens that involves, you don't know how many actions are involved in order to complete these user processes. So I like to use this planning and sketching face to sort of help me scope out a project and understand Helen is gonna take me and how much work is involved to actually complete this project. Once we've done the planning and we understand how the user flow is going toe work, we can start sketching the screens, so this should include the layouts, buttons and navigation. It doesn't have to be perfect. You don't have to be a skewed oddest to do this. It is very rough. It's very draft, and by doing this you can find the best way to create the navigation functionality. So what I mean by that is it allows you to figure out the best way to create your your navigation or your navigation bar, however you're using is going to navigate for each screen. You will also help you see how the whole process will come to give us screen by screen. So if you want to get the best results, get more than one person involved. I'm seeing other people's ideas will help you expand your thinking and help you find better solutions faster. That's why whenever I'm doing these types of projects are get my junior designer or even ask a friend if I have no one available. If you do work with more than one person, definitely used this strategy. It helps you create the processes a lot faster, and also you can sort of pick out issues with each other's processes, and you can just get solutions a lot faster way. 4. Class 3 - Wireframes: when we're designing wire frames were designed the structure off the layup, and there are some examples there that we've done in the past. So wire frame is basically the backbone or this skeleton off any software process so it will allay too quickly. Map out a low fidelity mock up, and what those low fidelity means is basically super basic bare bones design. So don't worry about images, fonts, colors or any design. Elements at this stage use boxes and shapes to represent the layout. So with these boxes, they can be used as place holders to create the structure off the design. Sir, from he, it is crucial that you get feedback from the users and clients, and this will help you make changes that will make sure that you're achieving your user goals. So useful tip is focused on creating the core functions off the software. So, for example, the main navigation. So how can you use a move between points off the process? So used lines and dummy texts placeholder text to represent the contents sections, so you don't need to hell and your client for content in terms of copyrighting and stuff. At this stage, We don't need to worry about typography. We just want to know, OK, some text is going to be he heading. He's going to be he. We don't really need to know what is going to say. You know what sort of things? So keep it simple. You can all these lines or placeholder text and remember to consider the screen sauce. This is very important, so you need to know if it will be on a tablet, iPad mobile or desktop or a combination in 2020. All your designs should be responsive, so you need to consider how the layout will work on multiple different screen sizes. So the layer off the content obviously need to suit the divorce. So I got some time saving tips for you. So as the design software improves over time, we like to take advantage of much as we can to save time when we're setting up these interactive wire frames and prototypes, so create components. So I'm referring to more db x t for sections that are repeated for out D design. So what we'll do after this is go for an X d fall, and I'll show you what I mean by components in sort of hell I create them and how I set up a fall. So common components are navigation menus. Foot is testimonials, buttons, quarter action menus in feature sections. So if it's used more than once for out the process, then created as a component. So another important thing to do when you're setting up your for always creating H screen, using the main navigation and adding your interactive links before you start designing the layout. So once you've created all the screens and pages, they're going to be using this project. So correct your main navigation. Add the links that will go to each individual page and then create that as a component and then copy and paste that on each screen or each page, and each one will already be linked. So this will save you from having to add each individual link. Teoh each bone on each navigation on each screen, so that's super important. This will save you a ton of time. Basically, you're creating one component before the links on there, and you copy and pasting that on all the different screens in the process. And why do we do this? it saves time we're updating to design automatically applies to stall on or the child components. So all those individual components that were copy and pasted all of them we changed automatically at once. You just change the one the master one and would change them all. And this is very, very helpful. One working on a lot of screens. So some projects maybe five screen some projects, maybe 50. And when you're working on this 50 you don't want to be changing 50 screens every time. You know, the client wants to make changes on a particular thing in the navigation, create one component, the master component, and that will change them all at once. So much easier to manage all the interactive links this way. So, like I said previously, these classes in a tutorial on how to use Adobe X'd or how to use any of those top of programs. This is more about the framework itself, but off what I choose some time saving techniques that can also be applied no matter what sort of programming using but more specifically for adobe X teak, which I use all the time. They're just some crucial tips that just save so much time and unnecessary when you're building very complicated kurta types in interactive wire frames. So, for instance, for this example, this is a website. We're gonna open this up and call this home. This is the home page, and I'm just going Teoh, create the pages on the need question services call this one built. You will make this one contact. Okay, so we gotta pages that we need for this website. So the first crucial component I need to create is de navigation menu. The navigation menu is going to be used throughout the whole site. And so for assault like this isn't too bad to create one and copy and paste it to the other pages. And then if I need to change it, change each 11 by one. But you've saved his website was 100 pages, 20 pages because crane, a project that had over 20 pages. I don't want to go for and change individual parts on the navigation one by one for each 20 pages. So what I want to do is to create another page. He and I'm going to call this one components. Spell it right. So this page. He isn't part off the the pathway or the user float off this website. This page is purely going to have all the main components that I'm going to use for out every single page. And now I'm going to sort of control them all from he someone create the navigation. So make a little navigation books. He it's not gonna looking less, but just to show you what I mean, we'll have a lager. He so going to create some never links. Neil, call this one time and I'm going to press repeat, greet, which is in the top right there. And I think I only need full links gonna increase the sort of petting between them. And once I'm done an UN group this link and named incorrectly services bounce contact. And that's my never bar. So this is going to go across the whole side. And like I said, I don't want to constantly change of you a long time. So what I want to do is go to prototype and I can even drag this to the page. I wanted to go or click on this little everything. He it's rot. Choose destination and I'm going to go to services. Same thing with bouts. Goods that wrought. Think about fuck Click onto. I could drag it along the way. So I want to go. But in this case, it was gonna good to drop down in quick contact. So now if I go to the little play button up here, the preview button, it will go to those pages. I can't go anyway, because there's no navigation on the other pages. So this is where the logo is going to be and also want that to go to home each time. So from here, I want to actually create this as a component. I'm not sure what they called in other programs about any X'd. They called components. Someone hover over so in a click and drag everything, select everything. Can you have a right click going Make component or control? K, or I can go up here to objects and make a component. You know, it's a component because it has a little diamond on top E. So this is the master component And what I can also do if I go to this little boxing in the bottom left, I can see it here saved. So when a double click on this and Kolobnev Bach. So I know what it is. So that's our first component. And if you get it, you can say everything is nice to the old linked up. So what I would do is copy and paste it on all these pages. He so or perfectly paced in the rights position. And now the links still connected. Everything is all linked up. You noticed that whatever the main page, it's on. The links obviously won't be available cause it's already on the page. But if I go toe home and they make remember, I'm in prototype at the moment. So if I go to and I make this the actual home page, the little home like on there, I got a preview you want? Sure, anything Because there's nothing different on each page to show you that worked back to design put hi now so you can actually see them change services about contact. It's going for each different page, so your services click on the logo will take me back home. So the other reason why we do this is if I wanted to say changes. Logo on it to change the color of this, You can see I just changed the master component and it changed or the other components that are linked to it. I didn't have to go through and change each individual one. I just change it from he and it would change to whatever I said to you Just need to remember you need to change the master component. And the master component has a little Greek at the green diamond on the top left corner. You see with these other child components that they have a white diamond. So these, if you change any of these, it won't change the others. So if I change this, you're only changed the individual. You weren't changed all the others, because only a child component going to go back. So just very mind that you always need to change the master component. That's why I like to put all the master components on one screen core components because I know they are the master component. Okay, So from day, I'm going to create a foot up because the foot isn't only on every single page, just like the navigation. It's always there. Son of make cool little foot off make. So my Lego Parikh a there aunt. For now, I'm just gonna put some fake lines that are going to represent text. So that's my foot are so I can even create this group it altogether copy and paste on each page. But if the client asked me that change anything on the foot up therefore have to change from each individual one or delete them or changing on one and a copy paste again, which is can be annoying when you got 20 screens. So they're like we did with the navigation. We're gonna haul like everything and then I'm going to right click, make component. And then we made another component, and you can see here in your assets tab, which is a little boxing there, you see a assets and you've got component to any good NFL which were previously created. So I call this one foot up. So now we go nabob and a foot up I'm going, Teoh, just for these purpose, just for the purpose of this tutorial gonna make that logo linked to the home page. So now I can copy paste it on each page, Do we got so other things you can create within components, testimonial sections, feature sections called to action sections, stuff that's repeated for out the site. You can even do buttons as well. So what I'm gonna do on a creative button? Big button. Okay, so that's my button. I'm gonna pick a fart. So when I call this one very car boat 40 that's my first button. I'm gonna create another button like a secondary button. It's gonna be great. I'll make 1/3 button. So there's so many things you can do to show how the prototype would work in terms of what color's the bonds will look like if that pressed or just a communicated to the developer what it will look like when you interact with this website. So now, same thing like we did he want it, create ease into components, make component, of course, but one make component. But to I spoke that room and make component may complain it button free. So now whenever I use these buttons, I just copy and paste them wherever they need to go. And then if I need to change the color off the buttons for out the whole side. I changed the master on the components screen, and it changes the others. No, I only colors. If I change the front safe, I changes to se gunship bold. The rest will also change. It's staking, say how useful it is if you carried a A. So when you create a interactive wire frame, I you know the big bone skeleton of it. Get approval. Then you can always need to do is essentially add your stalls to the components page, and the whole site will be designed in the stall that you want without having to go for every individual part, some more time saving tips Create character stalls within each asset section. For example, humane heading subheadings and body text cemetery were document where you can create your own character stalls. You can do this. We've seen Adobe X'd. So once the wire friends approved. It's so much easier to change the phone paragraph settings on the particular stall, which will change Donald the screens where you've applied that stall so similar savory, similar to how components work. When do you create a master? Stall it. You will change all the stalls that has been applied to for the whole design. So if you picked this particular front for a body copy for at the whole site and then the client wants to change the fun instead of having to go to H screen and changing the front individually, you change the stall and it would change them or automatically saved you a ton of time. Like I said, it automatically changes the selected so across the whole design saves time with the client decides to change stalls during the later phase of the design. It's also easier to communicate with the software developer once you send off the assets. It's just easier for a software developer to see the different top of stalls and to make sure to follow them when they're when they're actually developing. You know your website or your APP. The last important thing on to show you is how to use character stalls so similar I d. When you're using the components, when you use correct character stalls, you controlling the fonts use. It's similar to if you were using it, Toby in design or even Microsoft Word, you create your stalls and will apply to every linked text books will take section for our the whole sort. So, for example, I'm gonna make hitting hitting one. And I want to meet that small awesome make 30 point since hitting free to their my headings and say, Wanted to create some body copy uh, Teoh, create somebody Copy Regula and wouldn't make that 16 points No to a bit smaller. Increased the line Hot 20 full. And that's going to be my body copy. So this is pretty much how I want to stall the the text on the website and I don't want to go through and change the front for every single part. So what I do, I'll click onto the the text that I want to save as a stall. So if it is, it is heading one so great to character stalls in my asset sidebar. Well, my components are click this plus button and then it will save it. Save the details Default the the line spacing the font size So I can even change the name off this stall to whatever I want. So called heading Same thing we've hitting too. Call that eating too. No. Same thing with this one getting free and same thing with my body copy. So now I can stole the whole website. So if I go to the other pages and say I want to make this heading so go quick on the heading I want to change. I'll pick on the quick on the text I want to change and then click on the stall and you'll automatically change it to That's still so know only that. So say the quiet wants to change. What hitting one looks like I wanted to do. He's good hitting one evil left quick or control Click the character stall a quick lit and we can change them all from he so make it 60. Oh, make it border bleak and I'm gonna make a broad pink And now all my heading ones also change And the same thing will happen when I edit hitting two hitting free in the body copy so I could or change it from the assets panel? No, only that I can make. I can even save colors two assets, so you find whatever object I select whatever colors are in there. If I click the plus button, you will add them in the color value and the hex color to the color assets so that developers can use the exact hex code when they're developing the website. I hope you find those tapes useful when you're starting out. Um, like I said, if you want to learn mawr, just look on YouTube. There's thousands of different tutorials on how to use Adobe XT A in any of the other programs I mentioned in this class. But I hope this gives you an idea of how to really use the prototype, Um, and how to sort of create it crazy foundations correctly in the beginning to save you a lot more time for up the process. 5. Class 4 - Prototype: Once you've done your wire frame, you showed the client you going through the sort of review stage Major changes the client approves that happy to proceed, Then you're on your way to prototyping. So we've worry framing You don't necessarily need tohave design software, but when you're prototyping, you need some sort of design software. So software options L A to add interactive links. I used Adobe X'd, Um, that's what off only relieve used. But there's others you can use Sketch Zeppelin and this plenty of more out there, which all even I'd links to as reference if you're looking, there are other ways to sort of show case you are designed. There are so few options that don't l. A are interactive links, you know, which are, you know, Adobe Illustrator for the shop and in design back where pro topping software didn't exist. We mostly use photo shop, so these classes more focused on interactive part of your design. By all means, you can still use photo shopped to design these top of projects, but you are limited into showing the client hell. It will actually be used. You won't be able to record feedback. You're missing out on a lot of important features that these newer sort of you I designed specific programs can give you. So, like I said, he can always use the those other examples. But to B'more, competitive within this industry are strongly recommend. They used Mawr sort of. You are designed focused programs such as Adobe XT, a Sketch Zeppelin and that this goes on. So basically, in this phase, you're going to start to create a more high fidelity design. So high fidelity. So we want toe basically get the designed to look like the real thing. So without code, without the involvement off software engine ease, we want to create something that pretty much works like the real thing. Now we get the starting design elements, logo's colors, fonts and images, and we can start to experiment with the turn of voice and the language we're gonna be using , um, with the buttons and court actions. So we're gonna bring this thing more toe life. We're going to even start adding some copy copy writing eso. If your client is ready at this stage, then it's better to start adding the real copy. Ah, instead of the placeholder text that we put in during the wire frame face. So remember, we're gonna use this prototype is if we're using the final solution. It doesn't have to be 100% perfect. We just want O make sure we show clearly how to use the software and how the user is going to use the software to complete the funnel. Um, use a goal. Build it out as much as we can see when we're testing it within user. You know, we limit that chance of them getting confused just because you know some links don't work. We want to make this experience as easy, and it's sameness is possible. So to do that, you know, you need to sometimes build it out as much as you can see. Limit that confusion when you're using on re aloft users. So don't forget to include all the core functions which allow the user to achieve their goals. And also, a helpful tip is always refer back to the end user goals and your client's goals. Get feedback from a software engineer to see if there may be a better, more practical way to implement your proposed is on solution from a development perspective . If we're working with a software engineering company, we'll send out designs to them as well to get their faith back as they are, the ones that are beauty in the actual software. We want to get their import, as they will know from a software engineering point of view. What's the easiest way to actually create? The solution on day might give us feedback in terms of look, you know, doing it this way may not be the will take us way too much time. Way too much resource is. So if we do it this way we can save half the time on we can still get the same result. And then we may need to change that in El New design. I'm to reflect You know that feedback and keep everyone happy and actually create a solution that is feasible and can actually work in the real world. 6. Class 5 - Feedback: Okay, Say feedback. Feedback East Super important. Sophie Beck is crucial. Get as much feedback as possible from real people. Ah, used to feedback to answer these free questions. So does the prototype solve their problems and achieve their goals? And do they have any interest in the software product? So this one's an important one. So what we find in a lot of these top of project is that our clients use them. These prototypes as a proof of concept. So they'll go out in, use these perfect concepts and show people and say there's any useful the product, any use for the software, um, you know, within within the market and get sort of an idea of okay, should we invest more money and actually start building it all? Maybe we can get some investment Teoh create to further build out this project To be aware of this and why you designed this prototype in most of the time, it is a proof of concept for the client and how it can be improved. So basically, when you're showing people your prototype, you can see how they use it. You can see the wrong things they're doing you can see how they might use a totally different process to do in action then you originally intended for them to do. It's very useful to see uses perspective, and you can make adjustments to make it easier for them to obviously completely user goals . I think the biggest misconception is that you know, you might think that this is the easiest waited to do this action, but its unity handed off to someone else. They'll find 10 other ways to do it, and sometimes it maybe even hot. They might do it the most hardest way. But that's where you need to be aware. Take the feedback on board and create a solution that works for everyone. So another useful Teepees that measure I design software allows clients to pin this feedback to specific sections on the design. So try to utilize this these tools in these features as much as possible inmates getting client feedback a breeze. So I know from experience with Adobe X'd the duty. So what? I would do it. I'll send the link to the coin for feedback. Don't open up the link and then they'll go for the prototype and pin their faith back to two particular sections on the site and you know I'll go through. Look at the pin, make the changes up that the link in the marked a note as resolved. It's just Asia for, But if you on the client, it's a lot faster working with feedback on DWhite, not use all those tools as much as possible and make your life easier. So what do you do? We feedback So we get a feedback, and then obviously we make the change. We test, and this process will go backwards and forwards, obviously until we test and the client is happy. And then once the clients happy, it's approved. So that's sort of the feedback loop. We've seen these top of projects, So basically getting the feedback you're making changes, you test get the feedback, and then you may need to make another change. Test feedback, and then the whole goal. He's getting it approved over the line and with the client super happy 7. Class 6 - Asset prep: we need to organize all the images or the icons in all the fonts and in adobe x T. I'm going to show you how to do that and have the sort of package and sort of show you what I do. So we're going to prepare the development specifications for the software engineer. The cool thing I know. If it w 60 you can actually export the development specs. Andi essentially show. Basically, that's gonna show the software Ngeny or the padding or the sizes of all the boxes, images, sections of the site. Um, you know, it's so they can get it pixel perfect. And I'll show you an example in a dead 60. So don't forget to include your character stalls, and this will ensure consistency with the pro top and the real thing. So you're your go during this stage is toe organizer thing as neatly as and as coherently is possible. So when you give it to the software engineer, there have to sort of second guess or make their own assumptions more prepared. The more organized you are, the easier it is for the software engineer to pick it up and start building and start coding and making it look like the same thing. Ah, common issue that you find this harbor projects is from the concept to the actual real thing. So the first thing that comes to use your understanding off health code works. The 2nd 1 is the capability off the software engineers Well, so if you're doing some crazy design, that's 100 different types of layers, and it's a little different organic shaped and all that sort of thing, and you give it to a junior developer. Chances I It's not gonna look like how you want to look like, um, so you gotta bury mind. And who you giving it to? Who's going to be actually developing your work? So your goal is to make it. That transition is easy as possible. One, because you're quite I'll be happy to is because your design will get khweis it to what it should be. Because there's nothing worse when you give it to a developer and you see the actual life sought and it looks nothing like you wanted it. It looks terrible, and there's nothing you can do. So don't forget to include any notes that the developer may need to know, for example, like animated interactions so hover over states or any court animations that you want to happen for out the design you are. We need to sort of show how what it will look like or leave a note for the developer to make sure they don't forget to add een. Because if you just leave it as static, the developer would just think you want aesthetic. So be very specific. Don't forget to add those notes in the software engineer is not a mind reader, so you need to make sure you add those notes in and make it as clear as possible. What you look like and what you want in So in this part of class is going to show you how to prep your assets for your website or are pointing top of software your designing for development. So there's multiple ways to do this. This is how we do it and what's worked with us in the past, so essentially going to create a folder where all my assets are going to go so I can zip it up, make it nice and neat thes before I send it off through the developer. So in that photo, I'm gonna create another folder. I don't call that navigation. So in this photo, I'm only gonna add the assets used in the navigation. So the main navigation and the food are so open up, X'd. This is a project that we've done in the past and off would be a great example to use to show you how we're gonna prep this design. So if in this main navigation we need the logo, we need icons. We need anything that the developer can't create with code Select the logo, right click export selected. And I want that as a PNG fall export for web. If I was, if I was going to do a IOS app or android app, it's like that option. But this is a website, and it's gonna that's going to give me at the asset as the original size and also double it's size so I can make it higher. EDS. So once that's done on export that and then if I go back to my navigation folder, I can see the two falls. He so the original sauce and the the doubled source. So we jump back into X D. And we need to get these icons. He's so the CART icon and the search icon so I could slick them on the side pot. He right click export selected. And instead of a pain J, I want them as s V g false. Just so we could have a bit more high resolution and a bit more responsive. Um, in terms of that fault top so you can pick whatever you want. You compete P and G pdf and J pigs will. But we're gonna go spg and export those. And if you go back here, can see them in the photo. Anything is. I don't I need them double the size because there s V G falls. They don't lose resolution Now. I need to get the assets from the foot. Are so same thing he goes, this logo explode. It owned as a pain G web. I need to call it something else. Change the name and we also need the social media icons which were rich and subtle. Spg affect the falls and also need this email icon here. So, in a select all those right quick exports selected and in a select SPG and Export. So now I have everything needed to create this main navigation and the food off. And that's good. Jump back into X'd. So we don't need static images of text. We don't need to export any of this. This is this can all be created for deed development Face. We just need these elements that the developer concrete free code. So one of the dudes go back here, I'm gonna create another folder. I'm going to call that home page in all our home page assets are going to go here. Go back to 60. So we needle the images. So this hero image, he has a mosque as a radiant mosque on there. So if I turn this off, you can see you see the great mass there. I don't want to select the gray and mosque as an asset because that can be created for development. I do want the photo underneath it, though. So if I click on the layer below it, which is the photo I can export that export as ah PG Web. Make sure I save that in the home page folded. Now I could hear a one export. I now have the falls ready in the home page folder. Now, I'm gonna go through the whole page and make sure I have everything that the development is going to need once I've got the more highlighted go to my side panel. He and exports selected. I wanted them. Is PNG's Web good down here? Have to double quick within this image feature because it's a component object. I have to do a little more work clicking the actual photo exports. Selected P and G. Remember, I don't need the square element. The backer and element don't need to text and I don't need the button. Ah, elements as well that will be created through development. I do need to communicate what typeface? Any to use, how to set up the topography, what colors to use and all that sort of stuff. But I'll show you how to do that after now when the guy free same thing with these exports selected and we've repeat grids like this example, I need to click on each individual one to get each individual photo Cool that free. We need this photo. He and we need these individual photos as well. So if this repeat greed. If I just you any allow me to select one of the photos. So if I select export it, um seems like already have that in that folder. Um, Anita is actually click on each individual photo, export them great for doing this. This one here and that should be all the assets for the home page. So go back to home, get out. So I go back to the homepage folder and all my assets. Oh, he for the developer. And what you do is repeat this process. Crate each folder for each page. Um, so I would create the about page whatever pages we got here. So it created about programs, team case studies, tips and tricks. Contact are credible those folders and do the same process. So once you've done that, everything is nice and neat, Irving in everything easy in its right place, you can go to share. And if you want, you can. If you already created a link you can save on top of that link, or you can create its own. You can create a totally new link and his instead of design review, which only allows you to get feedback For the prototype, you can select development, which will create both the option to add notes and shows the Dev specs to the developer. Um, you have the option off adding downloadable assets if you got a big project, sometimes is can stuff up. So, um, it's if you want faster load times. Um, this is not really necessary. If you've done what we just did and organized all the file types in the right folders, you're gonna send that separately. Um, this is grateful small projects. I want to take this off, and we can just let anyone to see it with the link and want to create a link. Okay, So once that once it's created the link or copy and paste it or you can click on that link as well and and the guy you see the prototype, which is a zoo normal. We can add your notes there as well. But most importantly now, if I click on this little right side here, it says view specs. I can see more information. I can see that the development specs needed to design this website. So as you can see, you can see the colors used in this particular design, it's all saved there. So all they need to do is copy and paste. And you know, it's a lot easier for them to understand and see how to actually build this sort. It says You can see for click on certain objects you can see the sea CSS properties. Grady in options is whoa with sizes. How to create the buttons? What saw as they need to be, You know, the layout properties in just stuff that developers need. I'm not gonna act like I know what all this means because I'm not a developer. I just design it and I prep it for the developers to do their thing. They can see you know what the content they need to copy and paste. What fun they need to use what size it needs to be one ally minute. It needs to be. So that's how that all works. So you send this off to the developer used. Then you go, we feel folder. This folder is called tutorial, but you just compressed this create a nicer does it fall folder for it and send up for email, dropbox or whatever on they have everything they need. So it's like I said, There are other ways to do it. There are a lot more faster ways as well, but that's what works. We fasten us what we commonly use within your process, so I hope that helps, and that's it. So get out there and start download your brief template and start working on some new white projects. If you have any questions, let us know. Indeed, discussion section or email. I said info at a black bear creative dot com dot au. Ah, hope you found this Costs useful. I hope you've learned a couple of cool things. I hope you learn a lot. Please give us feedback. We want to make sure these class is in the future are even better than before. But we can't do that if we don't know what you guys think. So let us know will really appreciate it as well. If you think this is useful, share it with your friends. Share it with people that you think need to know this stuff and we'll see you guys in the next video