Diseño web

Si ya estás ducho en la materia del diseño web, esto te va a sonar mucho. Pero si eres nuevo uno de los mejores consejos que te pueden dar a la hora de establecer un diseño correcto es que le prestes atención al texto. Y no me refiero sólo a una buena selección de fuentes.

Por ejemplo tenemos Baseline para juguetear un poco. Incluso puedes recurrir a Typetester para comprobar cómo se ven esas fuentes “estándar” del sistema.

Pero este artículo que enlazo a continuación es bastante completito y desarrolla una serie de puntos importantes a tener en cuenta para una correcta maquetación de texto en web. Incluso me ha descubierto lo del Hyphenator.js que no conocía y tendré que probar en algún momento :)

Lo dicho, lectura recomendada.

:: Type Tips, consejos para la tipografía en web :: (Vía Nudonation)

Hace poco tuve la oportunidad de impartir un par de seminarios sobre Fireworks para los alumnos de Artes visuales. Estuvimos pegando un buen repaso al programita para demostrar en profundidad, que, realmente, le pega muuuuchas vueltas a Photoshop en lo que respecta a prototipado y diseño web. Como les prometí algún tipo de documentación adicional que repasase los puntos clave, he pensado que puedo matar dos pájaros de un tiro: refrescarles la memoria a ellos y enseñaros a vosotros la verdadera potencia del programita en cuestión y el por qué se hace tan interesante. Créeme, si con esto no te convences de que Fireworks es una joya, nada lo hará :P

Como el asunto se extiende bastante y estoy casi seguro que una super parrafada no la digerís de una vez, dividiré el artículo en varias partes. Vamos con la primera:

(more…)

Bocetos, mockups, esquemas, garabatos…llámalos como quieras. En aNieto2K se hacen eco de un extenso recopilatorio de linkitos a un buen puñado de plantillas imprimibles que facilitan la tarea de llevar al “mundo real”, el “diseño virtual”.

Plantillas para hacer web con su ventanita de navegador, iPhones, rejillas… un surtido bien nutrido para el diseñador desvalido (cuando me pongo poeta…)

:: Sketchbooks for wireframing [en] ::

PD: Y de regalo otro recopilatorio de los buenos: elementos de interface para diseño y prototipado [en].

En una prueba super relámpago que le he hecho, me ha parecido lo suficientemente interesante como para comentároslo un poco aquí. Y es que Carlos a veces me escribe para mandarme cosas (y no sólo para pedir xD).

Bromas aparte, Drawter viene a ser un nuevo “experimento” que creo pretende acercar a esos a los que el tema de los “divs y las cajitas” nos puede sonar a chino mandarín. Aunque cada vez es más raro encontrar a un diseñador al que no le suene mínimamente lo del diseño web, seguro que aún queda alguno que agradece que se pueda componer código de una manera, digamos, más visual. Tu coges, te haces tu estructura a gusto del consumidor y luego te generas el código. Vale, no es que sea la flexibilidad personificada pero te sirve para ir empezando a juguetear con estas cosas.

No sé realmente si este tipo de inventos llegan a funcionar realmente o terminan desviándote de lo principal (entender lo que haces). Prefiero abrirme el Coda o el Dreamweaver y darle a las teclas hasta que salga algo como lo que busco. De momento he salido al paso :)

Resumiendo, dedícale al menos un par de minutos. Quizá te parezca lo suficientemente útil como para guardártelo para más adelante. O no.

:: Drawter [en] ::

Últimamente cuando me llegan casos de parecidos razonables me paro a pensar si realmente lo que estoy haciendo con esta sección está…bien. La idea principal no es generar polémica o hacer que se le caiga la cara de vergüenza al “copy” sino al menos, si se entera, que reflexione y tenga en cuenta que lo que hay en Internet no tiene por qué ser gratis y no todo son plantillas.

Dentro de los parecidos razonables hay casos y casos. En este concreto es muy descarado y no tiene defensa alguna. Además es un diseño que sale en muchas galerías CSS y es fácilmente reconocible si pululas por ellas. De hecho parece que más de uno ya se ha enterado y lo ha comentado.

Quizá lo que más me haya molestado de este caso es la tontería del copyright. Hay que tener bemoles para ello.

(Gracias a Jesús por avisarme)

Pues eso, que en Speckyboy [en] han hecho un recopilatorio bastante potable con documentos y enlaces relacionados con usabilidad y patrones de navegación e interacción en la web. Enchufad la aspiradora y empezar a pasarla por todo lo que hay dentro :)

:: An introduction to understanding and implementing Web Usability [en] ::

Aunque a mí el término UX Designer me viene grande, debo decir que los patrones de interacción y el diseño de interfaces “me pone”. Hacer gráfico me gusta mucho pero
lidiar con los “puzzles” que se deben resolver para llevar a cabo en una buena experiencia de usuario también es muy entretenido.

