Design

Generate a colour scheme with:

Colormind color palette generator

Coolors - The super fast color schemes generator!

ColorSpace - Color Palettes Generator and Color Gradient Tool

Inspiration

Dribbble

Style tiles

• Style tiles
• Styleguides.io

User interface and layout tools

• Sketch
• Affinity Designer
• Adobe XD
• Figma
• UXPin

Graphic design

• Corel PaintShop Pro (Windows)
• Corel Draw (Windows)
• GIMP
• Adobe Creative Suite
• Pixelmator (MacOS) 😀
• SumoPaint (online)
• Pixlr (online) 😀

Fonts

https://fontjoy.com/

How to design almost any UI element (list of ~58 articles of how to properly build elements in terms of UI and UX)

Buttons.

• 7 Basic Rules for Button Design by @101babich
• Button Design
• Cheatsheet for buttons by @tessgadd

Text fields.

• UI cheat sheet: text fields (Awesome article!)
• Text fields & Forms design — UI components series
• The Anatomy of Input Field

Checkboxes & Toggles.

• Checkbox vs Toggle Switch by @uxplanet
• Toggle-Switch Guidelines by @NNgroup
• Toggle design patterns from @just_in_mind
• 38 Checkbox Designs

Radio Buttons.

• Selection controls — UI component series (AWESOME)
• Radio Buttons UX Design
• Radio button design: easy selection and decision-making

Tables.

• Design better data tables by @CoyleAndrew
• The Ultimate Guide to Designing Data Tables
• Designing better data tables for enterprise UX

Datepickers. (It’s a pain)

• How to Design a Perfect Date Picker Control?
• Date Picker Design Best Practices
• A hunt for the perfect date picker UI

Sliders.

• UNBELIEVABLE article @smashingmag is a golden resource really.
• Slider design UI patterns and examples from @just_in_mind
• Slider Design: Rules of Thumb from NNGroup

Tabs.

• Module Tabs in Web Design: Best Practices and Solutions
• 12 Tabs Design guidelines

Dropdowns

• UI cheat sheet: dropdown field (Like this one)
• Dropdowns: Design Guidelines
• Drop down list design: the complete guide

Pagination

• Paging, Scrolling, and Infinite Scroll by @uxmatters
• UX: Infinite Scrolling vs. Pagination by @101babich
• Users’ Pagination Preferences and “View All”

Search inputs

• Best UX practices for search inputs
• Design a Perfect Search Box
• Site Search Suggestions by @nngroup

Breadcrumbs.

• Breadcrumbs: 11 Design Guidelines for Desktop and Mobile
• Are breadcrumbs still fresh for UX?
• Breadcrumb examples for inspiration

Carousels.

• Carousel/slider design best practices (with examples) by @webflow
• Carousel Usability: Designing an Effective UI for Websites with Content Overload
• Designing a User-Friendly Homepage Carousel

Modals.

• Best Practices for Designing UI Overlays by @oliverlindberg
• Big, bold UX—using modal windows for in-app user engagement from @appcues
• Modal & Nonmodal Dialogs: When (& When Not) to Use Them
• Modal dialogs

Cards.

• Card UI design: fundamentals and examples
• Simple Design Tips for Crafting Better UI Cards
• Designing cards

Tooltips.

• Tooltip Guidelines
• Designing Better Tooltips For Mobile User Interfaces
• Tooltips: your secret weapon for improving feature discovery by @sofiaqt

Navigation.

• Navigation design: Almost everything you need to know
• UX Design for Navigation Menu from @Prototypr
• The Fastest Navigation Layout for a Three-Level Menu from @uxmovement

Loaders.

• Progress Indicators Make a Slow System Less Insufferable
• Stop Using A Loading Spinner, There’s Something Better
• Best Practices For Animated Progress Indicators

Forms.

• Design Better Forms by @CoyleAndrew (Really good read!)
• Form Design: 13 Empirically Backed Best Practices by @iamalexbirkett
• The UX behind designing better forms by @charmiekapoor

Centre content in html