Es ist kaum zu leugnen, dass Webdesign in letzter Zeit fast ein Synonym für grafische Gestaltung geworden ist. Aber die beiden Begriffe sind eigentlich sehr verschieden voneinander, und es gibt keine Wechselbeziehung dazwischen. Grafikdesign kann offline erfolgen, und Webdesign kann nur durch Codierung entworfen werden.
Das klingt vielleicht überraschend für diejenigen, die in Webdesign neu sind, vor allem, wenn ihr Gestaltungsvokabular mit dem Wort "Photoshop" beginnt und endet. Aber egal, wie atypisch es klingt, es ist trotzdem eine Tatsache. Wir werden es in diesem Artikel ausführlich besprechen und dabei lernen, wie die Gestaltung einer Website im Browser durchgeführt werden kann, und was einige ihrer Vorteile sind.
Webdesign im Browser vs Photoshop
Vor Photoshop war das Entwerfen Code-basiert. Heutzutage zeihnen die Webdesigner jede Seite in Photoshop und dann geben sie die .psd-Dateien an die Entwickler. Es gibt praktisch keine Notwendigkeit für sie codieren zu lernen. So wurde das Code-basierte Design langsam ausgestorben. Die heutigen Webdesigner stehen nun an einem Scheideweg: sie haben ein sehr begrenztes Wissen über die Codierung und nur ein grenzwertiges Gespür für die Gestaltung. Aber was auch immer sie wissen, das reicht völlig, um eine Website zu erstellen und fast alle ihre Aspekte zu modifizieren.
Responsives Design hat es wieder ins Leben gerufen
Als Responsives Design kam, verlagerte sich der Schwerpunkt wieder auf die Gestaltung im Browser, da die Websites, die in Photoshop erstellt wurden, nicht auf allen Arten von Geräten wiedergegeben werden könnten. Insbesondere war es schwierig bei Smartphones, da ihre Bildschirmauflösung sehr gering ist. Bei einem responsiven Design sind die Design- und Entwicklungsphasen bei der Erstellung von einer Website nicht getrennt. Wer also gut im Design ist und über Kenntnisse in der Front-End-Entwicklung verfügt, könnte es leicht zu seinem Vorteil machen. Die Verwendung von Tools wie Photoshop könnte als eine Art Alternative dienen, um Probleme, die schwer durchschaubar sind, zu lösen. Die Entwickler sind oftmals mit solchen Problemen bei der Umwandlung von PSD-Dateien in HTML konfrontiert. Aber da responsive Webseiten auf CSS-Feineinstellungen basiert sind, bereiten sie kaum Probleme sowohl für Designer als auch für Entwickler.
Die Vorteile von Gestaltung im Browser
Adobe hat Photoshop unter Berücksichtigung der Bedarfe von Desktop-Benutzern entwickelt. Wenn Designer in Photoshop arbeiten, verwenden sie eine feste Größe der Arbeitsfläche. Die Größe ist standesgemäß, wenn das Design als Desktop-Layout verwendet werden soll, aber es gibt keinen Hinweis darauf, ob das Design den ganzen Bildschirm einnehmen würde und ob man die Seite auch von anderen Geräten abrufen kann. Das Entwerfen im Browser allerdings stellt diese Information zur Verfügung. Außerdem, wenn ein Benutzer eine Website besucht, geht es nicht nur darum, einfach auf den Bildschirm zu starren. Man scrollt aufwärts oder abwärts, wechselt von einem Tab zum anderen und klickt auf die verlinkten Artikel, um auf anderen Seiten zu landen. Solche Übergänge und Wechselwirkungen können nur durch die Gestaltung im Browser gerendert werden.
Entwerfen in Photoshop bedeutet die Umwandlung der .psd-Datei in HTML/CSS, die eine reine Zeitverschwendung ist. Wenn Du stattdessen im Browser gestaltest, wird die gesamte Arbeit auf einen Schlag durchgeführt.
Wenn du irgendwelche Revisionen in deiner Design-Arbeit mit Photoshop machst, dann müssten die Fehler manuell identifiziert und korrigiert werden. Und das ist ziemlich zeitaufwendig. Aber wenn Du deine Entwürfe im Browser machst, dann wird die Änderung des CSS-Codes reichen. Du fragst dich wahrscheinlich nun, warum denn Photoshop immer noch relevant ist, wenn es so viel vorteilhafter ist, die Gestaltung im Browser durchzuführen. Und die Antwort auf diese Frage besteht darin, dass Photoshop immer noch sehr hilfreich für Grafikdesigner ist, die Ihre Entwürfe nicht codieren brauchen. Aber nach der Erscheinung von Mobile Web wurde "Pixel Perfektion" zum Gebot der Stunde gemacht, und Gestaltung im Browser ist der einzige Weg, um es zu sichern.
Wie Du im Browser gestaltest
Der wichtigste Teil ist die erste Blaupause des gesamten Projekts. Es wird in dieser Phase essenziell die Dokumentation benötigt. Du musst also das Inhaltsverzeichnis, Buttons, die Farbe des Anker-Tags, Call-to-Action-Formen im Voraus dokumentieren. Am besten wäre es, wenn Du mit einem Datenflussdiagramm weiterarbeiten könntest. Dann könntest Du alle Abweichungen verfolgen und schnell sie beheben, bevor sie zu einem ernsthaften Problem werden.
Als nächstes musst Du eine Skizze auf der Grundlage Deines Plans zeichnen. Sobald die Skizze fertig ist, kannst Du mit dem Prototypen der Website beginnen. Die Verwendung von HTML und CSS stellt sicher, dass der Kunde in der Lage sein wird, mit Dir zu interagieren. Bevor Du mit dem eigentlichen Entwurf beginnst, musst Du die Schriftarten, Farben, Texturen usw. wählen. Ein Moodboard konnte in dieser Phase nützlich sein, und Du könntest Photoshop zu Deinen Gunsten verwenden, da die notwendigen Elemente in einem Moodboard, wie Textur, Farbenpalette, Buttonstil und Typografie mit Photoshop gestaltet werden können.
Du wirst sicher erfreut sein zu wissen, dass es viele Tools gibt, die Codierung zum genussvollen Erlebnis machen. Du kannst UI-Bibliothek-Stores verwenden, um auf UI-Bibliotheken zuzugreifen. Das Nutzen von einer UI-Bibliothek ist optional, aber wenn Du sie nicht verwendest, dann musst Du alle UI-Komponenten selbst codieren und das würde ziemlich zeitaufwendig sein. Fast alle Programmierer, die in dem Browser von Grund auf neu gestalten, nutzen UI Bibliotheken, so dass ein Prototyp der Website schnell gebaut werden kann, und der gesamte Entwurfsprozess insgesamt weniger mühsam wird. Sobald der Prototyp fertig ist, muss der Designer anfangen, die Mock-Inhalte hinzuzufügen. Die Prototyp-Datei ist das Markup mit HTML-Tags. Das Hinzufügen von Mock-Inhalten wird dem Designer helfen besser zu visualisieren, wie sich die Inhalte auf dem Front-End aussehen.
Alles für den Kundenkomfort
Jeder Kunde möchte eine komplette Website kaufen, nicht die Linien oder die Hintergründe davon. Und wenn das Design im Browser entworfen wurde, dann kann es sicherlich viel mehr Vorteile dem Kunden bieten. Außerdem, wenn es darum geht, eine Website für alle Arten von Geräten zu erstellen, ist die Kodierung im Browser definitiv etwas, was nicht vermieden werden kann.
Unter dem Strich lässt es sich also sagen, dass die Kodierung im Browser die Zukunft des Designs darstellt, und Photoshop höhstwahscheinlich bald nur in Grafikdesigner-Kreisen relevant sein wird.
Dieser Artikel wurde aus dem Englischen übersetzt. Das Original findest Du hier: Free Printables To Set Up Your Goals for 2015.