Un bon disseny web

Un bon disseny web amb una jerarquia elaborada de continguts augmenta l’eficiència de la web com a canal de comunicació i intercanvi de dades, donant possibilitats de contacte directe entre el productor i el consumidor de continguts, característica destacable d’aquest mitjà amb comportament social.

Un estudi previ

El treball inicial de tot projecte web és un estudi per assessorar els clients a definir el perfil d’identitat, proporcionant una actitud una manera de ser i estar amb el qual s’instal·laran a la “xarxa“. Un “brief” per definir el que es vol aconseguir i transmetre amb el disseny web.

En aquest procés s’han de tenir en compte factors culturals i de comunicació que permetin atendre els entorns en què es mourà aquesta organització a internet.

Cal tenir coneixements tècnics adequats per afrontar els projectes des del punt de vista del disseny web.

Establir jerarquies del contingut

Els clients, (usuaris web) són persones molt ocupades que NO llegeixen molt si no és sobre alguna cosa que els interessi. La lectura ha de ser fàcil i ràpida (dir coses útils).
En nostre diari web hem ampliat una mica el tema de Com s’escriu en web

https://www.coexia.com/como-se-escribe-en-web/

Hi ha estudis que s’han de tenir en compte al’hora de dissenyar per a web com ho és “eyetracking“. Aquest estudi bàsicament mostra i estudia on mira la gent i amb això s’aconsegueix fonamentar les decisions sobre on col·locar els elements en la pàgina.

Els usuaris web comencen a llegir per la part superior esquerra abans de desplaçar cap avall i cap a la dreta, generalment escanegen les pàgines web en forma de ‘F’. Assegura’t que els elements importants del teu contingut es troben en aquestes àrees clau.

Web especialista en estudis de Eyetracking

Cercar la usabilitat i accessibilitat

S’ha d’intentar aconseguir una fàcil interacció amb els usuaris tenint en compte els lectors mandrosos o usuaris amb poca experiència. El disseny és una eina útil per adquirir més temps dels usuaris web, despertant el seu interès.

  • Una primera fase és definir una estructura amb els elements més importants.
  • Destacar els missatges amb formats (bold, color) i títols, aconseguir que tot sigui el més llegible i fàcilment recognoscible
  • Accessibilitat: es refereix a brindar les facilitats perquè qualsevol usuari pugui accedir i navegar a la pàgina. Això s’aconsegueix generant dreceres i continguts alternatius, que s’introdueixen directament en el codi de la pàgina i que són transparents a l’usuari.
  • Usabilitat: té a veure directament amb la capacitat mediadora del lloc web. Un sistema en línia neix com un vehicle d’informació, pel que no hauria de tenir barreres que impedeixin que el flux de la mateixa entre la pantalla i usuari.

Hi ha alguns autors que ens assenyalen algunes pautes a tenir en compte a l’hora de pensar en com naveguessin els usuaris al nostre web i amb quins problemes es poden trobar.
Un llibre fàcil d’entendre que mostra el perquè és important invertir en la usabilitat del lloc web: No Em Facis Pensar, Steve Krug.

Elecció de tipografies

En línies generals es pot dir que en el disseny web tot compta, tot ha de ser clar, no menys és la selecció de les tipografies, lletres de formes bàsiques, pensant NO només a la llegibilitat sinó en reforçar conceptes.

Donar format al text pot cridar l’atenció. Per guiar el lector als punts més importants del text pots utilitzar negreta, majúscules, cursiva, color, i text subratllat. Però amb prudència, si t’excedeixes dificultarà la lectura.

El primer que llegeixen els usuaris en una pàgina són els titulars. Assegura’t no bloquegen altres temes de la pàgina i que aquests es destaquen prou per incitar el lector a seguir buscant.

Utilitza vinyetes i text ressaltat al llarg de la pàgina de manera que incitis als lectors a llegir més.

El text atrau l’atenció abans que els gràfics. Contràriament al que podria imaginar-se, el primer que un usuari visita un lloc web no són les imatges.

La majoria dels usuaris que arriben a la teva web ho fan buscant informació, i no imatges, així que assegureu-vos que el teu lloc aquest dissenyat perquè les parts més importants del teu text siguin el més destacat.

És molt important una navegació fàcil perquè la gent comprovi totes les tasques, posar els documents de manera que siguin fàcils de trobar i atractius visualment.

Les fonts ornamentals o cal·ligràfiques no han d’emprar més enllà d’unes poques línies, ja que serien causa immediata de fatiga visual.

Ara els nous navegadors i les noves regles CSS permeten introduir una font en una pàgina web, de manera que podem utilitzar qualsevol font que vulguem.

Aplicació web creada per Coexia:

Tipografia incrustada a la web:
Els formats necessaris (TTF (o OTF), EOT y SVG y WOFF)

https://www.coexia.com/google-lanza-font-api-y-font-directory/

La solució que Google ens presenta per a poder visualitzar les seves fonts en web és una altra bona opció. Són gratuïtes i variades. No cal tenir la font allotjada al nostre servidor. Només necessitem crear un enllaç a la web Google Font API especificant les fonts que volem utilitzar i aplicar mitjançant regles CSS.

Web creada per Coexia:

Droid Sans Mono: http://www.pintarparking.com/

Algunes tipografies de Google:

exemple tipografia google per a web

Color dels textos

