9 consells essencials de disseny web per a principiants de bricolatge

Principis bàsics del disseny web & bones pràctiques per ajudar als principiants de qualsevol nivell a dissenyar visualment un professional & lloc web elegant per ells mateixos.


Consells sobre disseny web per a principiants

Actualment, és possible que qualsevol sigui un dissenyador web. Sí, és una declaració en negreta, però amb una major accessibilitat a programes de disseny de codi obert com Gimp, i amb plataformes de construcció de llocs de bricolatge com Wix i Weebly inunden el mercat, la línia entre aficionat i bona fe dissenyador web ha esdevingut molt més prim i més resistent a partir del final. L’interessant de la creativitat és que ningú pot decidir per vosaltres quan esteu “preparats” per ocupar un determinat paper. Moltes estrelles de rock no van prendre mai classes de música; molts artistes d’èxit no van estudiar mai l’anatomia humana; i la majoria de dissenyadors web d’allà no tenen un títol formal. Aleshores, si heu creat el lloc web del vostre propi negoci, podeu dir amb seguretat que sou un “dissenyador web”? És el que heu de determinar.

És possible que qualsevol sigui un dissenyador web amb plataformes de construcció de llocs de bricolatge.

Feu clic per tuitejar

Si sou seguidors d’aquest bloc, probablement ja haureu pres la decisió de crear el vostre lloc web. Tot i que es pot sentir completament aclaparat per la impressionant quantitat d’informació que hi ha per obtenir informació sobre el desenvolupament web, podeu estar segur que els propietaris d’empreses amb una molt poca experiència de disseny poden crear llocs web que semblin professionals. Tot comença a partir d’uns quants fonaments que, si s’apliquen correctament, poden recórrer milles cap a la credibilitat del disseny i l’experiència d’usuari del vostre lloc..

Què és aquesta guia (i què no)

Per ser clar, aquí estem parlant dels fonaments bàsics del disseny web i no entrarem en temes més avançats com ara sistemes de quadrícules, JavaScript o marcs de CSS. Aquesta guia també suposa que utilitzeu algun tipus de creador de llocs web per arrossegar i deixar anar per tal de dissenyar un lloc web sense codificar. Tant si utilitzeu una plantilla existent del creador de llocs web com si partiu de zero (una opció més ambiciosa per a principiants), aquesta guia us ajudarà amb els principis i pràctiques bàsiques del disseny web que heu d’aplicar al vostre lloc web. Un sol article sobre disseny web no us convertirà immediatament en expert, així que considereu aquest el vostre primer pas cap a un món més gran.

CONSELL RÀPID: Un coneixement bàsic d’HTML i CSS suposarà enormes avantatges per a qualsevol dissenyador web en vaga. Si realment voleu posar les mans en la codificació, us recomano que feu una ullada W3Schools per obtenir més informació sobre el fonament.

Els fonaments bàsics del disseny web per a principiants

Anem a parar, no? A continuació, es mostren algunes de les tendències i pautes més útils que cal conèixer a l’hora de crear el vostre primer lloc web:

1. Poseu el ratolí i agafeu un llapis

És possible que el vostre lloc web ja existeixi una entitat bonica i completa, per la qual cosa feu un salt immediat al Photoshop (o pitjor, a un navegador i HTML) per planificar-lo. Whoa, whoa: refreda’t els dolls un segon! No posis el carretó abans del cavall. Primer, traieu un llapis i un coixinet de paper i comenceu a posar les vostres idees en alguna cosa fàcilment tangible. Aquesta és una fase important per dissenyar l’estructura del vostre lloc sense res més que rectangles, doodles i idees inspirades (sovint anomenades cablejat per cable). En aquest moment, les coses poden ser molt difícils; ningú no ho veurà sinó tu.

Exemple de fotograma de lloc webUn fil conductor del lloc web us ajuda a desenvolupar un disseny i estructura per al vostre lloc web, alhora que milloreu l’experiència de l’usuari (UX) i estalvieu temps.

En aquesta fase és molt més fàcil modificar els dissenys que inicialment pensàveu que funcionarien, però que ara descobriu que hi ha un paper desordenat i confús. D’aquesta manera us estalviareu moltes hores de frustració, a diferència de fer la mateixa descoberta un cop codificat el lloc i en un navegador. A més, ajuda de manera important a construir una pàgina web quan teniu una referència a mà per consultar en lloc de quedar en cec.

2. Seguiu una Jerarquia

