Giter Site home page Giter Site logo

awesome-ui's Introduction

Awesome UI Banner

Awesome UI Awesome PRs Welcome

A curated list of awesome things related to User Interface Design

  • Use Ctrl + F or command + F to search faster 😉

Table of Contents

Learn

Principles

back to table of contents

Books

Cover Title Author
Don't Make Me Think: A Common Sense Approach to Web Usability Don't Make Me Think: A Common Sense Approach to Web Usability - Steve Krug’s guide to help you understand the principles of intuitive navigation and information design. Witty, commonsensical, and eminently practical, it’s one of the best-loved and most recommended books on the subject. Steve Krug
The Design of Everyday Things The Design of Everyday Things - In this entertaining and insightful analysis, cognitive scientist Don Norman hails excellence of design as the most important key to regaining the competitive edge in influencing consumer behavior. Donald A. Norman
The Universal Principles of Design The Universal Principles of Design - The first cross-disciplinary reference of design. Richly illustrated and easy to navigate, this book pairs clear explanations of the design concepts featured with visual examples of those concepts applied in practice. Lidwell, Holden, & Butler
Tog on Interface Tog on Interface - Using ideas from such diverse sources as Information Theory, Carl Jung, and even professional beekeeping, the book provides a framework for achieving a deep understanding of user interface design. Bruce Tognazzini
Universal Methods of Design: 100 Ways to Research Complex Problems, Develop Innovative Ideas, and Design Effective Solutions Universal Methods of Design: 100 Ways to Research Complex Problems, Develop Innovative Ideas, and Design Effective Solutions - This books serves as an invaluable compendium of methods that can be easily referenced and utilized by cross-disciplinary teams in nearly any design project. Hanington & Martin
About Face: The Essentials of Interaction Design About Face: The Essentials of Interaction Design - You'll learn the principles of good product behavior and gain an understanding of Cooper's Goal-Directed Design method, which involves everything from conducting user research to defining your product using personas and scenarios. Cooper, Reimann & Cronin
Designing with the Mind in Mind: Simple Guide to Understanding User Interface Design Rules Designing with the Mind in Mind: Simple Guide to Understanding User Interface Design Rules Jeff Johnson
Designing Interfaces: Patterns for Effective Interaction Design Designing Interfaces: Patterns for Effective Interaction Design Jenifer Tidwell
Microinteractions: Designing with Details Microinteractions: Designing with Details - This book provides a new way of thinking about designing digital products: as a series of microinteractions that are essential to bringing personality and delight to applications and devices. Dan Saffer
How to Make Sense of Any Mess How to Make Sense of Any Mess - This book outlines a step-by-step process for making sense of messes made of information (and people). Abby Covert
Information Architecture: For the Web and Beyond Information Architecture: For the Web and Beyond - Anyone involved in digital design will learn how to create semantic structures that will help people engage with your message. Rosenfeld, Morville & Arango
Sketching User Experiences: Getting the Design Right and the Right Design The Elements of User Experience: User-Centered Design for the Web - The author gives readers the big picture of Web user experience development, from strategy and requirements to information architecture and visual design. Jesse James Garrett
The Best Interface Is No Interface: The Simple Path to Brilliant Technology The Best Interface Is No Interface: The Simple Path to Brilliant Technology This book challenges our world of nagging, screen-based bondage, and shows how we can build a technologically advanced world without digital interfaces. Golden Krishna
Designing Interactions Designing Interactions - In the book, Bill Moggridge introduces us to 40 influential designers who have shaped our interaction with technology. Bill Moggridge
Sketching User Experiences: Getting the Design Right and the Right Design Sketching User Experiences: Getting the Design Right and the Right Design - The book approaches design and design thinking as something distinct that needs to be better understood-by both designers and the people with whom they need to work- in order to achieve success with new products and systems. Bill Buxton
Designing for the Digital Age: How to Create Human-Centered Products and Services Designing for the Digital Age: How to Create Human-Centered Products and Services - This comprehensive, full-color volume addresses project management, user research, and consensus-building problems with detailed how-to information, real-life examples, and exercises. Kim Goodwin
100 Things Every Designer Needs to Know about People 100 Things Every Designer Needs to Know about People - This book combines real science and research with practical examples to deliver a guide every designer needs. Susan M. Weinschenk
Usability Engineering Usability Engineering - The book provides the tools needed to avoid usability surprises and improve product quality. Step-by-step information on which method to use at various stages during the development lifecycle are included, along with detailed information on how to run a usability test and the unique issues relating to international usability. Jakob Nielsen
A Practical Guide to Information Architecture A Practical Guide to Information Architecture - Whether it's organising content, providing clear descriptions or ways for people to get to them, this book is armed with practical advice and examples. Donna Spencer
Mobile First Mobile First - Former Yahoo! design architect and co-creator of Bagcheck Luke Wroblewski knows more about mobile experience than the rest of us, and packs all he knows into this entertaining, to-the-point guidebook. Luke Wroblewski
Think First: My No-Nonsense Approach to Creating Successful Products, Memorable User Experiences + Very Happy Customers Think First: My No-Nonsense Approach to Creating Successful Products, Memorable User Experiences + Very Happy Customers - Think First serves as a roadmap to building a solid foundation for UX that’s strong enough to withstand any weather as projects move into design and coding. Joe Natoli
Designing Web Navigation Designing Web Navigation - This book demonstrates that good navigation is not about technology - it's about the ways people find information, and how you guide them. James Kalbach
Seductive Interaction Design: Creating Playful, Fun, and Effective User Experiences Seductive Interaction Design: Creating Playful, Fun, and Effective User Experiences - The author takes a fresh approach to designing sites and interactions based on the stages of seduction. This beautifully designed book examines what motivates people to act. Stephen P. Anderson
The User Experience Team of One: A Research and Design Survival Guide The User Experience Team of One: A Research and Design Survival Guide - The book prescribes a range of approaches that have big impact and take less time and fewer resources than the standard lineup of UX deliverables. Leah Bul1ey
Design Systems Handbook Design Systems Handbook - A design system unites product teams around a common visual language. It reduces design debt, accelerates the design process, and builds bridges between teams working in concert to bring products to life. Learn how you can create your design system and help your team improve product quality while reducing design debt. Marco Suarez, Jina Anne, Katie Sylor-Miller, Diana Mounter, and Roy Stanfield

