Curs 320139 - Metodologia del disseny

AV21: Disseny e-port-foliEET - Enginyeria de disseny industrial i desenvolupament del productePol Cunillera

1

ÍNDEXpàgina 2. Objectiuspàgina 3. Primeres ideespàgina 4. Plataformes digitalspàgina 6. Disseny de l’e-port-folipàgina 13. Conclusions

OBJECTIUDissenyar i confeccionar l’entorn virtual on l’alumne inclourà tots els treballs i documents de l’assignatura que generi durant el curs i que li permetrà donar-els-hi visibilitat.Cal escollir una plataforma digital des les que es proposen (o qualsevol altre) i confeccionar el port-foli. Abans però, compararem les webs que més ens atraguin per escollir la més adequada per nosaltres.Algunes de les plataformes proposades són Corofolot, Behance, Wix, Tumblr, Blogger o Wordpress, Jimdo, Weebly... que es poden combinar amb altres formats de presentació de documents com Issuu.

2

PRIMERES IDEESEn primer lloc cal pensar en com volem que sigui el nostre aparador: recarregat, minimalista, amb una estètica determinada... Això ens ajuda a seleccionar l’entorn més adequat per nosaltres.El dissenyador ha de seguir una línia concreta dissenyada per ell mateix, un patró comú de presentació i d’estètica que el diferenciïn de la competència, ha de tenir una marca.

· MARCA ·Durant mig any vaig escriure diàriament en un blog personal a la plataforma Wordpress. El nom del mateix era POLISME. El nom és simple, curt i fàcil de recordar i d’associar a la meva persona, ja que el meu nom és Pol. La idea del mateix surt de la unió del meu nom amb el sufix -isme, que és un sufix formatiu de substantius que denota algun tipus de doctrina, tendència, teoria o sistema. Per tant, POLISME significaria alguna cosa semblant a doctrina del disseny o del pensament desenvolupada per mi mateix.

Acompanyant el nom s’ha dissenyat un logotip molt simple que apareixerà a la pàgina web final i que segueix l’estètica que es presentarà a continuació.La tipografia utilitzada segueix la mateixa idea estètica. El nom està separat en dues parts i s’han utilitzat dos tipografies diferents: Bebas Neue i Coolvetica.

· ESTÈTICA ·L’estètica de la web i la que seguirà la marca serà minimalista, utilitzant una tipografia gens recarregada i intentant sempre no sortir de l’escala de grisos a l’hora d'il·lustrar textos o mostrar dissenys. La web ha d’utilitzar un fons blanc amb lletra negre a sobre i amb poques finestres, per no crear un mapa web complex. Per últim, utilitzar la forma quadrada o rectangular que veiem al logotip en altres àmbits.

3

PLATAFORMES DIGITALSDesprés d’haver fet una ullada a les diferents webs, seleccionem les que més ens han agradat per o les que coneixem per comparar-les i triar la més adequada per nosaltres.

· PRE-ELIMINACIÓ ·Aquestes són les plataformes que descartem. S’indica el motiu.- Coroflot (http://www.coroflot.com) → Encara que serveixi com a portal de presentació

dels teus dissenys, no permet personalitzar l’espai personal de cada autor.- Behance (http://www.behance.net) → Presenta el mateix problema que Coroflot: no és

personalitzable. Més que un port-foli sembla una xarxa social per dissenyadors. No és una mala idea utilitzar-ho per penjar els projectes online, però no per ser el principal aparador del dissenyador.

- Tumblr (http://www.tumblr.com) → Tumblr és una xarxa de micro-blogging que permet publicar textos, imatges, vídeos... però coneixent aquesta xarxa social i el perfil dels usuaris que l’utilitzen, descartem la opció per ser inútil. Encara que és personalitzable, l’estructura del mateix no permet una organització decent dels projectes un cop publicats.

- Blogger (http://www.blogger.com) → El blog és una bona opció degut a que personalitzar-ho és tant simple com escollir un tema, però seguim en que l’organització és pèssima. Per l’ús que li donarem, una separació per categories i amb etiquetes és molt pobre.

- Viewbook (http://www.viewbook.com) / Carbonmade (http://www.carbonmade.com) → El problema principal d’aquestes webs és que estan pensades per a persones dedicades principalment a la fotografia o serveixen per mostrar els productes sense poder oferir una explicació, cosa que en el cas del disseny industrial es necessita, ja sigui per adjuntar un link, per explicar el seu funcionament o per donar crèdit al dissenyador. Són utilitats que poden ser utilitzades com a complement de la nostra web.

· ESTUDI ·De les webs que se’ns proposaven en queden 5: Wix, Wordpress, Jimdo, Weebly i Joomla. D’aquestes 5, una destaca per ser molt diferent a la resta. Wordpress no és una pàgina web d’edició de pàgines web, sinó que és un blog.- Wordpress (http://www.wordpress.com) → Plataforma amb format blog millor que

Blogger de Google. Permet personalitzar la pàgina fins un cert punt, ja que només pots escollir el tema que vols aplicar. Per canviar tipografies o editar-lo has de comprar la versió de pagament. Segueix sent una opció viable ja que conec aquesta web de primera mà i sé que no és gens complicada de gestionar: noves entrades, edició d’articles, links...

La resta de pàgines web que hem visitat són gairebé iguals. El que tenen en comú és que la versió gratuïta és molt pobre en comparació amb el que podem aconseguir si obtenim la versió de pagament (que evidentment queda descartada). Tenint en compte això, buscarem la que ens permeti editar al nostre gust.- Wix (http://es.wix.com) → És l’única que coneixia prèviament. Té contingut flash, per tant

hem de conèixer les limitacions que això suposa partint de la base que no tinc coneixements d’informàtica ni conec el llenguatge HTML o flash. La versió gratuïta és prou extensa com per poder editar el nostre port-foli a gust.

- Jimdo (http://es.jimdo.com) / Weebly (http://www.weebly.com) → Dos dels gegants. Grans diaris i revistes com RTVE, BBC o TIME utilitzen aquestes plataformes per dissenyar la seva pàgina web. La versió gratuïta és molt limitada en comparació amb la professional. Necessitem un port-foli, no requerim tanta complexitat ni profunditat.

4

- Joomla (http://www.joomla.com) → Joomla és una plataforma professional utilitzada per governs de tot el món i grans companyies com IKEA o eBay. Per editar amb Joomla cal descarregar-se un programa primer i degut a que nosaltres volem treballar directament des de internet per poder carregar arxius estiguem on estiguem, sembla una utilitat que no ens serveix. El dissenyador es mou, la possibilitat de carregar nous treballs sigui on sigui és real. Encara que sembli la més professional de totes, també hem de comptar en que no tenim experiència a l’hora de crear una web i que tampoc necessitem una plataforma massa complexa.

· COMPARACIÓ ·Per comparar les diferents plataformes fem una taula on estudiarem:- Coneguda: l’hem utilitzat prèviament o hem treballat amb aquesta eina.- Publicitat: Inclou publicitat en la seva versió gratuïta.- Edició: Marquem amb una X si és suficientment personalitzable segons un criteri

personal.- Profunditat: Capacitat per ordenar els continguts per capes o per pàgines (una dins

d’una altra).- User friendly: Si la pàgina és prou simple com per entendre el seu funcionament

d'immediat.

Plataforma Coneguda Publicitat Edició Profunditat User friendly

Wordpress X X

Wix X X X X

Jimdo X X

Weebly X X

Joomla X X

Veiem a la taula que la pàgina web amb més ben valorada segons el meu criteri personal és Wix. Això no vol dir que Wix sigui la millor de totes, vol dir que és la pàgina amb la que podré aconseguir els resultats que més s’assemblin al que tinc pensat.

5

DISSENY DE L’E-PORT-FOLIA ma fem uns croquis amb la distribució i el disseny que volem per la nostra web.

· CROQUIS I MAPA WEB ·

Partim d’aquest disseny inicial i d’un mapa web per saber com hem d’organitzar la informació. La idea del reproductor de música es va plantejar, però queda descartada perquè al visitar una pàgina web la música “ambiental” fa més nosa que servei. La opció de l’enllaç amagat o aquest “easter egg” sí és interessant. Potser es podria enllaçar amb el meu perfil a Twitter o a un document extra no publicat. Aquest tipus de detalls personalment trobo que fan la web més interessant i entretinguda. Veiem que segueix una estètica simple, quadriculada i amb línies guia.

6

El mapa web és una distribució de totes les pàgines que podem trobar dins la web. L’esbós del mapa web per POLISME és el següent:

Una pàgina de portada i dues pestanyes principals: projectes i biografia. Dins de projectes, una classificació per assignatures i una altra per adjuntar projectes independents a la universitat. Dins de l’apartat de biografia podem posar-hi una pestanya de contacte, però veient que es pot acoblar tot en una sola pàgina, descartem aquesta opció.

· DISSENY FINAL ·El disseny final de la pàgina elimina moltes idees que es tenien al principi i n’incorpora d’altres. Les fotografies de la pàgina principal i de la secció biografia (que finalment s’anomena POLISME) són temporals. Quan trobi fotografies acceptables les substituiré però a hores d’ara és el que penso que queda millor. Si ens parem a analitzar cada aspecte de la pàgina veurem que es manté una coherència i un estil únic per tota la web:- Tipografia: excepte el logotip, la pàgina utilitza sempre Helvetica o Helvetica Bold.- Gamma de colors: lletra negre #000000 sobre blanc #FFFFFF amb fotografies sense

saturació (escala de grisos).- Textos: justificats per esquerra i dreta. Títols més grans que el text que l’acompanya.

7

· IMATGES DE LA WEB ·

Portada

8

Desplegable

9

Projectes

10

Disseny bàsic

11

Polisme

12

CONCLUSIONSDesprés de dies dissenyant la web i pujant material d’altres anys, la web ja està publicada:

http://polcunillera.wix.com/polisme

S’utilitza Wix combinant-ho amb l’eina Issuu per visualitzar els treballs i s’aprofita el contingut i l’estètica del meu antic blog de Wordpress. Calen modificacions, però sempre es poden fer a mesura que adquireixi més coneixements i sobretot és pràctica. El resultat actual és prou bo per haver-ho fet en menys de 2 setmanes.Moltes de les idees pensades originalment no s’han inclòs al disseny final del port-foli com l’enllaç amagat, l’ús de fletxes dibuixades a mà alçada o la música. El disseny es basa en la prova i l’error i al fer la web amb aquest disseny s’ha vist que no casava.Considero que en tot moment manté una línia estètica i una gamma de colors, una tipografia uniforme i un estil personal, que m’identifica.Una de les opcions que tenia en ment per la web era la de incloure una cita sobre el disseny i mentre en buscava una d’original i divertida, vaig topar-me amb l’expressió “Keep it simple, stupid!”. D’alguna manera és el que he intentat fer en aquesta web, més funcional que espectacular, amb un disseny simple però útil i amb formes rectes, sense complicacions.

Al llarg del quadrimestre veurem si POLISME és útil o si necessitarà modificacions, mentre servirà com a expositor pels meus projectes i de aparador a l’hora de buscar feina.

13

14