Content

• Per trepitjar
• Mètode 1 de 2: Les 3 regles bàsiques
• Mètode 2 de 2: Directrius
• Consells
• Advertiments

Dissenyar un lloc web fantàstic pot semblar una tasca descoratjadora, però sempre que tingueu en compte els conceptes bàsics, trobareu el procés interessant i divertit. És més que una bona aparença. Us mostrarem els conceptes bàsics i algunes directrius generals per ajudar-vos a dissenyar llocs web que la gent visiti una i altra vegada.

Per trepitjar

Mètode 1 de 2: Les 3 regles bàsiques

1. Regla 1:Escolta el teu client. És possible que estigueu dissenyant "el lloc web més gran del món de la història de l'univers i més enllà", amb negres rics, tipus de lletra refinats i colors artístics brillants per a un lloc que crida "que m'explori ara". Malauradament, el vostre client volia una barra de menú taronja amb lletres roses i taronja brillants. Us han acomiadat i el vostre millor lloc web de tots els temps (al qual el client té els drets) es troba en algun lloc del disc de còpia de seguretat, sense que ningú el torni a veure.
   • Estudieu la identitat corporativa del vostre client. Feu que el client us mostri alguns llocs web que estimen. Això no només us donarà una idea del que els agrada, sinó que també us donarà algunes idees de disseny que potser no us hauríeu pensat.
   • Si creieu que bromejem del lloc web taronja i rosa, tingueu en compte aquest lloc sofisticat i divertit:
2. Regla núm. 2:Conegueu el vostre públic i el que busquen i adapteu el vostre disseny en conseqüència. El motiu pel qual la gent té llocs web és perquè vol que altres persones els vegin. Pot ser informatiu, comercial o per entretenir a un públic objectiu específic. La vostra feina com a dissenyador consisteix a saber per a qui esteu dissenyant i mantenir-los a la pàgina quan hi aterrin.
   • Podríeu pensar: "Si es veu bé, es quedaran". Però això no ha de ser necessàriament així. Agafeu béns immobles, per exemple. Aquí teniu un lloc amb un disseny net i divertit. Té molt d’espai en blanc que dóna un aspecte obert, colors vius i un format de pantalla ampla modern amb enllaços en un lloc destacat:
   • Vegeu ara aquest enfocament de venda de béns immobles a la mateixa zona: desordenat i molt ocupat, amb colors apagats i amb publicitat.
   • Endevineu quin funciona millor per a aquells que busquen una casa? Dret, aquell on cases! Quan la gent busca "cases en venda a Santa Mònica", no els importa l'aspecte d'un lloc. No volen llegir sobre l’agent immobiliari ni veure boniques imatges de la ciutat. Volen veure cases.
3. Regla # 3:Escolta’t. Comprens el que vol el client i saps el que busca el teu mercat. Ara és hora de parar atenció a vosaltres, el dissenyador!
   • Creeu una plantilla al programari gràfic que trieu. Feu els elements de la pàgina en diferents capes (de manera que pugueu modificar les coses més tard sense destruir tota la plantilla). Aquests elements poden ser:
     • Capçalera. Aquest és un element que és el mateix a totes les pàgines del vostre lloc. La capçalera consta del títol i el logotip del lloc, així com enllaços a la resta de parts del lloc web (per exemple, Quant a, Contacte, etc.). Visualment i pràcticament això ho lligarà tot. És una bona pràctica tornar a enllaçar el primer botó d'una barra de menú a la pàgina d'inici.
     • Per exemple, fem una ullada a Apple:
     • Com passa amb la majoria de coses d’Apple, la seva pàgina d’inici té un disseny senzill i net. Tingueu en compte la barra de menú de la part superior, amb temes lògics per a cada botó, a més d'un camp de cerca; sempre és una bona idea si el vostre lloc ho admet. Vegem ara una pàgina de destinació d’un dels botons, l’iPad, per veure alguns elements:
     • La barra de menú només canvia enfosquint el botó de l'iPad.
     • El tema de la pàgina de destinació es mostra amb lletres grans i negres.
     • Apareixerà un submenú nou perquè pugueu obtenir més informació sobre el producte. Si feu clic a un d'aquests botons, veureu que cada pàgina ofereix contingut nou en funció del tema, però que serà idèntica en disseny i disseny.
     • Sovint, cada tema principal de la barra de menú tindrà subtítols diferents per emplenar. En lloc de crear una segona barra de menú, podeu utilitzar menús emergents com aquest exemple de Musicians Friend:
     • Barra lateral. Això apareixerà a moltes pàgines del vostre lloc, però no necessàriament a totes, segons el context. Tot i això, és un element molt important i s’ha de dissenyar acuradament perquè sigui intuïtiu i no massa desordenat. A diferència de la barra de menú, el contingut d’una barra lateral pot ser molt dinàmic. Mireu aquestes dues barres laterals del venedor immobiliari Trulia. La primera és per als compradors:
       
       

