Archivo

Entradas Etiquetadas ‘usabilidad’

Maquetación al 99%

Sábado, 11 de septiembre de 2010 Sin comentarios

Nunca había realizado una maquetación con Blueprint, pero la verdad es que ha sido realmente fácil aprender a usarlo.

En tan solo 12 horas he conseguido maquetar 11 páginas y validarlas con el W3C validator. Creo que nunca había conseguido hacerlo tan rápido y consiguiento que funcione perfectamente en cualquier navegador (incluido IE6). Incluso me he parado a meter una mini-animación con JQuery y a montar las imágenes como sprites para mejorar la velocidad de carga y por tanto la experiencia de usuario.

Según mi YSlow+Firefox la primera carga son 117KB entre 2’5 y 5’5 segundos. Después de la carga inicial la página que más tarda son 1,5 segundos (llegando en ocasiones 0.2 segundos). Espero que la navegación por lo menos sea cómoda :) , los contenidos se los dejo al cliente ;)

La verdad es que la experiencia con este proyecto/cliente hasta ahora está siendo muy interesante. Si os apetece echarle un vistazo a la maquetación y darme sugerencias o comentarme algún fallo que se me haya pasado … os doy un beso en el bigote como dice mi amigo Fabri :) .

Maquetación

Maquetación

Aquí os dejo la URL del trabajo de maquetación realizado: http://www.rauljimenez.info/dev/enriqueta/

Practicando lo aprendido sobre usabilidad

Domingo, 15 de agosto de 2010 9 comentarios

Ya me he terminado prácticamente el libro de “No me hagas pensar” de Steve Krug. Y aprovechando que ahora estoy inmerso en un nuevo proyecto con la Universidad de Granada, he decidido desvincularme del tema de programación para practicar lo aprendido y centrarme en la parte del diseño, usabilidad y arquitectura del sitio.

Inicio - Catedra de investigación

Estoy encantado con la nueva herramienta que estoy usando, se llama Balsamiq Mockups y es genial, a parte de que el equipo que hay detrás de la herramienta me ha sorprendido gratamente. Les escribí hace unos días para ver si tenían algún tipo de licencias para Asociaciones (porque me gustaría este año dar un taller sobre usabilidad) y muy amablemente me dieron varias opciones y como agradecimiento por mi interés me regalaron una licencia.

Bueno, pues solo quería compartir con vosotros el tercer boceto de la web en la que estamos trabajando por si alguno queréis darme vuestras impresiones/comentarios/sugerencias.

Os dejo un PDF navegable con el boceto (Wireframe/Mockup) que he creado con esta herramienta. En estos días también aprovecharé para hacer algunos test de usabilidad con esto, a ver que aprendo :) .

http://www.rauljimenez.info/descargas/Wireframes/Catedra%20de%20investigacion.pdf

¡Hasta pronto!

Mi primer diseño web con Inkscape

Martes, 1 de junio de 2010 11 comentarios

Bueno, hoy he conseguido una cosa que llevaba año y pico intentando, realizar un diseño web con Inkscape, una herramienta libre de diseño vectorial.

Se que tiene algunas carencias, pero bueno, pensad que de profesión soy informático, y que nadie me ha enseñado diseño :D así que me gustaría recibir críticas constructivas del mismo :) .

Estamos trabajando ahora en desarrollar una aplicación que sirve para gestionar los pedidos en el restaurante de un hotel. Los clientes pueden pedir desde las mesas y las habitaciones de un hotel sin necesidad de llamar a los camareros y  luego el maitre, el jefe de cocina, el jefe de barra y  el dueño del restaurante tendrán acceso a otra aplicación (hecha en Java) que servirá para: administrar los pedidos, el stock, ver estadísticas, etc. (pronto os dejaré el acceso a toda la info).

El objetivo era diseñar una App web que fuese lo más usable posible, que inspirase modernidad, y que fuese interactuable mediante una pantalla tactil (por eso el tamaño de los botones).

¡No me enrollo más!
Aquí tenéis la primera pantalla que me ha dado tiempo a hacer.

Disenio

Haz click encima para ampliar

Un saludo

Mapa sobre el proceso de desarrollo de un proyecto web

Viernes, 16 de octubre de 2009 8 comentarios

Buenas chic@s, acabo de crear la versión inicial de lo que espero se convierta en un proyecto colaborativo, consiste en un diagrama que
represente el proceso de desarrollo de un proyecto web. Podéis verlo a continuación:

Agradecería que añadiéseis los comentarios/opiniones que creáis dentro del mismo diagrama para ir mejorándolo conjuntamente. Por supuesto las
aportaciones irán reflejadas en las siguientes versiones del documento.
Hoy (viernes) daré mi punto de vista del desarrollo de un proyecto web usando este mismo diagrama a las 16:30 en el aula 1.1 de la ETSIIT
(por si alguno os animáis a venir y así podemos discutir allí mismo el diagrama).

Espero que os guste, me ha llevado unas cuantas horas hacerlo, pero soy consciente de que aún puede mejorar mucho con vuestros
conomientos.
¡Un saludo!