Obsah
- Výhody navrhovania pomocou kódu
- Najskôr údaje
- Mobilná dobrota zadarmo
- Hľadanie spoločného jazyka
- Učte sa rýchlejšie
- Rýchla iterácia
- Rýchlejší čas uvedenia na trh
- Prečo HTML5?
- Magický atribút údajov
- CSS3 - je to nový Photoshop
- Sass + kompas: magicky vynikajúci
- jQuery: ach, áno, môžete
- Rámcov
- Záverečné myšlienky
Tento článok sa prvýkrát objavil v čísle 235 časopisu .net - najpredávanejšieho časopisu na svete pre webových dizajnérov a vývojárov.
Nikdy som nebol veľkým fanúšikom toho, aby som robil viac práce, ako bolo potrebné. Mám tendenciu hodnotiť metódy a nástroje na základe ich schopnosti zefektívniť mňa alebo môj tím. Ako rýchlo nás dostanú k funkčnému produktu? Ako efektívne sú v komunikácii? Zdržujú sa nám v ceste?
Za tie roky som upravil svoj návrhový proces a nástroje. Predpokladám, že v tom budem pokračovať. To je podstata navrhovania pre technológiu a web. Toto odvetvie sa neustále vyvíja; aj náš proces a nástroje sa musia vyvíjať.
Formáty HTML5 a CSS3 uľahčujú prechod väčšej časti procesu návrhu smerom nahor - od Photoshopu a viac smerom k živému a dýchajúcemu dizajnu. Nástroje ako Foundation, Bootstrap a jQuery uľahčujú presun väčšej časti vášho procesu návrhu do kódu.
Výhody navrhovania pomocou kódu
Po prvé, neobhajujem vylúčenie aplikácie Photoshop ani žiadneho iného editora vizuálneho dizajnu z vášho pracovného toku. Namiesto toho sa skôr než neskôr zameriam na výhody presunu tohto dizajnu do kódu.
Najskôr údaje
Na dizajne pomocou HTML sa mi vždy páčilo, že podporuje myslenie z pohľadu prvého údaja. Naopak, pomocou kresliacich programov ako Illustrator, OmniGraffle alebo Balsamiq začnete s rámčekom a naplníte ho dátami.
V HTML skonštruujete DOM (dokumentový objektový model), niečo ako keby ste vytvorili obsah. Ide o návrat k skutočnému informačnému dizajnu so zmysluplnými hierarchiami. HTML5 ide o krok vpred pridaním nových sémantických prvkov: článok, sekcia, hlavička, stranou, päta a podobne. Tento prístup založený na dátovom prenose sa dobre spája s responzívnym dizajnom mobilného telefónu.
Mobilná dobrota zadarmo
Ak toto čítate, pravdepodobne navrhujete pre mobilné zariadenia. Je pravdepodobné, že budete musieť navrhnúť formulár alebo dva. S HTML5 máte šťastie. Pred formátom HTML5 boli vaše typy vstupu v podstate buď textové, alebo heslo. HTML5 predstavil množstvo ďalších typov vstupu, vrátane:
input type = "email"> input type = "tel"> input type = "url"> input type = "date"> input type = "date-time">
Na týchto ďalších, jedinečných typoch vstupov je naozaj úžasné, že mobilné prehliadače v systémoch iOS a Android ich rozpoznávajú a automaticky vymieňajú kontextovo zodpovedajúcu klávesnicu - nie sú potrebné žiadne špeciálne doplnky ani hacky jQuery. Ach, a ak váš prehliadač nevie, čo vstupný typ = "email"> je, potom je iba predvolené zadávanie textu.
Hľadanie spoločného jazyka
„Je úžasné, ako môžu naši dizajnéri a vývojári pracovať v rovnakom jazyku“ - John Drago, vývojár aplikácií v spoločnosti Inflection.
Skontrolujte, či to znie povedome. Som v konferenčnej miestnosti s poltuctom vývojárov aplikácií na strane servera, ktorí dokážu kódovať kruhy okolo mňa v jazykoch Ruby, Python, Java alebo .NET. Som jediný dizajnér. Niektoré z mojich návrhov sú pôvodne zamietnuté ako príliš komplikované na implementáciu. Prejdem k tabuli a začnem na tabuľu písať nejaké HTML a CSS, ako by sa dal návrh implementovať. Náhle sa zmení tón konverzácie a jeden z vývojárov neochotne povie: „No, áno - ak to urobíme týmto spôsobom, mohlo by to fungovať.“
Presunutím väčšej časti môjho procesu návrhu do kódu sa zlepšili konverzácie s vývojármi. Tým, že viete, ako vytvoriť svoje návrhy v kóde, získate ďalšiu vrstvu rešpektu. Na získanie tejto úcty nemusíte byť odborníkom. Aj keď moje zručnosti v oblasti HTML a CSS fungujú ako skaly, moje znalosti JavaScriptu sú v najlepšom prípade priemerné. A nehanbím sa to pripustiť. Pri práci s frontendom alebo vývojármi na strane servera je skutočnosť, že môžeme hovoriť spoločným jazykom alebo sa stretneme na polceste, obrovskou výhodou.
Učte sa rýchlejšie
Aj keď drôtové rámy a vizuálne kompozity môžu pomôcť pri plánovaní, tieto statické artefakty sú teoretické. Koľkokrát ste sa pokúsili niekomu vysvetliť interakciu, len aby odpovedal: „Myslím, že to budem musieť vidieť.“ Čím skôr sa dostanete k prototypu, s čím môžu ľudia komunikovať, tým skôr môžete vyskúšať dizajn a zistiť, či nápady fungujú.
Rýchla iterácia
Kedy naposledy sa finálny dizajn dodaný do výroby presne zhodoval s vašim Photoshop compom? Takmer nikdy. S digitálnym dizajnom produktu sa zmeny dejú neustále. Ďalej môžu zmeny, ako napríklad zväčšenie veľkosti vašich nadpisov z 22 na 24 bodov na niekoľkých desiatkach obrazoviek, trvať vo Photoshope hodiny. Inteligentné objekty poskytujú vo Photoshope určitú úroveň objektovo orientovaného dizajnu. Bohužiaľ, väčšina vizuálnych návrhárov, ktorých poznám, nedostatočne využíva inteligentné objekty. Pretože s CSS podporuje systematickejší prístup k dizajnu, typografické zmeny trvajú namiesto hodín niekoľko minút.
Čo tak zmeniť lineárne prechody na všetkých vašich tlačidlách? Alebo veľkosť hranice? Čo tak zmeniť zo štvorcových rohov na 2px zaoblené? Vo Photoshope to môže trvať hodiny a stále si to musíte kódovať. Schopnosť navrhovať v kóde pomáha zabrániť tomu, aby ste sa vrátili do Photoshopu a iterovali o vizuálny dizajn. Keď presuniete tieto zmeny do kódu, pomocou CSS3 a Sass (ktorým sa budem venovať neskôr v tomto článku), môžu sa uskutočniť v reálnom čase a trvať len pár minút.
Rýchlejší čas uvedenia na trh
V priebehu rokov, keď som prechodil väčšiu časť svojho návrhového pracovného toku do kódu, som zaznamenal skutočné zlepšenie - asi 20 až 30 percentné zníženie času na uvedenie na trh. Čím viac to robím, tým menej času trávim duplikovaním úsilia. Trávim menej cyklov používaním Photoshopu alebo Fireworks a opakovaním práce v kóde.
V určitom okamihu musí dizajn prepojiť s nejakým typom backendu, či už je to aplikácia CMS, Rails alebo niečo iné. Pretože väčšina mojich dizajnérskych prác je v kóde, integrácia sa deje skôr ako neskôr. Pred pár rokmi prešiel jeden z mojich klientov, spoločnosť PointRoll, z prototypu do výroby za päť dní.
Prečo HTML5?
HTML5 je ľahší ako predchádzajúce verzie HTML. Vezmime si napríklad vyhlásenie o type dokumentu. V predchádzajúcich verziách kódu HTML sa znak DOCTYPE vyzeralo asi takto:
! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.1 // EN" "http://www.w3.org/TR/xhtml11/DTD/ xhtml11.dtd">
A bolo ich šesť rôznych verzií. Našťastie HTML5 DOCTYPE vyzerá takto:
! DOCTYPE HTML>
Vážne. To je všetko. Šokujúco jednoduché.
Pri vytváraní štandardnej stránky HTML existuje množstvo bežných prvkov, napríklad hlavička, oblasť hlavného obsahu, bočný panel a päta. Som si istý, že ste už niečo také videli:
div id = "header> div id =" nav "> / div> / div> div id =" main "> div id =" sidebar "> / div> / div> div id =" footer "> / div>
Nič neobvyklé. Po vyplnení obsahu sa však táto šablóna zmení na div polievku. Naproti tomu s novými sémantickými prvkami HTML5 získate niečo oveľa jednoduchšie a ľahšie skenovateľné, napríklad takto:
hlavička> nav> / nav> / hlavička> článok> stranou> / stranou> / článok> päta> / päta>
Pozrite sa na to. Niečo, čo má zmysel.
Magický atribút údajov
HTML5 prichádza s ďalším úžasným háčikom, ktorý vám dáva schopnosť vytvoriť si vlastný sémantický význam: údaje-. Ak ste predtým chceli prvkom DOM priradiť niečo zmysluplné, obmedzili ste sa iba na ID, triedy a roly.
ID musia byť, bohužiaľ, jedinečné. Triedy sú univerzálne (yippee!), Ale ich používanie sa môže rýchlo zmeniť na neporiadok. Roly sú nevyužitým majetkom, ktorý má pre ARIA významný význam. Nedávno používam dáta pre analytickú platformu na sledovanie udalostí, ktorú vyvíjame v spoločnosti Inflection.Sme veľkými fanúšikmi testovania našich dizajnov. Pri práci na aplikáciách alebo stránkach, ktoré majú veľkú mieru interaktivity, by sme chceli získať podrobnejší prehľad o interakcii so zákazníkmi na tejto stránke.
Zadajte znak údaje-. Pomocou neho môžete priradiť, postúpiť ďalej a zapojiť sa do modelu definovania vlastného významu. Môžete napríklad urobiť toto:
input type = "button" data-id = "facebook" dataregion = "main" data-event = "register"> typ vstupu = "tlačidlo" data-id = "twitter" dataregion = "main" data-event = "register "> input type =" button "data-id =" linkedin "dataregion =" main "data-event =" register ">
Na stránku môžeme pripojiť poslucháča s kódom JavaScript a kedykoľvek môže zákazník umiestniť kurzor myši alebo kliknúť na toto tlačidlo, môžeme túto aktivitu sledovať. Namiesto toho, aby sme mohli sledovať iba to, že niekto zaregistroval cez OAuth na Twitteri, vidíme, že umiestnil kurzor myši na Facebook, Twitter, LinkedIn a nakoniec sa rozhodol zvoliť pre svoj model OAuth Twitter.
Predstavte si, že by ste to mohli rozšíriť na stránky, ako je Pinterest, alebo na nový dizajn Myspace, kde zákazníci presúvajú dlaždice myšou a menia ich poradie na základe záujmu. Alebo prípadne skryť dlaždice, ktoré ich nezaujímajú údaje- atribút umožňuje pripojiť alebo priradiť ďalšiu vrstvu sémantického významu k veciam, ktoré môžete definovať. Pre weby a aplikácie, ktoré sa vo veľkej miere spoliehajú na Ajax, otvára neobmedzené príležitosti.
CSS3 - je to nový Photoshop
CSS3 priniesol úplne novú úroveň navrhovania vzhľadu a dojem, ktorý si vyžadoval obrázky na pozadí, rezy a neslávne známu techniku „posuvných dverí“. Našťastie je to všetko minulosť.
Poďme sa pozrieť na to, ako vytvoriť efektné tlačidlo s lineárnym prechodom, zaoblenými rohmi, tieňom textu, ktorý mu dodáva pekný efekt stlačenia písmen, a žiarou pri umiestnení kurzora myši. Naučiť sa tieto techniky bude trvať veľa. Každý z nich je možné použiť samostatne alebo v rôznych kombináciách na vytiahnutie takmer akejkoľvek z aktuálnych vizuálnych horúčav, ktoré dnes trendy na webe.
Najskôr urobíme niekoľko úprav predvoleného nastavenia tlačidlo> a vstupný typ = "odoslať"> prvkov. Za predpokladu, že použijete jedno zo štandardných resetovaní CSS, pridáme len malú veľkosť a dýchaciu miestnosť.
/ * Tlačidlá tlačidiel, ktorých tlačidlá sú k dispozícii. ======================================== * * / tlačidlo, vstup [type = "submit"] {výška: 2.7em; výplň: .4em .7em; výška čiary: 1,9; }
Protip: Tlačidlá a vstupy, ktoré sú odoslanými údajmi, môžu byť zložité. Zistil som, že úpravou výšky čiary na 1,6 alebo vyššej sa vyhnete hacku, keď budete potrebovať ďalší div alebo span vo vnútri tlačidlo> značka.
Teraz sme náš problém s tlačidlami „opravili“ a môžeme vytvoriť .btn triedy, aby sme dostali pekné čisté tlačidlo so zaoblenými rohmi, lineárnym gradientom, obrysom a týmto kníhtlačovým vzhľadom.
.btn {display: inline-block; orámovanie: 1px pevný # d4d4cc; -moz-border-radius: 4px; -webkit-border-radius: 4px; polomer hranice: 4px; výplň: .4em .7em; pozadie: # edeff2; pozadie: -webkit-gradient (lineárny, 0% 0%, 0% 100%, od (#fefefe), zastavenie farieb (0,55, # edeff2), do (# e4e6e9)); pozadie: -moz-linear-gradient (center top, #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; tieň boxu: rgba (160 172 187, .7) 0 0 .2em 0; farba: # 6c7786; veľkosť písma: 1.1em; textový tieň: #fefefe 1px 0 1px; výška riadku: 1,375em; kurzor: ukazovateľ; }
A potom pekný efekt vznášania s jemnou žiarou pomocou tieňový box metóda:
.btn: hover, .btn: focus {-moz-box-shadow: # 129ceb 0px 0px 2px; -webkit-box-shadow: # 129ceb 0 0 2px; tieň boxu: # 129ceb 0 0 2px; pozadie: # e6e9eb; pozadie: -webkit-gradient (lineárny, 0% 0%, 0% 100%, od (# f7f7f7), zastavenie farieb (0,55, # f6f6f7), do (# e6e9eb)); pozadie: -moz-lineargradient (stred hore, # f7f7f7, # f6f6f7 55%, # e6e9eb); farba: # 45484b; textový tieň: rgb (255 255 255) 1px 1px 0; border-color: # c9c9c0; }
Teraz nie som veľkým fanúšikom písania kódu lineárneho gradientu. Je to dlhé a mätúce. Ako vidíte, zahrnul som iba verziu pre -moz, -webkita štandardný model. Ak chcete zahrnúť verzie -o a -ms, budete musieť zdvojnásobiť kód.
Existujú dve ďalšie možnosti. Jedným z nich je generátor CSS3; na webe je niekoľko dostupných, vrátane ColorZilla. Ak si však chcete trochu zintenzívniť hru, zvážte ponor do Sassu: v kombinácii s Compassom je to dar z nebies.
Sass + kompas: magicky vynikajúci
Môžete prestať dúfať v vydanie jednorožca CSS4. Je to tu a volá sa Sass + Compass. Sass znamená Syntactically Awesome Styles Sheets: dedíte všetky tradičné výhody CSS3 s pridanými radosťami z premenných, mixinov, extendérov a ďalších dobrôt.
Nedávno som zrekonštruoval 5 000 riadkový súbor CSS, ktorý mal viac ako 30 variácií na rovnaký odtieň modrej. So Sassom som všetky variácie nahradil týmto kódom:
farba: $ modrá;
Definovaním $ modrá v mojom _variables.scss súbor, môžem vytvoriť predvolenú farbu, na ktorú môže odkazovať každý súbor CSS alebo SCSS. Ktokoľvek, kto píše CSS, môže použiť $ modrá a nemusíte sa báť používať kvapkadlo, nájsť hexadecimálny kód alebo farbu RGB, RGBA alebo HSL.
Pamätáte si ten lineárny gradientový kód? Namiesto toho, aby ste napísali niekoľko riadkov kódu, čo takto:
@include background (linear-gradient (# b1cfdc, # 7a9cac));
Nechajte Sass a Compass vykonať ťažké práce a vygenerovať pre vás správnu syntax: hotovo. Povedzme, že chcete tmavšiu alebo svetlejšiu verziu farby. Môžete kvapkadlom pohybovať vo Photoshope alebo jednoducho použiť príkazy zosvetlenie / stmavenie v aplikácii Sass:
@include background (linear-gradient (darken ($ litegray, 2%), darken ($ off-white, 5%)));
To vytvorí lineárny gradient s 2% stmavnutím $ svetlošedá a 5% tmavé sivobiely. Voil! Nepotrebujete ani kódy HEX alebo RGB.
jQuery: ach, áno, môžete
Musím sa priznať. JavaScript ma zastrašoval. Potom som našiel jQuery. Nebudem tvrdiť, že som guru JavaScriptu, ale som si dosť istý, že dokážem dokončiť akýkoľvek druh prechodu alebo funkcie, ktoré potrebujem na používanie jQuery.
Vezmime si napríklad možnosť zobraziť na obrazovke zadanie sekundárneho telefónneho čísla kliknutím na odkaz Pridať nové číslo. Pomocou jQuery jednoducho napíšete toto:
// - Progresívne odhalenie - // $ („. Nové číslo“). Kliknutie (funkcia () {$ („. Alt-číslo“). FadeIn („rýchle“);});
Hľadáte niečo pokročilejšie? Pravdepodobne existuje doplnok. Základné správanie je ľahké a zložité pomocou jQuery.
Rámcov
Dva z najrobustnejších rámcov súčasnosti sú Foundation a Bootstrap. Predtým, ako odmietnete rámce CSS, dovoľte mi, aby som sa vás niečo spýtal. Používate jQuery? Ruby on Rails? Django? Všetky rámce.
Rovnako ako jQuery a RoR, aj Foundation a Bootstrap sa zrodili z poznania, že existuje stále veľa vecí, ktoré robíme znova a znova (ako sú resety, typografia, mriežky, formuláre, tlačidlá, navigácia a zoznamy). Foundation a Bootstrap ponúkajú podporu pre responzívne návrhy pomocou tried pomocníka. Oba sú dobre zdokumentované a boli testované na ceste, takže ich môžete používať s istotou.
Jeden kľúčový rozdiel medzi nimi: Bootstrap je založený na systéme LESS pre predspracovanie CSS, zatiaľ čo Foundation je založený na Sass. Preferujem Sass pred LESS kvôli jeho ďalším schopnostiam, ale Sass aj LESS rozdrvia tradičné CSS na kúsky.
Posledná myšlienka o rámcoch. Pre tých, ktorí nechcú zdediť nadúvanie rámca niekoho iného, zvážte výber existujúceho a odizolovanie na holé kosti alebo výber čerešní z niekoľkých, aby ste si rolovali svoj vlastný. Tak či onak, nie je naozaj dôvod zakaždým začínať od nuly.
Záverečné myšlienky
Chcete väčšiu kontrolu nad tým, ako nakoniec váš návrh dopadne? Presunúť viac procesov proti prúdu do kódu. HTML5 konečne dáva DOMu nejaký zmysel. Dobrý zbavenie nezmyslov DOCTYPEs a divitída. CSS3 je nový Photoshop: lineárne prechody, borderradius a FTW tieňov v boxoch! A s nástrojmi ako Bootstrap, Foundation, Sass a jQuery nebolo nikdy jednoduchšie presunúť dizajn smerom ku kódu.
Objavte 55 úžasných príkladov HTML5 na stránkach Creative Bloq.
