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

Crie Protótipo Lo-fi de UI em 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

Portuguese (Português) translation by Erick Patrick (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.

Shapes
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 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 templates
Modelos de Protótipos para Sketch no Themeforest
Advertisement
Advertisement
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.