Что такое мокап и с чем его едят

Что нужно знать верстальщику? Какие навыки нужны?

Главные навыки и инструменты верстальщика

Самое главное для верстальщика — знать язык разметки веб-страниц HTML и язык каскадных таблиц стилей CSS. С помощью HTML создается структура страницы, а CSS используется для создания внешнего вида страницы — цветов, размеров, отступов. 

Верстальщику нужно уметь работать с макетами и разбираться в интерфейсах инструментов, в которых они делаются. Чаще всего для создания макетов используются сервис Figma и программа Photoshop (формат файлов, сделанных в Photoshop, — psd, поэтому сделанные в них макеты называют PSD-макетами). Менее распространены Sketch, Zeplin и Avocode.

Интерфейс Figma

Очень важно уметь делать адаптивную верстку — такую, которая будет хорошо отображаться на разных устройствах: десктопах, планшетах, мобильных. Согласно отчету Digital Report 2020, с каждым годом мобильный трафик составляет все большую долю интернет-трафика, и сейчас это число составляет 50,1%

Поэтому без адаптивной верстки сейчас не может обойтись ни один сайт: адаптивность стала обязательным требованием для верстки. Для нее чаще всего используется фреймворк Bootstrap. 

Еще одно частое требование заказчиков — уметь делать верстку PixelPerfect, то есть идеально совпадающую по каждому пикселю с макетом верстку.

Чтобы повысить эффективность своей работы, верстальщику нужно уметь пользоваться инструментами веб-разработки. Это редакторы кода VS Code, Emmet, Sublime Text и инструменты разработчика (Developer Tools) в браузере, которые позволяют просматривать HTML и CSS на странице и отлаживать Javascript на странице.

JavaScript и Jquery

Для успешной работы нужно знать основы JavaScript и Jquery. JavaScript — это язык программирования, который используется в веб-разработке. Он нужен, чтобы делать сайты интерактивными. Jquery — это библиотека JavaScript, упрощающая работу с HTML-документом. Знание JavaScript и Jquery нужно, чтобы подключать к сайту готовые скрипты, виджеты и библиотеки. Например, яндекс-карты или гугл-карты, слайдеры, галереи.

CMS

Еще одно полезное умение – интеграция верстки в CMS. Это также называют «натягиванием» верстки на CMS. 

CMS, или движок сайта — это система управления контентом. С помощью нее удобно создавать новые страницы и наполнять сайт контентом, потому что не нужно редактировать HTML-код — все делается в интерфейсе CMS. CMS позволяет полностью поменять оформление (тему) сайта, при этом не изменив его контент. 

Интерфейс создания новой страницы в WordPress

Популярные плагины WordPress

Интеграция верстки страниц — это добавление сверстанных страниц в CMS так, чтобы можно было менять их содержание через административную панель CMS. Часто также нужна интеграция верстки шаблонов — например, для шаблона поста блога. Один шаблон может использоваться для многих страниц, при этом у них будет одинаковое оформление. 

Рейтинг CMS от iTrack

WordPress написан на языке программирования PHP и использует базы данных SQL. Если захотите специализироваться на WordPress, то стоит изучить PHP и SQL, чтобы разбираться с проблемами, которые могут возникнуть при работе движков. На PHP можно писать плагины к WordPress — эта услуга востребована на фрилансе, написание одного плагина в среднем стоит 8 тысяч рублей.

Современные стандарты HTML5 и CSS3

Верстальщику нужно уметь использовать современные возможности и примеры верстки и знать, что уже устарело. Например, сейчас уже точно не стоит использовать фреймы и верстать таблицами — лучше использовать flexbox и CSS grid. 

А вот новые возможности стандартов HTML5 и CSS3 использовать стоит. К ним относятся семантическая верстка, анимации, трансформации, работа с svg, элементы video, audio и canvas. 

Другое

