Sadržaj
- Prednosti dizajniranja s kodom
- Prvo podaci
- Mobilna dobrota besplatno
- Pronalaženje zajedničkog jezika
- Uči brže
- Brza iteracija
- Brže vrijeme za lansiranje
- Zašto HTML5?
- Magični atribut podataka
- CSS3 - to je novi Photoshop
- Sass + Compass: čarobno ukusno
- jQuery: oh, da možeš
- Okviri
- Završne misli
Ovaj se članak prvi put pojavio u broju 235 časopisa .net - najprodavanijeg svjetskog časopisa za web dizajnere i programere.
Nikad nisam bio veliki ljubitelj obavljanja bilo kakvog posla više nego što je potrebno. Sklon sam procjenjivanju metoda i alata na temelju njihove sposobnosti da učinim mene ili moj tim učinkovitijim. Koliko brzo nas dovode do radnog proizvoda? Koliko su učinkoviti u komunikaciji? Drže li nam se dalje s puta?
Tijekom godina prilagodio sam svoj dizajn i alate. Pretpostavljam da ću to i dalje činiti. To je priroda dizajniranja za tehnologiju i web. Ova se industrija neprestano razvija; moraju se razvijati i naš proces i alati.
HTML5 i CSS3 olakšavaju prijelaz više procesa dizajna uzvodno - dalje od Photoshopa i više prema živom dizajnu koji diše. Alati kao što su Foundation, Bootstrap i jQuery čine prelazak više vašeg procesa dizajniranja na kôd pristupačnijim.
Prednosti dizajniranja s kodom
Prvo, ne zagovaram ispuštanje Photoshopa ili bilo kojeg drugog uređivača vizualnog dizajna iz vašeg tijeka rada. Umjesto toga, usredotočit ću se na blagodati premještanja tog dizajna u kod prije nego kasnije.
Prvo podaci
Ono što mi se uvijek sviđalo kod dizajniranja s HTML-om jest to što potiče razmišljanje iz perspektive koja je prva za podatke. Suprotno tome, koristeći programe za crtanje poput Illustrator, OmniGraffle ili Balsamiq, započinjete s okvirom i popunjavate ga podacima.
U HTML-u konstruirate DOM (objektni model dokumenta), nekako poput izrade sadržaja. To je povratak pravom informacijskom dizajnu sa smislenim hijerarhijama. HTML5 ide korak dalje dodavanjem novih semantičkih elemenata: članak, odjeljak, zaglavlje, sa strane, podnožje i tako dalje. Ovaj pristup prijenosu podataka lijepo se kombinira s dizajnom koji reagira na mobilne uređaje.
Mobilna dobrota besplatno
Ako ovo čitate, vjerojatno dizajnirate za mobitel. A šanse su da ćete morati dizajnirati obrazac ili dva. S HTML5 imate sreće. Prije HTML5, vaše vrste unosa bile su gotovo tekstualno ili lozinko polje. HTML5 je predstavio niz dodatnih vrsta unosa, uključujući:
input type = "email"> input type = "tel"> input type = "url"> input type = "date"> input type = "date-time">
Ono što je zaista sjajno kod ovih dodatnih, jedinstvenih vrsta unosa je da ih mobilni preglednici na iOS-u i Androidu prepoznaju i automatski zamjenjuju kontekstualno svjesnu tipkovnicu - bez posebnih dodataka ili hakova za jQuery. Oh, i ako vaš preglednik ne zna koji input type = "email"> je, onda je samo zadani način unosa teksta.
Pronalaženje zajedničkog jezika
"Sjajno je kako naši dizajneri i programeri mogu raditi na istom jeziku" - John Drago, programer aplikacija u Inflectionu.
Pogledajte zvuči li ovo poznato. Nalazim se u konferencijskoj sobi s pola tuceta razvojnih programa na strani poslužitelja koji mogu kodirati krugove oko mene u Ruby, Python, Java ili .NET. Ja sam jedini dizajner. Nekoliko mojih prijedloga u početku se odbacuje kao previše komplicirano za provedbu. Prilazim ploči i počinjem pisati neki HTML i CSS na ploču kako bi se dizajn mogao implementirati. Odjednom se ton razgovora promijeni i jedan od programera nevoljko kaže: "Pa, da - ako to učinimo na taj način, moglo bi uspjeti."
Premještanjem više mog postupka dizajniranja u kod poboljšali smo razgovore s programerima. Dodatni je sloj poštovanja stečen znanjem kako oblikovati svoje dizajne u kodu. Ne morate biti stručnjak da biste zaslužili to poštovanje. Iako su moje HTML i CSS vještine solidne, moje JavaScript sposobnosti su u najboljem slučaju osrednje. I ne stidim se to priznati. Ipak, kada radimo s frontendom ili programerima na strani poslužitelja, činjenica da možemo razgovarati zajedničkim jezikom ili se upoznati na pola puta, velika je prednost.
Uči brže
Iako žičani okviri i vizualni kompoziti mogu pomoći u planiranju, ovi statički artefakti su teoretski. Koliko ste puta pokušali nekome objasniti interakciju, samo da bi im netko odgovorio: "Pretpostavljam da ću to morati vidjeti." Što prije dođete do prototipa, s čim ljudi mogu komunicirati, to prije možete iskusiti dizajn i vidjeti rade li ideje.
Brza iteracija
Kada je zadnji put konačni dizajn koji je poslan u proizvodnju točno odgovarao vašem Photoshop comp-u? Skoro nikad. Kod digitalnog dizajna proizvoda promjene se događaju stalno. Nadalje, promjene poput povećanja veličine vaših naslova s 22 na 24 pt na nekoliko desetaka zaslona mogu potrajati satima u Photoshopu. Pametni objekti pružaju vam određenu razinu objektno orijentiranog dizajna u Photoshopu. Nažalost, većina vizualnih dizajnera koje poznajem ne koriste dovoljno pametne objekte. Uz CSS, jer potiče sustavniji pristup dizajnu, tipografske promjene traju minute umjesto sati.
Što je s promjenom linearnih gradijenata na svim tipkama? Ili veličina obruba? Što kažete na promjenu s kvadratnih kutova na zaobljene 2px? U Photoshopu to može potrajati satima i još uvijek ga morate kodirati. Sposobnost dizajniranja u kodu pomaže u izbjegavanju povratka u Photoshop za ponavljanje vizualnog dizajna. Kada te promjene premjestite uzvodno u kôd, pomoću CSS3 i Sass (o čemu ću govoriti kasnije u ovom članku), mogu se dogoditi u stvarnom vremenu i potrajati samo nekoliko minuta.
Brže vrijeme za lansiranje
Tijekom godina, dok sam veći dio svog dizajnerskog tijeka pretočio u kôd, doživio sam stvarno poboljšanje - otprilike 20 do 30 posto smanjenja vremena za izlazak na tržište. Što više to radim, manje vremena trošim na dupliciranje napora. Provodim manje ciklusa ulazeći u Photoshop ili Vatromet i ponavljajući rad u kodu.
U nekom trenutku dizajn mora imati sučelje s nekom vrstom pozadine, bilo da je to CMS, aplikacija Rails ili nešto drugo. Kako je većina mog dizajnerskog rada u kodu, integracija se događa prije nego kasnije. Prije par godina, jedan od mojih klijenata, PointRoll, za pet dana prešao je iz prototipa u proizvodnju.
Zašto HTML5?
HTML5 je lakši od prethodnih verzija HTML-a. Uzmimo za primjer izjavu o tipu dokumenta. U prethodnim verzijama HTML-a, DOKTIP izgledao otprilike ovako:
! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.1 // EN" "http://www.w3.org/TR/xhtml11/DTD/ xhtml11.dtd">
A bilo je šest različitih verzija. Srećom HTML5 DOKTIP izgleda ovako:
! DOCTYPE HTML>
Ozbiljno. To je to. Šokantno jednostavno.
Prilikom izrade standardne HTML stranice postoji niz uobičajenih elemenata, poput zaglavlja, područja glavnog sadržaja, bočne trake i podnožja. Siguran sam da ste već vidjeli nešto slično:
div id = "header> div id =" nav "> / div> / div> div id =" main "> div id =" sidebar "> / div> / div> div id =" footer "> / div>
Tamo ništa neobično. No, jednom ispunjen sadržajem, ovaj se predložak pretvara u div juhu. Suprotno tome, s novim semantičkim elementima HTML5 dobivate nešto puno jednostavnije i lakše za skeniranje, poput ovog:
zaglavlje> nav> / nav> / zaglavlje> članak> u stranu> / u stranu> / članak> podnožje> / podnožje>
Pogledajte ovo. Nešto što ima smisla.
Magični atribut podataka
HTML5 dolazi s još jednom sjajnom udicom koja vam daje mogućnost izrade vlastitog semantičkog značenja: podaci-. Prije ste, ako ste željeli dodijeliti nešto značajno DOM elementu, bili ograničeni na ID-ove, klase i uloge.
Nažalost, osobne iskaznice moraju biti jedinstvene. Predavanja su univerzalna (yippee!), Ali njihovo korištenje može se brzo pretvoriti u nered. Uloge su nedovoljno iskorišteno sredstvo koje ARIA-i pruža značajno značenje. Nedavno koristim podatke - za platformu za analitiku praćenja događaja koju razvijamo u Inflectionu.Veliki smo ljubitelji testiranja naših dizajna. Kada radimo na aplikacijama ili stranicama koje imaju veliku interaktivnost, željeli bismo imati detaljniji uvid u angažman kupaca na stranici.
Uđi podaci-. Pomoću nje možete dodijeliti, proslijediti i spojiti se na model značenja ‘definiraj svoj vlastiti’. Tako, na primjer, možete to učiniti:
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 ">
Na stranicu možemo priključiti slušatelj s JavaScriptom i svaki put kada korisnik pređe mišem ili klikne ovaj gumb, možemo pratiti tu aktivnost. Umjesto da samo možemo pratiti da se netko registrirao putem OAuth-a na Twitteru, možemo vidjeti da je lebdio iznad Facebooka, zatim Twittera, pa LinkedIna, a zatim je konačno odlučio odabrati Twitter za svoj OAuth model.
Zamislite da ovo proširite na web mjesto poput Pinteresta ili novi Myspace dizajn gdje kupci povlače i ispuštaju pločice kako bi ih preuredili na temelju interesa. Ili možda skrivanje pločica koje ih ne zanimaju podaci- atribut omogućuje vam dodavanje ili dodjeljivanje dodatnog sloja semantičkog značenja stvarima koje možete definirati. Web lokacijama i aplikacijama koje se u velikoj mjeri oslanjaju na Ajax otvara neograničene mogućnosti.
CSS3 - to je novi Photoshop
CSS3 donio je potpuno novu razinu dizajniranja izgleda i izgleda koji je prije zahtijevao pozadinske slike, kriške i zloglasnu tehniku "kliznih vrata". Srećom, to je sve prošlost.
Pogledajmo kako izraditi otmjeni gumb s linearnim gradijentom, zaobljenim kutovima, sjenkom teksta koja mu daje lijep efekt tiska slova i sjajem pri lebdenju. Učenje ovih tehnika ići će daleko. Svaki od njih može se koristiti samostalno ili u raznim kombinacijama za izvođenje gotovo bilo koje trenutne vizualne vrućine koja danas prevladava web.
Prvo napravimo nekoliko prilagodbi zadanog gumb> i input type = "submit"> elementi. Pod pretpostavkom da koristite jedno od standardnih resetiranja CSS-a, samo ćemo dodati malo prostora za dimenzioniranje i disanje.
/ * Gumbi s gumbima, čiji su gumbi. ========================================= * * / gumb, ulaz [type = "submit"] {visina: 2.7em; podloga: .4em .7em; visina crte: 1,9; }
Protip: Gumbi i ulazi koji su podnesci mogu biti nezgodno prilagoditi ih. Otkrio sam da podešavanjem visine crte na 1,6 ili veću možete izbjeći hack da vam treba dodatni div ili raspon unutar gumb> označiti.
Sada smo 'popravili' problem s gumbom, možemo stvoriti .btn razreda kako bismo dobili lijep gumb za čišćenje sa zaobljenim kutovima, linearnim gradijentom, obrisom i izgledom visokog tiska.
.btn {prikaz: inline-block; obrub: 1px solid # d4d4cc; -moz-radijus-granice: 4px; -webkit-radijus-granice: 4px; radijus obruba: 4px; podloga: .4em .7em; pozadina: # edeff2; pozadina: -webkit-gradijent (linearno, 0% 0%, 0% 100%, od (#fefefe), zaustavljanje boje (0,55, # edeff2), do (# e4e6e9)); pozadina: -moz-linearni gradijent (središnji vrh, #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; kutija-sjena: rgba (160,172,187, .7) 0 0 .2em 0; boja: # 6c7786; veličina fonta: 1,1em; sjena teksta: #fefefe 1px 0 1px; visina crte: 1.375em; kursor: pokazivač; }
A onda lijep efekt lebdenja s nježnim sjajem pomoću gumba kutija-sjena metoda:
.btn: lebdenje, .btn: fokus {-moz-box-shadow: # 129ceb 0px 0px 2px; -webkit-box-shadow: # 129ceb 0 0 2px; box-shadow: # 129ceb 0 0 2px; pozadina: # e6e9eb; pozadina: -webkit-gradijent (linearno, 0% 0%, 0% 100%, od (# f7f7f7), zaustavljanje boje (0,55, # f6f6f7), do (# e6e9eb)); pozadina: -moz-linearni gradijent (središnji vrh, # f7f7f7, # f6f6f7 55%, # e6e9eb); boja: # 45484b; sjena teksta: rgb (255,255,255) 1px 1px 0; boja obruba: # c9c9c0; }
Sad nisam veliki ljubitelj pisanja koda linearnog gradijenta. Dugo je i zbunjujuće. Kao što vidite, uključio sam samo verziju za -moz, -webkit, i standardni model. Ako želite uključiti verzije -o i -ms, morat ćete udvostručiti kôd.
Dvije su druge mogućnosti. Jedan je CSS3 generator; postoji nekoliko dostupnih na webu, uključujući ColorZilla. Ali ako želite malo pojačati svoju igru, razmislite o ronjenju na Sass: u kombinaciji s Compassom to je božji dar.
Sass + Compass: čarobno ukusno
Možete se prestati nadati izdanju jednoroga CSS4. Ovdje je i zove se Sass + Compass. Sass je kratica za Syntactically Awesome Styles Sheets: nasljeđujete sve tradicionalne blagodati CSS3-a s dodanim radostima varijabli, mixinima, ekstenderima i ostalim dodacima.
Nedavno sam refaktorirao CSS datoteku s 5000 linija koja je imala više od 30 varijacija iste plave nijanse. Sa Sassom sam svaku varijaciju zamijenio ovim kodom:
boja: $ plava;
Definiranjem $ plava u mojoj _varijable.scss datoteku, mogu stvoriti zadanu boju na koju se može pozivati svaka CSS ili SCSS datoteka. Svatko tko piše CSS može koristiti $ plava i ne morate brinuti da li ćete koristiti kapaljku za kap, pronaći hex kod ili RGB, RGBA ili HSL boju.
Sjećate se tog koda linearnog gradijenta? Umjesto da napišete nekoliko redaka koda, što kažete na ovo:
@uključi pozadinu (linearni gradijent (# b1cfdc, # 7a9cac));
Pustite Sass i Compass da naprave težak posao i generiraju ispravnu sintaksu za vas: gotovo. Recimo da želite tamniju ili svjetliju verziju boje. Možete pomicati kapicu u Photoshopu ili jednostavno upotrijebiti naredbe svjetli / zatamni u Sass:
@uključi pozadinu (linearni gradijent (zatamni ($ litegray, 2%), zatamni ($ bijelo, 5%)));
To će stvoriti linearni gradijent s 2% zamračenja $ lite-siva a 5% zamračeno prljavobijele. Voil! Ne trebaju vam ni HEX ili RGB kodovi.
jQuery: oh, da možeš
Moram priznati. JavaScript me koristio za zastrašivanje. Tada sam pronašao jQuery. Neću tvrditi da sam JavaScript guru, ali prilično sam uvjeren da mogu izvesti bilo kakav prijelaz ili funkciju koja mi treba za korištenje jQueryja.
Uzmimo za primjer mogućnost prikazivanja sekundarnog unosa telefonskog broja na ekranu klikom na vezu Dodaj novi broj. Koristeći jQuery, jednostavno napišete ovo:
// - Progresivno otkrivanje - // $ (’. New-number’). Click (function () {$ (’. Alt-number’). FadeIn (‘fast’);});
Tražite nešto naprednije? Vjerojatno postoji dodatak za to. Osnovna ponašanja su lagana, a složena su pristupačna uz jQuery.
Okviri
Dva najsnažnija okvira danas su Foundation i Bootstrap. Prije nego što odbacite CSS okvire, dopustite mi da vas nešto pitam. Koristite li jQuery? Ruby na tračnicama? Django? Svi okviri.
Baš poput jQueryja i RoR-a, Foundation i Bootstrap rođeni su iz spoznaje da postoji popriličan broj stvari koje radimo uvijek iznova (poput resetiranja, tipografije, rešetki, obrazaca, gumba, nav i popisa). Foundation i Bootstrap nude podršku za responzivni dizajn pomoću klasa pomoćnika. Oboje su dobro dokumentirani i testirani su na cesti, tako da ih možete pouzdano koristiti.
Jedna ključna razlika između njih dvije: Bootstrap se temelji na LESS sustavu za CSS predobradu, dok se Foundation temelji na Sass-u. Više volim Sass nego MANJE zbog njegovih dodatnih mogućnosti, ali i Sass i LESS skupljaju tradicionalni CSS na komade.
Posljednja misao o okvirima. Za one koji ne žele naslijediti dodatni napuhavanje tuđeg okvira, razmislite o odabiru postojećeg i skidanju do golih kostiju ili o brenju trešnje od nekolicine da biste sami valjali. U svakom slučaju, stvarno nema razloga svaki put krenuti od nule.
Završne misli
Želite veću kontrolu nad tim kako napokon ispada vaš dizajn? Premjestite više procesa uzvodno na kôd. HTML5 napokon unosi malo smisla u DOM. Dobar spas od besmisla DOKTIPs i divitis. CSS3 je novi Photoshop: linearni gradijenti, radijus okvira i FTW sjene! A s alatima kao što su Bootstrap, Foundation, Sass i jQuery, pomicanje dizajna uzvodno na kôd nikada nije bilo lakše.
Otkrijte 55 nevjerojatnih primjera HTML5-a na Creative Bloqu.
