Al contrario, un sitio tiene que estar siendo optimizado constantemente, ajustado a las necesidades de sus usuarios, midiendo cada vez cambio y viendo qué da mejores resultados.

¿Tu tema es lo suficientemente ágil como para adaptarse fácilmente? Aqui te propongo 5 ideas para ayudarte a que lo sea.

1. Utiliza la API de widgets de WordPress para hacer tu tema más flexible.

Aunque originalmente fueron pensados para poner cositas en la barra lateral de tu blog (¡internamente se les siguen llamando sidebars!), la API de widgets de WordPress es sumamente poderosa y permite atacar el diseño de tu sitio desde una perspectiva modular.

En un principio, a algunos les parecerá demasiado engorroso hacer 3 o 4 pasos para crear areas widgetizadas en sus temas en vez. Pero a largo plazo, esta flexibilidad otorga beneficios tangibles, como la posibilidad de iterar el diseño de un sitio de una forma ágil, cambiando y moviendo contenido de un modulo a otro sin necesidad de tocar una sola línea de código.

2. Separa el contenido de la presentación.

Este suena como un consejo tonto que se da por hecho en 2010, pero la verdad es que hay una gran cantidad de diseñadores de temas que siguen mezclando su HTML, PHP y CSS lo que crea una gran variedad de problemas a la hora de hacer cambios y actualizaciones a un sitio.

Si tu ya lo haces, te propongo llevar esta idea un poco más allá: no solo separar el contenido y la presentación, sino dividir la presentación en varias capas de una manera ordenada, por ejemplo: layout, tipografía, colores y fondos. Esto haría más simple que en un futuro alguien quisiera hacer cambios simples al CSS sin miedo a romperlo todo.

3. Organiza tu código de una forma modular.

El peor y más inmantenible código que he visto en mi vida lo he visto en temas y plugins de WordPress, donde se dan los más enredados espaghettis de código embebidos todos en un solo archivo. Para un tema simple, de un tipico blog, no existe mucho problema, pero cuando quieres hacer sitios con funcionalidades más complicadas es buena idea empezar a pensar en a modularidad.

Un ideal sería separarlo todo conforme al paradiga MVC, donde el acceso a los datos, la lógica del tema y las vistas estuviera todo separado, pero puedes empezar por crear plantillas para cada tipo de post, una cosa que WordPress permite de fábrica.

Por ejemplo, en lugar de tener solo un index.php lleno de condicionales tipo if (is_page()) { ... } crea home.php para la página de inicio, single.php para posts individuales, page.php para páginas, etc.

Si quieres saber como funciona la jerarquía de páginas en WordPress, mira este diagrama.

4. Presenta un panel de opciones.

No es cosa fácil hacer un panel de configuración en WordPress por eso casi siempre preferimos asumir algunas cosas y escribirlas directamente en el código. Sin embargo, la posibilidad de hacer pequeños cambios y medir su eficacia con solo mover opciones en un panel de la administración de WP es un alivio.

De lo que se trata no es de llenar este panel con miles de opciones, sino dejar algunas pocas opciones importantes para que el usuario pueda modificar su tema sin saber la diferencia entre PHP y HP. Por ejemplo, puedes permitirle elegir que enlaces aparecerán en su navegación, la imagen del encabezado, el ancho de las columnas y el mensaje del footer.

5. No olvides los hooks.

Junto con los widgets y el panel de opciones esta es la tercera pieza clave para que los usuarios puedan modificar su tema sin necesidad de modificar ningún código. Afortunadamente no hace falta incluir cada feature posible en tu tema puesto que lo maravilloso (y atemorizante) de WordPress reside en el enorme ecosistema de plugins gratuitos y premium disponibles.

Pero para que la mayoría de estos plugins puedan funcionar, el tema necesita incluír algunos hooks que permitirán a estos plugins engancharse y ampliar sus funcionalidades. Aquí está la lista de estos enganches, para que no olvides colocarlos en tu próximo tema.

O puedes tomar el camino fácil y usar un framework

Muchas de estas ideas fueron la base para crear DTE, el framework para programar temas avanzados—y ágiles—de WordPress de una forma simple y rápida.

Obviamente yo recomiendo DTE, pero usar algo más simple como Thematic o Hybrid puede ser una opción perfectamente válida.