És cert que la majoria de internautes acostumen a escanejar pàgines web en lloc de prendre temps per llegir-ho tot. Cal que estigueu a punt per això posant primer el contingut més important. Això vol dir que un usuari ha de ser capaç de digerir la informació més vital d’una pàgina tota d’una pantalla a la càrrega inicial, sense haver de fer zoom ni desplaçar-se. Això és, per descomptat, molt més fàcil que dir. A continuació, es mostren alguns consells per ajudar-vos a comprendre millor la importància d’aquesta teoria del disseny:

Mantingueu el contingut “Per sobre del plegat”

Anomenem a la pantalla inicial de contingut carregat “el plec”, i tot el que hi ha sota d’ell que s’ha de desplaçar per veure’s es considera secundari. Generalment, la informació més important se situa “per sobre del plec”. El més important a assolir dins d’aquesta àrea és atraure a un usuari a prendre accions o generar l’incentiu de desplaçar-se cap endavant.

Ús d’una imatge “Heroi”

Una tendència habitual en el disseny web avui dia és omplir aquesta zona “per sobre del plec” amb el que s’anomena imatge o “banner” d’heroi. Es tracta d’imatges de fons de pantalla completa amb un text sobreposat molt succint i puntual, normalment associats amb un botó de trucada a acció. És probable que tot el propòsit de la pàgina web es pugui contenir dins d’aquesta zona de bàner, tot i que també serveix com a element inicial per al contingut que cal seguir..

Exemple d’imatge / pancarta d’heroi

“El plegat” pot canviar depenent del dispositiu

Aquí és on les coses es compliquen, i per què no us haureu de sobrecarregar intentant encaixar tot per sobre d’aquesta línia màgica. Depenent del dispositiu de l’usuari, les dimensions de la pantalla poden variar enormement. Una pantalla 5K que es deixa caure a la mandíbula té una resolució vertical de 2880 píxels, mentre que un iPhone 5 té menys de la meitat. Això significa que els usuaris de mòbils no podran incloure tants continguts a la seva propietat immobiliària a la pantalla. (Més informació sobre això més endavant.)

CONSELL RÀPID: La regla general és assegurar-se que el contingut “per sobre del plec” s’encaixa dins del denominador comú més baix de les dimensions de la pantalla. Generalment s’accepta com 768 píxels de resolució vertical.

3. La tipografia és el vostre disseny

Si no teniu un negoci de fotografia, el text és l’element més important de qualsevol lloc web, per la qual cosa és important fer-ho bé. La jerarquia de la vostra pàgina web depèn molt de la tipografia que trieu: com els vostres encapçalaments, subtítols i text del cos segueixen un flux natural i es mantenen visualment distintius els uns dels altres. Per a una visió completa de la tipografia, consulteu la nostra guia de bones pràctiques. A continuació, es detallen alguns aspectes més importants:

  • Assegureu-vos que sigui el text llegible (evite els tipus de lletra florits!) i prou gran (generalment al voltant de 16px per al cos).
  • No et quedis més que dos tipus de lletra—I assegureu-vos que s’uneixen bé entre si!
  • Doneu als vostres paràgrafs una mica de espai per respirar entre ells i fiqueu-ne prou encoixinament superior o marge als vostres títols per indicar salts clars de contingut.
  • Eviteu línies de text llargues. És més fàcil que a les línies de paràgrafs no hi hagi més que 15 paraules de llarg—I una mica menys que per a les pantalles mòbils.
  • Serif Els tipus de lletra són normalment millors només en forma d’impressió, tret que s’utilitzin en títols grans del web.

4. Colors & El contrast és crucial

Hem parlat molt de temps sobre la psicologia del color, però el concepte no es repeteix. Els colors que trieu per al vostre lloc web tenen un paper important en la percepció dels usuaris de la vostra marca, així com en la motivació que poden sentir-se a l’acció (és a dir: comprar coses) a través del vostre lloc web. Per què? Bé, cada color evoca determinades emocions i, ja sigui per la seva naturalesa inherent o per condicionament cultural, aquests colors s’han associat a determinats tipus d’empresa. Si una empresa de joguines de nens o un assessor financer pintés tot el seu lloc web en negre, seria absolutament l’enviament de senyals equivocats al públic previst. Al costat del flipside, un taronja brillant o un blau agradable, respectivament, captarien el to i la consciència perfectes per als seus clients.

Exemple de colors de disseny webEl blau és un color que evoca confiança i confiança, una elecció popular per als llocs web relacionats amb les finances.

