MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

This translation is incomplete. Please help translate this article from English.

Quin serà l'aspecte del vostre lloc web? Analitzeu la planificació i disseny de treball que heu de fer per al vostre lloc web abans d'escriure el codi, incloent, "Quina informació ofereix el meu lloc web?" "Quins tipus de lletra i colors és el que vull?" "Què fa el meu lloc?"

El primer és el primer: planificació

Abans de fer res, necessiteu algunes idees. Què hauria de fer el vostre lloc web en realitat? Un lloc web pot fer bàsicament qualsevol cosa, però per al vostre primer intent heu de mantenir les coses simples. Anem a començar per la creació d'una pàgina web senzilla amb una capçalera, una imatge, i uns pocs paràgrafs.

Per començar, haureu de respondre a aquestes preguntes:

  1. Quin és la teva pàgina web? Us agraden els gossos, Nova York, o Pacman?
  2. Quina informació esteu presentant sobre el tema? Escriviu un títol i alguns paràgrafs, i penseu en una imatge que volgueu mostrar en la vostra pàgina.
  3. Com es veu el vostre lloc web, en termes simples d'alt nivell. Quin és el color de fons? Quin tipus de font és apropiada: formals, dibuixos animats, audaç i fort, subtil?

Nota: Els projectes complexos necessiten directrius detallades que incloent tots els detalls de colors, tipus de lletra, espaiat entre els elements d'una pàgina, l'estil d'escriptura apropiada, i així successivament. Això de vegades es diu una guia de disseny o un llibre de marca, i es pot veure un exemple en les Firefox OS Guidelines.

Esbossar el disseny

A continuació, obtenir un llapis i paper i esbossar més o menys com voleu el aspecte del vostre lloc. En la vostra primera pàgina web senzilla, no hi ha molt per esbossar, però heu d'aconseguir l'hàbit de fer això ara. Realment ajuda - no heu de ser un Van Gogh!

Nota: Fins i tot en els llocs web reals, complexos, els equips de disseny en general comencen amb esbossos en paper, i posteriorment construeixen maquetes digitals utilitzant un editor de gràfics o tecnologies web.

Els equips web sovint inclouen tant un dissenyador gràfic i un user-experience dissenyador (UX). Els dissenyadors gràfics, òbviament, posar junts els elements visuals de la pàgina web. Els dissenyadors UX tenen un paper una mica més abstracte a l'hora d'abordar com els usuaris han d'experimentar i interactuar amb el lloc web.

Escollir els vostres recursos

En aquest punt, és bo per començar a armar el contingut que apareixerà finalment a la vostra pàgina web.

Text

No obstant això hauríeu de tenir els paràgrafs i títols abans. Tingueu això molt a prop.

Color del tema

Per triar un color, aneu al selector de color i trobeu un color que us agradi. En fer clic a un color, apareixerà un codi de sis caràcters estranys com #660066. Això es diu un codi hex(adecimal), i representa el vostre color. Copieu el codi en un lloc segur per ara.

Imatges

Per triar una imatge, anar a Google Images i buscar alguna adequada.

  1. Quan trobeu la imatge que desitjeu, feu clic a la imatge.
  2. Premeu el botó Veure imatge.
  3. A la següent pàgina, feu clic amb el botó dret del ratolí en la imatge (Ctrl + clic en Mac), seleccioneu Guardar imatge com... i trieu un lloc segur per guardar la imatge. Com a alternativa, copieu l'adreça Web de la imatge des de la barra d'adreces del vostre navegador per usar-la més tard.

Nota: La majoria de les imatges a la web, incloent a Google Images, tenen drets d'autor. Per reduir la probabilitat de que violeu els drets d'autor, podeu utilitzar el filtre de llicència de Google. Només 1) feu clic a Eines de recerca, a continuació, a 2) Drets d'ús:

Tipus de lletra

Per triar un tipus de lletra:

  1. Anar a Google Fonts i examinar la llista fins que trobeu una que us agradi. També podeu utilitzar els controls de la dreta per filtrar encara més els resultats.
  2. Feu clic al icona "plus" (Afegir a) al costat del tipus de lletra que vulgueu.
  3. Feu clic al botó "*, Familia Seleccionada" en el panell a la part inferior de la pàgina ("*" depèn del nombre de fonts que hagiu seleccionat)
  4. En el quadre emergent, es pot veure i copiar les línies de codi que Google us dóna en el vostre editor de text per a guardar per més endavant.

 

Document Tags and Contributors

 Contributors to this page: Legioinvicta
 Last updated by: Legioinvicta,