Estuve meditando mucho al respecto, estudiando las propuestas del mercado y comparándolas con necesidades reales que me he topado en estos 5 años que llevo desarrollando para la web y estas son mis conclusiones.

Las Necesidades de Los Diferentes Roles Usuario

Personalmente, identifiqué 4 roles que tienen parte en un sitio powered by wp y deben ser tomados en cuenta: El Programador, El Diseñador, El Editor y El Usuario Final. Nótese que hablo de roles y no de personas puesto que a menudo una sola persona desempeña más de un papel o es un equipo completo el que se dedica a cierta tarea.

El Programador es el que entiende bien –o más o menos bien– el código que hace funcionar a WordPress y realiza temas o plugins que se adapten a las necesidades de su cliente o de su usuario final.

Los mejores programadores se preocupan por un código limpio, ordenado y bien documentado y están dispuestos a seguir convenciones que refuercen la limpieza y confiabilidad, así como la reusabilidad de su código.

Por alguna razón ésta no parece ser una cultura extendida en el mundo de WordPress y una gran mayoría de los temas y plugins existentes parecen más que fueron hackeados al paso que desarrollados con los estándares arriba descritos. Quizá solo sea que despues de pasar mucho tiempo en los mundos de CakePHP, jQuery, RoR y Cappuccino me volví quisquilloso.

Al Diseñador le toca la parte que se ve y la que le da la cara al usuario final. Aunque para que un diseñador web sea más completo es bueno que sepa HTML, CSS y hasta PHP o JavaScript estas deben ser entendidas como habilidades accesorias o plus pero que no forman parte del quehacer propio de un diseñador.

Idealmente el diseñador debería estar preocupado por el branding, por la legibilidad, por comunicar y resolver problemas gráficamente y debería poder lograrlo de forma intuitiva y gráfica sin necesidad de andar desenredando loops anidados.

Desgraciadamente poco desarrolladores de temas para WP toman en cuenta al diseñador de a pie y hacen que implementar un diseño a partir de un tema sea una labor tediosa y estresante.

Para El Editor, que es la persona encargada de meterle el contenido al sitio las cosas están fáciles si el sitio se trata de un blog convencional porque, seamos sinceros, para eso fue diseñado WordPress. Si queremos algo más, así sea una modificación tan cercana como una revista electrónica en lugar de un blog entonces las cosas comienzan a ponerse feas.

Imaginate explicarle al editor que en ocasiones un post no es un post sino que puede ser un producto o una fotografía depende de en que categoría lo coloque. Que a veces el campo “excerpt” es para poner un teaser del post pero en otras ocasiones se trata del pie de página de una foto. Que por cierto la foto debes recortarla en 3 diferentes tamaños y luego subirla, copiar la url y pegarla en un custom field que debe llevar un nombre determinado.

Y para el Usuario Final o lector o cómo uno quiera llamarle, todo debe ser transparente y fácil de usar. Hace poco escuchaba una entrevista con Irene Rosenfeld, CEO de Kraft Foods donde decía que al vender comida el factor decisivo es que ésta tenga buen sabor.

Con los sitios web sucede algo parecido, el factor decisivo es que al usuario final le sea útil, sin este factor, lo demás no sirve de nada.

Resolviendo Necesidades

En los últimos dos meses he estado experimentando y probando diferentes maneras de resolver los problemas que he planteado en éste post y me siento confiado en que encontré la mejor manera de resolverlas.

En una siguiente entrefa les platicaré mi approach y como estoy resolviendo estos problemas en mi propia linea de premium themes que voy a lanzar muy, muy pronto

Si piensan que estoy completamente equivocado, ya saben “cómo decirmelo”#respond

Esta es la original, del sitio de Apple en inglés (nota: small talk podría traducirse como plática o charla casual)

Esta es la versión que se usa para México y el resto de Latinoamérica. Así es, podrá ser que tengamos una selección nacional malísima, pero tenemos sitio oficial de Apple y ustedes no.

Y parece ser que a los que hacen la versión española del sitio de Apple no les van bien las sutilezas. Les faltó una anotación al final: * En realidad no habla, solo tiene un sintetizador de voz

Esta es la versión de Apple para Brasil, que es más o menos la versión latinaméricana, pero en portugués.

