Как создать макет сайта (mockup, мокап)

Автор German Usachev
Как создать макет сайта (mockup, мокап)

Всем привет на связи.

Рустам назипов в этом видео я расскажу вам о самом простом способе создать такой проект своей страницы которые уже в дальнейшем надо либо дизайнером либо уже самому по нему сверстать красивую страницу. Для этого нам понадобится сервис mockup vk.com после того как мы в нём перед собой. Примерно вот такую вот картинку такое рабочий стол где слева существует куча различных там функции которые мы будем пользоваться непосредственно рабочую область который будет показывать результат скажу сразу основной вопрос который все сдают.

Как сделать область бабушка вот внизу хватайтесь за такой кокаиновом будет и так сразу.

Мы будем по образцу например как вот сделать макет вот такой вот страничке всё очень просто посмотрим какие здесь есть элементы всего давайте мы добавим чтобы всё было красиво элемент в виде браузера от он то есть окошко как будто бы мы в самом браузере мы элемент переносим на работе область изменяемый размер так как нам надо вверх вниз вправо влево хотите вот так чуть позже сделаю — это элементу не функционального. Нам нужен просто по красоте при двойном клике на элемент вы переходите в его там редактирование например. Давайте with Another и адрес сайта тот элемент который мы вводим — это элемент декоративный чтобы было видно как будто мы смотрим. Что здесь есть заголовок и подзаголовок. А давайте — это отобразим мы не пугайтесь того, что очень большое количество функционала мы будем использовать только то, что нужно элементы вот он перед вами называется. Едем мы опять левой кнопкой тонкие перетаскиваем он сюда так и пишет заголовок вот этот элемент заголовок мы можем его переносить обратить внимание там основные направляющие по центру, а не подсвечиваются можно сделать так чтобы пациента при двойном щелчке на элементной переходим в его редактирования при одинарном, а мы переходим к редактированию его параметров. Витя цветом размер. Ну и так далее отредактировали размер. А5 посередине поставили подзаголовок также. Вот так вот переносим напиши тут подзаголовок можно писать какой-то длинный текст либо сразу тех которые у вас есть непосредственно уже заготовлено. Да чтобы было сразу понятно. Ну мы делаем универсальный шаблон поэтому я вообще просто подзаголовок элемент текста дальше, что у нас здесь есть есть слева описание также. Давайте его вытащим тоже делаем описание. Можно также там какие-то сделать танк красного сделаем сделали да. И следующий элемент — это картинка изображение мы ищем изображения. Вот она тут в виде пейзажа также хватаем переносим и собственно растягиваем увидим, что нам уже них место поэтому я увеличиваю. Оля вот мы сделали картинку любой до пропорции какой нам надо видим справа элемент уже форма непосредственно для этого мы воспользуемся элементом прямоугольник область от формы видим, что есть какой-то текст о любви кнопка чтобы написать какую-то большой текст тут есть помимо заголовку элемент параграф лорем ипсум. Да — это стандартная заготовка текста мы переносим не пугаемся дважды кликаем и. Шут текст мотивирующий. Заполнить форму так сделали уменьшили возможно имеет смысл перевести на островах вот если надо так же там сделали по центру например изменили размер и так далее перенесли непосредственно элемент формы — это поле для ввода и кнопка находим вот — это вот. Джон Да — это поле для ввода для ввода email тоже как угодно его по размеру делаем и кнопочка. Да вот — это сабмит моё делаем сюда. Аней можем кликать также два раза писать тут отправить пример. Да, а также изменяется размеры положениям стандартов отправить отдашь. У нас есть мотивация скачали уже столько. Тарас Давайте сделаю заголовком скачали уже 1000000 раз меняем размер свечей не будем рисовать. Давайте рисуем так чтобы нарисовать таймер нам опять надо например какую-то какой-то заголовок, что заголовок таймером непосредственно сам таймер. Давайте вот так вот сделаем, а сделай нужного нам размером. Давайте дел округлую него уголки можно пожирнее сделаем эту штучку и. Давайте напишем, что — это таймер. Да сделаем сноску есть такой Elements новости чтобы люди понимали тех кто, что что планируется нарисовать вообще. Вот — это с носком её до пишем — это таймер давайте сделаем чтобы она вот так вот да показывал. На таймер непосредственно поменьше и. Давайте залью мою жёлтую вот. Ну и, что у нас ещё политика конфиденциальности давайте так обидеть она не помещается мы её продолжим вот эту штучку и ставим политику конфиденциальности Nokia. Вот — это давайте сделаем намного меньше. поставили в принципе вот наш наш макет готов если вам нужно какую-то группу элементов перенести. Вы прямо выделяйте их получилось вы выделяете их шестом либо просто мышкой всё выделяете и спокойненько переносится туда. Куда вам надо вот, что дальше делать если у вас есть. Макет с ним поделиться людьми, а тут вот наверху есть кнопочка. Шэрон превью поделиться и при просмотре нажимаете. У вас есть несколько вариантов во-первых скопировать ссылку и отправить её кому-то. Да вот прямо вставляем и человек приходя по этой ссылке увидят вот ваш мать. Даже если он не зарегистрирован и так далее либо же вы можете сделать проще нажать экспорт и в нужный вам формат например в картинку компьютер будет происходить экспортирование достаточно быстро происходит.

0 комментариев
0

Читайте также