Com dissenyar un lloc web (amb imatges)

Taula de continguts:

Com dissenyar un lloc web (amb imatges)
Com dissenyar un lloc web (amb imatges)

Vídeo: Com dissenyar un lloc web (amb imatges)

Vídeo: Com dissenyar un lloc web (amb imatges)
Vídeo: One Piece Pirate Warriors | COMO CONECTAR el MANDO en PC 2024, Maig
Anonim

Aquest wikiHow us ensenya a dissenyar un lloc web que sembli professional i que tingui un bon rendiment. Tot i que la major part del disseny del vostre lloc web depèn en última instància de vosaltres, hi ha algunes coses importants que cal fer i evitar al crear un lloc web.

Passos

Part 1 de 2: Com dissenyar el vostre lloc web

Dissenyeu un lloc web Pas 1
Dissenyeu un lloc web Pas 1

Pas 1. Determineu si voleu utilitzar un creador de llocs web

Els llocs web creats des de zero requereixen una comprensió bastant detallada de la codificació HTML, però podeu crear fàcilment un lloc web mitjançant un servei d’allotjament gratuït com Weebly, Wix, WordPress o Google Sites. Els creadors de llocs web solen ser molt més fàcils d’utilitzar per als dissenyadors per primera vegada que HTML.

  • Si decidiu codificar el vostre propi lloc web, haureu d'aprendre tant la codificació HTML com la CSS.
  • Si invertir temps i energia per crear el vostre lloc web no us sembla atractiu, també podeu contractar un dissenyador de llocs web per crear-lo. Els dissenyadors independents poden costar entre 30 dòlars per hora i molt més de 100 dòlars per hora.
Dissenyeu un lloc web Pas 2
Dissenyeu un lloc web Pas 2

Pas 2. Traceu el vostre lloc

Abans d’obrir un creador de llocs web, heu de saber aproximadament quantes pàgines voleu que tingui el vostre lloc web, quin ha de ser el contingut de cadascuna d’aquestes pàgines i el disseny general de pàgines importants, com ara la pàgina d’inici i la secció “Quant a”. pàgina.

Les pàgines del vostre lloc web poden ser més fàcils de visualitzar si dibuixeu imatges aproximades de cadascuna d'elles en lloc de determinar només quin contingut hauria d'aparèixer

Dissenyeu un lloc web Pas 3
Dissenyeu un lloc web Pas 3

Pas 3. Utilitzeu un disseny intuïtiu

Tot i que hi ha alguna cosa a dir sobre idees noves, el disseny bàsic del vostre lloc web hauria de seguir pautes establertes, com ara les següents:

  • Les opcions de navegació (per exemple, les pestanyes de diferents pàgines) haurien d’anar a la part superior de la pàgina.
  • Si utilitzeu una icona de menú (☰), hauria de ser a l'extrem superior esquerre de la pàgina.
  • Si utilitzeu una barra de cerca, hauria de ser a prop de la part superior dreta de la pàgina.
  • Els enllaços útils (per exemple, els enllaços a la pàgina "Quant a" o a la pàgina "Contacteu-nos") haurien d'anar a la part inferior de cada pàgina.
Dissenyeu un lloc web Pas 4
Dissenyeu un lloc web Pas 4

Pas 4. Sigues coherent

Sigui quina sigui la font de text, la paleta de colors, el tema de la imatge i les opcions de disseny que trieu, assegureu-vos que utilitzeu la mateixa decisió a tot el lloc web. Pot ser increïble veure un tipus de lletra o un esquema de colors utilitzat a la pàgina "Quant a" quan es feia servir una altra completament diferent per a la pàgina inicial.

  • Per exemple, si utilitzeu exclusivament colors de tons freds per a la pàgina inicial del lloc, no implementeu colors vius i forts a la pàgina següent.
  • Tingueu en compte que l’ús de colors forts o xocants, especialment quan es mostren de manera dinàmica (per exemple, en moviment), pot provocar epilèpsia en un nombre reduït d’usuaris web. Si decidiu utilitzar aquests colors al vostre lloc, assegureu-vos d'afegir un advertiment d'epilèpsia abans de qualsevol pàgina rellevant.
Dissenyeu un lloc web Pas 5
Dissenyeu un lloc web Pas 5

Pas 5. Afegiu opcions de navegació

Si col·loqueu enllaços directes a pàgines importants del vostre lloc web a la part superior de la pàgina inicial, podreu dirigir els visitants per primera vegada al contingut que importa. La majoria de creadors de llocs afegeixen aquests enllaços de manera predeterminada.

