Learn UI Design

Dive into the art of UI design. Read these tutorials to master color theory, layout, typography, and more. Create stunning user interfaces that delight users.

All UI Design tutorials:

Filters

Prototyping

Creando un prototipo interactivo con un recorrido de un producto para iOS con Framer.js

Tutorial • Intermediate

Framer.js y el ecosistema que lo acompaña Framer Studio son excelentes herramientas para componer, presentar e iterar sobre el diseño interactivo. En esta...

Nick Bewley • 17 Nov 2014
UI Design

Un vistazo a la próxima Foundation para aplicaciones

Tutorial • Beginner

ZURB siempre está trabajando en la próxima gran herramienta para ayudar a los diseñadores web y desarrolladores por igual. Hacen que nuestros días de...

Mark Teekman • 12 Nov 2014
HTML

Nuevo curso: Iniciando con la IU semántica

Tutorial • Beginner

La interfaz de usuario semántica es un marco de trabajo bien elaborado con características profesionales y una API robusta. En "Iniciando con la IU...

Andrew Blackman • 16 Oct 2014
UI Design

Comprendiendo las opciones de exportación de Sketch

Tutorial • Beginner

Exportar contenidos a partir de nuestros diseños es una tarea rutinaria y muy habitual. Empezamos creando nuestros elementos y gráficos y terminamos...

Armando Sotoca • 8 Oct 2014
UI Design

Cómo crear botones en Photoshop y Adobe Muse

Tutorial • Beginner

En este tutorial te mostraré cómo crear un botón en Photoshop y usarlo, con todos sus estados, en un proyecto de Adobe Muse. Una vez que hayamos diseñado...

Michael Chaize • 24 Sep 2014
Forms

Sketch para principiantes: diseño de la interfaz de un formulario de login

Tutorial • Beginner

Sketch, creado por los chicos de Bohemian Coding, es un programa excelente para el diseño de interfaz. Este tutorial pensado para principiantes, te...

Armando Sotoca • 18 Aug 2014
UI Design

Consejo rápido: navegación pegajosa, sin el incómodo salto

Tutorial • Intermediate

La «navegación pegajosa» es una barra de navegación que parece adherirse a la parte superior de la página una vez que el usuario empieza a desplazarse....

Adi Purdila • 28 Jul 2014
UI Design

Cómo diseñar un portafolio sencillo basado en Instagram en Photoshop

Tutorial • Intermediate

En este tutorial te guiaré a través del proceso de creación de un portafolio simple y limpio basado en Instagram. Utilizaremos imágenes llamativas, una...

Tomas Laurinavicius • 30 Jun 2014
HTML

Crear un efecto de fondo enmascarado con CSS

Tutorial • Beginner

Hoy vamos a crear paso a paso una técnica realmente asombrosa que puedes usar como un efecto muy parecido al desplazamiento parallax, sin usar nada de...

Kezz Bracey • 29 May 2014
UI Design

Como Crear una Barra Reducida y Ajustada en la parte superior con Foundation

Tutorial • Intermediate

Una tendencia muy común estos días es el uso de una navegación fija, la cual se reduce para volverse menos molesta a medida que los usuarios se desplazan...

Mark Teekman • 21 May 2014
Web Typography

Diseñando una elegante presentación de Blog en Photoshop

Tutorial • Intermediate

En este tutorial te mostraré cómo crear un diseño de blog simple y elegante en Photoshop. Usaremos una imagen fuerte por encima del doblez (donde quiera que...

Tomas Laurinavicius • 16 May 2014
UI Design

Diseñar un Elegante Página de Portafolio en Línea de Tiempo utilizando Photoshop

Tutorial • Beginner

En este tutorial usaré Photoshop CS6 para diseñar una sencilla, limpia, página de portafolio de tres columnas con una línea de tiempo de tendencia. Durante...

Tomas Laurinavicius • 22 Jan 2014