Design Systems (DS) A-G:
Audi - Storybook DS
Base Web React UI Framework - used by Uber
Bootstrap +++ The most popular React and JS library in the World
Cloudscape - open source DS for the cloud
Fluent Design System - Microsoft's UI for Web, Windows, iOS, Android FAST)
FAST.Design +++++ The Microsoft FAST framework is an open-source, extendable, and customisable UI framework for building enterprise applications.
GDS GOV.UK - Used on all .gov.uk websites Core + Extended (by service)
Gitlab Pajamas - open source
Goolge Material Design 3.0 - mainly mobile, web still in development
Design Systems, (DS) H-Z:
Mui Design System - beautiful UI DS based off of Material Design
Retool Component Library +++ the fastest way to build internal applications
Semantic UI - alternative to Bootstrap design system
Symphony Bots - used by
Fluid Typography
Fluid Typography - the new way of working with Typography
Rem vs. EM explained - use both EM and REM (for padding and some headers)
Using EM and REM together - one way to build responsive UI, see the examples
Px or Rem in CSS, Media Query - useful tips for responsive websites, comments section is more valuable\
Tools & Resources:
Material Design Resources - Link to all icons, colours, type creator, etc.
Material Symbols (plugin) - all Material Design icons
Pix to Em converter - Calculator of px size fonts into Em
Type Scale by Jeremy Church - Generate typography from base line and ratio
Modular Scale Typography - Generate typography from base line and ratio by NiceWebType.com - Typography tools
Tech:
NGINX open-source, as a reverse proxy, QA/UAT SaaS
Gravitee.io - API, Full Life Cycle API Management Report Now!
Other:
NN Group - Leading User Research Agency
Maru Group - Customer Experience (CX), setup client surveys, used by Waitrose
GetFeedback.com - Customer Experience (CX), instant page feedback, used by Shell Energy
UXmatters - UX news and articles
Visual Coding:
OutSystems - develop enterprise apps,
Bubble - build AirBnB-like websites,
Color Theme Generators:
Fluid UI Theme Designer from Microsoft - clean, simple, easy to use
Coolors.cc by Fabrizio Bianchi - great for custom / auto-generated palettes
Material Design Theme Builder, from Google - very complicated
Leonardo (Adobe) - Colour tool used in the Asana's DS, by Adobe
W3School - Comprehensive color tools from the most truster resource
Pantone Connect - try it for free
Learn UX:
Daniel Rosenberg on IxD (video 2) - a must watch, designed SAP and Oracle
Daniel Rosenberg website - one of the greatest UX designers
Interaction Design Foundation - IxD Organisation with various resources and training, recommended by Dan
Learn Graphic design principles for kids, link recommended by Anna from Alison McMillan's class. To all kids out there - Dream big, learn how to do it, and go get it!
Best UX Examples:
Facebook's Advertisement see more / see less - why: don't guess, just ask
Starling Bank App Onboarding - why: only what you need, no fluff
Gmail's dynamic icons above the email grid - why: contextual
Accessibility WCAG 2.1:
There are 6 main areas to be addressed:
1. Page and Dome structure, H1s, Landmarks
2. Alternative navigation (skip to content)
3. Semantic HTML (right <tags>) and ARIA labels, alt texts, field labels
4. Color contrast
5. Keyboard navigation (KN) and Screen readers, focus states, TabIndex
6. Prevent and correct errors, avoid buttons' inactive states
7. Media alternatives
Trusted resources:
W3C
Accessibility - W3C - The org which sets all rules & guidances for Web Accessibility
WebAIM
WebAIM: Introduction to Web Accessibility - (Web Accessibility in Mind) is a non-profit organisation based at Utah State University in Logan, Utah, which provided web accessibility tools & solutions:
WebAIM: Contrast Checker - their contrast checker which we use to achieve AA levels
WAVE Web Accessibility Evaluation Tools - flags accessibility issues, 40% accurate, free tool
WebAIM: Contact Us team of accessibility experts who can assess and provide recommendations
Mozilla
Accessibility | MDN - intro and topics
WAI-ARIA Roles - Accessibility | MDN - very good guides on ARIA roles
ARIA states and properties - Accessibility | MDN - very good guide on ARIA attributes (s&p)
Yale
Web Accessibility | Usability & Web Accessibility - accessibility articles
Other
ARIA accessibility home page Aria Examples - ARIA examples, and testing guides, tutorials
Useful Tools:
UserWay.org - add 1 line of code to make you site WCAG compliant
AccessiBe - The leading Automated Web Accessibility AI Solution
- Join as partner, 1 line of code to achieve WCAG 2.1, AI automated
- Carries out check, puts Alt tags to all images
- User can increase text size or contrast, i.e. helps readability, in Israel it is a mandatory add-on
- Can make the site black and white for better readability
Pablo's post about Accessibility is very helpful
Accessibility guidelines for UX Designers - list of key aspects
Various Accessibility Chrome Extension
MOS Contrast tool app: https://usecontrast.com/ - rating A, AA, AAA for WCAG compliance
Check out Accessible: https://accessibe.com
WebAIM.org - WCAG contrast checker
-
Other useful resources:
Definitions:
.
Agnostic: Device-agnostic design aims to offer a seamless experience across many devices and systems without the need for special adaptations.
Having a product that's agnostic means having a tech solution that's able to interact with any systems or any products in the same category. ... being able to interact with all file types or be able to exchange data with any other software.
Agnostic: a person who believes that nothing is known or can be known of the existence or nature of God. Solution Agnostic:
Cognitive search: is a new generation of Enterprise search that uses artificial intelligence technologies to improve users' search queries and extract relevant information from multiple, diverse data sets. Cognitive search capabilities extend beyond those of a classic search engine to bring numerous data sources together while also providing automated tagging and personalisation. (More on the topic)
Heuristics: are a set of general principles used in interactive design to ensure usability and provide a relatively simple and quick testing regime to identify problems and possible solutions.
Progressive Disclosure: simplifies user interactions by focusing the user's attention on the most important details first, while revealing additional detail only as needed. GDS (.gov.uk) is a great example as they ask one question at a time to determine user intent and before revealing more details about each particular service.
Semantics: semantics is the study of the meaning of signs. "Semantically correct" usage of elements means that you use them for what they are meant to be used for. Examples: Pencil icon "✎" is commonly used to activate edit mode. Using this icon to indicate edit mode is semantically correct.
Federated / single sign-on (SSO), i.e., using Google or Facebook to sign to other sites,
You have contacted ConciseUX.co.uk. We will be in touch soon. Thank you!