Blog de Diseño Web. Cursos Online

Mejora la experiencia de usuario con estos recursos gráficos

recursos-gratis

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.

ui kits

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.

ui kits

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.

ui kits

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.

ui kits

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 kits

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.

ui kits

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 :-)

09_blackui_kit

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.

ui kits

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..

ui kits

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.

ui kits

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.

ui kits

Flat UI kit (gratis)

UI kit gratuito para zonas de widgets o sidebars.

flat-ui-sm

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 kits

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.

ui kits

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.

ui kits

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 kits

UI para smartphones

Interfaz de usuario para smartphones. Contiene varias pantallas para el desarrollo de una app completa.

ui kits

Flat UI kit 2 (gratis)

flat-ui-sm

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):

       border: 1px solid #0f0f0d; /* stroke */
  -moz-border-radius: 4px / 2px;
  -webkit-border-radius: 4px / 2px;
  border-radius: 4px / 2px; /* border radius */
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box; /* prevents bg color from leaking outside the border */
  background-color: #191816; /* layer fill content */
  -moz-box-shadow: inset 1px 2px 3px rgba(0,0,0,.25); /* inner shadow */
  -webkit-box-shadow: inset 1px 2px 3px rgba(0,0,0,.25); /* inner shadow */
  box-shadow: inset 1px 2px 3px rgba(0,0,0,.25); /* inner shadow */
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSI1MCUiIHkxPSIxMDAlIiB4Mj0iNTAlIiB5Mj0iLTEuNDIxMDg1NDcxNTIwMmUtMTQlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMCIgc3RvcC1vcGFjaXR5PSIwLjAzIi8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZiIgc3RvcC1vcGFjaXR5PSIwLjAzIi8+CiAgIDwvbGluZWFyR3JhZGllbnQ+Cgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0idXJsKCNoYXQwKSIgLz4KPC9zdmc+); /* gradient overlay */
  background-image: -moz-linear-gradient(bottom, rgba(0,0,0,.03) 0%, rgba(255,255,255,.03) 100%); /* gradient overlay */
  background-image: -o-linear-gradient(bottom, rgba(0,0,0,.03) 0%, rgba(255,255,255,.03) 100%); /* gradient overlay */
  background-image: -webkit-linear-gradient(bottom, rgba(0,0,0,.03) 0%, rgba(255,255,255,.03) 100%); /* gradient overlay */
  background-image: linear-gradient(bottom, rgba(0,0,0,.03) 0%, rgba(255,255,255,.03) 100%); /* gradient overlay */
  text-shadow: 0 -1px 0 rgba(0,0,0,.75); /* drop shadow */

      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!