Si voleu dissenyar i crear pàgines web, aquest procés serà molt més senzill si teniu previst. En la fase de planificació, el dissenyador i el client poden treballar junts per trobar un format i un disseny que s’adapti a les seves necessitats. El procés de planificació afecta l'estil o l'estil del lloc, es pot dir que aquest és l'aspecte més important en el disseny de llocs web, sobretot si és per a fins comercials.
Pas
Part 1 de 4: Creació de l'estructura bàsica
Pas 1. Determineu la funció del lloc web
Si esteu creant un lloc personal, probablement ja sabreu la resposta. Tot i això, si esteu creant un lloc per a una altra organització, empresa o persona, heu d’esbrinar què volen i la funcionalitat del lloc. Tot el que especifiqueu aquí entrarà en vigor quan finalitzi la pàgina web.
- El lloc web requereix un aparador? S'han de fer comentaris dels usuaris? L'usuari haurà de crear un compte més tard? L’article del lloc web està orientat? O orientat a la imatge? Totes aquestes i altres preguntes us ajudaran a dissenyar i dissenyar el lloc.
- Aquest procés de planificació es pot convertir en un dibuix, sobretot si és per a una gran empresa i hi ha molta gent que participa en la creació d’aquest projecte.
Pas 2. Creeu un diagrama del mapa del lloc (mapa del lloc)
Un diagrama de mapa del lloc és similar a un diagrama de flux, que mostra com es mouen els usuaris d’una pàgina a la següent. No necessiteu una pàgina web en aquesta etapa, només un flux general de conceptes. Podeu utilitzar un programa d’ordinador per crear diagrames o esbossar el vostre en paper. Utilitzeu aquest diagrama per demostrar els conceptes d’ordenació jeràrquica i connectivitat de pàgines web.
Pas 3. Proveu el mètode de redacció de targetes
Un mètode popular de desenvolupament web en grup és utilitzar diverses cartes per conèixer les expectatives de tothom. Agafeu diverses targetes de notes i escriviu el contingut bàsic d’una pàgina web en cadascuna de manera individual. Organitzeu aquestes cartes junt amb el vostre equip per trobar el millor concepte. Aquest mètode és adequat per utilitzar-lo quan col·laboreu amb altres persones en la creació de pàgines web.
Pas 4. Utilitzeu paper i un tauler d’anuncis o una pissarra
Aquest és un mètode de planificació original amb un pressupost reduït; podeu suprimir o canviar ràpidament el contingut i canviar el flux. Dibuixeu el vostre disseny web en paper i, a continuació, connecteu-los amb fils o dibuixeu línies al tauler. Aquest mètode és molt adequat per utilitzar-lo en sessions de pluja d’idees.
Pas 5. Creeu un inventari de contingut
De fet, acostuma a ser més adequat per utilitzar-lo en el redisseny de webs que en els nous dissenys web. Inseriu cada contingut o pàgina web acabada en un full de càlcul. Anoteu el propòsit de cada contingut o pàgina mitjançant aquesta llista per determinar què heu de suprimir i què heu de conservar. Podeu simplificar l'estructura del web i simplificar el procés de redisseny posteriorment.
Part 2 de 4: Creació d'un esquema HTML bàsic
Pas 1. Creeu un wireframe per establir la jerarquia de la pàgina web
La plantilla HTML bàsica és el pla del lloc que construireu, utilitzant només les etiquetes més bàsiques i el contingut de mostra (blocs / plantilles). Aquest marc respon a la pregunta "Què és visible al web i on?" El format i l'estil no són necessaris en la creació d'aquest esquema.
- Podeu veure l'estructura i el diagrama de flux del contingut amb un esquema bàsic abans de triar una configuració d'estil.
- Les plantilles HTML bàsiques no són estàtiques, com ara PDF o imatges, podeu fer lliscar ràpidament el contingut de la mostra per crear noves estructures.
- El marc base és interactiu, cosa que beneficia tant els desenvolupadors web com els clients. Atès que aquest marc bàsic està escrit amb un codi HTML senzill, podeu navegar-hi i saber com funciona el canvi de pàgina web. Això no es pot fer amb PDF.
Pas 2. Proveu el mètode Gray Box
Bloqueja o ressalta el contingut de la teva pàgina web a Gray Box, el contingut més important es troba a la part superior. Ordeneu el contingut en una columna. Per exemple, si la pàgina és "Sobre l'empresa", a la part superior hi ha informació detallada sobre l'empresa, seguida d'una llista de personal, informació de contacte, etc.
Això no inclou capçaleres i peus de pàgina. Gray Box és una representació visual del contingut que apareixerà al web
Pas 3. Proveu un programa bàsic de creació de contorns
Hi ha diversos programes que podeu utilitzar en el procés de creació d’un framework web bàsic. La quantitat de codi de programació web (idioma) que heu de dominar és diferent per a cada programa. Alguns dels programes força populars són:
- Pattern Lab. Aquest lloc està dedicat al "disseny atòmic", cada contingut es considera una "molècula" que compon una pàgina web més gran.
- Gràfics de salt. Aquesta pàgina web proporciona serveis d’enquadrament i planificació basats en la web. Aquests llocs són de pagament i requereixen una subscripció, però podeu crear frameworks web ràpidament sense haver de dominar molts codis de programació web.
- Wirefy. Wirefy és un altre lloc que ofereix "disseny atòmic". Els desenvolupadors web poden obtenir l'eina de forma gratuïta.
Pas 4. Utilitzeu el marcatge HTML simple
Una bona plantilla bàsica es convertirà fàcilment al lloc original. No us penseu massa en l’estil web durant el procés de creació d’aquesta plantilla. Utilitzeu el marcador que es pugui entendre i canviar fàcilment.
Un marc bàsic senzill és molt millor. El propòsit de crear un marcatge és construir una estructura. L'aspecte visual es pot ajustar més endavant amb CSS i etiquetatge avançat
Pas 5. Creeu un esquema bàsic per a cada pàgina web
És possible que tingueu la temptació d’equiparar totes les pàgines web amb un esquema bàsic. De fet, això només farà que el vostre lloc sigui avorrit i senzill. Creeu un esquema diferent per a cada pàgina, entendreu que cada pàgina necessita el seu propi disseny.
Part 3 de 4: Creació de contingut
Pas 1. Prepareu el contingut abans de crear una pàgina web
Trobareu molt més fàcil previsualitzar la vostra visualització web si ja teniu contingut real en lloc d’utilitzar mostres o espais reservats. No cal que tingueu massa contingut, però la vostra maqueta quedarà molt millor si feu servir una còpia de la imatge original.
No cal que tingueu tot el material de l'article, però almenys hauria de tenir un títol real
Pas 2. Recordeu que el contingut fantàstic no és només text
Internet és molt més complex que una simple pàgina web de text. Necessiteu una varietat de contingut diferent per crear un lloc web fantàstic per atreure i convidar visitants. Per exemple:
- Imatge.
- Veu.
- Vídeos.
- Transmissió web o corrent web (Twitter)
- Integració de Facebook
- RSS
- Feed web
Pas 3. Demaneu ajuda a un fotògraf professional
Si voleu incloure fotos al vostre lloc, la primera impressió que obtindreu del vostre lloc web serà molt millor si s’omple de fotografia professional. Una bona foto val més de vint fotos de baixa qualitat.
Busqueu un nou graduat en art de la fotografia com una solució més barata que un fotògraf professional que ha estat al negoci des de fa molt de temps
Pas 4. Escriure articles de qualitat
El contingut escrit de la pàgina web determinarà la quantitat de trànsit web. Tot i que no us haureu de preocupar massa per la creació de contingut en aquest procés de disseny, no us fa mal començar a pensar-hi, ja que també necessitareu contingut de manera regular un cop el vostre lloc estigui en funcionament.
A més del contingut de l’article, hi ha material escrit que també heu de tenir en el procés de compilació d’una pàgina web. Per exemple, informació de contacte, nom de l'empresa o qualsevol altra cosa que s'utilitzarà diverses vegades al lloc
Part 4 de 4: convertir els conceptes en llocs web
Pas 1. Disposar els elements bàsics
Aquesta disposició d’elements s’aplica a totes les pàgines del vostre lloc, com ara capçaleres, notes a peu de pàgina i menús de navegació. Configureu-lo amb un estil molt senzill perquè pugueu comprovar l'aspecte de totes les pàgines. Això és especialment útil a mesura que avança cap al procés de disseny web.
No us preocupeu massa pels detalls, proveu de previsualitzar (previsualitzar) l’aspecte de la capçalera
Pas 2. Creeu un disseny senzill
Comenceu desplaçant la posició del rellotge des de la columna del contorn base a la ubicació real de la pàgina. Per exemple, és possible que vulgueu moure el menú de navegació d'exemple a l'esquerra de la pàgina i la llista de titulars a la dreta.
Seguiu experimentant amb dissenys web de diverses pàgines abans de passar al següent pas. Permet que altres persones hi facin una ullada per veure si el disseny que creeu se sent viu
Pas 3. Creeu una maqueta
Utilitzeu un programa com Photoshop per crear maquetes o mostres de pàgines del vostre lloc web. Utilitzeu el disseny que heu compilat com a guia. Podeu fer maquetes més ràpides i obtenir els resultats que desitgeu amb un programa de processament d’imatges. Els resultats d’aquestes imatges es poden utilitzar posteriorment com a referència en el procés d’escriptura de codi de programació web.
Poseu el contingut real a la maqueta perquè quedi bé
Pas 4. Substituïu el concepte de mostra pel contingut original
Afegiu contingut i elements a les pàgines web. Per ara, no us torneu a configurar l'estil web, apileu-ho tot a la ubicació correcta. Això us ajudarà a revisar els canvis d’estil web que feu més endavant.
Pas 5. Creeu una guia d'estil web
És molt important mantenir una barreja d'estils, especialment per a llocs grans. Si el lloc està pensat per a fins comercials i ja té la seva pròpia marca o estil, s'hauria d'integrar al disseny del lloc. Coses que cal tenir en compte a l’hora de crear una guia d’estil de pàgina web:
- Navegació
- Nota de capçalera
- Paràgraf
- Caràcter itàlic
- Personatge audaç
- Enllaços (actius, inactius, passen el cursor per sobre)
- Ús de la imatge
- Icona
- Pom
- llista
Pas 6. Apliqueu l'estil web
Un cop trobeu l'estil i el disseny adequats, implementeu-lo. CSS és una de les maneres més senzilles d'implementar estils a una pàgina web o a tot el lloc. Consulteu les instruccions següents per entendre millor els detalls sobre l’ús de CSS.
