Web-Design Grundlagen für Einsteiger

Grundlagen Web-Design

Unter dem Begriff Web-Design versteht man Planung, Konzeption, Layout und Gestaltung einer Internetseite. Das Web-Design beschäftigt sich nicht nur mit dem Aussehen einer Webseite, sondern auch mit dem Zusammenspiel aller Funktionen.

Früher verstand man unter Web-Design die Entwicklung von Websites, die ausschließlich im Desktop Browser angezeigt wurden. Zum Teil wurden Websites sogar für eine bestimmte Bildschirmauflösung entwickelt.

Heute spielen aber mobile Endgeräte wie Smartphone und Tablet eine immer größere Rolle. Web-Design bedeutet deshalb heute die Gestaltung von Websites für viele unterschiedliche Geräte, die viele unterschiedliche Bildschirmauflösungen haben.

Beim Web-Design geht es immer um das wohl bekannte Look and Feel einer Internetseite, um die Benutzerfreundlichkeit und um das Benutzererlebnis. Dazu gehören insbesondere folgende Punkte:

Die richtige Wahl und Kombination der benutzten Farben, Schriften und Bilder, die für den ersten Eindruck von entscheidender Bedeutung sind.
Der logische Aufbau, die Strukturierung der Inhalte und die Navigation, die das Layout der Internetseite bestimmen.
Auswahl der interaktiven Design-Elemente. Die einfache Bedienbarkeit ist dabei besonders wichtig.

Was ist gutes Web-Design?

Gutes Web-Design …

hat ein wohl definiertes Thema und ein klares Ziel.
hat eine einfache, verständliche und übersichtliche Navigation.
funktioniert auch auf mobilen Geräten wie Smartphones und Tablets.
hat schnelle Ladezeiten.
beschränkt sich auf wenige Farben. Bei der Auswahl der Farben gilt: weniger ist mehr.
beschränkt sich auf maximal 2 Schriftarten und benutzt nur wenige unterschiedliche Schriftgrößen für den Fließtext und die Überschriften.

Gutes Web-Design bedeutet vor allem, dass der Nutzer schnell die Inhalte findet, die er sucht.

Nichts ist für den Nutzer einer Website mühsamer als sich durch eine unübersichtliche oder unlogische Navigation zu wühlen, um an die gesuchte Information zu kommen. Findet sich der Nutzer auf der Website nicht zurecht oder verirrt sich im Navigations-Dschungel, verlässt er sie frustriert.

Am besten ist eine klare Navigation ohne Sub-Menüs. Ist eine umfangreiche Navigation unvermeidlich, sollten Menüpunkte, die logisch zusammengehören, besonders hervorgehoben werden.

Im Moment unwichtige Menüpunkte sollten ausgeblendet werden, da sie die Aufmerksamkeit stören. Mehr als 6 bis 8 relevante Menüpunkte sind schwer mit einem Blick zu erfassen.

Web-Design Grundlagen

Die Grundlage des Web-Design bilden die beiden Sprachen HTML (HyperText Markup Language) und CSS (Cascading Style Sheets). HTML legt fest, was auf der Seite stehen soll. Das heißt, durch HTML wird nur die Seitenstruktur und der eigentliche Inhalt der Seite festgelegt. Im Markup der HTML-Datei werden keinerlei Angaben zum Design der Seite gemacht.

Mit CSS als direkte Ergänzung zu HTML wird das Design der Website festgelegt. Das Design wird dazu in eine separate CSS-Datei ausgelagert, so dass alle Seiten der Website diese Stylesheet-Definitionen verwenden können. Dadurch wird eine vollständige Trennung von Design und Inhalt erreicht.

Typische Inhalte der zugehörigen CSS-Datei sind:

Definition der Bereiche für
header (Kopfzeile)
nav (Navigation)
article (Hauptinhalt) sowie ggf.
aside (Seitenspalte) und
footer (Fußzeile)
Definition der Schriftarten
Definition der Überschriften, Absätze und Listen
zusätzliche Definitionen, z.B. Kontaktformular, Info-Boxen, Buttons, …

Standard CSS-Layout mit mit Header — Beispiel 1:
2 Spalten CSS-Layout mit Header

Dieses Layout funktioniert auch auf Smartphones und Tablets. Aber im Hochformat (Portait-Modus) ist die maximal nutzbare Zeilenlänge der rechten Spalte zu gering. In der Content-Spalte können bei einer Bildschirmbreite zwischen 320 und 480 Pixel zu wenig Zeichen je Zeile angezeigt werden, da für die linke Spalte zwischen 40 und 60 Prozent der verfügbaren Bildschirmbreite beansprucht werden.

Auf der Seite Responsive Web-Design zeige ich dir, wie dieses Problem durch Media Queries gelöst werden kann. Für Displays mit geringer Bildschirmbreite muss die Navigation (d.h. die linke Spalte) so angepasst werden, dass für die Content-Spalte die gesamte Bildschirmbreite zur Verfügung steht.

HTML Quelltext

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

<head>
<title>Titel der Webseite</title>
<meta name="description" content="Beschreibung der Webseite">
<meta name="keywords" content="Suchbegriffe der Webseite">
<meta charset="utf-8">
<meta name="language" content="de">
<meta name="audience" content="alle">
<meta name="robots" content="index, follow">
<meta name="robots" content="all">
<link href="favicon.png" rel="icon" type="image/png" size="32x32">
<link href="styles.css" rel="stylesheet" type="text/css">
</head>

<body>
<nav id="sideNav">
<ul>
  <li><a class="active" href="/">Home</a>       <!-- URL Homepage --></li>
  <li><a href="/news.html">News</a>             <!-- URL "News" --></li>
  <li><a href="/kontakt.html">Kontakt</a>       <!-- URL "Kontakt" --></li>
  <li><a href="/ueber-mich.html">Über mich</a>  <!-- URL "Über mich" --></li>
</ul>
</nav>

<div id="container">
<header id="headline">
<h1>Hauptüberschrift der Seite</h1>
</header>

<article id="content">
<h2>Hauptinhalt der Seite</h2>
<p>Blindtext muss nicht immer Lorem Ipsum sein.</p>

<p>Im Gegensatz zu früheren Webseiten müssen wir zum Beispiel nicht mehr zwei verschiedene Webseiten für den Internet Explorer und einen anderen Browser programmieren. Es reicht eine Seite, die für alle Browser geeignet ist. Die Seite ist genauso gut zum Drucken oder für die Darstellung auf einem Smartphone geeignet ist. Wohlgemerkt: es reicht eine für alle Browser und alle Geräte.</p>

<p>So gibt es Regeln für HTML, CSS und JavaScript; Worte, die du vielleicht schon einmal gehört hast. Diese Standards sorgen dafür, dass jeder die Webseite ohne Einschränkung nutzen kann. Im Gegensatz zu früher müssen wir heute nicht mehr zwei verschiedene Webseiten für den Microsoft Edge und dem Mozilla Firefox entwickeln.</p>
</article>
</div>  <!-- Ende container -->
</body>
</html>

CSS Quelltext

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Open Sans", "Liberation Sans", Arial, Helvetica, sans-serif;
  font-size: 1.0em;
  font-weight: normal;
  text-align: left;
  background: #dcebf2;             /* hellblau */
  color: #222;                     /* schwarz-grau */
  -moz-hyphens: auto;
  -o-hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

#container {
  margin: 0 0 0 12.5em;            /* linke Spalte Breite 12.5em */
  padding: 0;
  height: 100%;
}

#content {
  margin: 0;
  padding: 0 0.625em;
  width: 100%;
}

/** ######################
 ** ##  Haupt-Headline  ##
 ** ###################### */
#container #headline {
  margin: 0 0 2.0em 0;
  padding: 0 0.625em;
  width: 100%;
  height: 2.5em;                   /* Headline Höhe 2.5em */
  top: 0;
  left: 0;
  background: #feffc1;             /* hellgelb */
  overflow: hidden;
}

#container #headline h1 {
  margin: 0;
  padding: 0;
  font-size: 1.5em;
  color: #222;                     /* schwarz-grau */
}

/** ######################
 ** ##  Content Styles  ##
 ** ###################### */
#content h1, #content h2, #content h3 {
  display: inline-block;
  margin: 0 0 1.25em 0;
  padding: 0;
  font-size: 1.3em;
  font-weight: bold;
  text-align: left;
  color: #b00;                     /* dunkelrot */
}

#content p {
  margin: 0 0 1.25em 0;
  padding: 0;
  color: #000;                     /* schwarz */
}

#content p+h1, #content p+h2, #content p+h3 {
  margin-top: 2.5em;
}

#content a {
  font-size: 1.0em;
  text-decoration: underline;
  color: #0000df;                  /* blau */
}

#content a:hover {
  text-decoration: underline;
  color: #df0000;                  /* rot */
}

/** ##############
 ** ##  Button  ##
 ** ############## */
#content .cssbtn {
  display: block;
  margin-bottom: 2.5em;
}

#content a.button {
  display: inline-block;
  margin: 1.0em 0.2em 1.0em 0;
  padding: 0.46em 1.2em;
  font-size: 1.4em;
  font-weight: 600;
  text-decoration: none;
  text-shadow: 0 0.04em 0.04em rgba(0,0,0,0.35);
  text-align: center;
  background: #b00;                /* dunkelrot */
  color: #fff;                     /* weiß */
  transition: all 0.15s;
  border: 0.125em solid #000;
  border-radius: 0.5em;
  box-sizing: border-box;
}

#content a.button:hover {
  text-shadow: 0 0 2.0em rgba(255,255,255,1);
  background: #e00;                /* hellrot */
  color: #000;                     /* schwarz */
  border-color: #000;
}

/** ###############
 ** ##  sideNav  ##
 ** ############### */
#sideNav ul {
  position: fixed;
  margin: 0;
  padding: 0;
  width: 12.5em;
  height: 100%;
  list-style-type: none;
  background: #d0dec9;             /* mintgrün */
  overflow: auto;
}

#sideNav ul li {
  border-bottom: 2px solid #bbb;   /* hellgrau */
}

#sideNav ul li a {
  display: block;
  padding: 0.5em 1.0em;
  text-decoration: none;
  color: #000;                     /* schwarz */
}

#sideNav ul li a.active {
  background: #d0ffc9;             /* hellgrün */
  color: #000;                     /* schwarz */
}

#sideNav ul li a:hover:not(.active) {
  background: #ccc;                /* hellgrau */
  color: #000;                     /* schwarz */
}

Live Vorschau dieser Web Page Vorlage Standard 2 Spalten-Layout mit Header.

Download