Conţinut
- Avantajele proiectării cu cod
- Mai întâi datele
- Bunătate mobilă gratuit
- Găsirea unui limbaj comun
- Învață mai repede
- Iterație rapidă
- Timp mai rapid pentru lansare
- De ce HTML5?
- Atributul de date magice
- CSS3 - este noul Photoshop
- Sass + Compass: magic delicios
- jQuery: oh, da poți
- Cadre
- Gânduri finale
Acest articol a apărut pentru prima dată în numărul 235 al revistei .net - cea mai vândută revistă din lume pentru designeri și dezvoltatori de web.
Nu am fost niciodată un mare fan al lucrărilor mai mult decât era necesar. Am tendința de a evalua metodele și instrumentele pe baza capacității lor de a mă face mai eficientă pe mine sau pe echipa mea. Cât de repede ne duc la un produs funcțional? Cât de eficienți sunt ei în comunicare? Rămân în afara drumului nostru?
De-a lungul anilor, mi-am adaptat procesul și instrumentele de proiectare. Îmi imaginez că voi continua să fac asta. Aceasta este natura proiectării pentru tehnologie și web. Această industrie este în continuă evoluție; procesul și instrumentele noastre trebuie să evolueze și ele.
HTML5 și CSS3 facilitează trecerea mai ușoară a procesului de proiectare în amonte - departe de Photoshop și mai mult către un design viu, care respira. Instrumente precum Foundation, Bootstrap și jQuery fac ca mutarea mai multă a procesului dvs. de proiectare să codeze mai accesibil.
Avantajele proiectării cu cod
În primul rând, nu pledez pentru eliminarea Photoshop-ului sau a oricărui alt editor de design vizual din fluxul de lucru. În schimb, mă voi concentra asupra avantajelor mutării acestui design în cod mai devreme decât mai târziu.
Mai întâi datele
Lucrul care mi-a plăcut întotdeauna despre proiectarea cu HTML este că încurajează gândirea dintr-o perspectivă bazată pe date. În schimb, folosind programe de desen precum Illustrator, OmniGraffle sau Balsamiq, începeți cu o casetă și o completați cu date.
În HTML construiți DOM (model de obiect document), cam ca și cum ați construi un cuprins. Este o întoarcere la proiectarea informațiilor adevărate, cu ierarhii semnificative. HTML5 face un pas mai departe cu adăugarea de noi elemente semantice: articol, secțiune, antet, deoparte, subsol și așa mai departe. Această abordare bazată pe primele date se combină frumos cu design-urile mobile primare, receptive.
Bunătate mobilă gratuit
Dacă citiți acest lucru, probabil că proiectați pentru mobil. Și șansele sunt că va trebui să proiectezi un formular sau două. Cu HTML5, ai noroc. Înainte de HTML5, tipurile de introducere erau aproape un câmp text sau o parolă. HTML5 a introdus o serie de tipuri de intrare suplimentare, inclusiv:
input type = "email"> input type = "tel"> input type = "url"> input type = "date"> input type = "date-time">
Ceea ce este cu adevărat minunat la aceste tipuri de intrare suplimentare, unice, este că browserele mobile de pe iOS și Android le recunosc și schimbă automat o tastatură conștientă de context - fără a necesita pluginuri sau hack-uri speciale jQuery. Oh, și dacă browserul dvs. nu știe ce anume input type = "email"> este, atunci este implicit doar o introducere de text.
Găsirea unui limbaj comun
„Este minunat modul în care designerii și dezvoltatorii noștri pot lucra în aceeași limbă” - John Drago, dezvoltator de aplicații la Inflection.
Vedeți dacă sună familiar. Sunt într-o sală de conferințe cu o jumătate de duzină de dezvoltatori de aplicații de pe server, care pot codifica cercuri în jurul meu în Ruby, Python, Java sau .NET. Sunt singurul designer. Câteva dintre sugestiile mele sunt inițial respinse ca fiind prea complicate pentru a fi implementate. Mă îndrept spre tablă și încep să scriu niște HTML și CSS pe tablă pentru modul în care ar putea fi implementat designul. Dintr-o dată, tonul conversației se schimbă și unul dintre dezvoltatori spune cu reticență: „Ei bine, da - dacă o facem așa, ar putea funcționa”.
Mutarea mai mult a procesului meu de proiectare în cod a îmbunătățit conversațiile cu dezvoltatorii. Există un strat suplimentar de respect câștigat prin știința să vă creați desenele în cod. Nu trebuie să fii expert pentru a câștiga acest respect. În timp ce abilitățile mele HTML și CSS sunt solide, abilitățile mele JavaScript sunt, în cel mai bun caz, mediocre. Și nu sunt timid să recunosc asta. Cu toate acestea, atunci când lucrăm cu frontend sau dezvoltatori de pe server, faptul că putem vorbi într-o limbă comună sau să ne întâlnim la jumătatea drumului este un avantaj imens.
Învață mai repede
În timp ce cadrele de sârmă și compozitele vizuale pot ajuta la planificare, aceste artefacte statice sunt teoretice. De câte ori ați încercat să explicați o interacțiune cuiva, doar ca să îi răspundeți: „Cred că va trebui să o văd”. Cu cât ajungi mai repede la un prototip, ceva cu care oamenii pot interacționa, cu atât mai repede poți experimenta designul și vei vedea dacă ideile funcționează.
Iterație rapidă
Când a fost ultima dată un design final care a fost livrat la producție care s-a potrivit exact cu calculul dvs. Photoshop? Aproape niciodată. Odată cu proiectarea produselor digitale, schimbarea are loc în mod constant. Mai mult, modificări precum creșterea dimensiunii titlurilor dvs. de la 22pt la 24pt pe câteva zeci de ecrane pot dura ore în Photoshop. Obiectele inteligente vă oferă un anumit nivel de design orientat pe obiecte în Photoshop. Din păcate, majoritatea designerilor vizuali pe care îi cunosc nu folosesc suficient obiectele inteligente. Cu CSS, deoarece încurajează o abordare mai sistematică a proiectării, modificările tipografice durează minute în loc de ore.
Dar schimbarea gradienților liniari pe toate butoanele dvs.? Sau de mărimea unui chenar? Ce zici de trecerea de la colțurile pătrate la cele rotunjite de 2 px? În Photoshop, acest lucru poate dura câteva ore și trebuie totuși să îl codificați. Abilitatea de a proiecta în cod vă ajută să evitați călătoria dus-întors înapoi în Photoshop pentru a itera pe designul vizual. Când mutați aceste modificări în amonte în cod, folosind CSS3 și Sass (pe care le voi trece mai târziu în acest articol) acestea se pot întâmpla în timp real și pot dura doar câteva minute.
Timp mai rapid pentru lansare
De-a lungul anilor, pe măsură ce treceam mai mult din fluxul meu de lucru de proiectare în amonte în cod, am experimentat o îmbunătățire reală - o reducere de aproximativ 20 până la 30 la sută a timpului de introducere pe piață. Cu cât fac mai mult acest lucru, cu atât mai puțin timp petrec duplicarea eforturilor. Cheltuiesc mai puține cicluri mergând în Photoshop sau Fireworks și apoi repet lucrarea în cod.
La un moment dat, designul trebuie să se interfețe cu un anumit tip de backend, indiferent dacă este vorba de o aplicație CMS, Rails sau altceva. Deoarece majoritatea lucrărilor mele de proiectare sunt în cod, integrarea are loc mai devreme decât mai târziu. Acum câțiva ani, unul dintre clienții mei, PointRoll, a trecut de la prototip la producție în cinci zile.
De ce HTML5?
HTML5 este mai ușor decât versiunile anterioare de HTML. Luați de exemplu declarația de tip document. În versiunile anterioare de HTML, DOCTIP arata cam asa:
! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.1 // EN" "http://www.w3.org/TR/xhtml11/DTD/ xhtml11.dtd">
Și au existat șase versiuni diferite. Din fericire HTML5 DOCTIP arata asa:
! DOCTYPE HTML>
Serios. Asta este. Șocant de simplu.
Când creați o pagină HTML standard, există o serie de elemente comune, cum ar fi un antet, zona de conținut principal, bara laterală și subsol. Sunt sigur că ați mai văzut așa ceva:
div id = "header> div id =" nav "> / div> / div> div id =" main "> div id =" sidebar "> / div> / div> div id =" footer "> / div>
Nimic ieșit din comun acolo. Dar odată completat cu conținut, acest șablon se transformă în supă div. În schimb, cu noile elemente semantice HTML5, veți obține ceva mult mai simplu și mai ușor de scanat, ca acesta:
header> nav> / nav> / header> article> aparte> / aparte> / articol> subsol> / subsol>
Uită-te la asta. Ceva care are sens.
Atributul de date magice
HTML5 vine cu un alt cârlig minunat care vă oferă posibilitatea de a vă crea propriul sens semantic: date-. Anterior, dacă doreați să atribuiți ceva semnificativ unui element DOM, erați limitat la ID-uri, clase și roluri.
Din păcate, ID-urile trebuie să fie unice. Clasele sunt universale (yippee!), Dar folosirea lor se poate transforma rapid într-o mizerie. Rolurile sunt un activ subutilizat care oferă un sens semnificativ pentru ARIA. Recent, am folosit date - pentru o platformă de analiză a urmăririi evenimentelor pe care o dezvoltăm la Inflection.Suntem mari fani ai testării design-urilor noastre. Când lucrăm la aplicații sau pagini care au o mare interactivitate, am dori să avem o perspectivă mai detaliată asupra implicării clienților în cadrul paginii.
Introduceți fișierul date-. Cu acesta puteți atribui, transmite și conecta la un model de semnificație „definiți-vă propriul”. De exemplu, puteți face acest lucru:
input type = "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 ">
Putem atașa un ascultător cu JavaScript la pagină și de fiecare dată când un client trece deasupra sau face clic pe acest buton, putem urmări acea activitate. În loc să poată urmări doar pe cineva înregistrat prin OAuth pe Twitter, putem vedea că a plutit peste Facebook, apoi Twitter, apoi LinkedIn și apoi a decis în cele din urmă să aleagă Twitter pentru modelul lor OAuth.
Imaginați-vă că extindeți acest lucru la un site precum Pinterest sau noul design Myspace, unde clienții glisează și plasează plăci pentru a le reordona în funcție de interes. Sau, eventual, să ascundă dale de care nu sunt interesați date- atributul vă permite să atașați sau să atribuiți un strat suplimentar de semnificație semantică lucrurilor pe care le puteți defini. Pentru site-urile și aplicațiile care se bazează foarte mult pe Ajax, acestea oferă oportunități nelimitate.
CSS3 - este noul Photoshop
CSS3 a adus un nivel cu totul nou de proiectare a aspectului, care obișnuia să necesite imagini de fundal, felii și tehnica infamă a „ușilor glisante”. Din fericire, totul a trecut din trecut.
Să aruncăm o privire la realizarea unui buton elegant cu un gradient liniar, colțuri rotunjite, umbră de text care îi conferă un efect frumos de apăsare a literelor și o strălucire în cursă. Învățarea acestor tehnici va parcurge un drum lung. Fiecare dintre ele poate fi utilizat independent, sau în diverse combinații pentru a scoate aproape oricare dintre actualitatea vizuală curentă care trece pe web astăzi.
Mai întâi, să facem câteva ajustări la valoarea implicită buton> și input type = "submit"> elemente. Presupunând că utilizați una dintre resetările CSS standard, vom adăuga doar o mică cameră pentru dimensionare și respirație.
/ * Butoane butoane, ale căror butoane au primit. ======================================= * * / button, input [type = "submit"] {height: 2.7em; umplutură: .4em .7em; înălțimea liniei: 1,9; }
Protip: Butoanele și intrările care sunt trimiteri pot fi dificil de restilizat. Am constatat că, ajustând înălțimea liniei la 1,6 sau mai mult, puteți evita hack-ul de a avea nevoie de o divizare suplimentară sau de un interval în interiorul buton> etichetă.
Acum ne-am „rezolvat” problema cu butonul, putem crea un .btn clasa pentru a ne oferi un buton frumos și curat, cu colțuri rotunjite, un gradient liniar, contur și acel aspect tipografic.
.btn {display: inline-block; chenar: 1px solid # d4d4cc; -moz-border-radius: 4px; -webkit-border-radius: 4px; raza chenarului: 4px; umplutură: .4em .7em; background: # edeff2; fundal: -webkit-gradient (liniar, 0% 0%, 0% 100%, de la (#fefefe), color-stop (0,55, # edeff2), la (# e4e6e9)); background: -moz-linear-gradient (centru sus, #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; culoare: # 6c7786; dimensiunea fontului: 1.1em; text-shadow: #fefefe 1px 0 1px; înălțimea liniei: 1,375em; cursor: pointer; }
Și apoi un efect de plutire frumos cu o strălucire subtilă folosind cutie-umbră metodă:
.btn: hover, .btn: focus {-moz-box-shadow: # 129ceb 0px 0px 2px; -webkit-box-shadow: # 129ceb 0 0 2px; box-shadow: # 129ceb 0 0 2px; fundal: # e6e9eb; fundal: -webkit-gradient (liniar, 0% 0%, 0% 100%, de la (# f7f7f7), color-stop (0,55, # f6f6f7), la (# e6e9eb)); fundal: -moz-lineargradient (centru sus, # f7f7f7, # f6f6f7 55%, # e6e9eb); culoare: # 45484b; text-shadow: rgb (255,255,255) 1px 1px 0; border-color: # c9c9c0; }
Acum, nu sunt un mare fan al scrierii codului de gradient liniar. Este lung și confuz. După cum puteți vedea, am inclus doar versiunea pentru -moz, -webkit, și modelul standard. Dacă doriți să includeți versiunile -o și -ms, va trebui să dublați codul.
Există alte două opțiuni. Unul este un generator CSS3; există mai multe disponibile pe web, inclusiv ColorZilla. Dar dacă vrei să-ți intensifici puțin jocul, ia în considerare scufundarea în Sass: combinat cu Compass, este un dar de la Dumnezeu.
Sass + Compass: magic delicios
Puteți înceta să sperați la ediția CSS4 unicorn. Este aici și se numește Sass + Compass. Sass înseamnă Syntactically Awesome Stylesheets: moștenești toate beneficiile tradiționale ale CSS3 cu bucuriile adăugate de variabile, mixine, extensoare și alte bunătăți.
Recent am refactorizat un fișier CSS de 5.000 de linii care avea mai mult de 30 de variante pe aceeași nuanță de albastru. Cu Sass, am înlocuit fiecare variantă cu acest cod:
culoare: $ albastru;
Prin definire $ albastru in al meu _variabile.scss fișier, pot crea o culoare implicită la care se poate referi fiecare fișier CSS sau SCSS. Oricine scrie CSS poate folosi $ albastru și nu trebuie să vă faceți griji cu privire la utilizarea unui picurator, găsirea unui cod hex sau a culorilor RGB, RGBA sau HSL.
Vă amintiți codul de gradient liniar? În loc să scrieți mai multe linii de cod, ce zici de acest lucru:
@include fundal (gradient liniar (# b1cfdc, # 7a9cac));
Lasă-i pe Sass și Compass să facă greutăți mari și să genereze sintaxa corectă pentru tine: gata. Să presupunem că doriți o versiune mai închisă sau mai deschisă a unei culori. Puteți muta picuratorul în Photoshop sau pur și simplu utilizați comenzile de luminare / întunecare din Sass:
@include fundal (gradient liniar (întunecați ($ litegray, 2%), întunecați ($ alb murdar, 5%)));
Acest lucru va crea un gradient liniar cu un 2% întunecat $ lite-gri iar 5% s-au întunecat aproape alb. Voil! Nici nu aveți nevoie de codurile HEX sau RGB.
jQuery: oh, da poți
Am de făcut o mărturisire. JavaScript a fost folosit pentru a mă intimida. Apoi am găsit jQuery. Nu voi pretinde că sunt un guru JavaScript, dar sunt destul de încrezător că pot realiza aproape orice fel de tranziție sau funcție de care am nevoie pentru a utiliza jQuery.
Luați, de exemplu, posibilitatea de a afișa un număr de telefon secundar introdus pe ecran făcând clic pe un link Adăugați un număr nou. Folosind jQuery, pur și simplu scrieți acest lucru:
// - Dezvăluire progresivă - // $ ('. New-number'). Faceți clic pe (funcția () {$ ('. Alt-number'). FadeIn ('rapid');});
Căutați ceva mai avansat? Probabil că există un plug-in pentru acesta. Comportamentele de bază sunt ușoare, iar cele complexe sunt accesibile cu jQuery.
Cadre
Două dintre cele mai robuste cadre de astăzi sunt Foundation și Bootstrap. Acum, înainte de a respinge cadrele CSS, permiteți-mi să vă întreb ceva. Folosiți jQuery? Ruby on Rails? Django? Toate cadrele.
La fel ca jQuery și RoR, Foundation și Bootstrap s-au născut din recunoașterea faptului că există un număr destul de mare de lucruri pe care le facem mereu (cum ar fi resetările, tipografia, grilele, formularele, butoanele, navigarea și listele). Foundation și Bootstrap oferă ambele suport pentru design-uri receptive prin utilizarea claselor de ajutor. Ambele sunt bine documentate și au fost testate pe drum, astfel încât să le puteți folosi cu încredere.
O diferență cheie între cele două: Bootstrap se bazează pe sistemul LESS pentru preprocesare CSS, în timp ce Foundation se bazează pe Sass. Prefer Sass decât LESS din cauza capacităților sale suplimentare, dar atât Sass, cât și LESS squash CSS tradițional în bucăți.
Un ultim gând asupra cadrelor. Pentru cei care nu doresc să moștenească balonarea suplimentară a cadrului altcuiva, luați în considerare alegerea unuia existent și dezbrăcarea acestuia până la oasele goale sau culegerea de cireșe de la câțiva pentru a vă rula. Oricum ar fi, nu există niciun motiv să începem de la zero de fiecare dată.
Gânduri finale
Doriți un control mai mare asupra modului în care rezultă în cele din urmă designul dvs.? Mutați mai multe procese în amonte către cod. HTML5 aduce în sfârșit un sens DOM-ului. Bună scutire de aiurea DOCTIPs și divită. CSS3 este noul Photoshop: gradienți liniari, borderradius și box-shadows FTW! Și cu instrumente precum Bootstrap, Foundation, Sass și jQuery, mutarea designului în amonte către cod nu a fost niciodată mai ușoară.
Descoperiți 55 de exemple uimitoare de HTML5 la Creative Bloq.
