Content
- Avantatges de dissenyar amb codi
- Les dades primer
- La bondat del mòbil de forma gratuïta
- Trobar un idioma comú
- Apreneu més ràpidament
- Iteració ràpida
- Temps més ràpid de llançament
- Per què HTML5?
- L'atribut de dades màgiques
- CSS3: és el nou Photoshop
- Sass + Brúixola: màgicament deliciós
- jQuery: oh, sí que pots
- Marcs
- Pensaments finals
Aquest article va aparèixer per primera vegada al número 235 de la revista .net, la revista més venuda del món per a dissenyadors i desenvolupadors de webs.
Mai he estat un gran fan de fer més feina de la necessària. Acostumo a avaluar mètodes i eines en funció de la seva capacitat per fer-me més efectiu a mi o al meu equip. Amb quina rapidesa ens porten a un producte que funciona? Quina eficàcia tenen per comunicar-se? Es mantenen fora del nostre camí?
Al llarg dels anys, he anat ajustant el procés i les eines de disseny. Imagino que ho continuaré fent. Aquesta és la naturalesa del disseny per a tecnologia i web. Aquesta indústria està en constant evolució; el nostre procés i les nostres eines també han d’evolucionar.
HTML5 i CSS3 faciliten la transició del procés de disseny més amunt, allunyant-se de Photoshop i cap a un disseny viu i inspirat. Eines com Foundation, Bootstrap i jQuery fan que el desplaçament més del procés de disseny per codificar sigui més accessible.
Avantatges de dissenyar amb codi
En primer lloc, no defenso eliminar Photoshop ni cap altre editor de disseny visual del vostre flux de treball. En el seu lloc, em centraré en els avantatges de traslladar aquest disseny al codi més aviat que tard.
Les dades primer
El que sempre m’ha agradat de dissenyar amb HTML és que afavoreix el pensament des d’una perspectiva basada en dades. En canvi, utilitzant programes de dibuix com Illustrator, OmniGraffle o Balsamiq, comenceu amb un quadre i ompliu-lo de dades.
En HTML es construeix el DOM (model d'objecte de document), com si es construís una taula de continguts. Es tracta d’un retorn al disseny d’informació real amb jerarquies significatives. HTML5 fa un pas més amb l'addició de nous elements semàntics: article, secció, capçalera, a part, peu de pàgina, etc. Aquest enfocament de primeres dades es combina perfectament amb dissenys adaptables i per a mòbils.
La bondat del mòbil de forma gratuïta
Si esteu llegint això, probablement estigueu dissenyant per a mòbils. I és probable que hagueu de dissenyar un o dos formularis. Amb HTML5, teniu sort. Abans de HTML5, els vostres tipus d’entrada eren pràcticament un camp de text o de contrasenya. HTML5 va introduir diversos tipus d'entrada addicionals, inclosos:
input type = "email"> input type = "tel"> input type = "url"> input type = "date"> input type = "date-time">
El que és realment impressionant d’aquests tipus d’entrada addicionals i únics és que els navegadors mòbils d’IOS i Android els reconeixen i intercanvien automàticament un teclat que tingui en compte el context, sense que es requereixin cap complement o jquery especials. Ah, i si el vostre navegador no sap què és input type = "email"> és, aleshores només passa per defecte a una entrada de text.
Trobar un idioma comú
"És fantàstic que els nostres dissenyadors i desenvolupadors puguin treballar en el mateix idioma" - John Drago, desenvolupador d'aplicacions d'Inflection.
Mireu si us sembla familiar. Estic en una sala de conferències amb mitja dotzena de desenvolupadors d’aplicacions del servidor que poden codificar cercles al meu voltant a Ruby, Python, Java o .NET. Sóc l’únic dissenyador. Alguns dels meus suggeriments inicialment es rebutgen per ser massa complicats d’implementar. Vaig cap a la pissarra i començo a escriure HTML i CSS a la pissarra per saber com es podria implementar el disseny. De sobte, el to de la conversa canvia i un dels desenvolupadors diu a contracor: "Bé, sí, si ho fem així, podria funcionar".
Traslladar més del meu procés de disseny a codi ha millorat les converses amb els desenvolupadors. Hi ha una capa addicional de respecte guanyada en saber elaborar els vostres dissenys en codi. No cal ser un expert per guanyar-se aquest respecte. Tot i que les meves habilitats en HTML i CSS són sòlides, les meves habilitats en JavaScript són mediocres en el millor dels casos. I no em fa tímid admetre-ho. Tot i això, quan treballem amb frontend o desenvolupadors del servidor, el fet que puguem parlar en un idioma comú o trobar-nos a mig camí és un gran avantatge.
Apreneu més ràpidament
Tot i que els filferros i els compostos visuals poden ajudar a la planificació, aquests artefactes estàtics són teòrics. Quantes vegades heu intentat explicar una interacció a algú, només per fer-li respondre: "Suposo que ho hauré de veure". Com més aviat arribeu a un prototip, cosa amb la qual la gent pot interactuar, més aviat podreu experimentar el disseny i veure si les idees funcionen.
Iteració ràpida
Quan va ser l'última vegada que un disseny final que es va enviar a la producció coincidia exactament amb el vostre comp de Photoshop? Gairebé mai. Amb el disseny de productes digitals, el canvi passa constantment. A més, els canvis com ara augmentar la mida de les vostres capçaleres de 22 a 24 punts en un parell de dotzenes de pantalles poden trigar hores a Photoshop. Els objectes intel·ligents us ofereixen un cert nivell de disseny orientat a objectes a Photoshop. Malauradament, la majoria de dissenyadors visuals que conec no utilitzen prou els objectes intel·ligents. Amb CSS, perquè fomenta un enfocament més sistemàtic del disseny, els canvis tipogràfics triguen minuts en lloc d’hores.
Què passa amb canviar els gradients lineals de tots els botons? O la mida d’una sanefa? Què tal si canvieu de cantonades quadrades a 2px arrodonides? A Photoshop, això pot trigar hores i cal codificar-lo. La possibilitat de dissenyar en codi ajuda a evitar el viatge d’anada i tornada de tornar a Photoshop per repetir el disseny visual. Quan moveu aquests canvis cap amunt en codi, utilitzant CSS3 i Sass (que tractaré més endavant en aquest article), es poden produir en temps real i només triguen uns minuts.
Temps més ràpid de llançament
Al llarg dels anys, a mesura que anava transitant més del meu flux de treball de disseny cap amunt cap al codi, vaig experimentar una millora real: aproximadament un 20-30% de reducció en el temps de comercialització. Com més faig això, menys temps dedico a duplicar esforços. Passo menys cicles entrant a Photoshop o Fireworks i després repeteixo el treball en codi.
En algun moment, el disseny ha de relacionar-se amb algun tipus de backend, ja sigui un CMS, una aplicació Rails o alguna cosa més. Com que la major part del meu treball de disseny està en codi, la integració es produeix més tard que tard. Fa un parell d’anys, un dels meus clients, PointRoll, va passar del prototip a la producció en cinc dies.
Per què HTML5?
HTML5 és més fàcil que les versions anteriors d'HTML. Prenem per exemple la declaració del tipus de document. En versions anteriors d 'HTML, el fitxer DOCTIP semblava una cosa així:
! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.1 // EN" "http://www.w3.org/TR/xhtml11/DTD/ xhtml11.dtd">
I hi havia sis versions diferents. Per sort l’HTML5 DOCTIP té aquest aspecte:
! DOCTYPE HTML>
De debò. Això és. Sorprenentment senzill.
En crear una pàgina HTML estàndard, hi ha diversos elements comuns, com ara una capçalera, l'àrea de contingut principal, barra lateral i peu de pàgina. Estic segur que ja heu vist alguna cosa així:
div id = "header> div id =" nav "> / div> / div> div id =" main "> div id =" sidebar "> / div> / div> div id =" footer "> / div>
Res fora del comú. Però un cop emplenat de contingut, aquesta plantilla es converteix en sopa div. En canvi, amb els nous elements semàntics d’HTML5, obteniu alguna cosa molt més senzilla i fàcil d’escanejar, com ara:
header> nav> / nav> / header> article> aparte> / aside> / article> peu de pàgina> / peu de pàgina>
Mira això. Una cosa que té sentit.
L'atribut de dades màgiques
HTML5 inclou un altre ganxo increïble que us ofereix la possibilitat d'elaborar el vostre propi significat semàntic: el dades-. Anteriorment, si volíeu assignar alguna cosa significativa a un element DOM, us limitaven a identificadors, classes i rols.
Malauradament, els identificadors han de ser únics. Les classes són universals (iippee!), Però utilitzar-les pot convertir-se ràpidament en un embolic. Els rols són un actiu infrautilitzat que proporciona un significat significatiu per a ARIA. Recentment he utilitzat dades per a una plataforma d’anàlisi de seguiment d’esdeveniments que desenvolupem a Inflection.Som grans fans de provar els nostres dissenys. Quan treballem en aplicacions o pàgines que tinguin una gran interactivitat, ens agradaria tenir una visió més detallada de la implicació dels clients a la pàgina.
Introduïu el fitxer dades-. Amb ell, podeu assignar, transmetre i enganxar a un model de significat "definiu el vostre propi". Per exemple, podeu fer això:
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 ">
Podem adjuntar un oient amb JavaScript a la pàgina i, cada vegada que un client passa per sobre o fa clic en aquest botó, podem fer un seguiment d’aquesta activitat. En lloc de només poder fer un seguiment d’aquella persona registrada a través d’OAuth a Twitter, podem veure que passaven per sobre de Facebook, després de Twitter, després de LinkedIn i, finalment, van decidir triar Twitter per al seu model OAuth.
Imagineu-vos ampliar-ho a un lloc com Pinterest o el nou disseny de Myspace on els clients arrosseguen i deixin anar rajoles per reordenar-les segons els interessos. O, possiblement, amagar rajoles que no els interessin dades- L'atribut us permet adjuntar o assignar una capa addicional de significat semàntic a les coses que podeu definir. Per als llocs i les aplicacions que depenen en gran mesura d’Ajax, s’obren oportunitats il·limitades.
CSS3: és el nou Photoshop
CSS3 aportava un nou nivell de disseny d’aspecte que solia requerir imatges de fons, talls i la famosa tècnica de les "portes corredisses". Afortunadament, això ja és cosa del passat.
Fem una ullada a fer un botó elegant amb un degradat lineal, cantonades arrodonides, ombra de text que li doni un bon efecte de premsa de lletres i una brillantor al cursor. Aprendre aquestes tècniques recorrerà un llarg camí. Cadascun d'ells es pot utilitzar de forma independent o en diverses combinacions per aconseguir gairebé qualsevol de les actualitats visuals actuals que corren el web actualment.
En primer lloc, fem alguns ajustos al valor predeterminat botó> i input type = "enviar"> elements. Suposant que utilitzeu un dels restabliments CSS estàndard, només afegirem una mica de mida i espai de respiració.
/ * Botons de botons, que tenen els botons. ======================================= * * / botó, entrada [type = "enviar"] {altura: 2.7em; farciment: .4em .7em; alçada de línia: 1,9; }
Protip: Els botons i les entrades que s’envien poden ser difícils de restil·lar. He trobat que si ajusteu l’alçada de la línia a 1,6 o superior, podeu evitar que es necessiti un div o un abast addicional a l’interior del botó> etiqueta.
Ara hem 'solucionat' el nostre problema amb els botons, podem crear un .btn classe per donar-nos un bon botó net amb cantonades arrodonides, un degradat lineal, contorn i aquest aspecte de lletra tipogràfica.
.btn {display: inline-block; vora: 1 px sòlid # d4d4cc; -moz-border-radi: 4 px; -webkit-border-radius: 4 px; radi de la vora: 4 px; farciment: .4em .7em; fons: # edeff2; fons: -webkit-gradient (lineal, 0% 0%, 0% 100%, des de (#fefefe), color-stop (0,55, # edeff2), fins a (# e4e6e9)); fons: -moz-linear-gradient (centre superior, #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; color: # 6c7786; mida de la lletra: 1.1em; text-ombra: #fefefe 1px 0 1px; alçada de línia: 1.375em; cursor: punter; }
I, a continuació, un bon efecte de plànol amb una brillantor subtil mitjançant el ombra de caixa mètode:
.btn: passeu el cursor, .btn: focus {-moz-box-shadow: # 129ceb 0px 0px 2px; -webkit-box-shadow: # 129ceb 0 0 2px; box-shadow: # 129ceb 0 0 2px; fons: # e6e9eb; fons: -webkit-gradient (lineal, 0% 0%, 0% 100%, des de (# f7f7f7), color-stop (0,55, # f6f6f7), fins a (# e6e9eb)); fons: -moz-lineargradient (centre superior, # f7f7f7, # f6f6f7 55%, # e6e9eb); color: # 45484b; text-ombra: rgb (255.255.255) 1px 1px 0; color de la vora: # c9c9c0; }
Ara, no sóc un gran fan d’escriure el codi de gradient lineal. És llarg i confús. Com podeu veure, només he inclòs la versió per a -moz, -kit web, i el model estàndard. Si voleu incloure versions -o i -ms, haureu de duplicar el codi.
Hi ha dues opcions més. Un és un generador CSS3; hi ha diverses disponibles al web, inclosa ColorZilla. Però si voleu intensificar una mica el joc, penseu a capbussar-vos a Sass: combinat amb Brúixola, és un regal del Déu.
Sass + Brúixola: màgicament deliciós
Podeu deixar d’esperar l’edició unicorn CSS4. Ja és aquí i es diu Sass + Compass. Sass significa Syntactically Awesome Stylesheets: hereteu tots els avantatges tradicionals de CSS3 amb les alegries afegides de variables, mixins, extensors i altres complements.
Recentment he reformat un fitxer CSS de 5.000 línies que tenia més de 30 variacions en el mateix to blau. Amb Sass, he substituït totes les variacions per aquest codi:
color: $ blau;
En definir $ blau en el meu _variables.scss fitxer, puc crear un color per defecte al qual pugui fer referència cada fitxer CSS o SCSS. Qualsevol que escrigui CSS pot utilitzar-lo $ blau i no us heu de preocupar d’utilitzar un comptagotes, de trobar un codi hexadecimal o de color RGB, RGBA o HSL.
Recordeu aquest codi de gradient lineal? En lloc d’escriure diverses línies de codi, què us sembla:
@include background (gradient lineal (# b1cfdc, # 7a9cac));
Deixeu que Sass i Compass facin pesos i us generin la sintaxi correcta: fet. Suposem que voleu una versió més fosca o més clara d’un color. Podeu moure el comptagotes a Photoshop o simplement utilitzar les ordres d’aclarir / enfosquir a Sass:
@include background (lineal-gradient (darken ($ litegray, 2%), darken ($ blanquejat, 5%)));
Això crearà un gradient lineal amb un 2% enfosquit $ lite-gris i un 5% enfosquit blanc trencat. Voil! Ni tan sols necessiteu els codis HEX o RGB.
jQuery: oh, sí que pots
Tinc una confessió per fer. S'utilitza JavaScript per intimidar-me. Després vaig trobar jQuery. No afirmaré ser un gurú de JavaScript, però estic bastant segur que puc aconseguir qualsevol tipus de transició o funció que necessiti per utilitzar jQuery.
Prenem, per exemple, la possibilitat de mostrar un número de telèfon secundari introduït a la pantalla fent clic a un enllaç Afegeix un número nou. Amb jQuery, simplement escriviu això:
// - Revelació progressiva - // $ ('. New-number'). Click (function () {$ ('. Alt-number'). FadeIn ('fast');});
Busqueu alguna cosa més avançada? Probablement hi hagi un connector. Els comportaments bàsics són fàcils i els complexos són accessibles amb jQuery.
Marcs
Dos dels marcs més robusts actuals són Foundation i Bootstrap. Ara, abans d’acomiadar els marcs CSS, permeteu-me que us pregunti alguna cosa. Feu servir jQuery? Ruby on Rails? Django? Tots els marcs.
Igual que jQuery i RoR, Foundation i Bootstrap van néixer en reconèixer que hi ha un bon nombre de coses que fem una i altra vegada (com ara restabliments, tipografia, quadrícules, formularis, botons, navegació i llistes). Foundation i Bootstrap ofereixen suport per a dissenys sensibles mitjançant l’ús de classes d’ajuda. Tots dos estan ben documentats i han estat provats per carretera, de manera que podeu utilitzar-los amb confiança.
Una diferència clau entre els dos: Bootstrap es basa en el sistema LESS per al preprocessament CSS, mentre que Foundation es basa en Sass. Prefereixo Sass a LESS degut a les seves capacitats addicionals, però tant Sass com LESS squash tradicionals CSS a trossos.
Una última reflexió sobre els marcs. Per a aquells que no vulguin heretar la inflació addicional del marc d'algú altre, penseu a escollir-ne un de ja existent i despullar-lo fins als ossos nus o triar-ne uns quants per fer rodar el vostre. Sigui com sigui, realment no hi ha cap raó per començar de zero cada vegada.
Pensaments finals
Voleu tenir un control més gran sobre com resulta finalment el vostre disseny? Mou més processos cap amunt cap al codi. HTML5 finalment aporta un cert sentit al DOM. Bona lliuració a l’absurd DOCTIPs i divitis. CSS3 és el nou Photoshop: gradients lineals, borderradius i box-shadows FTW. I amb eines com Bootstrap, Foundation, Sass i jQuery, passar el disseny cap amunt al codi mai ha estat tan fàcil.
Descobriu 55 exemples increïbles d’HTML5 a Creative Bloq.
