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″

:)

Hoy es fiesta aquí pero os voy a dejar un caramelito para los sufridores de otros países y currantes españoles que no hacen puente :D

¿Ya tenéis Windows 7? Particularmente he notado el salto notablemente porque me he saltado la generación Vista y a nivel de experiencia de usuario me parece que la cosa ha evolucionado favorablemente. Esto os lo digo por si os pica el gusanillo y queréis sentaros un rato para ver Designing the Windows 7 Desktop Experience [en].

Luego también podréis echarle un vistazo rápido a la comparativa entre dos modelos de interfaz móvil a la hora de lidiar con aplicaciones: App Interface Models in iPhone and Android [en].

Y para acabar, dos super enlaces de usabilidad que me he guardado para seguir desde hoy: Usability Post [en] y UI Trends [en]. Ambos sacados de 10 UX blogs you should be reading [en].

En breve quedarán almacenados 4500 posts aquí. Un buen puñado. Y de todos ellos, uno de mis favoritos es este de recursos de usabilidad y patrones web. Quizá si lo hubiese escrito hoy, CSSBake formase parte de todos los linkitos que hay ahí dentro.

Porque lo bueno de este showcase es que es de esos que despiezan las webs que encuentran para quedarse con sus detallitos de calidad. Que si el footer, que si el estilizado de la página de error…

Particularmente considero mucho más útil estas pequeñas píldoras visuales a la hora de encontrar ayuda. Un poquito de aquí, otro poquito de allí… Todos tenemos nuestros recursos y estructuras que funcionan, pero viendo cómo lo hacen los demás uno siempre se encuentra cosas novedosas.

:: CSSBake [en] :: (Vía Pedro Puig)

No negaré que me ha llegado más de un correo lo largo de todo este tiempo indicándome que se hacía un poco incómodo el uso de Flash en los titulares. Siempre respondía que era algo que sabía y que esperaba solucionar antes o después. Pues ale, manos a la obra.

Hasta la fecha yo venía usando sIFR [en] en el blog para dicha tarea y también para el portfolio (pero implementado con jQuery en este caso) Me parecía un punto importante mantener unos titulares y encabezados decentes aunque presentara ciertos problemas de uso como la escalabilidad del tamaño de letra (no era del todo correcto), la imposibilidad de hacer un efecto hover en condiciones (en las últimas versiones creo que ha mejorado) y, la más importante, que era una lata para copiar la url a la que se enlazaba o incluso a hacer clic sobre los titulares. Pero bueno, en este caso me tragué lo de “la forma sigue a la función” y dí preferencia a lo visual. Hasta ahora.

(more…)

No, suena a concurso pero no lo es. Se trata realmente de la penúltima hasta la fecha galería recopilatoria de diseños CSS con la novedad de que esta vez hay un jurado semipermanente que es el que pone las notas a los trabajos subidos. Aunque sí que existe la posiblidad del voto popular claro.

El propósito de estos premios es valorar el diseño, la creatividad y el esfuerzo de los diseñadores, estudios y agencias web de todo el mundo. Para ello nuestro sistema además de otorgarle el premio a “Site of the day” o “Site of the month” recibe otros premios en metálico o en equipamiento tecnológico, y lo más importante, promocionamos tu website por toda la red, enviandola a nuestra red de blogs colaboradores, directorios y foros de carácter internacional y realacionados con el diseño y la creatividad web.

Otro punto extra es que a nivel diseñil está bien cuidada, muy de mi gusto. A ver si es del tuyo y de paso te animas a subir algo! Y acuérdate que para esa tarea igual te ayuda MeeCSS :)

:: The CSS Awards [en] ::

Hablaba hace un tiempo con Annie sobre el tema de los portfolios, que si había que hacerse uno, que si cuál era la mejor opción…

Tenía pensado preparar un artículo o sucedáneo comentando el tema. Realmente hay muchas variantes: desde montartelo a pelo o usando Indexhibit por ejemplo, hasta emplear una de las opciones de portfolio online que te lo dan todo hecho.

En Heavy Backpack [en] se me han adelantado (en realidad es que yo soy muy lento) y han elaborado una selección de 10 opciones de portfolios online para poder elegir. Me parece bastante buena.

:: Hosted Portfolio Roundup ::

PD: La verdad es que hay muchas opciones más también viables. Están Creativestem [en], GFX Artist [en], Ameets, CG Hub [en]…

Quizá me equivoque pero PSDaWEB es el primer servicio que veo de este estilo, en castellano. Y es que de estos formatos hay chorrocientos (40 Options for Converting PSD to HTML [en]) en inglés, por eso me ha parecido destacable el hecho de que ahora ya exista la “versión Cervantes”.

¿Para cuando un FWaWEB? FW de Fireworks, claro.

:: PSDaWEB ::

Si hay tropecientas galerías CSS de webs, no veo por qué iba a sorprenderme el hecho de que también existiera para diseños enfocados a dispositivos móviles. Es el caso de CSS iPhone de la que tampoco creo que haga falta que diga mucho más. El nombre lo dice todo.

:: CSS iPhone [en] :: (Vía Mobile Design)

Desafortunadamente, no todos tenemos un iPhone ni todos los clientes destinan sus proyectos a dicha plataforma por lo que debería también existir algún proyecto similar de web móvil. Mobile Awesomeness [en] es lo más parecido que hemos encontrado en [Q] pero muchos sitios siguen siendo enfocados a iPhone. Al final terminaremos sacando nosotros una :D

Uno de mis jefazos dejaba el otro día en [Q]blog una interesante página que nos permite comparar las diferentes compatibilidades que ofrecen los navegadores actuales frente a características propias de HTML5 o CSS3 por citar un par.

Es bastante configurable a la hora de mostrar según qué datos sobre los navegadores que queramos. Y tiene pinta que el autor quiere mantenerla actualizada regularmente. Ale, a favoritos!

:: Tabla comparativa de navegadores con soporte HTML5, CSS3, SVG… ::

No sé si recordaréis Glimmer, ese intento de aplicación de escritorio destinada a hacernos la vida un poco más fácil a los “pezuñeros” (esos que de código sabemos 4 cosas pero toqueteamos igualmente). Entiendo que IxEdit está enfocada también para los de esta especie puesto que pretende ayudar a la creación de interacciones y efectos mediante un sencillo editor. Está claro que igualmente hace falta un mínimo conocimiento de lo que se está haciendo pero al menos la tarea se hace algo menos tediosa de esta forma.

Es multiplataforma, gratuito y tiene bastante información en la web oficial. Por probarlo no pasa nada.

:: IxEdit [en] :: (Vía Ceslava + PixelGangster [en])

Lo he visto en Swissmiss [en] y me lo he tenido que traer. Porque aunque tampoco he probado muchos frameworks CSS sí que me da a mí en la nariz que no se tiene especial atención en el aspecto tipográfico. Y no me refiero sólo a los tamaños sino más bien a los espaciados e interespaciados.

Porque un párrafo de texto puede pasar de ser un ladrillo infumable a algo comprensible y agradable con tan sólo modificar el line-height. Y parece que Baseline está preparado para lidiar con ello.

:: Baseline [en] ::

Como no todos somos unos máster del Universo con jQuery seguro que a más de uno nos vendrán muy bien estos videotutoriales jQuery para principiantes que abarcan desde el empleo de efectos básicos y la carga de la librería, hasta cosas más complejas usando selectores avanzados o creando nuestros propios switchers y tooltips.

Para ser gratis, no está pero que nada mal. Están en inglés pero bueno, son vídeos ¿no? :)

:: videotutoriales jQuery para principiantes :: (Vía [Q])