Lo curioso es que en la versión Portuguesa el anuncio no está en portugués, sino en inglés.

Y por último, la versión de francia que es un poco más poética, (Si mi francés de Atemajac no me falla, dice “dejénlo que hable”)

Para quien no lo sepa, los temas premium son temas que ofrecen características adicionales a los temas tradicionales que solo modifican la apariencia de nuestro blog.

Los premium, que por lo general son de paga, casi siempre buscan transformar nuestra instalación de WP en mucho más que un simple blog. Los hay para una gran variedad de aplicaciones y en determinados proyectos podrían ser la solución perfecta para el presupuesto apretado.

En mi investigación, he visto que existen basicamente dos corrientes dentro de los temas premium: Primero están los que son súper flexibles y súper genéricos como Thesis o WPRemix que son más un framework para construír tu sitio que una solución lista para usarse. Tambien suelen ser los más caros.

Luego están los temas que son más específicos, como los que hacen los de WooThemes que bien pueden usarse tal cual, poniendo solamente el logo de nuestro cliente (Eso no significa que no puedan modificarse ad nauseam, para muestra vean el showcase de freshnews).

¿Si ustedes fueran a usar un tema de paga para algun proyecto que preferirían? ¿Un theme-framework súper flexible, uno listo-para-usarse o una mezcla entre estos dos conceptos?

Ojala me puedan ayudar contestando en los comentarios. Puede que vengan algunos temas premium marca soska en camino y sus opiniones serán invaluables.

Les traduzco/adapto/resumo muy libremente:

¿De que se trata este mito de la descubribilidad? Pues de esta creencia de que en una buena interfaz todo debe de ser completamente y extremadamente fácil de ser descubierto. Si un elemento no cumple con esta norma entonces está mal diseñado.

Tambien puede pasar que el equipo de diseño opte por resaltar alguna característica y hacerla mas descubrible ya sea porque es novedosa o porque les gusta mucho sin importar su importancia real comparada con otras características que quizá no sean tan novedosas.

Uno puede confundirse y creer que una interfaz altamente descubrible es usable y está bien diseñada.

El problema es que tanto el espacio en pantalla como el tiempo y la atención de nuestro usuario son recursos limitados. Por eso no podemos hacerlo todo descubrible, sino que debemos priorizar y hacer algunas concesiones en base a estas prioridades.

Un buen diseño entonces, es aquel donde el diseñador tomó una decisión por nosotros (de preferencia una decisión informada) sobre qué es más importante y entonces hizo que eso saltara a nuestra vista de manera inmediata.

De cualquier forma, les recomiendo leer el artículo original

Siempre me ha gustado mucho el diseño básico y tradicional del blog. Cada vez  aumentan más los blogs que se esfuerzan por no parecer que lo son, pero a mi me gusta la página llena de posts en orden cronólogico inverso, con un encabezado ingenioso y  una barra lateral llena de enlaces.

Por otra parte, desde antes de que los tumblogs se volvieran comunes y populares, siempre me atrajo la idea de darle a cada pieza de contenido un tratamiento especial. No me parece correcto que un post rápido sólo con un video, un minipost de un solo enlace y  un articulo largo compartan el mismo diseño, así que me aseguré que este nuevo tema sea tan flexible que me permita tener miniplantillas que se aplican solo a ciertas categorías.

Pero como a mi tambien me da un poco de envidia el sitio de Jason Santamaría y como puede darle un diseño unico a cada post (el le llama artículos directamente) , así que me las arreglé para añadir la posibilidad de modificar completamente el CSS de cada anotación pero sin alterar la típica estructura de blog que, como ya dije, me gusta tanto.

Si se fijan, este post tiene una imagen de fondo.

Disculpen si no abundo en los detalles técnicos, pero es que tengo planeado hacerlo en futuras entregas.

La otra cosa que era muy importante para mí en este diseño era hacerlo todo mucho más sencillo y mucho más tipográfico que cualquier diseño que hubiera hecho antes. Nunca antes había puesto tanta atención al diseño tipográfico en ninguno de mis diseños como en esta ocasión y me satisface pensar que no hice un trabajo tan malo.

