Wireframes en disseny web: ha de dissenyar des de zero

Avui Comencem amb l’assessorament bàsic. Un dels que has llegit en els blocs ja dotzenes de vegades.

Però, sincerament, és un dels millors que podem donar-te si estàs dedicat a disseny web o app, o estàs pensant en dissenyar el teu propi lloc web.

Allà va: en iniciar el projecte de disseny, si us plau Planifiqui. No torni boig. És important seguir una sèrie de pautes.

Això sembla la cosa més lògica del món, quan arriba el moment de començar amb l’enfocament de disseny, ja no és tan lògic.

Hi ha molta gent que comença a crear un lloc web o aplicació des de zero sense de fet invertir temps en estructurar-lo bé.

I quines són les conseqüències d’això? Muuchas.

Per exemple, poseu-vos en posició. Esteu treballant en el lloc web d’un client i sí, en una reunió, esteu més o menys dient-los com l’esteu aixecant per tenir una idea.

Però no l’ensenyeu exactament com l’esteu estructurant, com organitzareu els elements de cada pàgina, etc. El que pot succeir és que quan li Mostra el resultat, el llançarà a vostè sobre el terra. Pot ser que no estigui a prop del que estava buscant, i tot el temps que has gastat fent la web al final no farà cap bé.

Un altre possible escenari és que, si no inverteixes el temps necessari per planificar l’estructura del web o de l’app, podem acabar tenint problemes d’ usabilitat.

És a dir, l’usuari final no té una bona experiència amb la web o l’aplicació, i en conseqüència hi ha menys visites, menys vendes, subscripcions, etc.

Per tant, és imperatiu que s’aturi al principi i passar temps en aquestes coses. T’estalviarà molt de temps i diners.

I la millor cosa que pot fer és crear wireframes. Aquesta és la solució ideal per saber com planificar el disseny del vostre lloc web o aplicació i fer que tot el procés de treball sigui més fàcil i més suau.

T’ho expliquem tot. Comencem. 🙂

Què és un filferro

Comencem amb els fonaments: Què és un filferro en disseny web o app.

En poques paraules: el seu nou millor amic i aliat.

Ens vam explicar a nosaltres mateixos.

Un filferro no és més que un esbós que representa visualment l’ estructura de les pàgines en un lloc web o aplicació.

Si anem a més detalls, el wireframe en el disseny té les següents característiques:

• Defineix el contingut i la posició dels diferents blocs de la web.
  
• Com més simple, millor. Només necessita contenir l’esquema bàsic del que vol que l’estructura sembli.
  
• No utilitzeu tipus de lletra, colors, logotips, etc.
  
• No és el treball final, vostè no ha de fer-ho muuuuy en detall. És un gran avanç del projecte. En base a això, el client li donarà la seva opinió i realitzarà les correccions necessàries. És per això que és important que no treballi massa dur,els elements de disseny com el color no entren en joc aquí. Només l’organització de la pàgina.

Elements de wireframes

Ja l’hem avançat: no incloguis mil coses en wireframes.

Han de ser senzills (però eficaços). I per ser així, suggerim que inclogui això:

• Blocs de contingut: col·loqueu el text de la pàgina en el seu marc de filferro. No importa si encara no saps exactament el que vas a posar. És per donar-li una idea de la disposició visual.
  
• Blocs d’imatges o altres continguts multimèdia: és a dir, on es localitzaran els logotips, vídeos, imatges, banners, etc.
  
• Formularis de contacte: si es tracta de la pàgina de contacte, els serveis, la casa o una pàgina de compressió, us recomanem que afegiu un formulari per posar-vos en contacte amb vosaltres. És per això que és important incloure’l en el wireframe per tenir una idea d’on serà.
  
• Elements de navegació: són els elements que et porten a altres pàgines. Per exemple, els botons de crida a l’acció, coneguts com Call to Action o CTA en anglès. A part d’aquests, menús, icones de xarxes socials, banners, etc. també són elements de navegació. Per tant, molts elements a tenir en compte i que ha de tenir el seu lloc en el seu filferro.

I ja que sabem que amb exemples la vida és més fàcil (i més en el món del disseny;)) et deixem un model de filferro. En aquest cas, és un exemple d’una pàgina de producte decomerçelectrònic. Així que vostè pot tenir una idea de com podríem localitzar tots aquests elements que hem discutit.

Raons per fer wireframes

Bé, ara vostè té una millor idea del que és un wireframe en el disseny web i app,i vostè ha vist un exemple visual de la mateixa.

Però potser encara no estàs del tot convençut si val la pena passar el temps o no.

Per tant, si encara tens dubtes, anem a treure’ls. Planificar el disseny amb un wireframe són només avantatges:

• És ràpid i barat. Són esbossos esquemàtics, de manera que es poden fer en poc temps. I si vostè ha de fer correccions, no prendrà per sempre tampoc. Seria molt pitjor haver de canviar la web en si una vegada dissenyat, no et sembla? 😉
  
• Serveixen per detectar i corregir els problemes per endavant. És molt útil per fer Wireframing (sí, els anglesos fins i tot han inventat un verb per a això) per anticipar-nos a possibles problemes en la usabilitat del lloc. No saps quant de temps pots estalviar-te descobrint aquests petits problemes en el temps.
  
• Estalviï temps en dissenyar. Una cosa molt important. Tindràs l’esquema ja fet i no estarà sol al cap. La seva productivitat millorarà molt.
  
• Com ja hem avançat, crear wireframes permet al client veure l’estructura de la web abans que es construirà i així donar feedback sobre el que pensa. A més, també fan que se senti part del procés de creació de la web. Quelcom intangible, però això Afegeix punts per a tu com a professional.

Vostè sap: incloure wireframes en el seu projecte

Esperem que us hàgim convençut i incloem el Wireframing en el vostre proper projecte de disseny web o app.

I ja saps, si vols delegar aquest procés a tercers, no dubtis a posar-te en contacte amb nosaltres per dur a terme el disseny web del teu negoci en línia.

Envia’ns un missatge, volem saber de tu!