Design
Das Erstellen des Designs für die Website ist sehr wichtig, jedoch sollten Sie sich dabei über eines immer Klaren
sein: Ein Design ist selten für die Ewigkeit. Dies mag etwas traurig klingen, wenn man sich überlegt wie viel Zeit
man sich für die Ausarbeitung eines Designs genommen hat, doch das Ganze ist wie in der Mode: Es gibt Trends,
Fortschritte und gesellschaftliche Änderungen. Diese Veränderungen sollten nicht ignoriert werden, sondern genutzt
werden. Wir müssen also zum Erhalt einer modernen und aktuellen Website, das Design immer wieder anpassen,
überarbeiten und erneuern.
Beim Designen einer Website sollte man darauf achten, dass der Grund bzw. der Inhalt der Website klar zu erkennen ist, die Navigation einfach zu bedienen ist und Effekte zu integrieren, um die Website modern wirken zu lassen (Hover-Effekt). Immer im Hinterkopf sollte man auch seine Zielgruppe und die Ziele haben. Viele Grafiker verwenden sehr gerne hochwertige Grafiken und Animationen, doch hier ist Achtung geboten: Zu große Grafik-Dateien sorgen zu langen Ladezeiten der Website. Dies sollte man auf jeden Fall vermeiden. Natürlich muss die Ladezeit auch bei anderen Dateien beachtet werden, doch gerade bei Grafiken entstehen sehr schnell große Dateien. Um dies zu vermeiden, sollten Sie Dateiformate mit Komprimierung nutzen und zudem das Bild nur mit der maximal benötigten Größe auf dem Server ablegen (speichern Sie auf dem Server niemals eine Grafik mit z. B. 3000x300px, wenn Sie die Grafik nur in der Größe von 1000x100px benötigen).
Ein weiterer wichtiger Punkt beim Erstellen eines Designs ist, dass Websites in der heutigen Zeit responsiv sein müssen.
Aber was heißt das überhaupt? Sie haben bestimmt schon mal etwas von responsivem Webdesign gehört. Es handelt
sich dabei um eine Denkweise, ein Webdesign so zu gestalten, dass es auf mehreren Endgeräten möglichst gut aussieht.
Technisch gesehen wird so etwas mit Hilfe von „Media Queries“ in CSS
und mit JavaScript realisiert. Aber warum das Ganze? Heute sind die meisten Geräte internetfähig, was zur Folge hat, dass
Ihre Website u. U. auf ganz unterschiedlichen Endgeräten und Endgeräte-Arten angezeigt wird. Diese besitzen jedoch meistens
unterschiedliche Auflösungen und Eingabemedien. So verfügt ein Desktop-PC oder Laptop über einen Monitor mit einer Auflösung
von ca. 1366x768px bis 1920x1080px, eine Tastatur und eine Maus. Ein Tablet-PC hingegen verfügt meistens über Auflösungen
zwischen 800x600px bis 1280x800px und ein Touchscreen als Eingabemedium. Bei Handys ist ebenfalls ein Touchscreen zur Eingabe
vorhanden. Die Auflösungen sind jedoch geringer und liegen oft nur zwischen 320x480px und 1280x720px. Sie müssen also vermutlich
nicht nur 1 Design erstellen, sondern eher 2 bis 8 Designs. Eine mögliche Kombination von Designs wäre Desktop-Geräte, Tablet
groß, Tablet klein, Handy groß und Hand klein. Die Kunst später beim Programmieren ist es, die Webseite vom HTML-Code so
aufzubauen, dass dieser nur über CSS (und falls notwendig JavaScript) so angepasst wird, dass Sie die verschiedenen Designs
für die verschiedenen Endgeräte haben.
Bildquelle: Vektor-Grafik von Freepik
Papier-Entwurf
Der erste Entwurf für ein Webdesign erfolgt meistens auf einem Blatt Papier. Hierfür gibt es zwei verschiedene Möglichkeiten: Entweder Sie zeichnen auf einem Blatt alle Bestandteile direkt auf oder Sie erstellen einzelne Teile in Papierform und kleben diese nachher auf ein weiteres Blatt auf. Als Papier eignet sich am besten ein A4- oder A3-Blatt mit 70g/m² bis 100g/m². Zeichnen Sie am besten alles mit Bleistift, sodass Sie Teile im Nachhinein nochmals wegradieren können. Wenn Sie möchten, können Sie gerne auch schon Farben (am besten Holzfarben) ins Spiel bringen. Schon bei diesem Entwurf sollten Sie sich grobe Gedanken über Dimensionierung und Abstände der Bestandteile machen. Beim Entwerfen Ihrer Website sollte Sie am besten mit der Desktop-Anzeige anfangen, denn dies ist die Ansicht, wo Sie am meisten sehen. Sobald dieser Entwurf fertig ist, können Sie mit dem Erstellen der weiteren Entwürfe fortfahren.
Übrigens: Sie werden es vermutlich nicht schaffen, das Design beim 1. Mal zu treffen. Seien Sie also nicht deprimiert und enttäuscht, wenn die ersten Entwürfe nichts geworden sind. Bleiben Sie ruhig und nehmen Sie sich die Zeit, die Sie brauchen.
Entwurf am PC gestallten
Das Erstellen eines weiteren (etwas detaillierteren) Design-Entwurfs am PC erfolgt mit Hilfe der groben Vorlage, welche Sie bereits auf Papierform erstellt haben, und eines Grafikprogramms, mit welchem Sie sich vorher schon etwas vertraut machen sollten. Hier sollten Sie sich schon mehr Gedanken über Positionierung und Dimensionierung machen. Des Weiteren ist es natürlich spätestens jetzt notwendig, Farben ins Spiel zu bringen. Ihr gewähltes Farbschema sollte natürlich zu diesem Zeitpunkt ebenfalls idealerweise feststehen.
Entwurf anwenden
Nun ist es endlich soweit: Sie haben Ihre Entwürfe sowohl auf Papierform als auch am Computer erstellt. Der nächste Schritt
ist nun die Website bzw. das Layout zu programmieren. Bevor wir uns jedoch dem Design widmen, müssen wir zuvor das
„HTML-Layout“ erstellen. Gruppieren und strukturieren Sie Ihre Elemente und Bestandteile der Webseite und übersetzen Sie
das Ganze in HTML-Code. Verwenden Sie dafür Positionierungs-Elemente wie div und span oder falls Sie HTML5
verwenden zusätzlich noch header, footer, section, main und nav. Wenn Sie sich nun die
Seite im Browser anschauen, wird Ihnen vermutlich auffallen, dass fast alle Elemente untereinander angeordnet sind. Dies
muss sich natürlich noch ändern. Und hier kommt nun CSS ins Spiel: Positionierung, Dimensionierung, Schrift und Farbe ist
die Aufgabe von CSS. Wenn Sie auf Effekte setzen, ist es unumgänglich die Version 3 von CSS einzusetzen. Eventuell ist
sogar noch JavaScript notwendig.
Spätestens jetzt ist es beim Erstellen des Designs mit Augenmaß vorbei. Ab jetzt werden Sie mit „rohen“ Zahlen arbeiten.
Legen Sie sich also am besten einen Taschenrechner zurecht. Da dies nun der letzte Schritt des Designervorgangs ist,
arbeiten Sie am Layout bis es Ihrer Meinung nach perfekt ist. Fragen Sie auch andere Personen was Sie von dem Layout
halten, bevor Sie die Website veröffentlichen.
Bildquelle: Vektor-Grafik von Freepik