firstdraft Design Guidelines

firstdraft_design_guidelines.md

firstdraft Design Guidelines

the most ridiculous design document ever written

by the least qualified person ever

Use Font Awesome 5.

• Our brand is in it.

• We have a multi-app Pro license.

  • Only use the Pro version for one of our own apps, not e.g. for a class or client project.

• Don't use a gem for the assets, none of them support all of v5's features yet. Use the official CDN or download it.

• When you use <i> with link_to, prefer a content block over String#html_safe; e.g.,

  <%= link_to root_url, class: "btn btn-block btn-outline-secondary" do %>
    <i class="fab fa-firstdraft"></i>
    
    firstdraft
  <% end %>

  rather than

  <%= link_to "<i class=\"fab fa-firstdraft\"></i> firstdraft".html_safe, root_url, class: "btn btn-block btn-outline-secondary" %>

Use Bootstrap 4.

• We also own several multi-app Pro Creative Tim licenses, but I don't reach for these until waaaaaaay late in a project. They usually only work well for landing pages, the other components are janky.

• Always enclose all content within the Bootstrap grid. Pretend you're laying out the page with <table>s like it's the 90s — all content must live inside a div.row and div.col-x.

• Almost always,

  • put the main div.container in the application layout
  • put the div.rows and div.col-xs in the main view template
  • put the actual content in partials and organize them as full-width components (e.g. almost always use regular forms rather than form-inline, always use btn-block etc)

  A beautiful sight is a main view template that is nothing but div.rows and div.cols orchestrating render statements.

• Your go-to UI paradigm should be cards. Cards are an extremely versatile component that are taking over everything from watches to goggles.

  • If you need a header for the card, use a div.header or hx.header as the first child of the div.card; whichever is semantically appropriate. Use Bootstrap's utility classes .h1 through .h6 or .display-1 through .display-6 to style it if you want to.
    • If you don't need a header for the card, don't use one. They tend to be overused.
  • Next, decide whether this card is displaying one thing or a list of things.
    • If it's displaying one thing, then use a div.card-body. Inside the div.body, you're in a whole new world; you can use a <dl> to display the attributes of an object, or use a hx.card-title and p to display some copy, or open up a new grid if you need it.
    • There's also a bunch of great ways to display an image on a card, if you've got one.
    • If you're displaying a list of things, a div.list-group list-group-flush is a great choice where each child is a.list-group-item list-grou-item-action, that, when clicked, lead to detail pages. This pattern is simple, responsive, and resembles iOS's UIListViews.
    • In some cases there's just too much info for list groups. Then, use table-responsive.
  • Use multiple cards per screen, not just one big one; e.g. on a show page, a card with a <dl> at the top with details, and then one card below for each associated collection.

Visual Design

• On the web, fonts should be 15-25px. That's bigger than you think.
• Optimal line length for reading is 2-3 lowercase alphabets. That's less than you think.
• Here, just go read this. It's the best 10 minutes you'll spend on learning design.
• After reading that, you'll realize that most websites' content is too wide. Another reason to use modestly sized card component partials in grids.
• Start by designing in black and white. (Rule 2)
  • Use btn-outline-secondary.
• Double your whitespace (Rule 3)

  • To do so, use mb-x, usually on your div.row. From https://getbootstrap.com/docs/4.0/content/reboot:

    Avoid margin-top. Vertical margins can collapse, yielding unexpected results. More importantly though, a single direction of margin is a simpler mental model.

• Use color and weight to create hierarchy instead of size.