Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

3.Com Ha De Ser Un Web

763 views

Published on

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

3.Com Ha De Ser Un Web

  1. 1. Planta't a Internet! Telejet Garrotxa Professor: Marc Nicolau
  2. 2. <ul><li>Bona web  Bon contingut </li></ul><ul><ul><li>Un bon contingut és clau perquè la web es promocioni amb èxit. </li></ul></ul><ul><ul><li>Cal preguntar-se: </li></ul></ul><ul><ul><ul><li>Per què els visitants es quedaran a la meva web? </li></ul></ul></ul><ul><ul><ul><li>Què és el que busquen? </li></ul></ul></ul><ul><ul><ul><li>Què tinc que ells necessitin? </li></ul></ul></ul><ul><ul><ul><li>Com els puc mantenir després d’haver visitat la meva web? </li></ul></ul></ul>
  3. 3. <ul><li>Es treballa sobre paper: </li></ul><ul><ul><li>Què es vol aconseguir amb la web? </li></ul></ul><ul><ul><li>Descripció breu dels continguts de la pàgina, títol principal, etc. </li></ul></ul><ul><ul><li>Finalitat que es persegueix amb la web : informar, fer negoci, entretenir, etc. </li></ul></ul><ul><ul><li>Estudi de pàgines similars : què pot oferir que no tinguin les altres per atreure els usuaris, etc. </li></ul></ul><ul><ul><li>Descriure quina és la tipologia dels meus usuaris : nivell informàtic, idiomes, interessos, problemes físics, etc. </li></ul></ul><ul><ul><ul><li>Adaptar la pàgina a les seves característiques. </li></ul></ul></ul><ul><ul><li>On es visualitzarà la web : navegadors més utilitzats, elements específics, etc. </li></ul></ul>
  4. 4. <ul><li>Dibuixar un organigrama amb totes les parts de la web. </li></ul><ul><ul><li>Distribuir el text. </li></ul></ul><ul><ul><li>Gràfics. </li></ul></ul><ul><ul><li>Vincles a altres documents. </li></ul></ul><ul><ul><li>Objectes multimèdia que cal incloure. </li></ul></ul>
  5. 5. <ul><li>Tipus d’estructuració </li></ul><ul><ul><li>Àrbre : </li></ul></ul><ul><ul><ul><li>Pàgina principal que enllaça amb altres pàgines, que també tenen enllaços a altres pàgines de nivell inferior. </li></ul></ul></ul><ul><ul><ul><li>Agrupació de les pàgines amb nivells: per anar del primer a l’últim nivell cal passar pels intermitjos </li></ul></ul></ul><ul><ul><ul><li>És una estructura poc navegable si la web té moltes pàgines. </li></ul></ul></ul>
  6. 6. <ul><li>Tipus d’estructuració </li></ul><ul><ul><li>Llista : </li></ul></ul><ul><ul><ul><li>Estructura oposada a l’estructura amb arbre. </li></ul></ul></ul><ul><ul><ul><li>No hi ha pàgina principal  totes estan al mateix nivell. </li></ul></ul></ul><ul><ul><ul><li>Per arribar a l’última pàgina cal recòrrer totes les anteriorrs. </li></ul></ul></ul><ul><ul><ul><li>És una bona estructura per presentar manuals o altres aplicacions de tipus “seqüencial”. </li></ul></ul></ul>
  7. 7. <ul><li>Tipus d’estructuració </li></ul><ul><ul><li>Mixta : </li></ul></ul><ul><ul><ul><li>Combinació de les dues anteriors. </li></ul></ul></ul><ul><ul><ul><li>Pàgines amb jerarquia de nivells, que alhora estan connectats entre sí en forma de llista. </li></ul></ul></ul><ul><ul><ul><li>Molt més navegable i pràctica. </li></ul></ul></ul>
  8. 8. <ul><li>Tipus d’estructuració </li></ul><ul><ul><li>En xarxa : </li></ul></ul><ul><ul><ul><li>Totes les pàgines de la web estan connectades entre sí. </li></ul></ul></ul><ul><ul><ul><ul><li>Més complexe i menys ordenada. </li></ul></ul></ul></ul><ul><ul><ul><li>Avantatge: des de cada pàgina es pot anar a qualsevol altra. </li></ul></ul></ul><ul><ul><ul><li>Necessita que hi hagi molta planificació per evitar que l’usuari no sàpiga cap on ha de navegar. </li></ul></ul></ul>
  9. 9. <ul><li>Fer un inventari de tot el material que es vol mostrar a la web. </li></ul><ul><li>Inicialment, organitzar el matreial per temes. </li></ul><ul><ul><li>Posteriorment, contruir gràficament l’estructura de la web. </li></ul></ul>
  10. 10. <ul><li>És molt útil construir varis prototips o esboços: </li></ul><ul><ul><li>Serveix per comprovar la reacció dels usuaris. </li></ul></ul><ul><ul><ul><li>Fer varies plantilles amb diferents estructures </li></ul></ul></ul><ul><ul><ul><li>Demanar a amics i familiars que naveguin per la web i donin la seva opinió. </li></ul></ul></ul>
  11. 11. <ul><li>La porta d’entrada a la web. </li></ul><ul><li>Cal fer ben visibles els continguts que puguin interessar més als visitants. </li></ul><ul><li>Deixar ben clar el tema de la web. </li></ul><ul><li>Cal incloure un enllaç cap a la pàgina d’inici des de la resta de pàgines. </li></ul><ul><ul><li>Facilita molt la navegació. </li></ul></ul>
  12. 12. <ul><li>Fer un bon disseny de la web pot ser molt difícil. </li></ul><ul><li>En general, una web ha de ser: </li></ul><ul><ul><li>Agradable </li></ul></ul><ul><ul><li>Que mostri informació </li></ul></ul><ul><ul><li>Que “quedi” a la ment del visitant </li></ul></ul><ul><ul><li>Tècnicament i visualment coherent. </li></ul></ul>
  13. 13. <ul><li>Precedència (guiar l’ull) </li></ul><ul><ul><li>Facilitat amb que els usuaris troben alguna cosa a la pantalla sense molt esforç. </li></ul></ul><ul><ul><ul><li>Si l’usuari tarda més de 10 segons intentant el que busca, acabrà tancant la finestra. </li></ul></ul></ul><ul><ul><li>Per aconseguir-ho, cal tenir en compte: </li></ul></ul><ul><ul><ul><li>La posició, el color i el contrast dels elements </li></ul></ul></ul><ul><ul><ul><li>Exemple : Adobe </li></ul></ul></ul><ul><ul><ul><ul><li>Utilitza zones amb diferents colors per guiar a l’ull a través de les seccions. </li></ul></ul></ul></ul>
  14. 14. <ul><li>Espaiat </li></ul><ul><ul><li>Fa que les coses es vegin més clares. </li></ul></ul><ul><ul><li>Cal tenir en compte l’espaiat: </li></ul></ul><ul><ul><ul><li>Entre línies. </li></ul></ul></ul><ul><ul><ul><li>Entre caràcters. </li></ul></ul></ul><ul><ul><ul><li>Els espais en blanc. </li></ul></ul></ul><ul><ul><li>Exemple : web Marius </li></ul></ul><ul><ul><ul><li>Web molt neta, simple i utilitza bé els espais. </li></ul></ul></ul>
  15. 15. <ul><li>Navegació </li></ul><ul><ul><li>Mecanisme que permet a l’usuari moure’s per la web i trobar la informació que cerca. </li></ul></ul><ul><ul><li>Tots els enllaços de navegació han de funcionar perfectament. </li></ul></ul><ul><ul><ul><li>No hi ha res més frustrant que un enllaç que no funciona! </li></ul></ul></ul><ul><ul><li>Utilitzar paraules que indiquin clarament cap on porta l’enllaç. </li></ul></ul><ul><ul><ul><li>No posar coses com “click aquí” o “aquesta web”. </li></ul></ul></ul><ul><ul><li>Diferenciar clarament què és un enllaç del que no ho és: </li></ul></ul><ul><ul><ul><li>Posant un color diferent. </li></ul></ul></ul>
  16. 16. <ul><li>Navegació </li></ul><ul><ul><li>Dos tipus bàsics de navegació: </li></ul></ul><ul><ul><ul><li>La que diu on pots anar </li></ul></ul></ul><ul><ul><ul><li>La que indica on estàs: Inici -> Secció -> Subsecció </li></ul></ul></ul><ul><ul><li>Exemple : web Generalitat de Catalunya </li></ul></ul><ul><ul><ul><li>Web amb un bon sistema de botons de navegació. </li></ul></ul></ul>
  17. 17. <ul><li>Dissenyar per construir </li></ul><ul><ul><li>Abans de dissenyar res, cal tenir en compte que tot pot canviar: </li></ul></ul><ul><ul><ul><li>Tipus de navegador: provar-ne de diferents. </li></ul></ul></ul><ul><ul><ul><li>Resolució de pantalla: cal que es vegi bé en diferents resolucions </li></ul></ul></ul>
  18. 18. <ul><li>Tipografia </li></ul><ul><ul><li>El text és un dels elements més importants del disseny </li></ul></ul><ul><ul><li>Cal tenir en compte: </li></ul></ul><ul><ul><ul><li>El tipus de font: com a màxim, 3 tipus diferents. Amb contorns arrodonits (Arial, Verdana, etc.) </li></ul></ul></ul><ul><ul><ul><li>La mida de la font: si no és un títol, no superar la mida 14 punts. </li></ul></ul></ul><ul><ul><ul><li>L’espaiat. </li></ul></ul></ul><ul><ul><ul><li>La llargada de la línia. </li></ul></ul></ul><ul><ul><ul><li>El color. </li></ul></ul></ul><ul><ul><ul><li>Els paràgrafs. </li></ul></ul></ul><ul><ul><li>Exemple: flickr </li></ul></ul><ul><ul><ul><li>Web on s’utilitza molt bé les tipografies. </li></ul></ul></ul>
  19. 19. <ul><li>Usabilitat </li></ul><ul><ul><li>Cal utilitzar els estàndards web. </li></ul></ul><ul><ul><li>Pensar amb l’usuari: </li></ul></ul><ul><ul><ul><li>Que pugui fer el que volem que faci. </li></ul></ul></ul><ul><ul><ul><li>Posar-nos en el seu lloc. </li></ul></ul></ul><ul><ul><li>Exemple : Google </li></ul></ul><ul><ul><ul><li>Web molt usable ja que és simple i fàcil d’utilitzar. </li></ul></ul></ul>
  20. 20. <ul><li>Alineació </li></ul><ul><ul><li>Mantenir els elements de la web alineats és molt important. </li></ul></ul><ul><ul><li>Exemple : Electric Pulp </li></ul></ul>
  21. 21. <ul><li>Claretat </li></ul><ul><ul><li>Text i imatges a proporcions iguals . </li></ul></ul><ul><ul><ul><li>Pàgines on més del 50% de l’espai mostrat és només text, no es tenen en compte . </li></ul></ul></ul><ul><ul><ul><li>2 o 3 imatges per pàgina </li></ul></ul></ul><ul><ul><ul><li>Pàgines amb molts efectes són molt denses, cansades, pesades, ... </li></ul></ul></ul><ul><ul><li>Text: </li></ul></ul><ul><ul><ul><li>Crear llistes d’idees. </li></ul></ul></ul><ul><ul><ul><li>Paràgrafs. </li></ul></ul></ul><ul><ul><ul><li>Frases amb negreta i cursiva. </li></ul></ul></ul><ul><ul><ul><li>Subapartats </li></ul></ul></ul><ul><ul><ul><li>Etc. </li></ul></ul></ul><ul><ul><ul><li>La gent a la web llegeix depressa  lectura fàcil i agradable. </li></ul></ul></ul>
  22. 22. <ul><li>Claretat </li></ul><ul><ul><li>Cal detallar molt bé cada contorn. </li></ul></ul><ul><ul><li>Assegurar-se que el contrast dels colors és alt. </li></ul></ul><ul><ul><ul><li>No són agradables els colors de text oposats als colors de fons (blau-groc), o colors difícils de llegir (groc sobre fons blanc) . </li></ul></ul></ul><ul><ul><ul><li>La combinació perfecta seria aquella que utilitzés tota la gama de tons d’un color concret unida a altres dos o tres colors diferents. </li></ul></ul></ul><ul><ul><li>Exemple : Generalitat de Catalunya </li></ul></ul>
  23. 23. <ul><li>Consistència </li></ul><ul><ul><li>Tot ha de conincidir: </li></ul></ul><ul><ul><ul><li>Mides dels títols </li></ul></ul></ul><ul><ul><ul><li>Estils </li></ul></ul></ul><ul><ul><ul><li>Colors </li></ul></ul></ul><ul><ul><ul><li>Elements. </li></ul></ul></ul><ul><ul><ul><li>Etc. </li></ul></ul></ul><ul><ul><li>Exemple: Veerle </li></ul></ul><ul><ul><ul><li>Manté una consistència en tota la web. </li></ul></ul></ul>
  24. 24. <ul><li>www.guiesmeranges.com/principalcatala.htm </li></ul><ul><ul><li>Contingut obsolet. </li></ul></ul><ul><ul><li>Enllaços trencats. </li></ul></ul><ul><ul><li>Falta consistència. </li></ul></ul><ul><ul><li>Entre altres. </li></ul></ul><ul><li>www.guiesmeranges.com </li></ul><ul><ul><li>Tipus de lletra difícil de llegir. </li></ul></ul><ul><ul><li>Colors de fons diferents a les pàgines de la web. </li></ul></ul><ul><ul><li>Entre altres. </li></ul></ul>

×