Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Prototyping
Webdesign

Создаём Lo-fi UI прототип за 60 секунд

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

Russian (Pусский) translation by Anton Lisovsky (you can also view the original English article)

Давайте создадим Lo Fi прототип, за шестьдесят секнуд, используя MadKit Sketch UI kit с Themeforest!

Смотрим скринкаст

Как это сделать

В копии файла MadKit Sketch создайте новую страницу (Lo-Fi UI). Перейдите в Insert > Symbols > Base > Shapes > Window чтобы создать нове окно браузера для вашего макета.

Shapes
Формы (Shapes) > окно (window)

Также под формами (Shapes) возьмите шапку браузера и дайте вашему прототипу подходящее имя.

Контент - Король

Теперь мы собирём контент нашего прототипа используя символы, которые можно найти в Категориях (Categories), начнём с фона для видео. Далее мы добавим листинг продуктов, слайдер с отзывами, после этого покажем последние посты блога, добавим информацию о людях в нашей компании, и в завершении добавим контактную информацию.

Тяя-нем

Растяните ваш window object так чтобы он подходил под контент

stretch window
Растяните форму окна

Теперь выберите все шесть кусочков контента, нажмите правую кнопку мыши в меню слоёв, и выберите отсоединить от символа (Detach from Symbol). В объекте фон видео (Video BG) спрячьте Base/Shapes/window и укажите радиус фону видео - 0.

А теперь мы спрячем форму окна для каждого второго кусочка контента, после чего для всех оставшихся кусочков мы уберём границы и поставим радиус 0.

Наконец, возьмите окно браузера вместе с символом шапки и перетащите их наверх.

Мы закончили

Вот так мы создали lo-fi UI прототип за шестьдесят секунд! Обязательно проверьте другие прототипы для Sketch на Themeforest:

wireframe Sketch app templates
Wireframing Шаблоны для Sketch app на 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.