How to Create a Navigation Bar in a Design System - Figma Tutorial

Фильм және анимация

🚀 Get 2 free months of Skillshare Premium & watch my design course for free: skl.sh/2TVhf8z
In this video, I will guide you through designing navigation bars for apps. Navigation bars are a crucial component in app design, and I will explain the essential considerations and variations you need to be aware of. I will also provide insights into the dimensions and alignments of navigation bars for different iPhone models.
🚀 The Ultimate Guide to Become a Product Designer: learnproduct.design
🚀 The Super Ultimate Guide to Design Systems: learnproduct.design/designsys...
🚀 Create an account on Mobbin for free:
mobbin.com/?via=chethan
🔶 Chapters
00:00 Introduction
00:25 Material Design Guidelines
02:10 Human Interface Guidelines
03:36 Mobbin
04:37 Inventory Analysis
07:02 Designing the Nav Bar
42:57 Documenting the Nav Bar
--------------------------------------­---
Mega Product Design Course for Beginners:
• The Mega Product Desig...
Webflow Course for Beginners:
• Webflow Course for Beg...
Photoshop Tutorials:
• Photoshop CC Tutorials
Illustrator Tutorials:
• Illustrator CC Tutorials
After Effects Tutorials:
• After Effects CC Tutor...
UI Design Tutorials:
• UI Animation/Interacti...
Design Resources, Tools and Softwares:
• Design Resources, Tool...
Adobe XD CC Tutorials:
• Adobe XD CC Tutorials
eSports Design Tutorials:
• eSports Design Tutorials
--------------------------------------------------------------------------------------------
Contact me :
Portfolio: chethankvs.design
Twitter: / kvschethan
Instagram: / design_pilot
Mail: designpilot21@gmail.com
Behance: behance.net/chethankvs
Dribbble: dribbble.com/chethankvs
--------------------------------------------------------------------------------------------
LIKE, SHARE, COMMENT & SUBSCRIBE :)

