Com crear una guia d’estil de lloc web per a la vostra marca

Obteniu informació sobre com una guia d’estil pot mantenir la vostra marca visual i tonalment coherent a mesura que el vostre lloc web creixi.


Creació d’una guia d’estil de lloc web

Pintem un escenari aquí. Diguem que el vostre lloc web està creixent ràpidament tant en el seu àmbit de contingut com en el nombre de persones que cal portar a bord per mantenir-lo. Heu contractat dissenyadors, desenvolupadors, redactors, gestors de xarxes socials, tot el shebang. Cada persona ve i ve, aportant la seva peça al gran esquema general, no obstant això, la consistència de la vostra marca ha funcionat amb prou feines. Alguns enllaços de botons són de color blau; d’altres són de color verd. Una subpartida té una mida de 26px; un altre subtítol és de 24px. El vostre logotip té un farciment massa gran en una pàgina, però fa massa poc encoratjar en una altra …

Com a propietari del vostre lloc web, ja teniu massa al vostre plat, així com podeu esperar que es mantinguin bloquejats els centenars de regles de disseny de la vostra marca? Com recordeu dir a un dissenyador nou contractat totes les regles d’estil que el vostre dissenyador anterior ja havia establert? És probable que només no puguis.

És aquí on entra una guia d’estil.

Què és una guia d’estil i per què necessita la meva empresa??

Una guia d’estil és un recurs unificat que defineix una marca mitjançant l’ús constant de disseny, to, veu i identitat.

Una guia de bon estil actuarà com a referència final per a la vostra marca. És un model. Defineix les regles de tipografia, colors, maquetació, ús del logotip, to de veu, directrius de contingut, experiència dels usuaris i gairebé tots els aspectes de la interacció pública amb la vostra marca.

El concepte de guies d’estil (o bíblies de marca) no és cap novetat, tot i que la seva aplicació per a llocs web és un tema més recent. Usada habitualment en el món de la impremta, tots els principals diaris conserven una guia d’estil per tal de mantenir la coherència de format. Per a les grans corporacions, en què els colors distintius d’una marca han de coincidir amb les especificacions exactes en qualsevol cosa, des dels anuncis de televisió fins als costats dels camions semi, una guia estilística completa és una necessitat absoluta, i pot arribar a ser immensament massiu de mida!

És probable que hàgiu llegit això, la vostra empresa encara no ha arribat a una escala on necessiteu tota una divisió de màrqueting per identificar la identitat de la vostra marca. malgrat això, mai no és massa aviat per crear una guia d’estil. Solidificar els principis de la vostra marca ara us estalviarà dels possibles desperfectes en el camí quan la vostra empresa creixi en més del que vosaltres sols podeu fer un seguiment.

Quan és hora de crear una guia d’estil

Aposto que ja us podeu imaginar les conseqüències de no tenir una guia d’estil. Sense pautes predefinides sobre com s’ha de manifestar i no s’ha d’expressar la vostra marca, qualsevol dissenyador o desenvolupador que contracteu podria afegir el seu propi toc personal o interpretació al vostre lloc web, que acabarà creant fang estilístic en lloc d’un conjunt cohesionat..

El vostre negoci en línia es beneficiarà d’una guia d’estil si i quan:

  • Comenceu a delegar les tasques als membres de l’equip o a tercers. Una guia d’estil mantindrà tothom a la mateixa pàgina i garantirà la normalització de les contribucions.
  • El vostre lloc web ha esdevingut bastant gran (i desorganitzat en aquest procés) i el vostre fitxer CSS ha quedat fora de control, passant d’afegir nous estils per substituir els que ja vau oblidar que hi vau.
  • Heu d’agilitzar el procés d’actualització del vostre lloc web. Després d’haver establert directrius per referir-nos per garantir que les noves addicions s’implementen ràpidament i s’alineen amb la marca.

La vostra guia d’estil existeix al vostre lloc web

Abans de començar a crear la vostra guia d’estil, haureu de designar on existeix. La millor pràctica és assignar la seva pròpia àrea dins del vostre lloc web, ja sigui com a directori (www.yourdomain.com/styleguide) o com a subdomini (styleguide.yourdomain.com).

NOTA RÀPIDA: Recordeu que la vostra guia d’estil ha de compartir el mateix fitxer CSS que la resta del vostre lloc web. D’aquesta manera, es garanteix que les actualitzacions del disseny dins d’una reflectiran immediatament l’altra, mantenint tot unit i coherent.

La vostra guia d’estil té un disseny propi

Comprovem això: La creació de la vostra guia d’estil necessitarà temps. Però considereu l’energia que hi aporteu com una inversió que us farà estalviar més temps (i diners) a llarg termini.