Si ja heu establert els colors de la vostra marca, utilitzeu-los al lloc web. Però el millor és mantenir-ho no més de tres colors pel vostre lloc; com els tipus de lletra, no voldreu exagerar-ne aquí ni el vostre lloc pot acabar amb diversos trastorns de personalitat. Aneu també amb compte amb els brots de colors a la vostra pàgina web; els nostres ulls ens atrauen com a trampes de mel i podrien interrompre el flux natural del contingut. Utilitzeu el color només quan sigui més necessari, com per exemple enllaços o botons.

Sobre el tema de contrast, és imprescindible que el vostre text destaqui de fons. Si utilitzeu grisos clars, grocs o verds per als vostres tipus de lletra, gairebé segur que els convertiran a la pàgina. El negre sobre fons blanc és la combinació més gran de contrast i, generalment, és el que us heu d’adherir.

CONSELL RÀPID: El millor és evitar saturació completa amb colors a la xarxa. El vermell pur (valor hex. # Ff0000) és una mica massa punxós als ulls. De la mateixa manera, el negre pur (# 000000) dels tipus de lletra tendeix a vibrar massa fortament per als ulls, mentre que un negre lleugerament reduït (# 333333) facilita la lectura.

També voleu que el vostre text aparegui en les imatges de fons. Si utilitzeu fotos molt ocupades, podeu distreure del text, per tal d’evitar aquest problema, o bé feu servir fotografies menys detallades o bé utilitzeu una superposició de, per exemple, rgba (51.51.1,0.5) per suavitzar la imatge que es troba sota del text..

exemple de superposició d’imatgesUtilitzeu una superposició al darrere del text per ajudar-lo a sortir de fons.

El contrast també juga un paper en la manera d’atraure els usuaris amb certs elements clau del vostre lloc. Els botons més importants de crida a l’acció han de cridar l’atenció mitjançant l’ús de colors contrastats. Un blau “Compra ara!” el botó perd la seva urgència i val la pena quan és empassat per un lloc que utilitza blau a tot arreu, però un botó vermell a la mateixa pàgina crida l’atenció d’un usuari cridant “Hola! Feu clic a mi! “

6. Utilitzant imatges

L’elecció de les imatges adequades per utilitzar al vostre lloc web depèn en part de la vostra pròpia aptitud artística, però també hi ha consideracions intel·lectuals que haurien d’ajudar en el vostre procés de selecció. En primer lloc, eviteu embellir el vostre lloc amb fotografies alienes només perquè puguin semblar agradables. En lloc d’això, penseu en com cada imatge que feu servir serveix per al seu propi propòsit i, més important, com actua contingut. Una foto ben escollida pot transmetre la vostra marca, servei, producte o públic molt més eficaç que les paraules. Utilitzeu fotos per ajudar els usuaris a entendre alguna cosa, a evocar emocions o a inspirar confiança i confiança; utilitzar-los purament per raons estètiques ha de ser secundari.

Comprensió dels tipus d’arxius & Compressió

Hi ha un pas addicional que cal fer per utilitzar imatges del web. Les fotos fantàstiques que obteniu de llocs com Shutterstock i iStock poden ser força massives (5.000+ píxels horitzontals i més de 10 megabytes de mida), que són adequats per imprimir, però no són adequats per als llocs web. No tothom té Internet de fibra ràpida, de manera que heu de reduir la mida de les vostres imatges per adaptar-se als temps de càrrega (per no dir que el 40% dels visitants sortiran si el lloc triga més de 3 segons a carregar-se). Típicament, voleu mantenir cadascuna de les imatges a la data màxim de 500 quilobytes de mida, encara que probablement la mida mitjana del fitxer hauria d’estar al voltant 100 quilobytes.

  • JPEG és el format estàndard de les fotos. És un format amb pèrdues, cosa que significa que la seva imatge es redueix quan es comprimeix. Si utilitzeu un JPEG per a una imatge de fons d’amplada completa, us recomano mantenir la seva resolució horitzontal a ni més ni menys que 1200px. Amb finalitats generals, Eviteu utilitzar cap imatge amb menys de 600px resolució horitzontal, ja que probablement apareixerà borrosa a les pantalles modernes.
  • PNG és l’opció preferida pels gràfics o per a les imatges que ho requereixin transparència. És un format sense pèrdues, ideal per mantenir la qualitat de la imatge, però també pot augmentar la mida del fitxer. En general, utilitzeu gràfics PNG per a il·lustracions, icones o imatges més petites que es poden apilar sobre altres elements per la seva transparència. Rarament necessitareu que un PNG sigui superior a 1000px.
  • SVG (gràfic vectorial escalable) és un format més recent que està substituint GIF i fins i tot PNG en alguns casos. La bellesa de SVG és que pot ser tan gran o tan petita a la pantalla com cal que sigui, tot mantenint una claredat i una nitidesa perfectes (i no deixa de ser una mida de fitxer petita). Heu de considerar l’ús de SVG per a qualsevol logotip, icona o gràfic vectorial al vostre lloc web; ja que les pantalles d’alt DPI s’estan fent habituals, la nitidesa del SVG proporcionarà la màxima qualitat d’imatge.

Exemples de tipus d’arxiu d’imatges

6. Disseny mòbil-primer

Ara hem arribat a un moment en què la majoria de la gent consumeix contingut en línia amb els seus telèfons en lloc d’un ordinador de sobretaula. Com a resultat, hi ha una prioritat molt més gran en el disseny web per adaptar-se específicament a l’experiència mòbil, cosa que ha portat a la filosofia de disseny “primer mòbil”.

Essencialment això significa que, durant la fase inicial de dibuix i planificació en paper, el millor és centrar-se en la disposició mòbil del lloc. A les pantalles més petites només es mostrarà el contingut més important necessari per al funcionament del vostre lloc. Això t’obliga a simplificar el disseny i retallau des dels seus inicis tots els elements que distreuen. Penseu en el contingut “per sobre del plegat”: si primer us assegureu que tota la informació important pot adaptar-se a la pantalla inicial d’un telèfon, ja sabreu que hi cabrà en les pantalles més grans. Un cop heu clavat la disposició mòbil essencial, podeu començar a afegir embelliments o imatges més grans a les pantalles d’escriptori.

La vostra disposició per a mòbils assumeix un disseny més vertical que inspira el desplaçament, en lloc de l’ampli paisatge d’un escriptori. Si, per exemple, la vostra pàgina de producte mostra els llistats en una graella de 3 entre els ordinadors de l’escriptori, normalment la disposició del mòbil els mostrarà com una sola columna.

Sí, això vol dir que bàsicament és necessari crear diversos dissenys per a cada pàgina del vostre lloc web. Per sort, qualsevol bon creador de llocs web hauria de proporcionar plantilles de resposta que ajustin aquests dissenys automàticament, només haureu de ajustar-los..

CONSELL RÀPID: Assegureu-vos que cap element del vostre lloc, especialment si és interactiu, no sigui inferior a 44px per 44px de mida. Per què? Aquest és el més petit que pot arribar a la diana on el dit encara pot tocar-lo amb precisió.

7. Manteniu les coses alineades

Quan els elements semblen distribuïts esporàdicament al vostre lloc, sovint es deu a un problema d’alineació. Imagineu-vos la vostra pàgina web en un full de paper gràfic. Separeu-la en columnes parelles dibuixant, per exemple, sis línies rectes. Ara voleu assegurar-vos que les vores esquerre dels vostres elements es distribueixen i s’alineen només a aquestes sis línies verticals.

8. Manteniu-lo senzill

Sovint es diu que el millor disseny web passa desapercebut; només és un disseny dolent que crida l’atenció sobre si mateix. Com hem esmentat anteriorment, l’aspecte més important de qualsevol lloc web és simplement el seu text. Si podeu proporcionar una tipografia excepcional que és un goig de llegir, és probable que no hagueu de fer-ne molt més. Tractar de dissenyar el vostre lloc simplement desordenarà i complicarà les coses.

Calen les ombres de la caixa? Els patrons bojos i ornamentats? Les desenes de colors? Probablement no.

9. Grans espais oberts

El contingut necessita espai per respirar. espai blanc és l’elecció de disseny que predomina per als llocs web moderns: amplis i oberts espais de no-res per a les àrees de contingut entre contingut. És una manera més divertida de digerir informació, i també us animarà a eliminar el text i les imatges superflues per mantenir el lloc net.

Conclusió

El disseny web pot ser un camp extensiu de tecnologia per aprendre, conceptes per practicar, idiomes per estudiar i artística per dominar. Tots aquests components començaran a tenir sentit, només amb experiència, però ja esteu bé per comprendre els fonaments del que fa que un bon lloc web funcioni. Espero que aquesta guia serveixi de punt de sortida i que us doni confiança per agafar el vostre lloc web a les vostres mans i construir-lo de la manera que només el propietari de l’empresa coneix millor.

Neix un dissenyador!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me