10 Dinge, die Druckdesigner über Bildschirmdesign wissen müssen
Der Übergang vom Design für den Druck zum Design für den Bildschirm und insbesondere für das Web kann ein frustrierender Prozess sein. Es fühlt sich an, als ob alles einfach und unkompliziert sein sollte. Sie verfügen über Designfähigkeiten, daher sollten diese nur auf ähnliche Weise übersetzt werden ... richtig?
Während die grundlegenden Aspekte eines guten Designs sehr zutreffen - Größe, Farbe , Position, Leerraum, typografische Best Practice und so weiter - es gibt viele einzigartige Eigenschaften, die den Übergang vom Druck zum Bildschirm zu einer Herausforderung machen.
Hier fassen wir die Hauptunterschiede zwischen dem Entwerfen für den Druck und dem Entwerfen für den Bildschirm in sieben allgemeine Prinzipien zusammen. Wenn Sie sich mit diesen beschäftigen, sind Sie bald auf dem Weg zur Pixel-Perfektion ...
01. Der Platz ist unbegrenzt
Wenn Sie für den Druck entwerfen, sind Sie durch den verfügbaren Seitenbereich begrenzt. Dies bedeutet in der Regel, dass Sie alle Ihre Schlüsselbotschaften in einem einzigen Spread kommunizieren müssen, was zu einem stärkeren Marketing führt, das nicht immer subtil und raffiniert ist.
Im Web können Sie das Medium verwenden, um Ihre Marketingbotschaften auf praktisch unbegrenztem Raum zu testen und so Ihren Ansatz zu verfeinern. Gehen Sie nicht automatisch davon aus, dass dieselbe Kopie auf dem Bildschirm genauso gut funktioniert wie im Druck. Die Aufmerksamkeitsspanne im Web ist kürzer, aber Sie können Ihre Kopie verteilen, um sie verfeinert und subtiler zu gestalten. Sie können auch die Analyse nutzen, um den Weg Ihres Lesers zu ermitteln und Ihre Kopie anzupassen und zu verbessern.
02. Sie können Rich Media verwenden
Einer der größten Unterschiede zwischen dem Entwerfen für den Druck und dem Web besteht darin, dass Sie sich im Druck auf Wörter und Bilder beschränken, während Sie im Web die Möglichkeit haben, verschiedene Medien zu verwenden, um eine Geschichte zu erzählen, den Leser einzubeziehen und fordern ihre Aufmerksamkeit. Durch den geschickten Einsatz von Video, Audio und Benutzerinteraktion können Sie eine Beziehung zu Ihrem Besucher (Leser) aufbauen, sodass dieser mehr Zeit auf Ihrer Website verbringt, mehr Geld in Ihrem Online-Shop ausgibt oder Ihre Inhalte mehr Personen empfiehlt.
Das heißt nicht, dass Sie automatisch alle Arten von Medien, die Sie in die Hände bekommen können, auf eine Seite schuhhupen sollten. Inhalte jeglicher Art sollten einen Mehrwert für die Benutzererfahrung bieten und ihnen eine Erfahrung oder Inhalte bieten, die sie anderswo nicht erhalten können. Wenn Sie die richtige Balance erreichen, sind Sie nicht nur über das hinausgegangen, was Sie im Druck hätten erreichen können, sondern Sie werden auch treue Besucher entwickeln.
03. Zusammenarbeit ist der Schlüssel
Während Druckdesigner in der Regel eine ziemlich einsame Gruppe von Menschen sind, gibt es im Web viel mehr Zusammenarbeit - und das aus gutem Grund: Es ist schwierig, über alle erforderlichen Fähigkeiten zu verfügen, um ein vollständiges Web-Erlebnis zu schaffen. Sie sind vielleicht gut darin, ansprechende Layouts zu entwerfen und enge Kopien zu schreiben, aber ohne die Fähigkeit, PHP und JavaScript zu codieren, ist Ihre Website statisch und unintelligent, oder Sie können HTML mit den besten von ihnen codieren, aber Sie sind es nicht So heiß auf das Entwerfen von Steuerelementen für die Benutzeroberfläche.
Die meisten erfolgreichen Websites kombinieren eine Reihe verschiedener Technologien, die unterschiedliche Fähigkeiten erfordern. Haben Sie keine Angst davor, Experten um Hilfe zu bitten. Es kann eine lohnende Investition sein und ist Teil dessen, was das Web zu einer so lebendigen Community macht.
04. Eine Größe passt nicht für alle
Wenn Sie für den Druck entwerfen, kann alles zuverlässig in Zoll, Picas und Punkten gemessen werden. Wenn Sie für Bildschirme entwerfen, ist die grundlegende Maßeinheit ein Pixel. Ein Pixel kann jedoch zwischen zwei verschiedenen Bildschirmen eine unterschiedliche Größe haben. Mit dieser Idee haben viele Druckdesigner beim Übergang zu kämpfen.
Gehen Sie nicht davon aus, dass alle anderen dies tun, da Sie 300px-Rendering als 1 Zoll auf Ihrem Retina-MacBook sehen. Der gebräuchlichste Ansatz ist die Annahme, dass 72 Pixel einen Zoll einnehmen, aber das ist völlig nominell - auf dem Bildschirm ist alles flexibel.
05. Ihre Entwürfe sind nicht in Stein gemeißelt
Um den vorherigen Punkt zu erweitern, besteht eine der größten Herausforderungen darin, die Idee loszulassen, dass Ihr Design in Stein gemeißelt und in seinem Erscheinungsbild fixiert ist. Im Web rendern verschiedene Browser Ihre Inhalte leicht unterschiedlich. Die Texteinstellungen können von Ihren Besuchern überschrieben werden. Abhängig von der verwendeten Bildschirm- und Fenstergröße wird Ihre Website möglicherweise völlig anders gerendert (es wird jetzt als bewährte Methode akzeptiert, dass sie auf die Bildschirm- / Fenstergröße reagiert).
Verbringen Sie keine Zeit damit, eine pixelgenaue Übereinstimmung zwischen Browsern zu erzielen - Sie werden es nie erreichen, und eine der Stärken des Designs besteht darin, dass es sich um ein flüssiges Medium handelt.
06. User Experience ist alles
Im Gegensatz zum Druck ist das Web ein interaktives Medium, das einem Benutzer sofortiges Feedback geben kann. Das Entwerfen einer Website ähnelt daher eher dem Erstellen einer Benutzererfahrung als dem Entwerfen einer Broschüre. Sie müssen überlegen, wie sich der Leser in Ihrem Inhalt bewegen und von Seite zu Seite navigieren kann.
Denken Sie daran, dass eine Website häufig auch als Markenbotschafter fungiert und daher alle Werte des Unternehmens vermitteln muss, das sie repräsentiert. Konzentrieren Sie sich auf die Benutzerfreundlichkeit und machen Sie interaktive Bereiche (wie Linknavigationsleisten, Bildergalerien und Videos) einfach zu erkennen und zu verwenden.
07. Die 'Falte' ist irrelevant
Im Druck wird Ihnen immer beigebracht, so zu gestalten, dass der wichtigste Inhalt 'über der Falte' liegt - der Teil einer Zeitung, der angezeigt wird, wenn das Papier in den Stapel gefaltet wurde.
Im Web gibt es immer noch eine Falte. den Bereich außerhalb des unmittelbar sichtbaren Teils des Bildschirms, den Sie zum Anzeigen scrollen müssen; Leider können Sie als Webdesigner nicht wissen, wo sich diese Falte auf dem Bildschirm eines bestimmten Browsers befindet.
Das Problem ist, dass es auf den Geräten so viele verschiedene Bildschirmauflösungen gibt und Benutzer die Größe ihrer Browserfenster ändern können, sodass sich das, was Sie als Falz auf Ihrem Computer sehen, mit ziemlicher Sicherheit erheblich von dem unterscheidet, was alle anderen sehen.
Anstatt sich Gedanken darüber zu machen, wo sich die Falte befindet, sollten Sie sich darauf verlassen, dass Webbenutzer das Scrollen beherrschen und mit dem Konzept recht vertraut sind. Machen Sie wie Fiasko-Design und konzentrieren Sie sich stattdessen darauf, überzeugende, attraktive und ansprechende Inhalte zu entwerfen, die Ihre Besucher dazu ermutigen, einen Bildlauf durchzuführen, um mehr zu sehen!
08. Layouts sind flüssig, nicht fixiert
Für Druckdesigner ist es am schwierigsten zu lernen, dass Webseiten in ihrem Layout flüssig sein können. Anstatt Inhaltsbereiche mit fester Größe vorzuschreiben, können im Web einzelne Textfelder, Bilder und Spalten entsprechend der Breite des Browserfensters (des Ansichtsfensters) dimensioniert werden. Dieser Unterschied bedeutet, dass Sie die Idee loslassen müssen, dass Sie vollständig steuern können, wie Ihr Design gerendert wird, aber es hat auch Vorteile.
09. Die Grundlagen zu kennen hilft enorm
Selbst wenn Sie jemanden haben, der den Code schreibt, hilft es zu verstehen, wie die Bausteine des Webs funktionieren, um viele der Frustrationen zu überwinden, die mit dem Entwerfen einer Website verbunden sind.
Wenn Sie sich die Zeit nehmen, HTML (den Grundbaustein des Webs) und CSS (die Methode, mit der wir ästhetische Attribute auf Inhalte anwenden) zu lernen, können Sie sowohl die Einschränkungen als auch die Möglichkeiten des Mediums verstehen. Unser Artikel Webdesign-Training: Die besten Online-Ressourcen sollte Ihnen helfen, die geeignete Lernressource zu finden, um loszulegen.
10. Web-Typografie ist fummelig
Bis vor kurzem war das Web auf eine sehr kleine Auswahl von 'web-sicheren' Schriftarten beschränkt, was zu einer starken Homogenisierung der Web-Typografie führte. Zum Glück gibt es immer mehr Web-Schriftarten verfügbar durch Dienste wie Google Web Fonts und TypeKit .
Diese und ähnliche Dienste wirken sich revolutionär auf die Typografie aus, die Sie im Internet sehen, aber es gibt noch einige Fallstricke, die Sie beachten müssen. Der Grad der Kontrolle über Ihren Typ ist auf dem Bildschirm weitaus eingeschränkter als im Druck. Sie können beispielsweise weiterhin Ihre führende Position festlegen, haben jedoch keinerlei Kontrolle über das Kerning. Wenn Sie Zierglyphen verwenden möchten, müssen Sie sich mit Code beschmutzen, um Buchstabenformen oder spezielle Teilmengen-Schriftarten manuell zu ersetzen.
Weiterführende Literatur
Das Web ist voll von fantastischen Ressourcen für Designer, die alles Mögliche abdecken. Wir haben einige unserer Lieblingswebsites ausgewählt, die Ihnen den Einstieg in die Gestaltung von Bildschirmen erleichtern.
.net Magazin
Der Schwestertitel von CreativeBloq, das .net-Magazin, deckt alle Design- und Entwicklungsoptionen für Websites ab. Neben fantastischen Tutorials bietet das Magazin eine breite Palette an Kommentaren und Analysen, Neuigkeiten und Funktionen aus der Branche.
Smashing Magazine
Das Smashing Magazine bietet eine Fülle von Artikeln und Tutorials zum Thema Webdesign und -entwicklung, angefangen von den Grundbausteinen bis hin zur erweiterten JavaScript-Codierung.
Eine Liste auseinander
Dieses Online-Webmagazin gilt seit langem als Vorreiter für die Definition und Übernahme von Best Practices bei der Gestaltung von Bildschirmen. Eine breite Palette von Artikeln, einschließlich umfangreicher Archive, deckt alles ab, von der Verwendung von Schriftarten bis hin zu Layout-Tipps und Tricks.
Wörter :: Sam Hampton-Smith
So was? Vergessen Sie nicht auszuchecken:
- Das beste kostenlos Web-Schriftarten für Designer
- Photoshop-Tipps , Tricks und Korrekturen, die Sie heute ausprobieren sollten
Wenn Sie weitere Tipps zum Entwerfen für den Bildschirm und nicht zum Drucken haben, verwenden Sie das Kommentarfeld unten ...