Igual que el vostre lloc web, la vostra guia d’estil té en compte l’experiència de l’usuari amb un disseny fàcil de seguir. Funcionarà fonamentalment com a lloc web autònom, sovint amb un menú de navegació que enumera cada element del lloc amb una progressió lògica d’importància. Aquests elements es presenten i es dissenyen tal com es farien al lloc web principal, només per descomptat, amb guies contextuals i raons per les quals es dissenyen les coses tal i com són.

VEURE-LA EN ACCIÓ: Una de les més populars i completes guies d’estil de referència pertany Starbucks. Doneu una ullada a la seva si necessiteu inspiració per aconseguir una cosa bàsica.

Guies d’estil Vs. Biblioteques de patrons

Els termes “guia d’estil” i “biblioteca de patrons” s’utilitzen sovint de forma intercanviable i, per senzillesa, em referiré i proporcionaré exemples d’ambdós com a “guia d’estil”. Tot i això, hi ha importants distincions entre els dos que heu de ser conscients.

Biblioteques de patrons simplement presentarà els elements de disseny sense explicació de com s’han d’utilitzar al lloc o l’aplicació. Guies d’estil us orientarà adequadament sobre les millors pràctiques d’utilitzar els paràmetres de disseny escollits, explicant per què hi ha algunes regles a seguir quan es presenti la marca.

Essencialment, amb una biblioteca de patrons, podeu presentar-vos opcions d’estil per a etiquetes H2; tanmateix, el que falta és el que ofereix una guia d’estil: instruccions sobre quin context s’ha d’utilitzar cada etiqueta H2 en concret.

Com crear una guia d’estil

Per elaborar una guia d’estil que marca totes les caselles, aquí teniu els passos que seguireu:

Pas 1. Definiu l’essència de la vostra marca

Aprofiteu-vos per investigar i reflexionar sobre les característiques definitives de la vostra marca i, tot seguit, feu-ho bullir en un o dos paràgrafs. Proporcioneu una declaració de missió, informació sobre els vostres valors i algunes quantes paraules clau que establirà les bases per seguir totes les contribucions de disseny i contingut. Un gran imatge també pot ajudar a establir fàcilment el to i el caràcter de la vostra marca.

Pas 2. Estableix les regles del logotip

La mida, la col·locació i els colors del vostre logotip són fonamentals en el reflex de la vostra marca. Aquí és on també veuràs sovint Dos i No que deixen molt clar com s’ha de presentar visualment la vostra empresa al món.

Exemple de guia de logotip de TwitterTwitter no deixa lloc a errors en les seves extenses regles sobre l’ús adequat del seu logotip.

Pas 3. Establir la tipografia

La tipografia retrata un sentit del caràcter molt tangible per a la vostra marca. Les diferents mides dels vostres encapçalaments, la quantitat d’espai entre ells i l’estil de la lletra tipogràfica ofereixen una qualitat tonal particular al vostre lloc web. Podeu obtenir més informació sobre com podeu establir la tipografia de la vostra marca.

Exemple de guia de tipografia de la BBCBBC comparteix la posada en marxa i la distribució dels seus elements tipogràfics: una necessitat per a una gran organització de notícies que utilitza molts encapçalaments diferents.

Pas 4. Decidiu la vostra paleta de colors

El color pot ser més que una representació visual de la vostra marca; pot influir en la psicologia dels usuaris. Una certa tonalitat de vermell podria fins i tot esdevenir menys un color i més un enllaç inconscient un cert refresc.

Exemple de guia de color de MozillaMozilla manté la seva marca coherent mitjançant la definició de la paleta de colors del seu programari. És important que inclogueu codis de color a HEX, Pantone, HSB, CMYK i RGB; si es produeix l’ocasió que la vostra marca ha d’existir més enllà de la pantalla de l’ordinador, ja hi estareu preparat!

Pas 5. Determineu la iconografia adequada

Les icones generen una idea en gràfics immediatament accessibles. No hi ha molt per amagar; si una icona està lleugerament fora de quilòmetre, matarà l’efecte previst. Algunes icones són més pesades per al disseny que d’altres; això no fa que un estil sigui millor que l’altre, sinó que només han de ser coherents. Eviteu la iconografia incongruent.

Exemple de guia d'estil d'icona d'IBMIBM la biblioteca d’icones proporciona accions basades en contextos per a la seva iconografia. Observeu com segueixen un estil similar monocrom, pla i simplista.

Pas 6. Determineu les imatges adequades