Пікірлер: 42

  • @dotpenji
    @dotpenji10 ай бұрын

    I absolutely love how thorough and detailed your video guide to Design Systems is! Your breakdown of navigation bars and the careful attention you're giving to Material Design Guidelines and Human Interface Guidelines is truly insightful. I'm curious about your approach to reconciling the differences between navigation bar placements in Material Design and Human Interface Guidelines. How do you determine which guideline to follow when there's a disparity?

  • @DesignPilot

    @DesignPilot

    10 ай бұрын

    See what works for your app and decide

  • @monalizapantoja8490

    @monalizapantoja8490

    10 ай бұрын

    Your video guide on Design Systems is incredibly thorough and detailed! Thank you ❤

  • @monicasoriano8581

    @monicasoriano8581

    10 ай бұрын

    Reconciling differences between Material Design and Human Interface Guidelines, it's a great point. Design guidelines can sometimes vary, and it's essential to make informed decisions. The key is to be aware of both sets of guidelines, understand the reasoning behind each, and then make informed decisions based on the project's requirements and the user's expectations. It's a dynamic process that may require some iteration, but it's worth it to create a user-friendly and visually cohesive design.

  • @DenverOrtiz

    @DenverOrtiz

    10 ай бұрын

    The way you've explained the rationale behind your design decisions, like considering the status bar height and using absolute positioning for certain elements, showcases your expertise and problem-solving skills. Kudos!

  • @itsme_jervy1404

    @itsme_jervy1404

    10 ай бұрын

    When reconciling disparities between Material Design and Human Interface Guidelines, I prioritize the specific platform or ecosystem I'm designing for and align with its guidelines while keeping user experience at the forefront. Ultimately, the choice between the two guidelines comes down to creating a cohesive and intuitive user journey within the context of the platform or product I'm working on. 🚀

  • @ooogabooga5111
    @ooogabooga51119 ай бұрын

    Wow, there is no single video like this on youtube. Its so detailed, as a developer who also love designing and likes to upskill myself, I can say this is very helpful. Thank you :)

  • @altamashkhan5870
    @altamashkhan587029 күн бұрын

    Thank You so much chethan for this video really loved it the way of explanation cleared all my doubt again thanks a lot may you find everything you want and have successfully life.

  • @playpiano2264
    @playpiano226410 ай бұрын

    Chetan you're amazing as usual ❤🎉 How are time managing your work and content creation? Please make a video on other soft skills that designers need as well.

  • @afsarux4367
    @afsarux436710 ай бұрын

    Thank you for the video. This is a really awesome video and it's very useful for my career.

  • @topperboi1642
    @topperboi164210 ай бұрын

    Thank you very much for this amazing video

  • @anikislam6842
    @anikislam684210 ай бұрын

    Thank you so much.

  • @smilli6415
    @smilli64156 ай бұрын

    Would be great to see constructing elements components properties as per material guidelines , (keeping in mind padding sizes etc ) that would be good series to do - designing components as per material/ios guidelines

  • @DesignPilot

    @DesignPilot

    6 ай бұрын

    Just download the UI lots they provide. You don’t have to see me do it. And also the guidelines are just guidelines. You can change and update them as per your needs if you know what works and what doesn’t.

  • @smilli6415

    @smilli6415

    6 ай бұрын

    will do @@DesignPilot

  • @nikhil4yourhelp670
    @nikhil4yourhelp67010 ай бұрын

    Thank you awesome video specially instance swap , can you plz tell which icon liberally you are using ?

  • @DesignPilot

    @DesignPilot

    10 ай бұрын

    I made these on my own

  • @nikhil4yourhelp670

    @nikhil4yourhelp670

    10 ай бұрын

    @@DesignPilot ok

  • @aj-lan284
    @aj-lan28410 ай бұрын

    Request you to Please make a video on Why do you think AI will not replace Product Designer? (with valid reasons)

  • @smilli6415
    @smilli64156 ай бұрын

    whats difference between flatten and outlone stroke after u make an icon?

  • @yulduzkhonalimova7342
    @yulduzkhonalimova7342Ай бұрын

    Hi, I'm confused about how to organize the "Titles" separate component for "Trips" & "Cancellation policy" & also other sizes of titles throughout the app. and problem i'm having trouble is what to do when the big size Title changes to small n goes up to Navigation bar & becomes small when the user scrolls the screen

  • @DesignPilot

    @DesignPilot

    Ай бұрын

    Checkout my video on Titles in the playlist

  • @yulduzkhonalimova7342

    @yulduzkhonalimova7342

    Ай бұрын

    @@DesignPilot oh, before writing a comment i actually searched for it in the playlist but couldn't find it. Can u pls provide the link to that specific video?

  • @DesignPilot

    @DesignPilot

    Ай бұрын

    @yulduzkhonalimova7342 Ah. It’s actually a part of my design system course. But basically I made ‘Trips’ and ‘Cancellation Policy’ as list items and didn’t add them as titles.

  • @ooogabooga5111
    @ooogabooga51119 ай бұрын

    One doubt, when we swap to an icon without elevation, compared to the with elevation won't the one without elevation create a spacing (small like 2px ) to the right or left of the screen. Isn't that an inconsistency?

  • @DesignPilot

    @DesignPilot

    9 ай бұрын

    How will it create spacing?

  • @ooogabooga5111

    @ooogabooga5111

    9 ай бұрын

    @@DesignPilot An eg: 13:39 the left icon , here you have a 24px icon which is inside a circular border with elevation and looks okey because that border touches the left side. But take an example like 15:16 , here the icon itself is 24 but it just dont' have border and elevation but now the icon is not touching the left and it creates this small (2px) gap which is introduced due to icon. Is that a design inconsistency or is that normal to have and why is it normal if so?

  • @DesignPilot

    @DesignPilot

    9 ай бұрын

    @ooogabooga5111 If the stroke is set to Inside, then whether or not you add a stroke, the final size will be 24px

  • @ooogabooga5111

    @ooogabooga5111

    9 ай бұрын

    @@DesignPilot I understand that icon size is 24px, I'm talking about the Icon without stroke also 24px and it creates that small pixel gap towards the left.

  • @RaufunNur
    @RaufunNur10 ай бұрын

    💖🙏

  • @RanbirYadav-zh2in
    @RanbirYadav-zh2in10 ай бұрын

    Bhaiya, sometimes I wait to expect your video to start captions with 'for beginners too. If it's not written it feels Like Intermediate or advanced. So mostly skip ho jata hai for beginners.

  • @DesignPilot

    @DesignPilot

    10 ай бұрын

    Well that’s their loss

Келесі