Hauptinhalt
Programmierung
Kurs: Programmierung > Lerneinheit 2
Lektion 9: Lerne mehrWebpage Design
Wir haben dir gezeigt, wie du Webseiten entwickeln kannst. Aber was wir dir bisher nicht gezeigt haben, ist, wie du Webseiten mit gutem Design entwickelst. Klar, Schönheit ist immer relativ und letztendlich bestimmst du (der Benutzer), ob deine Webseite gut aussieht. Aber wir können dir ein paar Tips und Tricks zu gut designten Webseiten zeigen.
Deine Webseite sollte nicht nur gut designt sein, sie sollte sich auch von anderen Webseiten unterscheiden, damit sie sich vom Meer der Million von Webseiten heraushebt und sich deine Benutzer an sie erinnern.
Und gerade dies ist der schwierige Teil. Für deine Webseite ein sowohl gut aussehendes als auch einzigartiges Design zu entwerfen. Du kannst es einzigartig machen, indem du alles mit Zebrastreifen dekorierst und eine 64 Pixel große Schriftart verwendest. Aber sieht dies noch gut aus? Eher nicht :-)
Gute Schriftarten (Fonts) auswählen
In der Standardeinstellung zeigen Webbrowser die Webseiten mit einer generischen Schriftfamilie mit Serifen ('serif') an. Damit erhalten die Webseiten einen eher formalen Stil. Du kannst dies ändern und z. B. eine generische Schriftart ohne Serifen ('sans-serif') oder eine Schriftart wie Garamond oder Helvetica, welche auf den meisten Computern vorinstalliert ist, verwenden.
Damit deine Webseite aber ein einzigartiges Aussehen erhält, kannst du auch eine benutzerdefinierte Webschriftart verwenden. Khan Academy verwendet z. B. auf allen Webseiten Lato, eine sehr schöne sans-serif Schriftart:
Wenn du eine Webschriftart verwendest, dann wird der Browser deiner Benutzer ein Font-File herunterladen. Dieses File wird dann jeweils im CSS der Webseite verwendet. Da dies ein zusätzlicher Download ist, solltest du nicht allzu viele verschiedene Webschriftarten verwenden. Eine gute Quelle für freie Webschriftarten ist Google Web Fonts. Schau dir diese Beispiel-Webseite auf der Khan Academy an. Sie verwendet zwei Google Webschriftarten.
Von wo du auch immer deine Schriftarten hast, beachte, dass du nicht zu viele verwendest. Grundsätzlich solltest du nicht mehr als zwei oder drei verschiedene Schriftarten auf einer Webseite verwenden, und deine Schriftarten sollten gut zueinander passen. Hier eine hilfreiche Webseite, welche dir ein paar Beispiele von Google Web Fonts zeigt, die gut zusammenpassen.
Gute Farben auswählen
Wenn du eine Webseite entwirfst, solltest du eine bestimmte Farbpalette verwenden. Eine Farbpalette ist eine Gruppe von Farben, welche gut zueinander passen und die du für die verschiedenen Teile deiner Webseite verwenden kannst. Die Farbpalette kann auf einem Firmenlogo basieren oder sich auf das Thema der Webseite beziehen oder ganz einfach nur gut aussehen.
Brauchst du Hilfe, um eine gute Farbpalette auszuwählen? Falls du schon ein paar Farben kennst, welche du für die Farbpalette verwenden möchtest, kannst du Paletton, ein Tool, welches dir unterschiedliche Arten von Farbpaletten anzeigt (Monochromatisch, Triad, angrenzende Farben und Tetrad), benutzen.
Wenn du von Grund auf eine neue Webseite erstellst, kannst du auf COLOURLovers nach einer Farpalette, welche dir gefällt, suchen. Dies ist eine Community von Leuten, welche Farben lieben, und Farben, Farbpaletten und Ideen für Farbmuster austauschen. Hier z. B. die Farbpalette Giant Goldfish:
Wenn du eine Farbpalette ausgewählt hast, kommt nun der schwierige Teil. Die Auswahl, wo du welche Farbe einsetzen willst. Welche Farbe verwendest du für die Überschriften? Die Links? Den Text? Den Hintergrund? Daher ist mein Lieblingsfeature von Paletton die Beispiel-Webseite für die gewählte Farbpalette:
Wenn du entscheidest, wie du die gewählte Farbpalette in CSS verwendest, solltest du ein paar Dinge berücksichtigen:
- Wenn du die Links zu stark anders als in der Standardeinstellung gestaltest, werden diese für deine Benutzer nicht mehr einfach als Links erkennbar.
- Die Vorder-/Hintergrundfarbe von Text sollten einen starken Kontrast haben, damit der Text einfach lesbar wird. Überprüfe deine Farben mit diesem Kontrast-Checker.
- Viele Menschen sind Farbenblind. Für sie haben einige Farbkombinationen nicht genügend Kontrast. Prüfe deine Farben mit diesem Simulator für Farbenblindheit.
Wenn du dir nicht sicher bist, wie du eine Farbpalette verwenden sollst, schicke deine Webseite ein paar Freunden und frage sie nach ihrer Meinung. Können sie alles lesen? Erkennen sie, was anklickbar ist? Jucken sie gewisse Farben in der Nase? Welche Farben mögen sie?
Den Leerraum gut nutzen
Ich habe einmal einen Freund, welcher heute als Webdesigner bei Google arbeitet, gefragt, was denn sein Geheimnis bei gutem Webdesign sei. Seine Anwort? "Leerraum!"
Der Leerraum ist der Raum zwischen den Elementen. Im CSS-Land entsteht dieser durch die Eigenschaften padding, margin und line-height.
Mein Freund hat recht! Der Leerraum hat einen großen Einfluss darauf, wie gut deine Webseite aussieht und wie einfach diese zu lesen ist. Meine Designer-Freunde können Stunden damit verbringen, mit dem Leerraum herumzuspielen, bis es wirklich gut aussieht. Denn sie wissen, wie wichtig Leerraum ist!
Als extremes Beispiel hier die Seitenleiste für unsere Tutorials. Einmal mit und einmal ohne Leerraum.
Was bedeutet dies für dich? Es ist etwas schwierig, dir einfache und klare Regeln zum Leerraum zu geben. Sei dir einfach seiner Wichtigkeit bewusst. Beachte für jedes Element den Abstand (margin) zu seinen Nachbarelementen. Bei Elementen mit einem Hintergrund oder einem Rahmen, beachte jeweils, wie viel "padding" du verwendest. Und bei Paragraphen und Listen kannst du eventuell mit etwas mehr line-height die Lesbarkeit erhöhen.
Mit Vorlagen und Frameworks beginnen
Nachdem du all dies gelesen hast, bist du vielleicht etwas eingeschüchtert durch all die Regeln. Besonders wenn du das Gefühl hast, nicht ein besonders gutes Auge für Design zu haben. Keine Angst! Du musst kein guter Designer sein, um eine ansprechende Webseite zu gestalten. Du kannst stattdessen mit einer gute Vorlage oder einem Framework beginnen. Dadurch profitierst du von der Vorarbeit, welche andere Designer für dich geleistet haben.
Eine Vorlage ist eine HTML und CSS Datei, welche schon wie eine komplette Webseite aussehen und oft mit Blindtext gefüllt ist. Gute Vorlagen kannst du auf W3Schools oder mit einer Suche nach "free webpage templates" finden. Hoffentlich sind dann auch alle gefunden Vorlagen wirklich frei! Nachdem du ein Template heruntergeladen hast, kannst du den Blindtext durch deinen eigenen Inhalt ersetzen, und beginnen, die CSS Style gemäß deinen eigenen Designvorstellungen anzupassen.
Ein CSS Framework ist eine Sammmlung von CSS Regeln, welche einen guten Anfang für eine schicke Webseite sind. Es gibt ganz viele populäre CSS Frameworks, welche dir den Anfang für eine schön gestaltete Webseite vereinfachen. Beispiele sind Twitter Bootstrap, ZURB Foundation, Pure CSS, Topcoat und viele mehr! Du kannst Beispiele von Twitter Bootstrap und ZURB foundation hier auf der Khan Academy finden.
Wenn du ein CSS Framework herunterlädst, schau dir die Dokumentation dazu an. Darin findest du Beispiele und oft auch Vorlagen, mit denen du herausfinden kannst, welche CSS Klassen du verwenden musst, um das gewünschte Aussehen zu erhalten.
Wenn du Vorlagen oder ein Framework verwendest, läufst du Gefahr, dass deine Webseite genauso wie andere Webseiten aussieht und sich deshalb dem Benutzers nicht besonders einprägt. Um dies zu verhindern, ist es wichtig, dass du dein eigenes Logo hinzufügst und die Hauptelemente wie die Schriftart oder die Hintergrundfarbe änderst.
Willst du an der Diskussion teilnehmen?
Noch keine Beiträge.