Верстальщику пригодится знание методологии верстки БЭМ. Повысить эффективность работы ему помогут умение пользоваться системой управления версиями git, препроцессорами CSS (LESS, SASS, SCSS) и инструментом gulp для сборки CSS и автоматизации рутинных задач. 

Знание основ протокола HTTP и сетей не обязательно, но позволит лучше понимать, как работает интернет и как браузеры загружают сайты. Это поможет разбираться в проблемах при работе с хостингом и трудностях, которые могут возникнуть у пользователя при загрузке сайта.

Бесплатные исхоники мокапов

Сделать мокап (mock-up) можно самому, например, в Photoshop, используя бесплатные для коммерческих целей  изображения или воспользоваться специализированными сервисами. Такими как:

• mockuuups.studio  — сервис с огромной базой мокапов, подробнее о котором я пишу ниже
• freemockup.ru — удобный русскоязычный ресурс со ссылками на источники готовых мокапов — PSD  исходников с удобной организацией слоев.
• mockupworld.co — англоязычный сайт с мокапами разной тематики, разбитыми по категориям.
• freepik.com — сток, где так же расположены ссылки на ресурсы с бесплатными PSD исходниками. Есть как бесплатные, так и платные варианты.

Процесс создания

Сам процесс создания довольно сложен и вовсе не рекомендуется новичкам. Следует понять, что в структуру любого мокапа входят такие компоненты:

• смарт-объект (или объекты);
• фоновое изображение;
• эффекты.

Требуется создать необходимые заготовки, которые соответствуют условиям задания. Например, создавая пример того, как будет выглядеть фото после печати, нужно всего лишь добавить соответствующие эффекты (осветление/затемнение и тому подобное). Но проблема в том, что определить эти эффекты на глаз можно только при наличии опыта.

Заготовки для добавления изображения на продукцию содержат аналогичный ряд особенностей. Потому самыми простыми считаются мокапы онлайн логотипов. Простыми с точки зрения создания, а не заполнения. Без дизайнерского чутья это просто будут группы изменяемых объектов.

Что же такое мокап?

Мокап (англ. mock-up) – это полноразмерная модель какого-либо дизайна, используемая для демонстрации и оценки стиля еще не выпущенного продукта. Это может быть либо макет 3D-модели, либо PSD-файл с фотографией. Цель у макета одна: наложить на шаблон ваш дизайн.

Давайте рассмотрим примеры мокапов.

Здесь мы видим мокапы книг. К примеру, вы разработали дизайн обложки книги. Дабы не тратить много времени, сил и денег на создание готового образца, вы можете наложить дизайн на макет и посмотреть, органично ли будет смотреться обложка до печати. 

Здесь же у нас мокапы листовок. Как вы можете заметить, большинство мокапов обычно представляют собой какой-либо продукт на однотонном фоне. Но не все мокапы такие.

Мокапы различных гаджетов тоже очень ценятся: зачастую их используют для визуализации веб-сайтов/приложений.

А вот такие макеты используют бизнесмены, которые планируют открывать магазины или кафе.

Как видите, мокапы бывают разными. Давайте разберемся, где эти мокапы искать и как правильно использовать!

Mock Up для Photoshop

Для Фотошоп существует множество уже готовых мокапов, к этому вопросу вернёмся позднее. Основной сложностью является понимание принципа их редактирования. Ведь в макетах используются так называемые смарт объекты. Грубо говоря, это контейнеры, содержимое которых можно изменить, не изменив при этом общего вида изображения. Рассмотрим на конкретном примере случайно выбранный Mock-Up из стокового файлообменника:

1. Открываем скачанный файл в Photoshop.
2. Совершим двойное нажатие по иконке смарт-объекта в слоях. Это загрузит другое изображение (надпись), которую можно отредактировать удобным способом.
3. Растрируем объект (можно просто попытаться применить к нему любой инструмент).
4. Редактируем изображение.
5. Выполняем его сохранение. С помощью «CTRL+S» или кнопки «сохранить» в меню «Файл».
   При этом применяются необходимые эффекты на основном изображении (скачанном ранее мокапе).
