Часто дизайнеры перерисовывают финальный макет несколько раз, потому что заранее не продумали структуру сайта. Нарисовать схему, чтобы сразу обсудить ее с заказчиком, можно с помощью обычного блокнота и маркера. Главное — знать, как обозначаются разные элементы сайта и не пользоваться линейкой.
Что такое скетчи и зачем рисовать сайты
Скетч сайта — это быстро нарисованный план страницы. Он нужен для того, чтобы понять, как сайт будет работать и где будут расположены основные элементы.
Такой рисунок помогает заранее узнать, какие трудности появятся при проектировании сайта. Черновик можно нарисовать сразу на встрече с заказчиком и согласовать расположение главных блоков. Потому что скетч легко перерисовать и внести в него правки. Это простой рисунок, а не готовый макет.
Работа со структурой сайта на первых этапах поможет избежать вопросов и лишних правок уже после того, как дизайнер сделает финальный вариант в графическом редакторе.
А еще схематичный рисунок страницы поможет дизайнеру ничего не забыть при создании готового макета. Скетч напомнит, как расположены все блоки и что еще нужно добавить на сайт.
Инструменты
Скетч сайта — это в первую очередь рисунок, а не строгая схема. А для создания рисунков нужны удобные инструменты. Конечно, можно пользоваться любыми подручными средствами: простыми карандашами, ручками, рисовать в тетради.
Однако дизайнеры выбирают листы формата А4, специальные блокноты для скетчинга и тетради для прототипирования, а наброски делают с помощью гелевых ручек и маркеров с тонким стержнем.
Обычная бумага
Для скетчинга подойдут обычные листы формата А4. Но они не должны быть слишком тонкими. Тонкие листы просвечивают и на них неудобно рисовать маркерами.
На листе А4 можно разместить несколько экранов веб-страницы и написать комментарии для каждой. А чтобы презентовать структуру сайта нескольким людям, можно нарисовать ее на большом листе формата А3.
Скетчбуки
Скетчбуки — небольшие блокноты с плотными листами. Обычно их используют художники для набросков и быстрых зарисовок. Скетчбук идеально подойдет для того, чтобы рисовать сайты и оставлять комментарии.
Так как скетчбук встречается в небольшом формате, его удобно брать с собой и делать наброски в свободное время.
Альбомы
Некоторые дизайнеры пользуются специальными альбомами для прототипирования. В магазинах они не продаются, поэтому их делают самостоятельно. Необходимо скачать исходники с сайта и распечатать на принтере. Можно сделать много копий таких листов и отнести в типографию на брошюровку. Получится полноценный альбом, в котором удобно рисовать сайты.
Где скачать
- Paperkit.net — сервис для генерации удобной клетки для прототипирования.
- Альбом для прототипирования Саши Бизикова.
Маркеры и гелевые ручки
Рисовать сайты удобно тонкими маркерами и гелевыми ручками. Для основных элементов можно выбрать черный цвет, а для создания акцентов и комментариев — красный или зеленый.
Рисунок маркерами и ручками получается живым и ярким. Линии нельзя стереть и исправить, поэтому с первого раза нужно проводить их ровно и точно.
Общие советы
Чем аккуратнее нарисован сайт, тем больше он понравится заказчику. А это значит, что обсуждать структуру и вносить правки будет легче. Схемы сайтов, нарисованные быстро и небрежно, не хочется рассматривать и изучать. Расскажем, как делать скетчи сайтов так, чтобы они были понятными и аккуратными.
Ровно рисовать линии
Не использовать линейку. Когда фрагмент нарисован от руки, он кажется живым и настоящим. А идеально ровные линии делают рисунок скучным.
Упрощать элементы
Скетч — это схема будущего сайта. Поэтому не стоит тратить время на детали и прорисовывать каждый элемент. Не нужно подробно рисовать иконки, писать текст и заголовки.
Подбирать оптимальный размер рисунка
Скетч не должен быть слишком большим. Если рисуете на листе формата А4, то его можно визуально разделить две части. В первой нарисовать сайт, а вторую оставить для комментариев.
Как проводить линии
В основе любого рисунка — прямые линии. Все базовые элементы сайта нарисованы с помощью них. Если линии рисовать ровными, то скетч будет выглядеть аккуратным.
Научиться проводить ровные линии без линейки можно с помощью специальных упражнений. Поэтому стоит потратить несколько часов на освоение этого навыка, он потом пригодится.
Упражнение 1. Отметьте на листе две точки и соедините их линией. Ведите руку плавно и ровно в среднем темпе. Делайте так, чтобы рука не дрожала, а линия не провисала и была достаточно ровной.
Упражнение 2. Рисуйте линии одну под другой или рядом друг с другом. Старайтесь, чтобы они были параллельны друг другу. Не нажимайте на маркер слишком сильно. Легко касайтесь листа, намечая траекторию.
Как рисовать элементы сайта
Сайт — это набор определенных блоков, которые в свою очередь состоят из разных элементов. Чтобы узнать, как делать скетчи сайта, нужно научиться рисовать все базовые элементы.
Заголовки и текст
Все заголовки и обычный текст рисуют сплошными линиями разной толщины.
В скетче сайта не должно быть много деталей, поэтому слова и буквы не используют.
- Вместо логотипа — короткая сплошная линия.
- Заголовок — толстая линия нужной длины.
- Блок текста — несколько разных линий одной толщины.
Изображения и видео
Изображения на странице показывают с помощью прямоугольника с двумя пересекающимися линиями внутри. Если изображение широкое и занимает всю страницу, его рисуют по всей ширине.
Видео обозначают как прямоугольник с треугольником по центру. Треугольник означает кнопку запуска воспроизведения.
Слайдеры
Слайдер рисуют так же, как и картинки, с помощью перечеркнутого прямоугольника. К нему добавляют еще элементы управления: стрелки и пагинатор. Если слайдер небольшой, рисуют маленький прямоугольник. Если это целый экран, растягивают на ширину всей страницы.
Иконки и кнопки
Иконки, кнопки и другие элементы изображают схематично в упрощенном виде. Однако нужно соблюдать форму и делать элементы такими, какими они будут на макете.
Если нужна прямоугольная кнопка, рисуем прямоугольник. Иконку можно обозначить маленьким кругом.
Рисуем страницу полностью
Чтобы нарисовать сайт целиком, нужно комбинировать все элементы: изображения, заголовки и текст, слайдеры, кнопки и иконки.
Например, нужно нарисовать макет сайта для нового строительного материала.
Сначала подумаем над структурой будущей страницы. Так как это лендинг, то нужны такие блоки:
- Привлечение внимания, заголовок и предложение.
- Описание товара или услуги.
- Сравнение с аналогами.
- Примеры результата.
- Цены.
- Отзывы, частые вопросы.
- Форма обратной связи.
На основе этой структуры набросаем рисунок будущего сайта.
Заключение,
или Как заработать на скетчах
Обычно такие зарисовки делает менеджер во время встречи с клиентами или дизайнер, которому предстоит создать макет для будущего сайта.
В любом случае к этому нужно отнестись серьезно: нарисовать, обсудить с заказчиком, утвердить структуру. Все вопросы лучше решать на этапе набросков и черновиков, а не во время создания макетов.
Корректировка финального результата отнимает много времени и у заказчика, и у дизайнера. Поэтому наброски и скетчи на раннем этапе помогут заработать быстрее и сохранить ресурсы.
Рисовать макеты сайтов на бумаге не сложнее, чем делать их в графическом редакторе. Потому что здесь важно не то, как хорошо вы рисуете, а то, насколько аккуратно и понятно изложена информация. Продолжить изучение скетчинга, чтобы создавать наброски сайтов, визуализировать свои мысли и объяснять идеи коллегам, можно на курсе «Скетчинг для дизайнера» от Skillbox.
Курс «Скетчинг для дизайнеров»
На курсе вы изучите техники и приобретете навыки, необходимые для создания скетчей.
Программа курса