Когда вы завершили поиск идей для дизайна сайта и имеете представление, как должен выглядеть ваш проект, пришло время для дальнейшей работы. Но как ее организовать? Об этом мы расскажем в текущей статье.
Остановившись на определенной идее (или нескольких), переходите к созданию наброска, который поможет визуализировать ваши мысли.
Шаг 1. Составляем план расположения контента
Обычно процесс создания наброска начинают с составления плана расположения контента веб-ресурса. Перед его началом, вам следует определиться с подстраницами вашего сайта, после чего правильно их расположить, чтобы посетителю было удобно пользоваться сайтом.
Начните с вариантов домашней страницы. Ее план включает в себя разделение страницы на категории различного типа во всю ширину. Поэтому просмотр всей страницы будет только вертикальным.
Выделите основные кнопки, которые будут вести на другие страницы ресурса.
Шаг 2. Рисуем блок-схему
Выбрав макет домашней страницы, расширяйте этот концепт и добавляйте в него блок-схему. Она изображает пути разных разделов веб-ресурса, а ее основой является карта сайта.
Главное — помните, что данный этап не несет за собой ничего плохого и хорошего. Зарисовывайте все, что вам пришло в голову и не стирайте это, а продолжайте работать дальше.
Шаг 3. Вводный набросок
Выбрав один из набросков, рассмотрите вводный раздел и определите что надо улучшить.
Если на заднем фоне будет использоваться фото, то для этого необходимо попытаться сделать следующие действия:
-
Центровать и выровнять по левому краю введение.
-
Создать одну или две кнопки.
-
Лого расположить по центру или по левому краю.
Шаг 4. Прорисовка разделов страницы
На данном этапе переходим к прорисовке остальных существующих разделов домашней страницы. Например, к разработке портфолио, странице с отзывами, созданию баннеров, которые будет служить призывом к действию, и проч.
Для выполнения этого шаг в арсенале должно иметься хотя бы несколько идей того, как будут реагировать различные элементы, когда пользователь наведет на них курсором своей мыши, а также знать их непосредственное расположение на странице.
Теперь давайте поговорим о разделе отзывов. Неплохим вариантом для этого раздела может послужить так называемая «карусель», которая будет включать в себя 3-4 отзыва посетителей. Для этого мы воспользуемся тремя значениями: стрелки с двух сторон, обычные пули и крупные профили пользователей. Позже нужно будет выбрать что-то одно.
Что касается баннера, призывающего к действию, то его следует сделать довольно простым. Он будет нести небольшой заголовок и одну кнопку. Теперь вам необходимо будет разобраться, как сделать его более привлекательным для пользователей с помощью Adobe Photoshop.
Шаг 5. Делаем зарисовку для страниц блога
Переходим к следующему этапу — зарисовке идей для страницы блога. Желательно, чтобы эта страница была простой, с обычным макетом контент + сайдбар и крупного размера изображениями. Также продумайте несколько вариантов макетов того, как будет смотреться запись в блоге.
Обязательно на своей зарисовке не забудьте изобразить форму подписки по e-mail. Это одна из важных частей блога и выглядеть она должна привлекательно. Для привлечения внимания используйте окна разнообразной формы.
Шаг 6. Зарисовываем идеи кнопок
Последним шагом зарисовок идей будут наброски разных кнопок. На этом этапе старайтесь больше экспериментировать с формами кнопок. Проработайте возможность использования объемных кнопок. Они добавят определенную изюминку вашему проекту.
Наброски на этом этапе, как правило, являются довольно простыми, и использовать их можно только в таком же проекте. Но вы можете столкнуться и с такими проектами, в которых создавать наброски дизайна придется не один день.