Quines imatges suporten millor la vostra marca, la foto de paisatge vibrant o el dibuix animat a mà? Representareu la vostra empresa a través d’imatges de borses o contractareu un fotògraf per entregar alguna cosa única? Tot el que sigui millor per a la vostra situació, tingueu en compte la opció emoció que la vostra marca vol comunicar.

Pas 7: crea el sistema de disposició i quadrícula

Aquest és el lloc en què la vostra planificació serà definitivament efectiva, ja que intentar crear futurs dissenys de pàgines sense fer referència necessàriament necessita una quantitat ridícula de temps. Recordeu mantenir el disseny fluida per a diverses mides de pantalla.

Exemple de guia de la graella de MailChimpMailChimp estableix com s’estructura el seu contingut principal en una graella. Les quantitats específiques de píxels per a la canaleta i l’encoixinament asseguren que la graella es manté cert, independentment de la mida de la pantalla de l’usuari.

Pas 8: Estilieu els elements

Depenent de l’abast del vostre lloc web, és possible que tingueu en compte centenars d’elements separats, des de vídeos a comentaris de blocs fins a articles de comerç electrònic. A continuació, es detallen algunes de les més comunes, que sens dubte s’inclouran en cap lloc web:

Formes

No es tracta només del color i la mida dels vostres camps i etiquetes d’entrada; també heu d’incloure el text que es mostrarà en cas d’enviament de formulari, error o missatges d’alerta amb èxit.

Botons

La seva paleta de colors i tipografia tindran cura de bona part d’aquests. El color i la mida dels vostres botons poden significar diverses coses: hi ha enllaços de botons, botons d’enviament, botons CTA, botons de cancel·lació, botons de menú, etc..

Menús

De nou, bona part del que ja heu establert us obtindrà la major part d’aquest camí. L’espai i l’alineació de text són estils principals a especificar. El vostre logotip actuarà com a botó d’inici? Us escorreu la familiar “icona d’hamburguesa” per a alguna cosa més creatiu?

Modals

Una guia de bon estil no només mostrarà el disseny dels vostres modals (o elements emergents), sinó que també estipularà les condicions per a la seva aparença. Quines accions ha de realitzar un usuari per veure el modal? Com va el mode per persuadir l’acció de l’usuari?

Efectes d’interacció i animació

T’ho creguis o no, la teva marca es pot expressar en detalls fins i tot en el minut que passin a mil·lisegons d’efecte sobrepositiu. Un enllaç de text amb el valor {animació: 500ms de facilitat; } transmet una personalitat i un sentit d’urgència diferents en comparació amb {animació: 100ms lineals; }.

Una manca de concordança entre el temps d’animació entre diferents enllaços del vostre lloc web pot malmetre l’experiència de l’usuari, de manera que preneu el temps per planificar el missatge que transmeten les vostres animacions i interaccions i compliu-vos amb aquestes regles..

No oblideu contingut

Estic cridant una atenció especial sobre això, perquè la inclusió de contingut i còpia a les guies d’estil és tan important però sovint es passa per alt. Com ja ho heu sentit abans, contingut és l’únic motor principal de l’èxit del vostre lloc web. El contingut útil, original i ben escrit recompensarà als usuaris una satisfacció molt més profunda que els bonics botons o els menús fantàstics. És per això que és fonamental oferir directrius de marca als redactors a més dels dissenyadors.

El contingut del contingut no només està ben escrit, sinó que també ha de comunicar-lo veu i to de la vostra marca mitjançant un estil d’escriptura consistent. Aquestes dues paraules clau són tan importants per capturar, MailChimp fins i tot va nomenar el seu designat guia d’estil de contingut després d’ells.

A partir d’aquest exemple, podeu veure com MailChimp dirigeix ​​els seus redactors a formular redaccions que s’ajusten al caràcter de la seva marca tenint en compte la emocions dels seus usuaris en un moment donat.

Les guies d’estil de contingut poden ser força exhaustives, incloses les regles gramaticals que espereu d’un professor d’anglès. La guia de Tuts+ només fa això. (La seva guia de contingut em diu fins i tot escriure-la com a “Tuts +” i no “Tutsplus”).

Conclusió

Els guies d’estil aconsegueixen endevinar per escalar el vostre negoci en línia. Amb aquest recurs vital al vostre lloc, deixareu de lluitar per atrapar nous membres de l’equip per tal d’accelerar-vos amb les regles de la vostra marca.

Hi ha milions d’empreses per fora, però només hi ha un. Protegiu el valor de la vostra singularitat sent ferm amb la vostra presentació. Feu servir una guia d’estil ara per a una marca que es reconegui en el futur.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map