Smart Interface Design Patterns — 100 Smart Interface Design Patterns & Live Examples. 7h Video

Web Name: Smart Interface Design Patterns — 100 Smart Interface Design Patterns & Live Examples. 7h Video

WebSite: http://www.smart-interface-design-patterns.com

ID:290574

Keywords:

Patterns,Design,Smart,Interface

Description:


Get the course! 7hvideo + UX training

Get the course!

7hvideo + live UX training

Starts at $175

100 Smart Interface Design Patterns & Live Examples. 7hVideo + UX Training.

25 video lessons + 4-weeks UX training.
For UI/UX designers and front-end developers.

Jump to thedetails↓

Guidelines & best practices for common components in modern interfaces.

Inventing a new solution for every problem takes time, and too often it’s just unnecessary. We can rely on bulletproof design patterns to avoid issues down the line. This course helps with just that.

We’ll study 100s of hand-picked examples — from complex navigation to filters, tables and forms. We’ll dive into actual real-life challenges. And: we’ll design and review each other’s work, together, live.

Jump to the table of contents↓

Watch the intro + sample

In this video course, we’ll explore:

Lesson number:

Designing for Touch

Chances are high that most of your customers use their mobile devices to access your digital products these days. Let’s see how we use devices and how we need to adjust our workflows for touch.

Free lesson preview

Duration

Lesson number:

Accordions

The workhorse of all interfaces — the good ol’ accordion, or expander. The pattern is everywhere, but too often it’s wrong or inconsistent. Let’s explore common usability traps, gotchas and best practices.

Free lesson preview

Duration

Lesson number:

Navigation

On mobile, we don’t have much space to display our elaborate navigation options. Let’s discover how we can deal with common navigation issues and which design patterns we can apply to do so.

Duration

Lesson number:

Hamburger

Oh, the infamous hamburger icon! Should it live in the upper right corner or at the bottom of the screen, floating as customers are scrolling and swiping by? Or should we abandon it altogether and use “Menu” instead? Let’s find out.

Duration

Lesson number:

Mega-Dropdowns

Do we need mega-dropdown hover menus in 2022? Probably not. Let’s explore things to keep in mind when designing and building a mega-dropdown, alternatives to hover menus and fine details for designing a better UX.

Duration

Lesson number:

Filters

We often use filters to reduce the scope of results, e.g. to adjust pricing or reduce the number of displayed products. How do we design filters and where do we place them — on mobile and on desktop?

Duration

Lesson number:

Carousels

It’s common for us as designers to dismiss carousels at first. However, when designed well, carousels can serve their purpose well — drive engagement and increase conversion. We just need to move away from the generic view of a carousel towards approaches that usually work slightly better.

Duration

Lesson number:

Infinite Scroll

Infinite scroll can be frustrating. It’s out of user’s control, it’s difficult to remember the position where you are left off, and usually it’s impossible to send a link to the current state in the infinite list. Plus, reaching the footer is an adventure of its own.

However, infinite scroll can work well in practice. In this session, we’ll look into the downsides of infinite scroll and how to fix them for good. We’ll also explore how we can combine infinite scroll, the “load more“ pattern and good ol’ pagination to make the exploration of items easier and more efficient.

Duration

Lesson number:

Modals

Modals, overlays, pop-ups, popovers... they all are disruptive, annoying and frustrating. Yet sometimes they can be very useful, especially when we need user’s input or don’t want users to lose context while informing them about something important.

Get once, watch forever. New videos added regularly.

A growing library of video lessons & examples. With 25 lessons available now, and more added every few months.

Ideal for interface designers, UI engineers and developers who’d love to be prepared for complex UX challenges.

Table of Contents→

Lesson number:

Designing for Touch

Chances are high that most of your customers use their mobile devices to access your digital products these days. Let’s see how we use devices and how we need to adjust our workflows for touch.

Free lesson preview

Lesson number:

Accordions

The workhorse of all interfaces — the good ol’ accordion, or expander. The pattern is everywhere, but too often it’s wrong or inconsistent. Let’s explore common usability traps, gotchas and best practices.