Por último, la ilustración del encabezado me vino en una epifanía hace poco más de un mes  desde entonces ha pasado por muchas encarnaciones digitales y en papel hasta llegar a estar tal y como la ven allá arriba.

La verdad es que hasta ayer todavía estaba considerando dejarla fuera del diseño porque echaba a perder parte de la simplicidad que buscaba con este rediseño. Pero al final decidí dejarla porque así, aunque todo sea diferente, mis lectores de antaño aun sabrán que se encuentran en Dupermag.

Si leen esto desde el feed, no van a entender ni jota a menos que hayan visitado el sitio. Si les gusta o si no les gusta, no dejen de decirmelo en los comentarios.

P.D. Es posible que se vea del asco en Internet Explorer 6, pero dada la audiencia esperada de este blog, no me interesa soportar ese navegador.

No puedo decirte como ser un gran diseñador de logotipos (si lo supiera, lo sería), para eso hace falta experiencia, preparación y quizá talento. Pero lo que puedo es darte unos cuantos consejos, para que al menos, tus diseños apesten un poco menos y quizá se aproximen a algo bueno.

1. No uses más de una tipografía.

Un diseñador habilidoso puede usar dos, pero tu no, tu limítate a una sola tipografía. Creeme, no hay nada que grite “aficionado sin talento” más que un logotipo con una cantidad excesiva de tipografías distintas.

Si no entiendes la diferencia entre tipografía y fuente entonces por favor abstente de diseñar.

De verdad, por favor.

2. Utiliza una buena tipografía.

¿Como saber cuando una tipografía es buena cuando no se tiene entrenamiento tipográfico? Te dejo una regla simple: no utilices niguna que venga preinstalada con windows, ni con CorelDraw, y por favor, ninguna que hayas bajado de DaFont. Si aun tienes dudas, utiliza Helvetica.

Si no sabes distinguir entre Helvetica y Arial aun estás a tiempo de estudiar mercadotecnia.

3. Cuida el Kerning.

En teoría debieron enseñarte en la universidad qué era el kerning, pero si tu universidad fue tan eficiente como la mía, quizá tengas que aprenderlo por tu cuenta y como siempre, la wikipedia es un buen comienzo. El proposito del Kerning es que los caracteres (letras) tengan una separación uniforme de acuerdo a su peso visual. Tener un correcto kerning en la composición de una página llena de texto puede ser un dolor de cabeza, pero para el texto de tu logotipo puede ser más simple. Mira tu texto con los ojos entrecerrados y usa tu sentido común para balancear el peso visual de tus caracteres.

Si no entiendes el concepto de “peso visual” ve con un médico, quizá tengas un problema de anorexia.

4. Usa formas simples para tu imagotipo.

Crear formas complicadas o ilustraciones que funcionen en un logotipo requiere de experiencia y maestría. Es muy probable que tu no la tengas aún, asi que te recomiendo usar formas simples. Cuadrados, círculos, estrellas, hojas, etcétera aun pueden usarse efectivamente con un poco de creatividad. Recuerda que “más es menos menos es más”

Si no sabes quien fué quien dijo “más es menos menos es más” no te preocupes, basta con que sepas quien decía “Aún hay más”.

5. No uses Clipart.

Es completamente injustificable. Si no puedes dibujar ni siquiera formas simples pide a alguien con habilidades de ilustración que te ayude y compartan el crédito. No hay mucho más que decir…

Excepto que si quieres usar un clipart y que nadie se de cuenta, entonces esconde tu diseño bajo tu cama donde nadie lo vea.

6. Diseña en blanco y negro.

Si tu logotipo no funciona en blanco y negro entonces no va a funcionar cuando le agregues catorce colores y degradados. Probablemente no tienes experiencia en producción o en tu escuela no te enseñaron como funcionan los metodos de impresión o quizá solo tienes pensado en diseñar para la web por lo que no entiendes el por qué de esta limitante. Así que solo te pido que confíes en mí y diseña en blanco y negro al menos por los próximos 2 años.

— Pero el logotipo de Movistar no funciona con un solo color y ve, es exitoso. Ni el de Sony Ericsson ni el de…

Si tienes millones de dolares para invertir en una campaña de publicidad y meter tu logotipo hasta en la sopa de tu público meta entonces no hagas caso de nada de lo que digo. Anda ve, gasta tu dinero.

