Aprèn a utilitzar Wireframes simples per començar els teus dissenys
Un marc wireframe és una senzilla guia visual per mostrar-vos com es veuria una pàgina web . Suggereix l' estructura d'una pàgina , sense utilitzar cap gràfic o text. Un lloc web de wireframe mostrarà tota l'estructura del lloc, incloent-hi les pàgines que enllacen a on.
Els marcs web són una bona manera d'iniciar el vostre treball de disseny. I encara que és possible crear quadres complexos amb grans quantitats de detalls, la vostra planificació pot començar amb un tovalló i una ploma. La clau per fer bons fils wireframes és deixar de banda tots els elements visuals. Utilitzeu quadres i línies per representar imatges i text.
Coses que s'han d'incloure en un filferro de pàgina web:
- caixes per a elements gràfics primaris
- Col·locació de titulars i subdirectors
- una senzilla estructura de disseny
- crides a l'acció
- blocs de text
Com crear una estructura web simple de Wireframe
Creeu un filferro de pàgina web amb qualsevol paperera que tingui a mà. Heus aquí com ho faig:
- Dibuixa un rectangle gran: això pot representar la pàgina sencera o només la part visible. En general, comencem amb la part visible i, a continuació, l'expandeixo per incloure elements que estaran per sota del plec.
- Esbós del disseny - és 2 columnes, 3 columnes?
- Afegiu una caixa per a un gràfic de capçalera: dibuixa sobre les columnes si vols que sigui un capçal únic per sobre de les columnes o simplement afegiu-lo on vulgueu.
- Escriviu "Capçalera" on voleu que el vostre títol H1 sigui.
- Escriviu "Sub-Head" on vulgueu que h2 i titulars més baixos. Ajuda si els fa proporcionals: h2 menor que h1, h3 menor que h2, etc.
- Afegiu-hi caixes per a altres imatges
- Afegeix a la navegació. Si estàs planejant pestanyes, només dibuixa quadres i escriu "navegació" a la part superior. O poseu llistes amb vinyetes a les columnes on vulgueu la navegació. No escriguis el contingut. Simplement escriu "navegació" o utilitzeu una línia per representar text.
- Afegiu elements addicionals a la pàgina: identifiqueu-ne el text, però no utilitzeu el text del contingut real. Per exemple, si voleu un botó de crida a l'acció a la part inferior dreta, col·loqueu una casella i etiquete-la com a "crida a l'acció". No escriviu "Compreu ara". en aquesta caixa.
Una vegada que hàgiu escrit el vostre wireframe senzill i no us porti més de 15 minuts per dibuixar-ne un, mostreu-ho a una altra persona. Pregúntele si hi ha alguna cosa que falti i per a altres comentaris. Segons el que diuen, podeu escriure un altre marc wire o conservar el que teniu.
Per què els bastidors de paper són els millors per als primers esborranys
Tot i que és possible crear marcs amb programes com Visio, per a les sessions inicials de pluja d'idees, haureu d'adherir-se al paper. El paper no sembla tan permanent, i molta gent suposarà que ho feu junts en 5 minuts i així no dubteu a donar-vos un bon comentari. Però quan utilitzeu un programa per crear marcs de luxe amb quadrats i colors perfectes, corre el risc de quedar atrapats en el propi programa i passar hores perfeccionant alguna cosa que mai no es farà en directe.
Els filferros de paper són fàcils de fer. I si no t'agrada, només fas el paper, tregui-lo en el reciclatge i agafeu un full nou.