Es ist kaum zu leugnen, dass Webdesign in letzter Zeit fast ein Synonym f\u00fcr 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.<\/p>\n
Das klingt vielleicht \u00fcberraschend f\u00fcr 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\u00fchrlich besprechen und dabei lernen, wie die Gestaltung einer Website im Browser durchgef\u00fchrt werden kann, und was einige ihrer Vorteile sind.<\/p>\n
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\u00fcr 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 \u00fcber die Codierung und nur ein grenzwertiges Gesp\u00fcr f\u00fcr die Gestaltung. Aber was auch immer sie wissen, das reicht v\u00f6llig, um eine Website zu erstellen und fast alle ihre Aspekte zu modifizieren.<\/p>\n
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\u00e4ten wiedergegeben werden k\u00f6nnten.<\/strong> Insbesondere war es schwierig bei Smartphones, da ihre Bildschirmaufl\u00f6sung 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 \u00fcber Kenntnisse in der Front-End-Entwicklung verf\u00fcgt, k\u00f6nnte es leicht zu seinem Vorteil machen. Die Verwendung von Tools wie Photoshop k\u00f6nnte als eine Art Alternative dienen, um Probleme, die schwer durchschaubar sind, zu l\u00f6sen. 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\u00fcr Designer als auch f\u00fcr Entwickler.<\/p>\n Adobe hat Photoshop unter Ber\u00fccksichtigung der Bedarfe von Desktop-Benutzern entwickelt. Wenn Designer in Photoshop arbeiten, verwenden sie eine feste Gr\u00f6\u00dfe der Arbeitsfl\u00e4che. Die Gr\u00f6\u00dfe ist standesgem\u00e4\u00df, wenn das Design als Desktop-Layout verwendet werden soll, aber es gibt keinen Hinweis darauf, ob das Design den ganzen Bildschirm einnehmen w\u00fcrde und ob man die Seite auch von anderen Ger\u00e4ten abrufen kann. Das Entwerfen im Browser allerdings stellt diese Information zur Verf\u00fcgung. Au\u00dferdem, wenn ein Benutzer eine Website besucht, geht es nicht nur darum, einfach auf den Bildschirm zu starren. Man scrollt aufw\u00e4rts oder abw\u00e4rts, wechselt von einem Tab zum anderen und klickt auf die verlinkten Artikel, um auf anderen Seiten zu landen. Solche \u00dcberg\u00e4nge und Wechselwirkungen k\u00f6nnen nur durch die Gestaltung im Browser gerendert werden.<\/p>\n Entwerfen in Photoshop bedeutet die Umwandlung der .psd-Datei in HTML\/CSS<\/strong>, die eine reine Zeitverschwendung ist. Wenn Du stattdessen im Browser gestaltest, wird die gesamte Arbeit auf einen Schlag durchgef\u00fchrt.<\/p>\n Wenn du irgendwelche Revisionen in deiner Design-Arbeit mit Photoshop machst, dann m\u00fcssten die Fehler manuell identifiziert und korrigiert werden. Und das ist ziemlich zeitaufwendig. Aber wenn Du deine Entw\u00fcrfe im Browser machst, dann wird die \u00c4nderung 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\u00fchren. Und die Antwort auf diese Frage besteht darin, dass Photoshop immer noch sehr hilfreich f\u00fcr Grafikdesigner ist, die Ihre Entw\u00fcrfe 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.<\/p>\n Der wichtigste Teil ist die erste Blaupause des gesamten Projekts. Es wird in dieser Phase essenziell die Dokumentation ben\u00f6tigt. Du musst also das Inhaltsverzeichnis, Buttons, die Farbe des Anker-Tags, Call-to-Action-Formen im Voraus dokumentieren. Am besten w\u00e4re es, wenn Du mit einem Datenflussdiagramm weiterarbeiten k\u00f6nntest. Dann k\u00f6nntest Du alle Abweichungen verfolgen und schnell sie beheben, bevor sie zu einem ernsthaften Problem werden.<\/p>\n Als n\u00e4chstes 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\u00e4hlen. Ein Moodboard konnte in dieser Phase n\u00fctzlich sein, und Du k\u00f6nntest Photoshop zu Deinen Gunsten verwenden, da die notwendigen Elemente in einem Moodboard, wie Textur, Farbenpalette, Buttonstil und Typografie mit Photoshop gestaltet werden k\u00f6nnen.<\/p>\n 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\u00fcrde 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\u00fchsam wird. Sobald der Prototyp fertig ist, muss der Designer anfangen, die Mock-Inhalte hinzuzuf\u00fcgen. Die Prototyp-Datei ist das Markup mit HTML-Tags. Das Hinzuf\u00fcgen von Mock-Inhalten wird dem Designer helfen besser zu visualisieren, wie sich die Inhalte auf dem Front-End aussehen.<\/p>\n Jeder Kunde m\u00f6chte eine komplette Website kaufen, nicht die Linien oder die Hintergr\u00fcnde davon. Und wenn das Design im Browser entworfen wurde, dann kann es sicherlich viel mehr Vorteile dem Kunden bieten. Au\u00dferdem, wenn es darum geht, eine Website f\u00fcr alle Arten von Ger\u00e4ten zu erstellen, ist die Kodierung im Browser definitiv etwas, was nicht vermieden werden kann.<\/p>\n Unter dem Strich l\u00e4sst es sich also sagen, dass die Kodierung im Browser die Zukunft des Designs darstellt, und Photoshop h\u00f6hstwahscheinlich bald nur in Grafikdesigner-Kreisen relevant sein wird.<\/p>\nDie Vorteile von Gestaltung im Browser<\/h3>\n
Wie Du im Browser gestaltest<\/h3>\n
Alles f\u00fcr den Kundenkomfort<\/h3>\n