3 Organisms

Molecules give us some building blocks to work with, and we can now combine them together to form organisms. Organisms are groups of molecules joined together to form a relatively complex, distinct section of an interface.

We’re starting to get increasingly concrete. A client might not be terribly interested in the molecules of a design system, but with organisms we can see the final interface beginning to take shape. Dan Mall (who I’m working with on several projects) uses element collages, which articulate ideas for a few key organisms to facilitate client conversations and shape the visual direction (all without having to construct full comps).

Organisms can consist of similar and/or different molecule types. For example, a masthead organism might consist of diverse components like a logo, primary navigation, search form, and list of social media channels. But a “product grid” organism might consist of the same molecule (possibly containing a product image, product title and price) repeated over and over again.

Building up from molecules to organisms encourages creating standalone, portable, reusable components.

http://bradfrostweb.com/blog/post/atomic-web-design/#organisms

3.1.1 Page header

<header class="page-header">
  <div class="l-container">
    <p>Documentation to come</p>
  </div>
</header>

3.1.2 Page footer

<footer class="page-footer">
  <div class="l-container">
    <p>Documentation to come</p>
  </div>
</footer>

3.2.1 Form service

<div class="box form--service">
  <form action="#">
    <div class="l-half">
      <div class="l-item">
        <h2 class="form-title">Har du fasttelefon?</h1>
        <input id="radio4" name="radio1" type="radio" class="radio-btn" value="yes"><label for="radio4" class="radio-btn-label  form__radio-btn">Ja</label>
        <input id="radio5" name="radio1" type="radio" class="radio-btn" value="no"><label for="radio5" class="radio-btn-label  form__radio-btn">Nei</label>
      </div>
      <div class="l-item">
        <h2 class="form-title">Har du bredbånd fra før?</h1>
        <input id="radio4" name="radio2" type="radio" class="radio-btn" value="yes"><label for="radio4" class="radio-btn-label  form__radio-btn">Ja</label>
        <input id="radio5" name="radio2" type="radio" class="radio-btn" value="no"><label for="radio5" class="radio-btn-label  form__radio-btn">Nei</label>
      </div>
    </div>
    <div>
      <label for="zip-code" class="label-above">Postnummer</label>
      <input class="form__number" id="zip-code" type="number" placeholder="1234">
    </div>
    <div class="l-half">
      <div class="l-item">
        <label for="street" class="label-above">Gatenavn og nummer</label>
        <input id="street" type="text" class="form__text" placeholder="Torvgaten 64" class="e-full">
      </div>
      <div class="l-item">
        <input type="submit" class="btn-alt form__btn" value="Søk">
      </div>
    </div>
  </form>
</div>