Free lesson preview

Lesson number:

Navigation

On mobile, we don’t have much space to display our elaborate navigation options. Let’s discover how we can deal with common navigation issues and which design patterns we can apply to do so.

Lesson number:

Hamburger

Oh, the infamous hamburger icon! Should it live in the upper right corner or at the bottom of the screen, floating as customers are scrolling and swiping by? Or should we abandon it altogether and use “Menu” instead? Let’s find out.

Lesson number:

Mega-Dropdowns

Do we need mega-dropdown hover menus in 2022? Probably not. Let’s explore things to keep in mind when designing and building a mega-dropdown, alternatives to hover menus and fine details for designing a better UX.

Lesson number:

Filters

We often use filters to reduce the scope of results, e.g. to adjust pricing or reduce the number of displayed products. How do we design filters and where do we place them — on mobile and on desktop?

Lesson number:

Carousels

It’s common for us as designers to dismiss carousels at first. However, when designed well, carousels can serve their purpose well — drive engagement and increase conversion. We just need to move away from the generic view of a carousel towards approaches that usually work slightly better.

Lesson number:

Infinite Scroll

Infinite scroll can be frustrating. It’s out of user’s control, it’s difficult to remember the position where you are left off, and usually it’s impossible to send a link to the current state in the infinite list. Plus, reaching the footer is an adventure of its own.

However, infinite scroll can work well in practice. In this session, we’ll look into the downsides of infinite scroll and how to fix them for good. We’ll also explore how we can combine infinite scroll, the “load more“ pattern and good ol’ pagination to make the exploration of items easier and more efficient.

Lesson number:

Modals

Modals, overlays, pop-ups, popovers... they all are disruptive, annoying and frustrating. Yet sometimes they can be very useful, especially when we need user’s input or don’t want users to lose context while informing them about something important.

1 | 28

7h Video, Real-Life Examples, Checklists & Live Sessions.

With 100s of practical examples, guidelines, gotchas, checklists, takeaways & exercises — applicable to your project right away.

Get a taste!

Get 3 video lessons for free — in your inbox!

A full course with delicious design recipes, exquisite samples and reliable examples. Carefully hand-picked over 15 years:

A growing video library of examples for common UI components: from complex navigation and enterprise tables to intricate mega-dropdowns, carousels, filters, sorting, maps, charts and web forms. From remote corners of the web. Each lesson is around 10–20 mins long, with examples, guidelines and checklists to keep in mind when designing and building interfaces. You can watch lessons in any order, and use them as references for your ongoing projects. All video lessons are recorded in high quality and include full captioning in English. Twice a year you can participate in a deep-dive live online UX training, with exercises, challenges and groupwork, live. You can also ask all your questions directly, and get your work reviewed by peers and Vitaly. You get a UX certificate as well. You also receive a 165-pages deck with UI/UX checklists. The deck includes useful questions, pointers and best practices to bring up early to avoid issues down the line. Updated annually. For you, free of charge.

Bonus: Life-Time Access to UX Checklists!

Never forget important details. All the fine little details that make or break UIs — in one single deck of 165 cards. No expiry. Updated annually.

Add-on: Live UX training. Deep-dive sessions with 1:1 feedback & UX certification.

In a 4-weeks sprint, you’ll learn how to deal with real-life UX challenges from the ground up. You’ll be designing complex interfaces, receive feedback and work with Vitaly and people around the world.

Every week, we’ll host 2×2.5h-long live sessions on:

Real-life UX challenges,Live workshops and design workouts,UX deep dives and case studies,Design reviews and revisionsPersonal 1:1 feedback with Vitaly.

You’ll have enough time to ask all your questions and learn at your own pace. And: you can get a UX certificate as well. Check the next UX training.

Next UX training: Sep 9 – Oct 7, 2022
(Can’t make it? Mark calendar for March 2023)

What’s UX training like?

That’s what these wonderful people say about the course!

Software Developer

