Wie macht Sie eine Website nachbilden?
Der typische Workflow beginnt in Photoshop und wechselt dann zu HTML und CSS, um die ursprüngliche PSD so gut wie möglich nachzuahmen. Es gibt jedoch einen wachsenden Trend im Webdesign, den Photoshop-Schritt zu vernichten, um den ursprünglichen Comp direkt im Browser mit Ihrem bevorzugten Editor zu erstellen. Ich bin mir sicher, dass Ihr Kopf mit den Gründen, warum dieser Ansatz Ihr Design einschränken würde, summt, aber es gibt tatsächlich viel mehr, die Sie direkt im Browser tun können, als Sie denken. In diesem Artikel erhalten Sie die Werkzeuge und Tricks, die Sie benötigen, um als ersten Schritt im Entwurfsprozess brillante, funktionierende Modelle zu erstellen.
Das Argument
Meagan Fisher von 24ways.org liefert ein überzeugendes Argument für die Gestaltung im Browser. Obwohl ich ihre Verachtung für Photoshop nicht teile (ich liebe Photoshop mehr als jede andere Software auf dem Planeten), stimme ich mit einigen anderen Punkten überein. Fisher argumentiert, dass ein statisches Bild nicht wirklich das Gefühl einer Website vermittelt, wie dies bei einer Live-Seite der Fall ist. Durch das Design im Browser müssen Sie sich vor dem Design auf die Inhaltsorganisation konzentrieren, wodurch eine bessere Zugänglichkeit und eine angemessene Hierarchie der Informationen gewährleistet werden können.
Wir werden den Artikel von Fisher als Sprungbrett für unsere Tipps verwenden, wie Sie ein Profi werden können, wenn Sie fantastische In-Browser-Mockups erstellen, die beinahe einsatzbereit sind, wenn (und wenn) der Kunde Ihnen grünes Licht gibt.
Tipp 1: Starten Sie Basic und verwenden Sie ein Gitter
Wie bereits erwähnt, können Sie mit dem Einfügen und Organisieren aller nicht gestylten Inhalte ein Design erstellen, das zu Ihren Inhalten passt, und nicht umgekehrt. Durch die Verwendung eines Raster-basierten Frameworks können Sie die Entwicklungszeit drastisch reduzieren und sicherstellen, dass Ihr Layout absolut stabil ist.
Ressourcen:
Weitere Informationen zum Grid-basierten Webdesign finden Sie in unserem Artikel zu CSS-Frameworks.
Tipp 2: Holen Sie sich einen guten Editor
Wenn Sie Websites manuell codieren, ist ein professioneller Web-Editor der Eckpfeiler Ihres Workflows. Ich persönlich verwende (und liebe) Espresso von MacRabbit. Es enthält alle kleinen Funktionen, die ich möchte, wie z. B. Snippets und automatische Vervollständigung, sowie die großen Funktionen, die ich brauche, um Live-Änderungen an einer Browser-Vorschau anzeigen zu können, während ich Code eingebe. Sie sollten sich umsehen und die Anwendung finden, die Ihren Bedürfnissen am besten entspricht. Hier ist eine kurze Liste von Editoren, die Ihnen den Einstieg erleichtern:
- Aptana: Mac, Windows Linux (bei weitem meine Lieblingsoption)
- Komodo IDE: Mac, Windows, Linux
- NetBeans: Mac, Windows, Linux
- Coda: Mac (eine würdige Espresso-Alternative)
- Text Wrangler & BBEdit: Mac
Tipp 3: Einen Schatten auf ein Element setzen
Photoshop ist nicht mehr der einzige Weg, um einen anständigen Schatten im Web zu erzielen. Viele (aber nicht alle) gängigen Browser unterstützen jetzt CSS3, und mit dieser Unterstützung werden mehrere neue Funktionen für die Erstellung fortschrittlicher Designs bereitgestellt. Eine der nützlichsten Funktionen ist Box SchattenMit dieser Option können Sie bestimmten Elementen nur mit Schatten Schatten hinzufügen. Das Format von Box-Schatten ist Box-Schatten: 5px 5px 20px # 000000. Mit diesen Werten können Sie die Breite und Länge des Schattens sowie den Unschärfekreis und die Farbe anpassen.
Ressourcen:
Weitere Informationen zur Verwendung dieser Funktion finden Sie im CSS.flepstudio-Artikel zum Box-Shadow-Effekt.
Tipp 4: Text beschatten
Wenn Sie einen Text in einen Schatten setzen möchten, verwenden Sie die Text-Schatten Funktion wie in diesem Kremalicious-Tutorial gezeigt. Das Format für Text-Schatten ist Text-Schatten: 1px 1px 1px # 000. Die ersten beiden Werte bestimmen den Versatz des Schattens (x bzw. y), der dritte Wert den Unschärfekreis und der endgültige Wert ermöglicht Ihnen, die Farbe des Schattens zu ändern.
Diese Funktion kann angewendet werden, um mehr als nur Schatten zu erzeugen. Das obige Tutorial zeigt Ihnen, wie Sie es verwenden Text-Schatten um einen Buchdruckeffekt, einen Leuchteffekt und sogar einen feurigen Texteffekt zu erzeugen.
Tipp 5: Ecken runden
Abgerundete Ecken sind ein weiteres Merkmal, das schließlich in das moderne CSS übernommen wurde. Sie können CSS-abgerundete Ecken sowohl in Safari als auch in Firefox mithilfe von Grenzradius Funktion. Einfach einstellen -Moz-Grenze-Radius und / oder -webkit-border-radius auf einen bestimmten Wert in Pixel, um die Rundheit der Rand auf einem bestimmten Artikel.
Ressourcen:
Für mehr Tutorials mit abgerundeten Ecken, als Sie mit einem Stock abschütteln können, besuchen Sie CSS Juice's 25 Rounded Corners Techniques mit CSS.
Tipp 6: Erstellen eines Farbschemas
Photoshop bietet eine schöne Möglichkeit, verschiedene Farben zu visualisieren und mit ihnen zu experimentieren, aber es gibt auch eine Fülle von freien Farbschema-Ressourcen im Web. Meiner Meinung nach ist Adobe Kuler das Beste. Kuler bietet nicht nur die beste Schnittstelle für die Erstellung von schönen Farbschemata, sondern bietet Ihnen auch Zugriff auf eine riesige Bibliothek vorgefertigter, durchsuchbarer Farbschemata. Möchten Sie Ihrer Website einen Herbstlook geben? Einfach eintippen? Herbst? und Sie haben über 2.600 Schemas zur Auswahl. Mit Kuler ist es sehr einfach, ein erstaunliches Farbschema zu erstellen, das Sie direkt in Ihr CSS einfügen können (wodurch das Ändern und Experimentieren im Handumdrehen vereinfacht wird).
Ressourcen:
Weitere übersichtliche Farbwerkzeuge finden Sie in unserem Artikel über 25 fantastische Werkzeuge zur Auswahl eines Website-Farbschemas.
Tipp 7: Textverläufe
Wenn Sie geschickt sind, können Sie im Browser tatsächlich einen Verlauf auf Live-Text anwenden. Was für ein komisches Voodoo ist das, was du fragst? Navigieren Sie zur WebDesignerWall, um das entsprechende Tutorial zu erfahren. Im Wesentlichen wird der Text, auf den der Farbverlauf angewendet werden soll, mit einem Abstand versehen, und der Hintergrund des Bereichs wird dann auf eine wiederholte PNG des Verlaufs gesetzt. Um die PNG-Datei zu erstellen, müssen Sie natürlich einen Bildeditor verwenden (yep, Sie wussten, dass Sie hin und wieder auf den guten alten Photoshop zurückgreifen mussten).
Tipp 8: Verwenden von RGBA zum Anzeigen von Farben
CSS3 implementiert eine neue Funktion namens RGBA (? A? Bedeutet Alpha). Verwenden der? A? Wert können Sie die Deckkraft einer Füllung festlegen. Mit dieser praktischen Funktion können Sie nicht nur auf einfache Weise Farbschemata aus einer einzigen Farbe mit verschiedenen Alpha-Werten erstellen, sondern auch transparente Objekte erstellen, die das Bildmaterial dahinter sichtbar machen, ähnlich wie die Deckkraft einer Ebene in Photoshop.
Ressourcen:
Lesen Sie den Artikel von Oncemade über den richtigen Weg zur Deklaration von RGBA-Farben.
Tipp 9: Kennen Sie Ihre Webfonts
Treten Sie nicht in die Falle, dass Sie auf jeder Website, die Sie entwerfen, die gleichen zwei Schriftarten verwenden. Verändern Sie die Dinge, indem Sie alle Web-sicheren Schriftarten nutzen. Typetester ist ein großartiges Werkzeug dafür. Sie können eine Vorschau von Textblöcken in verschiedenen Schriftarten und Einstellungen (Größe, Ausrichtung, Verfolgung usw.) direkt in Ihrem Browser anzeigen. Das Beste daran ist, dass Typetester das CSS für Sie exportiert, wenn Sie die gewünschten Einstellungen gefunden haben.
Tipp 10: Holen Sie sich noch bessere Schriftarten
Durch das Erstellen von Text als Bild in Photoshop können Sie die gewünschte Schriftart verwenden, ohne sich um die Kompatibilität zu kümmern. Leider führt diese Methode zu Text, der nicht auswählbar oder durchsuchbar ist. Es ist jedoch nicht so schwierig, dieses Problem zu umgehen. Heutzutage gibt es mehrere Lösungen zum Installieren von benutzerdefinierten Schriftarten mit auswählbarem Text auf Ihrer Website mit dem Befehl @ font-face.
Ressourcen:
Holen Sie sich innerhalb von Minuten erstaunliche Schriftarten auf Ihre Website mit unserem Schritt-für-Schritt-Tutorial TypeKit.
Tipp 11: Stock Art ist dein Freund
Es ist oft der Fall, vor allem bei den ersten Modellen, dass Sie eine Schnellschaltfläche, ein Symbol oder eine andere Grafik benötigen, die Sie nicht unbedingt von Grund auf neu erstellen möchten. Stock-Kunstseiten wie GraphicRiver sind voll von Web-Elementen, die bereit sind, auf eine Website zu gelangen. Viele davon erfordern keine Photoshop-Änderungen! Selbst wenn Sie die Gegenstände innerhalb einer Stunde leicht selbst bauen können, ist es ziemlich verlockend, wenn Sie ein großes Kunstwerk mit einem Bock beladen und in 2-3 Minuten einsatzbereit machen.
Tipp 12: Verwenden Sie Browsertesttools
Ich weiß, dass viele von Ihnen einfach nicht abwarten können, einen vernichtenden Kommentar darüber zu schreiben, wie einige der oben genannten Techniken (Schatten, abgerundete Ecken usw.) nur in bestimmten Browsern funktionieren und daher unbrauchbar sind. Genau deshalb versuche ich immer, beide Seiten eines Arguments darzulegen. Die Leute, die sich für die Entwicklung im Browser einsetzen, präsentieren diese Techniken als Beweis dafür, dass Sie außerhalb von Photoshop viel erreichen können, aber es ist vielleicht etwas zu eifrig, die Tatsache abzulehnen, dass mehrere Browser aufgrund mangelnder Unterstützung eine drastisch andere Erfahrung erhalten.
Der Punkt ist, egal wie Sie eine Website entwickeln, Sie sollten immer genau wissen, wie große Browser Ihre Website rendern. Dann können Sie eine fundierte Entscheidung darüber treffen, welche Browser ggf. zurückgelassen werden sollen. Um dies zu erreichen, besuchen Sie Adobe Browserlab. Mit diesem erstaunlich nützlichen Dienstprogramm können Sie eine Vorschau einer Site in mehreren Browsern und Betriebssystemen in Echtzeit anzeigen. Der einzige Nachteil ist, dass Sie tatsächlich erkennen können, wie schlecht Ihre Websites in bestimmten Browsern dargestellt werden, was unweigerlich zu stundenlangem Fluchen und Kopfkratzen führt.
Fazit
Naja, was denkst du? Sind Sie bereit, Crosss zu erstellen und Comps zu erstellen, die nur mit einem Texteditor und einem Browser erstellt werden? Oder sind Sie wie ich, zuversichtlich, dass ein Coroner eine Photoshop-Software aus den kalten, toten Fingern nehmen muss, bevor Sie loslassen? Natürlich gibt es hier keine absoluten Werte. Nur wenige professionelle Designer erstellen Modelle ohne Hilfe durch einen Bildeditor. In dem ersten Entwurf lautet die Frage, wo Sie Ihrer Meinung nach die meiste Zeit verbringen. Wir würden gerne wissen. Fühlen Sie sich frei, die Kommentare zu nutzen, um Stellung zu nehmen und Ihre Position bis zum Tod zu verteidigen. Für mich scheint diese Schlussfolgerung immer mehr makaber zu werden, also höre ich besser hier auf.