6. В результате получаем следующее изображение:

Помимо показанного примера с текстом, можно пользоваться фигурами и другими графическими возможностями Photoshop. Стоит только помнить, что размер файла от этого будет только увеличиваться.

Работаем с мокапом в Photoshop

Давайте скачаем мокап по этой ссылке.

Я выбрал мокап обложки книги. Страничку мокапа нужно пролистать до конца и нажать на кнопку «Download».

В архиве у нас лежит .psd файл, его и открываем в Фотошопе (я использую «CC 2020»).

Нам нужно найти слой, на котором находится элемент для редактирования. Обычно такие слои выделяют и называют по-особенному. В данном примере слой назван довольно логично – «».

Два раза нажимаем на миниатюру возле имени слоя левой кнопкой мыши. Вуаля – дизайн обложки нашей книги открылся в новом проекте!

В этот слой мы можем добавлять все, что нам заблагорассудится. К примеру, я вставил сюда обложку книги «1984» Джорджа Оруэлла.

Теперь жмем Файл -> Сохранить, а затем открываем основной проект с мокапом.

Теперь у нас есть макет книги с нашим дизайном! И выглядит он вполне убедительно: нет никаких проблем с освещением или текстурой, это действительно настоящая книга!

Давайте рассмотрим другой пример. Я решил взять мокап магазинной вывески, в котором можно менять логотип.

Открываю проект.

Здесь у нас редактируются обе вывески, но мне интересна верхняя, так что я методом исключения выясняю, в какой группе слоев находится шаблон для изменения логотипа.

С названием слоев у нас та же песня (оба мокапа с одного сайта).

Открываю шаблон в новом проекте двойным кликом по миниатюре слоя.

Я считаю, что здесь уместно смотрелся бы логотип «Леруа Мерлен», поэтому решил его сюда вставить.

Сохраняем файл и открываем основной проект. Готово!

Вот мы и разобрались со спецификой мокапов, рассмотрели лучшие библиотеки шаблонов и научились работать с ними в Photoshop.

Мокап в графическом дизайне. Примеры

В случае графического дизайна дело обстоит труднее. Многие заказчики хотят видеть свои логотипы на конкретной продукции, которую они собираются распространять. Но в случае, когда данный вопрос не принципиален можно воспользоваться уже известными нам бесплатными ресурсам.

Например, я выбрала вот такой .

Скачала бесплатный исходник с мокапом. Открыла его в Photoshop. В панели слоев там уже была открыта папка со смарт слоями, которые можно редактировать. Это слой с логотипом и 2 слоя с текстурой кепки и ее козырька.

Щелкнула по слою с логотипом — открылся новый документ в Photoshop.

Поверх слоя с начальным логотипом я создала новый, куда вставила свой логотип тех же размеров. Скрыла слой со старым логотипом и сохранила изменения. Перешла в документ с мокапом и получила следующее. Все быстро и просто!

Или вот такой пример .

Такая презентация проекта поможет вам произвести наиболее приятное впечатление на заказчика и минимизировать правки с его стороны.

Подписывайтесь на обновления блога «Дизайн в жизни» и мы обязательно опубликуем для вас еще больше полезных статей из мира дизайна и веб-дизайна

(Visited 2 177 times, 1 visits today)

Мокап в web-дизайне. Примеры

В настоящее время существуют инструменты, с помощью которых дизайнер может подготовить прототип сайта или мобильного приложения с демонстрацией вариантов пользовательского опыта. Это можно сделать в Figma или Sketch.

Но тем не менее статичные мокапы не утратили своей актуальности.

Красочный фон мокапа, соотвествующий тематике сайта и грамотно подобранные цвета создадут позитивное настроение у заказчика. Впечатление будет намного приятнее, чем от «сухих» макетов.

Рассмотрим, как с помощью ресурса mockuuups.studio можно сделать презентацию своего проекта.

