Visual design
Shaping the experience of products through illustration, photography, typography, space, layout and color.
Articles
What Saul Bass Can Teach Us About Web Design
Smashing Magazine
– 12 February 2021
Film credits, brand logos, posters… Saul Bass did it all, and the principles that informed his work are just as valuable now as they were 50 years ago.
Proximity principle in visual design
Nielsen Norman Group
– 2 August 2020
Design elements near each other are perceived as related, while elements spaced apart are perceived as belonging to separate groups.
Modern Touch-Friendly Design
– 10 June 2020
These are touch-friendly guidelines I strive to follow for my apps and am happy to recommend to others.
Creating Depth in Sketch
Have you ever noticed elements in an interface that feel raised off of the page or inset into the background? Let’s learn how to recreate this in Sketch.
How to give and receive a good design critique
– 6 March 2020
As designers, we don’t design in a vacuum. A good designer will need to learn to take the feedback from their peers, clients, and bosses to solve a particular design problem.
Stop using Material Design text fields!
– 6 March 2020
Although it is common on the web, and is in some of the images below, you should never make visible form fields without a visible label.
Truly fluid typography
Design + Sketch
– 25 October 2019
You are probably used to setting typography manually within breakpoints, which usually leads to a somewhat bumpy result. Fluid typography using viewport width (“vw”) automatically adjusts the font size to the width of the screen.
Easily create adaptive buttons using Sketch’s smart layout
– 21 October 2019
With the introduction of Smart Layout in Sketch 58, we can finally build adaptable symbols without the hacks, plugins or workarounds.
Progressive design in the Abstract
– 16 October 2019
Using Abstract to version control sketch files, collaborate on designs, and maintain a source of truth for final designs to be implemented.
Designing accessible colour systems
– 15 October 2019
Color contrast is an important aspect of accessibility. Good contrast makes it easier for people with visual impairments to use products, and helps in imperfect conditions like low-light environments or older screens.
10 tips on using components in Figma
Design With Figma
– 5 September 2019
What components are, how they work, and best practices to incorporate them into your design workflow.
Abstracting the Microsoft Outlook design process
– 22 May 2019
How Abstract improved file organization and collaboration in our design team.
Only one deliverable matters
– 16 October 2018
Detailed wireframes, high-fidelity comps, and motion prototypes all got enshrined as critical deliverables. Those design artifacts are unimportant. Only one deliverable matters: the product itself.
A practical guide to running effective design critiques
– 13 January 2017
Have you ever left a design critique feeling defeated and less excited about your work? Or frustrated because you didn’t get the type of feedback you were looking for?
20 ways to make your design critiques more effective
– 5 March 2015
Design critiques are a critical part of the iterative design process, but all too often they are poorly thought out, poorly structured and poorly run. Here are 20 simple ways to make your design critiques more effective.
Design Criticism and the Creative Process
A List Apart
– 11 January 2011
What does the critique do for the design and the rest of the project? Do critiques really help and are they necessary? If so, how do we use this feedback to improve our creative output?
Resources
Clear Sans
A versatile OpenType font for screen, print and Web, and designed with on-screen legibility in mind.
Critiquing Design
What if design critique didn’t suck? What if it actually improved design and fostered inclusion instead?
Eva Icons
A pack of more than 480 beautifully crafted Open Source icons for common actions and items.
Government Design Principles
The UK government's design principles and examples of how they've been used.
Pa11y
Here at Pa11y, we think making the web more accessible improves it for everyone. So we publish a range of free and open source tools to help designers and developers make their web pages more accessible:
Tools
Affinity Designer
The fastest, smoothest, most precise vector graphic design software available for Mac, Windows and iPad.
Colorable
Colorable
Take a set color palette and get contrast values for every possible combination – useful for finding safe color combinations with predefined colors and includes pass/fail scores for the WCAG accessibility guidelines.
Accessible brand colors
Accessible brand colours
This tool shows you how ADA compliant your colors are in relation to each other. By adding your brand’s colors on the right, you can generate a chart to see how they can be used together for accessibility, and find similar colors that work better.
Color Oracle
Design for the color impaired. A free color blindness simulator for Windows, Mac and Linux.
Colorblind Web Page Filter
Toptal
Use the Colorblind Colorlab to select safe colors earlier in the design process.
Color Safe
Colorsafe
Empowering designers with beautiful and accessible color palettes based on WCAG Guidelines of text and background contrast ratios.
Accessible Colours
Accessible Colours
We evaluate your color combination using the WCAG 2.0 guidelines for contrast accessibility. If your combination does not meet the guidelines, we find the closest accessible combination by modifying the color lightness.
Accessible color palette builder
Accessible color palette builder
This is a tool to help designers build color palettes with combinations that conform with accessibility standards.
Color Tool
Google Material Design
Create, share, and apply color palettes to your UI, as well as measure the accessibility level of any color combination.
Vectornator
Vectornator Pro makes your designs more powerful. Visualize every detail, explore the space and let your creativity run wild.
Leonardo
Leonardo
Create beautiful, accessible, and adaptive color systems using contrast-ratio based generated colors.
Courses
The ultimate guide to visual perception and design
This course explores how we can improve designs to support human vision better and improve usability as a direct result.
Books
Butterick's Practical Typography
Typography is the visual component of the written word. Thus, being a publisher of the written word necessarily means being a typographer. This book will make you a better typographer.
The Shape of Design
Shape is a book about objectives, and it zooms out to answer a couple big questions: How does it feel to make things for other people? And how can we do so in a meaningful, engaged way?
Articulating Design Decisions
Talking to people about your designs might seem like a basic skill, but it can be difficult to do efficiently and well.
Plugins
Above the Fold
– Make sure your most important elements will be visible every time on every device. Above the Fold plugin supports Desktop, Mobile and Tablet viewports.
Marketch
– Generates a HTML page where you can get measures, CSS styles and asset exports.
Stark
– Helps design and build products that are accessible, ethical, and inclusive.