Designing For Accessibility - 7 Simple Tips for Your Designs

byLubos Volkov
No items found.
No items found.
01 / 00

⚡ Designing For Accessibility – 7 Simple Tips for Your Designs

-

@lubosvolkov

⁣-

Designing with accessibility on the mind should be standard ... However, there are still so many products which are not accessible ... We as designers should help people with limited vision or other disabilities to have good user experience as possible.

____________

📌Why you should read this post?

______

There is a huge amount of people with limited vision, colorblindness, and other disabilities ... However, that should not prevent them from having a good user experience with the web or mobile products ... In today's post you will learn how to create more accessible user interfaces ... This will be beneficial for both regular and disabled users so definitely read it.

.

What you will find in the post?

______

1️⃣Why accessibility matters?

2️⃣Increase the contrast ratio

3️⃣Color is not everything

4️⃣Indicate active element

5️⃣Show input borders and labels

6️⃣Use legitimate font sizes

7️⃣Hovers are tricky

8️⃣Important takeaways

.

🤯 Key takeaways

______

Always test out your designs with the real users (ideally with one or two people with vision issues) ... That is going to help you to validate your design decisions ... However, if you do not have access to test users you can use contrast checkers such as (WebAIM, Stark, etc) ... But contrast they are not everything be careful with them especially if you are testing white text on colored background since results can be misleading ... Trust your own judgment.

Tags
Design System
How-To's
Hacks
Info
More like this
How to create 3D Website Designs With No Code
How to make water texture in adobe illustrator
Auto layout in practice
Dashboard Design Tips
How to make 3d inflate text in adobe illustrator
How to make gritty shadow in adobe illustrator
How to create a seamless pattern in adobe illustrator
How to create long text shadows
How to create paper cut effect in photoshop
How to create cool glass icons in figma
How to create colorful sphere in figma
How to create 3d cube from 2d images
6 tips to create responsive website design
How to Create a high converting landing page design
Auto layout, 4 Pro tips.
4 EASY Figma Animations for Beginners
How to create a more complete registration and login
Framer Card Overlap Tutorial
How to Create Full Page Website Scroll Animation in Figma
Principles of a Design System
How to master Grids in UI
How to Maximize your UX Portfolio
how to not suck at colors
How to design for peoples attention
How To Get The Perfect Spacing In Web Design
The secret Spacing Framework You Need
Perfect Responsive Grid Systems Masterclass
Giving your FLAT Designs some DEPTH
6 Advanced UI Design Tips
4 Foundational UI Design Principles
5 Tricks For Epic Hero Animations
Build a Responsive Bento Box Layout in Webflow
Figma's new multi edit tool
Add patterns to your designs in Figma
Ways to improve your UX design
How to create the rolling text animation in Framer
How to create Framer Parallax Trick; loop & scroll speed
How to make a responsive 3D illustration for Web
How to integrate 3D into Webflow with Spline Scene
How to create 3D Scroll Interactions in Webflow
From Figma To 3D Website Using Framer & Spline
Handing off designs to software engineers using flows and annotations
Creating typography system in Figma
The Perfect Spacing Framework in UI Design
How to pick the right colors for your website or app
Master Figma Auto Layout the easy way
master Figma Components in 10 Minutes
Design System in Figma: Typography Styles
Logo Design - Using adobe illustrator
How to Design a Logo From Scratch using adobe illustrator
Easiest way to generate color palette in Figma
How to create 3D carousels in figma using smart animate
Master Responsive Grids (Rows & Columns) in Figma
How to select the best frame sizes in figma
How to move design system to another file without breaking everything in Figma
The right Way to Use Figma Component Properties
How to make UI color palettes
5 Tips to improve your UI Designs
How to use Sticky scroll when prototyping in figma
how to create custom typography effect using photo manipulation in Canva Pro
How to Use the Pen Tool in Adobe Illustrator
How to create color styles manually
How to make Gum Shapes in Figma
8 Rules for Perfect Tab Design⁣⁣
8 tips for designing a website
Master Figma variables in 7 minutes
Figma Auto Layout Tutorial
10 Brand Identity Design Elements For Strategic Branding
Landing Page Design Explained (in 5 minutes)
How to create mesh gradient
Tips On Icons in Interface Design
Your UI Design Sucks!
Step-By-Step Guide to create color variables in figma
6 Steps Creating A Great Design
Hover Animation. Figma to Framer
Basic terms you should know in UX design
Spline tutorial - Create 3D keys for keyboard
A 60-second crash course on quick thinking for designers
How to Design Typography System for UI Design! ⠀
How to use 4pt Grid System in UI Design
Document your design projects
A quick guide to the blob brush in Adobe Illustrator
Figma 101: Figma's renaming workflow hack
7 Awesome Tips How to Design Better Apps
Typography Principles UI Designers Should Know
Get educated about Dark Mode
Neon Glass Effect in Figma
Isometric Card Prototype in Figma
How to write UX problem statement
How to design for one-hand usage
8 Key Differences Between iOS & Android Designs
How to create impressive parallax hero effects in Figma
How to create a seamless pattern in Adobe Illustrator
Why is Spacing Very Important?
UI Icon best practices
UI hacks to make you a 100x better design: Part 1
8 Tips How to Improve Typography in Your IG Posts
How to create buttons using variables: part 1
7 Actionable Tips How to Create Interface Style-guides