Web actualitzat

Per donar una mica de coherència a tot plegat, acabo d’actualitzar a l’última versió el web ricardvilanova.com. Ara toca la vesió 5.0.

Aquí les diferents versions que s’han anat mostrant al llarg d’aquests 10 anys ja!:

Versió 1.0 (2004)

Versió 2.0 (2008)

 

Versió 3.0 (2010)

Versió 3.1 (2011)

 

Versió 4.0 (2012)

Versió 5.0 (2014)

 

Amb la perspectiva que donen les diferentes versions al llarg dels anys, haig de ser realista i reconèixer que veig millor la primera versió... ;-)  Sí, sí... Gràficament la primera és la més impactant. Minimalista, com ha de ser, i amb la informació justa.

Lògicament hi han coses que són pròpies de les inèrcies de l’època com per exemple els tamanys de pantalla. Tampoc seria possible mantenir aquell disseny amb el volum de continguts actual, però penso sincerament que és la millor versió.

En un moment donat em vaig obsesionar amb el concepte Melic –primer Projecte Melic i després Estudi Melic– i la gràfica resultant va condicionar tota l’estètica posterior (que en defensa pròpia també diré que són tendències puntuals del moment) i, pel que veig ara mateix, després l’únic que he fet ha estat intentar millorar la gràfica... que tenia coses bones, però també en tenia de dolentes...

Continuant amb la sinceritat, penso que no ha estat fins ara (versió 5.0) que hi ha hagut un salt qualitatiu. Certament, si es mira només per sobre, es veu el mateix, però té un altre enfoc. I no és només la gràfica: és la coherència dels continguts i aclarir què vull fer amb ricardvilanova.com i estudimelic.com. De fet, he actualitzat ara que ja tenia pràcticament acabat estudimelic.com i sabia ja què fer. Amb tot, com sempre, encara hi hauran ajustos i retocs, però ara sí hi ha coherència.

Fent un web. Pas a pas #03.- Capçalera i peu

En aquest punt considero important deixar fixats la capçalera i peu perquè seran els elements comuns de totes les pàgines i serà el que donarà continuitat i consistència al web.

Primer posem les imatges de fons de la capçalera i del peu si en porta. I deixem pel final la barra de navegació que és el que porta més feina... no pel fet de posar-hi les imatges, sinó per la interactivitat que se li ha dʼaplicar.

Finalment introduirem els enllaços al peu de pàgina. El peu de pàgina, a part dʼoferir les dades principals de contacte, acostuma a ser un mapa web de tot el lloc. Des dʼaquesta zona sʼhauria de poder accedir a qualsevol pàgina del lloc amb un sol clic.

En aquesta versió del web (3.0) he obviat el texte als botons* en estat de repòs, però amb la funció hover mostrarem el seu significat. Les funcions repòs i hover sʼacostumen a fer només amb CSS, però estava buscant una cosa especial més enllà de la funció hover. Repeteixo una vegada més que no sóc programador però mʼapasiona el poder del codi font (HTML + CSS + JavaScript) i tenia clar que en un moment o altra faria servir alguna llibreria jQuery de JavaScript.

La veritat és que hi havien opcions molt interessants amb jQuery de mostrar el contingut dels botons amb la funció hover, però amb un simple CSS es pot solucionar el petit detall de lʼhover dels botons. Així quedarà finalment la cosa:

(*) Encara recordo, com anècdota, el moment en que un “reconegut” programador local em deia que els botons de la barra de navegació no podien ser imatge... que havien de ser texte perquè sinó no sʼindexaven en els cercadors... potser en aquell moment aquest “reconegut” programador no coneixia la funció z-index per amagar el texte dʼun botó en forma dʼimatge (mantenint els avantatges de la indexació com a texte i els avantatges de la imatge com a força visual gràfica)... ;-)

Fent un web. Pas a pas #03.- Estructurant el codi base

El normal és no començar a programar fins no tenir les arts finals completades (generalment un document de Photoshop PSD), però en aquest cas (“en casa del herrero, cuchara de palo”) tenim molt clar el què fer i ja podem estructurar la base de l’HTML.

Últimament “passo” d’editors WYSIWYG i teclejo el codi directament sobre un editor de texte. No sóc pas programador, però el saber que unes línies de codi tan senzilles puguin crear una pàgina web, m’excita d’allò més... ;-)

Això sí, treballo simultàniament el document HTML i la fulla d’estils CSS.

Fent un web. Pas a pas #02.- Primer plantejament

Abans de res, òbviament hem de saber què volem comunicar i com comunicar-ho... Que treballem sobre web no vol dir que oblidem els principis bàsics del disseny i la comunicació gràfica. De fet, l’únic que canvia és el suport i els primers esbossos són sobre paper: de vegades és un dibuix, altres vegades només és una estructura i en altres ocasions “només” és un llistat de coses que apareixeran.

Matitzat aquest punt, i partint sempre d’una retícula estructurada en 12 ó 16 columnes, es comença a fer la distribució generalment sobre un document PSD de Photoshop.

Fent un web. Pas a pas #00.- Introducció

Aprofitant el 25è aniversari treballant en aquest Ofici (en majúscula i significant ofici, no professió), i veient com ha canviat la meva particular especialització (de catàlegs i revistes a webs i logotips), he pensat que seria interessant anar relatant, pas a pas, com vaig construint el nou web d’Estudi Melic, a mode d’exemple, partint dels primers esbossos fins els últims detalls relatius a la interfície d’usuari. I amb el risc de fer-me pesat, he pensat també duplicar la informació en els dos blocs: http://ricardvilanova.blogspot.com i http://estudimelic.blogspot.com.