Оставить комментарий
В статье рассказывается:
- Что такое макет сайта
- Для чего нужен макет сайта
- 6 золотых правил создания макета сайта
- Бесплатные инструменты для создания макета сайта
- Как создать макет сайта в Photoshop: пошаговая инструкция
- Ключевые моменты создания макета сайта
- О чем еще нужно помнить при разработке макета сайта
- 3 типичные ошибки разработки дизайна макета сайта
Не судите о книге по обложке — не найдется, пожалуй, человека, который не слышал этой пословицы. Смысл высказывания заключается в том, что нельзя быть высокомерным. Однако многие забывают про вежливость, когда открывают браузер в поисках нужной информации, отличного контента, а также понятного и привлекательного интерфейса. Никто не будет читать сайт пусть и с уникальным наполнением, но с плохим дизайном, потому что это визитная карточка любой веб-страницы. О том, как разработать самый лучший макет сайта, читайте в нашей статье.
Что такое макет сайта
Важно понимать отличие визуального образа, разработанного с учетом технических возможностей HTML-верстки, от Wireframe, который представляет собой простой эскиз. Макет сайта — это практически весь дизайн. Он определяет порядок всех элементов ресурса, цветовые оттенки, формы, конкретное расположение компонентов по отношению друг к другу.
Чтобы иметь правильное представление о таких понятиях, как макет, Wireframe, прототип, вообразите, что они являются промежуточными этапами на пути к конечному продукту.
На начальной стадии создается каркас веб-сайта, известный как схема страницы или экрана. Он включает в себя элементы, которые вы планируете разместить на ресурсе, и их расположение. Wireframe обычно создается вручную.
Следующий этап — макет веб-страницы. Определяется стиль, цветовое решение, форма и дизайн всех элементов. Разрабатывая макет, можно представить, насколько эргономичным будет проект, а также внешний вид страницы в целом.
Прототип — конечный интерактивный продукт, с которым можно детально ознакомиться. Проще говоря, это готовая работа, обладающая определенным набором функций.
Прототип нужен в качестве обоснования концепции, особенно если вашими заказчиками являются крайне разборчивые клиенты. Просто покажите им готовый вариант в качестве доказательства, что у вас по-настоящему удачная идея.
Разумеется, когда создаете продукт, начальный этап очень важен. Прототип делается по желанию. Макет веб-дизайна так же, как и Wireframe, разрабатывается в обязательном порядке.
Для чего нужен макет сайта
Зачастую качество хорошо отрисованного дизайнером макета сайта после верстки становится значительно хуже: возникают ненужные отступы, исчезают элементы, а шрифт выходит за границы области наполнения. Происходит это по причине некачественной работы проектировщика.
Чтобы правильно оформить макет сайта для верстки, важно знать его главное предназначение, какую программу для его разработки использовать и требования к внешнему виду.
Через создание проекта будущего веб-ресурса дизайнеры могут:
-
Определить вероятные сложности на начальном шаге. Часто задуманный дизайн в реальности выглядит абсолютно иначе. В момент, когда реализуется идея и создается продукт, можно увидеть все минусы проекта. На этом этапе у дизайнера есть возможность внести любые изменения в стиль, форму или цветовые оттенки будущего сайта. А также удалить или включить дополнительный элемент.
-
Предложить варианты макетов страниц сайта на обсуждение. Представления о дизайне конечного продукта исполнителя и клиента часто расходятся. Профессионал должен предлагать разные решения, чтобы иметь возможность отстоять свою идею и убедить заказчика.
-
Донести свои мысли до клиента. Можно быть по-настоящему талантливым дизайнером, но при этом не уметь объяснять свое видение проекта заказчику. Грамотно разработанный макет сайта поможет донести до клиента вашу идею.
Визуальный образ оформления веб-страницы — хороший шанс и для владельца продукта по следующим причинам:
-
Поиск инвесторов. Если вы ищете человека, который согласится вложиться в проект, разработайте прототип интерактивного продукта. Конечно, в итоге это приведет к его удорожанию и не факт, что инвесторы согласятся в дальнейшем сотрудничать. Хотите минимизировать финансовые потери — презентуйте макет. Чем он эффектней, тем больше вероятность, что кого-то заинтересует.
-
Макет в роли инструкции. Когда заказчик видит наглядное изображение будущего сайта, он может отчетливо представить, как в результате будет функционировать конечный продукт.
-
Простое добавление изменений. Когда на мониторе откроется макет сайта в фотошопе, вы быстро определите, что смотрится не так: это очень крупное, что-то довольно бледное, а шрифт слишком мелкий. Заказчик определится с требованиями к дизайнеру, чем значительно облегчит ему жизнь.
Главное преимущество — все будут довольны после окончания работы над заданием. Дизайнеру не нужно будет вносить изменения в последний момент, а заказчику придется по душе его творение.
Сайт создается в несколько шагов. Вначале собирают данные, рисуют проект и придумывают текст, а затем верстают и пишут программу. Дизайнер занимается внешним видом сайта, разрабатывает макет, а потом исходники отправляет разработчику.
От того, насколько профессионально проработано графическое оформление интерфейса страниц ресурса, зависит понимание контента в целом.
В веб-разработке макет сайта создается совместно с составлением технического задания. Помимо того, что документ помогает договориться разработчику и заказчику, он представляет собой подробный алгоритм создания интернет-ресурса, в котором определяются сроки и устанавливаются требования.
Неотделимой частью технического задания является макет сайта. Разработчик представляет несколько решений — заказчик делает выбор. В результате формируется модель, дающая возможность всем участникам идти к цели без утомительных бесконечных исправлений и обсуждений.
Во время работы над макетом сайта в фотошопе у дизайнера нет ограничений. Подобранный шрифт не соответствует — его можно изменить одним простым нажатием. Кнопка слишком большая или, наоборот, маленькая — форма и цвет легко редактируются.
Макет дизайнер делает в графическом редакторе и передает в таком виде разработчику. Он, в свою очередь, создает структуру гипертекстового документа на основе HTML-разметки при использовании таблиц стилей и клиентских сценариев. После этого макет становится понятен браузерам, и он может быть опубликован в интернете.
Что нужно сделать перед разработкой макета сайта
Хорошо, когда у дизайнера много предложений. Чтобы создать макет сайта, оригинального и интересного, важно думать не только о художественной составляющей, но и о функциональности будущего интернет-ресурса. Читатели не оценят привлекательный дизайн, если он не будет удобным.
Полезно взять на заметку опыт братьев Макдональд, которые изобразили на полу модель своей кухни, упрощенно обозначили расстановку всех предметов обстановки и предложили работникам перемещаться так, будто они двигаются по реальному помещению с мебелью. Эксперимент помог им определить наилучшую траекторию для каждого сотрудника согласно должностным обязанностям. Пожалуй, это первый известный опыт, позволивший сэкономить время приготовления пищи, сократив его с 10 минут до 30 секунд.
Пример наглядно демонстрирует, какое влияние дизайн оказывает на производительность. Расположение кнопок, их форма и размер должны быть не только привлекательными, но и удобными в применении.
Иногда случается, что, загружая интересный и яркий сайт, вы не можете обнаружить необходимые элементы интерфейса. Этап подготовки графического варианта веб-страниц помогает найти все недоработки и оценить функции и удобство использования.
Чтобы сделать максимально понятный и привлекательный макет сайта, необходимо собрать большое количество различной информации о предстоящей работе:
-
Назначение и функционал ресурса.
-
Какие услуги можно будет получить?
-
Потенциальный пользователь, его средний возраст и сфера увлечений.
-
Контент и способ передачи информации. Чем конкретно будут наполняться страницы?
Эти сведения важно собирать как разработчикам, так и дизайнерам. Последние в качестве отправной точки могут использовать чужие разработки похожей тематики, чтобы вникнуть в общий смысл проекта.
Как только нужная информация будет у разработчиков, начнется планирование. Чем тщательнее они продумают шаги реализации проекта, тем лучше для процесса. Хорошо рассчитанные этапы разработки уменьшают итоговую стоимость продукта.
На данном этапе команда программистов решает, каким будет дизайн: адаптивным, плоским или в стиле material?
В самом начале работы над проектом определяется также мобильная версия сайта. Что конкретно будет отображаться впоследствии на телефоне, а что скрыть?
Готовый макет сайта даст возможность дизайнеру наглядно продемонстрировать заказчику, почему отдельные элементы откорректированы или удалены.
Возьмите на заметку некоторые основные правила, которым следуют профессионалы при создании простого, но привлекающего внимание пользователей дизайна.
Главные элементы создания графического образа:
-
Стиль. Определившись окончательно с цветовой гаммой и формой компонентов, придерживайтесь выбранного направления. Пользователь обнаружит несоответствия.
-
Логотип. Должен быть заметным, но не аляпистым. Дизайнер определяется с размером и стилем изображения, учитывая это требование.
-
Структура. Чтобы информация была заметна и хорошо воспринималась пользователем, необходимо ее максимально структурировать. Используйте сетку.
-
Элементы призыва к действию. Кнопки, ссылки и другие атрибуты веб-страницы, нажатие которых приведет к покупке, подписке, передаче контактной информации должны смотреться ярко и привлекательно, чтобы вызывать желание ими воспользоваться.
-
Выбор макета. Существует три основных варианта расположения значимых элементов согласно очередности просмотра пользователем веб-страницы. Остановить выбор можно на Z-шаблоне, F-шаблоне или структуре диаграммы Гутенберга. Определяющими факторами являются тип создаваемого интернет-ресурса и предполагаемый контент.
6 золотых правил создания макета сайта
Готовые материалы от дизайнера отправляются к верстальщику. Тот, в свою очередь, неоднократно сверяется с исходниками, отслеживает отступы и интервалы, копирует данные, задает определенные стили.
Нередко дизайнер отправляет материалы разработчику, не проверив на наличие ошибок и неточностей. Программист впоследствии может также пропустить эти недочеты.
Частые ошибки проектировщика:
-
Не убрал скрытый слой с предыдущим вариантом, а верстальщик опубликовал этот элемент.
-
Не сгруппировал компоненты, и разработчику придется потратить не один час, чтобы понять смысл и идею разработки.
-
Ошибся и определил несоразмерный отступ для элемента, а верстальщик просмотрел недочет.
Чтобы избежать проблем, соблюдайте главные требования к разработке проекта и взаимодействуйте друг с другом.
Договоритесь о формате файлов
Неопытные дизайнеры часто не могут определиться, в каком графическом редакторе делать проект. Штудируют всевозможные программы, выбирая оптимальный вариант.
Наиболее востребованный редактор — Adobe Photoshop. Это многофункциональная программа для работы с любыми изображениями. Фотографы ретушируют в нем снимки, рисовальщики обрабатывают свои творения, а веб-дизайнеры создают макеты и сохраняют их в формате .psd. Именно такой файл отправляют верстальщикам.
Photoshop — многофункциональный редактор, освоить который не так просто, как кажется на первый взгляд. Если времени на изучение нет, можно воспользоваться более доступными профильными программами нового поколения: Adobe XD, Figma, Sketch.
Adobe Illustrator или Adobe InDesign — вполне востребованные дизайнерами графические редакторы.
Прежде чем определиться с техническим обеспечением, побеседуйте с верстальщиком и выясните, с какой программой ему удобней работать.
Придерживайтесь требований интерактивного дизайна
Соблюдая простые правила создания макета, вы облегчите дальнейшую работу над внешним видом ресурса и упростите этап верстки.
-
Определитесь с аддитивной цветовой моделью RGB.
-
Для выравнивания содержимого пользуйтесь сеткой.
-
Не увеличивайте мелкие изображения.
-
Редактируйте размер картинок с зажатой клавишей Shift, чтобы не нарушить пропорции.
Планируете использовать жирный текст или курсив — примените одно из начертаний рисунка типографского шрифта. Для изменения букв в графических редакторах прибегать к псевдостилям не рекомендуется.
Внимательно просмотрите все части проекта, сверяя интервалы и отступы. Все расстояния должны иметь значения, выраженные целыми четными числами, но не дробями или нечетными.
Наведите порядок в слоях и артбордах
В процессе работы дизайнер создает слои непоследовательно, не меняет им заголовки, скрывает неудачные варианты. Разработчику трудно справляться с таким бесструктурным материалом.
Чтобы навести порядок в слоях, необходимо:
-
сгруппировать их по значению;
-
озаглавить;
-
убрать скрытые и не содержащие полезной информации слои.
Все артборды следует осмысленно переименовать. Таким образом, верстальщику будет легче разобраться в структуре и понять логику задачи в целом.
Выносите все элементы на отдельный артборд
Если какие-то детали невозможно отобразить посредством HTML и CSS, выносите их на пустую страницу. Чаще всего приходится так поступать с частью кнопок, небольшими картинками, карточками. Можно все эти элементы сразу перевести в формат PNG или SVG, что позволит значительно сэкономить время на верстку.
Монтажные области рекомендуется также использовать для демонстрации состояний кнопок и иконок. Для этого нужно скопировать элемент и нарисовать его во всех ситуациях: при наведении мыши, в нейтральном положении, при нажатии.
На отдельном артборде следует обозначить все задействованные шрифты и оттенки, указав параметры и величину заголовков и основного контента.
Прикладывайте к макету шрифты и иконки
Если помимо стандартных шрифтов дизайнер использует оригинальные рисунки начертаний букв и знаков, необходимо их отправить отдельным файлом разработчику.
Дополнительные сведения передавать не придется, если сервис Google Fonts содержит подобную информацию — достаточно дать верстальщику ссылку на эту библиотеку,
Заархивируйте элементы, экспортированные из области монтажа, и приложите к макету. Файлы в формате PNG сохраните и прикрепите в других разрешениях.
Создавайте анимацию, чтобы показать движение элементов
Часто дизайнеры включают в работы анимацию для презентации сайта инвестору.
Чтобы верстальщик реализовал эту идею, нужно нарисовать интерактивную модель и ему продемонстрировать. Это будет доступнее, чем объяснять на словах.
Прототип элементов анимации можно создать с помощью специальных графических редакторов: Adobe Photoshop, Adobe Animate, Adobe Edge или Principle.
Дизайнер с большим опытом, прежде чем отправить работу верстальщику, тщательно проверяет ее на наличие погрешностей и недочетов, экономя тем самым время специалистов и свое собственное. Профессионал понимает, как важно для дальнейшей разработки избежать ошибок на начальном этапе.
Бесплатные инструменты для создания макета сайта
Согласно исследованиям, большинство бесплатных ресурсов разработаны на английском языке. Будет достаточно сложно разобраться в нюансах, если вы его плохо знаете. Ниже приведен перечень бесплатных инструментов, которые могут пригодиться.
-
Wireframe.cc
-
Wires
-
InVision App
-
Moqups
-
Альтернатива: макет сайта в Photoshop
-
Альтернатива: создание макета на сайте-конструкторе
-
Типографика
-
Цветовая гамма будущего сайта
-
Юзабилити сайта
-
Продуманный интерактив
-
Оформление содержания
-
Не торопитесь при создании документа в Photoshop
-
Используйте сетку
-
1 — margin;
-
2 — ширина колонки;
-
3 — gutter;
-
4 — стандартный отступ.
-
Отступы между колонками (Gutter).
-
Ширина прототипа.
-
Количество колонок.
-
Ширина внешних отступов (margin).
-
Используйте функционал шаблонизирования
-
Учитывайте такую характеристику сайтов, как динамичность
-
Не зацикливайтесь на форматирование текстов при создании макета сайта
-
Подготовьте материалы для верстки
-
Правильно сохраняйте отрисованные элементы сайта
-
Слишком много элементов
-
Неправильные цвета
-
Нечитаемый текст
-
Заметен ли логотип?
-
Насколько читабелен текст?
-
Не являются ли какие-то элементы лишними?
Ресурс минималистичен и несложен для понимания: тянете мышью четырехугольник и формируете необходимый элемент. Семь дней можно работать в полноценном режиме, затем, если не оплатить тариф, доступным останется небольшое количество шаблонов.
Сервис еще элементарнее, но нужно авторизоваться. Бесплатный режим предоставляет возможность сделать только три проекта. Если сравнивать с другим программным обеспечением — это очень неплохой инструмент. Однако библиотека в бесплатном режиме, как и следовало ожидать, минимальна.
Об этом сервисе специалисты отзываются очень неплохо: достаточно мощный, можно создать качественный прототип, вполне готовый к верстке. InVision App ориентирован на разработку приложений для мобильных телефонов.
Бесплатный режим сервиса дает возможность использовать до 300 элементов для создания одного проекта. Такого количества достаточно для вполне качественной разработки.
Резюме: основным достоинством инструментов является относительная простота интерфейса — необязательно быть первоклассным дизайнером, чтобы разобраться. Главный недостаток — язык, владеть которым нужно на достаточно серьезном уровне. Кроме того, бесплатные режимы предлагают ограниченный функционал, но для новичка этого вполне достаточно. В любом случае попробовать стоит.
Бесплатный макет сайта можно создать и в этом популярном графическом редакторе. Однако в России программный продукт не имеет a free версии – необходимо покупать лицензию. Кроме того, неизвестно что труднее: освоить Photoshop или овладеть иностранным языком, чтобы использовать бесплатные ресурсы для разработки проектов.
Если предложенные решения не подходят, воспользуйтесь конструктором и с его помощью спроектируйте шаблон сайта. Существует много дизайнерских разработок — вам останется только определиться с контентом и наполнить интернет-портал. Шаблоны в большинстве случаев доступны даже без авторизации. Их можно изучить, а затем решить, работать на этой площадке или нет.
Дизайнер выбирает, как и где создавать свои творения: быстро, используя готовые конструкторские решения, или медленно и вдумчиво, изучая попутно английский язык и особенности прототипирования. В любом случае всегда можно попросить помощи у профессионалов.
Как создать макет сайта в Photoshop: пошаговая инструкция
Спланируйте конструкцию будущего информационного ресурса. Воспользуйтесь готовыми образцами прототипов или изучите сайты конкурентов. Важно, чтобы все элементы на веб-страницах были созданы в одном стиле и цветовой палитре, удовлетворяли запросы пользователей и соответствовали имиджу компании.
Шаг 1: Подготовительный этап
Придумайте простое и понятное название для рабочего файла, выберите из меню «Файл» команду «Создать». Заданные по умолчанию программой размеры не подойдут. Разрешение создаваемого документа должно быть 1024×720 пикселей. Сохраните файл, добавьте линейки (Ctrl+R) и подключите сетку (Ctrl+R). В результате правильных действий на рабочем столе появится лист, разлинованный в клетку:
На конечном рабочем варианте сетки не будет. Клетки нужны, чтобы правильно и ровно размещать элементы макета, потом они легко убираются. Сетка настраивается из меню «Редактирования»: выбираете «Настройки», затем «Направляющие — Сетка» и фрагменты. Можно поискать в сети готовые решения, например, CSS-фреймворк-Bootstrap — свободный набор инструментов для создания сайтов и веб-приложений.
На следующем этапе наметьте направляющие. Именно в этой области будет располагаться основное «тело» будущего проекта. Выбираем из меню «Просмотр» команду «Новая направляющая», ориентация должна быть вертикальной. Задаем положение рисунка от левого края документа (по сетке).
Вертикальных линий должно быть две, и располагать их следует на расстоянии не более чем 1003 пикселей (для мониторов с изображением 1024 х 720 ppi).
Создание фона
Разработка привлекательного для пользователя сайта — это настоящее мастерство, творческий союз науки Usability и навыков создания информационных проектов различной тематики. Однако последовательность действий в программе фактически неизменна.
Первым делом определяется фон. Можно не рисовать изображение, а скачать его бесплатно с одного из стоков. Текстуры с небольшими яркими элементами лучше не применять — любая информация в таком окружении будет начитабельна, а приметные картинки обратят все внимание пользователя на себя. Для добавления фона выделите (Ctrl+A) рисунок в программе Photoshop, скопируйте (Ctrl+С) в буфер обмена, затем вставьте в документ (Ctrl+V). В нижнем правом углу появится новый слой, переназовите его («Параметры слоя») и при желании внесите изменения («Параметры наложения»).
Воспользовавшись готовыми решениями, можно полностью преобразовать типовую текстуру, разработав уникальный дизайнерский проект. Выбор цвета для фона — ответственное задание. Не используйте черный и глубокие темные тона, а также ядовито-насыщенные оттенки — читаемость текста ухудшится.
Создание макета сайта
На данном этапе разработки дизайна проекта слои разделяются на группы.
Запомните: всегда придумывайте конкретные заголовки. В противном случае верстальщик (или даже вы сами) в процессе работы непременно запутается.
Допустим, вы создали группу и дали ей название «Хедер». Далее решили добавить в нее подгруппу «Верхнее меню» с новым слоем «Фон». Для этих целей находите справа в углу окна кнопку и нажимаете ее.
Так должен выглядеть результат всех описанных выше действий.
Далее добавляете горизонтальные направляющие, определяете четырехугольный участок и заполняете фон подобранным цветом, затем выделение убираете.
Чтобы добавить пункты меню, нажимаете на инструмент «Текст», решаете, какой шрифт вам нужен, и записываете. Затем вставляете картинки и текст. Придумайте оригинальный логотип с контактами и важной информацией.
Эта статья не предназначена для детального описания работы в программе Photoshop. Как отрисовать те или иные объекты, вставить зрительные эффекты и другие подобные приемы, — об этом вам расскажет специальная литература. Главное — постараться заполнить сайт интересной для пользователей информацией. Не забывайте о формах получения контактов клиента.
Итогом вашей деятельности будет макет сайта, полностью готовый для передачи верстальщику.
Ключевые моменты создания макета сайта
Это оформление наборного текста с соблюдением обязательных требований. Другими словами, в типографике существуют конкретные правила, определяющие наилучшее использование шрифтов для оптимального восприятия человеком. Зная нюансы и тонкости графического оформления, можно удачно выделить значимые части текста. Проектировщики добавляют контрасты, чтобы улучшить восприятие информации. С выделенными фрагментами ресурс становится более читабельным, а дизайн — привлекающим внимание.
Стоит учесть, что для проектирования пользовательских интерфейсов для сайтов или веб-приложений используются только шрифты для веба. Они присутствуют на любом персональном компьютере с любой ОС: Calibri, Georgia, Times New Roman и другие. В проекте рекомендуется задействовать два вида шрифта. Можно, разумеется, и больше, однако общепринято именно такое количество: один используется для выделения текста (заголовков, важнейших слов, сносок и пр.), другой — для основного контента.
Все цвета воспринимаются человеком определенным образом, вызывая различные эмоции. Эту особенность рекомендуется учитывать при разработке макета: яркими решениями выделять важные фрагменты, а в качестве основных оттенков выбрать мягкие пастельные тона. Такими грамотными манипуляциями вы привлечете внимание потенциального покупателя к нужным разделам. Все цвета, так или иначе, влияют на человека — одни отталкивают, другие, наоборот, стимулируют к действию. Существуют и нейтральные оттенки. Иногда заказчик настаивает на определенном корпоративном цветовом сочетании, и в таком случае дизайнеру приходится подстраиваться под эти условия.
Это способность продукта быть понимаемым, изучаемым, используемым и привлекательным для пользователя. Создавая дизайн, нужно стараться, чтобы интерфейс и навигация сайта в конечном итоге были удобны и понятны для посетителя. Ключевые моменты юзабилити подразумевают эффективность в использовании, простоту в освоении, быстрое запоминание адреса для визитеров, ну и, самое главное, удовлетворение потребности пользователя.
Дизайнер в процессе разработки проекта должен определиться, каким образом будут реагировать на действия посетителей включенные в шаблон интерактивные элементы. То есть, если на странице предусмотрена ссылка, ее необходимо подчеркнуть и задать несколько состояний: статична, наведен курсор, после нажатия. Все навигационные компоненты нужно тщательно продумывать, чтобы любому человеку было понятно, что происходит, когда он совершает какие-то действия.
С наполнением веб-страниц контентом сложностей обычно не возникает. Любой интернет-ресурс — это, прежде всего, масса информации, которую собственник сайта стремится донести до потенциального покупателя. В условиях высокой конкуренции большое значение имеет качественно оформленное содержание. Делать это нужно, обращая внимание на акценты и используя обязательные элементы: различные списки, заголовки от H1 до H6, абзацы, предложения, таблицы и др.
О чем еще нужно помнить при разработке макета сайта
Работая с макетом в программе, многие дизайнеры не просматривают диалог, нажимая сразу «ОК». Не стоит торопиться. Образец правильной настройки:
Назначение: Web — действие переведет все величины в пиксели. Работа в веб-пространстве происходит только с ними.
Размер страницы: 960 — общепринятое значение. Если вы новичок и делаете первые шаги в веб-дизайне, придерживайтесь этой цифры. Хотя, конечно, размер может быть любым. Помните также, что полоса прокрутки визуально уменьшит ширину, поэтому при выборе параметра не равняйтесь на разрешение экрана, а установите меньшее значение.
Подсказка: даже некоторые профессионалы не знают, что вертикальный размер можно настраивать отдельно для любой страницы (первая иконка внизу закладки pages). Когда представляешь проект заказчику в PDF, пустые хвосты внизу листа лучше убрать.
Чтобы макет смотрелся презентабельно, необходимо систематизировать составные части. Это касается абсолютно всех веб-проектов.
Сетка — каркас любого шаблона. С нее начинается работа, поэтому выбор имеет большое значение.
Существуют определенные требования:
Величины выражаются только целыми числами и, по возможности, кратными 2.
Перечень характеристик:
Выбрав значения, подставляем их в формулу:
Ширина макета = margin*2 + x*Число колонок + gutter*(Число колонок-1)
К примеру, для вышесозданного файла выглядеть это будет следующим образом:
960 = 10*2 + х*6 + 14*5 х = 145
х – (ширина колонки) имеет значение целого числа, то есть отступы были заданы правильно, иначе размеры следует изменить.
Встречаются макеты с нулевым margin. Казалось бы, зачем делать отступы, если визуально они кажутся лишними? Утверждение актуально для компьютеров, ширина экрана которых позволяет пренебречь параметром, но на мобильном телефоне основной текст просто прилипнет к краю страницы и выглядеть это будет некрасиво.
Обязательно назначьте стандартный отступ — не придется всякий раз выдумывать новые значения. Конечно же, двойной отступ также допустим, а вертикальный с горизонтальным могут не совпадать.
Все элементы добавляйте, используя сетку. Верстальщик скажет вам за это большое спасибо— для него действительно важно, чтобы наполнение было четко структурировано.
Подсказка: в любой момент параметры сетки можно изменить в Layout-> Margins and columns.
На всех интернет-ресурсах различные составляющие интерфейса выдержаны в едином стиле.
А значит, хранить шаблон нужно в master pages, и сомнений «какой из этих файлов верный» в будущем не возникнет.
Это замечание относится и к цветовой гамме. Добавлять оттенки нужно только через swatches и менять одним нажатием.
Сайт — это не газета или журнал, ему свойственна определенная динамика. Поэтому важно включать в макеты элементы в разных свойствах: в статичном положении, при наведении курсора и при нажатии.
Некоторые дизайнеры с опытом работы в печатном издании по привычке уделяют излишнее внимание нюансам обработки текста.
Речь идет, например, об удалении коротких слов в окончании строчки.
Печатная продукция — статический контент. В этом случае есть возможность контролировать отдельные знаки.
Подобная скрупулезная работа уместна при производстве, например, газеты или журнала. Однако на веб-ресурсах вы просто не в состоянии контролировать читательский контент.
Поэтому старайтесь для заголовков выбирать длинные фразы и прочие вещи.
Поинтересуйтесь у frontend-программиста, какие детали будут использованы в картинках. Профессионалы понимают — окно он нарисует border-radius'ом с box-shadow (можно не знать тонкостей работы, однако с опытом становится ясно, что многие элементы создаются на css). Если знаний маловато, уточните детали у программиста.
Сохраняйте результаты работы через save for web.
Мелкие детали, элементы прозрачные или со шрифтами записывайте в png-24.
Графические объекты, изображения и фоны — в jpeg. Отслеживайте размеры файла.
Перечень используемых цветов сформируйте в HEX-формате.
Обязательно предоставьте список всех задействованных шрифтов.
Желательно и очень полезно обговорить с программистом нюансы проекта при личной встрече.
3 типичные ошибки разработки дизайна макета сайта
В работе веб-дизайнера существуют определенные подводные камни, на которые следует обращать особое внимание:
Много — не значит качественно. Если включение того или иного элемента вызывает сомнения, смело его удаляйте. Веб-страница должна содержать исключительно важную и необходимую информацию. Не совершайте ошибок разработчиков вышеприведенного примера.
Применяйте цветовую схему. Подавляющая часть современного программного обеспечения для разработки макетов содержит функцию подбора подходящих оттенков.
Если ваша программа не предоставляет такой возможности, велик риск наделать ошибок.
Эта рекомендация касается не только выбора цвета. Многие новички полагают, что Photoshop — уникальная программа для работы дизайнера. Утверждение не соответствует действительности на 100 %, потому что графический редактор не показывает, например, анимацию и некоторые другие эффекты. Решение, какую программу использовать для создания макета сайта, должно быть обдуманным.
Фон и цвет знаков определяют читабельность текста. Оптимальный вариант — темные буквы на бледном фоне. Ни один пользователь не задержится на сайте, если чтение вызовет у него затруднения. Кричащие оттенки или замысловатые шрифты превратят веб-ресурс в нечто похожее.
Кроме перечисленных выше требований, необходимо учитывать еще один аспект: как веб-страница будет смотреться на различных экранах (планшете, мобильном телефоне, компьютере).
Применяйте сенсорные функции. Современные гаджеты способны откликаться на любое касание, что дает уникальную возможность разработчикам сделать ресурс еще более интерактивным. Кликабельные элементы в варианте для смартфонов располагаются внизу экрана. Макет сайта для планшета выглядит иначе: интерактивные части находятся в том месте, где читатель без усилий достанет их большими пальцами.
Помните о ссылках. Бесполезно добавлять в контент, если они не видны. Ссылки необходимо выделять особым образом, чтобы посетители сайта при желании могли без труда ими воспользоваться.
Обязательно по окончании тщательным образом проанализируйте результат и постарайтесь честно и непредвзято ответить на следующие вопросы:
Проверьте, как выглядит дизайн на разных технических устройствах.
Если ответы устроили — работа выполнена качественно. В противном случае доверьте это непростое дело — создание макета сайта — профессионалам.
