Nick Babich @101babich Twitter profile

Last Seen Profiles

@TitanTokens

@behrensange

@MidirSol

@nekitasamauwu06

@Cryptohelp90

@tolgaozek

@alphavdesign

@kashiyuu343364

@JUSTICELOVEMER1

@VANESSA83918562

@BobMaulidan

@mohamme28122846

@Fah28001

@MarthaMills7

@3chuqq

@coach_alext

@toolsinthetrade

@woolfispoetry

@davidbarguil

@BoZe

@ek_hamdan

@NenekStwku

@Badlands65

@1shahdhassan

@DiwiBuns

@snailpocky

@TWEET_PAROL

@jzylvr

@chunfeng2024

@DorothyBruce14

@LHiGroup_

@torsy_torsy

@ogatamakoto1985

@mercurito

@rebecca_prude45

@xyz520520

Nick Babich

@101babich

1 year

12 principles of animation Excellent summary of fundamental animation principles that can be applied to UI design. 📷: @LachinaCreative

18

598

4K

Nick Babich

@101babich

1 year

10 Principles of Motion Design Based on the Disney's twelve basic principles of animation 📷: @jrcanest

10

412

3K

Nick Babich

@101babich

7 months

Mobile design UI components Line design system is an excellent collection of UI components for mobile apps—from action buttons to pulldown menus. Every component features anatomy, states & behavior, and design dos and donts.

14

361

2K

Nick Babich

@101babich

11 months

Principles of Design (Cheatsheet) Nice summary of principles that designers need to consider when creating products

10

457

2K

Nick Babich

@101babich

7 months

Design Systems Database Massive collection of best-in-class design systems with visual styles, components and references from leading UI teams.

14

358

2K

Nick Babich

@101babich

1 year

How to create usability with motion: 12 visual principles, from easing to zoom-in 📷: @UX_in_Motion

4

245

2K

Nick Babich

@101babich

1 year

Product Design Cheatsheet Guide for early-stage product teams on how to rapidly experiment, learn and build new products

21

309

2K

Nick Babich

@101babich

1 year

Data Visualization Catalogue Massive collection of data visualizations (100 visualizations) that will help you find the one that you need for your project.

18

283

2K

Nick Babich

@101babich

1 year

2023 Designer's Toolkit The top tools product creators use today, according to the @uxtoolsco

12

306

2K

Nick Babich

@101babich

8 months

Color scale generator The tool helps build a color palette. It generates tints and shades based on the primary color you provide. You can play with darkness and lightness, as well as angle and saturation of colors.

11

244

2K

Nick Babich

@101babich

1 year

How to communicate design to developers (checklist) 📷: @capcan

11

265

2K

Nick Babich

@101babich

7 months

Understanding Accessibility A tool for web designers that explains how to use color, typography and media to create accessible interfaces.

12

229

1K

Nick Babich

@101babich

6 months

Spotify Ways of Working in Figma A slide deck from the Spotify Design team that describes the process the team follows when working in Figma, from basics like getting access to Figma & creating projects to more complex activities like creating specs.

3

202

1K

Nick Babich

@101babich

7 months

Color tints & shades generator ColorDesigner is an online tool that will help you build a color palette and generate tints and shades based on it.

5

253

1K

Nick Babich

@101babich

1 year

Lottie animations cheat sheet 📷: @p_szymankiewicz

1

160

1K

Nick Babich

@101babich

1 month

💎 Typography Anatomy Ultimate typography cheatsheet that covers type anatomy, positioning, and spacing

5

180

1K

Nick Babich

@101babich

6 months

Data Visualization GIF maker An online tool from Google that allows you to create three types of data visualization (rectangles, circles, and racetracks) and export it as GIF.

11

157

1K

Nick Babich

@101babich

1 year

Product Design Roadmap Excellent overview of product design process along with practical recommendations for individual activities 🔗:

7

205

1K

Nick Babich

@101babich

1 year

How to design the proper data visualization A dataset of 100 visualizations and practical tips on choosing the proper data visualization type depending on input type and function.

3

193

1K

Nick Babich

@101babich

1 year

Anatomy of typography 📷: @EvaSilvertant

4

153

1K

Nick Babich

@101babich

1 year

Guide to building a color palette A systematic approach for finding and using colors in user interface design

8

129

1K

Nick Babich

@101babich

1 year

UX Design Process (with methods and tools) 📷: Francois Bouniq-Mercier

19

177

1K

Nick Babich

@101babich

10 months

How To Design Nested Context Menus A comprehensive guide to creating intuitive context menus for apps + a safe triangle technique. 🖋️ by @michaelvillar

