La autora dedica 1 capítulo a cada uno de estos principios, continúa con un capítulo de repaso, otro de trucos y consejos, y finaliza con una segunda parte dedicada a la tipografía, con una taxonomía básica de las fuentes, y las formas de conseguir contraste aprovechando la tipografía.

No es un libro que vaya a convertirte por sí solo en un gran diseñador, eso por descontado, pero no es un mal principio. Se nota la experiencia en la enseñanza de la autora, y los ejercicios, cuyas respuestas podemos encontrar al final del libro, son bastante útiles.

Existen dos formas de diseñar software. Una es hacerlo tan simple que sea obvio que no existen deficiencias. La otra es hacerlo tan complicado que no sea obvio que existen deficiencias. El primer método es, con diferencia, el más difícil.

– C.A.R. Hoare

O, quizás, un poco menos delicioso y comestible, porque esto son galletas creadas por una diseñadora, como regalo de navidad para sus clientes. ¿Quieres saber cómo prepararlas? ¡Sigue leyendo!

Ingredientes

Para las galletas
1 taza de mantequilla
1 1/2 tazas de azúcar glass
1 huevo
1 cucharadita de vainilla
1/2 cucharadita de extracto de almendra
2 1/2 tazas de harina
1 cucharadita de bicarbonato
1 cucharadita de cremor tártaro
Azúcar granulado

Para el glasé real
1 taza de azúcar glass
2 cucharaditas de leche
2 cucharaditas de sirope de maíz
1/4 cucharadita de extracto de almendra
Colorante alimenticio

Preparación

Mezcla el azúcar y la mantequilla. Añade el huevo, el extracto de vainilla y el extracto de almendra. Mezclar bien. Añade la harina, el bicarbonato y el cremor tártaro. Cubrir y enfriar durante 2 o 3 horas. Precalentar el horno a 190ºC. Divide la mezcla en dos. Amasar cada parte en una superficie cubierta de harina, hasta un grosor de medio centímetro aproximadamente. Cortar en rectángulos de 5×6.35cm. Engrasar ligeramente la bandeja del horno. Hornear las galletas durante 7 u 8 minutos, o hasta que adquieran un tono dorado.

En un bol pequeño, mezcla el azúcar glass y la leche. Añade el sirope de maíz y el extracto de almendra, y remueve. Si el glasé está demasiado espeso, añade más sirope. Pinta las galletas con el glasé, y déjalas secar. Divide el glasé en varios recipientes y añade el colorante alimenticio apropiado a cada mezcla, con mayor o menor cantidad dependiendo de la intensidad deseada. Una vez secas, pinta las galletas con el glasé del color adecuado. Utiliza un lápiz para decorar para escribir el texto correspondiente.

Para descubrir las características de diseño que se deben utilizar para lograr la respuesta que se busca en el usuario, se suele utilizar un sistema experto, que se basará para generar sus recomendaciones en distintas bases de datos internas (de palabras, imágenes, conocimientos y diseño y color).

Uno de los mejores ejemplos del uso de la ingeniería Kansei es el caso del diseño del Mazda MX-5, uno de los roadsters más populares del mundo, para el que Mazda contrató al equipo de Nagamachi. Este deportivo biplaza descapotable se hizo con cerca de 150 premios en toda su historia, incluyendo Coche del Año en distintas publicaciones y distintos años.

Y tú, ¿Qué propondrías para una hipotética serie de sellos de grandes éxitos españoles?

Vía

Os recomiendo echarle un vistazo, porque es pegadiza y la letra, muy cierta. Aquí tenéis el vídeo, y a continuación tenéis la letra en inglés y una traducción rápida al castellano, para los interesados:

The SEO Rapper – Design, Coding

Your site design is the first thing people see
it should be reflective of you and the industry
easy to look at with a nice navigation
when you can’t find what you want it causes frustration
a clear Call to action to increase the temptation
use appealing graphics they create motivation
if you have animation please use with moderation
cause search engines can’t index the information
display the logos of all your associations
highlight your contact info that’s an obligation
create a clean design you can use some decoration
but to try to prevent any client hesitation
every page that they click should provide an explanation
should be easy to understand like having a conversation
when you design the style go ahead and use your imagination
but make sure you use correct color combinations
do some investigation, look at other organizations
but don’t duplicate or you might face a litigation
you are done? congratulations, start construction
move into production, please follow these instructions
your photoshop functions? then slice that design
do your layout with divs make sure that it’s aligned
please don’t use tables even though they work fine
when it come to indexing they give searches a hard time
make it easy for the spiders to crawl what you provide
remove font type, font color and font size
no background colors, keep your coding real neat,
tag your look and feel on a separate style sheet
better results with xml and css
now you making progress, a lil closer to success
describe your doctype so the browser can relate
make sure you do it great or it won’t validate
check in all browsers, I do it directly
gotta make sure that it renders correctly
some use IE, some others use Flock
some use AOL, I use Firefox
title everything including links and images
don’t use italics, use emphasis
don’t use bold, please use strong
if you use bold that’s old and wrong
when you use CSS, you page will load quicker
client satisfied like they eating on a snicker
they stuck on your page like you made it with a sticker
and then they convert now that’s the real kicker
make you a lil richer, your site a lil slicker
design and code right man I hope you get the picture
what I’m telling you is true man it should be a scripture
if it’s built right you’ll be the pick of the litter
everyone will want to follow you like twitter
competition will get bitter and you’ll shine like glitter
if you trying to grow your company will get bigger
design and code right man can you get with it

