Generated with Avocode. Generated with Avocode. Generated with Avocode. Generated with Avocode. Generated with Avocode. hat Generated with Avocode. Generated with Avocode. Generated with Avocode. Generated with Avocode. Generated with Avocode. Generated with Avocode. path40

Скетчинг: как нарисовать сайт на бумаге

Часто дизайнеры перерисовывают финальный макет несколько раз, потому что заранее не продумали структуру сайта.

Что такое скетчи и зачем рисовать сайты

Скетч сайта — это быстро нарисованный план страницы. Он нужен для того, чтобы понять, как сайт будет работать и где будут расположены основные элементы.

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

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

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

Инструменты

Скетч сайта — это в первую очередь рисунок, а не строгая схема. А для создания рисунков нужны удобные инструменты. Конечно, можно пользоваться любыми подручными средствами: простыми карандашами, ручками, рисовать в тетради.

Однако дизайнеры выбирают листы формата А4, специальные блокноты для скетчинга и тетради для прототипирования, а наброски делают с помощью гелевых ручек и маркеров с тонким стержнем.

Обычная бумага

Для скетчинга подойдут обычные листы формата А4. Но они не должны быть слишком тонкими. Тонкие листы просвечивают и на них неудобно рисовать маркерами.

На листе А4 можно разместить несколько экранов веб-страницы и написать комментарии для каждой. А чтобы презентовать структуру сайта нескольким людям, можно нарисовать ее на большом листе формата А3.

Скетчбуки

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

Так как скетчбук встречается в небольшом формате, его удобно брать с собой и делать наброски в свободное время.

Альбомы

Некоторые дизайнеры пользуются специальными альбомами для прототипирования.

В магазинах они не продаются, поэтому их делают самостоятельно. Необходимо скачать исходники с сайта и распечатать на принтере.

Можно сделать много копий таких листов и отнести в типографию на брошюровку. Получится полноценный альбом, в котором удобно рисовать сайты.


Где скачать


Маркеры и гелевые ручки

Рисовать сайты удобно тонкими маркерами и гелевыми ручками. Для основных элементов можно выбрать черный цвет, а для создания акцентов и комментариев — красный или зеленый.

Рисунок маркерами и ручками получается живым и ярким. Линии нельзя стереть и исправить, поэтому с первого раза нужно проводить их ровно и точно.

Общие советы

Чем аккуратнее нарисован сайт, тем больше он понравится заказчику. А это значит, что обсуждать структуру и вносить правки будет легче.

Схемы сайтов, нарисованные быстро и небрежно, не хочется рассматривать и изучать.

Расскажем, как делать скетчи сайтов так, чтобы они были понятными и аккуратными.

Ровно рисовать линии

Не использовать линейку. Когда фрагмент нарисован от руки, он кажется живым и настоящим. А идеально ровные линии делают рисунок скучным.

Упрощать элементы

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

Подбирать оптимальный размер рисунка

Скетч не должен быть слишком большим. Если рисуете на листе формата А4, то его можно визуально разделить две части. В первой нарисовать сайт, а вторую оставить для комментариев.

Как проводить линии

В основе любого рисунка — прямые линии. Все базовые элементы сайта нарисованы с помощью них. Если линии рисовать ровными, то скетч будет выглядеть аккуратным.

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

Упражнение 1. Отметьте на листе две точки и соедините их линией. Ведите руку плавно и ровно в среднем темпе. Делайте так, чтобы рука не дрожала, а линия не провисала и была достаточно ровной.

Упражнение 2. Рисуйте линии одну под другой или рядом друг с другом. Старайтесь, чтобы они были параллельны друг другу. Не нажимайте на маркер слишком сильно. Легко касайтесь листа, намечая траекторию.

Как рисовать элементы сайта

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

Заголовки и текст

Все заголовки и обычный текст рисуют сплошными линиями разной толщины.

В скетче сайта не должно быть много деталей, поэтому слова и буквы не используют.

  • Вместо логотипа — короткая сплошная линия.
  • Заголовок — толстая линия нужной длины.
  • Блок текста — несколько разных линий одной толщины.

Изображения и видео

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

Видео обозначают как прямоугольник с треугольником по центру. Треугольник означает кнопку запуска воспроизведения.

Слайдеры

Слайдер рисуют так же, как и картинки, с помощью перечеркнутого прямоугольника. К нему добавляют еще элементы управления: стрелки и пагинатор. Если слайдер небольшой, рисуют маленький прямоугольник. Если это целый экран, растягивают на ширину всей страницы.

Иконки и кнопки

Иконки, кнопки и другие элементы изображают схематично в упрощенном виде. Однако нужно соблюдать форму и делать элементы такими, какими они будут на макете.

Если нужна прямоугольная кнопка, рисуем прямоугольник. Иконку можно обозначить маленьким кругом.

Рисуем страницу полностью

Чтобы нарисовать сайт целиком, нужно комбинировать все элементы: изображения, заголовки и текст, слайдеры, кнопки и иконки.

Например, нужно нарисовать макет сайта для нового строительного материала.

Сначала подумаем над структурой будущей страницы. Так как это лендинг, то нужны такие блоки:

  1. Привлечение внимания, заголовок и предложение.
  2. Описание товара или услуги.
  3. Сравнение с аналогами.
  4. Примеры результата.
  5. Цены.
  6. Отзывы, частые вопросы.
  7. Форма обратной связи.

На основе этой структуры набросаем рисунок будущего сайта.

Заключение, или Как заработать на скетчах

Обычно такие зарисовки делает менеджер во время встречи с клиентами или дизайнер, которому предстоит создать макет для будущего сайта.

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

Корректировка финального результата отнимает много времени и у заказчика, и у дизайнера. Поэтому наброски и скетчи на раннем этапе помогут заработать быстрее и сохранить ресурсы.

Рисовать макеты сайтов на бумаге не сложнее, чем делать их в графическом редакторе. Потому что здесь важно не то, как хорошо вы рисуете, а то, насколько аккуратно и понятно изложена информация. Продолжить изучение скетчинга, чтобы создавать наброски сайтов, визуализировать свои мысли и объяснять идеи коллегам, можно на курсе «Скетчинг для дизайнера» от Skillbox.

Курс «Скетчинг для дизайнеров»
На курсе вы изучите техники и приобретете навыки, необходимые для создания скетчей.
  • Живая обратная связь с преподавателями
  • Неограниченный доступ к материалам курса
  • Стажировка в компаниях-партнёрах
  • Дипломный проект от реального заказчика
  • Гарантия трудоустройства в компании-партнёры для выпускников, защитивших дипломные работы

Комментарии

0
Чтобы оставить комментарий,  авторизуйтесь
Хочешь получать персональную подборку статей по дизайну?
Подпишись на рассылку

Skillbox