Realmente podría empezar a escribir artículos sobre el tema pero tendría que bajar muy notablemente el ritmo de actualización del blog para ponerme a ello. Y tampoco creo que sea muy interesante lo que os pueda contar cuando hay cosas como este Call to actions [en] que son algo bastante potable (aunque poco amigable a la lectura).

Total, que de momento seguiré soltando pequeñas perlas (aunque en breve espero publicar uno sobre diseño móvil) y hoy me toca recomendaros Rosenfeld Media [en]. A mí que me digan lo que quieran, pero un buen libraco impreso no lo cambio por nada salvo honrosas excepciones como ésta. Y es que en Rosenfeld hay un puñado de publicaciones sobre diseño destinado al usuario que bien merecen el desembolso como pudiera ser Web Form Design [en].

Se acercan las Navidades y si tenéis algún diseñador en vuestra lista, quizá sea una buena opción. Seguramente más barata que ese monitor de 30″ por el que babea :D

:: Rosenfeld Media [en] ::

Hasta hace escasas fechas, he venido usando este qTip para estilizar ligeramente los atributos title de la web. Pero como soy culo inquieto me dió por buscar en Google y resulta que hay una versión para jQuery…y la he tenido que probar. Curiosamente los creadores de ambos sistemas se llaman igual.

En términos comparativos la de jQuery “pesa” bastante más pero también ofrece muchas más opciones de configuración tanto a nivel estético como funcional. Basta echarle un ojo a las demos disponibles [en] para entender lo que digo.

Por tanto, si estás buscando un añadido tooltip para tu proyecto, piensa que quizá este qTip te venga bien.

:: qTip tooltip con jQuery [en] ::

Si hay algo a lo que no he prestado realmente mucha atención es a preparar la versión para dispositivos móviles de este blog. Y mira que hay alternativas: está la de Mobify que es muy completa pero me da mucha pereza y no tengo un hueco para prepararmelo en condiciones con todas las posibilidades que ofrece. Pero la recomiendo, eh!?

El otro día ví la luz con nnatali ya que me descubrió MobilePress, un plugin que detecta los cachivaches móviles y les ofrece un tema diseñado específicamente para que la experiencia de usuario sea mucho más placentera. Además dicho tema ofrece la posiblidad de volver al diseño original en cualquier momento.

Lo he probado y pese a funcionar correctamente, no me cargan las funcionalidades de administración y ahora mismo interpreta Internet Explorer 8 como dispositivo móvil (xD). Mi gozo en un pozo. Además, si lo activas a la vez que el plugin Broken Link Checker debe chupar CPU cosa fina viendo lo lentíiiiisima que me iba la web.

¿Solución? Buscarme otra alternativa. Wordpress Mobile Edition [en] que es igual de sencillote de usar con el añadido de que puedes incluso juguetear con Handset Detection [en].

Actualmente tengo instalado un híbrido raro porque tengo este último plugin enchufado sólo que usando el tema del plugin de MobilePress tuneado a mi gusto para que al menos la usabilidad del sitio en móviles ya no queda en entredicho :)

Por cierto, que otra interesante alternativa puede ser WPtouch tal y como comentan en Kabytes.

Extra: Para algunos dispositivos como la PSP por ejemplo, se hace necesario declarar la codificación de caracteres para que se interpreten los acentos y demás. En el tema de MobilePress no viene por defecto. Ya sabéis, añadir el meta:

http-equiv=”Content-Type” content=”text/html; charset=UTF-8″

:)

En ocasiones contadas llego hasta alguna web que tiene implementado algún complemento o sistema de mostrar información que me llama la atención. Lo que hago entonces es tan simple como bucear en el código fuente a ver si es algo propio y desarrollado exclusivamente para el site en cuestión o si por el contrario es alguna cosilla que se puede encontrar y emplear como uno quiera.

Lo último que me encontré y que he implementado parece haberos gustado a unos cuantos a tenor de los comentarios y correos que me han llegado. Como ayer me llegó otro más, pensé que lo mejor era deciros cómo hago eso de que las imágenes carguen a medida que nos desplazamos con el scroll.

Es tan sencillo como usar jQuery y Lazy Load [en].

No creo que tenga que ponerme a explicar cómo “enchufarlo”. Si tienes un mínimo (pero mínimo mínimo) conocimiento de hacer llamadas a javascript te bastará para hacerlo funcionar.

En cualquier caso también hay un plugin para Wordpress [en] que no he probado y que en teoría debería facilitar la tarea (que, repito, es bastante sencilla ya de por sí).

Ojito al tema compatibilidad con otros plugins de jQuery puesto que Lazy Load no funciona bien con la última versión de la librería. Y recordad que para agilizar peticiones al servidor, siempre podréis cargarlo externamente (desde Google mejor)