Advertisement
  1. Web Design
  2. Prototyping

Crie Protótipo Lo-fi de UI em 60 Segundos

Scroll to top
Read Time: 1 min
This post is part of a series called 60 Second Video Tutorials.
Create a “Coming Soon” Page in 60 Seconds

() translation by (you can also view the original English article)

Criemos um Protótipo Lo-fi, em sessanta segundos, usando o kit MadKit Sketch do Themeforest!

Assistamos o Screencast

Como é Feito

Numa cópia do arquivo MadKit Sketch (Lo-fi UI), criemos uma nova página. Vamos em Insert > Symbols > Base > Shapes > Window para criar uma janela de navegador para nosso modelo.

ShapesShapesShapes
Shapes > Window

Ainda em Shapes, peguemos um browser-header e demos o nome do protótipo.

Conteúdo é Rei

Montemos o conteúdo do protótipo com símbolos achados em Categories (comecemos com um background em vídeo). Depois, adicionemos uma lista de produtos, carrossel de depoimentos, as últimas publicações do blog, informações da empresa, e por fim os detalhes de contato.

Estica-ando

Estiquemos o objeto da janela para encaixar o conteúdo:

stretch windowstretch windowstretch window
Estiquemos a forma da janela

Selecionemos todas peças de conteúdo, cliquemos com o direito no menu de camadas e escolhamos Detach from Symbol. No objeto de Video BG, escondamos Base/Shapes/window e configuremos o raio de Video Background para 0.

Agora, esconderemos a forma da janela para cada duas peças de conteúdo, e nas restantes esconderemos as bordas e configuraremos o raio para 0.

Por fim, peguemos a janela do navegador e os símbolos do cabeçalho, e mova-os para o topo da pilha.

E Pronto

É assim como criamos um protótipo lo-fi de UI em sessenta segundos! Veja o que temos mais a oferecer de prototipação no Sketch no Themeforest:

wireframe Sketch app templateswireframe Sketch app templateswireframe Sketch app templates
Modelos de Protótipos para Sketch no Themeforest
Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
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.