Home » Topics »

Visual design

Shaping the experience of products through illustration, photography, typography, space, layout and color.

Articles

How to give and receive a good design critique

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.

CollaborationVisual design

Stop using Material Design text fields!

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.

Visual designAccessibility

A brief guide to design feedback

The goal of this document is to establish consistent guidelines for giving and receiving feedback on design, as well as reviewing and approving design as a group.

CollaborationVisual design

Truly fluid typography

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.

Visual designWeb development

Easily create adaptive buttons using Sketch’s smart layout

With the introduction of Smart Layout in Sketch 58, we can finally build adaptable symbols without the hacks, plugins or workarounds.

Interface designVisual design Sketch

Progressive design in the Abstract

Using Abstract to version control sketch files, collaborate on designs, and maintain a source of truth for final designs to be implemented.

Visual designAbstractCollaboration

Designing accessible colour systems

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.

Visual designAccessibility

10 tips on using components in Figma

What components are, how they work, and best practices to incorporate them into your design workflow.

Design systemsVisual design Figma

Abstracting the Microsoft Outlook design process

How Abstract improved file organization and collaboration in our design team.

Visual designCollaborationAbstract

Only one deliverable matters

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.

CollaborationVisual design

A practical guide to running effective design critiques

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?

CollaborationVisual design

20 ways to make your design critiques more effective

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.

Visual designCollaboration

Design Criticism and the Creative Process

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?

CollaborationVisual design

Resources

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.

Visual designAccessibility

Accessible brand colors

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.

Visual designAccessibility

Accessible color palette builder

This is a tool to help designers build color palettes with combinations that conform with accessibility standards.

Visual designAccessibility

Color Safe

Empowering designers with beautiful and accessible color palettes based on WCAG Guidelines of text and background contrast ratios.

Visual designAccessibility

Color Tool

Create, share, and apply color palettes to your UI, as well as measure the accessibility level of any color combination.

AccessibilityVisual design

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.

Visual designAccessibility

Colorblind Web Page Filter

Use the Colorblind Colorlab to select safe colors earlier in the design process.

Visual designAccessibility

Colorbox

Comprehensive colour palette generator, now sponsored by Lyft.

AccessibilityVisual design

Critiquing Design

What if design critique didn’t suck? What if it actually improved design and fostered inclusion instead?

CollaborationVisual design

Eva Icons

A pack of more than 480 beautifully crafted Open Source icons for common actions and items.

Visual design Open source

Evericons

A collection of 460+ icons, free for personal and commercial use.

Visual design

Government Design Principles

The UK government's design principles and examples of how they've been used.

Design thinkingVisual design

Leonardo

Create beautiful, accessible, and adaptive color systems using contrast-ratio based generated colors.

Visual designAccessibility

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:

Visual designAccessibility

Tools

Adobe XD

Adobe's UX design tool. Basically their answer to Sketch.

Visual design Prototyping Handoff

Affinity Designer

The fastest, smoothest, most precise vector graphic design software available for Mac, Windows and iPad.

Visual design Wireframing

Framer

Advanced web and app design tool, with React integration.

Visual design Prototyping Design-to-code

InVision Studio

Web-based design tool. Invision's version of Sketch.

Visual design

Sketch

The industry-leading tool for digital design.

Visual design Prototyping Design systems

Figma

Where teams design together. Design, prototype, and collaborate all in the browser.

Design systems Visual design Prototyping Collaboration Handoff

Figmac

A super lightweight Figma desktop app that delivers a more natural Mac experience.

Visual design

Sim Daltonism

The color blindness simulator.

Visual design Accessibility

Color Oracle

Design for the color impaired. A free color blindness simulator for Windows, Mac and Linux.

Accessibility Visual design

Contrast

A macOS app for quick access to WCAG color contrast ratios.

Accessibility Visual design

Vectornator

Vectornator Pro makes your designs more powerful. Visualize every detail, explore the space and let your creativity run wild.

Visual design

Books

Visual Grammar

Christian Leborg

Visual design Visual grammar

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.

Matthew Butterick

Visual design

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?

Frank Chimero

Visual design

Articulating Design Decisions: Communicate with Stakeholders, Keep Your Sanity, and Deliver the Best User Experience

Talking to people about your designs might seem like a basic skill, but it can be difficult to do efficiently and well.

Tom Greever

Communication Visual design

Plugins

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.