Tutorial de Sketch: diseño de UI y UX

Idioma: Alemán

Tutorial de Sketch: conviértete en diseñador de UI y UX

Sketch es una herramienta eficaz e intuitiva que puedes utilizar para crear prototipos de proyectos web. Con ella puedes crear interfaces de usuario dinámicas para sitios web y aplicaciones. Una ventaja clave: como los diseños se basan en reglas de diseño web, puedes entregar al desarrollo un resultado directamente realizable. Conozca Sketch en este tutorial de cinco horas de Luca Kiedrowski, que le llevará del concepto al prototipo y a la interfaz web completamente diseñada de forma práctica.

Conviértete en diseñador de UI y UX: crea interfaces de usuario para sitios web y aplicaciones con Sketch
Para empezar rápidamente: aprende los conceptos básicos de Sketch, diseño de UI y UX.
Para su progreso: Aprende técnicas avanzadas de diseño como los operadores booleanos
Tutorial práctico: Crear una interfaz de usuario moderna utilizando una aplicación como ejemplo
Mejor juego en equipo con los desarrolladores: proporcióneles directamente prototipos desarrollables
Comprender los conceptos de interfaz de usuario y experiencia de usuario en 5 horas: el formador Luca Kiedrowski muestra ejemplos de buenas prácticas
Así que lo que has aprendido se queda en tu cabeza: Incluyendo materiales de trabajo para unirte a

Google y Apple también confían en Sketch: hazlo como los grandes y aprende ahora a crear diseños de interfaz de usuario sencillos, bonitos y fáciles de usar, que además estén listos para el desarrollo.

detalles

Puede utilizarse con:
Contenido: 5 h Formación en vídeo
Licencia: privada y comercial Derechos de uso
Extra: material de trabajo incluido

Categorías

Diseño (ilustración, maquetación e impresión)

Creado con amor por:

Luca Kiedrowski

Ejemplos de aplicación

Smartphones con una aplicación cuyo diseño se desarrolló en Sketch

Abrir galería

Ejemplo: En el tutorial, se crea una aplicación desarrollable con la ayuda de Sketch.

Smartphone con una aplicación cuyo diseño se desarrolló en Sketch

Abrir galería

Ejemplo: Su formador le da consejos y trucos sobre el diseño moderno de UX y UI.

Introducción

Gratuito

Tutorial de Sketch: 1.1 Introducción

Bienvenido al tutorial de Sketch: aprende a diseñar tus propias aplicaciones utilizando el programa. Aquí tienes un resumen del curso.

Descargar el archivo del proyecto

Gratuito

Tutorial de Sketch: 1.2 ¿Qué es Sketch?

Una breve introducción al programa "Sketch" y cómo acceder a él.

Tutorial de Sketch: 1.3 Interfaz del programa

Aquí conocerás mejor Sketch. Te mostraré el programa completo y aprenderás a trabajar con él de forma eficaz.

Tutorial de Sketch: 1.4 Herramientas

Sketch no sería un programa tan bueno si no pudieras utilizar herramientas. Aquí puedes descubrir cómo añadir estas herramientas.

Tutorial de Sketch: 1.5 Los plugins más importantes

Los plugins te ayudan a trabajar mejor y más rápido con Sketch. Te mostraré qué plugins pueden ayudarte mejor.

Tutorial de Sketch: Instalación de las bibliotecas 1.6

Las bibliotecas le permiten transferir diseños estandarizados de Apple o Android directamente a su proyecto.

Sketch: 1.7 InVision

InVision es una herramienta que facilita mucho tu proyecto de Sketch. En ella puedes crear "wireframes" para estructurar tu proyecto.

Principios de diseño

Tutorial de Sketch: 2.1 Colores

Los colores te ofrecen la oportunidad de llenar de vida tu aplicación. He aquí una breve introducción al mundo de los colores.

Tutorial de Sketch: 2.2 Fuentes

La red social "Medium" muestra hasta qué punto las fuentes pueden influir en la experiencia del usuario. Las fuentes de tu aplicación pueden ser muy importantes.

Crear prototipos

Tutorial de Sketch: 3 Creación de prototipos

Empecemos ahora con la aplicación propiamente dicha.

Diseño de pantalla

Tutorial de Sketch: 4.1 Pantalla de inicio y plantillas de diseño

Ahora pasemos a nuestro proyecto real y empecemos con la pantalla de inicio. También aprenderás cómo podemos crear plantillas de diseño.

Tutorial de Sketch: 4.2 Crear grupos y estilos de texto

En esta lección, aprenderá a crear grupos y guardar estilos de texto para ahorrar tiempo.

Tutorial de Sketch: 4.3 Encontrar, crear y personalizar iconos

Los iconos son una parte importante de una aplicación. En este vídeo aprenderás dónde encontrar los mejores iconos y cómo integrarlos en tu proyecto.

Tutorial de Sketch: 4.4 Diseñar chat, trabajar con capas

Ahora pasemos al chat de nuestra aplicación. Allí trabajamos con capas, que también deberías usar para ahorrarte tiempo.

Tutorial de Sketch: diseño del iPhone X 4.5

El iPhone X ha cambiado mucho en el diseño de apps. Ahora los diseñadores tienen que trabajar con una nueva forma de pantalla. Descubre aquí los aspectos básicos.

