This Video Will Take You From Junior to Senior UX/UI Designer
HTML-код
- Опубликовано: 20 ноя 2024
- ✨ Learn how to design beautiful UI designs: www.uxpeak.com...
🚀 Enroll in UX/UI design Mastery course to become a UX/UI design pro: www.uxpeak.com
🎁 Use exclusive discount code 'AWESOME50' to get 50% off. Limited time only!
🚀 Become affiliate and earn commission: uxpeak.lemonsq...
Learn tips, tricks, principles and strategies to create beautiful and functional UI designs that your users love.
Our UI/UX Playbook is designed not just to educate you, but to empower you to think, act, and design like a seasoned design professional. We've condensed the best of everything you need to know into this powerful UI/UX design playbook, drawing from years of experience in designing successful products, so you can shortcut the learning curve and save yourself years of frustration and failure.
The truth is, you don't need a design background, special talents, or a university degree. By mastering the key principles, tips, and tricks, anyone can create exceptional UI designs that people love. Whether you're a designer, developer, marketer, or simply curious about UI design, this e-book is for you.
🔥 List of free UI design resources: www.uxpeak.com/resources
We hope you enjoyed this video. :) More exciting videos coming soon.
#uidesign #webdesign #uxdesign #figma #uxuidesign #uitips #appdesign
Every one forgets the developer who has to go through this dilemma
Absolutely! Developers really do have their own unique challenges with these decisions and we have a lot of respect for what you do! Thanks for bringing that up! 😊
@@uxpeak Yeah its giving me headaches to think How Would I implement those .Its not difficult it just takes time
@@GeoGuyz GThink of it this way: you’ll have the opportunity to tackle an exciting challenge, create meaningful solutions for your users, and enjoy the satisfaction of making a real impact! ☺😺
im a Front end developer. i do think the designs are key in a project. as developer it does make me worry if can make it work exactly how the design is actually made for and smoothly works.
That's the first thing I thought when I looked at these, nice figma designs.. but the amount of code to be written just to get that animating 💀
Option D is more intuitive and cleaner also reducing the more text elements
Option D truly does streamline the design by reducing text elements while maintaining clarity. Great choice!
Toss up between option B and C. I like the visuals of seeing each emoji option on the screen and it’s not a boring vertical list
Thanks for sharing your thoughts! 😊 It’s great to hear you’re liking both B and C-the visuals and emojis definitely make it more fun and less like a boring list. Glad it stands out to you!
I loved the D option most.
Here's why- In the others the user hesitate to choose a lower sleep number by seeing the emoji but in the last one, you are telling at last about how you rated it. It gives the user clear perception.
We really appreciate your detailed feedback! 👍 You’re absolutely right-D brings clarity and helps users make better decisions. Thanks for sharing!
@@uxpeak It's my pleasure 🤗
And as a plus from the dev team, yeah, this design seems doable
@@tontonluston Yeah 🙌
Most other channels talk about just the theory, but this channel does so with examples that are super beautiful & amazing 😍
Yes, that’s exactly what we’re about! 🙌 We aim to go beyond theory with beautiful, practical examples. So glad you noticed-thank you for the support!
Option C is the most usable and interactive version.
Reason :
1. All the probable options are available upfront for emily.
2. Selected state is prominent.
3. Feedback and suggestions are also provided after selecting the type of the sleep in the form of emojis.
In option B, all the options are not visible in the first swipe which increases the cognitive load. Option A is also a very nice option being very minimal and to the point. Option D again increases the cognitive load where Emily will only get feedback after making her choice based on hours.
Thank you for such a detailed and thoughtful analysis! 😊 Your breakdown of Option C's usability and feedback mechanism is spot on. It’s great to see how you’ve considered the cognitive load and user experience for Emily-this is exactly the kind of insight that makes discussions like these so valuable!
This channel is a gem for ui ux learners, glad I found this channel learned so many things
That's wonderful to hear! So glad the channel has been helpful for your learning journey. Welcome aboard! 🚀"
Great video
As a developer, I really don't like option B. This seems like a lot of work for the dev team for limited benefits. Please keep in mind the size of your company's dev workforce, the importance of the feature you're designing and the complexity of the feature you are designing. Doing your designs on your own while not asking feedback from your colleagues can put you in a difficult position and increase the risk that some or most of your design are ignored.
As a rule of thumb, and this is true for every job on the planet, try putting yourself on the shoes of the persons you're working with.
Try understand, at least on a surface level, what they're doing, what are their challenges and how can you adapt your work to make their easier. The more you're doing that, the more they will be inclined to do the same and it will eliminate a lot of friction and frustration associated. Your job will end up be easier and your professional relations appeased.
@@tontonluston💯💯 As a full time UI/UX Designer and also a mentor, i ALWAYS tell people to at least go through the little effort of learning the basics of HTML and CSS so that they can structure the website from the shoes of the dev that they’re gonna be working with. Knowing the limits of what you are able to make is crucial and it is the only thing that separates beginners from professionals.
Great insight! 😊 Thank you for sharing your perspective
This is by far the most educative youtube video I've seen on ux/ui. I can tell how much hardwork goes into making this. Thanks so much!
wow, thank you very much 😊 Your support means a lot! More awesome stuff coming soon.
@designpilot
Hello! If we are talking about UI/UX design, then even the initial version is good, since it solves the problem. Then it is up to the emotional designer, this is a slightly different specialty.
And so all the options are good. But from the point of view of UI, I would remove the radio buttons and highlight them differently.
But the most important thing I would like to say is that from junior to senior it is necessary not only to make UI better or add more emotions, but it is necessary to provide for all corner cases. For example, here is the situation with sleep, but the user can sleep for 10 hours and feel terrible when waking up. But the interface does not separate the amount of sleep from the quality. In such situation, the user will have a happy emoji on the screen, but the internal state of the user will not match to this. This can anger the user. Such case can be called "not user friendly".
Also, regarding option B, some users may not understand that there are 5 options, not 4, since only 4 options fit on the screen and someone will definitely think that these are all the available options.
But overall, a good video, thank you
Thank you for the thoughtful and detailed insights! 🙏 You're absolutely right about considering corner cases and aligning UI feedback with the user's real experiences-it's crucial for creating truly user-friendly designs. Your point about clarity in options and ensuring users see all choices is spot on too. Appreciate the feedback and your expertise-it adds so much value to the discussion! 🙌
That's amazing UX redesign short video. I really love this. Thanks for your effort for us. ❤❤
Thank you for the kind words! So happy you enjoyed the redesign-it’s always a pleasure to create meaningful content. ❤️
This channel is awesome! Keep going ❤
Thank you so much! ❤️ Your support means a lot. We'll keep bringing more awesome content!
Option D is the absolutely the best, because the text is more engaging and highlighting the no of hours and also slider is very easy way overall design is very impressive and user friendly ✨
Totally agree! Option D strikes a great balance between usability and visual appeal. Thanks for sharing your insights! ✨
This is a GREAT video. Every one of these tips/lessons are helpful. Thank you. 😊
Glad it was helpful! 😊
Option "C", Emoji selection & encouraging feedback
Option C does bring that interactive and engaging vibe! 👍 Thanks for pointing it out
this is one of the best channel for ui ux designers .. bring more such videos
Wow, thank you! 😊 It means so much to hear that. We’ll definitely bring more videos like this!
I would prefer option C
But.. Wow, such a good explanation. You made everything clear, showed the importance of ux. Subscribed!
Thank you so much for subscribing! 🙌 So glad you found it helpful-your support means a lot! 😊
Amazing video. I love ti so much, was looking for this one long time.
The option B does look the best to me! You've done incredible job. I learned more from this video than from my design uni. Thank you!
Thank you so much :)
Best UX/UI Design video ever 😍 Thank you so much
🥰
God! this video is going straight into my top tier list
Wow, thank you so much! That means a lot to us. So glad you found it helpful! 😊
Wow. This video is next level. Already purchased the playbook and love it. Keep up the great work.
Thank you so much! 🙌 We're thrilled you found the video next level and that you're loving the playbook. Your support means a lot-stay tuned for more amazing content!
I prefer Option C (all the sleep options are visible, fun & engaging, also easy to use and texts are showing less cognitive load than opt D)
Thanks for sharing your thoughts! 😊 Option C does have a great balance of visibility, fun, and usability. It’s awesome to see how you’ve analyzed the cognitive load too-great feedback!
In my opinion, the worst option is B.
The screen looks messy, and one emoji/reaction is always out of view (it does not appear within the screen's field of view).
The best options are C and D. Clear screen and commands. Although the "C" option can be a bit confusing because it resembles the elements of a weather forecast app.
Thank you for your detailed feedback! 😊 It’s interesting how C and D stand out for you with their clarity, and I see what you mean about C having a weather app vibe. Your perspective is super valuable-thanks for sharing!
Absolutely incredible! I've never seen a video like this before! 🤩🔥
Thank you so much! 😍🔥 Hearing that it’s unique makes all the effort worth it. So glad you enjoyed it!
This video is full of incredible animated details. Thank you very much for your carefully crafted tutorial. 😍
You're very welcome! 😊 I'm so glad you appreciated the details - it makes the effort worth it! Thanks for watching!
option C encourages the immediate feed back trait more than any one and highly reusable as well
Great observation! 😊 Option C’s immediate feedback trait definitely makes it stand out, and its reusability is such a bonus. Thanks for sharing your thoughts!
Wow uxpeak. I love this video ❤❤❤❤. The option D is the best but I also love the option C.
So sweet, thank you :)
D is more engaging and shows progress, which adds to the overall user experience. I think that it is easy for developers to create as well which again means that it suits better than the others
Thanks for sharing your thoughts! 😊 I’m glad you found D engaging and that it adds to the experience. 🙌 It’s awesome that you noticed how easy it is for developers to work with too!
Love the lesson
I would definitely go with option C and take only the feedback in D of comparing sleep to last night's recorded sleep
Glad you loved the lesson! 🙌 Combining option C with the feedback aspect of D is a thoughtful approach-it really brings together the best of both worlds. Thanks for sharing your perspective!
Thank you all for the incredible support and love for this video! ❤ You truly are the best community! If you have any wishest for the next video, feel free to share them in the comments 😊
I want part 2 of this! ❤ your videos are the best.
Using emojis in an application in such a basic way is the perfect way to make it look cheap and amateurish.
Can you elaborate? :)
i agree but it works here given the context
I like Option C best
I love when negative space is used efficiently
Great choice. Yeah, knowing how to use white space effectively is a great skill!
I think option 2 was more intuitive, and at the same time, it looks so beautiful and engaging
Yeah, it's really good one! :) Great choice
I love it! I find option C to be more appealing and interactive.
Thank you! 😊 We’re so glad you loved it and found option C to be more appealing and interactive. Your feedback means a lot to us! 🥳
Love this ❤ Option C is the best
Option C is great! :) Glad that you enjoyed it
This is such a good tutorial! my first time watching your video but I love it!
Thank you! 😊 I'm thrilled you loved it, especially for your first video here. Hope you enjoy many more!
Excelente vídeo!!! Conteúdo muito bom e muito didático. Estou aprendendo muito com seus vídeos.
Muito obrigado! Fico feliz em saber que está aprendendo muito com nossos vídeos. 😊
I feel option D is the best because of ease of interaction. It kind of also makes it more fun to see the emojis change with the slider movements
Option D definitely adds that fun and interactive element-totally agree! Glad you enjoyed it. 😊
I like option B
because it stands out and it is also not too overload
Option B really does strike a balance between simplicity and standout appeal-great choice! 😊
Found this through Google blog suggestions. Thanks for sharing these design iterations-they gave me some ideas on how to approach and think about designing in a similar way.
Glad you found value in the design iterations! Designing is all about refining approaches, so happy to hear it inspired you. 🙌
It was so much valuable. Bring more videos like that. And thanak you
Thank you! 👏 So glad you enjoyed it. We’ll keep working on more videos like this for you!
You should make the same video, but for beautiful youtube videos. It was so good to watch!
We’re so flattered by your comment! 😊🎥 Thank you for the kind words and the great idea-it means a lot to us. Stay tuned for more!
I just loved it, amazing practical UI/UX videos for beginners😍😍
Thank you so much! 😍 We’re thrilled you found it helpful for beginners. More practical videos are definitely on the way!
I choose option C, as it looks more prominent than others and gave good feedback to the users compared to other
Great choice! Option C does stand out with its prominence and feedback loop. Thanks for sharing your insight! 🙏
thanks a lot, this was helpful, we are designing a sleep app!! and will buy your book now to help us with the design!
That's amazing! 🎉 So glad it was helpful. Best of luck with your sleep app-let us know how it goes!
THE OPTION C IS NICE CAUSE ITS EASIER TO NAVIGATE AND ALSO MUCH MORE USER APEALING
Absolutely, Option C really makes things easier to navigate while being visually appealing. Thanks for your thoughts!
This opened my eyes fr!
Wow, that’s amazing to hear! 🤩 So glad it resonated with you and made an impact!
Very nice video. So engaging the animations, transitions. May i know what apps you using for this video? Thank you!
Thank you! We used Figma for the designs and After Effects + Premier Pro for the animations and transitions. Let me know if you need more details!
Amazing video. Well explained with technically. ❤
Glad you liked it! 😊 Thanks for the kind words and happy designing! ❤️
Awesome video, very useful , thank you for sharing!
Thanks so much for the kind words! We are glad you found the video helpful-your feedback means a lot! 😊
@@uxpeak I also received the UI/UX playbook, and I have to say, you really nailed the user experience in that one. I've tried many other PDFs, but I always felt overwhelmed by the sheer amount of text and the lack of practical examples. The UI/UX playbook is the first one I actually enjoyed. Congratulations!
Option B and D
Opt B As it is interesting and a cool UI
Opt D For tracking previous info and interacting personally..
I would like this design more with both the slider(opt B) and center part(opt D)
hanks for sharing your thoughts! 🙌 Combining the slider from B with the tracking details from D is a creative way to balance interactivity and functionality. Love the idea! 😊
A or D
Option A is minimal (which match today's trend)
Option D is focusing more about usability, reduce cognitive load,
B,C feels like a decoy for me
Great analysis! 💡 You're right-minimalism is key in today's design, and option D really balances functionality and cognitive ease. Thanks for sharing your perspective!
thanks man, vids like these are super helpful
Thanks so much! 🙌 We’re glad you find the videos super helpful. More like this are coming your way!
Option D - Covers all that you said.
Option B I like but it's not intuitive in nonmobile devices. So, I give the edge to Option D
Option D is definitely a strong choice! Thanks for sharing your input-it’s always great to hear your perspective!
Amazing, never seen video like this before
Glad that you liked it ❤️ Your support means a lot!
Nice explanation 👏, we want more video like this 🤩
Thank you! 👏 So glad you liked the explanation. We’ll definitely work on bringing more videos like this! 😊
Thanks for teaching us the extreme practical and real world solution
You're so welcome! 😊 It’s great to hear that the solutions feel practical and applicable to the real world-that’s exactly what we aim for. Thanks for the kind words!
Heyy! Cool video! How do you animate the emojis? Is it just a library or do you make it on your own?
Thanks for watching! The emoji animations are custom-designed specifically for this project. Glad you liked them!
Best Rising design Channel 🥶🥶🔥🔥🔥...
Wow, thank you! 🔥 Your support means the world! 🙌
Option B, but I would make it so that when scrolling from left to right, it automatically selects the middle one. This reduces the amount of clicks needed and makes it more playful to use.
That’s an awesome idea! 😊 Making the middle option auto-select when scrolling would definitely make it smoother and more playful. Thanks for the suggestion!
Wow! Great!
Please keep it continuing...
Thank you so much! 😊 We’re thrilled you enjoyed it and will definitely keep it going. Your support means a lot!
The approach taken in Option B is quite bad in terms of UX. Sure the UI is great I’m not gonna lie, I love how it looks. But this is where most designers completely get lost into their own design and forget about the UX side of things. People tend to use apps based on familiar experiences, and Option B completely goes against that by making an extremely unfamiliar curved-horizontal-sliding interaction. It looks more like an onboarding screen layout than an input screen.
Maybe taking this design approach while working with a massive company with lots of experienced developers would be great, but most designers mainly work with smaller businesses and startups, so taking this approach could be REALLY detrimental, both for the business owners and the developers that work with these businesses. So make sure to be mindful of that when designing folks ✌️
Option D is perfect 😍 a snappy-slider is like putting caviar on a grilled cheese!! Simple, effective, satisfying, and easy to understand!
Appreciate your in-depth view ! 🙌 D definitely has its strengths for simplicity and usability while considering smaller businesses. Love your analogy-caviar on grilled cheese sounds delightful!
Super useful video ✨ thanks for sharing 👊
Oh, we are so happy to hear that :) A lot of work went into it! Thank you
Good job gyus👍 I personally prefer option D, but also option C is great...
Thank you :) Great choice!
Option c is fun & user-friendly
Glad that you like this one 😊
Awesome video, lots of learning
Glad you liked it 😊
Really cool video, it deserves my like)
Thank you so much! It means a lot to know the video resonated with you. ❤️
5:12 intuitive? Give it to my mom and you will quickly learn that this is not intuituve 😄.
Overall I like option C the best, but I would change the order of sleep hours to increasing, as it is a more natural way of reading for the majority of people. And also, at 8:20 the background of highlighted option is bad from accessibility perspective (blends with the main bg too much).
P.S. saying that slider is interactive is like saying that you should eat soup with a spoon... like yeah, we know.
Thanks for the detailed feedback! 😊 You bring up an important point-knowing who your target audience is and designing for their needs is key. Adjusting the sleep hours to increase naturally and improving the background contrast are great suggestions, especially from an accessibility perspective.
Option C. I’m not usually a huge fan of slider design because it required you “do more work”, and I think that C looks cleaner than A with the centered layout and larger visual feedback
Got it. That's a great choice 😊
"Let's say you're designing a banking app". For Barclays apparently 😉
Haha, caught that, did you? 😉 It’s always fun using relatable examples!
Amazing video, thank you
Glad you liked it! 😊
13:41 Great point !!!
Appreciate you catching that! 🙏 So glad it stood out to you!
the C is the most engaging one to me because its just a tap of a button. on the other hand for D, you will have to drag the slider which is a little bit of work.
That's a good take. Thank you for sharing your choice! 😊
option c because for development it's also easy to build to. if i chose option b it's best but hard to replicate in code
in real world, business comes to service companies with 1/4 of the autual time required to develop the application, and the developer sits with designer to check if the design is feasible to develop in that timeline or not, and you know what they comes with a very simple UI to develop as per the timeline, either the product company do this themselves or provide the appropriate timeline to develop the application
In simple words designer might be able to design way better than the actual designed they submitted, but unable to proceed with their ultimate design because of development possibilities~cost and the development timeline.
Great point! Collaboration between designers and developers is key to balancing feasibility and creativity in tight timelines. 🙌
That banking app walk through 👏🏽 👏🏽 👏🏽 👏🏽
Glad you liked the walk-through! 🙌 Thanks for the support!
I like option D - It is the most engaging to know your progress, otherwise, I think for the longer term I will be a bit tired of this emoji and if the app has more variety like this I will be a bit overwhelmed. But I really like bank transfer tips!
We’re glad D caught your attention! It’s great to hear your thoughts, and we’re happy you found the bank transfer tips helpful. Thanks for sharing! 🙌
Awesome Insights here!😊😊💯💯💯💯
Glad that you enjoyed it 😊
Option C is most prominent experience and usable
Totally agree! 😊 Option C really shines for usability and delivering a great experience. Thanks for sharing your thoughts
Option C and the personal tracking from D
Great pick! 🎯 Option C’s engagement and D’s personal tracking features definitely bring out the best of both worlds. Thanks for your input! 🚀
Really lovely. Thanks
Most welcome 😊
Super video, I'm excited, great.🤗💋👌
Thank you 🤗
I don’t do well with sliders because sliding to the exact position could be quite strenuous so I’ll go with option c , its interactive and user friendly
Great choice! 😊 Option C really is a user-friendly alternative, especially for those who find sliders tricky. Thanks for sharing your perspective!
That third slide design is for those designers who hate the developer so bad .... Lol😂
It's about the users! ❤️ Don't you love challenge? :)
@uxpeak it's easy for somebody who use figma , but to make it work on a real screen, nightmare. I would prefer making design more user friendly by opting the correct components from good libraries like material ...
@@jafar1607 That’s a great point! Using components from established systems like Material Design ensures usability and consistency, but here’s the challenge-if your app looks and works just like four others using the same system, what makes it stand out other than the brand? This video isn’t just about user-friendliness; it’s about going beyond-creating something that’s not only functional but also engaging, delightful, and visually unique. The goal is to design an experience that users love and remember, not just one that ‘works’ like four others 😊
Nevertheless, you do have a point :)
@uxpeak the video is really good. My point was, if we had videos that shows the same technique to make designs better by using these kinda of libraries, many devs would appreciate.
Love it! Option D
Thanks for the love! Option D definitely seems to be a favorite so far! 😊
Option B & D is looking good
Solid choices! B & D bring together usability and aesthetics really well. 🔥
great work and very well explain
Thanks so much! Thrilled to hear it was helpful to you! 🌟
The problem with option D: what do you display before the user has inputted anything? A slider seems incompatible with this design.
Option C is better, especially for a mobile app. All the buttons are near the bottom, where the user will find them comfortable to reach. Before the user inputs a value, the buttons can all be de-selected and we could maybe display a 😴 emoji by default.
Great point! 🌟 Option C does work well for mobile, and I see your concern with D’s slider. Thanks for sharing!
@@uxpeak if I may offer some frank feedback, i find the extreme use of emojis in all of your comments somewhat off-putting and condescending - it feels like i'm being spoken to like a child lol
@@liam_iam Thank you for the frank feedback! We will be using emojis because it adds personality, but will tone it down!
@@liam_iam If you have more frank feedback please feel free to say it. We want to become the best UX/UI design channel and provide value to our community!
Great... you are doing soo great
Thank you so much! 😊 Your encouragement keeps us going! 🚀
Really great video ❤
Thank you so much! ❤️ Really glad you enjoyed the video-more great content coming your way! 😊
As a Developer I would vote for all of them accept the B,
C & D is quite good
Thank you for your insight! C and D are good!
Thanks ❤. Are you from UK ?
You're welcome. ❤️ Yes, we are!
great video, very helpful
Thanks so much! 😊 We’re thrilled you found the video helpful. More valuable content coming your way!
A is the best others are overly complicated, maybe D will work as well but it depends on context
Interesting perspective! 🤔 A definitely shines for its simplicity, and you’re so right-context is key in making it work best. Thanks for sharing your thoughts! 🙌"
Fantastic 🎉
Appreciate the excitement! 🎉 So glad you found it fantastic!
I prefer option C 🌟, but I would also like to include a comparison of sleep 💤 in the text.
Option C is a great choice! Including a sleep comparison could definitely enhance the experience. Thanks for the thoughtful suggestion! 🌟
What if you combined Option B and C? I think it would be more fun + better 🎉❤
Very interesting idea 😊
A. for user perspective if the app is new you need to design the simplest possible because you do not know if that user is highly techy so you need to educate them by giving simple button clicking after months you can re design it like the b, c, d
Great point! 🎯 Starting with simplicity is often the best way to ensure a smooth learning curve for users. Once they’re comfortable, gradually introducing more engaging or complex designs (like options B, C, or D) can elevate the experience without overwhelming them. Thanks for sharing this thoughtful perspective! 😊
would it be good if we add a page for their personalization of the layout/theme for them to choose from a,b,c or d
Great suggestion! Personalization could definitely add another layer of user experience. Thanks for the idea!
Awesome video! 🥰
Thank you! 🥰 I'm so happy you enjoyed it-more helpful content is coming your way!