Smart Interface Design Patterns is an incredible resource. Vitaly lays out the best practices and patterns for responsive and accessible interface design. It is detailed, informative, and backed up with practical examples.

You can tell years of design expertise have been poured into it. Vitaly is an amazing teacher and walks you through complex concepts by making them easy to understand. Developers and designers of all experience levels can gain so much from this!

Funky Design Educator

In this course, Vitaly provides significant insight not only theoretically but also using practical and relevant examples. These examples are backed up with research and clear graphics to illustrate the points he is making.

Vitaly has accumulated years of observation and research that makes this course a gem of knowledge; essential for any of us, not just designers and developers.

Web UI and Design Systems Engineer

Years of research and experience by one of the most prolific members of the web community has been distilled and condensed into this course.

So whether you’re a designer or a developer who frequently works with designers, you’ll find something in this course for you. Take this course; you won’t regret it.

Head Developer and Writer at DocumentWrite.dev

A rare course that skips the framework hype and dives straight into actionable solutions. “Smart Interface Design Patterns” course is brimming with timeless advice about best practices for intermediate-level designers. Vitaly does an amazing job giving each solution real-world context. I wish I discovered this course sooner in my career!

Senior Accessibility Designer

Smashing Magazine and Vitaly are better than ever, and we get to watch it all from the comfort of home!

The workshop is so fun and immersive you won’t even notice you’re learning. You’ll feel like you’re getting to have a one-on-one conversation with one of the greatest design and development educators while digging into your biggest questions. This library is a lovely combination of principle and practice and well worth it!

Design Systems Specialist, Designer

Vitaly has been a relentless force for good in the digital design space for years now. With this beautifully captured video series, so much of his expertise is in one place. There is something for everyone here!

Engineering Manager, Chrome, Google

“Smart Interface Design Patterns” offers the most comprehensive look at modern user-interface patterns of any course I’ve seen. Vitaly explores (in-depth) 100s of real-world examples of production UX, picking apart the trade-offs of responsiveness, interaction and accessibility along the way.

The focus on “production” vs. simple demos makes this course particularly valuable; you can see what decisions teams across eCommerce (and other verticals) made and why. I also loved the format — a wonderful mix of examples, videos, speaking and more. Highly recommended!

Front-End Developer

For someone who struggles to focus on courses and usually avoids them, Vitaly has an engaging charm that keeps you watching. Vitaly shares so many insightful gems and the thinking that goes behind different design decisions for different UX/UI issues. This course makes for a fantastic design reference! 11/10.

Designer, Illustrator, Animator

As a developer, it’s so easy to get hyper-focused on the code itself and lose sight of the bigger picture. This friendly course provides a ton of “aha” moments that will help you make better decisions for the people using your sites.

Web Designer, Front-End Developer

I love me some components. Effective design systems bake UX, design, and development best practices into a reusable component library to increase velocity and improve quality.

But what exactly are those best practices? Where does one learn those best practices? Right here in this course! Vitaly is a living, breathing web design & development best practices encyclopedia, so I’d highly recommend this course to any web practitioner.

Creative Director, Advisor

Vitaly has been a student of the web for a long time now, and he’s collected a wealth of knowledge about what makes for great digital experiences. This course is a fantastic way to learn from his years of experience in just a few short hours. Don’t miss it!"

Front-End Developer

Vitaly has seen and done it all, and this course is an incredible value for all the insights and resources you’ll gain! The depth of knowledge Vitaly has gained over the years is unmatched, and through this course he shares the extra details that would otherwise take a full career to know about.

The videos are packed with examples to get your ideas churning, and after taking this course you’ll be able to create more successful, usable interfaces that work today and into the future.

BTConf, Conference Organizer

Vitaly is known for his intense research when it comes to topics like this. Over the years he gained such a good expertise in the field of design patterns that this course is a treasure of knowledge, mixed with best practices and spiced with a pinch of useful tips and tricks.