7

160

1K

Nick Babich

@101babich

11 months

Laws Of UX Design Overview of the most popular user experience laws to follow when creating products

6

171

1K

Nick Babich

@101babich

5 months

6 principles for better transition animations 1️⃣ Fade in and out with opacity 2️⃣ Scale to add liveliness 3️⃣ Maintain consistent directionality 4️⃣ Balance speed 5️⃣ Prioritize, order, and group 6️⃣ Establish spatiality

12

95

1K

Nick Babich

@101babich

11 months

Free mobile wireframe kit Cutframe is an open-source mobile wireframe kit with 250+ components, 200+ screens, and 170+ icons for mobile devices, available in light and dark mode.

7

212

1K

Nick Babich

@101babich

1 year

Design Research Framework A visual guide for designers on how to apply UX research methods to make better design decisions. 🔗:

6

196

1K

Nick Babich

@101babich

8 months

How to write better error messages Excellent guide on how to design clear, helpful and inclusive error messages. 🖋️ by @jenninadler

6

136

985

Nick Babich

@101babich

11 months

16 little UI design rules that make a big impact A design case study to redesign an example user interface using simple rules such as using space to group related elements and using font weights to make text less or more prominent

6

146

968

Nick Babich

@101babich

1 year

UX Research Notion Templates Free collection of Notion templates for various research activities, from creating a research plan to running a survey. 🔗 📷: @_odett

10

199

948

Nick Babich

@101babich

1 year

How to design a complex table for mobile Nice design pattern that allows users to explore rows and columns separately. 🔗:

3

143

960

Nick Babich

@101babich

1 year

UX research methods guide & cheat sheet Practical guide on to conduct UX research with tips for choosing the proper research methods

3

144

948

Nick Babich

@101babich

1 year

Laws of UX Excellent summary of top-notch UX design principles. 📷: @DebuggersH

12

203

926

Nick Babich

@101babich

1 year

Primer Prism, a tool for creating consistent and accessible color palettes.

3

138

929

Nick Babich

@101babich

7 months

UI design checklist A massive collection of the best practices for everything related to UI design—components, pages, user flows and branding. 🖋️ by @george_hatzis

5

126

739

Nick Babich

@101babich

1 year

Why personas should be about the problems and challenges people face

9

125

855

Nick Babich

@101babich

1 year

Principles of design Building blocks of user interface design 📷: Anita Green.

0

154

831

Nick Babich

@101babich

8 months

Psychology of Design Excellent collection of 106 design principles and cognitive biases that affect product design. Each principle comes with relevant examples and practical tips.

6

165

828

Nick Babich

@101babich

6 months

Fine-crafted loading animation: smooth visual transition 👌

12

60

828

Nick Babich

@101babich

1 year

Mobile Wireframe Kit for Figma Free UI kit with more than 200 screens for onboarding, photo browsing, payment, and other scenarios. The screens are available in both light and dark themes.

3

134

819

Nick Babich

@101babich

1 month

💎 Visual Vocabulary This poster assists UI designers in selecting the right type of data visualization depending on the message they want to communicate

3

128

742

Nick Babich

@101babich

7 months

Create beautiful moving gradients ShaderGradient is an online tool that helps create beautiful gradients. You can customize colors, shapes & motion properties. The tool is also available in Figma, Framer, and as a React component.

11

115

810

Nick Babich

@101babich

1 year

UX Research Questions Excellent collection of nearly 400 questions for product design research. The list includes scenarios, sample answers, and follow-up questions. 📷: @mazedesignHQ

6

153

794

Nick Babich

@101babich

8 months

UI Design Tips Collection of practical design tips for popular UI components—from call-to-action buttons & cards to menus & modal windows. Every recommendation is provided in a do and don't format.

8

179

788

Nick Babich

@101babich

8 months

Paper Wireframe Kit Design kit for Figma that allows you to visualize low-fidelity concepts quickly (both web and mobile apps).

7

112

782

Nick Babich

@101babich

8 months

UI Components Handbook Collection of popular user interface components with guides on how to use them, Figma design samples & code snippets (HTML/Tailwind CSS)

2

132

776

Nick Babich

@101babich

1 year

The good line-height This tool calculates the right line-height for every text size in the scale so it always fit the baseline grid.

3

86

778

Nick Babich

@101babich

1 year

UI Components Gallery A repository of user interface components like buttons, tabs, breadcrumbs from various design systems.

4

131

774

Nick Babich

@101babich

1 year

Product design process 📷: @TedGoas

7

101

760

Nick Babich

@101babich

8 months