back to table of contents

Articles

back to table of contents

Disciplines

Information Architecture

back to table of contents

Interaction Design

Universal Design & Accessibility

Communities

  • Information Architecture Institute - A nonprofit organization of volunteers with a singular focus: to make the world's information clearer and easier to use by improving how people learn, practice and teach Information Architecture (IA).

  • Interaction Design Association - A global community of people who share an interest in interaction design.

  • Hacking UI - A community for designers, developers and creative entrepreneurs with a passion.

  • Interaction Design Foundation - Community-based career development: 449 groups in 88 countries.

back to table of contents

Courses

  • User Interface Design Specialization / COURSERA - Design Better User Interfaces. Learn to create effective and usable interfaces for a range of products and devices. FREEMIUM / Video course

  • Intro to the Design of Everyday Things / UDACITY - This course provides a summary of key concepts from the first two chapters of The Design of Everyday Things by Don Norman. FREE / Video course

  • Hack Design - An easy to follow design course for people who do amazing things. FREE / Email course

  • Learn UI Design - Confidently design beautiful user interfaces for any app or site. PAID / Video course

  • Evaluating User Interfaces / COURSERA - In this course you will learn and practice several techniques for user interface evaluation. FREEMIUM / Video course

  • User Interface (UI) Personalization / edX - In this course, you will learn the fundamentals of user interface personalization in the context of web sites and web applications. FREEMIUM / Video course

  • Free UI Design Short Course - Get a glimpse of the research and planning going on behind the scenes with this free, 7-day, UI Design Short Course. FREE / Email course

  • UI Design / DESIGN LAB - Dive into the theory and techniques you need to make beautiful web and mobile interfaces in this 4-week online course. PAID / Video course

back to table of contents

Guidelines

  • Material Design - Material Design is a unified system that combines theory, resources, and tools for crafting digital experiences, by Google.

  • Fluent Design System - An eloquent design system for a complex world, by Microsoft.

  • Ant Design - A UI Design Language, by Ant Financial.

  • Apple Human Interface Guidelines - Get in-depth information and UI resources for designing great apps that integrate seamlessly with Apple platforms.

back to table of contents

Patterns

  • GoodUI - Here is a running idea list which we're actively testing and turning into highly effective conversion patterns (real evidence-based stuff).

  • UI Patterns.io - Explore & play with interactive UI design patterns and learn how to solve common UI problems.

  • UI-Patterns.com - User Interface Design patterns are recurring solutions that solve common design problems.

  • Mobile Patterns - A library of iOS and Android screenshots for designers and developers to reference.

  • Pttrns - The mother of all design resources.

  • Patterntap - Interface patterns to inspire your next design project.

  • UI Garage - All the latest UI Design Inspiration and UI Patterns collected in one place.

  • Welie - A Pattern Library for Interaction Design.

  • Dark Patterns - The purpose of this site is to spread awareness and to shame companies that use tricks in websites and apps that make you buy or sign up for things that you didn't mean to.

  • Android Patterns - Set of interaction patterns that can help you design Android apps.

back to table of contents

Techniques

Think Aloud

  • Thinking Aloud: The #1 Usability Tool - "The method it serves as a window on the soul, letting you discover what users really think about your design. [...] You usually learn why users guess wrong about some parts of the UI and why they find others easy to use."

