Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Prototyping
Webdesign

Crea un Prototipo UI Lo-fi en 60 Segundos

by
Difficulty:BeginnerLength:QuickLanguages:
This post is part of a series called 60 Second Video Tutorials.
Create a “Coming Soon” Page in 60 Seconds

Spanish (Español) translation by Rafael Chavarría (you can also view the original English article)

¡Vamos a crear un Prototipo Lo Fi, en sesenta segundos, usando el kit MadKit Sketch UI de Themeforest!

¡Mira el Video!

Cómo se Hace

En un duplicado del archivo MadKit (Lo-Fi UI) crea una nueva página. Ve a Insertar > Símbolos > Base > Formas > Ventana para crear una ventana de navegador para nuestra maqueta.

Shapes
Formas > ventana

También bajo Formas toma un encabezado-navegador y después dale un nombre a tu prototipo.

El Contenido es Rey

Ahora ensamblaremos el contenido de nuestro prototipo usando símbolos que pueden ser encontrados bajo Categorías (comienza con un fondo de video). A continuación  agregaremos una lista de producto, un deslizador de testimoniales después de que hemos mostrado las últimas entradas de blog, agregaremos algo de información sobre la gente de la compañía, después terminaremos con algunos detalles de contacto.

Ex-tiende

Extiende tu objeto de ventana de manera que se adapte a tu contenido.

stretch window
Extiende la forma de la ventana

Ahora selecciona seis piezas de contenido, clic derecho en las capas del menú y selecciona Despegar del Símbolo. En el objeto Video BG esconde la Base/Formas/ventana y establece el radio del Fondo de Video a 0.

Ahora vamos a esconder la forma de ventana por cada segunda pieza de contenido, después para las piezas restantes, esconderemos los bordes y fijaremos el radio a 0.

Finalmente, tomaremos la ventana dle navegador y los símbolos de encabezado y los arrastraremos todo el camino hacia la parte superior de la pila.

Terminamos

¡Así es como creas un prototipo UI lo-fi en sesenta segundos! Asegúrate de revisar más de lo que está en oferta para prototipado en Sketch en Themeforest:

wireframe Sketch app templates
Alambrando plantillas de aplicación Sketch en Themeforest
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.