És important assegurar-vos que totes les pàgines del vostre lloc web siguin accessibles fent clic a través de les opcions del lloc web en lloc d’accedir-hi només a través de l’adreça de la pàgina

Dissenyeu un lloc web Pas 6
Dissenyeu un lloc web Pas 6

Pas 6. Utilitzeu colors que es complementin

Com qualsevol altre tipus de disseny, el disseny de llocs web es basa en combinacions de colors visualment agradables; per això, és crucial escollir colors temàtics que es combinin.

El negre, el blanc i el gris són una bona combinació si no sabeu per on començar

Dissenyeu un lloc web Pas 7
Dissenyeu un lloc web Pas 7

Pas 7. Penseu a utilitzar un disseny minimalista

El minimalisme fomenta colors de tons freds, gràfics senzills, pàgines de text en blanc i negre i el menor adorn possible. Com que el minimalisme requereix poc elements elegants, és una manera fàcil de fer que el vostre lloc web sembli professional i atractiu sense necessitat de molta feina.

  • Molts creadors de llocs web tindran un tema "minimalista" que podeu seleccionar en configurar el lloc web.
  • Una alternativa al minimalisme és el "brutalisme", que utilitza línies més dures, colors brillants, text en negreta i imatges mínimes. El brutalisme té menys seguidors que el minimalisme, però, segons el contingut del vostre lloc web, pot adaptar-se millor a les vostres necessitats de disseny.
Dissenyeu un lloc web Pas 8
Dissenyeu un lloc web Pas 8

Pas 8. Fer decisions úniques

Les línies rectes i els elements web bloquejats a la xarxa són apostes segures, però prendre algunes decisions estilístiques úniques donarà personalitat al vostre lloc i us ajudarà a destacar.

  • No tingueu por de rebaixar les tendències col·locant elements del lloc web de forma asimètrica o utilitzant elements superposats per crear un aspecte en capes.
  • Tot i que les cantonades elegants i nítides i els elements quadrats (també coneguda com a presentació "basada en cartes") són menys favorables que els elements arrodonits i suaus.

Part 2 de 2: Com maximitzar el rendiment del lloc web

Dissenyeu un lloc web Pas 9
Dissenyeu un lloc web Pas 9

Pas 1. Aprofiteu les opcions d'optimització per a mòbils

Els navegadors mòbils representen més trànsit web que els navegadors d’escriptori, la qual cosa significa que l’atenció que presteu a la versió mòbil del vostre lloc web hauria d’igualar, com a mínim, el desenvolupament del lloc web per a ordinadors. La majoria dels serveis per a creadors de llocs web creen automàticament una versió per a mòbils del vostre lloc, però voldreu tenir present la informació següent per al vostre lloc per a mòbils:

  • Assegureu-vos que els botons (per exemple, els enllaços al lloc) siguin grans i fàcils de tocar.
  • Eviteu implementar funcions que no es poden visualitzar al mòbil (per exemple, Flash, Java, etc.).
  • Penseu en la possibilitat de fer una aplicació mòbil per al vostre lloc web.
Dissenyeu un lloc web Pas 10
Dissenyeu un lloc web Pas 10

Pas 2. Eviteu utilitzar massa fotos per pàgina

Tant els navegadors d’escriptori com els mòbils poden tenir dificultats per carregar les pàgines que mostren un gran nombre de fotos o vídeos. Tot i que les imatges són importants en el disseny de pàgines web, fer servir més d’unes poques per pàgina pot provocar temps de càrrega innecessàriament llargs, cosa que impedirà que la gent visiti les pàgines en qüestió.

En termes generals, voleu que les pàgines del vostre lloc web es carreguin en menys de quatre segons

Dissenyar un lloc web Pas 11
Dissenyar un lloc web Pas 11

Pas 3. Afegiu una pàgina "Contacte"

Notareu que pràcticament tots els llocs web establerts tenen una pàgina "Contacteu amb nosaltres" que conté informació de contacte (per exemple, un número de telèfon i una adreça de correu electrònic); alguns llocs tenen fins i tot un formulari de preguntes integrat en aquesta pàgina. Si afegiu una pàgina "Contacte", els espectadors de llocs web podreu obtenir una línia de comunicació directa amb vosaltres i afegir així una solució a les frustracions potencials.

Dissenyeu un lloc web Pas 12
Dissenyeu un lloc web Pas 12

Pas 4. Creeu una pàgina 404 personalitzada

