Spanish (Español) translation by Javier Salesi (you can also view the original English article)
Crear una interfaz de usuario coherente para tu próxima aplicación es una parte muy importante del proceso del desarrollo. ¿Por qué? Bueno, la interfaz de usuario es la manera en que las personas interactuarán con tu aplicación, contenido y servicios. Es la manera en la que un espectador se convierte en usuario. Y sin una interfaz de usuario intuitiva y funcional, es mucho más difícil llegar a potenciales clientes.
Por suerte si utilizas Sketch, no tienes que recorrer tú solo este proceso de creación de interfaz de usuario. Hay un montón de kits de interfaz de usuario para Sketch disponibles en Envato Elements que pueden ahorrarte mucho tiempo y esfuerzo.
¿Qué es un kit de interfaz de usuario para Sketch?
Sketch es una herramienta de diseño basada en vectores que tiene como su principal propósito el diseño de interfaz de usuario. Te permite planear la totalidad de la interacción de un usuario con tu aplicación (o incluso con tu sitio web) principalmente mediante el uso de Artboards (mesas de trabajo). Los artboards te permiten mostrar interacciones, diálogos y estados en un lugar.
Los kits de interfaz de usuario para Sketch que puedes descargar gratuitamente o comprar, incluyen diseños preelaborados de interacción del usuario, los cuales pueden ser cargados como bibliotecas dentro de Sketch.
19 kits de interfaz de usuario para Sketch en Envato Elements
Ya que hemos comprendido y apreciado qué son los kits de interfaz de usuario para Sketch, ¡ahora podemos tener la parte divertida! Esta es nuestra colección de 19 diferentes kits que puedes encontrar en Envato Elements, un servicio que mediante el pago de una suscripción mensual proporciona acceso a miles de recursos incluyendo kits de interfaz de usuario, temas de WordPress, imágenes de stock y más.
1. Kit Grace creado por uispot
Si buscas algo minimalista, el kit Grace de interfaz de usuario es una buena elección. Ofrece diseños sencillos que caen en categorías clave incluyendo formularios, navegación, comercio electrónico, encabezados, blogs, medios de comunicación y guía de estilo. Sin embargo, puedes usar cada elemento como quieras para iniciar tu próximo proyecto.
2. Kit Portland creado por craftworkdesign
El kit Portland es otra elección destacada, mostrando un aspecto minimalista pero elegante. Incluye siete categorías de elementos, Google Fonts, muchísimos elementos base y una cuadrícula de 12 columnas al estilo del framework bootstrap. También es descrito como "pixel perfect" asegurando que cualquier cosa que vayas a crear con este kit aparecerá limpia y organizada.
3. Kit Amber creado por webhance
Otra opción es el kit Amber, otra opción minimalista pero que enfatiza un diseño más moderno y flexible. Tiene el aspecto adecuado para utilizarse en aplicaciones profesionales y sitios web, además de incluir elementos para encabezados, historias, portafolios, blogs, testimonios, tablas de precios, pies de página y más. Igualmente incluye Google Fonts e íconos en formato SVG. Contiene una versión clara y otra oscura.
4. Kit Neumorphic creado por cerpow
El kit Neumporphic tiene un aspecto interesante que lo hace atractivo para cualquier cantidad de proyectos. Incluye 26 diferentes elementos originales que puedes aplicar inmediatamente a tus proyectos como menús desplegables, botones de radio, sliders, flechas y más. El aspecto general es tridimensional, proporcionando una experiencia de botón tangible para pantallas táctiles.
5. Kit Trave creado por kkuistore
Y luego tenemos Trave, descrito como un kit de interfaz de usuario que incluye 30 distintos diseños de pantalla, Google Fonts y una variante clara y otra oscura. También viene con un conjunto de íconos con estilo de Material Design, elementos base y los archivos de Sketch están bien organizados. Las pantallas incluyen cosas como mapas, calendarios, reseñas, formularios de contacto y más.
6. Kit Dashboard creado por uiuxassets
Otra opción es el kit Dashboard, que puede usarse para proyectos orientados a computadoras de escritorio o dispositivos móviles. Viene con diseño responsivo, versión clara y oscura, una guía de estilo consistente, pantallas de registro e inicio de sesión, íconos, ilustraciones y una variedad de otras pantallas que sirven de guía a través de la experiencia del usuario.
7. Kit Brake creado por panoplystore
Otra opción a considerar es el kit Brake, que viene con 60 opciones de pantallas de dispositivos móviles para elegir. Clasificadas en 12 categorías, de seguro encontrarás la combinación adecuada para diseñar una IU (interfaz de usuario) para tus visitantes.
8. Kit Dashboard Info creada por Qo7
Otra opción es el kit Dashboard Info. Ofrece un diseño moderno que en verdad es más bien simple, pero puede ser bueno. A veces, todo lo que necesitas es una IU sencilla para guiar a los visitantes a través de un proceso definido. Algunas cosas notables que se incluyen son formularios de inicio de sesión, estados activos y modales. Podría utilizarse fácilmente para una aplicación relacionada con la tecnología, negocios o la salud.
9. Kit Marnie creado por royalzdotstore
Si necesitas una interfaz de usuario para una aplicación de comercio electrónico, el kit Marnie es una fantástica elección. Ofrece una experiencia muy completa para el cliente minorista con 21 diferentes diseños de pantalla y 150 elementos para elegir. Los archivos están estructurados en capas y son personalizables, además puedes crear rápidamente una experiencia de compra minimalista para tus clientes.
10. Kit Web creado por spacestudios
Y tenemos también el kit Web, que es una verdadera potencia en términos de opciones ofrecidas. Viene con más de 40 diferentes bloques personalizables que abarcan 15 distintas categorías relacionadas directamente con el turismo y las industrias enfocadas en los viajes. También viene con un sistema de diseño que ahorra tiempo considerable en la actualización.
11. Kit Prisma creado por hangouts
Quizá el kit Prisma es más tu estilo, proporcionando diferentes pantallas de iOS para elegir con el objetivo de crear el definitivo diseño de una aplicación. Tiene una sensación decididamente moderna, con elementos que van desde páginas de inicio de sesión, navegación, perfiles, mapas, seguimiento y mucho más. Los archivos están adecuadamente estructurados en capas, facilitándose la edición y también puedes modificar los estilos del color con pocos clics.
12. Kit Profiles iOS creados por buydesign
Si estás buscando un kit de interfaz de usuario para Apple en particular, el kit Profiles iOS es una excelente opción. Viene con cuatro diferentes plantillas iOS, 520 íconos, una cuadrícula de 8px, dos fuentes gratuitas y archivos vectoriales bien organizados que puedes personalizar de acuerdo a tus necesidades.
13. Kits Dashboard Page creado por DimoGraphic
Otra opción es Kits Dashboard Page, que ofrece varias pantallas para crear vistas de dashboard o escritorio en sitios web y en aplicaciones móviles. Viene con archivos vectoriales que puedes personalizar, y también incluye una gran cantidad de íconos. Sería ideal para aplicaciones de seguimiento en el sector financiero, de acondicionamiento físico, de negocios y mucho más.
14. Kit Blog Template creado por betush
Si quieres utilizar Sketch para crear un diseño de blog, el kit Blog Template es la elección obvia. Viene con plantillas fáciles de usar, elementos de IU, fuentes e íconos y todas las capas, fuentes y colores son totalmente personalizables.
15. Kit de interfaz de usuario Course - Nuzie creado por GranzCreative
Ahora, si quieres crear un curso online o aplicación para el sector educativo, el kit Course es una opción destacada. Proporciona pantallas de dashboard o escritorio que podrían ser adaptadas para maestros, para dar clases online, webinars y más. Está lleno de componentes de dashboard, plantillas de páginas, fuentes y un diseño responsivo y moderno listo para pantallas de retina.
16. Kit Finance Dashboard creado por burdurstudio
Si estás trabajando en una aplicación relacionada con la industria de finanzas, el kit de interfaz de usuario Finance Dashboard es una elección que vale la pena. El estilo del diseño es interesante y divertido, mientras mantiene una sensación de profesionalismo. Viene con dos estilos de diseño, muchísimos elementos y es totalmente personalizable para que lo ajustes a tus necesidades.
17. Kit ARON WEB creado por Iaaqiq
Otra opción es el kit AAron Web, que está orientado específicamente para diseñar prototipos de sitios web. Viene con 280 elementos que abarcan nueve diferentes categorías y un modo claro y otro oscuro. También incluye una guía de estilo que puedes utilizar para realizar personalizaciones.
18. Lesta - Kit Real Estate creado por noansatudio
Y tenemos Lesta, un kit de IU enfocado en el sector inmobiliario que puede utilizarse para aplicaciones y diseño de sitios web. Viene con 25 pantallas diferentes y es completamente personalizable, además de poder escalarlo para trabajar con cualquier diseño que tengas en mente. Viene con pantallas específicas para el sector inmobiliario pero puede adaptarse a casi cualquier ámbito.
19. Foodnow - Kit de IU para Sketch creado por angelbi88
El último de nuestra lista es el kit Foodnow, diseñado para restaurantes, aplicaciones de comida y otras industrias relacionadas con la gastronomía. Es un conjunto de interfaz de usuario que viene con 22 diferentes pantallas, cada una bien estructurada en capas y con magnífica organización para una fácil personalización. También viene con más de 100 elementos de IU y Google Fonts gratuitas.
Recursos útiles de Sketch para impulsar tu desarrollo
Tener el kit de interfaz de usuario para Sketch es una ayuda significativa. Sin embargo, no siempre podría ser suficiente para que avances. Por ello, tener un puñado de recursos para Sketch disponibles podría darte el impulso que necesitas. Primero, exploremos algunos kits de interfaz de usuario gratuitos para los que tienen un presupuesto limitado. Y luego podemos considerar tutoriales y recursos disponibles para aprender más.
5 kits de interfaz de usuario gratuitos para Sketch
Si estás buscando un kit de interfaz de usuario gratuito para Sketch, estos son algunos que cumplen la función bastante bien.
1. Kit de interfaz de usuario gratuito para Sketch
Este kit de interfaz de usuario gratuito para Sketch está disponible en Dribbble y proporciona un diseño estilizado y colorido que inmediatamente llama la atención. Este diseño es muy completo pues incluye desde encabezados hasta pestañas y perfiles.
2. Kit Android Lollipop
Otra opción es el kit Android Lollipop, que ofrece una serie de estilizados diseños que puedes utilizar cuando estás creando una aplicación basada en Android. Los diseños de pantallas son coloridos e intuitivos, ofreciendo una experiencia de usuario mucho más placentera para cualquiera que descargue tu aplicación.
3. Sketch Elements
Elements es un kit de IU gratuito ofrecido por los mismos creadores de Sketch. Está diseñado para iOS y simplifica en gran medida el proceso de comenzar la elaboración de diseños en Sketch. Viene con 35 pantallas, 45 íconos y 175 símbolos. También permite la completa personalización de colores, fuentes y símbolos.
4. fitgoal - Íconos de acondicionamiento físico y componentes de diseño
Si quieres crear una aplicación relacionada con el acondicionamiento físico, puedes utilizar fitgoal, un kit elaborado por InVision. Este recurso gratuito viene con 30 pantallas, 26 íconos y más de 170 componentes diferentes que puedes combinar para crear tu aplicación ideal de acondicionamiento físico. Viene con íconos, hojas de estilo y más.
5. Kit Scratch
Por último, tenemos el kit Scratch. También ofrecido por InVision, es flexible pero enfocado en aplicaciones de restaurantes o comida. Tiene una gran cantidad de pantallas relacionadas con recetas e ingredientes. Viene con tres tamaños de artboards, 10 pantallas y más de 100 componentes haciendo que su personalización sea sencilla.
Tutoriales y cursos de Sketch
Mientras consideras recursos para crear diseños en Sketch, nunca es mal momento de practicar algunos tutoriales y también cursos online. En los últimos años hemos escrito bastantes que valen la pena tomar en cuenta.
Tutoriales para crear tipos específicos de aplicaciones en Sketch:
SketchCómo diseñar la interfaz de usuario de una aplicación de acondicionamiento físico en Sketch
SketchCómo diseñar una interfaz de usuario de una aplicación de automóviles
SketchCómo diseñar en Sketch una interfaz de usuario de una aplicación para ordenar comida desde el iPad
SketchCómo diseñar el proceso de registro de una aplicación de finanzas en Sketch
SketchCómo diseñar la pantalla de inicio de sesión en una aplicación de viajes utilizando Sketch
SketchCómo diseñar la interfaz de usuario de una aplicación de gestión del dinero utilizando Sketch
Cursos para aprender cómo usar Sketch, desde tutoriales de principiante y guías de startups hasta recursos más exhaustivos:
SketchNuevo curso: Trabajando fluidamente con Sketch
Diseño web responsivoConsejos y trucos para un proceso de diseño responsivo en Sketch
SketchCómo elaborar archivos de Sketch amigables con el usuario y reutilizables
Y estos también deberías considerar:
Mejora el desarrollo con recursos y kits de interfaz de usuario con Sketch
Crear una aplicación o un diseño web en Sketch podría ser una tarea desalentadora si nunca has utilizado el software. Sin embargo, con un cierto dominio de los kits de interfaz de usuario para Sketch, es difícil equivocarse. Afortunadamente, esta colección de kits de interfaz de usuario te ofrece muchas opciones para comenzar. Y los freebies y tutoriales adicionales aumentan tu aprendizaje. ¡Mucha suerte!
