Skip to content

Latest commit

 

History

History
179 lines (166 loc) · 8.66 KB

Design.md

File metadata and controls

179 lines (166 loc) · 8.66 KB

UI & UX:

  • provide the language meta attribute (lang="de_DE" and hreflang)
  • use CSS cursor property
  • place opposite elements ("Delete" / "Add") far away from each other
  • use space between related buttons/button-groups
  • put related things together
  • do not hide mandatory input fields
  • right click popups safe traveling distance with the mouse
  • avoid reCaptcha
  • popup elements should be ordered by plausability of clicking
  • use microinteractions wisely
  • good CSS doesn´t need !important declaration
  • let user customaize the page in a certain way, e.g. background-color
  • give your development domain a different favicon than production
  • use grid for layout and flexbox for content
  • use progressive JPEG
  • be unique
  • use consistent icon-set
  • add enough space between contrary action buttons, e.g. Cancel/Submit (best opposite side)
  • use occasion-related design, e.g. snow at winter times
  • use object-fit/object-position CSS3 filter
  • use storytelling forms
  • show form tips
  • do not depend on color only
  • do not block zoom
  • rediscover the alt attribute
  • add subtitles and captions to your videos
  • semantics = accessibility
  • use the right mark-up
  • do not split login process
  • use input types!
  • use autofocus wisely, e.g., above the fold only
  • use spellcheck="true" for certain inputs
  • use search as input type for search to get the “clear” button
  • use roles when necessary
  • follow web accessibility standards
  • do not use Autoplay
  • use thumb navigation
  • do not put logins in modals
  • create tappable areas for mobile view
  • do not forget letter-spacing
  • do not use :hover
  • provide screen reader meta data (e.g., aria-current="page" or aria-sort="ascending")
  • move groups closer to each other, e.g., headlines and content
  • do A/B-Testing
  • use fieldsetto group controls
  • use labels for every input field
  • reduce number of required fields
  • use neutral color for neutral actions, e.g. Cancel button
  • use tranparency instead of greyout disabled buttons
  • avoid disabled buttons, only show active buttons
  • keep a good contrast always
  • use color-palettes (max. 5)
  • write alt text like you are talking to a friend
  • use font-palettes (max. 2)
  • use less border
  • Less animations / moving objects
  • use color variants of your product as background
  • provide detailed status of activites
  • remove stock photos (use authentic photos of real people and products)
  • use videos only if it makes a difference
  • use poster attribute for videos
  • never autoplay media
  • label icons
  • use icons with selling point character
  • limit external fonts to two
  • get rid of progress bars
  • do not use pointer-events:none for labels within CSS
  • use <meter> for quantities
  • use <mark> element rather <span> for highlighting
  • make links obvious
  • make like-section personal, e.g. famous person bought this as well
  • add key feature to product title, e.g. shorts made with bio-wool
  • add pain point as subtitle, e.g. not noticeable when you wear it
  • use SVG for icons, not icon fonts
  • optimize @media print (do not ignore it - people print pages)
  • use .preventDefault() for JS event listeners.
  • avoid `target="_blank" in anchors
  • use numeric seperators for large numbers (1_000_000) for readibility
  • interactive elements should disable user-select for inner content
  • use -webkit-font-smoothing: antialiased and text-rendering: optimizeLegibility for fonts
  • do not style browser scrollbar
  • use text-wrap: balance; for balanced line-breaks
  • use title HTML element to respect the current status of your website
  • use text-box-trim for text balancing

Snippets

<form action="#" method="post">
    <fieldset>
      <legend>Register</legend>
      <section>
        <label for="username">Username</label>
        <input id="username" type="text" name="username" placeholder="Username" autocomplete="username" required>
      </section>
      <section>
        <label for="email">Email</label>
        <input id="email" type="email" name="email" placeholder="Email" autocomplete="email" required>
      </section>
      <section>
        <label for="password">Password</label>
        <input id="password" type="password" name="password" placeholder="Password" required>
      </section>
      <section>
        <input type="hidden" name="csrf">
        <button type="submit">Register</button>
      </section>
    </fieldset>
  </form>
/* Spot layout quirks easily*/

* {
  outline: 1px solid red; 
}
/* Spot missing alt-attr for images*/

mg[alt=""],
img:not([alt]) {
    outline: 5px dashed red;
}
/* Event Handler != Event Listener */

document.getElementById("myButton").addEventListener("click", function(event){
  event.preventDefault()
});

External Resources: