Design is not just what it looks like and feels like. Design is how it works.
— Steve Jobs (1955–2011)

Grafische vormgeving

Onze IT opleidingen (graduaat programmeren en bachelor toegepaste informatica) zijn totaal niet grafisch gericht. Maar je moet natuurlijk wel een eenvoudige statische site maken en wil toch dat dat er mooi uitziet. Of later in je opleiding moet je een webapp of mobiele applicatie maken. Die mooi maken heeft niet alleen te maken met esthetische kwaliteiten, maar ook met de bruikbaarheid, de usability van je site of app.

In dit deel probeer ik je vier eenvoudige principes mee te geven die je kan gebruiken om de layout van je site te verbeteren. Hopelijk maak je dankzij deze vier principes een site die CRAPpy is!

Een presentatie over CRAP, gevolgd door een toepassing op een pagina:

Lesopname CRAP en typografie

Volgend filmpje van een uur is een lesopname (december 2021) over deze CRAP principes en een klein stukje over kleur. Na ongeveer 25 minuten volgt een praktische toepassing waar deze principes worden toegepast. Eindigen doe ik met een demo over hoe je Google fonts kan kiezen en implementeren.

De opname ‘is wat ze is’. Het is live, met alle versprekingen en haperingen erbij. De klank valt een paar keer gedurende enkele seconden weg, maar ik denk wel dat het geheel voldoende duidelijk blijft.

Ons videoplatform Kaltura zorgt wel voor erg veel compressie van de opname. Als je de opname vergroot, zou het toch voldoende moeten zijn om de code te kunnen lezen. Onder het filmpje toon ik de uiteindelijke HTML- en CSS code

Code gebruikt in de lesopname

HTML code

We gebruiken deze HTML:

<!DOCTYPE html>
<html lang="nl">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="stijl.css">
  <link rel="preconnect" href="https://fonts.googleapis.com"> 
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
  <link href="https://fonts.googleapis.com/css2?family=Fira+Sans+Condensed:wght@700&family=Merriweather:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
  <title>CRAP</title>
</head>

<body>
  <header>
    <nav class="container">
      <ul>
        <li><a href="#">IJsland</a></li>
        <li><a href="#">Zandwoestijnen</a></li>
        <li class="hier"><a href="#">Gletsjers</a></li>
        <li><a href="#">Vulkanen</a></li>
        <li><a href="#">Warmwaterbronnen</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <figure class="container">
      <img src="img/bg.jpg" alt="">
    </figure>
    <section class="container">
      <h1>Rondreizen op IJsland</h1>
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aperiam itaque perferendis blanditiis voluptatem, deleniti quas eaque cum culpa ad adipisci autem exercitationem rerum veritatis. Ex, tempora doloribus molestiae ad, hic dolore reiciendis eveniet, necessitatibus nulla reprehenderit corrupti accusamus adipisci cupiditate. Iusto id eos quibusdam odit! Voluptatum nisi dolor autem alias, nobis laboriosam fugiat magnam, veniam nemo dignissimos ullam? Ipsum dignissimos, corrupti, doloremque velit aliquam perspiciatis, quod praesentium odio beatae alias natus asperiores nam id recusandae eveniet? Qui laudantium sint odit cupiditate consectetur praesentium officiis numquam repellat aliquid accusamus necessitatibus explicabo nemo doloremque impedit recusandae, animi dolor quae officia.  Porro earum vel alias, exercitationem unde esse vitae asperiores. Quia iste esse explicabo culpa, saepe impedit? Blanditiis et eum in accusamus, aut maxime nostrum facilis? Distinctio quae minus unde saepe aperiam eos cupiditate repudiandae non officia quidem tenetur, voluptatibus autem totam rerum sunt, esse vero voluptatem porro.</p>
    </section>
    <section id="hoogtepunten">
      <div class="container">
        <article>
            <h3>
              Reykjavik
            </h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque laboriuae adipisci assumenda repellat corrupti hic alias, molestiae reiciendis quos quidem quis suscipit. Sed quas placeat quidem minus.</p>
        </article>
        <article>
            <h3>Geysir</h3>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Numquam amet debitis placeat, quidem minus temporibus pariatur cum assumenda, alias ipsum necessitatibus molestiae magni et ad, expedita voluptatem eos accusamus quae!</p>
        </article>
        <article>
            <h3>Jökulsarlon</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum accusantium illo, harum perspiciatis incidunt fuga facilis eaque in odit temporibur? Natus sapiente veritatis, labore provident impedit optio ipsam.</p>
        </article>
      </div>
    </section>
    <section class="container">
      <h2>Dit is een hele lange titel die mogelijk meer dan één volledige regel nodig heeft</h2>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eos magnam, blanditiis voluptatem sit error harum enim nesciunt culpa in nemo unde fugit perferendis doloremque excepturi, consequatur molestias mollitia! Ab incidunt repellendus eos numquam dolorum perspiciatis, labore laborum reprehenderit nisi exercitationem veniam magnam nulla aspernatur iste quis dolorem odit illum harum blanditiis inventore nam! Tempore rerum fugit libero amet est tempora adipisci, minima quod quasi ipsa dolore odit asperiores voluptates necessitatibus dolorum deserunt, incidunt, officia sapiente doloremque cumque officiis saepe sit facilis. Perferendis deserunt magni natus animi. Dolore, quos quas error rerum modi quasi cumque! Laboriosam odio repellat recusandae excepturi iste.</p>
    </section>
    <section class="container fotos">
      <figure><img src="img/jeep.jpg" alt=""></figure>
      <figure><img src="img/meer.jpg" alt=""></figure>
      <figure><img src="img/waterval.jpg" alt=""></figure>
    </section>
    <section class="container">
      <h3>Een kortere titel</h3>
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit perspiciatis quia architecto adipisci ipsum, quo neque sint natus nihil, quam dolor animi sapiente repellat tempora voluptate repudiandae iusto. Temporibus id tempore quo in esse excepturi odio qui et perspiciatis.  Deleniti animi molestias quae quasi pariatur quaerat earum quo? Nemo, excepturi tenetur incidunt aliquid at delectus hic voluptas eligendi, alias dolore veritatis reiciendis aliquam eius non facere officia qui fugiat voluptates?</p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime ad iusto dignissimos, eos cupiditate quod reiciendis reprehenderit sit. Ut reiciendis voluptatum quidem iure numquam natus facilis consectetur aliquam fugit incidunt magni minus quis ab eligendi eveniet, eaque quisquam aliquid tenetur soluta obcaecati vero recusandae ipsa omnis? Illum debitis corporis deleniti!</p>
    </section>
  </main>
</body>

</html>

CSS code

De uiteindelijke CSS code na de CRAP-aanpassingen en de aanpassingen qua typografie wordt: 

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body { 
    line-height: 1.6;
    font-family: 'Merriweather', georgia, serif;
}

.container {
    max-width: 50em;
    margin: 0 auto;
}

header {
    background-color: #111;
}

nav ul {
    display: flex;
    flex-direction: row;
    list-style-type: none;
    align-items: flex-end;
}

nav ul li {
    padding: 0 1rem;
    padding-bottom: 7px;
}

nav ul li:first-child {
    font-size: 2rem;
    margin-right: auto;
    padding-left: 0;
    padding-bottom: 0;
}

nav ul li:last-child {
    padding-right: 0;
}

nav a {
    text-decoration: none;
    vertical-align: bottom;
    color: #fff;
}

figure img {
    max-width: 100%;
}

#hoogtepunten {
    background-color: #111;
    color: #fff;
}

#hoogtepunten .container {
    display: flex;
    flex-direction: row;
    gap: 1.5em;
    padding: 3em 0;
}

#hoogtepunten .container article {
    flex-basis: 33%;
}

section.fotos {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.fotos figure {
    flex-basis: 32%;
    flex-shrink: 1;
}

main > .container, main > #hoogtepunten {
    margin-bottom: 3em;
}

h1 {
    font-size: 3.5rem;
}

h2 {
    font-size: 2.6rem;
}

h3 {
    font-size: 2rem;
}

h1, h2, h3, h4 {
    line-height: 1.1;
    margin-bottom: 0.3em;
    color: #514F8C;
    font-family: 'Fira Sans Condensed', sans-serif;
    font-weight: 700;
}

#hoogtepunten {
    background-color:#334003;
    color: #D7D7D9
}

#hoogtepunten h3 {
    color: #fff;
}

nav a {
    color: #888c04;
}

nav .hier a {
    color: #d7d7d9;
}

nav a:hover {
    color: #fff;
}