Content
- Pas 01
- Pas 02
- Pas 03
- Pas 04
- Pas 05
- Pas 06
- Pas 07
- Pas 08
- Pas 09
- Pas 10
- Pas 11
- Pas 12
- Pas 13
- Pas 14
- Pas 15
- Pas 16
- Pas 17
- Pas 18
Alguna vegada heu lluitat amb la coherència en el disseny web? Això passa massa sovint, sobretot quan es treballa a escala. Per sort per a nosaltres, les biblioteques de patrons són aquí per ajudar-vos.
Una biblioteca de patrons és una col·lecció d'elements de disseny d'interfície d'usuari que es poden reutilitzar per crear pàgines. Els exemples inclouen navegacions, botons, paràgrafs, encapçalaments i formularis. Dissenyant elements individuals en lloc de pàgines completes, fomentem activament la reutilització, donant lloc a dissenys coherents i fàcils de mantenir.
Abans d'implementar una biblioteca de patrons, hem de garantir que les nostres eines de disseny puguin gestionar elements reutilitzables. Durant els darrers dos anys, la meva eina de disseny inicial ha estat Sketch: una eina lleugera basada en vectors perfecta per a interfícies i biblioteques de patrons. Per què és perfecte? Et posaré un exemple.
Suposem que teniu un element de botó que s’utilitza diverses vegades a tot un lloc web i, a continuació, decidiu canviar-lo. Normalment, haureu de passar i canviar manualment cada instància d'aquest botó. No amb Sketch. El programari inclou una característica anomenada Símbols: un tipus especial de grup de capes, en el qual tots els canvis que feu a un símbol s'apliquen automàticament a totes les seves altres instàncies. És perfecte per treballar amb elements reutilitzables.
D’acord, prou cantant els elogis de Sketch. Aprofundim en el tutorial. No teniu cap còpia de Sketch? Simplement dirigiu-vos aquí per descarregar la prova gratuïta.
Pas 01
Abans de començar, assegureu-vos que teniu instal·lat el font gratuït de Google Source Sans Pro. Creeu un document nou i, a continuació, inseriu un tauler de treball nou anant a Insereix> Tauler de treball (drecera de teclat: A). Una taula d’art és un llenç fix que utilitzarem com a mida de pantalla. Notareu que "Artboard 1" s'ha afegit a la llista de capes de l'esquerra. Al tauler Inspector de la dreta, establiu l'amplada a 1280 px i l'alçada a 2000 px.
Pas 02
Ara per crear la nostra quadrícula. Amb Artboard 1 seleccionat, aneu a Visualitza> Llenç> Mostra el disseny (drecera de teclat: Ctrl + L). Veureu que apareix una quadrícula per defecte. Ara només hem d’editar-lo. Amb Artboard 1 encara seleccionat, aneu a Visualització> Llenç> Configuració del disseny. Estableix l'amplada total a 1080px, el nombre de columnes a 12, l'amplada de canal a 30 px i l'amplada de columna a 60 px. Assegureu-vos que la canaleta exterior està marcada. Feu clic al botó Centre.
Pas 03
Ara ja tenim configurada la taula de treball i la graella, és hora d’afegir contingut. Per a aquest tutorial, crearem quatre tipus diferents d'elements de biblioteca de patrons. Comencem pels botons. Per crear el fons del botó, aneu a Insereix> Forma> Rectangle (drecera de teclat: R). A l'Inspector, configureu l'amplada a 280 px i l'alçada a 44 px. Establiu el radi a 3 px i el color d’ompliment a # 1A9DD3.
Pas 04
Ara per afegir el text. Aneu a Insereix> Text (drecera: T). Canvieu el tipus de lletra a Source Sans Pro, Weight a Bold, Color a #FFFFFF, Size a 16pt i feu clic a la icona d'alineació central. Col·loqueu el text de manera que quedi centrat dins del fons. Seleccioneu les dues capes i aneu a Organitza> Agrupa capes (drecera de teclat: Cmd + G). Amb el grup seleccionat, aneu a Capa> Crea símbol. Notareu que Sketch us demana que nomeneu el símbol; per tant, introduïu el botó. Els símbols es poden reconèixer mitjançant una icona de capa morada.
Pas 05
Qualsevol canvi que faci un símbol, com el que acabem de crear, s'aplicarà a la resta d'instàncies d'aquest símbol. L'únic problema és que si canviem el text del botó dins del símbol, alterarà el text de la resta de botons. Per evitar que això passi, seleccioneu la capa de text i marqueu la casella Exclou valor de text del símbol a l'Inspector. Ara creem un botó duplicat. Aneu a Insereix> Símbols> Botó.
Pas 06
Per veure els símbols en acció, canvieu el color de fons d'un botó. Fixeu-vos en com canvia el color de tots dos. Però si canvieu el text d’un botó, el text de l’altre no canvia. Només els estils estan sincronitzats, no les cadenes de text. Això significa, per exemple, que podem crear botons Registra't, Compra ara i Contacta amb mi que comparteixin el mateix estil.
Pas 07
Abans de continuar, és important ser conscient de com funciona la mesura a Sketch. Seleccioneu un botó, manteniu premut Alt i passeu el cursor per sobre del segon botó per mostrar la distància entre ells. Aquesta no només és una característica que els dissenyadors utilitzaran tot el temps, sinó que és perfecta per als desenvolupadors que regularment han de calcular mesures exactes de píxels.
Pas 08
A continuació, encapçalaments. Com que els encapçalaments són elements de text reutilitzables, és important utilitzar la funció Estils de text en lloc de Símbols. Inseriu una capa de text i escriviu el nivell de capçalera 1. Canvieu la tipografia a Source Sans Pro, Weight a Negrita, Color a # 3A4654 i Size a 37pt. Aneu a Capa> Crea un estil compartit. A l’Inspector, notareu que hi ha text ressaltat. Sketch us demanarà que nomeneu l’estil de text, així que introduïu H1.
Pas 09
Repetiu l'últim pas per crear els elements H1 a H6. Les mides de les meves fonts de títol són H1: 37pt, H2: 31pt, H3: 25pt, H4: 21pt, H5: 18pt i H6: 15pt. Com que cada capçalera és un estil de text, els canvis s'aplicaran a la resta d'instàncies. He utilitzat l'eina Escala de tipus de Jeremy Church per determinar la mida dels meus títols. Escala de tipus utilitza l’escala modular per triar mides de tipus de lletra proporcionals, en funció de la proporció que seleccioneu.
Pas 10
Per organitzar els estils de text que acabem de crear, aneu a Insereix> Text amb estil> Organitza els estils de text. Aquí podeu suprimir i canviar el nom dels estils de text, però no reordenar-los. Com que els estils de text estan ordenats alfabèticament, anomeno elements similars amb la mateixa primera paraula: per exemple, Llista sense ordenar i Llista ordenada. Seguiu el mateix procés per organitzar símbols. D'acord, hem tractat els botons i els encapçalaments. Però, què passa amb les imatges?
Pas 11
Per als avatars, inseriu una imatge i un rectangle que tinguin una amplada i una alçada de 130 px. Doneu al rectangle un radi de 65 px. Agrupeu les dues capes i col·loqueu el rectangle darrere de la imatge. Feu clic amb el botó dret a la capa de rectangle i seleccioneu Utilitza com a màscara. Ara tenim un avatar circular. Hem utilitzat un rectangle amb un paràmetre de radi en lloc d’un cercle real, perquè si voleu que l’avatar sigui quadrat, podeu editar el radi en lloc d’inserir una forma nova.
Pas 12
Però, i si vull substituir una imatge, us sento preguntar? D'acord, potser no m'ho demanàveu, però em condueix a una característica ordenada, anomenada adequadament Reemplaça la imatge. Seleccioneu el vostre avatar i aneu a Capa> Imatge> Substitueix. Trieu una foto diferent. Sketch canviarà automàticament la mida de la imatge nova i la canviarà per l’actual. L’utilitzaràs més sovint del que penses: és un altre estalvi de temps fantàstic.
Pas 13
Una alternativa a la inserció de les vostres pròpies imatges és utilitzar el connector Generador de contingut per a esbossos de Timur Carpeev. Simplement creeu una forma i aneu a Connectors> Complement de croquis del generador de contingut> Persona> Fotos. Extreu les fotos de l'usuari de User Inter Faces i les insereix com a forma de farciment. La comunitat de complements Sketch és fantàstica.
Pas 14
A continuació, mostres de color! És important documentar els colors més utilitzats a la nostra biblioteca de patrons. Inseriu un rectangle amb Amplada i Alçada de 120 px i doneu-li un color de farciment de # 1A9DD3. Repetiu aquest pas amb els colors # 3A4654, # 475361, # 8793A1 i # EFF0F1. També hi ha un connector per crear mostres de color de Jody Heavener. Aneu a Connectors> Mostra i introduïu els cinc valors hexadecimals anteriors.
Pas 15
Seleccioneu una mostra i feu clic al color de farciment a l'Inspector. A la part inferior del selector de colors, veureu dues seccions: Colors globals i Colors de documents. Els colors globals es desaran per a tots els documents de Sketch que creeu, mentre que els colors dels documents són exclusius de cada document. En afegir colors a la secció de colors del document, creeu la vostra pròpia biblioteca de colors.
Pas 16
A banda dels colors del document, Sketch també selecciona automàticament els colors habituals del document i indica la freqüència amb què s’han utilitzat. Aquesta funció està oculta a la vista, però es pot accedir des del selector de colors. Feu clic a l'àrea a la dreta dels barres lliscants de tonalitat i opacitat. Veureu una finestra emergent titulada Colors freqüents utilitzats a ... Sketch no només us indica la freqüència amb què s’ha utilitzat el color, sinó també.
Pas 17
Per als passos finals, descarregueu el recurs que acompanya aquest tutorial i assegureu-vos que teniu instal·lat el tipus de font Source Code Pro. Al recurs, s'inclou HTML al costat de cada element. Això garanteix que s’utilitzin les etiquetes HTML i els noms de classe correctes per al desenvolupament. Si escau, es poden proporcionar notes d'ús. Un gran exemple d’això es troba al sistema de quadrícula, on és útil tenir informació sobre les classes de columnes, la compensació de columnes, etc.
Pas 18
Al recurs, també notareu que la capçalera té un selector Salta a ... Les biblioteques de patrons poden ser llargues, de manera que és important que els membres de l’equip puguin saltar ràpidament a un element sense haver de desplaçar-se per tota la pàgina. Un exemple d’això es pot trobar a la biblioteca de patrons A List Apart i a la biblioteca de patrons d’Anna Debenham.
Això és! Ara ja sabeu com treballar amb les biblioteques de patrons: tot el que heu de fer ara és trobar inspiració per a una biblioteca pròpia.Us recomano visitar recursos de la guia d'estil del lloc web d'Anna Debenham i Brad Frost, on podeu trobar molts articles, eines i exemples fantàstics.
Paraules: Richard Child
Richard Child és assessor de disseny. Aquest article va aparèixer originalment al número 272 de la revista net.
T'ha agradat això? Llegiu-los!
- Per què hauríeu de gestionar el vostre CSS amb biblioteques de patrons
- Com es crea una aplicació: proveu aquests fantàstics tutorials
- Hi ha programari gratuït de disseny gràfic disponible ara mateix.
