Arxius per 'Disseny'

El nou logo de Starbucks

Des de fa ben poc hem sabut com serà nou logotip de Starbucks. Es tracta d’una demostració de com els petits canvis poden ser significatius, i de com una marca, quan està tan integrada de tal manera a les nostres vides, pot permetre’s el luxe de prescindir d’elements com el propi nom de la marca i deixar únicament el símbol de la sirena que de ben segur la majoria coneixem de sobres.

En el següent vídeo en Howard Schultz, CEO de Starbucks, ens explica l’evolució de la nova identitat corporativa.

¿Cómo sería la universidad ideal?

En Meddia llevamos meses trabajando en el proyecto Universiag10.org desde su conceptualización hasta la programación y diseño del blog, ofreciendo también apoyo en la dinamización 2.0. Uno de los resultados de ese trabajo ha sido esta infografía sobre los resultados en twitter del hashtag propuesto #uniideal. Podéis ver en la siguiente imagen las respuestas a la pregunta “¿Con qué palabra definirías la universidad iberoamericana ideal?” (clicar en ella para ampliarla).

Infografía Uniideal

(Diseño de Meddia, junto con Elena Sanz, de Ciencia Digital)

All Creative Work Is Derivative

All Creative Work Is Derivative és el nom d’aquest vídeo tan original que ens mostra com gran part dels treballs creatius deriven o es basen altres treballs fets amb anterioritat.

Si observem la història de l’art occidental és normal veure cicles que es repeteixen, moviments que s’alimenten de moviments anteriors, recursos temàtics re-utilitzats, etc. El que més impacta d’aquest vídeo és que aquest cop no només se’ns mostra com l’art deriva en el temps, sinó que també se’ns mostra com l’art deriva entre diferents cultures d’indrets geogràfics molt distants. I les semblances poden arribar a ser sorprenents.

Una de les lectures que també podem fer és com la humanitat al llarg de la història ha progressat construint sobre el treball que altres van iniciar amb anterioritat, apilant coneixement sobre coneixement sense lleis de propietat intel·lectual que dificultessin aquest flux.

Drets d’autor, patents, copyright… Avui dia aquest excés de cel, no perjudica el progrés?

Un CMS no és el remei definitiu

Fragment extret de l’e-book Professional web design:

Molts dels clients amb els quals treballem confien cegament en sistemes de gestió de continguts o content manager system (CMS). Aquells que no disposen d’un pensen que solucionarà els seus problemes de gestió web, i els que en tenen gemeguen perquè no ho fan!

És cert que un CMS pot aportar molts beneficis. Aquests inclouen:

  • reduir els obstacles tècnics d’afegir continguts,
  • permet a més persones per afegir i editar contingut,
  • facilita actualitzacions més ràpides,
  • i permet un major control.

No obstant això, molts CMS són menys flexibles del que als seus propietaris els agradaria. Aquestes no compleixen amb les exigències canviants dels llocs web perquè únicament són una plataforma. Administradors web també es queixen que els seus CMS són difícils d’utilitzar. En molts casos, això es deu al fet que els que l’utilitzen no han tingut la formació adequada o no l’estan utilitzant amb suficient regularitat.

Finalment, un CMS pot permetre la fàcil actualització del contingut, però no garantir que el contingut s’actualitzarà o fins i tot que la qualitat de contingut serà acceptable. Molts llocs web basats en CMS encara tenen el contingut antiquat o mal escrit. Això és degut a que no s’han destinat prou recursos per a l’administració del web.

Si busques un CMS per resoldre els teus problemes de manteniment del lloc web, et decebrà.

Aquest text ha estat escrit per i per a dissenyadors, però el que al final intenta explicar és que un CMS només és una eina que per si sola no fa res, i que mal utilitzada acabarà perjudicant al seu propietari. Cal un esforç per part del propietari per:

  • actualitzar els continguts amb regularitat,
  • actualitzar correctament els continguts (com per exemple, una correcta escriptura),
  • i fer servir el CMS adequat per a una determinada funció (com per exemple WordPress per a un bloc)

A més a més voldria afegir un punt important, la creativitat (usabilitat i disseny)

Usabilitat, disseny, i plataforma tecnològica (la programació pura i dura) avui dia tenen el mateix nivell d’importància ja que els continguts d’un web han de ser fàcilment llegibles i trobables, el web ha de ser atractiu, i tot ha de funcionar correctament. Si un d’aquests elements falla es crea un desnivell. Tenim un problema.

Mitjançant un CMS podem fer servir una plantilla de disseny (template o skin) preconcebuda, però el fet que centenars d’altres webs facin servir el mateix template farà que el nostre web perdi exclusivitat, excel·lència. I si volem modificar la usabilitat i el disseny per que l’estil sigui més personal, la creativitat sempre s’haurà de supeditar al CMS (en aquest cas, la plataforma tecnològica). Tornem a tenir un desnivell que, en aquest cas, no farà que funcioni pitjor, però sí que limitarà la usabilitat i el disseny. L’eficàcia comunicativa minvarà.

No voldria semblar que estic demonitzant els CMS. Com ja he dit abans, els CMS són molt útils en situacions i moments molt determinats, però haurem d’estudiar si realment són la solució definitiva al que realment necessitem, pensant tant en el moment actual com en el futur del nostre web.

El poder ocult d’un regal

Fa alguns dies va aparèixer un article molt interessant al bloc de Seth Godin que parlava del valor afegit que té fer un regal. Lluny del tipus de transaccions a les que estem acostumats, en les quals tu em dones diners i jo et presto un servei, Godin ens parla del valor de regalar: quan regalem adequadament es produeix un desequilibri, i fruit d’aquest desequilibri es crea el moviment que empeny a un nou equilibri. Aquest moviment crea connexió.