If you are a designer, this in-depth workshop can only broaden your knowledge and make you an even more experienced designer. If you are a developer, this course is a must for you to build a better connection and understand to the designers you work with.

Software Engineer at Spotify

This is the course I never knew I needed. As a frontend developer who works closely with design, this course provided me with the skills I need to collaborate more effectively.

Not only do you get real-world examples, but you’ll learn the why’s of responsive design patterns, backed up by tangible data. I recommend this course for every designer and web developer looking to improve their responsive design pattern skills.

Front-End Developer

You’d be hard pressed to find a workshop that can keep you as engaged and eager for more as this latest work from Vitaly! His energy, enthusiasm and skill is clear and his experience and many years of research in the industry is a valuable resource.

There are lots of great examples and takeaways. Whether you are new to the industry or been around for a while, there is still a bunch to take away and use in your work day to day! A super fun and really enjoyable learning experience.

UI + UX Specialist, Front-End Engineer

Rad thoughts, examples and lessons from Vitaly here. Clearly thought out, professionally vetted, and elegantly distilled. A delightful and educational course with something for designers and developers alike.

Product Designer, Front-End Developer

Anytime Vitaly shares something, I immediately think of great UX practices, in-depth dives, and well-researched studies.

This workshop is a deep-dive with tons of useful recommendations that help you make decisions more quickly, effectively, and without wasting time on weighing options and solutions.

As designers, we tend to learn by example, so this workshop provides immense value in a short amount of time. Whether you’re a designer or a developer, you’ll learn a lot. I highly recommend it!

Digital Designer, Creative Lead

The “Interface Design Patterns UX Training” has restored my faith in virtual learning. Not only does he provide a wealth of knowledge, but also makes the learning experience engaging, thoughtful, and personal.

His homework critiques are thorough and inspire me to continue refining my work. I’ve already used the extensive resources from class to guide my UX projects at work.

Senior UX Designer

Having been in the industry for 25 years, being introduced to new ideas and examples I haven’t seen before is pretty rare - but I obviously had not met Vitaly yet!

He has a slide or anecdote for every possible scenario plus boundless enthusiasm and positivity to accompany it. The assignments based on real-world clients and projects were challenging but fun as they fell outside my normal day to day type of work. Also, personalized video feedback on each assignment was provided, which I found very helpful.

I’ve done workshops and been to a number of conferences, and while the content is typically well and good, you often find yourself getting bored, zoning out, or wanting it to be over. It was exactly the opposite with Vitaly’s training; many of the attendees would have continued the sessions indefinitely if given the opportunity. I’ve already started applying new ways of thinking to my client work and I would sign-up for a part two in a heartbeat.

Product/UX Designer

Every week there was an assignment to complete which focused on a particular UX problem. I found that there was such a wealth of information that my mind was exploding with creative ideas! The assignments sizzled with detail and had me wishing for all clients and stakeholders to write design briefs in this manner.

There’s no doubt that my confidence in tackling the UX assignments grew over the duration of the course. I now feel able to devour UX assignments, and less like a fraud when self-describing as a “UX” designer. Vitaly teaches UX in a fun and accessible way, and it was a joy to learn from a renowned industry leader. I can’t wait to sign up for another course!

Art Director, Visual Designer

Are you dealing with complex UX challenges? The knowledge and expertise shared by Vitaly are mind-blowing! His enthusiasm for the topic makes the class a must-do to learn how to approach complex UX.

Teacher, Educator

Over the years Vitaly has amassed an incredible amount of knowledge about web design and web development. He has always shared his knowledge with everybody at conferences and at universities around the world.

And now he has made all this knowledge available to you in this very pleasant form, to enjoy in your living room, in your home office, in the kitchen or in your hammock, where and whenever you want."

Front-End Developer

I’m amazed with the quality of the course. Not only for the quality of the videos, which is incredible and with many details that make me hooked, but also for the clarity of the content.

As a front-end developer, I always put a lot of emphasis on how to assemble interactive components, and it’s a permanent research! But with these videos, you get both regular and cutting-edge cases covered, with general solutions and well-defined steps to follow.

