Núria Saban de Llos& a Eina

Ens visita Núria Saban programadora de Llos&

El 28 de maig ens va visitar Núria Saban, ex-alumna d’Eina, “Web developer, Frontendpadawan, html, css, js”. Així és com es defineix a la seva web. Ens va explicar quins havien estat els seus passos fins assolir el que havia somiat: ser membre de Llos&. A l’acabar la carrera, es va iniciar en un estudi d’arquitectura durant cinc anys, treballant com a maquetadora. Després, va estar dos anys pel seu compte amb diversos clients, com la Fundació Mies van der Rohe. Cansada de la pluriocupació, va decidir llençar-se de cap a la programació i al món web, que era el que més li agradava. Així va entrar a Llos&.

La seva intervenció comença amb els problemes que sorgeixen amb els dissenyadors gràfics. Ens fa una llista de quins són els aspectes bàsics que un dissenyador hauria de detallar al seu treball perquè a programació poguessin començar bé sense que després hi hagi molts canvis. Per al desenvolupament d’un lloc web, el format en que arriba un projecte al programador és molt important.

Ens mostra els avantatges que té el programa Sketch per a la seva feina. També ens comenta que els dissenyadors tampoc pensen en les diferents mesures de pantalla de cada dispositiu (els media queries, les alçades i amplades de pantalla, molt diferents en cada dispositiu). “Si saps quines aplicacions poden tenir els media queries i jugar-hi, et marques una web molt més guai”, ens diu la Núria. Ens explica també que dissenya segons el criteri mobile first, és a dir, que el disseny es basa en la versió per a mòbil. A partir d’aquest, va afegint media queries segons vagi creixent l’amplada de la pantalla.

Ens explica que l’accessibilitat és molt important, no només per a aquells qui la necessiten, sinó per a tothom: navegar per la web seria molt més còmode per a tots. Arrel d’això, ens parla de tipografia i adverteix que en un lloc web no pot utilitzar-se tipografia de menys de 16 px. I, si n’hi ha, ha de ser per a coses molt secundàries. També ens comenta una altra cosa que els dissenyadors mai tenen en compte: que hi ha moltes unitats de mesura en web per definir el mida de la tipografia. Com ems, rems, píxels, i punt view-port (% de la pantalla). Aquest últim permet que la tipografia creixi alhora que la pantalla d’una manera molt més fluida i que el disseny sigui molt més fi.

Repassa errades que hem d’evitar quan dissenyem un web. Parla del contrast, de quan els enllaços no es distingeixen, ens dóna eines per comprovar si el nostre web passa el test de contrast, com ara: https://colorable.jxnblk.com. Ens diu que l’outline focus, encara que no ens n’agradi el resultat, és molt important no eliminar-lo: la navegació amb tabulador o amb lectors de pantalla ha d’estar sempre disponible. Si no, serà un problema navegar per a persones que necessiten aquests sistemes. En aquesta pàgina se n’explica la importància: http://www.outlinenone.com/

Tot acabant, parla dels colors a la web. Ens recomana una pàgina: https://www.colorhexa.com. També comenta les interaccions i el seu sentit: quan un botó està activat, desactivat, què passa amb el hover, i es queixa que moltes d’aquestes coses el dissenyador mai les defineix.

Ens hem quedat, doncs, amb unes quantes lliçons per aprendre i tenir en compte per portar a terme un disseny web i quines són les necessitats que té un programador.

SEO (Search Engine Optimization)

Avui, acabem l’assignatura de SEO (Search Engine Optimization) amb Rubén Alcaraz. A aquesta assignatura, hem après com millorar el posicionament d’una pàgina web a les pàgines de resultats dels motors de cerca, la importància que té fer un bon SEO, on es poden aplicar aquestes tècniques, com funcionen els motors de cerca, quina és la seva estructura i arquitectura per entendre i millorar el nostre posicionament web, les diferents estratègies que podem utilitzar i entendre com els usuaris ens cerquen per a poder triar bé les paraules clau per les quals volem competir.

Per posar en pràctica tots els coneixements teòrics hem intentat posicionar una imatge a Google des de la pàgina web que vam crear per a l’assignatura Disseny per a gestors de continguts.

Per fer aquesta pràctica hem utilitzat un plugin de WordPress anomenat Yoast, que ens ha ajudat a guiar-nos per poder posicionar la nostra imatge a Google. Hem après la importància que té el SEO-on page, i fer una bona optimització de la nostra pàgina, i el SEO–off page per a augmentar l’autoritat de la nostra pàgina a través d’enllaços interns i externs.

Com a pràctica final hem hagut d’auditar una pàgina web, analitzant el seu contingut, la densitat de paraules clau, com és la seva arquitectura de la informació, els seus aspectes tècnics i de rendiment. D’aquesta forma hem pogut analitzar i detectar els errors i punts de millora de la pàgina web en qüestió.

Anàlisi i Gestió de Publicacions Digitals

Ja hem acabat l’assignatura d’Anàlisi i Gestió de Publicacions Digitals impartida pel professor Diego Fernández. En ella hem realitzat una infografia que ens ha permès aprendre sobre arquitectura de la informació encarregada de l’estudi, anàlisi, organització, disposició i estructuració de la informació. També hem pogut treballar el disseny de la informació, en la qual hem hagut de representar d’una forma gràfica la informació i estructurar-la eficient i efectivament perquè pogués ser molt visual i entendre’s ràpidament.

Els resultats han estat molt diversos. S’han treballat inforgrafíes relacionades amb l’auge del cybercrim o la pirateria, una comparativa de les vendes en els mitjans online en el black friday, sobre les fake news, l’ús de les apps per a buscar parella, fins i tot  s’han preguntat si el print està morint.

Disseny Centrat en l’Usuari

En aquesta assignatura impartida pel professor Enric Mor, hem après a tenir una visió global de tots els aspectes que intervenen en el disseny centrat en l’usuari (DCU). Aquest es pot concebre com “la disciplina de la interacció persona-ordinador (IPO), la usabilitat i l’experiència d’usuari”.
A través de diferents activitats tant teòriques com pràctiques hem anat descobrint quins processos són claus en el DCU. Hem posat èmfasi en el valor de conèixer als usuaris a qui anirà destinat el nostre producte, les etapes i tècniques que el configuren, en saber aplicar el DCU en la definició dels nostres projectes, com fer una anàlisi correcte d’allò que volem dissenyar, i per últim com implementar i avaluar productes digitals interactius. En el nostre cas, el redisseny d’una pàgina web.

The Ideal Wallet

Aquesta activitat va ser la carta de presentació de l’assignatura. A través d’un exercici pràctic de design thinking per parelles, vam dissenyar una cartera a mida a partir d’un petit briefing que li fèiem a la nostra companya. D’aquesta manera fèiem valdre la importància de conèixer a l’usuari a qui va destinat el nostre producte. Per tant poder dissenyar a mida i buscar solucions reals als problemes plantejats de l’usuari.

Lost & Found

Durant aquesta activitat realitzada per grups, vam aprendre a utilitzar diagrames de flux per al disseny d’una app. L’objectiu d’aquesta pràctica era treballar de manera col·lectiva el recorregut més lògic que permetés reportar, buscar o trobar una mascota perduda.

Spaghetti Marshmallow Challange

Aquesta va ser l’última activitat pràctica que vam realitzar a l’assignatura. La seva finalitat era treballar el design thinking per a practicar el prototipatge en col·lectiu podent testejar allò que construeixes a través de prova i error de manera col·lectiva. L’objectiu d’aquesta activitat era crear una estructura que s’aguantés amb 20 espaguetis crus i 1 metre de cinta, 1 metro de cordill i un Marshmellow a la punta. Tot un repte!

 

portfolio-gaizka

Disseny per a gestors de continguts CMS

Al llarg de l’assignatura de Disseny per a gestors de continguts CMS amb el Daniel Julià hem après sobre maquetació web mitjançant HTML i CSS a més a més de PHP per treballar amb WordPress. Finalment, hem posat en pràctica tals coneixements dissenyant i programant els nostres propis portfolis.

A continuació, un recull:

 

Gemma Fontanals

Daniel Iglesias

 

Emily Eldridge

Gaizka Pagonabarraga

Andrea Rueda

Laura Magallón

Carolina Orozco

programacio-portada

Introducció a la programació

Al llarg de l’assignatura Introducció a la programació, impartida per Jordi i Oriol Collell, hem après tant nocions bàsiques com d’altres més complexes del propi mitjà que ens han permès formar i desenvolupar-nos en la programació web.

Aquests són alguns dels treballs finals, protagonitzats per diferents animacions SVG creades amb HTML, CSS i Javascript a partir de llibreries com Green Sock, utilitzant en la majoria dels casos TweenMax.

after-effects

Vídeo digital i animació

Al llarg de les sessions de Vídeo digital i animació hem après i treballat amb Diego Fernández les tècniques i recursos de creació audiovisual destinada a xarxes: des de característiques bàsiques del vídeo i pròpiament de les animacions digitals de 2D, introducció al 3D, com també al tractament d’àudio a partir de l’edició amb After Effects.

Aquests són alguns dels projectes finals de l’assignatura:

King workshop

Gabriela Lazbal i el Concept Art

El passat dimarts 15 de maig vam tenir la visita de Gabriela Lazbal a l’assignatura de Projectes Rich Media. Lazbal treballa a King, empresa líder en el sector de l’entreteniment per dispositius mòbils, coneguda mundialment pel seu joc estrella Candy Crush. Després d’uns sis anys a l’equip, actualment el seu rol és el de Senior Artist i Lead Artist de l’equip d’art del videojoc Bubble Witch 3

Lazbal va néixer i formar-se a Argentina però porta uns 20 anys vivint a la península, havent treballat a Madrid, Zaragoza i Barcelona. D’entrada, ens explica que el seu recorregut es caracteritza per ser força multidisciplinar, guiada sempre per la seva vena artística.

Des dels tretze anys tenia clar que volia estudiar la carrera de Belles Arts. No obstant, arrel del seu esperit curiós, pel camí ha seguit cursant demés disciplines, com per exemple, producció i realització de cinema i televisió a la vegada que animació analògica i de 3D. A més a més, abans d’entrar a King i paral·lelament als seus estudis, havia dedicat una bona part de la seva trajectòria professional a la docència i a treballar de manera independent com autònoma.

King workshop

Durant la sessió, Lazbal ens explica amb detall el procés d’elaboració de videojocs. En el cas de l’empresa sueca, segueix una metodologia de treball basada en el model SCRUM, el qual evita jerarquies potenciant la proactivitat i la coordinació entre els seus membres. Destaca sobretot l’èxit dels projectes perquè es construeixen arrel d’una base comunicativa molt necessària.

“Allò més positiu que té SCRUM és la retrospectiva. En aquesta sessió es comenta què ha anat bé o malament tant a nivell professional com personal. Va bé per evitar arrastrar problemes o malentesos acumulats i s’estableixen relacions de confiança mitjançant la conversa.”

Ens explica que el brainstorming de la primera fase l’organitzen perfils ben variats com és el cas d’artistes, dissenyadors/es de mecàniques de joc, productors/es, data scientists i, en fase més avançada de prototipació o implementació, també s’hi uneixen developers i persones de l’àrea de testing. Tot i així, no es troben només per una pluja d’idees inicial sinó es van reunint constantment per tal de compartir totes les decicions, posant en comú tant l’ideació com l’anàlisi i resultalts de testeig durant l’evolució del producte.

“Juntar-se i discutir les idees fa que una de simple vagi enriquint-se. Per això el treball en equip és tan important.”

A grans trets, Lazbal defineix el procés de progressiu i ens introdueix el concepte de sprints, és a dir, consta de tota una sèrie de tasques estipulades i pautades anteriorment que s’han d’anar complint de manera conjunta amb una duració prevista per tal de poder testejar el producte al més aviat possible. Tant la fase creativa com de producció creixen força de la mà però sí que és veritat que la part de conceptualizació és un treball previ al de desenvolupament de l’aplicació final. Per aquest motiu, Lazbal assegura que s’han de pulir molt els dibuixos, passant per moltes fases, per aconseguir un disseny definitiu que pugui ser aplicat amb detall quan es crei en 3D.

King workshop

Al llarg de la ponència es van tractar altres aspectes en relació el disseny. Per una banda, es va parlar sobre el tractament tipogràfic i el perfil UX/UI, importants també a l’hora de definir l’estil del món del joc i satisfer les expectatives dels jugadors i jugadores. Per l’altra, Lazbal va donar-nos consells sobre com afrontar el món laboral. A través d’anècdotes, ens comentava com encarar una entrevista de feina, els tipus de portfoli i la importància de mantenir una actitud proactiva però alhora receptiva sempre, oberta al feedback que tant ens beneficia.

Sketching

Disseny Centrat en l’Usuari

Al llarg de l’assignatura d’Anàlisi i Gestió de Publicacions Digitals amb Enric Mor, vam descobrir el DCU (Disseny Centrat en l’Usuari) i les etapes tècniques que configuren el seu procés iteratiu. És important saber aplicar-lo en qualsevol producte interactiu ja que enriqueix la usabilitat i l’accessibilitat de l’experiència d’usuari.

Vam aprendre sobre UX/UI redissenyant la pàgina web d’un client real. Per realitzar-lo, vam completar totes les fases del projecte començant per la seva definició de la mà de la investigació, seguint amb el plantejament de l’arquitectura de la informació i sketching, el disseny de wireframes junt amb el prototip i l’avaluació. També, vam combinar el contingut teòric donat amb activitats dinàmiques elaborades a classe.

The Wallet Project

La primera activitat va ser una introducció al Design Thinking amb el desenvolupament per parelles d’un briefing a mida. En una hora, vam comprendre el valor imprescindible d’aproximar-se a la persona destinatària del producte o servei, en aquest cas un moneder, per tal de conèixer les seves necessitats. Per aconseguir-ho, havíem d’entrevistar-nos mútuament, deixant de banda les nostres preferències com a dissenyadors/es i proposant solucions reals que poguessin satisfer cada cas.

User Journey

El disseny de tota plataforma online o aplicació ha de contemplar els escenaris o user journeys dels usuaris analitzant prèviament el tipus d’activitat, els seus contextos d’ús i les emocions experimentades per detectar les mancances que entenem com oportunitats de millora. En aquesta ocasió, vam definir perfils i recorreguts de persones que utilitzarien una app per escoltar música.

MDG EINA CDU 2018

Pet Lost & Found

En aquesta activitat vam utilitzar els diagrames de flux per dissenyar la navegació d’una app que oferia un sistema de recerca i retrobament de mascotes perdudes.

Spaghetti Marshmallow Challange

Cap al final de l’assignatura, vam realitzar aquesta activitat que consistia en, per grups de 3-4 persones i en 18 minuts, construir una estructura que es sostingués per si sola amb els següents elements:

  • 20 espaguetis crus
  • 1 metre de celo
  • 1 metre de cordill
  • 1 núvol dolç
  • 1 tisores

I una cosa més, a la punta més alta havia de situar-se el núvol rosa. La iniciativa ve plantejada des de Harvard per Tom Wujec, qui ens va conduir a la reflexió final sobre l’èxit o el fracàs de treballar en equip, especialment entre estudiants de disseny.

Des del principi parlem de disseny iteratiu, una metodologia cíclica de canvis i millores en base a proves d’iteració realitzades més recentment. Es fan prototips, tests i anàlisis d’un producte o servei de forma continuada per aconseguir cada vegada una versió més perfeccionada.

Infographic

Anàlisi i Gestió de Publicacions Digitals

A l’assignatura d’Anàlisi i Gestió de Publicacions Digitals hem elaborat infografies de temàtiques en relació a Internet i les tecnologies. En l’última sessió amb Diego Fernández, vam presentar-les a l’aula per tal de compartir i comentar-les conjuntament.

El resultat exposat va ser molt divers tan a nivell formal com de contingut, el qual era molt ampli: tractava des de l’existència de les cookies, el món dels emojis, l’èxit de les cites online, la música en streaming, l’ús i abús dels smartphones o l’Instagram i el curiós cas del #foodporn.