Aquesta és sens dubte una de les claus del màrqueting actual, 2.0, digital o com li vulgueu dir. Oferir alguna cosa a canvi de res de vegades té efectes retroactius.

I a més a més, com diu en Godin: “…donar un regal fa sentir bé”
:)

Primeres impressions

Uns investigadors de la Carlton University ens donen aquest consell: “Un web net, professional i que carregui ràpidament pot assegurar que la nostra primera impressió sigui bona“.

La primera impressió és vital, i més en el món web, on molts dels hàbits (bons i dolets) dels nostres interlocutors es veuen molt més accentuats que en d’altres canals. Només cal veure la taula per adonar-nos del temps de captació o primera impressió que dedicaran els usuaris finals del nostre web, cartell, tríptic, etc.

Mitjà Temps de captació
Web 1/20 segon
Cartell 1 a 2 segons
Embalatge 3 a 5 segons
Fulletó dues cares 8 a 10 segons
Tríptic 12 a 20 segons
Catàleg 8 pàgines 20 a 30 segons
Memòria anual 30 a 50 segons
Manual d’instruccions 40 a 100 segons

En el cas del web es radicalitza bastant, ja que només tindrem una oportunitat per convèncer als usuaris que es troben de pas per a que es quedin al nostre web durant més estona.

Naturalment hi entre en joc moltes variables, com per exemple la proporció entre text i imatges, l’interès de l’usuari pels continguts o l’atractiu visual. Com diu en Joan Costa, l’ull busca el plaer.

Fonts: Diseñar para los ojos / @loveday

Text enlloc d’un logo mitjançant el CSS text-indent

text-indent” estableix la tabulació de la primera línia de text d’un element. La tabulació es pot indicar mitjançant qualsevol de les unitats de mesura definides per CSS 2, incloent els percentatges.

Amb la propietat text-indent podem amagar el text, per exemple, d’una capa, i colocar-hi una imatge o logotip amb un link com a imatge de fons. Dit d’una altra manera: podem substituir un logotip per text pla, però el que visualitzarem serà únicament el logotip.

<style type="text/css">
h1 a {
   display: block;
   text-decoration: none;
   width: 128px;
   height: 128px;
   bottom: 0px;
   background: url(mozilla-icon.png) no-repeat left top;
   text-indent: -99999px;
}
</style>

<h1><a href="http://www.mozilla-europe.org/ca">Mozilla</a></h1>

La solució de text-indent és més enrevessada que la típica imatge amb etiquetes alt i title, però és millor de cara al SEO.

Js emulador de CSS3 per a Internet Explorer 5, 6, 7 i 8

ie-css3.js permet a Internet Explorer identificar els selectors de CSS3. Només s’ha d’incloure la seqüència de comandaments a les pàgines HTML i començar a utilitzar els selectors CSS3 als fulls d’estil.


<script src="DOMAssistantCompressed-2.7.4.js" type="text/javascript">
</script> <script src="ie-css3.js" type="text/javascript"></script>

A la pàgina de Keith Clark tenim informació ampliada: coses a tenir en compte, explicacions sobre el funcionament, descàrrega del javascript…

Sens dubte és una molt bona eina per mirar endavant i començar a perdre la por al jou que representa IE6 pel que fa al disseny i desenvolupament web (i al nostre creixement interior com a dissenyadors i desenvolupadors web).

Google Browser Size

Google Browser Size és una pàgina/utilitat que ens permet de visualitzar diferents amplades de finestra i el percentatge de visitants que fan servir aquestes amplades.

Google Browser Size

Per exemple: la xifra “90%” vol dir que el 90% dels visitants tenen, com a mínim, aquesta o una mida més gran de finestra de navegador.

Es tracta d’una pàgina molt útil per dissenyadors, arquitectes de la informació, desenvolupadors, etc. ja que permet saber si un contingut important queda fora, total o parcialment, del camp de visió dels visitants.

Com maquetar newsletters compatibles

1256753159_diagram-01Tot i que el butlletí electrònic (newsletter) és ja un veterà del màrqueting digital, gràcies a un ús intel·ligent pot seguir sent una eina de difusió molt efectiva.

Bàsicament, un butlletí electrònic és codi HTML enviat per correu electrònic. Per tal de maximitzar la compatibilitat amb els diferents gestors de correu cal seguir algunes pautes. En quant a maquetació és com recular uns quants anys enrere, però és la millor manera d’assegurar-nos que el butlletí es veurà bé en la majoria de clients de correu:

1. Maquetació

  • Fer servir taules, i evitar les capes el màxim possible.
  • Incorporar atributs HTML a les taules sempre que es pugui (p.e. border=”0″ valign=”top”…)
  • Aplicar els atributs, mides o estils directament als TD.
  • Aplicar a tots els TD la mida d’amplada que els correspongui.
  • Feu servir target=”_blank” en els enllaços.
  • Les etiquetes IMG han de fer servir l’atribut border=”0″, i han de tenir els atributs HTML d’alçada i amplada.

2. Estils CSS

  • Aplicar els estils en línia a través de l’atribut style=”", dins el mateix codi, i no dins l’etiqueta HEAD.
  • Mirar d’evitar les imatges de fons. És millor situar-les dins el codi com a IMG.
  • Si es fan servir imatges de fons, no s’ha de fer a través de CSS, si no del defenestrat atribut HTML background=”"
  • Evitar l’ús d’estils incompatibles. Normalment són aquells que es fan servir per posicionar o moure capes: float, display, overflow

Podeu trobar aquesta informació molt més ampliada i en anglès a ReachCustomersOnline.