Undoubtedly, that’s the course for front-end people who want to improve in UX field. And it’s not only for those who are just starting, but also for experienced professionals who want to improve their skills.

Illustrator, Art Director

I’ve had the honor and privilege of working with Vitaly for the past 11 years. So I’m an eyewitness to this project’s time spent, dedication, and attention to detail. The result is a course that is clear, precise, and enjoyable to watch.

Author, Speaker, and Developer

Vitaly has done a fantastic job reimagining the virtual teaching space with his latest video course! Each of the sessions include succinct video tutorials with detailed background pattern information, engaging real-world examples, and areas to focus on when reviewing or building your own patterns.

The amount of detail and engagement that Vitaly brings to this course ensures that both designers and developers will learn something new - plus have fun along the way!

Mascot, Food-Chaser

Greatest secrets are always hidden in the most unlikely places. I find my way by moonlight and see the dawn before the rest of the world. This course has them all — greatest secrets for better interface design and UX, all in one single place. Meowsome!

UX Designer

I am mind-blown at how much I learn at Vitaly’s workshops! It is amazing when we break down every piece of an interface, how much easier it becomes to understand it.

Vitaly has a highly engaging and positive teaching style. He is exceedingly knowledgeable yet very down to earth and approachable. Vitaly goes above and beyond for his students! I highly recommend Vitaly’s workshops to any designer, product owner or front-end developer who wants to advance their career!

Front-End Developer

“Smart Interface Design Patterns” is truly what the name says. Vitaly goes beyond the basics to tell you the “why” and show you the “how” to inform your design decisions. For someone who struggled with mobile responsiveness, I think this is what I needed to make better (smarter) decisions.

Front-End Developer, Indie Hacker

Modern web applications are full of surprisingly-intricate UI elements. There’s so much more than meets the eye, and if we aren’t careful, we’ll wind up designing an inaccessible, hard-to-use product! Vitaly shows us how to design thoughtful, robust building blocks for the web.

UX Designer, Speaker, Conference Organizer

Great design requires a way to explain why we choose a certain design solution. This course offers a solution to every common design problem and much more. I recommend it to everyone, especially if you are already working in the field.

UX/UI Designer, Animator

If you design or develop interfaces, you need the ability to weigh the pros and cons of different patterns and approaches. This course dives deep into all of the common components of the modern web, allowing you to create solutions and tackle important issues in your work.

UX Designer, Author

Getting proficient at UI design can take years, but you can get there way faster with this course. The carefully researched examples and practical guidance here will give you the foundation you need to design great interfaces.

Front-End Developer

Smart Interface Design Patterns is an absolute goldmine of information, presented in a lighthearted and pleasant form by Vitaly Friedman.

It explains complex design patterns — particularly when done responsively and responsibly — with great details, backing suggestions with countless examples and real world studies. It is a joy to watch through and through, and a must for anyone interested in high quality and modern web design.

Lead Front-End Developer

This course is ideal for anyone looking to get up to speed on modern UI design and development practices. Backed up by thorough research, and featuring detailed and well-articulated explanations of common components, both new and experienced designers and developers will find plenty to benefit from. Highly recommended!

Lead Frontend Engineer at Signavio

Vitaly takes responsive design to the next level by discussing information architecture and content strategy. How to come up with tactics to achieve the best UX is always tough. But this course gives us strategies and patterns to solve the right issues.

UX Consultant

I know of nobody else in the industry who has spent so much time and energy analyzing best practices in user interface design across thousands of websites. If you are seeking to improve your interface design skills, you will not find a better guide.

Digital Designer, Illustrator

If you’re looking for digestible, friendly, and extremely well researched advice on interface design, this is the course for you. I can’t think of a single resource more informative or exhaustive, nor a presenter more suited than Vitaly. Miss it at your peril.

Smart Interface Design Patterns, curated by yours truly chef in charge, Vitaly Friedman.