Five seconds test

  • Five-Second Testing - Form of usability testing that allows you to determine whether a design quickly communicates an intended message or impression. It can provide both quantitative and qualitative feedback that lets you optimize a design and encourages iterative improvement.

Usability (expert) reviews

  • A guide to carrying out usability reviews - In this article, author walkthrough a method for examining the usability of an interactive system (website, application, mobile app etc.) by using a combination of a scenario based and heuristic (i.e. best practice guidelines) based review.

Style Tiles

  • Style Tiles - Help form a common visual language between the designers and the stakeholders and provide a catalyst for discussions around the preferences and goals of the client.

back to table of contents

Newsletters

back to table of contents

Tools

Pen & Paper

Design Apps

  • Sketch - Sketch is a design toolkit built to help you create your best work — from your earliest ideas, through to final artwork. Mac only

  • Alva - Alva lets you design interactive products based on the same components your engineers are using for production websites.

  • Figma - Figma is the first interface design tool based in the browser, making it easier for teams to create software.

  • Marvel - Simple design, prototyping and collaboration.

  • InVision - The Digital Product Design platform powering the world’s best user experiences.

  • Adobe XD - The all-in-one UX/UI solution for designing websites, mobile apps, and more.

  • UXPin - The Full-Stack UX Design Platform

  • Webflow - Gives designers and developers the power to design, build, and launch responsive websites visually, while writing clean, semantic code for you.

  • MockFlow - Super-easy wireframing and UX suite for designers

back to table of contents

Testing Apps

Usability testing

Technical testing

  • Testing with Xcode - UI testing gives you the ability to find and interact with the UI of your app in order to validate the properties and state of the UI elements.

back to table of contents

Libraries & Frameworks

CSS

  • Pure.css - Set of small, responsive CSS modules that you can use in every web project.

  • Milligram - Minimalist CSS framework

  • Bulma - Modern CSS framework based on Flexbox

CSS + Javascript

  • Semantic UI - User Interface is the language of the web.

  • UIkit - Lightweight and modular front-end framework for developing fast and powerful web interfaces.

  • Bootstrap - Build responsive, mobile-first projects on the web with the world's most popular front-end component library.

  • Foundation for Sites - It includes a wide range of modular and flexible components that are easily styled. These versatile and lightweight building blocks make it easy to bring your ideas to life.

  • Materialize - Modern responsive CSS framework based on Material Design by Google.

  • Metro UI CSS - The front-end framework for developing projects on the web in Windows Metro Style

  • Office UI Fabric - The official front-end framework for building experiences that fit seamlessly into Office and Office 365.

  • HTML5 Boilerplate - The web’s most popular front-end template

Javascript

  • Vue.js - The Progressive JavaScript Framework

  • React - A JavaScript library for building user interfaces

  • Angular - One framework. Mobile & desktop.

back to table of contents

Resources

Inspiration

  • Ui Parade - User Interface Design Inspiration.

  • CollectUI - Daily inspiration collected from daily ui archive and beyond. Hand picked, updating daily.

  • UI Movement - UI Movement is a community of design enthusiasts who share and discuss the most interesting and unique UI designs.

  • Inspiration UI - Inspiration UI is a community that aims to provide the best design resources for those who create for the web.

  • UPlabs - Web - Hand-picked Web UI Elements.

  • UI Temple - Curated Collection of the Best Web Page Designs & Inspirations.

  • Dribbble - Show and tell for designers.

  • Little Big Details - Curated collection of the finer details of design, updated every day.

  • Little UI Details - Collections of little tips from Steve Schoger to improve your visual design skills with the little details that make a big difference.

back to table of contents

Freebies

  • Freeui.design - Free UI Design for Designers.

  • UIGradients - Beautiful colour gradients for design and code.

  • FreebiesUI - FreebiesUI is an ever-growing collection of quality UI resources designed by talented creatives who choose to share their work for free with the rest of the community.

  • Freebie Supply - Free, high quality design resources for Photoshop, Sketch, Illustrator, Adobe XD and Figma.

  • XD Guru - The biggest collection of free & premium resources for Adobe XD.

  • Sketch App Sources - We curate hundreds of icons and UI kits for web and mobile to help you design, prototype, learn, and ideate faster.

  • We Love SVG: Free SVG Files - An open source library that allows embedding icons from any icon library.

  • UI Space - Thousand of great freebies. -Search for an high quality and Hand-crafted freebie.

  • UI Freebies - Free Design Resources for Sketch. Hand-picked design resources, updated daily.

back to table of contents

Icons

  • Font Awesome - Get vector icons and social logos on your website with Font Awesome, the web’s most popular icon set and toolkit.

back to table of contents

awesome-ui's People

Contributors

coderdiaz avatar tipoqueno avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.