Как и многие профессиональные дизайнеры, автор сегодняшней статьи является большим фанатом каркасного моделирования (создания контурной схемы веб-страницы). Несмотря на то, что этот процесс ассоциируется с веб-дизайном, тот же принцип используется во всех творческих профессиях: дизайнеры логотипов начинают с зарисовок, художники-мультипликаторы — с эскиза раскадровки, а дизайнеры UI — с каркасного моделирования.

В этой статье вы найдете несколько советов, связанных с этим увлекательным занятием. В самом начале процесса дизайнер становится чертежником-конструктором. Каркасное моделирование создано для составления и планирования больших концептов. Более детализированный процесс может включать зарисовки небольших объектов, таких как иконки или формы заполнения.

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

Практикуйтесь на существующих сайтах

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

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

Макет в миниатюре

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

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

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

Рисование идей

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

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

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

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

Полезные ресурсы

Несмотря на то, что каркасное моделирование за компьютером намного практичнее (особенно по готовым шаблонам), автор статьи предпочитает использовать бумагу и карандаш (или ручку, если вы рисковый парень). С зарисовки на бумаге потом просто и быстро создать чистовой макет в программе типа Photoshop.

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

Sneakpeekit Digital Stencil

Behance Action Method

Gridbooks

Web Design Sketchbook

Paper Browser

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

Автор урока Jake Rocheleau

Перевод — Дежурка

Смотрите также:

• Пять основ веб-дизайна
• Как создать руководство по стилю для веб-дизайна 
• Рекомендации по SEO для веб-дизайнеров