7. No uses los efectos del Corel.

Si puedo adivinar solo de ver tu logotipo los pasos que tomaste para crearlo y qué programa utilizaste entonces puedo saber sin lugar a dudas que eres un aficionado sin talento.

Y no se trata solo de Corel Draw, tambien de Illustrator y —OMG!— Photoshop. ¿Crees que escribir una palabra en Adobe Illustrator y luego darle click a un estilo de apariencia te convierte en diseñador? Siento desilusionarte, pero no.

Ahora que, un buen diseñador sabe como cubrir sus huellas. Mira  a Veerle como todo el tiempo le preguntan como hizo tal o cual cosa, y resulta que la explicación casi siempre es un efecto del programa más creatividad.

Si la creación de tu diseño toma menos de dos pasos y más de un efecto de tu programa favorito deberías considerar una carrera como carnicero.

8. No seas pirata.

Esta es rapida: si eres un bastardo sin talento y crees que puedes piratearte el diseño de alguien más sin que nadie se de cuenta entonces mejor viaja en el tiempo a algun momento antes de que se inventara internet.

Si te das cuenta que definitvamente no tienes talento para diseñar, no te preocupes, aun puedes tener un blog de diseño del top 100. Repite conmigo: Control+C y luego Control+V.

9. Sé autocrítico.

A veces veo participaciones en algunos concursos de diseño que me hacen pensar: ¿Quien le dijo a este dude que podía diseñar? La capacidad de ser autocrítico está sumamante infravalorada. —Es que tienes que creer en tí mismo— dirán algunos. — Cree en que puede mejorar, pero date cuenta que ahorita apestas— es lo que yo digo.

Les recomiendo un ejercicio de autocrítica: Tomen el diseño que acaban de hacer y compárenlo con el trabajo de los mejores diseñadores del mundo, lado a lado, como si tuvieran que competir contra ellos en un concurso. ¿Que tan bien parado sale? ¿Muy mal? No importa, solo ve de regreso al restirador hasta que al menos no te avergüences de tu diseño.

No te pases de mano con la autocrítica, se trata de ser mejor diseñador no de que te deprimas y te vuelvas emo.

¿Mas ideas?

Estos son mis consejos para hacer presentable un logotipo inpresentable, pero en este caso, creo que los consejos que den ustedes en los comentarios harán que este post sea mucho más valioso. ¿Que piensan? ¿Me pasé de la raya?

En un principio yo leí este post, lo catalogué en una área de mi cerebro bajo la categoría Filosofía inflamatoria inútil. Me dije Cualquier persona con medio cerebro hará lo que yo, y seguí con mi vida. Sin embargo, para mi sorpresa, gente que tiene probablemente el triple de cerebro que yo, decidió responder a la provocación y escribir al respecto [dejo los enlaces al final del post].

Fuera de hablar de lo mismo, lo que yo quiero es dar algunos consejos:

1. No creas todo lo que lees En su libro, los mismos 37s aceptan que a veces exageran sus declaraciones para causar escándalo. Hacen muy buen software pero eso no significa que tengamos que comprarles toda su filosofía.


2. Lo que importa es el resultado En serio, al cliente promedio le da enteramente lo mismo si hiciste tu diseño en photoshop o si usaste tortuguitas entrenadas caminando sobre un lienzo con un copic marker atado a la cola.


3. Usa lo que te funcione Si a tí te funciona una cosa y a Paul Rand otra, no significa que alguno de los dos esté equivocado. A mi me critican mucho porque prefiero usar CorelDraw por encima de otras herramientas que son concebidas como más profesionales y yo les digo: ¿Si Corel me permite trabajar bien y rapido y obtener los resultados que espero (ver punto anterior) a ti qué?

Enlaces pertinentes

• Jeff Croft – Why we don’t skip potoshop
• Mark Boulton – Design is about tools
• Jon Hicks – Graphics Editor or Text Editor?
• Doug Bowman – Chosing the right tool
• Isopixel – Traducción libre del articulo original

• Moccablog – 37 signals y la polemica

Si te gusta el diseño de interfaces de usuario lo mitad de lo que te gusta a mí, las imagenes de este post te van a hacer babear.

via The 4040 blog un blog que apenas descubrí y ya va que vuela a ser uno de mis favoritos.