Как сделать макет веб сайта

Макет сайта: как сделать дизайн и передать исходники верстальщику

Удалить скрытые слои, настроить отступы, экспортировать иконки и приложить шрифты: что нужно сделать дизайнеру, чтобы разработчик не запутался в макет

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

Зачем приводить всё в порядок

Создание сайта — трудоёмкий процесс, потому что надо не только продумать его логику и разработать стиль, но ещё сверстать и запрограммировать страницу.

Как сделать макет веб сайта

Иногда дизайнер рисует хороший макет, а после вёрстки качество заметно падает:

Скорее всего, это происходит потому, что дизайнер плохо подготовил макет для вёрстки.

Как сделать макет веб сайта

Пишет про дизайн в 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. Тестируем сайт

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

Как сделать макет веб сайта

А теперь попробуйте разработать свой сайт на основе шаблона

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

Источник

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *