Web Colour Data: Quins colors utilitza un lloc web?

Ja s'ha comentat en una anterior entrada d'apunts digitals que el color és un factor important en el disseny web. A vegades es fa difícil poder trobar una bona combinació o poder saber quina és la paleta exacta d'una pàgina web que ens agrada o ens sembla interessant.

Web Colour Data és una eina que ens permet analitzar els color que utilitza una pàgina web a partir d'introduir la seva URL. Es molt interessant poder veure les paletes de diferents webs i així poder fer un treball d'investigació de colors corporatius web o fer comparacions. A la pàgina d'inici se'ns mostres alguns exemples de webs (Facebook, Google, Yahoo, Flickr, Firefox, Dropbox o Instagram) que ens poden servir de referencia.

Web Color Data del Blog Apunts Digitals

Infografia twitter Apunts Digitals

Una infografia és una representació visual per explicar algun tema o concepte. En una infografia intervenen descripcions, narracions i relacions presentades d’una manera gràfica i normalment figurativa.

Tot i que presenten la informació d’una forma sintètica i esquematitzada, les infografies són un dels recursos més utilitzats per a presentar la informació per la seva claredat visual. Una infografia també pot ser utilitzat com un recurs educatiu per explicar conceptes.

A mode d’exemple  us presento una eina molt senzilla, TweetTopic Explorer , que genera una infografia interactiva d’un perfil Twitter sobre les paraules o tòpics més utilitzats en el compte que s’analitza. En un instant es pot saber de que parla el compte mitjançant la presentació de les etiquetes per ordre de rellevància. El seu funcionament és molt sencill i només cal indicar el compte a analitzar.

A mode d’exemple aquí teniu la infografia resultant del meu compte de Twitter realitzada amb l’eina Tweet Topic Explorer.

Infografia Apunts Digitals

PowToon: eina per a crear vídeos

Segur que tots vosaltres heu pogut mirar molts vídeos animats per a explicar temes o conceptes d’una manera molt didàctica.

PowToon és una eina per a crear vídeos i presentacions animades d’una manera gràfica i animada. És una eina gratuïta i us permet de poder penjar els vídeos, per exemple a YouTube per tal de compartir-los amb els vostres amics, els vostres estudiants i fins i tot per a fer presentacions professionals.

Us passo un enllaç d’un vídeo fet amb aquesta eina d’un dels blogs que segueixo Mi experiencia de usuario on s’explica com crear “persones”, mètode que ja vaig comentar en un post anterior d’apunts digitals.

Eina PowToon

Color Scheme Designer: tria colors disseny web

Un dels temes més complicats a l'hora de dissenyar una pàgina web és la tria de colors. La combinació de colors d'un lloc web ajuda a donar forma a la seva identitat i per tant no ha de ser descuidada ni improvisada.

Però, com poder fer una bona tria de colors? Una de les possibilitats és utilitzar eines especialitzades que ens poden ajudar a fer aquesta tria. 

Color Scheme Designer és una eina online gratuïta i molt fàcil d'utilitzar que ens ajuda a crear esquemes de colors en segons, fer simulacions d'un prototipus de pàgina web amb els colors triats, fer simulacions per a persones amb dificultats visuals i exportar el contingut a codi HTML  per a poder reproduir tant la gama de colors com el seu indicatiu de color en el navegador.

Pantalla inicial Color Shema Designer

Gama de colors resultant

Espero que us agradi aquesta eina presentada per apunts digitals.

Mockflow: prototipus disseny web

Com s’ha comentat en una entrada anterior d'apunts digitals, una de les fases de la metodologia web és el disseny. Poder realitzar un prototipus del lloc web que es vol desenvolupar ens ajuda a poder tenir una idea de com serà l’aspecte de cadascuna de les pàgines que integraran un lloc web. El prototipus en arquitectura de la informació és la maqueta del projecte a realitzar.

MockFlow WireframePro és una eina basada en web per dissenyar models d'interfície d'usuari per als llocs web. Aquesta eina gratuita ens ajuda a visualitzar la interfície de la pàgina web, la seva navegació i l'estructura en poc temps. És una eina fàcil d'utilitzar que ens permet dissenyar, d'una manera ràpida i intuitiva, cadascuna de les pàgines que conformaran el nostre lloc web, implementant una arquitectura web molt personalitzada i amb diversos complements que t'ajuden a realitzar el prototipat.

Prototipus bàsic amb MockFlow

Notegraphy: app de disseny

Avui parlaré d’una aplicació anomenada Notegraphy que he vist publicada en un dels blogs que segueixo: Academic App. Aquesta aplicació ens ajuda a millorar el disseny de les nostres publicacions per poder-les compartir a de forma més destacada a les xarxes socials.

Notegraphy replanteja la forma d'escriure i compartir text en línia a través d'unes plantilles, així que es poden crear dissenys més originals en temps real, i compartir-los a l'instant a Facebook , Instagram , Twitter i WhatsApp : una entrada de blog, un text o simplement alguna cosa que es vulgui dir i compartir.

Aquí teniu una mostra d’una de les meves entrades realitzada mitjançant aquesta aplicació.

Entrada Apunts Digitals amb Notegraphy.

Animeu-vos a provar-la !!!

Fases metodologia web

En els inicis d’internet el més important era centrar els esforços en el desenvolupament del codi de programació, es a dir, el HTML.

Actualment l’estratègia en el disseny de les pàgines web està centrada en l’usuari. Això implica que en el disseny cal conèixer i pensar en les necessitats dels usuaris que utilitzaran la pàgina web que volem dissenyar.

Tot i que no hi ha una metodologia a seguir consolidada es considera que cal cobrir tres fases en l’ordre següent: una primera fase d’anàlisi, una segona fase de disseny i una tercera fase d’implantació.

Els aspectes més rellevants a considerar en cada fase són les següents:

Referència: Mario Pérez-Montoro

Els aspecteAquest és el primer apunt digital sobre aspectes de l'arquitectura de la informació d'una pàgina web. Un bon llibre de referència sobre temes d'arquitectura de la informació, d'on he extret la informació de la imatge és Arquitectura de la información en entrornos web de Mario Pérez-Montoro

UX mètode no participatiu d'anàlisis d'usuaris

Seguint amb el tema UX user experience us presentaré un dels métodes no participatius més destacats: persones. 

Exemple fitxa persona

Aquest mètode té com a objectiu crear i dissenyar tots els perfils o els tipus de d’usuaris tipus que conformen el públic objectiu d’una web. Es tracta de dissenyar perfils ficticis però que s’han dissenyat a partir de tot el coneixement que es posseeix sobre el públic objectiu real.

La fitxa és el resultat d'entrevistes amb usuaris tipus de la web que es vol dissenyar. Per exemple si volem dissenyar una aplicació App de cuina, buscarem usuaris potencials amb usuaris de iPhone o Android, que els agradi cuinar o tenen necessitats de conèixer receptes bàsiques.

Per a saber-ne més us enllaço dos articles que parlen d'aquesta metodologia.

Bibliografia:

1. An introduction to personas and how to créate, Tina Calabria, 2 de marzo de 2004

Un bon artícle introductori bàsic amb una visió acadèmica de la técnica de persones.

2.  Getting started with building persons, Howard Kaplan, 2008

Un interessant article que ens dona el punt de vista d’una empresa de serveis sobre la construcción de persones.

Podeu consultar també l'anterior entrada d'apunts digitals.

UX experiència d'usuari

Qué és la UX experiència d'usuari?

Actualment en el món Internet s’ha experimentat un gran canvi d’estratègia en el procés del disseny d'una web o website. El principal canvi radica en centrar tot el disseny del lloc web en l’usuari que interactuarà amb la pàgina que volem dissenyar.

Ens referim com a UX a l’experiència d’usuari UX user experince, es a dir a la interacció usuaris-ordinadors (human-computer interaction), per tant cal tenir en compte aspectes UX en el disseny d’una pàgina web.

UX implica que en el disseny d’una pàgina web hem de fer estudis  d'usuaris mitjançant una sèrie d’anàlisis  amb mètodes participatius i mètodes no participatius d’estudis d’usuaris

Per tal de que entengueu millor el que abarca la UX comparteixo aquesta imatge realitzada per  Dan Willis (@uxcrank) en una una presentació de per la Startup Weekend DC en 2011.

UX by Dan Willis

Quan entreu a alguna pàgina web, en especial aquelles en les que heu de seguir un procés de compra, del que es tracta és d'aconseguir l'objectiu d'una forma ràpida i efectiva. Si no és així, segurament la web s'ha dissenyat amb umbrella tancada i recordareu aquest apunt digital.

Núvol d'etiquetes

Segur que heu vist molts núvols de paraules en imatges d'internet. Amb aquest post us explicaré una manera molt fàcil de fer núvols d'etiquetes que sempre són molt vistosos.

Núvol de noms a partir d'una llista

A partir d’una llista de paraules podem general un núvol de tags o etiquetes.  La mida de cadascuna de les etiquetes  vendrà donada per la quantitat de vegades que es repeteix cada paraula de la llista. També es pot generar un núvol d’etiquetes de paraules d’una URL o pàgina web.

Un programa molt ràpid i fàcil d’utilitzar és wordle. 

Aquí us presento dos exemples de núvol  d’etiquetes realitzats amb aquest programa: un generat amb una llista de noms i  un generat a partir de la URL d’aquesta pàgina WEB d’apunts digitals.

Núvol de paraules del blog Apunts Digitals