In den letzten Jahren habe ich festgestellt, dass es trotz der vielen modernen Webdesign-Tools immer noch Leute gibt, die Photoshop für ein gutes Werkzeug für Webdesign halten. Verständlicherweise gibt es unter Menschen, die nicht in der Branche tätig sind, diejenigen, die denken, dass die Gestaltung einer Website auf die Erstellung statischer Grafiken hinausläuft, die später mit Hilfe eines Programmierers interaktiv werden. Natürlich ist das möglich, denn so wurden Websites früher erstellt. Heutzutage werden Websites auf eine völlig andere Art und Weise erstellt, vor allem aufgrund der Reaktionsfähigkeit und vieler anderer neuer Standards.
Photoshop ist immer noch ein großartiges Werkzeug für die Fotobearbeitung oder Fotomontage. Es ist ein leistungsstarkes Grafikdesign-Tool, aber es wird den Anforderungen moderner Webtechnologien nicht ganz gerecht. In diesem Artikel werde ich versuchen, 10 Gründe zu nennen, warum Photoshop als Webdesign-Werkzeug tot ist, und ich werde einige Tools vorstellen, die es wert sind, in Betracht gezogen zu werden.
Dies ist nicht nur ein veralteter Ansatz, sondern eine sehr schlechte Praxis
Photoshop war die erste Wahl für jeden Webdesigner - nun, es war.... im Jahr 2003. Damals war alles in Ordnung, weil man sofort sehen konnte, wie eine Website aussehen würde. Alles, was man tun musste, war, die Grafiken in Stücke zu schneiden und die Bilder mit HTML und CSS zusammenzukleben. Responsivität gab es praktisch nicht; damals wurden sogenannte mobile Versionen erstellt, d. h. separate Websites für mobile Geräte, so dass Websites in der Regel für eine einzige Bildschirmauflösung erstellt wurden.
Der Anteil der mobilen Geräte am Webverkehr nimmt zu, so dass die Reaktionsfähigkeit eine offensichtliche Richtung ist. Nicht nur Webanwendungen erfordern ein responsives Design, sondern auch mobile Anwendungen oder Anwendungen für Fernsehgeräte und andere Geräte. Die Anzahl der verschiedenen Geräte und ihre unterschiedlichen Größen und Auflösungen bedeuten, dass ein Bild in Photoshop nicht ausreicht, um von responsivem Interface Design zu sprechen.
Es gibt viele Anwendungen auf dem Markt für Mock-ups und Prototyping von responsiven Anwendungen, wie z. B. Figma, Adobe XD oder Sketch. Sogar Adobe hat ein Programm im Angebot, das Photoshop als Interface-Design-Tool ausschließt.
Warum nicht Photoshop für Webdesign verwenden?
1. Es gibt bessere Werkzeuge als Photoshop
Photoshop wurde nicht als Werkzeug für das Webdesign, sondern für die Fotobearbeitung entwickelt. Natürlich wurde es früher genau für diesen Zweck verwendet, aber es ist erwähnenswert, dass dies zu einer Zeit war, als die Reaktionsfähigkeit nicht so wichtig war wie heute.
Das Vorhandensein moderner Werkzeuge für die Gestaltung von grafischen Oberflächen, ihre Benutzerfreundlichkeit und Kompatibilität mit Webstandards ist meiner Meinung nach ein ausreichendes Argument für seine Verwendung. Daher werden wir Photoshop im Hinblick auf seine Nachteile mit den folgenden Werkzeugen vergleichen:
- Figma
- Adobe XD
- Sketch
2. Photoshop "spricht nicht die Sprache des Internets".
Wenn wir eine Grafik in Photoshop vorbereiten, erhalten wir ein statisches Bild für eine bestimmte Auflösung. Wir können so etwas auf zwei Arten angehen. Die erste ist natürlich das Ausschneiden und Erstellen einer Website, die nicht responsiv ist. Die zweite Möglichkeit ist, eine Website zu erstellen, die korrekt ist. Dazu müssen wir mühsam verschiedene Werte aus der PSD-Datei extrahieren (die nicht unbedingt direkt verwendbar sind) und das Design mit HTML und CSS neu erstellen und dann versuchen, eine Reaktionsfähigkeit zu erreichen, die aus dem Design selbst nicht ersichtlich ist.
Eine korrekt erstellte Website ist eine Sammlung von Informationen, die ihr Aussehen beschreiben. Die Webseiten werden von den Browsern auf der Grundlage dieser Informationen gerendert und an das jeweilige Gerät angepasst. Um eine responsive Website zu erstellen, müssen Sie ein Skelett (DOM) mit HTML erstellen und sein äußeres Erscheinungsbild mit CSS beschreiben. Jedes Element hat Informationen über seine Form, Farbe und Position. Die Eigenschaften, mit denen ein Element beschrieben werden kann, sind Hunderte. Alle Filter, Masken, Schattierungen, Farbverläufe und vieles mehr müssen mit CSS beschrieben werden.
Auf der Grundlage dieser Informationen rendert der Browser die Webseite vektoriell, so dass die Seite von hoher Qualität ist und schneller lädt als Elemente, die als Rastergrafik erstellt wurden.
3. Schwierig, Assets aus Photoshop zu exportieren
Um ein Bild, ein Symbol oder ein anderes grafisches Element aus einer PSD-Datei zu extrahieren, sind viele Klicks und Einstellungen in Dialogfeldern erforderlich. Photoshop ist für die Bildbearbeitung konzipiert, so dass ein einzelnes Bild das Ergebnis einer einzelnen PSD-Datei ist. Sie können zwar einzelne Ebenen daraus extrahieren, aber das ist nicht so einfach wie in Programmen zur Oberflächengestaltung wie Figma, wo es nur zwei Klicks braucht, um ein fertiges Element zu exportieren.
Zusätzlich zu den grafischen Elementen erlauben Programme für das Oberflächendesign den Export des CSS-Codes einzelner Elemente, so dass gut gestaltete Elemente automatisch responsive sind.
4. Keine Prototyping-Funktionen in Photoshop
Photoshop verfügt von Haus aus über keine Werkzeuge zur Erstellung eines interaktiven Prototyps, noch bevor der Entwickler mit der Entwicklung begonnen hat. Dank der Prototyping-Funktionen können Designer nicht nur das Aussehen einer Website entwerfen, sondern auch, wie sie funktioniert. Bei der Erstellung von Webanwendungen kommt es nicht nur auf die Reaktionsfähigkeit an, sondern auch auf das Reaktionsvermögen. Reaktionsfähigkeit bedeutet, dass der Benutzer bei der Interaktion mit der Schnittstelle sofort die Auswirkungen seiner Aktion sieht und eine völlig andere Erfahrung macht, als wenn die Seite bei jedem Klick neu geladen werden müsste.
Die heutigen Technologien ermöglichen es uns, Schnittstellen zu erstellen, die asynchron Informationen mit dem Server austauschen, so dass beim Anklicken einer Schaltfläche nicht gewartet werden muss, bis die Seite neu geladen ist. Wenn eine Aktion ausgeführt wird, ändert sich der Inhalt auf dem Bildschirm, nicht die gesamte Seite.
5. Schlechte Vektorverwaltung in Photoshop
Vektordesign ist die wichtigste Methode zur Erstellung responsiver Websites. Wer schon einmal mit Programmen wie Adobe Illustrator gearbeitet hat, weiß, wie kontraintuitiv die Vektorwerkzeuge in Photoshop sind. Der Benutzer hat nur sehr begrenzte Möglichkeiten, wenn es darum geht, was mit Vektorelementen in einem Projekt in Photoshop gemacht werden kann.
Alle Anwendungen, die für das Design von grafischen Oberflächen entwickelt wurden, basieren auf Vektorgrafiken, was bedeutet, dass das Ergebnis der Arbeit reaktionsschnell und von hoher Qualität sein muss.
6. Ein in Photoshop erstelltes Design ist nicht responsiv
Wenn man von responsivem Design spricht, muss das Design auf Änderungen der Bildschirmauflösung reagieren und sich an diese anpassen. In Software für das Interfacedesign gibt es verschiedene Werkzeuge, mit denen wir Layouts erstellen können, in denen sich die Elemente automatisch an den Bereich anpassen, in dem sie sich befinden. Durch Manipulation der Abmessungen dieses Bereichs können wir beobachten, wie sich einzelne Elemente anordnen oder ihre Größe verändern.
Diese Techniken entsprechen denen, die bei der Erstellung von Webseiten verwendet werden, wie Flex oder Grid. Dies ist ein Beispiel dafür, wie gut diese Werkzeuge die Idee der Erstellung responsiver Layouts "verstehen".
7. In Photoshop gibt es keine Komponenten
Komponenten sind Elemente, die einmal erstellt und dann frei in einem Projekt verwendet werden können. Bei Bedarf können sie nach Belieben geändert werden und ihre Instanzen ändern sich ebenfalls, ohne dass alle Instanzen der Komponente im Projekt festgelegt werden müssen.
Die Idee, Komponenten zu erstellen, ist etwas, das bei der Entwicklung von Web- oder mobilen Anwendungen als selbstverständlich angesehen wird. Sie ist die Grundlage der DRY-Regel (Don't Repeat Yourself). Die Möglichkeit, Komponenten zu erstellen, wird von praktisch jedem Programm wie Figma oder Adobe XD geboten.
8. Photoshop ist langsam
Es sind nicht nur die fehlenden Komponenten, die ein Projekt in die Länge ziehen können. Photoshop wurde als Bildbearbeitungsprogramm entwickelt und verfügt daher über eine große Anzahl von Werkzeugen für diese Aufgabe. Diese Werkzeuge werden für das Webdesign meist nicht benötigt. Dies wirkt sich auf die Leistung aus, da es viel mehr Computerressourcen zum Arbeiten benötigt.
Die Webdesign-Tools haben genau so viel, wie sie für ihre Aufgabe brauchen, sind also leicht und schnell.
9. Die Arbeit mit Photoshop kostet mehr
Photoshop ist ein schweres, funktionsreiches Fotobearbeitungsprogramm, und folglich ist sein Preisschild viel höher als das von leichtgewichtigen Werkzeugen für die Gestaltung von Benutzeroberflächen.
| Werkzeug | Monatliche Kosten | Jährliche Kosten | ||
|---|---|---|---|---|
| Basis | Premium | Basis | Premium | |
| Photoshop | $31,49 | $239,88 | ||
| Figma | Gratis | $15,00 | Gratis | $144,00 -20% |
| Adobe XD | $9,99 | $119,88 | ||
| Sketch | $9,00 | $99,00 1 Monat kostenlos | ||
10. Zusammenarbeit in Photoshop ist nicht so einfach
Fast alle Programme, die für das Webdesign entwickelt wurden, ermöglichen die Zusammenarbeit in Echtzeit. Genau wie es zum Beispiel bei Google Docs der Fall ist. Das ist eine große Erleichterung, wenn mehrere Personen gleichzeitig an einem Projekt arbeiten.
Um einen in Photoshop erstellten Entwurf an eine andere Person weiterzugeben, muss man ihr die PSD-Dateien schicken, was nicht mehr so bequem ist. Vor allem, wenn die Projekte nicht an einem Ort gespeichert sind, sondern von Person zu Person weitergegeben werden.
Zusammenfassung
Adobe Photoshop ist ein hervorragendes Programm für die Fotobearbeitung, Fotomontage und die Arbeit mit Rastergrafiken. Photoshop verfügt über eine große Anzahl von Funktionen und Werkzeugen, mit denen wir unter anderem unsere Fotos verbessern oder verschiedene Arten von Bildern erstellen können. Früher wurde Photoshop für die Gestaltung von Websites, Werbematerialien und alles, was mit Grafik zu tun hat, verwendet. Heutzutage haben wir für jeden Zweck die richtigen Werkzeuge, die für einen bestimmten Zweck entwickelt wurden. So haben wir leichtgewichtige, schnelle und bequeme Werkzeuge, die perfekt zu den Anforderungen unserer Arbeit passen.
Mit dem Aufkommen von Software für grafisches Oberflächendesign und Prototyping auf dem Markt begann die Rolle von Photoshop im Zusammenhang mit dem Webdesign an Bedeutung zu verlieren. Während Photoshop vor etwa zehn Jahren noch als ideales Werkzeug für das Webdesign galt, ist es mit den Fortschritten der Webtechnologien nicht mehr für die Anforderungen der Erstellung moderner Websites geeignet, und derartige Praktiken werden inzwischen als archaisch angesehen.