Inhalt
- Vorteile beim Entwerfen mit Code
- Daten zuerst
- Mobile Güte kostenlos
- Eine gemeinsame Sprache finden
- Lerne schneller
- Schnelle Iteration
- Schnellere Zeit zum Starten
- Warum HTML5?
- Das magische Datenattribut
- CSS3 - es ist das neue Photoshop
- Sass + Kompass: magisch lecker
- jQuery: Oh ja, das kannst du
- Frameworks
- Abschließende Gedanken
Dieser Artikel erschien erstmals in Ausgabe 235 des .net-Magazins - dem weltweit meistverkauften Magazin für Webdesigner und -entwickler.
Ich war noch nie ein großer Fan von mehr Arbeit als nötig. Ich neige dazu, Methoden und Werkzeuge anhand ihrer Fähigkeit zu bewerten, mich oder mein Team effektiver zu machen. Wie schnell bringen sie uns zu einem funktionierenden Produkt? Wie effektiv kommunizieren sie? Bleiben sie uns aus dem Weg?
Im Laufe der Jahre habe ich meinen Designprozess und meine Tools angepasst. Ich kann mir vorstellen, dass ich das auch weiterhin tun werde. Das ist die Natur des Entwerfens für Technologie und das Web. Diese Branche entwickelt sich ständig weiter. Auch unser Prozess und unsere Tools müssen sich weiterentwickeln.
HTML5 und CSS3 erleichtern es, den Entwurfsprozess stromaufwärts zu verlagern - weg von Photoshop und mehr hin zu einem lebendigen, atmenden Design. Mit Tools wie Foundation, Bootstrap und jQuery können Sie Ihren Entwurfsprozess besser auf Code umstellen.
Vorteile beim Entwerfen mit Code
Erstens empfehle ich nicht, Photoshop oder einen anderen visuellen Design-Editor aus Ihrem Workflow zu entfernen. Stattdessen werde ich mich auf die Vorteile konzentrieren, die es mit sich bringt, dieses Design früher als später in Code zu verschieben.
Daten zuerst
Das, was mir am Entwerfen mit HTML immer gefallen hat, ist, dass es zum Denken aus einer Data-First-Perspektive anregt. Im Gegensatz dazu beginnen Sie mit Zeichenprogrammen wie Illustrator, OmniGraffle oder Balsamiq mit einem Feld und füllen es mit Daten.
In HTML erstellen Sie das DOM (Dokumentobjektmodell), ähnlich wie beim Erstellen eines Inhaltsverzeichnisses. Es ist eine Rückkehr zu echtem Informationsdesign mit aussagekräftigen Hierarchien. HTML5 geht noch einen Schritt weiter und fügt neue semantische Elemente hinzu: Artikel, Abschnitt, Kopfzeile, Seite, Fußzeile und so weiter. Dieser Data-First-Ansatz fügt sich gut in mobile First-Responsive-Designs ein.
Mobile Güte kostenlos
Wenn Sie dies lesen, entwerfen Sie wahrscheinlich für Mobilgeräte. Und wahrscheinlich müssen Sie ein oder zwei Formulare entwerfen. Mit HTML5 haben Sie Glück. Vor HTML5 waren Ihre Eingabetypen so ziemlich entweder ein Text- oder ein Passwortfeld. HTML5 führte eine Reihe zusätzlicher Eingabetypen ein, darunter:
Eingabetyp = "E-Mail"> Eingabetyp = "Tel"> Eingabetyp = "URL"> Eingabetyp = "Datum"> Eingabetyp = "Datum-Uhrzeit">
Was an diesen zusätzlichen, einzigartigen Eingabetypen wirklich beeindruckend ist, ist, dass mobile Browser unter iOS und Android sie erkennen und automatisch eine kontextsensitive Tastatur austauschen - ohne dass spezielle jQuery-Plug-Ins oder Hacks erforderlich sind. Oh, und wenn Ihr Browser nicht weiß, was Eingabetyp = "E-Mail"> ist, dann wird standardmäßig nur eine Texteingabe verwendet.
Eine gemeinsame Sprache finden
"Es ist großartig, wie unsere Designer und Entwickler in derselben Sprache arbeiten können" - John Drago, Anwendungsentwickler bei Inflection.
Überprüfen Sie, ob Ihnen das bekannt vorkommt. Ich bin in einem Konferenzraum mit einem halben Dutzend serverseitigen Anwendungsentwicklern, die in Ruby, Python, Java oder .NET Kreise um mich herum codieren können. Ich bin der einzige Designer. Einige meiner Vorschläge werden zunächst als zu kompliziert für die Umsetzung abgetan. Ich gehe zum Whiteboard und beginne, HTML und CSS an die Tafel zu schreiben, um zu erfahren, wie das Design implementiert werden kann. Plötzlich ändert sich der Gesprächston und einer der Entwickler sagt widerwillig: "Nun ja - wenn wir es so machen, könnte es funktionieren."
Wenn ich mehr von meinem Designprozess in Code verlagere, hat sich die Konversation mit Entwicklern verbessert. Es gibt eine zusätzliche Ebene des Respekts, wenn Sie wissen, wie Sie Ihre Designs in Code gestalten. Sie müssen kein Experte sein, um diesen Respekt zu verdienen. Während meine HTML- und CSS-Kenntnisse absolut solide sind, sind meine JavaScript-Kenntnisse bestenfalls mittelmäßig. Und ich bin nicht schüchtern, das zuzugeben. Bei der Arbeit mit Frontend- oder serverseitigen Entwicklern ist die Tatsache, dass wir in einer gemeinsamen Sprache sprechen oder uns auf halbem Weg treffen können, ein großer Vorteil.
Lerne schneller
Während Drahtgitter und visuelle Verbundwerkstoffe bei der Planung hilfreich sein können, sind diese statischen Artefakte theoretisch. Wie oft haben Sie versucht, jemandem eine Interaktion zu erklären, nur um ihn antworten zu lassen: "Ich denke, ich muss sie sehen." Je früher Sie zu einem Prototyp gelangen, mit dem Menschen interagieren können, desto eher können Sie das Design erleben und sehen, ob Ideen funktionieren.
Schnelle Iteration
Wann war das letzte Mal, dass ein endgültiges Design, das an die Produktion geliefert wurde, genau zu Ihrer Photoshop-Komposition passte? Fast nie. Beim digitalen Produktdesign kommt es ständig zu Veränderungen. Darüber hinaus können Änderungen wie das Erhöhen der Größe Ihrer Überschriften von 22 auf 24 Punkte auf ein paar Dutzend Bildschirmen in Photoshop Stunden dauern. Mit Smart Objects erhalten Sie in Photoshop ein gewisses Maß an objektorientiertem Design. Leider verwenden die meisten visuellen Designer, die ich kenne, Smart Objects nicht genug. Bei CSS dauern typografische Änderungen Minuten statt Stunden, da sie einen systematischeren Entwurfsansatz fördern.
Was ist mit dem Ändern der linearen Verläufe auf allen Ihren Schaltflächen? Oder die Größe einer Grenze? Wie wäre es mit einem Wechsel von quadratischen zu 2px abgerundeten Ecken? In Photoshop kann dies Stunden dauern und Sie müssen es noch codieren. Durch die Möglichkeit, in Code zu entwerfen, müssen Sie nicht mehr in Photoshop zurückkehren, um das visuelle Design zu wiederholen. Wenn Sie diese Änderungen mithilfe von CSS3 und Sass (auf die ich später in diesem Artikel eingehen werde) in Code übertragen, können sie in Echtzeit erfolgen und nur wenige Minuten dauern.
Schnellere Zeit zum Starten
Im Laufe der Jahre, als ich mehr von meinem Design-Workflow in Code umwandelte, stellte ich eine echte Verbesserung fest - eine Verkürzung der Markteinführungszeit um etwa 20 bis 30 Prozent. Je mehr ich dies tue, desto weniger Zeit verbringe ich mit Doppelarbeit. Ich verbringe weniger Zyklen damit, in Photoshop oder Fireworks zu arbeiten und dann die Arbeit im Code zu wiederholen.
Irgendwann muss das Design mit einer Art Backend verbunden sein, egal ob es sich um ein CMS, eine Rails-App oder etwas anderes handelt. Da der Großteil meiner Entwurfsarbeit im Code erfolgt, erfolgt die Integration früher als später. Vor ein paar Jahren ging einer meiner Kunden, PointRoll, innerhalb von fünf Tagen vom Prototyp zur Produktion über.
Warum HTML5?
HTML5 ist einfacher als frühere HTML-Versionen. Nehmen Sie zum Beispiel die Dokumenttypdeklaration. In früheren HTML-Versionen wurde die DOKTYP sah ungefähr so aus:
! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.1 // DE" "http://www.w3.org/TR/xhtml11/DTD/ xhtml11.dtd">
Und es gab sechs verschiedene Versionen. Zum Glück das HTML5 DOKTYP sieht aus wie das:
! DOCTYPE HTML>
Ernsthaft. Das ist es. Schockierend einfach.
Beim Erstellen einer Standard-HTML-Seite gibt es eine Reihe allgemeiner Elemente, z. B. eine Kopfzeile, einen Hauptinhaltsbereich, eine Seitenleiste und eine Fußzeile. Ich bin mir sicher, dass Sie so etwas schon einmal gesehen haben:
div id = "header> div id =" nav "> / div> / div> div id =" main "> div id =" sidebar "> / div> / div> div id =" footer "> / div>
Nichts Außergewöhnliches dort. Sobald diese Vorlage mit Inhalten gefüllt ist, verwandelt sie sich in Div-Suppe. Im Gegensatz dazu erhalten Sie mit den neuen semantischen Elementen von HTML5 etwas, das viel einfacher und einfacher zu scannen ist:
Kopfzeile> nav> / nav> / header> Artikel> beiseite> / beiseite> / Artikel> Fußzeile> / Fußzeile>
Sieh dir das an. Etwas, das Sinn macht.
Das magische Datenattribut
HTML5 wird mit einem weiteren fantastischen Hook geliefert, mit dem Sie Ihre eigene semantische Bedeutung erstellen können: die Daten-. Wenn Sie zuvor einem DOM-Element etwas Sinnvolles zuweisen wollten, waren Sie auf IDs, Klassen und Rollen beschränkt.
IDs müssen leider eindeutig sein. Klassen sind universell (yippee!), Aber wenn man sie benutzt, kann das schnell zu einem Chaos werden. Rollen sind ein nicht ausgelasteter Vermögenswert, der für ARIA eine bedeutende Bedeutung hat. Vor kurzem habe ich Daten für eine Event-Tracking-Analyseplattform verwendet, die wir bei Inflection entwickeln.Wir sind große Fans davon, unsere Designs zu testen. Wenn Sie an Anwendungen oder Seiten mit viel Interaktivität arbeiten, möchten wir einen genaueren Einblick in die Kundenbindung auf der Seite erhalten.
Geben Sie die Daten-. Damit können Sie ein "Definieren Sie Ihr eigenes" Bedeutungsmodell zuweisen, weitergeben und einbinden. So können Sie beispielsweise Folgendes tun:
Eingabetyp = "button" data-id = "facebook" dataregion = "main" data-event = "register"> input type = "button" data-id = "twitter" dataregion = "main" data-event = "register "> input type =" button "data-id =" linkedin "dataregion =" main "data-event =" register ">
Wir können der Seite einen Listener mit JavaScript hinzufügen. Jedes Mal, wenn ein Kunde mit der Maus darüber fährt oder auf diese Schaltfläche klickt, können wir diese Aktivität verfolgen. Anstatt nur nachverfolgen zu können, dass sich jemand über OAuth bei Twitter registriert hat, können wir sehen, dass er über Facebook, dann über Twitter und dann über LinkedIn schwebte und sich schließlich für Twitter als OAuth-Modell entschieden hat.
Stellen Sie sich vor, Sie erweitern dies auf eine Website wie Pinterest oder das neue Myspace-Design, bei dem Kunden Kacheln per Drag & Drop verschieben, um sie je nach Interesse neu zu ordnen. Oder möglicherweise Kacheln verstecken, an denen sie nicht interessiert sind Daten- Mit dem Attribut können Sie Dingen, die Sie definieren können, eine zusätzliche Ebene mit semantischer Bedeutung hinzufügen oder zuweisen. Für Websites und Apps, die stark auf Ajax angewiesen sind, eröffnen sich unbegrenzte Möglichkeiten.
CSS3 - es ist das neue Photoshop
CSS3 brachte eine völlig neue Ebene des Look-and-Feel-Designs mit sich, für die früher Hintergrundbilder, Schnitte und die berüchtigte Schiebetürtechnik erforderlich waren. Zum Glück gehört das der Vergangenheit an.
Schauen wir uns an, wie Sie eine ausgefallene Schaltfläche mit einem linearen Farbverlauf, abgerundeten Ecken, einem Textschatten, der einen schönen Buchstabeneffekt erzeugt, und einem leuchtenden Schwebeflug erstellen. Das Erlernen dieser Techniken wird einen langen Weg gehen. Jeder von ihnen kann unabhängig oder in verschiedenen Kombinationen verwendet werden, um nahezu jede der aktuellen visuellen Schärfe zu erreichen, die heute im Web angesagt ist.
Nehmen wir zunächst einige Anpassungen an der Standardeinstellung vor Schaltfläche> und Eingabetyp = "Senden"> Elemente. Angenommen, Sie verwenden einen der Standard-CSS-Resets, fügen wir nur ein wenig Raum für Größe und Atmung hinzu.
/ * Schaltflächen Schaltflächen, deren Schaltflächen vorhanden sind * * / button, input [type = "submit"] {height: 2.7em; Polsterung: .4em .7em; Zeilenhöhe: 1,9; }}
Protip: Schaltflächen und Eingaben, die eingereicht werden, können schwierig neu zu formatieren sein. Ich habe festgestellt, dass Sie durch Anpassen der Zeilenhöhe auf 1,6 oder mehr den Hack vermeiden können, ein zusätzliches Div oder Span innerhalb des zu benötigen Schaltfläche> Etikett.
Jetzt haben wir unser Button-Problem behoben. Wir können ein .btn Klasse, um uns einen schönen sauberen Knopf mit abgerundeten Ecken, einem linearen Farbverlauf, Umriss und diesem Buchdruck-Look zu geben.
.btn {Anzeige: Inline-Block; Rand: 1px fest # d4d4cc; -Moz-Rand-Radius: 4px; -Webkit-Rand-Radius: 4px; Randradius: 4px; Polsterung: .4em .7em; Hintergrund: # edeff2; Hintergrund: -webkit-Gradient (linear, 0% 0%, 0% 100%, von (#fefefe), Farbstopp (0,55, # edeff2) bis (# e4e6e9)); Hintergrund: -moz-linear-gradient (Mitte oben, #fefefe, # edeff2 55%, # e4e6e9); -moz-box-shadow: rgba (160, 172, 187, 0,7) 0 0, 2em 0; -webkit-box-shadow: rgba (160, 172, 187, 7) 0 0, 2em 0; Kastenschatten: rgba (160, 172, 187, 0,7) 0 0, 2em 0; Farbe: # 6c7786; Schriftgröße: 1.1em; Textschatten: #fefefe 1px 0 1px; Zeilenhöhe: 1,375em; Cursor: Zeiger; }}
Und dann ein schöner Hover-Effekt mit einem subtilen Glühen mit dem Box Schatten Methode:
.btn: hover, .btn: focus {-moz-box-shadow: # 129ceb 0px 0px 2px; -webkit-box-shadow: # 129ceb 0 0 2px; Kastenschatten: # 129ceb 0 0 2px; Hintergrund: # e6e9eb; Hintergrund: -webkit-Gradient (linear, 0% 0%, 0% 100%, von (# f7f7f7), Farbstopp (0,55, # f6f6f7) bis (# e6e9eb)); Hintergrund: -moz-lineargradient (Mitte oben, # f7f7f7, # f6f6f7 55%, # e6e9eb); Farbe: # 45484b; Textschatten: rgb (255,255,255) 1px 1px 0; Rahmenfarbe: # c9c9c0; }}
Jetzt bin ich kein großer Fan des Schreibens des linearen Verlaufscodes. Es ist lang und verwirrend. Wie Sie sehen, habe ich nur die Version für aufgenommen -moz, -webkitund das Standardmodell. Wenn Sie die Versionen -o und -ms einschließen möchten, müssen Sie den Code verdoppeln.
Es gibt zwei weitere Optionen. Einer ist ein CSS3-Generator; Im Internet sind mehrere verfügbar, einschließlich ColorZilla. Wenn Sie Ihr Spiel jedoch etwas verbessern möchten, sollten Sie in Sass eintauchen: In Kombination mit Compass ist dies ein Glücksfall.
Sass + Kompass: magisch lecker
Sie können aufhören, auf die CSS4-Einhorn-Edition zu hoffen. Es ist hier und heißt Sass + Compass. Sass steht für Syntactically Awesome Stylesheets: Sie erben alle traditionellen Vorteile von CSS3 mit den zusätzlichen Freuden von Variablen, Mixins, Extendern und anderen Extras.
Ich habe kürzlich eine CSS-Datei mit 5.000 Zeilen überarbeitet, die mehr als 30 Variationen des gleichen Blautons enthält. Mit Sass habe ich jede Variation durch diesen Code ersetzt:
Farbe: $ blau;
Durch die Definition $ blau in meinem _variables.scss Datei kann ich eine Standardfarbe erstellen, auf die jede CSS- oder SCSS-Datei verweisen kann. Jeder, der CSS schreibt, kann verwenden $ blau und Sie müssen sich keine Gedanken über die Verwendung einer Pipette, die Suche nach einem Hex-Code oder der Farbe RGB, RGBA oder HSL machen.
Erinnerst du dich an diesen linearen Gradientencode? Wie wäre es damit, anstatt mehrere Codezeilen zu schreiben:
@ Hintergrund einschließen (linearer Gradient (# b1cfdc, # 7a9cac));
Lassen Sie Sass und Compass das schwere Heben erledigen und generieren Sie die richtige Syntax für Sie: Fertig. Angenommen, Sie möchten eine dunklere oder hellere Version einer Farbe. Sie können die Pipette in Photoshop bewegen oder einfach die Befehle zum Aufhellen / Abdunkeln in Sass verwenden:
@ Hintergrund einschließen (linearer Farbverlauf (abdunkeln ($ litegray, 2%), abdunkeln ($ cremefarben, 5%));
Dadurch wird ein linearer Farbverlauf mit einer Verdunkelung von 2% erzeugt $ hellgrau und 5% verdunkelt nicht-gerade weiss. Voil! Sie benötigen nicht einmal die HEX- oder RGB-Codes.
jQuery: Oh ja, das kannst du
Ich muss etwas gestehen. JavaScript hat mich eingeschüchtert. Dann habe ich jQuery gefunden. Ich werde nicht behaupten, ein JavaScript-Guru zu sein, aber ich bin ziemlich sicher, dass ich fast jede Art von Übergang oder Funktion ausführen kann, die ich für die Verwendung von jQuery benötige.
Nehmen Sie zum Beispiel die Möglichkeit, eine Eingabe einer sekundären Telefonnummer auf dem Bildschirm anzuzeigen, indem Sie auf den Link Neue Nummer hinzufügen klicken. Mit jQuery schreiben Sie einfach Folgendes:
// - Progressive Enthüllung - // $ (’. Neue Nummer’). Click (function () {$ (’. Alt-number’). FadeIn (’fast’);});
Suchen Sie etwas Fortgeschritteneres? Es gibt wahrscheinlich ein Plug-In dafür. Grundlegende Verhaltensweisen sind einfach und komplexe sind mit jQuery zugänglich.
Frameworks
Zwei der robustesten Frameworks sind heute Foundation und Bootstrap. Bevor Sie CSS-Frameworks schließen, möchte ich Sie etwas fragen. Verwenden Sie jQuery? Ruby on Rails? Django? Alle Frameworks.
Genau wie jQuery und RoR entstanden Foundation und Bootstrap aus der Erkenntnis heraus, dass es eine ganze Reihe von Dingen gibt, die wir immer wieder tun (wie Zurücksetzen, Typografie, Raster, Formulare, Schaltflächen, Navigation und Listen). Foundation und Bootstrap bieten Unterstützung für reaktionsschnelle Designs mithilfe von Hilfsklassen. Beide sind gut dokumentiert und wurden auf der Straße getestet, sodass Sie sie sicher verwenden können.
Ein wesentlicher Unterschied zwischen beiden: Bootstrap basiert auf dem LESS-System für die CSS-Vorverarbeitung, während Foundation auf Sass basiert. Ich bevorzuge Sass WENIGER aufgrund seiner zusätzlichen Funktionen, aber sowohl Sass als auch WENIGER zerquetschen traditionelles CSS in Stücke.
Ein letzter Gedanke zu Frameworks. Für diejenigen, die nicht das zusätzliche Aufblähen des Frameworks eines anderen erben möchten, sollten Sie ein vorhandenes auswählen und es bis auf die Knochen abstreifen oder von einigen Kirschen pflücken, um Ihr eigenes zu rollen. In beiden Fällen gibt es wirklich keinen Grund, jedes Mal von vorne zu beginnen.
Abschließende Gedanken
Möchten Sie mehr Kontrolle darüber haben, wie sich Ihr Design letztendlich entwickelt? Verschieben Sie mehr Prozesse in den Code. HTML5 bringt endlich Sinn in das DOM. Gute Befreiung von Unsinn DOKTYPs und Divitis. CSS3 ist das neue Photoshop: lineare Verläufe, Borderradius und Box-Shadows FTW! Und mit Tools wie Bootstrap, Foundation, Sass und jQuery war es nie einfacher, das Design auf Code zu übertragen.
Entdecken Sie 55 erstaunliche Beispiele für HTML5 bei Creative Bloq.