В данном случае нужно будет установить приложение на компьютер для MacOs или Windows. У меня Windows, поэтому я выбрала соответствующую опцию.

Будет предложено скачать на компьютер exe файл и установить приложение. Рабочий стол приложения будет выглядеть так. По сути, это картинки с прозрачными вырезами в тех местах, где будет ваш макет.

Правда большинство картинок будет закрыто замками (то есть для их использования нужно заплатить 9$  в месяц). Но есть бесплатный тестовый период на 7 дней. Для его открытия, щелкните по замочку около любой картинки и следуя инструкции, зарегистрируйте свой почтовый ящик. На него придет ссылка для открытия этого тестового периода. Перетаскивая картинку на панель в правом углу вы сможете увидеть, как она будет выглядеть на предоставленных шаблонах.

Согласитесь, очень удобно. Вы сможете показать, как будет выглядеть ваш проект на компьютере, используя скриншоты проекта.

Как будет выглядеть меню…

Статья…

Картинка…

Теже самые элементы на других устройствах…

Реклама…

Удобство данного ресурса состоит в том, что не нужно скачивать тяжелый PSD файл и разбираться в слоях исходного мокапа.

Что такое Mock Up

Mock-Up (переводится на русский, как «макет») – выполненный в полную величину макет будущего изделия, демонстрирующий его внешний вид, но не обладающий полным функционалом. Если сравнить мокап сайта и готовый сайт, то по сути получится в первом случае изображение, позволяющее оценить дизайн изделия. Во втором же случае получается полное изделие, которое обладает функционалом

Очень важно понимать, что такая заготовка не несёт в себе практической пользы, кроме демонстрации. Но именно за хороший вид такой заготовки получают свои деньги дизайнеры

Назначение

Вариантов использования несколько, они определяются назначением и происхождение мокапа. Ведь прибегают к ним, как веб-дизайнеры, так и верстальщики. С помощью такого полномасштабного макета демонстрируют свою работу дизайнеры и согласовывают с клиентом особенности изделий фотографы. Поэтому мокапы подразделяются на:

1. Сайты. Такие заготовки ориентированы на демонстрацию клиенту внешнего вида. Имея какую-то базовую заготовку её можно предоставить покупателю, чтобы он собственными глазами увидел, какую цветовую схему он желает применить, и как это будет смотреться. Удобнее исправить один слой в Фотошопе, чем исправлять код страницы.
2. Снимки. Здесь дело обстоит интереснее. Пользователю на суд представляется изображение в том виде, которое оно получит после печати. То есть не то, как ярко картинка смотрится на экране устройства, а то, какой она будет в руках, в реальной жизни. Порой разница выходит ощутимой и лучше ориентироваться на мокап, где уже учтены данные особенности.
3. Будущие изделия. Стоит отметить, что любая вещь, куда можно наложить дизайн может быть представлена мокапом. Например, обложка книги или кружка. На мокапе будет подан вид объекта в готовом виде.

Примечание! На самом деле мокап сайта имеет некоторые функциональные особенности, вроде ссылок и нажимаемых кнопок. Однако полноценного функционала в этом макете нет. Полноценным сайтом он станет только после вёрстки.

Где найти бесплатные мокапы?

У нас на сайте. Мы сделали раздел с мокапами, который будем постоянно пополнять. Все бесплатно!

А дальше — подборка других сайтов.

Freebiesbug

Предлагает мокапы, шаблоны для сайта, UI kits, шрифты и еще много разных полезных штук для дизайнеров совершенно бесплатно. Здесь вы можете скачать Photoshop, Illustrator, Sketch файлы и пр.

GraphicBurger

GraphicBurger еще один большой сайт со множеством фрибис (freebie — продукт, предоставляемый клиентам бесплатно). Вы можете скачать мокапы, значки, различные эффекты для текста, фоновые изображения, шаблоны для Instagram Stories и многое другое.

Premium Pixels

