
La experiencia de usuario debe ser el factor clave cuando planificamos el diseño o rediseño de páginas web, y esto abarca todo el proceso desde que se llega a la web hasta que tiene lugar la conversión deseada. Y en esta experiencia de usuario el elemento más importante será el diseño, pues este será el responsable del primer impacto que tendrá el cliente al aterrizar en alguna de nuestras páginas o aplicaciones.
Como vimos en el artículo de los 10 pasos a seguir en el diseño web, no nos lanzaremos de cabeza a crear el diseño con Photoshop, sino que primero definiremo los objetivos y contenidos del sitio web, para después utilizar una herramienta de wireframing, para finalmente ponernos manos a la obra en el diseño propiamente dicho.
Con el objetivo de ayudarte a crear buenos diseños, he recopilado los mejores kits UI que he encontrado, para que te ayuden en tu proceso creativo. Para pasar los diseños de PSD a CSS te recomiendo el plugin CSS Hat, vale casí 30 dólares, pero yo lo compré y me ha sido muy útil en la maquetación de este sitio web, pues he ahorrado un montón de tiempo al no haber de generar manualmente todos los gradientes y elementos de CSS3. T
La mayoría de los recursos aquí presentados son premium, esto es, de pago. Creo que para hacer un buen diseño web hay que hacer una inversión de tiempo y dinero, y las horas que ahorras maquetando y programando son horas que tienes para otros proyectos, o al menos es como yo lo veo.
UI kits para mejorar la experiencia de usuario
Graphical User Interface (GUI)
Viene en tres esquemas de colores: verde, naranja y azul, y da soporte a tres resoluciones: iPhone 4 (326 dpi),iPad (132 dpi) y web (72 dpi).Además está pensado para dispositivos retina. Incluye menús de navegación, iconos, barras, botones y mucho más.
Cobo UI kit
Cuando empecé el diseño de esta última versión de la web de eSandra este fue uno de los kits UI que tuve en cuenta, pues tiene un diseño limpio y moderno. Todos los archivos de este kit son vectores, lo que significa que podemos cambiar su tamaño sin perder resolución.
Clinic UI Kit
Tal y como su nombre indica, me parece un diseño muy acertado para clínicas y hospitales, pues justo transmite esto. Un kit muy completo que por incluir incluye hasta un calendario.
Interfaz de usuario PSD
Disponible en cuatro esquemas de color: azul, amarillo, rojo y verde, todos ellos bajo un fondo oscuro. Es importante cuando nos decidimos por un kit UI que tengamos en cuenta el fondo sobre el que se pondrán, pues dependiendo del color nos quedarán bien o no.
Luminous UI kit
Excelente kit para diseñar una buena interfaz de usuario, con una resolución de 326dpi para iPhone y Android. Todos los contenidos son vectores y se estructuran en capas dentro de un PSD.
UI kit a mano
Excelente para sitios web con texto escrito a mano, como puede ser academias, colegios u otros sitios pensados para niños.
Black UI Kit (gratis)
Utilicé este kit para los formularios del footer de esta nueva versión de CreativaSfera, me parece un diseño muy acertado por ser gratis! Que más puedo decir, si lo he utilizado yo misma en el diseño de esta web :-)
Kit UI para diseños corporativos
Un diseño muy limpio de interfaz de usuario para un background de un color gris claro. El PSD está bien estructurado en diferentes capas con nombres significativos para encontrar cada elemento. Un diseño muy profesional.
Showdown UI kit
Excelente y muy completo kit para generar buenas experiencias de usuario. Incluye muchos tipos de elementos, desde menú de navegación, a calificación por estrellas, vídeo..
Blugraphic Dark UI Kit (gratis)
Este kit UI es gratis y contiene más de 30 elementos. Ideal para diseños sobre fondos gris oscuro. Incluye archivo PSD.
Ultimate UI
Otro de los kits que tuve en cuenta para esta web, aunque finalmente me decidí por el color azul y no el verde. Es un kit muy completo que incluye calendario, tabla de precios y mucho más.
Flat UI kit (gratis)
UI kit gratuito para zonas de widgets o sidebars.
UI kits para apps
iOS App GUI kit
Este kit es excelente para diseñadores de aplicaciones especialmente pensadas para iOS. Incluye 5 archivos PSD, cada uno con un esquema de color diferente. Los elementos están organizados en capas, un kit muy bien valorado por la comunidad online.
UI kit para iPad
Este kit es ideal si estás desarrollando una aplicación para el iPad. Preparado para dispositivos retina, contiene un archivo PSD con elementos vectoriales.
Light UI
Útil tanto para el diseño de apps como para sitios web en que necesitamos este tipo de elementos gráficos para, por ejemplo, mostrar nuestras competencias o el grado de evolución de un proyecto. Muy buenos acabados.
Interfaz móvil completa
Completa interfaz móvil para diseño orientado a smartphones. Fácil de editar los colores y con archivos para Photoshop y Fireworks.
UI para smartphones
Interfaz de usuario para smartphones. Contiene varias pantallas para el desarrollo de una app completa.
Flat UI kit 2 (gratis)
Para terminar…
¿Qué opinas sobre pagar por elementos gráficos? ¿Eres de los que los desarrolla desde cero o de los que prefieren hacer uso de estos recursos? Deja un comentario.
Comentarios
Marco A. García Guerra
Todo depende de lo que quieras hacer. Yo en lo personal opino que pagar por algo bien hecho y que te ahorrará tiempo. Siempre será una buena inversión.
Sandra
Hola Marco, yo pienso igual que tú. A partir de aquí si es un cliente que espera oro a precio de plata, entonces busco recursos gratuitos.
jose luis iñigo
Muy buena entrada. Encontré tu página hace un par de meses por casualidad y la verdad que todos los artículos que he visto por facebook me han encantado.
Soy informático y por circunstancias me he tenido que meter algo más de lleno en las webs.
En algún curso vimos la maquetación pero claro todo era a mano, algo tedioso y casi más fácil ir haciendo el css a mano. Los recursos que das son psd si no me equivoco, el programa que dices que pasa de psd a css ¿enserio funciona? ¿Podrías poner algún pequeño ejemplo con una imagen y su resultado en css? Gracias.
Sandra
Hola Jose Luis, a mí me ha funcionado, aunque para “Beve & Emboss” no hay equivalente en CSS. Un ejemplo? Te pongo uno de mi propia experiencia. Descargué el Black Kit que aparece en esta lista de recursos para crear el textarea del footer de esta web. CSS Hat generó este código (lo puedes ver con Firebug):
A mí me ha funcionado bien, ya te digo, para temas de “Bewel & Emboss” no funciona y otra pega es que sólo funciona a nivel de capas, no de carpetas, pero aún así a mí me ha ayudado a agilizar el proceso. Un saludo!