Git Product home page Git Product logo

design-checklist's Introduction

design-checklist

Down the line, I've often come to realize during (or after) design hand-off: "hmm.. is this well-thought" or "this design does not seem to take this into account". Therefore I've created a checklist to go through, before and during design phase, to make sure most design decisions has been properly addressed sooner rather than later.

Feel free to fork it, contribute, etc.

How should this be interpreted?

This is NOT a set in stone "my way or the high way" document. This is a checklist to verify that design principles are well-thought AND an overview of approaches that deviate from these, to make sure that we have proper argumentation for doing so.

The Checklist

General

  • How does this look like on tablet/desktop (in case of mobile first approach)
  • How does tihs look like on mobile (in case of desktop first/only approach)

CTAs

  • Consistency on "save" actions. Either always click a "submit" button or always auto-save.
  • How does the CTA look when in hover/active state.

Modals

modals, overlays, popups, alerts, etc.

  • No double modals (indicates a broken user experience if we're forced to do a modal on top a modal)
  • Modals can be closed on button AND clicking the dimmed background

Shown/hiddens menus

  • Use click actions to activate (using hover/mouseover might trigger section unintentionally by user)

Viewport

  • First section doesn't take up whole viewport height size (at least give user an indication that more is to come by scrolling/clicking).

Content

  • Design is not only useful with "perfect" data.
  • Design does not restrict content to "perfect" data.

Search

  • Search is visible on page (if only visible by click, then at least autofocus search field when clicked).

Headings

  • Headings follow an ordering pattern (e.g. .h1 more prominent than .h2 and .h3, etc).

Input fields

  • Text inputs has labels (not only placeholders).
  • Text inputs take advantage of native scrollwheels on mobile (e.g. datetime-local).
  • Show restrictions to input up front (e.g. "We only accept VISA and MasterCard" or "Should be a valid email format").

Selects / Dropdowns

  • Select inputs doesn't disable native behavior (e.g. scrollwheel on mobile).

Errors

  • Show all possible errors at once to prevent circle feedback and multiple user tries

design-checklist's People

Contributors

volzy avatar

Watchers

 avatar  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.