Best User Interface Design Resources in 2022

Guides

Screenshot of Design Better Search Box and Make Search Journey More User Friendly?

Design Better Search Box and Make Search Journey More User Friendly?

Recently, I worked on a concept design for a Electric Vehicle Charging Map App. Here's a recap of my thinking process, — how to enhance…

9 months ago

Screenshot of Try our Keystroke Figma template

Try our Keystroke Figma template

Introducing KEYSTROKE ⌨! My first Figma community template to create keycap quickly (with auto-layout support!). Quickly create keyboard…

a year ago

Screenshot of Lets talk about Safari & Firefox design revamp

Lets talk about Safari & Firefox design revamp

Brand new Safari and Firefox were both announced this month. Both versions received major design iterations. Which do you prefer? Announced…

a year ago

Resources

Screenshot of Grid Guide

Grid Guide

Grid calculator for your Figma. Set Max Width and Columns will return the suitable guter and column width.

Screenshot of Dimmy Club

Dimmy Club

Free device mockup generator

Screenshot of Get Waves

Get Waves

Waves have become a popular choice for website page background. Generate svg waves easily with customisable shape, steps and color with getwaves.io

Screenshot of Blobmaker

Blobmaker

Blobmaker help you to create random blobs in SVG to catch with design trend.

Screenshot of Pttrns

Pttrns

Pttrns is a great place to kickstart your UI research. Similar user interface patterns and functions are posted across different apps.

Screenshot of Refactoring UI

Refactoring UI

Refactoring UI started as design tidbits to work smoothly with developer. It stresses on visual hierarchy and systematic approach to UI design from a developer point of view. Brand new ebook and resources are available for $149.

Screenshot of Figma

Figma

Combining UI design, prototyping, and feedback in one web-based tool, Figma is more than a design app. Users can iterate prototypes in collaboration, and provide feedbacks simultaneously. It is catching up with Sketch for the need in large-scale design projects. Figma is free to try with limited projects with paid upgrade per user.

Screenshot of Apple Human Interface Guidelines — Color

Apple Human Interface Guidelines — Color

Color section of Apple’s Human Interface Guidelines is a great introductory piece for color design when you are designing websites and apps.

Screenshot of Magic Mirror

Magic Mirror

Perspective mockups could be created without leaving Sketch app. Magic Mirror adds the functionality of perspective transformation to Sketch artboards. So users can create high-fidelity mockups in perspective. Paid monthly subscription support up to 4x image quality and symbols.

Screenshot of Design + Code

Design + Code

Interactive e-book to teach how to design and code a React app for iOS 11. Written by Ming To.

Screenshot of Snazzy Maps

Snazzy Maps

Customized Google Map style apply on your website.

Screenshot of test

test

test

tello