Share
Das Web hat in den letzten Jahren einige gravierende Veränderungen durchlaufen, und die Art und Weise, wie das Web gestaltet wird, ändert sich mit ihm. Photoshop ist zwar für viele Webdesigner immer noch das "Einstiegstool", für einige ist Photoshop jedoch kein König mehr. In diesem Artikel wird Ian Yates, Herausgeber von Webdesigntuts +, erklären, wie Photoshop in der Vergangenheit verwendet wurde, wie es in der Zukunft verwendet werden kann und warum.
Technisch gesehen ist Photoshop eine Anwendung zum Manipulieren von Bildern (verzeihen Sie mir das Offensichtliche dort), aber es enthält auch Werkzeuge zum Erstellen von Grafiken von Grund auf. Form, Vektor, Typ, Füllungen und Effekte - all dies (und mehr) eignen sich sehr gut zum Erstellen von grafischen Layouts.
Vor nicht allzu langer Zeit waren Web-Browser nicht in der Lage, diese Art von Effekten direkt zu erzeugen, sie konnten jedoch Bitmap-Bilder perfekt darstellen. Um das Grafikdesign in einem Browser zu erkunden, war es nur logisch, nach Photoshop zu greifen, Ihre Visuals zu erstellen, sie als Bilder zu speichern und innerhalb einer Webseite zu verwenden.
Farbverläufe, Schatten, Muster, Winkel; Mit Photoshop-Werkzeugen einfach zu erstellen - nicht zu einfach mit etwas anderem.
Das Bauen für das Web war auch relativ komplex (weit weniger stromlinienförmig als heute), sodass das Layout eines Layouts in Photoshop immer einfacher und schneller sein würde als mit Dreamweaver zu kämpfen. Warum sollten Sie nicht in einer Grafikanwendung entwerfen, lassen Sie sich vom Kunden die Genehmigung einholen, dann eigentlich für das Web bauen? Die heutigen Designer sind mit Photoshop groß geworden, weil sie die schnellste Möglichkeit bot, ein Hi-Fidelity-Designkonzept zu visualisieren.
kuhboom.com: Bei dicht strukturierten Webdesigns greifen Sie zum Slice-Tool. Damals, als das Web ein aufstrebendes Medium war, gab es keine "Webagenturen", daher fiel die Aufgabe, es zu gestalten, an Druckdesigner. Diese Jungs haben das getan, was logisch ist. Sie nutzten ihre Erfahrung im Digitaldruckdesign, ihre Werte, Techniken, Prozesse und Werkzeuge und wendeten sie dann auf diese schöne neue Welt an. Sie haben das Druckdesign effektiv auf den Bildschirm portiert, sodass der Workflow bereits vorhanden war:
Alles, was geändert werden musste, war die endgültige Ausgabe. Photoshop war Zeuge der Änderungen und machte sich auf den Weg, um sich als bester Freund des Grafikdesigners weiter zu etablieren.
Mal sind sie veränderbar (wie Bob Dylan sagte). Das Web ist heutzutage ein anderer Ort, und die Rolle von Photoshop bei der Gestaltung dieses Web ändert sich ebenfalls. Warum?
Ein großer Teil des Problems liegt in technologischen Fortschritten, die in den letzten Jahren zu großen Veränderungen im Webdesign geführt haben. Das Internet wächst von einer Bibliothek statischer Dokumente zu einem interaktiven Pool von Diensten und Anwendungen. Netzbetreiber haben ihre Finger in fast jeden Winkel der Welt gestreckt, Bandbreite und Geschwindigkeit sind auf Science-Fiction-ähnliche Ebenen gestiegen. Internetfähige Geräte wie Smartphones, Tablets oder sogar Uhren werden kostengünstig und schnell hergestellt. All dies hat die Art und Weise, wie wir das Internet nutzen, revolutioniert - und es hat unsere Wahrnehmung, wie wir dafür gestalten sollten, drastisch verändert.
Druckdesigner beginnen mit Einschränkungen (den festen Abmessungen einer Seite) und entwerfen dann in ihnen. Beim ersten Entwurf für das Web war dies auch ein logischer Ausgangspunkt. Legen Sie eine feste Leinwand fest und arbeiten Sie nach innen. Um herauszufinden, was diese festen Dimensionen sein sollten, mussten die Designer Annahmen über die Bildschirmgröße der Endbenutzer treffen. Sehr früh auf 800x600px war am häufigsten. Später waren 1024x800px die Norm. Das Arbeiten mit einem Raster von 960px war sinnvoll, da es auf die meisten Bildschirme passte (größere Bildschirme waren selten, Besitzer von kleineren Bildschirmen müssten letztendlich nur ein Upgrade durchführen) und waren durch eine Reihe von Spaltenbreiten teilbar.
Diese Annahmen waren dann falsch (zwang einen Benutzer zur Anpassung) ihr Browsen zu Ihre Design ?!) und noch mehr in diesen Tagen. Wie groß ist eine Webseite heute??
Von Brad Frost Dies ist das Web Im Mai 2010 schrieb ein Mann namens Ethan Marcotte über eine brillante Idee, die er sich ausgedacht hatte. Mit den vorhandenen Technologien und Methoden schlug er einen Ansatz vor, "Responsive Web Design", bei dem flüssige Layouts (nicht fixiert), flexible Bilder (die mit dem Layout zunehmen und schrumpfen) und CSS-Medienabfragen (mit denen sich Layouts je nach Bildschirmgröße und -größe ändern können) verwendet werden andere Faktoren).
Mit diesen Ideen hat sich das Web irreversibel verändert.
Dank der Konzepte von Ethan haben Webdesigner erkannt, dass sie aus dem Internet denken sollten Inhalt nach außen, nicht der Seitengrenzen nach innen (Allerdings ist zu beachten, dass dieser Ansatz nicht zwingend ist). Wir wissen nicht, wie groß eine Webseite ist, daher müssen wir unseren Inhalt so gestalten, dass er in die Grenzen passt, mit denen er zu tun hat. Stellen Sie sich Webinhalte als flüssig vor. in alle Arten von Gefäßen gegossen werden können.
Darin liegt ein Problem für Photoshop. Photoshop arbeitet grundsätzlich mit festen Grenzen. Formen, Typ und Objekte innerhalb des Layouts sind festgelegt, Webseiten dagegen nicht. Das Erstellen eines Comps zur Präsentation an einen Kunden war in Photoshop früher schnell zu bewerkstelligen, aber wie können Sie ein flüssiges Layout effektiv als statischen Snapshot darstellen?
Das nächste Web, wie es von mediaqueri.es präsentiert wird Typografie ist ein weiteres hervorragendes Beispiel für Druckdesigner, die versuchen, den Endbenutzern Einschränkungen aufzuerlegen. Mit dem Browser jedes Benutzers können Sie die Standardtypgröße festlegen. Schließlich bevorzugen manche Leute eine kleinere Schrift, während andere das Lesen mit größeren Schriftzeichen bevorzugen. Standardmäßig setzen Browser den Typ normalerweise auf 16px. Wenn ein Designer nichts anderes angibt oder ein Benutzer den Standardwert ändert, werden große Textkopien verwendet.
Druckdesigner haben jedoch große Schwierigkeiten, diese Kontrolle aufzugeben. "Wie können Sie den Benutzer die Größe des Typs definieren lassen ?! Haben Sie eine Vorstellung davon, was sich auf den Rest des Layouts auswirkt ?!"
Das Festlegen der Schriftgröße in einem Webdesign (durch CSS) wird einen großen Beitrag dazu leisten, Unvorhersehbares zu verhindern, aber es ist kaum benutzerfreundlich. Heutzutage gilt es als beste Methode, die Seitenelemente und die Typografie mithilfe von zu formatieren ems anstatt Pixel; relative Maßeinheiten, die auf der Standardschriftgröße basieren. Wenn also ein Browser eine andere Standardschriftgröße hat, kann das gesamte Design darauf reagieren.
Diese Flexibilität unterstreicht wiederum die Einschränkungen beim Entwerfen statischer Comps in Photoshop.
Browser entwickeln sich heutzutage sehr schnell und für viele Effekte im Web werden keine Bilder mehr benötigt. CSS ist in der Lage, genaue Farbverläufe, Kurven, verzerrte Objekte, Schatten und Alphatransparenz zu erzeugen (die Liste wird fortgesetzt), und dies ist angesichts des Beginns der Retina-Bildschirme genauso gut. Retina-Displays (oder genauer: Bildschirme mit hoher Pixeldichte) haben für Webdesigner einen echten Schlüssel in die Arbeitswelt gebracht. Retina-Bildschirme haben doppelt so viele Pixel wie normale Bildschirme, sodass sie den Luxus haben, alles superscharf zu machen. Alles, was auf Pixeln basiert, wird jedoch einfach doppelt so weit gesprengt, doppelt so hoch, was zu einer vergleichsweise geringeren Qualität führt.
Damit Websites ihre Schärfe beibehalten können, müssen sich Designer so weit wie möglich auf das verlassen, was der Browser selbst rendern kann. Der jüngste Trend zu "Flat Design" ist (teilweise) eine Reaktion auf dieses rein CSS-basierte Webdesign.
All dies nimmt einen riesigen Teil dessen, was Photoshop macht (Bitmaps erzeugt), aus der Gleichung heraus.
Flat-UI-Kit von Designmodo Wie bereits erwähnt, ist das Web dank der Verbreitung mobiler Geräte wirklich global geworden. Es zwingt uns zu erkennen, dass wir nicht wissen, unter welchen Umständen auf unsere Inhalte zugegriffen wird. Wir wissen nicht, ob unser Endbenutzer mit einem Kindle auf der Couch sitzt, mit einem iPhone paragliding ist oder mit einem MacBook Pro durch die Wüste Gobi läuft. Wir wissen nicht, wie groß der Bildschirm ist, wie sein Prozessor ist, und wir können auch nicht davon ausgehen, wie schnell die Verbindung ist.
Wir beginnen zu erkennen, dass Leistung ein grundlegender Bestandteil des Designs für das Web ist. Wieder spielen Bilder dabei eine Rolle. Jedes einzelne Asset (sei es ein Bild, ein Skript, ein Dokument oder was auch immer), das von einem Webserver abgerufen wird, ist teuer.
Anstatt Dateien wie Bilder und Schriftarten in einem Ordner namens „Assets“ zu speichern, benenne ich den Ordner in „Verbindlichkeiten“ um..
- Jeremy Keith (@adactio) 18. Februar 2013
Sie sollten nicht nur darauf optimiert werden, so klein wie möglich zu sein, sondern auch so wenige wie möglich. Die Anzahl der verfügbaren Browser ist begrenzt gleichzeitig Download, oft nur zwei zu einem bestimmten Zeitpunkt. Wenn Ihre Webseite Hunderte einzelner Bilder enthält, wird dies zu einem Engpass führen, der dem Endbenutzer letztendlich ein negatives Erlebnis vermittelt.
Dies kann durch die Kombination von Image-Dateien zu einzelnen Sprites verbessert werden, aber (wieder) Retina-Bildschirme erzwingen einen Backup-Plan.
Stattdessen werden Effekte besser mit CSS erzielt, Icons können über Webfonts eingebettet werden, Logos können als skalierbare Vektorgrafiken implementiert werden, die das Ende des Slice-Tools ausmachen.
Damals, als der Workflow des Webdesigners tatsächlich derselbe war wie der Druck mit dem Internet am Ende, war das Entwerfen von Layouts in Photoshop ein wesentlicher Bestandteil des Prozesses:
Heutzutage, wenn das Endergebnis weniger auf Assets basiert, die in einer Grafikanwendung erstellt werden, bedeutet das Design eines gesamten Layouts in Photoshop effektiv eine Verdoppelung Ihrer Anstrengungen. Bauen Sie es einmal auf, um eine Vorstellung davon zu bekommen, wie es aussehen wird, und bauen Sie es dann wirklich auf. Dann werfen Sie die PSD weg, weil es für niemanden von Nutzen ist.
Adobe widersetzte sich entweder dem Wandel oder versuchte einfach nur zu sein, als es einige Webdesign-Funktionen in CS6 einführte. Im CSSHat-ähnlichen CSS-Ausgabefenster können Sie Code aus Ihren visuell erstellten Seitenelementen abrufen. Sie haben es auch ermöglicht, eine Hex-Farbe (vom Browser kopiert) mit Hashtag (z. B. #ffffff) in den Farbwähler von Photoshop einzufügen, ohne dass ein Fehler ausgegeben wird.
Absatzstile (ein bisschen wie in InDesign) wurden eingeführt, um die Typografie besser zu kontrollieren. Lorem Ipsum hat seinen Standard als Standard gefunden, und Sie können sogar gängige Geräteabmessungen als Dokumentvorgaben auswählen!
Aber wir verweigern uns hier - in der Ecke des Zimmers steht ein großer blauer Elefant.
Was wir uns hier wirklich anschauen, ist nicht eine Anwendung, die nicht in das Webdesign passt, sondern ein Workflow, der nicht mehr angemessen ist. Tatsächlich gab es bereits vor dem Web alles flüssig und matschig, dass der Photoshop-Web-Design-Prozess, wie wir ihn beschrieben haben, grundlegende Mängel aufweist. Es bestand die Tendenz, pixelgenaue Renderings von Webseiten zu erstellen, bevor das Bauen überhaupt beginnen konnte. Und wegen der Obsession, in Photoshop alles zu 100% perfekt zu machen, gäbe es einen ähnlichen Fanatismus, identische Ergebnisse in allen Browsern zu erzielen. Wir haben lange gebraucht, um zu erkennen, dass Webseiten nicht in allen Browsern identisch aussehen müssen!
Ein ernstes Problem mit dem Streben nach Perfektion in Photoshop entsteht, wenn der Kunde beteiligt ist. Dieser Workflow macht es allzu leicht, sich in einer unendlichen Schleife von Klienten zu befinden, die Vorschläge machen, die auf das Pixel drängen, und zwangsläufig das große Ganze aus den Augen verlieren.
Was benötigt wird, ist ein modularer Ansatz für das Webdesign, und Photoshop kann dabei absolut eine Rolle spielen. Betrachten Sie zuerst die Planungsphase. Sammeln von Informationen und Inhalten, Skizzieren von Beziehungen zwischen Bereichen der gesamten Website - ein entscheidender Teil dieses modularen Prozesses, der jedoch am besten in Photoshop ausgeführt werden kann.
Wireframing führt den Prozess weiter; Anlegen von elementaren Schnittstellenelementen, Herstellen von visuellen Beziehungen, Hierarchie und grundlegender Interaktion. Auch dies ist keine Aufgabe, die Photoshop sehr gut ausführt. Stattdessen machen sie Platz für Anwendungen wie Omnigraffle und Balsamiq, sogar Illustrator (und es gibt noch viele mehr)..
Photoshop bietet sich viel besser für Ästhetik an. Layouts können nicht flüssig beschrieben werden, sie können jedoch Farben, Texturen, individuelle Elementstile, Typografie, Atmosphäre und Stimmung erkunden. Style Tiles ist ein von Samantha Warren vorgeschlagenes Konzept. Es handelt sich im Wesentlichen um Photoshop-Moodboards, unterstreicht jedoch eine Möglichkeit, die ästhetische Phase zu isolieren und dem Kunden zu präsentieren.
Das nächste Modul in diesem Workflow ist das Prototyping. Erstellen grundlegender, aber funktionaler Layouts für den Browser. Und nein, das ist auch keine Tasse von Photoshop. In der Tat arbeitet Adobe eifrig an einer alternativen Produktlinie, die hier helfen soll. Ihre Edge-Tools zielen darauf ab, eine vertraute Canvas-Oberfläche zu bieten, die für den Browser flüssig ausgegeben wird. Ideal für Rapid Prototyping, aber immer noch sehr in Arbeit.
Jede dieser modularen Stufen nimmt einen Aspekt des Designprozesses in Anspruch, isoliert ihn und bindet den Kunden stark ein. Dies gibt ihnen die Möglichkeit, sich auf jeder Stufe abzumelden, ohne die anderen zu beeinflussen.
Beachten Sie, dass dies ein empfohlener Arbeitsablauf ist. In Bezug auf das Design ist nichts in Stein gemeißelt, und es gibt oft mehr als diese allgemeinen Schritte. Was mich zu meinem Schlusspunkt führt.
Jeder Designprozess ist sehr persönlich und was für andere funktioniert, muss nicht unbedingt für Sie funktionieren. Es gibt viele Leute, die ein Ende des Webdesigns in Photoshop fordern und stattdessen für einen browserbasierten Workflow werben. Tatsache ist, wenn Photoshop für Sie arbeitet, verwenden Sie es! Am Ende des Tages sind wir Designer. Wenn wir hunderte von Mannstunden damit verbringen wollen, Pixel zu schieben und unser Dribbble-Portfolio auf den neuesten Stand zu bringen, lassen Sie uns das genießen!
Möchten Sie mehr über Photoshop und seine Beziehung zum Webdesign erfahren? Schauen Sie sich die Artikel unten an.
Accentsconagua