A Estudi Melic tenim més de 25 anys d’experiència en disseny gràfic i, tot i que en principi estàvem especialitzats en catàlegs, revistes i fullets, ara, amb el pas dels anys, curiosament en el que més treballem és en webs i logotips. Si de la versió impressa tradicional ara en diríem comunicació gràfica off-line, la versió web d’aquesta comunicació gràfica és l’on-line. En definitiva en els dos casos és comunicació gràfica i el principal és saber comunicar allò que volem als nostres clients potencials. Per això el més important és el disseny. Podríem dir que l’únic que varia és el suport, on-line o off-line, però en realitat hi han més factors a tenir en compte.

El principal és l’usabilitat: dissenyar la interfície d’usuari o com l’usuari final d’aquella pàgina interactuarà amb els nostres continguts. Però des del disseny d’un web podem controlar-ne tot el procés:

• els elements funcionals (interfície d’usuari),
• les opcions estètiques (comunicació gràfica)
• i els factors tècnics (programació).

A Estudi Melic som dissenyadors, no som programadors*, però coneixem les limitacions i les possibilitats de creixement de cada llenguatge de programació, cosa que ens permet optimitzar cada projecte i trobar les solucions més adequades en cada cas. Coneixent el què i el com, sabem la manera d’externalitzar la programació més idònia depenent dels requeriments sol·licitats amb els pressupostos més ajustats en cada cas.

(*) Únicament treballem directament la programació en aquells casos en que es poden solucionar “només” amb HTML5, CSS3 i alguna llibreria jQuery. Indiqueu-nos els vostres requeriments a través del formulari de contacte i us assessorarem en allò que necessiteu.

Aquestes són les diferents fases dels projectes i la nostra metodologia de treball:

1.- Briefing

Tot comença coneixent, a través d’un briefing previ, les necessitats del client. Un briefing ben direccionat suposa el 90% de l'èxit del disseny realitzat. En aquest briefing sabrem coses tan bàsiques com si es vol una simple pàgina d’imatge, una de posicionament, un site complet amb continguts, una botiga, un show-room… Uns requeriments o altres ens portaran a encarar el projecte de maneres diferents. No és el mateix fer un web “senzill” amb una home ben vistosa, un parell de pàgines de contingut i una de contacte que no necessitarà pràcticament cap actualització en molt de temps, que una botiga on-line on es llisten i mostren fitxes de milers d’articles amb les corresponents fotos, característiques tècniques i un back-office que permeti una actualització contínua… No és el mateix pel que fa al disseny, però molt menys pel que fa a la programació necessària.

(Llegir més: Coneixeu la importància d’un bon briefing?)

2.- Disseny de l’estructura dels continguts

Coneixent la magnitud del projecte és el moment d’estructurar els diferents continguts de que disposem en diferents pàgines, tal i com ho faríem en un catàleg imprès. En aquest punt s’estructura l’arbre de continguts i es defineixen els passos necessaris per arribar a mostrar la informació que ens interessa. Per posar un parell d’exemples, si són poques pàgines serà un arbre bastant primari; si és un web tipus botiga i en diferents idiomes, la cosa es pot “complicar” bastant… ;-)
 

3.- Disseny gràfic del to de la comunicació i interfície d’usuari

Es comença dissenyant l’estructura de 2 o 3 pàgines tipus, que després s’anirà repetint amb diferents continguts, per fer veure al client com quedarà la imatge corporativa de la seva marca aplicada als continguts que disposa. Aquí ha de quedar reflectit el to general de la comunicació gràfica principal. També s’haurà de mostrar com es veuran els elements variables com poden ser sliders (imatges en moviment) o botons que canvien d’aparença en el moment de passar el ratolí per sobre (el dit en els dispositius mòbils); en definitiva: la interfície d’usuari.

4.- Programació

Depenent del tipus de projecte, en cada cas es treballa conjuntament amb el programador especialitzat per aquell tipus de feina:

• Si la feina es pot solucionar amb HTML5, CSS3 i alguna llibreria jQuery, ens encarreguem personalment nosaltres.
• La majoria de feines que hem realitzat fins ara però, era necessari introduir PHP i MySQL perquè requerien un backoffice estable i operatiu, per la qual cosa tenim un equip especialitzat en aquests entorns a uns preus més que competitius. PHP i MySQL tenen l’avantatge que podem enfocar des de projectes molt senzills fins a webs autènticament mastodòntics.
• A mig camí entre la primera opció i la segona, últimament i sempre que el projecte ho suporti, preferim utilitzar entorns CMS (Content Management System) tipus WordPress o Blogger perquè podem oferir solucions més ajustades.
• Finalment en algunes ocasions també hem treballat amb programadors especialitzats en eines d’eCommerce com Magento o Prestashop, amb els que cobrim pràcticament totes les requeriments que se’ns puguin plantejar.

(Per commemorar el 25è aniversari hem publicat una mini-guia de com es fa un web: Fent un web. Pas a pas)

5.- Responsive design

Tots els dissenys que preparem són perfectament visibles en els navegadors moderns. Però sempre que el projecte ens ho permet, preveiem la visualització del mateix contingut en dispositius mòbils (el que coneixem com responsive design o disseny adaptable) siguin smarts phones o tablets.

Cal tenir en compte que 2016 ha estat el punt d’inflexió en que, per primer cop, s’han servit més pàgines per dispositius mòbils que per dispositius desktop. Així que MOBILE FIRST com a norma general… ;-)

6.- Dominis i hostatjament

En l’inici del projecte, i en el cas que no es tingui domini propi, fem una recerca de disponibilitat de dominis i proposem la possibilitat de fer landing pages en diferents dominis. Coneixent els requeriments de programació, busquem l’hostatjament més adequat a cada necessitat.
 

NOTA: Si hi ha alguna “paraulota” o terme tècnic que no enteneu, no dubteu en preguntar-nos-la en el formulari de contacte.

A més a més dels serveis propis de l’estudi (disseny i comunicació gràfics), també donem assessorament, suport tècnic i oferim serveis de programació:

• des dels més bàsics com HTML5 i CSS3 combinat amb l’ús de llibreries jQuery (JavaScript),
• la potència del PHP associada amb les bases de dades de MySQL,
• i també sota entorns CMS com WordPress o Blogger, així com eines d’eCommerce com Magento o Prestashop.

Tal i com llistem a l’apartat serveis oferim i realitzem:

• webs corporatius
• newsletters
• e-mailings
• banners
• registre de dominis
• hostatjament web
• posicionament SEO

Segons un estudi* dels webs de les 500 millors empreses es van arribar a aquestes conclusions:

• Amplada: El promig d'amplada dels “nous” webs és de 877 px. Nosaltres sabem per experiència que el millor i més pràctic és utilitzar graelles amb 12 columnes (agrupables en 2, 3 ó 4 columnes) amb un total de 960 px.
• Logo: El 93% de les 500 millors empreses tenien els seus logos a la cantonada superior esquerra.
• Eslògan: El 27% dels logotips inclouen un lema (base-line) o eslògan.
• Fons de pàgina: El 80% dels web utilitzen principalment fons clars i combinacions de color.
• Cerca: El 87% dels web tenen un camp de recerca.
• Acció: El 47% dels web tenen un botó d’acció ben cridaner que els usuaris veuen en 3 segons o menys.
• Bloc: El 60% de les empreses compten amb les últimes notícies i entrades del bloc a la seva pàgina web.
• Informació de contacte: En el 63% dels casos, les dades de contacte són difícils de trobar…
• Newsletter: Més del 80% de les empreses no tenen l’opció de registre en el butlletí de notícies (newsletter) a la seva pàgina web.
• Xarxes socials: Només l’11% de les empreses tenen enllaços a xarxes socials a la part superior, i el 89% per sota.

A més a més:

• El 63% del contingut està a la part visible superior de la pàgina.
• El 50% tenen algun desplaçament de finestra (scrolling) d’algun tipus.
• El 70% fan servir icones de web favicon.
• El temps de càrrega mitjana és de 6,5 seg. i el tamany de la homepage és de 766 KB.
• El 93% estan enfocats principalment a la navegació.
• El 63% utilitza imatges d’alta qualitat.

(*) Font: Moosylvania via Fortune 500 CNN Money

Voldria acabar aquesta secció comentant un parell d’idees massa exteses que són totalment errònies per tal d’acabar amb el prejudicis que tots portem de sèrie:

• Per una banda hi ha qui pensa que fer un web és la cosa més senzilla del món i que, per estalviar-se quatre cuartos, s’estima més que li faci el fill d’un veí… ;-)  En casos com aquest sempre diem que tingueu en compte que l’important és el disseny i la manera en que mostreu i veneu el vostre producte o marca, en positiu i en negatiu. Un bon web enforteix la marca. Un mal web la destrueix. Però si “el fill del veí” us fa el web que necessitàveu, doncs endavant!
• L’altre prejudici també molt extés és que fer un web amb “cara i ulls” és molt car. Lògicament, tal i com ja hem detallat en els exemples, no és el mateix fer un web senzill que una botiga on-line. Si tenim clar el que volem i optimitzem objectius, us sorprendreu dels preus ajustats que oferim. I sempre amb valors afegits de marca.

Ara que ja sabeu com ho fem, expliqueu-nos els vostres requeriments i us enviarem un pressupost ajustat a les vostres necessitats.