El color, aplicat discretament a algunes parts del text, pot millorar molt la seva llegibilitat, donar-li un major pes visual i fins i tot crear la impressió de major varietat de fonts. Un lleuger toc de color en els subtítols, o remarcant una cita, és un recurs molt útil i elegant, però fer un collage de colors en una pàgina de text que pretén ser seriós o informatiu posa en evidència un mal gust i un escàs sentit comú.

Quan hem de buscar un color per associar a un tipus, el primer que hem d’examinar són els objectius del treball que hem de realitzar i el públic al qual va dirigit. No és el mateix fer un disseny per una web de gelats que per a una web d’un banc. Són totalment diferents i estan destinats a públics amb preferències i necessitats diferents.

Un dels factors importants dels textos, que influeix en gran manera en la llegibilitat dels mateixos, és el contrast entre aquests i el fons sobre el qual se situen. Un contrast adequat fa que els textos es llegeixin bé i que la seva lectura no cansi al lector, condició molt important en contingut textual. Si el tipus es disminueix en grandària, s’ha d’incrementar la força de contrast de color.

Retoc selecció de Fotos

Coherència i qualitat en la imatge.

· Les imatges grans reben més atenció. Si vas a utilitzar imatges a la teva pàgina, com més grans millor. La gent està més interessada en una imatge on es poden veure clarament els detalls i la informació. Només feu que l’imatge que utilitzis sigui particularment pertinent al teu text, en cas contrari és molt probable que sigui ignorada.

· Imatges senzilles i netes atreuen més l’atenció. Si bé poden funcionar amb el teu disseny, les imatges artístiques no van a obtenir molta atenció del lector. Si utilitzes fotos amb gent, assegureu-vos de que són clares. Cal assenyalar també que les fotos amb “veritable” gent i no amb models, donen millor resultat.

La gent és naturalment atreta a mirar les cares, són un gran atractiu per als ulls. Les imatges de persones són les primeres coses que mira la gent en general, en particular els seus rostres.

Web creada per Coexia:

http://www.upf.edu/studyabroad/

Si vols saber una mica més sobre les característiques de les fotos tenim una entrada, al El nostre diari web https://www.coexia.com/que-ha-de-tener-una-imagen-para-web/

Disseny i enfocament de la Iconografia

Icones en el disseny web.

Les icones són un dels elements gràfics més usats en el disseny de pàgines webs, el principal objectiu d’una icona és donar una informació visual concreta de forma ràpida i entenedora per a tothom.

Encara que a simple vista no ho sembli l’elecció i el disseny d’una icona és un procés de temps, no en el desenvolupament sinó en el concepte que ha d’expressar una figura senzilla.

En el disseny de pàgines web trobem icones ja estandarditzats per representar determinada informació, com ara:
el sobre per enviament de correus electrònics, la lupa per a buscar, la caseta per a la home, o la cistella i el carret per a la compra … etc. Encara que mantinguem la seva estructura base podem realitzar canvis per adaptar-los al nostre disseny de web.

Els icones com elements gràfics en les pàgines web, serveixen per a identificar seccions, situar punts visuals interactius, ampliar la informació d’enllaços textuals, etc.

El més important que s’ha de tenir en compte en usar icones és manter una unitat en tot el disseny de la web, és a dir manter el mateix estil i color (podent fer variacions en zones que indiquin una acció diferent o que la informació s’hagi de destacar més que les altres).


http://www.woothemes.com/freebies/

Introduir components dinàmics com vídeos i animacions

L’entorn “multimèdia” ha introduït un nou llenguatge, on tot és cada vegada més visual … els missatges són reforçats i barrejats amb Imatges, icones, colors i formes. Tot això pensant en transmetre, motivar i despertar l’interès a fer clic.

També hem d’esmentar altres elements que aporten valors estilístics, de disseny i d’interactivitat el a title=”Vídeo” class=”external” href=”http://es.wikipedia.org/wiki/V%C3%ADdeo”>vídeo i l’animació, o els espais 3D.

En particular permeten la combinació dels estímuls visuals en acció i fins i tot els estímuls audibles.

Ara amb l’aparició del HTML5, CSS3 i JavaScript. tenim més recurs d’efectes que abans només eren possibles amb flash, com ara el over en els botons, passi d’imatges per banners, o destacar alertes en zones q ens interessa com pot ser amb el recurs de capes.

Web creada per Coexia:
http://www.videoclick.co/

Els usuaris web passen molt de temps mirant els botons i menús..

A causa d’això, haurem de dedicar una mica de temps extra per assegurar-nos que estan ben dissenyats. Després de tot, aquests no només criden molt l’atenció, sinó que són un dels elements més importants de la pàgina.

Slide image:

Web en flash:

http://ristorantegiorgio.com/
WordPress:

http://www.domopool.com/

Triar la millor opció segons l’avanç de la tecnologia, navegadors …

Fins fa poc si voliem corbes en els nostres dissenys web, havien de ser només per a fotografies, ara amb CSS3 podem usar corbes sense que siguin imatges:

Webs creadas per Coexia:

Amb imatge:

http://www.indcresa.com/

amb CSS3 en aquesta web hem pogut utilitzar degradats, ombres, corbes i capes sense utilitzar imatges.

http://www.picnegre.com/

efectes en textos com ombra (text-shadow)

https://www.coexia.com/ejemplos/index_3_css3.html

http://www.css3.info/preview/text-shadow/

https://www.coexia.com/el-nuevo-internet-explorer-9/

http://www.css3.info/preview/rounded-border/

https://www.coexia.com/ejemplos/index_2_canvas.htm

http://www.craftymind.com/factory/html5video/CanvasVideo.html