Проектирование дизайна веб-приложения

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

Ошибки в создании макета сайта

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

Ошибки в дизайне

Когда на сайте экономят, то нанимают дешевого дизайнера или вовсе поручают дело непрофессионалу. Тогда появляются типичные ошибки в дизайне, которые портят вид макета сайта.

Избегайте этих ошибок:

• Несбалансированная цветовая гамма или несочетающиеся шрифты;
• Избыток элементов — слишком много блоков, кнопок, надписей. Посетитель потеряется на такой странице и не выполнит целевое действие;
• Отсутствие мобильной версии сайта.

Ошибки, критичные для верстки

Иногда с макетом сайта все хорошо, а при верстке вылезают недочеты. Это происходит, потому что остались незаметные ошибки, которые верстальщик не понимает и переносит «как есть». Вот чего нужно избегать, чтобы макет был сверстан идеально:

• Беспорядок в слоях. Нужно удалить ненужные слои — скрытые, пустые. Нормально назвать все оставшиеся и логически сгруппировать. В идеале нужно делать это на этапе разработки макета сайта, а не при сдаче, иначе сами запутаетесь;
• Эффекты прозрачности и наложения. Чтобы сделать цвет светлее, просто используйте другой цвет, но ни в коем случае не прозрачность. Не применяйте эффекты наложения — они непредсказуемо отображаются в разных браузерах;
• Элементы «гуляют» туда-сюда на пару пикселей. Выравнивайте все строго по сетке, иначе верстальщик может просто обрезать объект, который выступает за направляющую;
• Путаница с отступами. Проверьте отступы — они должны быть выражены целым четным числом, чтобы верстальщику было проще их перенести;
• Недокомплект файлов. Приложите шрифты и все изображения к макету — отдельный архив для шрифтов, отдельный для изображений. Если шрифты есть на Google Fonts, можете дать ссылки на них.

Макет сайта в фотошопе

Создаем новый файл в Photoshop. Можете настроить самостоятельно или перейти на вкладку «Для Интернета». По умолчанию программа предлагает макет «Заказная» размерами 1366 на 4000 пикселей, я немного округлю ширину до 1380 пикселей. Это распространенный размер, подходящий под размер экрана компьютера или ноутбука. Цветовая модель — RGB, разрешение — 72 пикселя на дюйм, фон прозрачный.

Создание нового файла в Photoshop с параметрами под макет сайта

Теперь задаем модульную сетку. Заходим во вкладку «Просмотр» верхнего меню и выбираем там пункт «Новый макет направляющей». По умолчанию программа предлагает создать восемь столбцов с полями и внутренними отступами, но мы сделаем 12 — так будет удобнее делить страницу на 2, 3, 4 или 6 блоков.

Также зададим значение средника в 15 пикселей (это внутренний промежуток между колонками), верхнее и нижнее поле поставим по нулям, правое и левое — 30 пикселей. Вы можете выбрать свои значения, но помните, что отступы и поля должны быть кратны одной цифре, например, 5.

Первый шаг — создать сетку направляющих, предпочтительно из 12 столбцов

Теперь зальем фон. Для этого используем корректирующий слой — так будет проще при необходимости менять его цвет, чтобы не заливать по новой. В панели «Слои» выбираем значок кружка, кликаем на него и выбираем опцию «Цвет», указываем нужный оттенок. Теперь остается лишь удалить маску с этого слоя, чтобы остался только цвет:

Создаем фоновый слой и заливаем его одним цветом

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

Переименуем и заблокируем фоновый слой

 Продолжайте создание макета.