Quan algú visita una pàgina específica del vostre lloc web que no s'ha configurat o no existeix, es mostrarà una pàgina web "Error 404". La majoria de navegadors tenen una pàgina 404 predeterminada, però és possible que pugueu personalitzar la vostra des de la configuració del creador del lloc web; en aquest cas, assegureu-vos que incloeu els detalls següents:

  • Un missatge d'error alegre (per exemple, "Enhorabona, heu trobat la nostra pàgina d'error!")
  • Un enllaç a la pàgina principal del lloc
  • Una llista d’enllaços que es visualitzen habitualment
  • Una imatge o un logotip per al vostre lloc web
Dissenyar un lloc web Pas 13
Dissenyar un lloc web Pas 13

Pas 5. Utilitzeu una barra de cerca si és possible

Si el vostre mètode de creació de llocs web permet afegir una barra de cerca al vostre lloc web, us recomanem que ho feu. Això garantirà que els usuaris puguin navegar ràpidament a una pàgina o element específic sense haver de fer clic a les opcions de navegació.

Les barres de cerca també són útils quan el vostre públic vol cercar un terme general sense fer servir proves i errors

Dissenyar un lloc web Pas 14
Dissenyar un lloc web Pas 14

Pas 6. Invertiu la major quantitat de temps a la vostra pàgina d'inici

Quan algú arriba a la pàgina d'inici del vostre lloc web, hauria de conèixer immediatament el tema del vostre lloc web; a més, tots els elements de la pàgina inicial s'han de carregar ràpidament, incloses les opcions de navegació i les imatges. La vostra pàgina d'inici hauria de tenir els aspectes següents:

  • Una crida a l'acció (per exemple, un botó per fer clic o un formulari per emplenar)
  • Una barra d'eines de navegació o un menú
  • Un gràfic atractiu (per exemple, una foto sòlida, un vídeo o un petit grup de fotos amb text que l'acompanya)
  • Paraules clau relacionades amb el servei, el tema o l'enfocament del vostre lloc web
Dissenyar un lloc web Pas 15
Dissenyar un lloc web Pas 15

Pas 7. Proveu el vostre lloc web en diversos navegadors de diverses plataformes

Això és increïblement important, ja que diferents navegadors poden tractar aspectes del vostre lloc web de manera diferent. Abans de començar a promocionar el vostre lloc web, proveu de visitar-lo i utilitzar-lo als navegadors següents de les plataformes Windows, Mac, iPhone i Android:

  • Google Chrome
  • Firefox
  • Safari (només per a iPhone i Mac)
  • Microsoft Edge i Internet Explorer (només Windows)
  • El navegador integrat en diversos telèfons Android diferents (per exemple, Samsung Galaxy, Google Nexus, etc.)
Dissenyar un lloc web Pas 16
Dissenyar un lloc web Pas 16

Pas 8. Continueu actualitzant el lloc web a mesura que envelleixi

El disseny de tendències, enllaços, fotos, conceptes i paraules clau canvia a mesura que passa el temps, de manera que haureu de continuar fent canvis al vostre lloc web per estar al dia. Això requerirà que comproveu el rendiment del vostre lloc web junt amb altres llocs web similars almenys una vegada cada tres mesos (preferiblement més sovint).

Ajuda bàsica en HTML

Image
Image

Mostra una pàgina web amb HTML

Suporti wikiHow i desbloqueja totes les mostres.

Image
Image

Full de trucs HTML

Suporti wikiHow i desbloqueja totes les mostres.

Image
Image

Mostra una pàgina web senzilla

Suporti wikiHow i desbloqueja totes les mostres.

Consells

  • L’accessibilitat al lloc web és un altre aspecte important del desenvolupament del lloc web. Això inclou aspectes com a subtítols per a públics amb discapacitat auditiva, descripcions d'àudio per a visitants invidents i avisos de fotosensibilitat si el vostre lloc web utilitza efectes potencialment induïts per convulsions.
  • La majoria de creadors de llocs web tenen un conjunt de plantilles que podeu utilitzar per consolidar el disseny i el disseny del lloc abans d’afegir els elements preferits.

Advertiments

  • La majoria de creadors de llocs són gratuïts; no obstant això, si voleu utilitzar el vostre propi domini (per exemple, "www.elvostre nom.com" en lloc de "www.elvostre nom.wordpress.com"), haureu de pagar una quota mensual o anual.
  • Eviteu el plagi i observeu totes les lleis sobre drets d’autor: no afegiu imatges aleatòries del web, ni tan sols elements estructurals, sense permís.

Recomanat: