Inhalt
- Virdeeler fir mam Code ze designen
- Daten als éischt
- Mobile Guttheet gratis
- Eng gemeinsam Sprooch ze fannen
- Méi séier léieren
- Séier Iteratioun
- Méi séier Zäit fir ze starten
- Firwat HTML5?
- Déi magesch Daten- Attribut
- CSS3 - et ass deen neie Photoshop
- Sass + Kompass: magesch lecker
- jQuery: oh, jo Dir kënnt
- Kader
- Schlussgedanken
Dësen Artikel erschéngt als éischt an der Ausgab 235 vum .net Magazin - de beschte verkaafte Magazin vun der Welt fir Webdesigner an Entwéckler.
Ech war ni e grousse Fan méi Aarbecht ze maachen wéi néideg. Ech tendéieren Methoden an Tools ze evaluéieren baséiert op hir Fäegkeet mech, oder mäi Team, méi effektiv ze maachen. Wéi séier kréie si eis zu engem Aarbechtsprodukt? Wéi effektiv si se beim Kommunizéieren? Bleiwen se aus eisem Wee?
Iwwert d'Joren hunn ech mäin Designprozess an Tools ugepasst. Ech stelle mer vir, ech wäert dat weider maachen. Dat ass d'Natur vum Design fir Technologie an de Web. Dës Industrie entwéckelt sech konstant; eise Prozess an Handwierksgeschir musse sech och entwéckelen.
HTML5 an CSS3 maachen et méi einfach méi vum Designprozess upstream ze iwwergoen - ewech vum Photoshop a méi Richtung e liewegen, atmenden Design. Tools wéi Foundation, Bootstrap a jQuery maachen méi vun Ärem Designprozess ze bewegen fir méi zougänglech ze codéieren.
Virdeeler fir mam Code ze designen
Als éischt plädéieren ech net fir de Photoshop erofzesetzen, oder all anere visuellen Design Editor aus Ärem Workflow. Amplaz datt ech op d'Virdeeler fokusséiere fir dësen Design méi séier wéi spéider an de Code ze réckelen.
Daten als éischt
D'Saach, déi ech ëmmer gär beim Design mat HTML gär hunn, ass datt et denkt aus enger data-first Perspektiv encouragéiert. Am Géigesaz, mat Zeecheprogrammer wéi Illustrator, OmniGraffle oder Balsamiq, fänkt Dir mat enger Këscht un a fëllt se mat Daten aus.
An HTML konstruéiert Dir den DOM (Dokument Objektmodell), sou wéi en Inhaltsverzeechnes ze bauen. Et ass e Retour zum richtegen Informatiounsdesign mat sënnvollen Hierarchien. HTML5 hëlt et e Schrëtt weider mam Zousaz vun neie semanteschen Elementer: Artikel, Sektioun, Header, ofgesinn, Fousszeilen a sou weider. Dës Daten-éischt Approche schmëlzt schéin mat mobilen éischten, reaktiounsfäegen Designen.
Mobile Guttheet gratis
Wann Dir dëst liest, designt Dir wahrscheinlech fir Handy. A Chancen datt Dir eng Form oder zwee musst designen. Mat HTML5 hutt Dir Gléck. Virun HTML5 waren Är Inputtypen zimlech entweder en Text- oder Passwuertfeld. HTML5 huet eng Zuel vun zousätzlechen Input Typen agefouert, abegraff:
Input Type = "E-Mail"> Input Type = "tel"> Input Type = "url"> Input Type = "Date"> Input Type = "Date-time">
Wat wierklech fantastesch un dësen zousätzlechen, eenzegaartegen Input-Typen ass, datt mobil Browser op iOS an Android se erkennen an automatesch eng kontextuell bewosst Tastatur auswiesselen - ouni speziell jQuery Plug-ins oder Hacks erfuerderlech. Oh, a wann Äre Browser net weess wat en Input Type = "E-Mail"> ass, da gëtt se just als Textinput Standard.
Eng gemeinsam Sprooch ze fannen
"Et ass fantastesch wéi eis Designer an Entwéckler an der selwechter Sprooch kënne schaffen" - John Drago, Applikatiounsentwéckler bei Inflection.
Kuckt ob dëst vertraut kléngt. Ech sinn an engem Konferenzsall mat enger hallwer Dose Server-Säit Applikatioun Devs, déi Kreeser ronderëm mech a Ruby, Python, Java oder .NET codéiere kënnen. Ech sinn deen eenzegen Designer. E puer vu menge Virschléi ginn am Ufank entlooss als ze komplizéiert ze realiséieren. Ech ginn op de Whiteboard an fänken e puer HTML an CSS um Board ze schreiwen fir wéi den Design kéint ëmgesat ginn. Op eemol ännert de Gespréichstoun an ee vun den Entwéckler seet onwillig: "Gutt, jo - wa mir et esou maachen, kéint et funktionéieren."
Méi vu mengem Designprozess a Code ze réckelen huet Gespréicher mat Entwéckler verbessert. Et gëtt eng zousätzlech Schicht vu Respekt verdéngt andeems Dir wësst wéi Dir Är Designs am Code bastelt. Dir musst keen Expert sinn fir dee Respekt ze verdéngen. Wärend meng HTML an CSS Fäegkeete solid sinn, sinn meng JavaScript Fäegkeeten am beschten mëttelméisseg. An ech sinn net schei fir dat zouzeginn. Trotzdem, wann Dir mat Frontend oder Server-Side Entwéckler schafft, ass de Fakt datt mir an enger gemeinsamer Sprooch schwätzen oder eis hallef treffen, e grousse Virdeel.
Méi séier léieren
Wärend Drotrahmen a visuell Kompositioune kënne beim Plange hëllefen, dës statesch Artefakte sinn theoretesch. Wéi oft hutt Dir probéiert eng Interaktioun engem z'erklären, nëmmen datt se äntweren, "Ech denken ech muss et gesinn." Wat Dir méi fréi zu engem Prototyp kënnt, eppes mat deem d'Leit kënne interagéieren, dest méi fréi kënnt Dir den Design erliewen a kucken ob Iddien funktionnéieren.
Séier Iteratioun
Wéini war déi leschte Kéier e final Design, deen an d'Produktioun verschéckt gouf, mat Ärem Photoshop Comp exakt entsprécht? Bal ni. Mat digitalem Produktdesign geschitt Ännerung stänneg. Ausserdeem kënne Verännerunge wéi d'Gréisst vun Äre Rubriken vun 22pt op 24pt iwwer e puer Dutzend Schiermer erhéijen, kënnen am Photoshop Stonnen daueren. Smart Objects ginn Iech e gewëssen Niveau vun objektorientéiertem Design am Photoshop. Leider benotzen déi meescht visuell Designer, déi ech kennen, net genuch Smart Objects. Mat CSS, well et eng méi systematesch Approche fir Design encouragéiert, daueren typographesch Ännerungen Minutten amplaz vu Stonnen.
Wat iwwer d'Ännerung vun de lineare Gradienten op all Äre Knäppercher? Oder d'Gréisst vun enger Grenz? Wéi wier et mat Quadraten Ecken op 2px ofgerënnt ze wiesselen? Am Photoshop kann dëst Stonnen daueren an Dir musst et ëmmer nach codéieren. D'Fäegkeet fir am Code ze designen hëlleft de Rondrees ze vermeiden zréck an Photoshop ze goen fir de visuellen Design ze iteréieren. Wann Dir dës Ännerungen upstream a Code réckelt, mat CSS3 a Sass (déi ech méi spéit an dësem Artikel behandelen) kënne se an Echtzäit geschéien an nëmmen e puer Minutten daueren.
Méi séier Zäit fir ze starten
Am Laaf vun den Joeren, wéi ech méi vu mengem Design Workflow upstream a Code iwwerschloen hunn, hunn ech eng richteg Verbesserung erlieft - ongeféier eng 20 bis 30 Prozent Reduktioun vun der Zäit zum Maart. Wat méi ech dat maachen, wat ech manner Zäit verduebelen Efforten. Ech verbrénge manner Zyklen an de Photoshop oder op d'Feierwierk an da widderhuelen ech d'Aarbecht am Code.
Iergendwann muss den Design mat enger Aart Backend interfacen, egal ob dat eng CMS, Rails App oder soss eppes ass. Well déi meescht vu menger Designaarbecht am Code ass, geschitt d'Integratioun éischter wéi spéider. Virun e puer Joer ass ee vu menge Clienten, PointRoll, vu Prototyp a Produktioun a fënnef Deeg.
Firwat HTML5?
HTML5 ass méi einfach wéi fréier HTML Versiounen. Huelt zum Beispill d'Dokumenttyp Deklaratioun. A fréiere Versioune vun HTML, der DOCTYPE huet sou eppes ausgesinn:
! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.1 // EN" "http://www.w3.org/TR/xhtml11/DTD/ xhtml11.dtd">
An et goufe sechs verschidde Versiounen. Glécklech den HTML5 DOCTYPE gesäit esou aus:
! DOCTYPE HTML>
Eeschtlech. Dat ass et. Schockéierend einfach.
Wann Dir eng Standard HTML Säit erstellt, ginn et e puer gemeinsam Elementer, wéi en Header, Haaptinhaltsberäich, Sidebar a Fousszeilen. Ech si sécher datt Dir esou eppes scho gesinn hutt:
div id = "header> div id =" nav "> / div> / div> div id =" main "> div id =" sidebar "> / div> / div> div id =" footer "> / div>
Näischt aussergewéinleches do. Awer eemol mat Inhalt ausgefëllt ass dës Schabloun zu Div Zopp. Am Géigesaz, mat den neie semanteschen Elementer vun HTML5, kritt Dir eppes vill méi einfach a méi einfach ze scannen, sou:
Header> nav> / nav> / header> Artikel> ofgesinn> / ofgesinn> / Artikel> Fousszeilen> / Fousszeilen>
Kuckt dat. Eppes wat Sënn mécht.
Déi magesch Daten- Attribut
HTML5 kënnt mat engem aneren fantasteschen Hook deen Iech d'Fäegkeet gëtt Är eege semantesch Bedeitung ze bastelen: den Daten-. Virdrun, wann Dir eppes Sënnvolles fir en DOM Element zouweise wëllt, sidd Dir op IDen, Klassen a Rollen limitéiert.
Leider mussen IDen eenzegaarteg sinn. Klassen sinn universell (yippee!), Awer se benotze kann séier zu engem Knascht ginn. Rollen sinn en ënnerbenotztent Verméigen dat bedeitend Bedeitung fir ARIA liwwert. Viru kuerzem hunn ech Daten benotzt- fir eng Event Tracking Analytikplattform déi mir bei Inflection entwéckelen.Mir si grouss Fans fir eis Motiver ze testen. Wann Dir u Uwendungen oder Säiten schafft, déi vill Interaktivitéit hunn, wëlle mir méi käreg Abléck an d'Clientengagement innerhalb der Säit hunn.
Gitt d ' Daten-. Mat him kënnt Dir en "definéieren Äert eegent" Bedeitungsmodell zouweisen, laanschtgoen, an uschléissen. Also, zum Beispill, kënnt Dir dëst maachen:
Input Type = "Knäppchen" data-id = "facebook" dataregion = "main" data-event = "register"> input type = "button" data-id = "twitter" dataregion = "main" data-event = "register "> Input Type =" Knäppchen "data-id =" linkedin "dataregion =" main "data-event =" register ">
Mir kënnen en Nolauschterer mat JavaScript un d'Säit bäifügen an all Moment wou e Client hänkt oder op dëse Knäppchen klickt, kënne mir dës Aktivitéit verfollegen. Amplaz nëmme kënnen ze verfollegen datt iergendeen iwwer OAuth mat Twitter registréiert ass, kënne mir gesinn datt se iwwer Facebook, dann Twitter, dann LinkedIn, an dann endlech décidéiert hunn Twitter fir hiren OAuth Modell ze wielen.
Stellt Iech vir, dëst op e Site wéi Pinterest auszebauen, oder deen neie Myspace Design, wou d'Cliente Plättercher zéien a fale fir se no Interesse nei ze bestellen. Oder eventuell Plättercher verstoppen, wou se net interesséiert sinn Daten- Attribut erlaabt Iech eng zousätzlech Schicht vun semantescher Bedeitung u Saachen ze befestegen oder ze weisen déi Dir definéiere kënnt. Fir Site an Apps déi staark op Ajax vertrauen, mécht et onbegrenzte Méiglechkeeten op.
CSS3 - et ass deen neie Photoshop
CSS3 huet e ganz neien Niveau bruecht fir Look-and-Feel ze designen déi fréier Hannergrondbiller, Scheiwen an déi berüchtegt 'Schiebetüren' Technik erfuerderen. Gott sei Dank ass dat alles eng Saach vun der Vergaangenheet.
Loosst eis kucken fir e flotte Knäppchen mat engem Lineargradient, gerundelten Ecken, Text Schatten ze maachen, deen e flotte Bréifpresseffekt gëtt, an e Liichtebegeeschterung. Dës Techniken ze léieren wäert e laange Wee goen. Jidderee vun hinnen kann onofhängeg benotzt ginn, oder a verschiddene Kombinatioune fir just eng vun der aktueller visueller Hottheet ze zéien, déi haut am Trend ass.
Als éischt, loosst eis e puer Upassungen un de Standard maachen Knäppchen> an Input Type = "ofginn"> Elementer. Unzehuelen datt Dir ee vun de Standard CSS Resets benotzt, addéiere mir just e bësse Gréisst an Atmungsraum.
/ * Knäppchen Knäppercher, deenen hir Knäppercher kruten. ========================================== * * / Knäppchen, Input [type = "submit"] {Héicht: 2.7em; padding: .4em .7em; Linn-Héicht: 1,9; }
Protip: Buttons an Inputen déi ofginn kënne schwiereg sinn ze restyléieren. Ech hunn et fonnt andeems Dir d'Linnshéicht op 1.6 oder méi grouss ugepasst hutt, Dir kënnt den Hack vermeiden datt Dir eng extra Div oder Spann an der Knäppchen> markéieren.
Elo hu mir eis Knäppchenausgab 'fixéiert', mir kënnen e .btn Klass fir eis e flotte proppere Knäppchen mat gerundelten Ecken ze ginn, e Lineargradient, Kontur, an dee Buschtafslook.
.btn {affichéieren: inline-block; Grenz: 1px zolidd # d4d4cc; -moz-Grenz-Radius: 4px; -webkit-Grenz-Radius: 4px; Grenzradius: 4px; padding: .4em .7em; Hannergrond: # edeff2; Hannergrond: -webkit-Gradient (linear, 0% 0%, 0% 100%, vun (#fefefe), Faarfstopp (0.55, # edeff2), bis (# e4e6e9)); Hannergrond: -moz-linear-Gradient (Zentrum uewen, #fefefe, # edeff2 55%, # e4e6e9); -moz-Box-Shadow: rgba (160,172,187, .7) 0 0 .2em 0; -webkit-box-shadow: rgba (160,172,187, .7) 0 0 .2em 0; Box-Shadow: rgba (160,172,187, .7) 0 0 .2em 0; Faarf: # 6c7786; Schrëftgréisst: 1.1em; Text-Schatten: #fefefe 1px 0 1px; Linn-Héicht: 1.375em; Cursor: Zeigefanger; }
An dann e schéinen Hovereffekt mat engem subtilen Liicht mat der Box-Schied Method:
.btn: hover, .btn: focus {-moz-box-shadow: # 129ceb 0px 0px 2px; -webkit-box-shadow: # 129ceb 0 0 2px; Box-Shadow: # 129ceb 0 0 2px; Hannergrond: # e6e9eb; Hannergrond: -webkit-Gradient (linear, 0% 0%, 0% 100%, vun (# f7f7f7), Faarfstopp (0,55, # f6f6f7), bis (# e6e9eb)); Hannergrond: -moz-lineargradient (Zentrum uewen, # f7f7f7, # f6f6f7 55%, # e6e9eb); Faarf: # 45484b; Text-Schatten: rgb (255,255,255) 1px 1px 0; Grenz-Faarf: # c9c9c0; }
Elo sinn ech kee grousse Fan fir de Lineargradientcode ze schreiwen. Et ass laang a konfus. Wéi Dir kënnt gesinn, hunn ech nëmmen d'Versioun fir -moz, -webkit, an de Standardmodell. Wann Dir -o a -ms Versioune wëllt abannen, musst Dir de Code verduebelen.
Et ginn zwou aner Optiounen. Een ass en CSS3 Generator; et gi verschidde verfügbar um Internet, dorënner ColorZilla. Awer wann Dir Äert Spill e bësse verstäerkt wëllt, betruecht Tauchen an Sass: kombinéiert mat Compass, et ass e Gottesendend.
Sass + Kompass: magesch lecker
Dir kënnt ophalen mat der CSS4 Unicorn Editioun ze hoffen. Et ass hei an et heescht Sass + Kompass. Sass steet fir Syntaktesch Awesome Stylesheets: Dir ierft all traditionell Virdeeler vum CSS3 mat derbäi Freed vu Variabelen, Mixins, Extender an aner Goodies.
Ech hunn zënter kuerzem eng 5.000-Linn CSS Datei refactoriséiert déi méi wéi 30 Variatiounen am selwechte Schiet vu blo haten. Mat Sass hunn ech all Variatioun duerch dëse Code ersat:
Faarf: $ blo;
Duerch Definitioun $ blo a mengem _variables.scss Datei, ech kann eng Standardfaarf kreéieren déi all CSS oder SCSS Datei ka referenzéieren. Jiddereen deen CSS schreift ka benotzen $ blo an Dir musst Iech keng Suergen iwwer e Pipette benotzen, en Hexcode fannen, oder RGB, RGBA oder HSL Faarf.
Erënnert Dir Iech un dee lineare Gradientcode? Amplaz e puer Zeilen u Code ze schreiwen, wéi iwwer dëst:
@ ëmfaasst Hannergrond (Lineargradient (# b1cfdc, # 7a9cac));
Loosst Sass a Kompass déi schwéier Ophiewung maachen a generéieren déi richteg Syntax fir Iech: gemaach. Loosst eis soen datt Dir eng méi däischter oder méi hell Versioun vun enger Faarf wëllt. Dir kënnt de Pipette am Photoshop ronderëm réckelen, oder einfach d'Beleidegungen / Verdonkele vun Sass benotzen:
@ ëmfaasst Hannergrond (Lineargradient (däischter ($ litegray, 2%), däischter ($ Off-White, 5%)));
Dat wäert e Lineargradient mat engem 2% verdonkelten erstellen $ lite-gro a 5% verdonkelt off-wäiss. Voil! Dir braucht net mol d'HEX oder RGB Coden.
jQuery: oh, jo Dir kënnt
Ech hunn e Beicht ze maachen. JavaScript benotzt fir mech ze intimidéieren. Dunn hunn ech jQuery fonnt. Ech wäert net behaapten datt ech e JavaScript Guru sinn, awer ech sinn zimlech zouversiichtlech datt ech just iwwer all Zort vun Iwwergang oder Funktioun zéien, déi ech brauch fir jQuery ze benotzen.
Huelt zum Beispill d'Fäegkeet fir eng sekundär Telefonsnummer Input um Bildschierm ze weisen andeems Dir op Add New Number Link klickt. Mat jQuery schreift Dir dëst einfach:
// - Progressiv opzeweisen - // $ ('. Nei-Nummer'). Klickt (Funktioun () {$ ('. Alt-Nummer'). FadeIn ('séier');});
Sich no eppes méi fortgeschratt? Et gëtt wuel e Plug-in dofir. Basis Verhalen sinn einfach a komplex sinn mat jQuery zougänglech.
Kader
Zwee vun de robustste Frameworks haut sinn Foundation a Bootstrap. Elo, ier Dir CSS Frameworks ofleent, loosst mech Iech eppes froen. Benotzt Dir jQuery? Rubin on Rails? Django? All Kaderen.
Just wéi jQuery a RoR, Foundation a Bootstrap goufen aus der Erkennung gebuer datt et eng fair Zuel vu Saachen sinn déi mir ëmmer erëm maachen (wéi Resetten, Typographie, Gitter, Formen, Knäppchen, Nav a Lëschten). Foundation a Bootstrap bidden allebéid Ënnerstëtzung fir reaktiounsfäeg Designen duerch d'Benotzung vun Helfercoursen. Béid sinn gutt dokumentéiert a sinn op der Strooss getest ginn, sou datt Dir se mat Vertraue benotze kënnt.
Een Haaptunterschied tëscht deenen zwee: Bootstrap baséiert op dem LESS System fir CSS Virveraarbechtung, wärend d'Fondatioun op Sass baséiert. Ech hu léiwer Sass wéi MANNER wéinst senge zousätzleche Fäegkeeten, awer béid Sass an MANNER squashen traditionell CSS a Stécker.
E leschte Gedanken iwwer Kaderen. Fir déi, déi net wëllen deen extra Opschwong vun engem anere säi Kader ierwen, betruecht eng bestehend ze plécken a se op déi blo Schanken ze sträifen, oder Kiischte plécken vun e puer fir Är eege ze rullen. Egal wéi, et gëtt wierklech kee Grond all Kéier vun Ufank un.
Schlussgedanken
Wëllt Dir méi Kontrolle wéi Ären Design endlech ausgesäit? Beweegt méi Prozesser upstream op Code. HTML5 bréngt endlech e Sënn fir den DOM. Gutt Riddance bis Onsënn DOCTYPEs an Divitis. CSS3 ass den neie Photoshop: Lineargradienten, Grenzradius a Boxeschatten FTW! A mat Tools wéi Bootstrap, Foundation, Sass a jQuery war den Design upstream op de Code bewegen ni méi einfach.
Entdeckt 55 erstaunlech Beispiller vun HTML5 iwwer bei Creative Bloq.
