Create effective Design Systems for your brand | UX Case Study | Blue Fin Design
Working with Design systems can be difficult if you are just starting out. But once you get into the habit of using them, you'll not want to go back!
Want to work with Design Systems? Want to learn what are Design systems, why to use Design Systems, and How to build Design Systems? I'll also talk about the Atomic approach to Design Systems. Finally, I'll share some good examples of Design Systems from industry leaders, and will share some ready-to-use UI Kits so you can get started with your next UX project!
Watch this video to learn about Design Systems.
Looking for 1:1 mentorship or feedback on your portfolio? Book a session with me on Superpeer - https://superpeer.com/bluefindesign
Watch the entire playlist of the UX Case Study - • UX Case Study - Language Translation
If you liked this video and would like to see more such tutorials, please subscribe to this channel - / bluefindesign
---------------------
Design Systems Examples -
Google Material IO - https://material.io/
Apple Human Interface Guidelines - https://developer.apple.com/design/
Microsoft Fluent Design System - https://www.microsoft.com/design/flue...
Uber - https://brand.uber.com/guide
Shopify - https://polaris.shopify.com/
IBM's Carbon Design System - https://www.carbondesignsystem.com/
Mailchimp - https://ux.mailchimp.com/patterns/color
---------------------
Ready to use UI Kits -
Untitled UI - https://www.untitledui.com/
Shipfaster UI - https://www.thedesignership.com/produ...
UI Prep - https://www.uiprep.com/
Apple iOS Design 2 UI - https://www.figma.com/community/file/...
Material Design 2 UI - https://ui-kit.co/#ui-kit
---------------------
Video Timestamps -
00:00 - Introduction
02:35 - What is a Design System
03:35 - Why to use Design Systems
06:21 - Elements of a Design System
09:40 - Atomic Approach to Design Systems
13:44 - How to build Design Systems
17:12 - Successful Design System Examples
19:03 - Ready to use UI Kits
21:02 - Outro
---------------------
Design and Prototype the Instagram App in Adobe Xd - • Instagram App Design & Prototype
Watch my recent videos on -
Prototyping Interaction Overview - • Prototyping Interaction Overview | Ad...
Easing Option in Adobe Xd - • Easing Options in Adobe Xd | Animatio...
All New Features in adobe Xd Oct 2021 - • All New Features in Adobe Xd Update -...
Facebook Like Button Prototype - • Design and Prototype Facebook and Lin...
Repeat Grids - • Design Fast with Repeat Grids in Adob...
Nested Components - • Google Maps in Adobe Xd | Blue Fin De...
Multilevel Dropdown lists - • Multi-level Dropdown Menu Design and ...
Parallax Effect in Adobe Xd, NO Photoshop - • Parallax Effect in Adobe Xd | NO Phot...
Image Masks - • Image Masks in Adobe Xd | Blue Fin De...
Introduction to UX Design - • UX Design - Introduction and Benefits...
Navigation shortcuts - • Navigation Shortcuts using Adobe Xd |...
Audio Playback - • Music Player Design - Play Audio in A...
Keyboard Triggers - • Prototype with Keyboard and Game Cont...
Mobile App Overflow Menu - • App Overflow Menu Animation | Adobe X...
Input Fields Prototyping - • Input Fields Design & Prototype | Ado...
---------------------
View my work - https://www.bluefindesign.ca
Connect with me on Social Media:
Instagram - / bluefin.design
Facebook - / bluefin.design
Behance - https://www.behance.net/nikhilgala/