Mètode 2 de 2: Directrius

1. Dissenyeu una bona interfície d'usuari. Col·loqueu els diversos elements del lloc web, com ara el títol, les barres laterals, els logotips, les imatges i el text, al mateix lloc de totes les pàgines perquè el vostre lloc sigui navegable i intuïtiu.
   • Mantingueu la mateixa capçalera a la part superior de cada pàgina. Si el contingut del vostre lloc permet o no repetir elements, assegureu-vos que la part superior de cada pàgina sigui la mateixa.
   • Utilitzeu la lògica al vostre disseny. Els elements d’una sola pàgina haurien d’estar ordenats lògicament per importància o tema; les diferents pàgines del lloc també ho haurien de ser.
2. Crea un estil coherent. Quan el disseny ha de donar consistència estructural al vostre lloc, l'estil ha de proporcionar harmonia temàtica.
   • Enganxeu-vos a dos o tres colors principals i assegureu-vos que vagin bé.
   • Eviteu utilitzar massa estils o mides de tipus de lletra; si voleu alternar uns quants, utilitzeu-los de la mateixa manera a cada pàgina.
   • Utilitzeu Fulls d’estil en cascada (CSS) per mantenir un estil uniforme i facilitar el canvi d’elements a tot un lloc web sense haver d’anar a cada pàgina per separat.
3. Maximitzar la llegibilitat. Per facilitar la lectura del text, podeu dividir-lo en parts més petites.
   • Utilitzeu subtítols i un espaiat adequat per separar cadascuna de les parts.
   • Utilitzeu lletres en negreta o mides diferents per mostrar la jerarquia i la importància dels temes.
   • Presteu atenció a la manera de tractar el text. No feu que el tipus de lletra sigui massa petit i augmenteu l’interlineat per facilitar la lectura de trossos de text grans. Els grans fragments de text són més difícils de llegir; descomponeu-lo en paràgrafs més petits.
4. Feu que el vostre lloc web sigui llegible universalment. Utilitzeu HTML estàndard i eviteu etiquetes, funcions i connectors que només estan disponibles per a una marca o versió d’un navegador.
   • Tot i que la majoria de navegadors i ordinadors moderns poden gestionar imatges complexes, tot quedarà més net si reduïu i optimitzeu les vostres imatges per al web. Ponderar la importància de la qualitat enfront de la velocitat.
5. Proveu el vostre lloc web. Assegureu-vos que tots els enllaços funcionen com s'esperava i les imatges apareixen correctament.
   • És possible que vulgueu organitzar algunes proves d’usuaris fent que els membres del vostre públic objectiu provin la claredat i la facilitat d’ús del vostre disseny i proporcionin comentaris sobre el vostre lloc web.
6. Publiqueu el vostre lloc web. Compreu un nom de domini si encara no ho heu fet. Comproveu periòdicament si els enllaços continuen funcionant i escolteu els suggeriments que els visitants us envien per correu electrònic.

Consells

• Tot i que podeu dissenyar lliurement el disseny en funció de la vostra pròpia visió personal o de les coses que heu vist en altres llocs, pot ser més fàcil comprar un disseny ja fet.
• No bombardeïu el visitant amb imatges boniques i especials. L’animació en flash, els colors brillants, els fons estampats i la música que es reprodueix automàticament en carregar la pàgina van ser divertits experiments als anys 90, però ara espantaran els usuaris. S’adhereixen a fons simples que contrasten amb el color del text per a una màxima llegibilitat.
• Sempre podeu utilitzar CSS per optimitzar l’espai entre paràgrafs.
• Per als visitants amb discapacitat auditiva o visual, podeu subtitular vídeos, transcriure àudio i afegir un missatge d’accessibilitat. Tot i que les taules poden ser una manera eficient d’organitzar la informació, és possible que els visitants amb discapacitat visual que utilitzen el programari lector de pantalla no escoltin el material en l’ordre correcte.
• Deixeu que els vostres visitants estalvien tinta: utilitzeu un full d’estil independent per imprimir pàgines.
  • Desactiveu les imatges de fons quan definiu els paràmetres d'impressió.
  • Utilitzeu text negre sobre un fons blanc.
  • Traieu la barra de menú i les imatges innecessàries.

Advertiments

• Eviteu el plagi i observeu totes les lleis sobre drets d'autor. No inclogueu imatges aleatòries que trobeu en línia ni fins i tot elements estructurals sense aprovació. Tot el que utilitzeu al vostre lloc ha de ser tant legal com ètic.