El rapero SEO – Diseña, escribe código

El diseño de tu web es lo primero que ve la gente
debería reflejar lo que eres y tu industria
agradable de ver y con buena navegación
no encontrar lo que buscas causa frustración
una llamada a la acción para aumentar la tentación
usa gráficos atractivos, crean motivación
si usas animaciones, por favor, hazlo con moderación
porque los buscadores no pueden indexar la información
muestra los logos de todas tus asociaciones
descata tu información de contacto, es una obligación
crea un diseño limpio, puedes usar alguna decoración
pero intenta evitar la vacilación de los clientes
cada página en la que hacen clic debería mostrar una explicación
debería ser fácil de entender, como tener una conversación
cuando diseñes el estilo usa tu imaginación
pero asegurate de usar combinaciones de colores adecuadas
investiga algo, echa un vistazo a otras organizaciones
pero no plagies o puedes enfrentarte a un juicio
¿has terminado? felicidades, empieza a construir
después a producción, por favor sigue estas instrucciones
¿funciona en photoshop? entonces sigue con ese diseño
usa divs para componer, asegurate de que está alineado
por favor no uses tablas aunque funcione con ellas
cuando se trata de indexar dan problemas a los buscadores
facilita a los spiders indexar tus páginas
elimina el font-type, font-color y font-size
nada de background-color, mantén tu código limpio,
conserva el aspecto en una hoja de estilo
tendrás mejores resultados con xml y css
ahora haces progresos, estás un poco más cerca del éxito
describe tu doctype para que el navegador lo pueda identificar
asegurate de que lo haces todo bien o no validará
prueba la web en todos los navegadores
hay que asegurarse de que se ve correctamente
algunos usan IE, otros usan Flock
unos AOL, yo uso Firefox
añade un title a todo, incluyendo enlaces e imágenes
no uses itálicas, usa énfasis (NT: em en lugar de it)
no uses bold, por favor, usa strong (NT: strong en lugar de b)
usar bold es antiguo y erróneo
al usar CSS, tu página carga más rápido
los clientes están satisfechos
se quedan en tu página como si tuviera adhesivo
y logras una conversión, eso es lo realmente importante
hacerte un poco más rico
diseña y escribe código bien, colega, espero que lo hayas cogido
lo que te digo es cierto, debería ser tu biblia
si está bien desarrollado serás al que escojan
todo el mundo querrá seguirte, como twitter
la competencia se joderá y brillarás como el oro
si intentas crecer tu compañía se hará más grande
diseña y escribe código bien, colega, lo puedes hacer

Por eso es obligatorio transformar el feed en una salida que muestre información sobre qué es ese archivo y cómo utilizarlo. Feedburner ofrece este servicio, pero estamos limitados a las salidas que ellos nos proponen. Nosotros vamos a ver cómo utilizar XSLT y CSS para crear el documento que queramos. Podéis ver un ejemplo en el feed RSS2 de Mundo geek.

XSLT (eXtensible Stylesheet Language Transformations) es un lenguaje de la W3C que permite transformar documentos XML en otros formatos, por ejemplo HTML. XSLT funciona a base de plantillas, de la forma:

<xsl:template match="foo">
R1
R2
R3...
</xsl:template>


Las reglas R1-R3 se aplican cuando en el documento XML original se encuentre una etiqueta foo. Estas reglas podrían ser, por ejemplo, mostrar un cierto texto, el contenido de la etiqueta, uno de sus atributos, aplicar otra plantilla, etc. Podéis ver un ejemplo en el documento XSLT que he utilizado para transformar el feed RSS2.

Para asociar un documento XML a un documento XSL, y que por lo tanto se muestre la salida especificada con XSLT al abrir el XML, tenemos que añadir una línea indicando dónde encontrar el XSL asociado:

<?xml-stylesheet href="xslt-rss2.xsl" type="text/xsl"?>

En el caso de WordPress abrimos el archivo wp-rss2.php y añadimos la línea:

<?php echo '<?xml-stylesheet href="xslt-rss2.xsl" type="text/xsl"?>'; ?>

después de

<?php echo '<?xml version="1.0" encoding="'.get_settings('blog_charset').'"?'.'>'; ?>

De esta forma hemos indicado que cuando se abra el feed RSS2 de la web se apliquen las transformaciones de xslt-rss2.xsl que se encuentra en el mismo directorio que wp-rss2.php. No tiene ningún misterio.

Podeis utilizar mi archivo XSL o bien modificarlo para que se ajuste a vuestras necesidades, la mayor parte de él es simple código HTML. Simplemente descargarlo y subirlo al directorio en el que se encuentre el feed (el directorio raíz en WordPress). Lo que si deberíais tener en cuenta es que en el XSL, al crear el documento HTML, se incluye una hoja de estilo CSS en la línea 13:

<link rel="stylesheet" type="text/css" href="/wp-content/themes/fscreenmg/style.css" />

Modificadlo para que apunte a la hoja de estilo que queráis utilizar y voilà!.