Premium Pixels — это коллекция бесплатных макетов, значков, шаблонов. Например, здесь можно найти иконки корзины для онлайн-магазина, шаблоны карты, иконки соцсетей, кнопки для регистрации на сайте через Facebook и Twitter, мокап монитора Apple и многое другое.

Pixeden

Pixeden предлагает бесплатную и премиум графику для веб-дизайна. Здесь есть иконки, векторы, UI kits, фоновые изображения, иллюстрации, текстуры и пр.

Pixel Buddha

Еще один сайт, где вы можете скачать бесплатные мокапы: визитки, постеры, журналы… Здесь есть готовые шаблоны для постов в Instagram, эффекты для текстов, UI kits, наборы шаблонов для презентации и многое другое. Помимо бесплатных плюшек есть и премиум.

Free Design Resources

Free Design Resources — это сайт с обширной коллекцией бесплатных дизайнерских ресурсов с более чем 5 миллионами загрузок. Здесь можно скачать шрифты, PSD шаблоны, графику.

Brusheezy

Brusheezy — это сборник бесплатных кистей, паттернов и текстур Photoshop. А также вы можете скачать шрифты, мокапы и многое другое.

PixelsMarket

Каждую неделю PixelsMarket делится новыми бесплатными плюшками. На сайте вы можете найти шаблоны для сайта, шрифты, фоновые изображения, текстуры и пр.

365PSD

365PSD появился в 2010 году и предлагает большую коллекцию UI kits, иконок, кнопок, шаблонов для сайта и других элементов дизайна.

ZippyPixels

Еще один сайт с бесплатными мокапами: упаковки для продукта, постеры, наклейки, пакеты, чашки, визитки и многое другое.

Icon Deposit

Сайт с огромной коллекцией бесплатных плюшек: иконки, шрифты, смайлики, мокапы и пр.

Ну чтобы вам точно было из чего выбрать:)

GraphicsFuel

Также достаточно большая коллекция бесплатных мокапов, текстур, текстовых эффектов, шаблонов для сайта, векторов и пр.

PSDFreebies

Здесь вы можете скачать графику, шрифты, шаблоны, мокапы — все, что нужно для создания любых элементов веб-дизайна.

Надеюсь, статья была для вас полезной.

Вам также может понравиться:

Наша подборка лучших бесплатных тем для сайта на WordPress.

А также 11 стоков, где вы можете скачать качественные фото для вашего сайта бесплатно!

Хотите начать вести блог? Посмотрите нашу подборку самых популярных тем для личного блога на WordPress.

И, конечно, пошаговое руководство для создания сайта на WordPress: начиная от выбора домена, заканчивая набором обязательных плагинов для вашего сайта.

Mock Up сайта

Отдельного упоминания заслуживают мокапы сайтов. Своеобразные рабочие модели, на которые можно добавить необходимое содержимое. Создаются они с помощью разных инструментов и напоминают верстку сайтов. Новичкам, без знаний основ сайтостроения разобраться будет в этом процессе сложно.

Если же всё-таки требуется ознакомиться, то можно прибегнуть к некоторым инструментам. Например, создавать или редактировать готовые mock up сайтов можно с помощью программы Gliffy. В базовой комплектации она бесплатна, но и набор функций урезан. В результате можно создать простенькую модель:

Если очень нужно, то можно выполнить работу и в Photoshop представив каждый элемент страницы в виде смарт-объекта. То есть: фоновое изображение, компоненты, надписи, видео, отдельные блоки и ссылки – всё превращается в мокапы, ведущие на редактируемые элементы. Так можно быстро «набросать» некоторые элементы и согласовать дизайн.

Под «быстро набросать» следует понимать лишь первую заготовку, по которой можно ориентироваться при создании первичного дизайна. То есть, действия вроде «это повыше, то – пониже, а вот то – удалить». Не стоит считать, что создание дизайна с нуля возможно за 10-15 минут. Такое можно сделать только в качестве беглой зарисовки в блокноте, которую каждый увидит по-своему.