My name is Vitaly, and over the last 15 years, I’ve been scouting the web for reliable interface design patterns. I was honored to be involved in design and testing first-hand, studying solutions that worked well or failed miserably. All these learnings and insights from all these years are now collected in this video course.

Over the years, I was wearing many hats, as designer and as developer, being involved in UX, interface design, usability testing and performance optimization.

I love our wonderful community, and so love writing articles about the web, speaking, workshopping and teaching. I’m the editor-in-chief and creative lead of Smashing Magazine. In my spare time, I’m a front-end & UX consultant in Europe and abroad, working with big and small companies and organizations, such as European Parliament, Haufe-Lexware, Axel-Springer and others.

Twitter — LinkedIn

vitaly@smashingmagazine.com

Simple prices, no surprises. Buy once, access forever.

Sous chef $175

Video library only

100s of real-life examples25 video lessons (total 7h)5 new videos every yearQuality recordings (incl. English captioning)Life-time access to all videos, slides and checklists $279$175

Get the course! Early pricing (5 left)

Master chef $549

Video library + UX training

100s of real-life examples25 video lessons (total 7h)5 new videos every yearQuality recordings (incl. English captioning)Life-time access to all videos, slides and checklistsLive UX training (4 weeks) with hands-on UX challenges (running 2× a year)Slack channel for 1:1 feedbackAnswers to all your questionsUX certification $699$549

Get the course! Early birds (1 left)

License for a larger team?

Want to bring your entire team on board? That’s a smart choice! For team licenses and VAT invoices, please get in touch with Vitaly, and get full access and certification for your entire team.

Contact Vitaly

Interested in a public or in-house workshop on interface design, UX, or front-end? You are in the right place. Reach out via email and we can arrange something in no time, be it training, audit, consultancy, workshop or talk!

vitaly@smashingconf.com

TAGS:Patterns Design Smart Interface

<<< Thank you for your visit >>>

Websites to related :
Shop Rash Guards, Neck Gaiters,

  "); } else { win._boomrl = function() { bootstrap(); }; if (win.addEventListener) { win.addEventListener("load", win._

NUMBERISH, Work Smarter, Not Har

   TourCardsBlogLoginContactAbout Select Page NUM8ER1SH
simplifies the way you share and consume information.NUMBERISH’s easy-to-use dashboard pri

Farbdesigner – Farbdesigner.de

   Home FarbdesignerAnwendung startenFarbtöneKombinationenFarbplanungssystemGestaltungsgrundlagenReferenzobjekteTipp

Mandy Porta LLC | Children's Ill

  HomeAboutPortfolioEtsy ShopFreebiesContactSPREAD JOY AND INSPIRE IMAGINATIONS
With Happy Illustrations and Surface PatternsHi, I’m Mandy Porta, an ar

Makris | Custom | Design | Conce

  HomeAboutMakrisTecnologieMaterialiCollaborazioniCataloghiIMOONProdottiCustomDesignConceptProgettiNewsContattiContattiArea PressSeleziona una pagina

Daniele Girardi - Architettura e

   Loading...

Event produktion / Kommunikation

   #comp-k5a35bz4:not([data-screen-in-hide="done"]){opacity:0}:root{--color_0:255,255,255;--color_27:187,192,168;--color_1:255,255,255;--

Adhesive / Brand+Digital Designe

  PROJECTOSMANIFESTOCONHEÇA-NOSFALE CONNOSCOPTENMENUPROJECTOSMANIFESTOCONHEÇA-NOSFALE CONNOSCOPTEN0&hellip;PROJECTOSMANIFESTOCONHEÇA-NOSFALE CONNOSCO

Insane Inside Design Caps, Socks

  "); } else { win._boomrl = function() { bootstrap(); }; if (win.addEventListener) { win.addEventListener("load", win._

Andy Wyss Design

  &#8212; Main Menu &#8212;HOMEABOUTPORTFOLIOCONTACTHOMEABOUTPORTFOLIOCONTACT Recent PortfolioHealed Wheels LogoA logo design for Healed Wheels, LLC. in

ads

Hot Websites