Как сделать макет веб сайта
Макет сайта: как сделать дизайн и передать исходники верстальщику
Удалить скрытые слои, настроить отступы, экспортировать иконки и приложить шрифты: что нужно сделать дизайнеру, чтобы разработчик не запутался в макет
Чтобы стать опытным дизайнером, нужно сделать несколько больших проектов и понять, как всё устроено изнутри. Если времени на проекты нет, то все нюансы передачи макетов разработчикам и правильном общении с ними можно узнать на нашем курсе.
Зачем приводить всё в порядок
Создание сайта — трудоёмкий процесс, потому что надо не только продумать его логику и разработать стиль, но ещё сверстать и запрограммировать страницу.
Иногда дизайнер рисует хороший макет, а после вёрстки качество заметно падает:
Скорее всего, это происходит потому, что дизайнер плохо подготовил макет для вёрстки.
Пишет про дизайн в Skillbox. Рисует макеты и верстает страницы для клиентов.
Для чего нужен макет
Обычно сайт разрабатывают в несколько этапов. Собирают информацию, рисуют дизайн и пишут текст, а затем верстают и программируют. Сначала дизайнер работает с внешним видом, создаёт макет сайта, затем передаёт исходники разработчику.
Макет сайта — это эскиз, на котором изображена будущая страница. От того, насколько качественно проработан макет, зависит общее восприятие информации на сайте.
При работе над макетом в графическом редакторе у дизайнера нет ограничений. Если выбранный шрифт не подходит, его можно поменять в один клик. Если кнопка выглядит неудачно, можно легко изменить её цвет и размеры.
Разработчик получает от дизайнера макет в графическом формате. Затем с помощью HTML и CSS, языка для разметки страниц и таблицы стилей приводит макет в такой вид, который понимают браузеры.
Правила создания макета
Верстальщик постоянно сверяется с исходными файлами, которые получил от дизайнера. Смотрит отступы и расстояния, копирует текст, задаёт нужные стили.
Важно! Часто дизайнер в спешке отправляет макет разработчику и при этом забывает проверить работу на ошибки. А верстальщик тоже может не заметить проблем и опубликовать это всё на сайте.
Обычные ошибки дизайнера:
Чтобы это происходило реже, необходимо соблюдать основные правила создания макета и взаимодействия с верстальщиком.
1. Договоритесь о формате файлов
Начинающие дизайнеры часто не знают, в какой программе можно сделать макет. Изучают разные графические редакторы, выбирают удобный для себя.
Photoshop — универсальный редактор, и поэтому его довольно непросто освоить. Чтобы не тратить много времени на изучение функций, можно использовать новое поколение программ, предназначенных специально для веб-дизайна: Adobe XD, Figma, Sketch.
Некоторые дизайнеры рисуют макеты в других редакторах. Кто-то пользуется Adobe Illustrator или Adobe InDesign.
Перед тем как выбрать программу для создания макетов, поговорите с верстальщиком. Удобно ли ему будет пользоваться Photoshop или лучше нарисовать всё в Sketch? Или он пользуется Zeplin, поэтому неважно, в какой программе вы рисуете?
2. Следуйте требованиям интерактивного дизайна
Создавайте макет по правилам. Это упростит работу над внешним видом и облегчит процесс вёрстки.
3. Избавляйтесь от дробных расстояний
Проверьте все элементы макета и посмотрите на расстояния и отступы. Все размеры должны быть выражены целыми чётными числами. Не используйте нечётные числа и дроби.
4. Наведите порядок в слоях и артбордах
Во время работы над макетом дизайнер располагает слои в хаотичном порядке, не переименовывает их, скрывает неподходящие варианты. С таким макетом сложно работать верстальщику и другим специалистам, в нём нет структуры.
Чтобы создать порядок в слоях:
Как сделать макет сайта самостоятельно
Создание макета сайта – это трудоемкий процесс, от которого будет зависеть дальнейшее продвижение ресурса. Но с этой задачей вполне можно справиться самостоятельно. В статье расскажем, как создать макет сайта и что нужно учесть.
Что такое макет сайта и для чего он нужен
Макет сайта – это графическое представление будущего сайта, его дизайн. В нем отображены: цветовая гамма, шрифты, кнопки, порядок элементов и прочее.
Преимущества
Разработка макета сайта позволяет:
Этапы разработки макета сайта
При разработке макета для сайта:
Полноценный заполненный макет передается заказчику или верстальщику для дальнейшей разработки.
Способы создания макета сайта
Для разработки макета многие пользуются Фотошопом или инструментами сайтов-конструкторов. Рассмотрим каждый способ подробнее.
Шаблон сайта в Photoshop
С помощью Фотошопа можно разрабатывать простые макеты для проектов заказчиков. Для этого:
Кликаем на «Файл», затем «Создать». В поле вводим параметры полей. Размер желательно делать на 200 пикселей больше для максимального соответствия с реальным размерам сайта.
Появится лист в клеточку. Эти линии нужны, чтобы ровно располагать элементы. На готовом макете клеток не будет.
Это может быть любой цвет или картинка по теме сайта. Если нужен фон однородного цвета, то в инструментах выбираем «Заливку» и нужный цвет.
Затем выбираем цвет в палитре и кликаем на «Заливку». Выделенная область закрасится. После нужно отменить выделение во вкладке «Выделение» – «Отменить выделение».
Далее выбираем «Горизонтальный текст» и шрифт. Кликаем по закрашенной области Меню и называем разделы. Текст можно будет перемещать.
Далее создаем слой, выбираем инструмент «Линия», зажимаем Shift и проводим вертикальную линию через весь фон меню. Получится разделитель:
После этого копируем слой и выставляем после каждого раздела:
Добавляем меню такое же как сверху. Его можно просто скопировать.
Итак, на выходе макет должен состоять из:
Шаблон на сайте-конструкторе
Конструкторы – это сервисы для тех, кто хочет создать сайт самостоятельно с минимумом финансовых и временных затрат. Этот способ подходит для блога, небольшого некоммерческого проекта, для сайта малого бизнеса.
Инструмент берет на себя весь творческий процесс и предлагает шаблоны с уже готовой структурой, дизайном и функционалом. Остается выбрать шаблон, соответствующий тематике сайта. Внутри шаблона можно менять шрифты, картинки, цветовое оформление.
Преимущества разработки макета на сайте-конструкторе:
Основные элементы макета
Рассмотрим основные элементы дизайн-макета сайта.
Во многом от этого будет зависеть, останется ли пользователь на сайте или уйдет. Сайт должен привлекать целевую аудиторию и соответствовать тематике.
От логотипа во многом зависит успех компании. Логотип должен выглядеть заметно, но не отпугивать.
Страницы должны быть логически связаны, чтобы структура оказалась понятной и удобной, а пользователь легко нашел то, что искал.
Продумать структуру можно самостоятельно, записав на листе, либо с помощью программы MindMap, предназначенной для структурирования информации.
Элементы призыва к действию
Типичные ошибки при создании макета
Основными ошибками при создании макета считают:
Не стоит использовать все элементы подряд, иначе посетитель попросту не найдет то, что ему действительно нужно. Перебор с количеством может отпугнуть потенциального покупателя.
Слишком яркие цвета и неудачные цветовые сочетания режут глаз. Используйте современные инструменты с функцией подбора правильных оттенков для оформления сайта.
Не перестарайтесь, играя со шрифтами. Если текст будет сложно прочесть, посетители уйдут с сайта, не совершив целевых действий.
Заключение
Макет сайта можно сделать своими руками с помощью Фотошопа или бесплатного конструктора. Главное – помнить про цели и задачи сайта, целевую аудиторию и юзабилити.
Создание макета сайта в Photoshop: руководство для начинающих
7,345 просмотров всего, 4 просмотров сегодня
Итак, вы решили поднять бизнес на новый уровень и запустить свой собственный сайт. У вас есть несколько вариантов:
Одним из самых популярных графических редакторов на сегодня является Adobe Photoshop. Не самый простой для новичка, но обладающий широким функционалом и разнообразным набором инструментов. Профессионалы годами постигают тонкости программы, оттачивая мастерство дизайна. Но для создания простого макета начинающему автору достаточно базовых знаний, фантазии и хорошего пошагового урока.
Как в Фотошопе сделать дизайн сайта
Прежде, чем приступить к рисованию, продумайте структуру будущего сайта. А именно – количество и сценарий типовых страниц, которые вам предстоит создать. Вы можете подсмотреть примеры готовых макетов сайтов на или проанализировать решения конкурентов. Главное – чтобы все страницы одного ресурса были выдержаны в едином стиле и цветовой гамме, отвечали потребностям потенциальных клиентов и отвечали корпоративному стилю.
Прежде, чем начать: подготовительный этап
Создайте файл будущего макета и придумайте для него понятное имя. Для этого нажмите «Файл – создать».
Размеры, которые предлагает Фотошоп по умолчанию, не подойдут. Создаем файл 1024×720 пикселей, а затем сохраняем его, включаем линейки (Ctrl+R) и активируем сетку (Ctrl+Э). Если все сделано правильно, вы увидите перед собой лист, расчерченный как школьная тетрадка в клеточку: 
На готовом макете сайта клеток не будет. Линии видны только во время работы с макетом и используются для того, чтобы ровно располагать элементы будущего шаблона. Сетку можно настроить самостоятельно (тут: «Редактирование – Настройки – Направляющие, сетка и фрагменты») или скачать готовое решение в Интернете. Мы рекомендуем использовать сетку BOOTSTRAP? для удобства дальнейшей верстки и адаптации
Теперь нужно установить направляющие, между которыми будет находиться Тело, или основная часть будущего ресурса. Для этого нажмите «Просмотр-Новая направляющая» и выберите ориентацию «Вертикальная» и укажите положение от левого края будущей страницы (по линейке).
Направляющих нужно две, и расстояние между ними должно составлять не более чем 1003 пикселей (для дисплеев расширением 1024 х 720).
Начинаем рисовать
Создание красивого сайта – это больше чем про искусство. Это наука Usability, помноженная на опыт разработки интернет-проектов для разных тематик. Но порядок выполнения работ в Фотошопе практически одинаков.
Для начала нужно задать фон. И не обязательно рисовать картинку самостоятельно – можно скачать бесплатное изображение с любого из стоков. Не рекомендуем использовать текстуры с мелкими выделяющимися деталями: текст на таком фоне будет нечитабельным, а мелкие фрагменты отвлекут внимание пользователя от контента.
Чтобы добавить фон, откройте рисунок в Фотошопе и выделите изображение (Ctrl+A). Скопируйте картинку (Ctrl+С) и вставьте в будущий шаблон (Ctrl+V). Справа внизу вы увидите новый слой, который можно переименовать («Параметры слоя») и изменить («Параметры наложения»).
С помощью готовых стилей, инструментов и настроек вы полностью преобразите стандартную текстуру, придумаете оригинальное дизайнерское решение. Не рекомендуем использовать в качестве фона глубокий черный цвет и ядовито-насыщенные оттенки – это не лучшим образом скажется на читабельности текста.
Делаем шаблон для сайта
Теперь мы будем создавать дизайн сайта, разбивая слои на группы.
Важно: Создавая группы слоев, давайте им понятные названия. Иначе специалист, который будет заниматься версткой (да и вы сами в ходе работы) обязательно запутаетесь.
Разберем на примере хедера (header) и создания меню сайта. Создадим группу, назовем ее «Хедер» и в ней создадим подгруппу «Верхнее меню» с новым слоем «Фон». Для этого нажимаем на иконку в правом нижнем углу страницы:
Вот что у вас должно получиться:
Затем выставляем горизонтальные направляющие, выделяем прямоугольную область и выполняем заливку фона выбранным цветом, после чего снимаем выделение.
Теперь добавляем пункты меню – кликаем на инструмент «Текст», выбираем нужный шрифт и цвет и пишем. Далее добавляем изображения и текстовый контент. Не забываем добавить лого, номер телефона, кнопки соцсетей. Получится примерно следующее:
В этой статье мы не будем подробно описывать, как в Photoshop отрисовать кнопки или добавить визуальные эффекты (об этом можно прочитать в специальных уроках для начинающих дизайнеров). Не будем подробно разбирать каждый из элементов страницы (от Хедера до Футера). Постарайтесь разместить на странице информацию, которая заинтересует ваших потенциальных клиентов. И не забудьте про точки захвата и формы обратной связи.
В результате вашей работы вы получите дизайн сайта, готового к верстке с помощью html и css. А о том, как сверстать макет, в нашем блоге уже выходила отдельная статья
Как самому создать сайт или «не боги горшки обжигают».
Создание сайта на основе шаблона: пошаговый гайд
Кроме этого необходимо его установить, подправить структурные элементы, найти хостинг и доменное имя, наполнить контентом (в том числе SEO-данные) и другое. О всех процессах расскажем подробнее на базе универсального и многофункционального одного из лучших шаблонов WordPress — Monstroid2.
Шаг № 1. Выбираем CMS платформы
CMS — это система, с помощью которой можно управлять контентом и любыми изменениями на сайте оперативно и без взаимодействия с профессиональным разработчиком (его помощь нужна лишь в отдельных случаях). Другое название CMS — «движок». Знать HTML или другие языки программирования не обязательно (это пригодится лишь при SEO-оптимизации).
Выбирать следует по таким критериям:
Сегодня лучшее предложение на рынке — это WordPress, подходит под эти критерии. Плюс тема, на основе которой рассмотрим все этапы разработки сайта, сделана под этот «движок», а сама платформа бесплатная.
Шаг № 2. Выбираем шаблон будущего сайта
Для этого необходимо разобраться, какой именно тип сайта нужен и какие задачи он должен решать. Например, интернет-магазин подойдет для прямой продажи товаров, а лендинг-визитка — для знакомства с услугами человека и возможностью получить у него бесплатную консультацию.
Потом посмотрите на готовые шаблоны и обратите внимание не на дизайн, а на структуру: сколько есть блоков, какой там размещен контент (и планируете ли вы размещать похожий), сколько есть отдельных страниц, какой функционал.
Monstroid2 — универсальная тема, где есть шаблоны под все основные типы сайтов и с дизайнами под разные виды бизнес-проектов. Подобрать что-то под себя точно получится.
Шаг № 3. Выбираем доменное имя и хостинг
Да, CMS — это не хостинг, а именно система контента, поэтому эти 2 вещи надо выбирать отдельно.
Хостинг — то, где будет размещен ваш сайт и то, что поможет отобразить страницу в поисковых системах. А доменное имя — то, как будет отображаться название сайта в поисковой строке. Домен можно купить как у хостинг-провайдера, так и отдельно на тематических ресурсах. Оба этих элемента платные.
Советы по выбору хостинга:
Есть хостинги, где WordPress уже установлен, и за это не надо доплачивать.
По поводу доменного имени, то желательно, чтобы оно было коротким (1-2 слова), без цифр и символов, хоть как-то определяло род деятельности компании, запоминалось, было уникальным.
Шаг № 3. Загрузка и установка темы в CMS
Допустим, вы определились с темой и выбрали Monstroid2, оплатили и скачали файл (в виде архива *.zip), оплатили хостинг и подключили доменное имя. Время установить шаблон на WordPress, чтобы дальше с ним работать. Порядок действий такой:
3. Нажмите «Активировать» и пункт «Новая тема».
4. Выберите тему Monstroid2.
5. Выберите загрузку всех элементов.
Подождите 5-10 минут, пока шаблон активизируется.
На этом этап установки темы закончен и можно переходить к редактуре макета, контента.
Подробное видео с установкой шаблона Monstroid2
Шаг № 4. Редактура макета
Перед редактурой лучше ознакомиться с плагинами, которые идут в комплекте с темой Monstroid2 (такое дополнение касается не всех WordPress тем, и зачастую плагины следует покупать отдельно).
Также в макете не 1 шаблон, а более 20, и их количество постоянно увеличивается (чтобы вы могли видеть все обновления, нажмите на кнопку «Синхронизировать библиотеку тем»).
Теперь перейдите в раздел с темами, выберите нужную и нажмите «Настроить». Откроется макет с отдельными структурными элементами сайта: страницы, хедеры, футеры, разделы.
В редакторе можно подогнать страницу под свой прототип и изменить цвета кнопок, текста, удалить или добавить отдельные элементы и даже блоки. По сути, то же самое, что работа с конструктором.
Некоторые советы на этом этапе разработки сайта:
По поводу дизайна, то оптимальное решение — 1-2 контрастных цвета (ничего страшного, если одним из них будет белый или черный) и 1-2 шрифта. Анимация — это хорошо, но она не должна отвлекать от основной информации и мешать.
Уделите этому много времени, чтобы уровень юзабилити был высоким, так как от этого зависит уровень продаж. Например, зайдет человек на сайт и не сможет оперативно найти то, что ему нужно. Тогда он просто выйдет, вы или заказчик потеряете возможную прибыль.
В стандартных макетах Monstroid2 описанные моменты учтены. Главное — не навредить.
Шаг № 5. Редактура контента
Помимо дизайна сайта важен текстовый контент — насколько он продающий и цепляющий. Кнопка «Купить сейчас» в первом же блоке практически не срабатывает, как и фразы в описании преимуществ компании «Доставка быстрая, цены низкие/адекватные/выгодные/и вот эти все размытые слова, бренд — лидер на рынке». В итоге посетитель почитает такие шедевры в первых 2-3 блоках, не найдет ничего ценного и уйдет к конкурентам. Чтобы такого не произошло, вот пару рекомендаций:
Шаг № 6. Тестируем сайт
Тестирование — обязательный шаг. Его цель — определить наличие или отсутствие ошибок в дизайне, контенте, структуре и других элементах сайта. И только после этого страницу можно запускать в работу и получать первый трафик.
А теперь попробуйте разработать свой сайт на основе шаблона
Этот гайд поможет вам учесть основные важные моменты и не допустить ошибок при разработке и дизайне сайта. На самом деле, это несложно, если действительно уделить этому время. Поверьте, сделать сайт с нуля, а не на основе шаблона, в несколько раз сложнее и не факт, что оно того стоит.