Hi Fidelity Wireframes & User Testing: Dashboard UI UX Design (3/4)

How do you get your hi fidelity wireframes to be just that – high fidelity? How do you get them to be pixel perfect, clean, and feasible? You’re not the first one to ask...but you are JUST about to find out! In this video, I teach you how 99% of the hi-fidelity wireframes and projects are designed at the biggest tech companies in the world. You’ll learn about rapid user testing (using Maze user testing), and how to use data insights from user testing to direct your design decisions. And most importantly, you'll learn how a design system is the best way to build a solid foundation for your design projects. In this video, I'll go over some examples of design systems created by giants like Apple and Google (Material Design System & MUI).

This video is the third one out of the 4 part video series: Raw & Uncut UX Design Project From Start to Finish, through the lens of a fictional design project we call "Scale". If you haven’t already, watch the other videos first to make sure you follow along. Let’s go!

▬▬▬ Resources ▬▬▬
Dashboard UI UX Design Part 2:
Canvas Guides:

▬▬▬ 🚀 Join our Free Skool Design Community ▬▬▬
Connect, learn, and grow with fellow designers

▬▬▬ Free Weekly Design Resources ▬▬▬
Sign up in the newsletter to get free resources every week!

▬▬▬ Video Chapters ▬▬▬
00:00 – Intro
00:52 – Maze User Testing
03:04 – Choosing a Design System
05:34 – Intro to MUI Design System
11:22 – Vetting Through the MUI Library
18:46 – Creating Hi-Fidelity Wireframes
43:18 – Summary & Next Steps

▬▬▬ Who am I? ▬▬▬
Anik Devaughn

▬▬▬ Say Whatsup! ▬▬▬

#uxdesign #wireframe #usertesting #uxprocess #designthinking #stepbystep #design #figma #creative #howtodesign #ux #ui

[IbukunOluwaShotubo]

Oh, man! Anik, you're just a gem! I'd pay to consume your content if I had to. I had to slow down some sections to actually literally follow along carefully. You're such a blessing to my journey, man.

With the level of precision and intentionality that you put into your work... I can only imagine how much more golden your courses would be if you eventually decide to create those.

Thanks for being such a blessing, man. Thank you, so very much.

[abhidave]

7:30 in the morning and watching the best video on How to use MUI Design Library to design Hi-fi Wireframes 🔥

[bagchi_sagnik]

Great stuff! Can you please make a video on how to level up as a designer? The various seniority levels, how to go from a Junior Product Designer to a Senior Product Designer?

[johnmirick]

Wonderful videos. I'm learning Figma now and your content is top notch. Could you add your Dashboard UI doc somewhere that we could copy? I'd like to see how you created some of the components, that part of the video goes super fast. I think there is a lot to be learned from just seeing how some of these page elements are created.

[atbxoxo]

We have a rather slow week so I'm sort of binging your videos, really cool to watch the process of another designer. Thanks for sharing. One question though, at the end at 43:18 you set the constraints of the progress bar indicator to Left-Right, is there a reason for that? I think the way you did it the indicator will basically keep the distance to the right as the viewport gets larger hence it'll break the percentage. Why not go with Scale to keep proportionate? Thanks again for the video, keep em coming!

[techguideguru]

Thanks you a lot! Keep doing a great job!

[henkegiaretta]

Awesome video! Just sondering, Whern you do HF wireframes you use the components from MUI bur nearly remake them completely…couldnt you just build the from scratch, feens like it could be done quicker almost