If you’re in a discovery phase, moving at pace then there just isn’t time to code prototypes. Mocking one up in Figma is the fastest way to make it feel “real enough” to test concepts.
The impact of the obviously "fake" app when user testing with prototyping has always been something I wondered about. Motion design is a fun reason I like to prototype though, if only to get a little rush of dopamine to see my designs working as I imagined.
Finally someone said it outloud! A prototype made in Figma is not a good option for user testing. But sometimes such prototype comes in handy, for example to show the stakeholders how ridiculous their idea is 😂
I wish he'd actually mentioned figma here because all of this applies only to figma. You can whip up a fully responsive and unbreakable prototype in axure pretty fast. Sure, it might not look like the finished product, but that's totally not the point in a discovery phase. UI can be tested in completely different ways later on.
Wow, thanks for this video! Short but insightful: A lot of designers never mention this, but it really makes sense, especially when it comes to getting appropriate use-testing results.
It's really refreshing to hear this. Especially from somebody with such a prestigious client base (they are the type of client who I imagined actually used prototyping). Therefore always felt like I was 'jumping the gun' by not doing it. This is such a good insight!
Bro you are the best, I am designing for web and sometimes mobile for 6 years and not a single prototype was made - clean flow of screens and video explanation for the client are more than enough. Got your hint about design systems - can’t wait to see how you crush the topic. IMO design systems are overhyped BS that’s only applicable in huge corp teams where one product is polished over years. Other scenarios - design systems (in the way they are presented) are an absolute waste of time
That's why I also spent too much time on my first case study project. Google 'forces' us to do prototyping, even though in my usability study, it crashes most of the time, even though I properly connected every screen. As a result, testers think I've done a sloppy job. I'm structuring my screens in sections with titles as you taught us in your courses, but I really don't want to prototype 200 or more screens for my future projects. Thank you for showing us that prototyping is not the most important part of the UX/UI design process, but rather UI. 😊
Just like you did with onboarding, here comes prototyping. Thank you But i'd still like you to clarify some grey areas 1. Is HTML efficient for iterating? 2. Does the idea of organizing different sections also apply to case studies for job hunting, as compared to using embedded videos of prototypes instead of PNGs? Thank you
Thank you for this, Michal! It's good to know what to spend time and energy on and what is not necessary in the industry. You mentioned HTML prototyping - could you go into more detail on that? Maybe a tutorial?
It's good to know the basics of connecting screens, but yeah definitely no need to learn all that complex prototyping features they seem to now be adding every few weeks. As for HTML you usually need a developer to simply code the views in HTML, however sometimes it can also be an image map (like now) with hotspots, only invisible on click and with form fields coded "real"
Thanks, Michal! almost spent two or three days prototyping for User testing and wasting my time and I thought It was Professnalism😂this video helps me a lot!.
As a "get of my lawn" aged designer. I don't see a lot of use for high level interactivity to the prototype. Most user testing I've performed at this level is geared toward a specific user flow which is patterned after a narrow use-case or a persona and on rare occasions it's used to get stake holder buy in.
fair enough - but in our cases we usually test longer / more complex flows that do have some interactivity required. Of course there are exceptions to every rule, but generally we don't prototype too often at all - that's how it works for us - but to be fair we do quite extensive QA sessions on the coded products based on our designs.
Interesting approach to the topic... I too was always puzzled by what sense it makes to spend a week on prototyping when later it is handed over to a developer (especially web design) at the same time it can actually be coded AND then tested. The only point I see is when it's really something innovative like you said. Have a beautiful day ☀️💪👊
For me prototyping is a very important part of the design process. Only by actually experiencing the flow I can be sure I didn't forget or miss any detail. Also, I find that showing prototypes to stake holders is very important. If I just present them with screens, they don't get the full picture of what we are doing...
I watched the whole playlist of "Learn UI for free" in this channel. This is the last video in that playlist as in today. I'm just starting out as a UI/UX Designer, but I'm not professional enough to get hired. But I learned many tips to improve my UI design skills. Because I don't have any money to buy your premium books (But I got your free books. They are very good❤), I'm very grateful for this free videos of you. Thanks a lot for making these videos ❤❤❤
Hey! Good explanation and it’s a great point of view, however what about testing with prototypes using maze? From where we can get some user data and creating the prototypes takes less time than creating them in html and css, thanks!
It is the same as for other tools, everything has its place and time. I've used prototyping not in all projects but in many. They help: to check if the flow feels right either by yourself, within the design and broader team or with test users; to show the developers how the app should behave in complex cases (sometimes it is easier to show than to write pages of documentation); to showcase and basically sell the design to the clients or help them to sell it up to their bosses. What I do agree with is that there is no need to run and learn a new tool especially for the beginners. Most of the time, simple functionality of figma is enough.
I agree with that, but there is even more complex prototyping tools like ProtoPie which are dedicated for it. Could you explain the usage? What is it for? Because it is for something for sure if someone builded it and I met ProtoPie in “expected” tool for UI designer position😅
Is there a chance to share with us a compelete real app design for one of you customer , to analysis it and see how it ia going in real world with the client ? How do u set ur design system , naming , the elements you use ..al this stuff ? Thanks
Oh my god this video answered all my questions. As a self learner i always struggling in prototype because i can’t make it become realistic. Can wait to see your next video about design system too!
There are many myths around it, and of course this is a point of view from our agency only, so it can differ in other companies , but yeah we do those connected protos very rarely.
Figma's newly released prototyping features are really unnecessary. But making a prototype with final screens (with simple move in transitions) helps to identify if there any gaps in the user flow. When I making designs for concept apps (for my portfolio), I get many ideas to make changes to final designs after making the prototyping.
Over my 5 years of experience doing Web Design, I have only done prototyping once and never done it again after realizing it was such a waste of time. At the beginning my intentions were to show the client the app works and how the user moves around, but as you said there are a lot of ways to achieve that.
Well... I think it still makes sense to use prototype tools in Figma especially with applications and Figma mirror. You can create simple connections with CTA buttons and navigation to show the main flow of the application. OK, I agree that Figma is limited, but for simple presentation it's not so hard, and it doesn't take so much time. For more complicated flows you can always use more advanced tools such as Principle, ProtoPie, UXPin, Axure...
yes, when you have the time - sure. but the thing is that it's so rarely needed that in real projects we rarely do it - even if it doesn't take too much time.
Thank you so much for this video! I have to admit all that wild mess behind prototyping seems scary and the best part is that I don't really have to do it. I can do 100 screens without wasting time on connecting them all. Genius! 😊😊
sometimes of course it does make sense to connect them, but more often than not it's best to focus on the screens themselves - so it makes sense and looks good :)
@@MalewiczHype The next time I have to do wild prototyping is for one of my fall classes 😂 Very necessary. Organizing those screens in a way that makes sense like shown in your courses ❤️ Ever since I started your UI design course I’ve been an organization freak 😂 I label everything. You’re the best!
Thanks very helpful. Can you recommend html tools for recording users' response time and dwell time to specific element such as ad banner. thanks again.
what about prototyping for interaction & motion design ? Will I agree prototyping for user testing, meta-prototyping (especially using framer ) can be extremely beneficial to scope the prototype to be built using web technologies
Really depends on the company. We use them for user testing but they are never more than 10 screens. Also we test very specific functions, not the whole app.
If it works for your company then it's obviously great :) This level of prototype fidelity has never worked for us, I felt like the insights from research were mostly useless (with some exceptions) - but we have a more agile approach than most companies.,
Ok and what about prototyping to spark creativity in you, which eventually would improve the whole project overall and get your client excited too? ( excitment -> testimonials -> recommendations -> more work -> more money). Many of the client won't visualise it without seeing first. Also, isn't a great way to explain visually how it should work when handling it to your web developer? Im a designer myself and want to focus only on the UI aspect. Is it usefull then ?
We can imagine many things without the need to prototype. And some small animations / transitions / interactions we do show to developers when they're different or unique. In most cases however the creativity is in the screen designs themselves.
@@MalewiczHype most probably cause you bond together and you know each other. Would you trust a newcomer that he will get you straight away? Im curious cause was planning to prototype my website and now I dont know what to do :)
we use prototypes to desctibe interactive behaviours. we mostly make interavtive components rather than connecting all the screens. this in turn turns most designs interactive on their own without needing to code. remember that the prototype is the stimulus, tools like maze and usebery use that stimulus to collect data just like hotjar would do with html but ye, we dont prototype every single thing for every screen
there are many approaches of course - we sometimes outline animations for devs for example when they're complex, but generally more often than not we don't prototype at all anymore. It used to be more of a rage when inVision came along and made it easier and more fun, and then slowly became less and less used.
Hey Malewicz, could you tell us what Apps you designed? I would love to download them in the store and be inspired by them. I love the App designs you teach us. 🤩 (+1 Sub)
I could, but I created my agency many years ago so it was definitely different back then, but I can maybe do a bit of history of how we started and how we managed to start from nothing and get better and better clients.
I have always loved the new perspective you bring to subjects that people really don't think about. I bet a lot of designers wished they didn't have to prototype. But then, however not compulsory to know, especially for small projects, it helps people who haven't mastered effective communication and presentation. I hope stakeholders accept this point of view because some them insist on seeing an interactive design. Great video❤
Yeah, generally it's worth knowing the basics of how you connect the screens with blue arrows - but that's actually quite easy. And it does happen sometimes even in our work, just not as often. And most of those complex new features in prototypes are almost never used.
I sort of disagree about the point of "don't do prototypes because they feel fake" - the point of testing in the discovery phase is to validate the flows and features. You can straight up inform the users that it is a prototype. In my experience, they get immersed and forget that it's fake anyway. What I would emphasize her instead is: provide all clickable options, so that the user doesnt get stuck in an unresponsive prototype. All that being said, prototyping in figma sucks and I would avoid it at all times. Axure can provide a fully clickable experience even if the app doesnt look like a work of art.
Why do I see prototyping as a required skill in so many of the job descriptions I see? I was under the impression that it was important from a storytelling and flow perspective. Yes without a prototype you have the screens but what will the transitions be like? It's something I definitely pay attention to when doing comparative research.
Many job descriptions simply copy text from other job descriptions, very rarely they even make sense (saying stuff like we need a junior with 5 years of experience). Most of the transitions are actually the same - depending on the logical postition of each screen (slide left / right) I showed a clear structure in this video where you simply have rows and columns (annotated) of screens and all flows and for many projects it's really enough.
I only use prototypes to explain my idea to stakeholders, to help them understand the work I've done better or to show Devs how something should behave.
Yup, these are some of the cases we use them for too, but more often than not even devs don't want prototypes when the flow is clearly outlined in the file.
I didn't really get the HTML prototypes part vs prototyping (connecting one page over another) argument? Can you elaborate on this? Can't you also make connecting one app page over another also have HTML prototypes?
when you're just connecting pages in a design tool there are many constraints and limitations. one example is clicking in a random place will show the hotspots - breaking immersion.
I think prototype is better to communicate motion to developers or even see by yourself how motion will work and if it makes sense. But for user testing your video makes sense.
@@MalewiczHypeCan you tell us a bit more what tools do you involve to process motion in your agency? As someone who's working towards that field, I'm genuinely curious how other people do it. 🙏
So the title says don’t! but most of the video goes like: the half of the times… are rarely… & sometimes..:) If you have an in-house team of designers & developers & stakeholders, well that’s not a big waste of time comparing to what pros you get sharing it with your team. Its not one rule fits all and I would say pretty subjective.
I honestly don't see it this way. Prototyping is a great tool to visualize a concept without coding, and it's meant to be a presentation tool to walk people through the concept. It doesn't need to be working like a real app. Static screens are not enough to tell a great story.
Hm, I can see how you cannot value the benefit of prototyping when going right away into the high-fidelity visuals. However, while this approach may work for simple run-off-the-mill apps, digital products usually involve more complex structures to be discussed and refined. There's at least 2 specific scenarios, where prototyping connections has always has made a lot of sense for me: a) for rapid prototyping of low-fidelity designs to be used in discussions with stakeholders or usability testing with users, b) for communicating connections and expected behaviors during handoff between designers and devs.
Oh dang, a full html version. How long until AI can do this for us based on the screens we've designed and specific inputs we designed? Then we can tweak the micro interactions 💩
when there's a set of components defined the HTML doesn't take that long actually - but only if there's an actual budget for research. As for AI - we're working on it too, but can't say much now ;)
You could just use Framer to create a prototype instead of coding manually. The UI is almost one for one the same as Figma and they have an import plugin as well
Yes, framer is one of the ideas, but the problem with framer is that it's a locked ecosystem - meaning deployed on their servers and some companies (NDA's and stuff) aren't as happy with that either. But yeah - in some cases it's definitely a good choice.
For real project, organize the pages or main flows give the client a clear idea. And we can do prototype only when show something never be done or something like that. For a cases studies we can use prototype to show our skills.
most of my opinions are contrarian - to show people other perspectives and help them think on their own :) However this one is based on literally hundreds of designed and developed projects. We organize the file for clients visually (with rows and columns) and when it's done right the clients usually don't need a prototype.
"Prototyping is not that important" Did he really say that? 😅 Man, I respect your background, but you should really choose your words more carefully while you are giving these kind of advices. I agree your reasonings for mentioned cases, but there are much more real life cases in the market that prototypes become important and shine. I understand that these kind of statements bring you some love and attention from juniors or mid-levels, but you are putting them in a dangerous path. This is from your newsletter: ********** "Hey! Figma launched some advanced prototyping lately and had many designers questioning their future. It's powerful, but extremely complex now. The app is becoming bloated with features. So the question is this: HOW USEFUL IS PROTOTYPING? The answer is that there are VERY FEW actual reasons to prototype when you're designing professionally (for clients)." ********* 1) Why would a designer question his feature just because Figma brought some more features? 2) It is not extremely complex. If a designer is not being able to understand a simple logic of variables and expressions, most probably she is not going to be able to work or deal with developers. 3) The app is not being bloated by features, it is getting complete and we are not even there yet. 4) Few reasons to prototype while designing PROFESSIONALY? Really? So most of the time prototyping is for amateurs or amateur purposes? No more words... Please stop comforting people who doesn't want to deal with some complexity. It not that different than telling a kid "Math is useless in real life, no worries" who failed at math class. Guys, believe me. Learn prototyping, learn these advanced features and keep yourself up to date. If you don't believe me, fine.. Go ahead. You will see who is right in 2-3 years in your career.
It's an interesting problem and I am here exactly to provide contrarian opinions - because that sparks discussion instead of blindly following a design tool cult. However - Figma may not even be here in 2-3 years with their current pricing and alternatives that will crush that pricing - and in that case features won't matter - so it's best to think about a long-term focus. 1. This comes from our experience of building REAL products for REAL clients (hundreds of them) 2. Sure - but the thing is that it's really NOT that necessary. Sure there are usecases, but it's just like there are usecases for 3D tools and animation inside photoshop, yet these features are there but not that often used. 3. The bloat problem is not my opinion alone - many seniors I've spoken too feel the same way - feature p0rn distracts people from learning the basics of design. Animation in Figma is one of the prime examples of people skipping design basics to learn to "smash A, click here, there, and you're done" and do those pointless animations that look good but not teach you any actual skills. 4. I asked other companies who also work with a lot of startups and they share my view here. We RARELY prototype in a design tool - for the reasons I mentioned. When we do need a prototype we code an HTML one, with a developer, and do user testing that won't fall into the trap of prototype-anxiety. And of course I am welcoming your opinion here, that's why dialogue is important :) You say - go prototype, I say we (as a company that does A LOT of work) don't prototype as often and people can see both views and make their own opinion. Keep in mind that I also often tell people to also question everything I say (and other seniors) because nobody is fully right - ever. There are points of view and that's beautiful :)
@@MalewiczHype First of all thanks for your time and detailed explanations. I totally agree with you about learning the fundamentals of design first, rather than bothering yourself with the advanced prototyping or any other features of Figma or any other specific tool. And you are right, it is not guaranteed if Figma will be the leader of the market in 2-3 years. (i.e: Penpot is coming strong) But everything people learn while using Figma are transferable skills. For example, If you can use Figma, you can start using Penpot in few days. That goes same with so many similar tools. My prediction for 2-3 years is about a vision for the market. As you can see from Figma or Penpot, designers who only stick to design skills are the ones who is in real danger. The gap between designers and developers are being filled day by day and they are coming closer to each other. That's why Penpot is heavily working on syncing both sides like Figma is doing today. Variables, conditions, expressions, modes (a mini database), components, libraries, grids, flex layouts... They are all coming from development and being injected into design day by day by Figma, Penpot or whatnot.. Once upon a time, design and even development was kind of a one man show. But the future dictates collaboration within many individuals. With the design systems, libraries, components, real time design tools etc collaboration within designers has been achieved. With Github, npm etc same happened in dev world. And now, it is time to bring these two groups together. So, if someone is not designing for some dribble fame but working within a team, soon or later, they will have to deal with these new features and adopt. The other reason is the no-code or low-code future. Products like webflow or flutterflow are gaining popularity and they are not for people who can only design. So, before it is too late it is not harmful to understand very basic concepts and fundamentals. Many seniors are complaining about these new bloated features, because there is not visible real life use cases and tutorials around YET. In a month, they will start to adopt and see the benefits. Yes, it is complex and yes, not that easy to adopt YET. But again, it is just a matter of time. This same thing happened with components and variants. Today, we can't imagine a world without them, especially for complex products or design systems. Of course HTML prototypes are way more efficient and a better way to go especially for user testing. But still prototypes have their own place and they are important. For example, they are great for getting some early feedback from non-technical stakeholders (Like sales folks who does POC) As I have mentioned before, your reasonings are legit, but there are many other use cases. So, for all these reasons, I will repeat it again: "Learn prototyping, learn these advanced features and keep yourself up to date." You don't need to use it? Awesome. Do not. Also I had a chance to check out the comments below. As I have guessed, people who are struggling with understanding the concepts seem relieved. That's the dangerous path I am talking about. Knowing but not using it is fine. Finding it unnecessary and refusing to learn is dangerous especially if you are a beginner. What I advocate for is: Learn it, understand it, then decide where and how to use it. Cheers mate.
I'm on a road trip right now so I'll only answer one part of what you said - showing flows to stakeholders is actually a usecase I mentioned in the video as one we sometimes do the typical "prototyping" way. And yes, the worlds are merging, when i began my career I used to do both design and frontend because back then that was the only way. The problem is that people are pushing for way too much at once and skipping "ahead", so it's not really a question of "never prototype" but rather "learn how logical flows work with just connecting the screen with proper transition" and for most cases you're completely fine. For those complex prototypes to make sense they'd have to get a lot closer to code so you can track better, avoid hotspots showing and have more of a realistic experience. So I'm back on the road, checking out the Fjords, but as I said before I appreciate all viewpoints :)
I am making the transition to UX (I am currently a Motion Designer) and this part of prototyping was the part that intrigued me the most. It's always a big NO IT'S POSSIBLE THAT THEY ARE GOING TO PROTOTYPE THIS with every new example. It's hard to even study on your own because I really don't see the point of most prototypes. So thank you very much for this video. 🥲
sometimes it's worth to prototype, in our professional experience these times are just quite rare and the fomo around learning to master prototyping is huge.
If you’re in a discovery phase, moving at pace then there just isn’t time to code prototypes. Mocking one up in Figma is the fastest way to make it feel “real enough” to test concepts.
The impact of the obviously "fake" app when user testing with prototyping has always been something I wondered about. Motion design is a fun reason I like to prototype though, if only to get a little rush of dopamine to see my designs working as I imagined.
There are places where it does work and you can get some insights, but yeah, we prefer to test things in a more realistic scenario.
As someone who's currently making a case study this really helps a lot ! Thank you so much !
Always happy to help, however in portfolio case studies it’s good to have a prototype :)
@@MalewiczHype Sure will keep that in mind
Finally someone said it outloud! A prototype made in Figma is not a good option for user testing. But sometimes such prototype comes in handy, for example to show the stakeholders how ridiculous their idea is 😂
I wish he'd actually mentioned figma here because all of this applies only to figma. You can whip up a fully responsive and unbreakable prototype in axure pretty fast. Sure, it might not look like the finished product, but that's totally not the point in a discovery phase. UI can be tested in completely different ways later on.
Wow, thanks for this video! Short but insightful: A lot of designers never mention this, but it really makes sense, especially when it comes to getting appropriate use-testing results.
Yeah it feels like everyone has heave fomo about advanced prototyping without considering the usefulness of it 🫡
Thank you so much, you are such a great person. I am learning from your channel and books a lot. Keep going!
It's really refreshing to hear this. Especially from somebody with such a prestigious client base (they are the type of client who I imagined actually used prototyping). Therefore always felt like I was 'jumping the gun' by not doing it. This is such a good insight!
hi @malewicz what font is this you are using in 2:34 the small case "g" is beautifull
Bro you are the best, I am designing for web and sometimes mobile for 6 years and not a single prototype was made - clean flow of screens and video explanation for the client are more than enough.
Got your hint about design systems - can’t wait to see how you crush the topic. IMO design systems are overhyped BS that’s only applicable in huge corp teams where one product is polished over years. Other scenarios - design systems (in the way they are presented) are an absolute waste of time
That's why I also spent too much time on my first case study project. Google 'forces' us to do prototyping, even though in my usability study, it crashes most of the time, even though I properly connected every screen. As a result, testers think I've done a sloppy job. I'm structuring my screens in sections with titles as you taught us in your courses, but I really don't want to prototype 200 or more screens for my future projects. Thank you for showing us that prototyping is not the most important part of the UX/UI design process, but rather UI. 😊
I love that he just says it like it is. No non-sense advice, just really grounded information.
Just like you did with onboarding, here comes prototyping. Thank you
But i'd still like you to clarify some grey areas
1. Is HTML efficient for iterating?
2. Does the idea of organizing different sections also apply to case studies for job hunting, as compared to using embedded videos of prototypes instead of PNGs?
Thank you
Thank you for this, Michal! It's good to know what to spend time and energy on and what is not necessary in the industry. You mentioned HTML prototyping - could you go into more detail on that? Maybe a tutorial?
It's good to know the basics of connecting screens, but yeah definitely no need to learn all that complex prototyping features they seem to now be adding every few weeks.
As for HTML you usually need a developer to simply code the views in HTML, however sometimes it can also be an image map (like now) with hotspots, only invisible on click and with form fields coded "real"
Thank you for another point of view!
that’s what I’m here for 🫡
Thanks, Michal! almost spent two or three days prototyping for User testing and wasting my time and I thought It was Professnalism😂this video helps me a lot!.
As a "get of my lawn" aged designer. I don't see a lot of use for high level interactivity to the prototype. Most user testing I've performed at this level is geared toward a specific user flow which is patterned after a narrow use-case or a persona and on rare occasions it's used to get stake holder buy in.
fair enough - but in our cases we usually test longer / more complex flows that do have some interactivity required. Of course there are exceptions to every rule, but generally we don't prototype too often at all - that's how it works for us - but to be fair we do quite extensive QA sessions on the coded products based on our designs.
Interesting approach to the topic... I too was always puzzled by what sense it makes to spend a week on prototyping when later it is handed over to a developer (especially web design) at the same time it can actually be coded AND then tested. The only point I see is when it's really something innovative like you said. Have a beautiful day ☀️💪👊
For me prototyping is a very important part of the design process. Only by actually experiencing the flow I can be sure I didn't forget or miss any detail. Also, I find that showing prototypes to stake holders is very important. If I just present them with screens, they don't get the full picture of what we are doing...
I watched the whole playlist of "Learn UI for free" in this channel. This is the last video in that playlist as in today. I'm just starting out as a UI/UX Designer, but I'm not professional enough to get hired. But I learned many tips to improve my UI design skills. Because I don't have any money to buy your premium books (But I got your free books. They are very good❤), I'm very grateful for this free videos of you. Thanks a lot for making these videos ❤❤❤
Much appreciated!
Hey! Good explanation and it’s a great point of view, however what about testing with prototypes using maze? From where we can get some user data and creating the prototypes takes less time than creating them in html and css, thanks!
It is the same as for other tools, everything has its place and time. I've used prototyping not in all projects but in many. They help: to check if the flow feels right either by yourself, within the design and broader team or with test users; to show the developers how the app should behave in complex cases (sometimes it is easier to show than to write pages of documentation); to showcase and basically sell the design to the clients or help them to sell it up to their bosses.
What I do agree with is that there is no need to run and learn a new tool especially for the beginners. Most of the time, simple functionality of figma is enough.
I agree with that, but there is even more complex prototyping tools like ProtoPie which are dedicated for it. Could you explain the usage? What is it for? Because it is for something for sure if someone builded it and I met ProtoPie in “expected” tool for UI designer position😅
Is there a chance to share with us a compelete real app design for one of you customer , to analysis it and see how it ia going in real world with the client ?
How do u set ur design system , naming , the elements you use ..al this stuff ?
Thanks
I've been wanting a video like this just to understand how compulsory prototyping is 👍
Oh my god this video answered all my questions. As a self learner i always struggling in prototype because i can’t make it become realistic. Can wait to see your next video about design system too!
There are many myths around it, and of course this is a point of view from our agency only, so it can differ in other companies , but yeah we do those connected protos very rarely.
A great video that I have been looking for especially if Prototyping is really needed 🤔, thanks Michal for the awesome video ❤️👍
yeah many designers think it’s mandatory knowledge but it’s a but more complicated than that 🫡
Great video, I agree with everyhing that you say. Prototyping can maybe be helpful only if your client asks to see an specific flow.
Figma's newly released prototyping features are really unnecessary. But making a prototype with final screens (with simple move in transitions) helps to identify if there any gaps in the user flow. When I making designs for concept apps (for my portfolio), I get many ideas to make changes to final designs after making the prototyping.
Over my 5 years of experience doing Web Design, I have only done prototyping once and never done it again after realizing it was such a waste of time.
At the beginning my intentions were to show the client the app works and how the user moves around, but as you said there are a lot of ways to achieve that.
Thanks for another great video! 🙏 What's the app you're showing at 5:20?
Sketch. This is my main design tool, I use it for 99% of my professional design work.
Well... I think it still makes sense to use prototype tools in Figma especially with applications and Figma mirror. You can create simple connections with CTA buttons and navigation to show the main flow of the application. OK, I agree that Figma is limited, but for simple presentation it's not so hard, and it doesn't take so much time. For more complicated flows you can always use more advanced tools such as Principle, ProtoPie, UXPin, Axure...
yes, when you have the time - sure. but the thing is that it's so rarely needed that in real projects we rarely do it - even if it doesn't take too much time.
Thank you so much for this video! I have to admit all that wild mess behind prototyping seems scary and the best part is that I don't really have to do it. I can do 100 screens without wasting time on connecting them all. Genius! 😊😊
sometimes of course it does make sense to connect them, but more often than not it's best to focus on the screens themselves - so it makes sense and looks good :)
@@MalewiczHype The next time I have to do wild prototyping is for one of my fall classes 😂 Very necessary.
Organizing those screens in a way that makes sense like shown in your courses ❤️ Ever since I started your UI design course I’ve been an organization freak 😂 I label everything. You’re the best!
Thanks very helpful. Can you recommend html tools for recording users' response time and dwell time to specific element such as ad banner. thanks again.
Great video! thanks!
what about prototyping for interaction & motion design ?
Will I agree prototyping for user testing, meta-prototyping (especially using framer ) can be extremely beneficial to scope the prototype to be built using web technologies
Really depends on the company. We use them for user testing but they are never more than 10 screens.
Also we test very specific functions, not the whole app.
If it works for your company then it's obviously great :) This level of prototype fidelity has never worked for us, I felt like the insights from research were mostly useless (with some exceptions) - but we have a more agile approach than most companies.,
a much-needed video. Thanks
You're welcome
Ok and what about prototyping to spark creativity in you, which eventually would improve the whole project overall and get your client excited too? ( excitment -> testimonials -> recommendations -> more work -> more money). Many of the client won't visualise it without seeing first.
Also, isn't a great way to explain visually how it should work when handling it to your web developer? Im a designer myself and want to focus only on the UI aspect. Is it usefull then ?
We can imagine many things without the need to prototype. And some small animations / transitions / interactions we do show to developers when they're different or unique.
In most cases however the creativity is in the screen designs themselves.
@@MalewiczHype most probably cause you bond together and you know each other. Would you trust a newcomer that he will get you straight away? Im curious cause was planning to prototype my website and now I dont know what to do :)
Michal, do you still have your frontend course available? Also do you have course on design system?
we have a frontend book and it’s free :)
@@MalewiczHype but not on the website?
Great video.
How do we then address the micro interactions?
You can sketch some of them separately, but not really a part of a flow - just one by one and only those that aren't super simple / predictable.
we use prototypes to desctibe interactive behaviours. we mostly make interavtive components rather than connecting all the screens.
this in turn turns most designs interactive on their own without needing to code.
remember that the prototype is the stimulus, tools like maze and usebery use that stimulus to collect data just like hotjar would do with html
but ye, we dont prototype every single thing for every screen
there are many approaches of course - we sometimes outline animations for devs for example when they're complex, but generally more often than not we don't prototype at all anymore.
It used to be more of a rage when inVision came along and made it easier and more fun, and then slowly became less and less used.
@@MalewiczHype exactly🤙
can you tell us what are the deliverables of a no code web designer?
Hey Malewicz, could you tell us what Apps you designed? I would love to download them in the store and be inspired by them. I love the App designs you teach us. 🤩
(+1 Sub)
Can You make a video about how can we make a design agency? From the minor details to the major details?
I could, but I created my agency many years ago so it was definitely different back then, but I can maybe do a bit of history of how we started and how we managed to start from nothing and get better and better clients.
I have always loved the new perspective you bring to subjects that people really don't think about. I bet a lot of designers wished they didn't have to prototype.
But then, however not compulsory to know, especially for small projects, it helps people who haven't mastered effective communication and presentation.
I hope stakeholders accept this point of view because some them insist on seeing an interactive design.
Great video❤
Yeah, generally it's worth knowing the basics of how you connect the screens with blue arrows - but that's actually quite easy. And it does happen sometimes even in our work, just not as often.
And most of those complex new features in prototypes are almost never used.
Good point: it needs to make sense👍👏
Exactly! And sometimes it does, sometimes it doesn't.
This is great advice. Prototyping takes a huge amount of time and effort.
it does make sense sometimes, but not as often as they lead juniors to believe
@@MalewiczHype yes, I agree. I usually prototype Just to show clients the bells and whistles so they are not underwhelmed
I sort of disagree about the point of "don't do prototypes because they feel fake" - the point of testing in the discovery phase is to validate the flows and features. You can straight up inform the users that it is a prototype. In my experience, they get immersed and forget that it's fake anyway. What I would emphasize her instead is: provide all clickable options, so that the user doesnt get stuck in an unresponsive prototype.
All that being said, prototyping in figma sucks and I would avoid it at all times. Axure can provide a fully clickable experience even if the app doesnt look like a work of art.
Why do I see prototyping as a required skill in so many of the job descriptions I see? I was under the impression that it was important from a storytelling and flow perspective. Yes without a prototype you have the screens but what will the transitions be like? It's something I definitely pay attention to when doing comparative research.
Many job descriptions simply copy text from other job descriptions, very rarely they even make sense (saying stuff like we need a junior with 5 years of experience).
Most of the transitions are actually the same - depending on the logical postition of each screen (slide left / right)
I showed a clear structure in this video where you simply have rows and columns (annotated) of screens and all flows and for many projects it's really enough.
I only use prototypes to explain my idea to stakeholders, to help them understand the work I've done better or to show Devs how something should behave.
Yup, these are some of the cases we use them for too, but more often than not even devs don't want prototypes when the flow is clearly outlined in the file.
somehwat related question - is the inspect panel on figma (and similar panel on sketch) really useful for developers?
they usually complain - on either one. But yeah compared to the way things were done before it's way easier to code stuff from design now
@@MalewiczHype thanks!
If we don't have high competencies in HTML and CSS, can we just use a figma plugin convert our designs to a working prototype or no?
if the plugin works well enough so users won't see a difference then sure
@@MalewiczHype okay thanks for your reply
I didn't really get the HTML prototypes part vs prototyping (connecting one page over another) argument? Can you elaborate on this? Can't you also make connecting one app page over another also have HTML prototypes?
when you're just connecting pages in a design tool there are many constraints and limitations. one example is clicking in a random place will show the hotspots - breaking immersion.
@@MalewiczHype got it. the actual ux experience is broken. I really need to dig into this more into this to find out more.
I think prototype is better to communicate motion to developers or even see by yourself how motion will work and if it makes sense. But for user testing your video makes sense.
motion is not really prototyping - we do it in external tools that allow for more complex motion than typical A-B transition most design tools have.
@@MalewiczHypeCan you tell us a bit more what tools do you involve to process motion in your agency?
As someone who's working towards that field, I'm genuinely curious how other people do it. 🙏
Really I'm proud that i started my day by watching this
Thank you bro 🎩
This is really eye opening
Should learn html
or... just don't focus on prototyping but instead work on actual designs - that's also fine :)
Finally, someone said it. Thank you sir
00:00 - 00:12 Creativity at its peak 🫡
I'm trying and all those video editing things are destroying my free time and welbeing ;) So glad somebody notices
Cool stuff I must say🎉
I like the spiderman lol! So appropriate! 🤣🕸🕷
Agree 100%
So the title says don’t! but most of the video goes like: the half of the times… are rarely… & sometimes..:)
If you have an in-house team of designers & developers & stakeholders, well that’s not a big waste of time comparing to what pros you get sharing it with your team. Its not one rule fits all and I would say pretty subjective.
that's youtube reality for you, that's why I eventually need to quit this bs ;)
I honestly don't see it this way. Prototyping is a great tool to visualize a concept without coding, and it's meant to be a presentation tool to walk people through the concept. It doesn't need to be working like a real app. Static screens are not enough to tell a great story.
Why do I feel this is a subtle shade to Figma’s improved prototyping 😂
Figma? What is that? ;)
(That question we'll all be asking in 2025 when they go out of business 🤞)
So Weblflow makes a great HTML prototyping tool...
Can be
Hm, I can see how you cannot value the benefit of prototyping when going right away into the high-fidelity visuals.
However, while this approach may work for simple run-off-the-mill apps, digital products usually involve more complex structures to be discussed and refined. There's at least 2 specific scenarios, where prototyping connections has always has made a lot of sense for me: a) for rapid prototyping of low-fidelity designs to be used in discussions with stakeholders or usability testing with users, b) for communicating connections and expected behaviors during handoff between designers and devs.
I love prototyping..
Oh dang, a full html version. How long until AI can do this for us based on the screens we've designed and specific inputs we designed? Then we can tweak the micro interactions 💩
when there's a set of components defined the HTML doesn't take that long actually - but only if there's an actual budget for research. As for AI - we're working on it too, but can't say much now ;)
You could just use Framer to create a prototype instead of coding manually. The UI is almost one for one the same as Figma and they have an import plugin as well
Yes, framer is one of the ideas, but the problem with framer is that it's a locked ecosystem - meaning deployed on their servers and some companies (NDA's and stuff) aren't as happy with that either.
But yeah - in some cases it's definitely a good choice.
For real project, organize the pages or main flows give the client a clear idea. And we can do prototype only when show something never be done or something like that. For a cases studies we can use prototype to show our skills.
Right. Any job you interview for is going to want you to prototype.
This is one person's opinion and not a very widely held one.
most of my opinions are contrarian - to show people other perspectives and help them think on their own :)
However this one is based on literally hundreds of designed and developed projects.
We organize the file for clients visually (with rows and columns) and when it's done right the clients usually don't need a prototype.
I will call you the king of UI Design.
Can I?
nah, I'm just a designer that's been doing this for a while. no need for titles, let's just do cool things :)
@@MalewiczHype good point.
It just worth mentioning that you are making good stuff and to show some appreciation
And I really appreciate that!
"Prototyping is not that important" Did he really say that? 😅
Man, I respect your background, but you should really choose your words more carefully while you are giving these kind of advices. I agree your reasonings for mentioned cases, but there are much more real life cases in the market that prototypes become important and shine. I understand that these kind of statements bring you some love and attention from juniors or mid-levels, but you are putting them in a dangerous path.
This is from your newsletter:
**********
"Hey! Figma launched some advanced prototyping lately and had many designers questioning their future. It's powerful, but extremely complex now. The app is becoming bloated with features.
So the question is this: HOW USEFUL IS PROTOTYPING?
The answer is that there are VERY FEW actual reasons to prototype when you're designing professionally (for clients)."
*********
1) Why would a designer question his feature just because Figma brought some more features?
2) It is not extremely complex. If a designer is not being able to understand a simple logic of variables and expressions, most probably she is not going to be able to work or deal with developers.
3) The app is not being bloated by features, it is getting complete and we are not even there yet.
4) Few reasons to prototype while designing PROFESSIONALY? Really? So most of the time prototyping is for amateurs or amateur purposes? No more words...
Please stop comforting people who doesn't want to deal with some complexity. It not that different than telling a kid "Math is useless in real life, no worries" who failed at math class.
Guys, believe me. Learn prototyping, learn these advanced features and keep yourself up to date. If you don't believe me, fine.. Go ahead. You will see who is right in 2-3 years in your career.
It's an interesting problem and I am here exactly to provide contrarian opinions - because that sparks discussion instead of blindly following a design tool cult.
However - Figma may not even be here in 2-3 years with their current pricing and alternatives that will crush that pricing - and in that case features won't matter - so it's best to think about a long-term focus.
1. This comes from our experience of building REAL products for REAL clients (hundreds of them)
2. Sure - but the thing is that it's really NOT that necessary. Sure there are usecases, but it's just like there are usecases for 3D tools and animation inside photoshop, yet these features are there but not that often used.
3. The bloat problem is not my opinion alone - many seniors I've spoken too feel the same way - feature p0rn distracts people from learning the basics of design. Animation in Figma is one of the prime examples of people skipping design basics to learn to "smash A, click here, there, and you're done" and do those pointless animations that look good but not teach you any actual skills.
4. I asked other companies who also work with a lot of startups and they share my view here. We RARELY prototype in a design tool - for the reasons I mentioned. When we do need a prototype we code an HTML one, with a developer, and do user testing that won't fall into the trap of prototype-anxiety.
And of course I am welcoming your opinion here, that's why dialogue is important :)
You say - go prototype, I say we (as a company that does A LOT of work) don't prototype as often and people can see both views and make their own opinion.
Keep in mind that I also often tell people to also question everything I say (and other seniors) because nobody is fully right - ever. There are points of view and that's beautiful :)
@@MalewiczHype First of all thanks for your time and detailed explanations. I totally agree with you about learning the fundamentals of design first, rather than bothering yourself with the advanced prototyping or any other features of Figma or any other specific tool. And you are right, it is not guaranteed if Figma will be the leader of the market in 2-3 years. (i.e: Penpot is coming strong) But everything people learn while using Figma are transferable skills. For example, If you can use Figma, you can start using Penpot in few days. That goes same with so many similar tools.
My prediction for 2-3 years is about a vision for the market. As you can see from Figma or Penpot, designers who only stick to design skills are the ones who is in real danger. The gap between designers and developers are being filled day by day and they are coming closer to each other. That's why Penpot is heavily working on syncing both sides like Figma is doing today. Variables, conditions, expressions, modes (a mini database), components, libraries, grids, flex layouts... They are all coming from development and being injected into design day by day by Figma, Penpot or whatnot..
Once upon a time, design and even development was kind of a one man show. But the future dictates collaboration within many individuals. With the design systems, libraries, components, real time design tools etc collaboration within designers has been achieved. With Github, npm etc same happened in dev world. And now, it is time to bring these two groups together.
So, if someone is not designing for some dribble fame but working within a team, soon or later, they will have to deal with these new features and adopt.
The other reason is the no-code or low-code future. Products like webflow or flutterflow are gaining popularity and they are not for people who can only design. So, before it is too late it is not harmful to understand very basic concepts and fundamentals.
Many seniors are complaining about these new bloated features, because there is not visible real life use cases and tutorials around YET. In a month, they will start to adopt and see the benefits. Yes, it is complex and yes, not that easy to adopt YET. But again, it is just a matter of time. This same thing happened with components and variants. Today, we can't imagine a world without them, especially for complex products or design systems.
Of course HTML prototypes are way more efficient and a better way to go especially for user testing. But still prototypes have their own place and they are important. For example, they are great for getting some early feedback from non-technical stakeholders (Like sales folks who does POC) As I have mentioned before, your reasonings are legit, but there are many other use cases.
So, for all these reasons, I will repeat it again: "Learn prototyping, learn these advanced features and keep yourself up to date."
You don't need to use it? Awesome. Do not.
Also I had a chance to check out the comments below. As I have guessed, people who are struggling with understanding the concepts seem relieved. That's the dangerous path I am talking about. Knowing but not using it is fine. Finding it unnecessary and refusing to learn is dangerous especially if you are a beginner. What I advocate for is: Learn it, understand it, then decide where and how to use it.
Cheers mate.
@@EnesKab Probably the best take I've read so far on the topic.
I'm on a road trip right now so I'll only answer one part of what you said - showing flows to stakeholders is actually a usecase I mentioned in the video as one we sometimes do the typical "prototyping" way.
And yes, the worlds are merging, when i began my career I used to do both design and frontend because back then that was the only way. The problem is that people are pushing for way too much at once and skipping "ahead", so it's not really a question of "never prototype" but rather "learn how logical flows work with just connecting the screen with proper transition" and for most cases you're completely fine.
For those complex prototypes to make sense they'd have to get a lot closer to code so you can track better, avoid hotspots showing and have more of a realistic experience.
So I'm back on the road, checking out the Fjords, but as I said before I appreciate all viewpoints :)
I do Design and Code, usually I prototype using pre made blocks that I built for CORELDRAW! And I am damn pretty fast on that! Anyone shocked? :D
Prototyping is a super important step if you are a UI/UX designer. Could you just keep it in mind?
no can do, sorry :(
I am making the transition to UX (I am currently a Motion Designer) and this part of prototyping was the part that intrigued me the most.
It's always a big NO IT'S POSSIBLE THAT THEY ARE GOING TO PROTOTYPE THIS with every new example. It's hard to even study on your own because I really don't see the point of most prototypes.
So thank you very much for this video. 🥲
sometimes it's worth to prototype, in our professional experience these times are just quite rare and the fomo around learning to master prototyping is huge.
I've been wanting a video like this just to understand how compulsory prototyping is 👍
not very