5 Common UI Design Patterns | Part 1

These are 5 of the most common and useful UI design patterns that every UI designer should know... Remember to Subscribe goo.gl/6vCw64
Here are some helpful links if you want to research UI Design Patterns
ui-patterns.com/
www.uxlibrary.org/explore/ui-...
uipatterns.io/
www.pttrns.com/
0:00 Intro
0:20 Accordions
1:10 Dropdowns
2:17 Cards
3:08 Breadcrumbs
4:21 Hamburgers
🏆 //////////// Join my members community to get access to perks:
You can get this starting and ending design file
designchamps.io/
👋 ////////// Join the Discord Server and meet other creatives
/ discord
------------------------------------------------------------------------------------
🤝 //////////// My Courses, Templates, Free E-Books, & 1:1 Mentorship
www.jesseshowalter.com/
👋 ////////// Follow me on Social
Instagram: / imjesseshow
Twitter: / imjesseshow
📫 ////////// Sign up for my Monthly Newsletter
www.jesseshowalter.com/newsletter
------------------------------------------------------------------------------------
🖥️ ////////// I build most of my websites using Webflow
webflow.grsm.io/4495884
💻 ////////// I host all my websites with Hostinger
www.hostg.xyz/SH5fF
🎵 ////////// Musicbed is the best place to get music for your films. Get your first month free when you purchase an annual subscription by using my coupon code JESSE at checkout.
share.mscbd.fm/imjesseshow
📸 ////////// The Equipment I use
www.amazon.com/shop/jesseshow...

[@devcor]

The left example with two "dropdowns" is actually not a dropdown, but a combobox - it's a type of an input that allows users to type in things to filter out options from the dropdown list, i.e. combines dropdown list and an input field -- hence the name.

[@fredrobinson458]

Awesome content and examples Jesse! I appreciate it.

[@topnotchdaagrade]

Great explanations Jesse

[@DesignedByTaz]

Thank you for this Jesse!

[@benlow24]

Nice examples to showcase the patterns with

[@ogundeleayomide5724]

Thanks for sharing

[@dailymeow3283]

The last hamburger menu looks cool the way its list items animated

[@mattwebbertime]

Just a heads-up on a minor editing bug: 'breadcrumbs' chapter is incorrectly labeled as 'Number 5' in the caption graphic. Thanks for the great content!!

[@marlowisws]

Nice post, but surprised breadcrumbs made this list. Breadcrumbs can be surprisingly difficult to pull off intuitively, and are more of a device of information architecture than simply a UI design pattern like dropdowns and accordions.

[@user-mr2zl5wt6m]

GREAT!!!

[@JesseShowalter]

🔥

[@abhiarya9084]

Can I use bank card in card

[@LemonStain]

Where can I get a Sola Fide wall art like that?

[@wandresvelasquez]

🎯 Key Takeaways for quick navigation: 00:00 📋 *Estos son 5 de los patrones de diseño de UI más comunes que todo diseñador de UI/UX debería usar.* 00:26 🗂️ *Los menús acordeón permiten a los usuarios expandir y contraer secciones de contenido fácilmente. Ayudan a navegar información rápidamente.* 01:35 👇 *Los menús desplegables permiten a los usuarios seleccionar elementos de una lista. Se debe tener cuidado en no incluir muy pocas o demasiadas opciones.* 02:17 🎴 *Las tarjetas pueden contener cualquier tipo de información como imágenes, texto, botones, gráficos, etc. Son muy versátiles.* 03:15 🥪 *Las migas de pan permiten a los usuarios ver su ubicación actual y selecciones previas en un sitio web o aplicación. Ayudan a no perderse.* Made with HARPA AI

[@okochajoshua7202]

Pls what's the difference between cards and modals?