Sketch: 4.6 Perfil de usuario, efecto de desenfoque

Puedes utilizar efectos para dar a tu aplicación un diseño interesante. Usamos el efecto de desenfoque en tu perfil de usuario.

Tutorial de Sketch: 4.7 Utilizar el diseño como herramienta

En este vídeo aprenderás a utilizar el diseño como herramienta para perfeccionar tu aplicación.

Tutorial de Sketch: 4.8 Uso de bibliotecas y creación de hojas de acción

Ahora usamos la librería iOS para construir una hoja de acción. Las bibliotecas no solo te ahorran tiempo a la hora de diseñar, sino también durante el desarrollo.

Proporcionar diseños

Sketch: Proporcionar 5 diseños en InVision

Si su aplicación va a ser desarrollada, los desarrolladores necesitan sus diseños. En esta lección aprenderás a proporcionar tus diseños a InVision.

Proporcionar información importante

Sketch: 6 Insertar ayuda en la aplicación

A menudo, los usuarios de la aplicación no encuentran los botones adecuados o tienen otras preguntas que no resultan evidentes. Por eso hemos creado una sección de preguntas y respuestas.

Diseño profesional

Tutorial de Sketch: 7.1 Crear gráficos de diseño plano

Si tiene plazos muy ajustados para sus proyectos, a menudo no tiene tiempo de diseñarlo todo usted mismo. Aquí puedes averiguar cómo y dónde conseguir ayuda.

Tutorial de Sketch: 7.2 Rediseño del hogar

Todavía tenemos mucho que mejorar en la pantalla de inicio. Por eso estamos rediseñando nuestra primera pantalla.

Tutorial de Sketch: 7.3 Experiencia de usuario en el proceso de compra

El proceso de compra de un usuario debe desarrollarse sin problemas, ya que es uno de los momentos más delicados del flujo de usuarios.

Innovaciones en Sketch.

Tutorial de Sketch: 8 Creación de prototipos en Sketch

En la nueva versión de Sketch, tienes la opción de crear un prototipo directamente en Sketch.

Detalles del contenido

Comprender el diseño de UI y UX móvil e implementarlo con Sketch
Ya sea una aplicación, un sitio web o un blog, da vida a tu concepto de UI y UX con Sketch. En este tutorial en vídeo de cinco horas de duración, impartido por el profesor Luca Kiedrowski, aprenderás rápidamente todos los aspectos básicos del uso del programa para que poco después puedas empezar a trabajar intensamente en un proyecto de diseño de una aplicación interactiva de muestra .

Por qué deberías ver el tutorial de Sketch

Puedes confiar directamente en una herramienta profesional para el diseño de UI y UX, ya que Sketch también es utilizado por empresas de renombre como Google, Facebook y Apple. Gracias a su funcionamiento intuitivo, puedes aprender rápidamente a utilizar el programa y conseguir resultados presentables en muy poco tiempo.

Tanto si viajas con experiencia en diseño como si no: En general, el tutorial de Sketch es ideal para iniciarse en el campo del diseño UI y UX y, en concreto, para hacer realidad tus propias ideas de diseño de aplicaciones con Sketch. ¡Conceptos básicos y aplicación en uno!

Si ya creas diseños para web e impresión (por ejemplo con Photoshop o Illustrator): Adquiere la capacidad de transferir tus diseños y elementos individuales como iconos o símbolos a diseños de interfaz de usuario dinámicos y listos para el desarrollo. Su experiencia en diseño web es un activo muy (y cada vez más) codiciado para su CV.

Mejora la colaboración con los desarrolladores web: Al utilizar Sketch, preparas interfaces de usuario que ya se basan en reglas de diseño web. Como resultado, entregas al desarrollo diseños que pueden implementarse directamente. De este modo, acortas enormemente el camino desde el concepto y el diseño hasta la aplicación web desarrollada.

Diseño UI y UX con Sketch de la A a la Z

El enfoque principal del tutorial de Sketch se centra en la aplicación práctica del programa, que está disponible en el proveedor en una versión de prueba gratuita. Utilizando el ejemplo del diseño de una aplicación, el formador te guiará paso a paso por todas las fases, desde la creación de un boceto hasta el diseño final de la interfaz de usuario. El tutorial incluye material de trabajo para que puedas ponerte manos a la obra de inmediato:

En primer lugar, dibujarás a grandes rasgos el aspecto que tendrá más adelante la interfaz de usuario de la aplicación. A continuación, trabajarás directamente en el diseño. Crearás la pantalla de inicio, trabajarás con grupos, capas y estilos de texto y seleccionarás los iconos adecuados. Diseñarás un chat, la ayuda y un perfil de usuario, y aprenderás a trabajar con bibliotecas, hojas de acción y efectos. Al final, tendrás un diseño de interfaz de usuario completo a partir del cual podrás incluso crear un prototipo en la actual versión 52 de Sketch.

De antemano, aprenderás los conceptos básicos más importantes de Sketch y del diseño de interfaz de usuario. Te orientarás rápidamente en la interfaz de usuario, conocerás los plugins y herramientas más importantes y sabrás cómo utilizar las fuentes y los colores de forma eficaz. Tu formador también te mostrará cuándo tiene sentido combinar Sketch con InVision, por ejemplo en la fase de wireframing.