Imagina o pensa en aquell client que t'arriba i t'encarrega el disseny d'una web. Pot ser que tu hagis de dissenyar-li el theme que utilitzarà, i que serà la primera impressió que deixarà als milers o milions de persones que el visitaran. Com els ho presentaries? Li faries captures a una web on treballessis el disseny i els ho ensenyaries? No seria millor fer servir un mock up de web?
espera, no sabies que també hi havia mock up de web? Doncs aleshores aquest tema t'interessa. I molt. Perquè pots donar una millor presència a la teva presentació i fer que el client se'n vagi molt més content després de veure imatges on sembla que la web ja està operativa. I la veritat és que no et costarà tant fer-ho.
Què és un mock up de web
Abans de res, deixa'ns explicar-te una mica el que seria un mock up de web. Com saps, un mockup és en realitat una representació normalment «a imatge real» que mostra com quedaria el resultat final de la teva feina.
En el cas d'una web, seria una imatge del resultat daquesta pàgina web.
Aquest tipus de collage es fan servir per donar més realisme a la feina, ja que moltes vegades, quan el presenta, pot quedar buit o no representar al cent per cent allò que has fet. A més, el client té una manera més visual de fer-se'n una idea.
I diràs, i per què no mostrar-li la web on has treballat? Podria fer-se, però no com una presentació del treball sinó que hauries de deixar que fos el client el que navegués per la web perquè la conegués a fons i, moltes vegades, aquests no tenen temps per fer-ho, de manera que no t'assegures que ho ha vist tot.
En canvi, amb un mockup de web sí que ho aconseguiries perquè destacaries en aquestes imatges tot el que vols veure.
Com es fan
Ara bé, com es fan aquests mock ups de web? Hi ha algun programa per crear-los? Són collage que es treuen d'Internet?
en realitat hi ha diverses eines gratis que et poden donar un cop de mà a crear aquests, i que et poden donar opcions, no només amb els exemples que et posarem una mica més endavant.
Amb això podries fins i tot crear-ne una col·lecció per a aquest client, posant el disseny en diferents seqüències que facin que aquest vegi molt millor el resultat final.
Aquestes eines són:
lluentosa
Aquesta eina és en línia i és gratuïta. Amb ella pots crear mock up de web perquè té molts esquemes i una API amb què podràs fer la feina en qüestió de minuts.
De fet, és una de les més utilitzades i que et dóna moltes opcions.
Cacoo
En aquest cas hem d'advertir-te que, si bé ens centrarem en la part gratuïta, L'eina també és de pagament i això vol dir que estarà més limitada en allò que pots fer.
Per fer-te una idea, només podràs exportar a PNG (de manera que no és tan personalitzable si el vols utilitzar amb altres clients).
El millor és que si treballes amb un equip podríeu treballar junts alhora (és a dir, en temps real).
Wirify
Wirify és una de les eines que pot convertir una web en un filferro i, amb això, treballar amb el client ensenyant-li la web al seu gust. Però és clar, aquí faltaria escollir una foto d'un ordinador, tauleta o mòbil per muntar el resultat d'aquest programa.
Com hauràs intuït, totes les eines et donen una imatge del disseny de la web, però faltaria muntar-la realment a una imatge real. Per això, has d'accedir a fotos on es mostrin ordinadors, mòbils, tauletes per tal d'inserir el teu disseny per sobre i aconseguir una foto que una ambdues (i que quedi bé).
Per fer això pots valdre't de mockups ja fets o crear-los tu amb programa d'edició d'imatges.
Mock up de web que podeu descarregar
Si no vols agobiar-te massa per presentar la feina, aquí te'n deixem alguns exemples de mock up de web que pots descarregar i utilitzar. Estalviaràs temps.
Mock up de web realista
Comencem per una escena que qualsevol podria tenir. Es tracta d'un escriptori ia sobre una pantalla d'ordinador (teclat i ratolí a sota). De fons una llibreria amb llibres. Aquesta llibreria, però, està en blanc i negre, igual que els elements decoratius de l'escriptori (més llibres i un llum) i la paret, que és en to gris.
Per què? Perquè la mirada se centri a la pàgina que mostra el monitor. En el teu cas podria ser la home de la pàgina, o parts representatives que vulguis mostrar al client.
el descàrregues aquí.
Mockup de web senzill
Una representació més senzilla, on amb un fons en gris (encara que es pot personalitzar) no mostra una pantalla on haurem inserit la pàgina web.
Destaca que, si et fixes a la pantalla, té una part més clara i una altra més fosca, perquè simula que la llum hi incideix.
Aquesta pot ser interessant per a parts on vulguis que el client s'hi fixi exclusivament.
el descàrregues aquí.
Samsung Galaxy S5 Mockup
Aquest en concret és un mockup del Samsung Galaxy S5, però a tu et pot venir perfecte per mostrar-li, en una mateixa imatge, tres parts del disseny web que has realitzat perquè el client apreciï com es veuria aquest en un mòbil.
Tingues en compte que ara Google potencia més els negocis que usen una web responsive, és a dir, que es vegi bé ja sigui que es faci servir un ordinador, una tauleta o un mòbil. Per això, no n'hi ha prou que a l'ordinador es vegi bé, t'has de cerciorar a totes les altres plataformes.
El pots descarregar aquí.
Mockup per a tablet i mòbil
En aquest cas no podràs ensenyar al 100% la web en una tauleta, però sí al mòbil. I és que si vols mostrar el teu disseny en aquests dos dispositius també ho pots fer, perquè el client es faci una idea de com quedarà.
Això sí, tingues en compte que a la tauleta es mostrarà en format horitzontal mentre que el mòbil la tindrà vertical. És una manera de veure el canvi del teu disseny per adaptar-se als dos aparells.
ho tens aquí.
Tens alguns exemples de mock up de web? Pots compartir-los als comentaris.