Design good practices Guidelines to naming conventions, components structure and document organization. Essential tool for creating robust design systems. I bet you’ll start naming layers in Figma after reading this guide. 😂

7

131

752

Nick Babich

@101babich

7 months

User interface component library The Component Gallery is a repository of UI components based on examples from popular design systems like Material Design. Information about components includes styling and markup, interactivity and usage guidelines.

4

113

753

Nick Babich

@101babich

1 year

Design Thinking Cheat Sheets Design process, empathy mapping, synthesis and ideation. 📷: @auropradhan

4

167

717

Nick Babich

@101babich

1 year

Product Design Cheat Sheets Practical tips for creating UX strategy, conducting user research, and running design critique sessions. 📷: @TheCarnacki

2

161

717

Nick Babich

@101babich

1 year

Design System Canvas This canvas is one-page plan of your vision for a design system; it acts as the perfect starting point for the process of creating or upgrading a design system

0

123

702

Nick Babich

@101babich

1 year

Button Design Guide A comprehensive guide on designing great buttons: button anatomy, types, states, styles, and accessibility requirements.

6

95

694

Nick Babich

@101babich

1 year

Data visualization: how to choose right chart or graph 📷: @TapClicks

8

146

692

Nick Babich

@101babich

1 year

Designing With AI: Guidebook A set of methods, best practices and examples for designing with AI from Google 🔗:

3

161

684

Nick Babich

@101babich

1 year

Lean UX vs Agile UX 📷: @RileyPelosi

6

135

679

Nick Babich

@101babich

6 months

Font pairing for Google Fonts Fontjoy is an online tool for finding the best font combinations. Font pairs are created from free and open-source font families. You can change font similarly—from very similar to high contrast.

11

89

674

Nick Babich

@101babich

1 year

Dos and don'ts on designing for accessibility Tips on how to offer an excellent experience for users with low vision, deaf and hard of hearing, dyslexia, motor disabilities, users on the autistic spectrum, and users of screen readers. 📷: @krwpn

5

121

672

Nick Babich

@101babich

3 months

💎 Good line height generator This tool automatically calculates the perfect line height for any text & grid combination

9

75

674

Nick Babich

@101babich

1 year

Gamification in product design Gamification is about applying game elements in a non-game context in order to make your product or service more engaging. The sketches contain examples of game mechanics, techniques for increasing user engagement, and more. 📷: @krisztaszerovay

4

122

666

Nick Babich

@101babich

1 year

Design thinking process (along with activities for each phase) 📷: @capcan

4

111

649

Nick Babich

@101babich

8 months

Portfolio Inspirations for Product Designers Pafolios is an excellent collection of portfolio examples and case studies for Product, UI, and UX designers. You can filter the list to particular disciplines, such as illustration or UX writing.

5

96

652

Nick Babich

@101babich

8 months

Playbooks For UX Designers A step-by-step guide for common challenges UX designers face— from getting your first product design job to building a design system.

3

102

648

Nick Babich

@101babich

8 days

💎 Best design systems for mobile Aviva: Pinterest: Line:

2

71

725

Nick Babich

@101babich

1 year

UX Research Cheat Sheet 📷: Aaron Christopher

8

95

644

Nick Babich

@101babich

26 days

💎 Notification Decision Tree It will help you choose the right type of contextual notification depending on your goal

2

62

652

Nick Babich

@101babich

18 days

💎 Errors & Alerts Decision Tree If you wonder whether you should use inline error, banner, modal, toast, or empty state for your error message, use this tree to inform your decision.

1

74

639

Nick Babich

@101babich

1 year

UX Questions Bank Great collection of almost 400 questions designers can use during product discovery. You will find scenarios, sample responses, and follow-up questions for each question in this list.

5

145

632

Nick Babich

@101babich

4 months

💎 Naming tokens in design system Nice visual guide that shows the difference between different types of tokens and offers practical tips for token naming.

6

97

631

Nick Babich

@101babich

3 months

💎 Design System Generator for Figma This is a nice helper for setting up a quick design system in Figma. It helps with variables for color, typography, spacing, grids, radius, and shadows.

4

83

623

Nick Babich

@101babich

2 months

💎 What Loading Pattern Should I Use? (Decision tree) If you’re wondering whether you need to use a loading spinner, skeleton screen, or progress bar, this decision tree will help you choose the right loading pattern for your task.

3

77

633

Nick Babich

@101babich

1 year

Automated production of design specifications in Figma Figma plugin that creates specs for UI components. Specs include the anatomy of a component, layout & spacing of layers with autolayout, and more.

1

112

625

Nick Babich

@101babich

1 year

Screen Sizes for Apple Devices Repository of screen sizes and technical details for Apple devices, along with the guides for icon, CarPlay and AppStore screenshots.

3

71

622

Nick Babich

@101babich

11 months

How to create a design system A step-by-step guide on creating a new design system

3

105

616

Nick Babich

@101babich

8 months

Checklist Design A collection of 50 checklists for UI components, pages and user flows. Each checklist helps you to consider the different states of a component and scenarios when you take a user from A to B. 🖊️ by @george_hatzis

2

109

620

Nick Babich

@101babich

1 year

Common sign-up UI design patterns Generic registration flows, activate with link or code scenarios, and emails for activate with code/link 📷: @TessGadd

7

105

610

Nick Babich

@101babich

1 year

Good design practices Guidelines to naming conventions, components structure and document organization

3

95

606

Nick Babich

@101babich

7 months

UI design reference library Mobbin is a massive collection of best-in-class mobile & web app designs like YouTube, Instagram and Apple Music. It helps to streamline product research and design process.

2

87

599

Nick Babich

@101babich

7 months

Open Design System Repository Discover 40+ open design systems that come with UI kits for Figma.

1

96

602

Nick Babich

@101babich

11 months

The Good Line-Height Nice little tool that automatically calculates the perfect line height for any text & grid combination

3

65

595

Nick Babich

@101babich

1 year

Design components in Figma A very detailed review of the process of creating a text input component available in multiple variants: different sizes, inputs, field texts, icons, helpers, interaction states, and background colors.

1

95

584

Nick Babich

@101babich

1 year

UX Cookbook Handcrafted collection of recipes for everything related to UX design — user research, design, usability testing, and more.

3

127

582

Nick Babich

@101babich

6 months

Design inspiration on 𝕏 TrendingDesign is a curated collection of the finest graphic, UI and motion design found on 𝕏.

2

61

579

Nick Babich

@101babich

1 year

UX Research Methods: How to choose the right qualitative research methods 📷: @allisongrayce

5

116

571

Nick Babich

@101babich

5 months

Chart Design Dos and Don'ts Practical recommendations from the Salesforce team for designing popular chart types like bar, line, plot, and scatter.

6

76

571

Nick Babich

@101babich

7 months

Design System Checklist Open-source checklist that will help you plan, build and grow your design system. It covers design language, tokens, core components, and maintenance (support and documentation).

0

100

546

Nick Babich

@101babich

6 months

Name your Figma layers automatically with AI Tired of naming all your layers in Figma? Autoname will do it for you. This Figma plugin will name your layers automatically.

12

67

570

Nick Babich

@101babich

1 year

How to measure the success of a design system This cheatsheet will help you to understand how well the design system works for your organization.

3

78

566

Nick Babich

@101babich

1 year

UX Hiring 101 Practical recommendations and helpful resources for anyone who needs to hire UX specialists.

3

83

555

Nick Babich

@101babich

10 months

UX Research Templates (Notion) Knowledge hub in Notion with research templates for card sorting, competitive analysis, contextual inquiry, diary study, user journey mapping, value proposition, and more.

4

115

561

Nick Babich

@101babich

2 months

💎 Error Messages Decision Tree This diagram will help you choose the right design for your error message.

3

59

562

Nick Babich

@101babich

1 year

The ultimate guide to proper use of UI animation A comprehensive guide for creating good UI animations. It will help you find the proper duration & speed, easing curve, and choreography for the animated effect.

5

73

551

Nick Babich

@101babich

1 year

UX Design Workflow A variation of a design workflow that a product team follows when creating a new product that includes various activities, from initial interviews at the beginning to usability testing at the final steps.

3

118

544

Nick Babich

@101babich

7 months

Design Systems For Figma A collection of design systems that come with Figma UI kits. Filter by platform (Android, iOS, React, Vue, etc) and theme (dark mode).

3

92

549

Nick Babich

@101babich

6 months

UI design references for web and mobile Refero is a curated collection of real web and mobile UIs (over 25k web pages and 24k iOS screens). You can filter by page type, design pattern or UI element.

4

67

538

Nick Babich

@101babich

5 months

💎 Figma Checklists Figma Checklist is a collection of actionable guidelines that help design better Figma components. They cover layers, layout design, properties, style, and component testing.

3

68

542

Nick Babich

@101babich

5 months

👌 Eye-catching introduction

3

29

536

Nick Babich

@101babich

4 months

💎 Data visualization cheatsheet There are many ways to visualize data, and it can be hard to choose the right type for your data. Visual vocabulary is a nice summary of popular visualizations for different tasks (i.e. correlation, ranking, distribution).

1

89

526