Herramientas UI / UX

Afortunadamente, el diseño UI / UX está tomando cada vez más importancia a la hora de buscar el éxito de nuestras aplicaciones y sitios web. Para ello contamos con infinidad de herramientas que nos facilitan los procesos de diseño UI / UX.

Vocabulario UX

Este artículo es una recopilación de todo tipo de palabras clave y términos relacionados con la experiencia de usuario (UX). Se irá ampliando para incluir nuevos términos, técnicas y procesos.

Clip-path CSS

La propiedad clip-path de CSS nos permite crear una forma poligonal que actúa como una máscara, a través de la cual se mostrará nuestro gráfico.

Flipping card

Ejemplo básico de ‘flipping card’. Utiliza jquery y bootstrap. 

Digital Healthy Schools – Essex

Proyecto web para el cuidado de la salud en colegios mediante el uso de Apps.

ORCHA Healthcare – prescribiendo Apps

En este proyecto he participado en todas sus fases de desarrollo.

La aplicación se centra en la utilización de Apps de salud como método complementario de prevención y tratamiento de problemas médicos. La compañía dispone de acuerdos con el sistema nacional de salud de Reino Unido (NHS) para que los médicos puedan prescribir Apps a pacientes.

Website – Gym

Plantilla responsive de sitio web para un gimnasio. Esta plantilla se adapta fácilmente a distintos tipos de negocio.

Dashboard – Gym

Plantilla responsive de Dashboard para usuarios registrados. Se trata de un Dashboard sencillo pensado para adaptarse a distintos tipos de negocio.

Carula

Me encargué de mejorar la experiencia de usuario en el proceso de compra desde cualquier dispositivo electrónico (responsive web design).

Quantis

Quantis es un servicio de acceso a internet vía satélite. En este proyecto me encargué de mejorar y modernizar el aspecto visual general de la web, cuidando especialmente la experiencia de usuario en dispositivos móviles.

HR Giger – Museum and Bar

Homenaje a unos de mis artistas favoritos, HR Giger (1940-2014). Este genio fue el creador del xenomorfo de la película ‘Alien’ (1979).

Liverpool history

Liverpool history es una galería con 20 imágenes históricas de la ciudad.

CSS Filters

Muestra de 10 filtros para imágenes que se pueden aplicar en navegadores modernos, especialmente aquellos basados en webkit.

Bootstrapshop – plantilla responsive tienda online

Bootstrapshop es una plantilla responsive para tiendas online creada con Bootstrap.

Henry Schein – Animal Health

En esta web de suministros de Salud para animales ajusté todas sus plantillas y sus elementos (Prestashop) para que se muestren adecuadamente a cualquier resolución de pantalla. Retoqué diversos elementos visuales y de diseño.

Vanagloria

Vanagloria es una exclusiva joyería online desarrollada en Prestashop. El look & feel es elegante, minimalista y limpio.

Pack protección online – Zurich & Telefonica

Pack protección online es una aplicación web para adquirir seguros que protegen y gestionan la actividad online del usuario.

Enova IT Solutions – rediseño web

Rediseño para la web de la Empresa Enova IT Solutions.

Se ha reconstruido la arquitectura de la información de esta web resumiendo sus textos, dejando de lado los submenús…

Farmacia Amat e-commerce

Desarrollo y diseño (responsive avanzado) para tienda Prestashop online. Se le ha dado el protagonismo a los productos. El diseño y la maquetación son minimalistas pero precisos. La limpieza visual es imprescindible para este tipo de tiendas.

Long Shadow con jQuery

Plugin basado en jQuery que sirve para generar el ya famoso “efecto Long Shadow” sobre textos HTML.

Spotifynder – App JavaScript usando API de Spotify

Spotifynder era una aplicación web desarrollada en JavaScript y jQuery, que utilizaba la API de Spotify para hacer búsquedas.

UX y UI de una aplicación web

Caser – desarrollando una aplicación web. Proyecto web en el estado previo a su publicación en producción.

Superslides es un gran slider en jQuery

Superslides es un gran slider en jQuery que permite pantalla completa y es muy fácil de configurar. Además está preparado para aceleración por hardware.

Vibrando con CSShake

CSShake es un pequeño pero divertido proyecto alojado en Github. Se trata de una serie de clases CSS para “agitar” el DOM.

Axure mockup responsive – Vida Sana

Mockup desarrollado con Axure. Se trata de un prototipo cercano a ‘hi-fi’ en el que se muestran criterios de diseño. Además el prototipo está desarrollado bajo el paradigma de ‘mobile-first’, tiene comportamiento responsive y cierto grado de animación.