Модульные скетчи



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

Для чего нужны скетчи?


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

Проблемы при разработке скетчей


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

Нарисованные от руки


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

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

Нарисованные в Figma


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

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

Решение


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

Рисование модулей


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



Конвертирование в изображение


Я опробовал разные приложения для сканирования документов и в итоге остановился на «Adobe Scan» (Google Play, App Store). В нем нет возможности выгружать результат в JPG, только в PDF, но это не проблема. Он бесплатный, с приятным интерфейсом и неплохо умеет скрывать клеточную сетку на бумаге.

После сканирования листов и сохранения в формате PDF, нам остается загрузить файлы на компьютер и конвертировать их в JPG. Я использую для этого онлайн-сервис «PDF.io».

Нарезка модулей и сборка интерфейса


Готовые изображения загружаем в Figma и обрезаем нужные элементы и блоки в отдельные модули с помощью фреймов или масок.



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

Остается только создать нужные артборды и сложить в них необходимые модули, как в конструкторе.



Настройка прототипов


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

Итог


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

Веду канал в Telegram о дизайне интерфейсов — @interfacer

Similar posts

AdBlock has stolen the banner, but banners are not teeth — they will be back

More
Ads

Comments 11

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

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

      +2
      Вы не представляете с каким трудом множество людей абстрагируется от непосредственно того, что видит конкретно в текущий момент. И никакие «волшебные пассы руками» и заверения «попробуйте представить себе» не помогают. Он не знает, что хочет и по этому не увидит ничего, кроме того что видит тут и сейчас.

      Метод автора — хорошая попытка разбудить фантазию клиента. Но с другой стороны легко нарваться на ситуацию «давычёсделалито! я совсем не так себе это представлял». Проблема точного техзадания.

      А так то мне, к примеру, было бы быстрее эти формы в IDE набросать и создать минимальное взаимодействие, чем бумажки резать. Но это плохой путь, заказчик скажет «не нравится» и не докажешь ему что это прототип. Так что прав автор, пусть сам выдумывает что хочет, главное потом узнать что за фантазии у него были…

      Распечатать? Не-е-е, тёплый ламповый рисунок ручкой на бумаге для заказчика куда притягательнее, особенно выполненный в цвете! Сразу видно что старались, готовились, а на принтере каждый может. Вобщем перьевой графопостроитель рулит!
        0
        Кстати, сталкивался с таким на практике. Если скетч нарисован «слишком аккуратно», некоторые заказчики начинают его воспринимать как пусть и не окончательный, но макет. И начинают сыпать замечаниями в духе «вот эта кнопка что-то недостаточно яркая».
        И по этой же причине в Balsamiq используется имитация дрожащей хендмейдной линии. Там можно в настройках включить ровные линии, но — см. выше.
        +1

        Так, вроде, ровно для описанной задачи и существует Balsamiq?

          0
          Да, хороший инструмент, который решает эту же задачу. Но он платный и нужно привыкать к интерфейсу, который не самый приятный
          0
          После сканирования листов и сохранения в формате PDF, нам остается загрузить файлы на компьютер и конвертировать их в JPG. Я использую для этого онлайн-сервис
          Скан > pdf > сайт > jpg… Не проще сфотографировать?
          И всё это только для того, чтобы получить библиотеку картинок, которую затем использовать в Фигме для придания «рукописности» некоторым элементам?
          На этапе скетчирования это бесполезная трата времени, ведь цель — показать структуру.
          Набросок — это не вайрфрейм. Фигма — это не только показ структуры.
          Гугл «web design wireframe tool» подсказывает десяток разнообразных инструментов, в некоторых из них уже позаботились о рукописности, ручному созданию которой посвящена данная статья.
          Еще одно преимущество такого подхода — возможность дать клиенту взаимодействовать с будущим интерфейсом. Можно настроить клики на кнопки, переходы между страницами и всплытия окон
          А без такого подхода не получится дать клиенту возможность кликать и переходить?
            0
            Схема абсолютно рабочая. Но мы заходили с другой стороны. Задача: сделать портал. Точнее быстро запроектировать много страниц.

            Сначала в Axure спроектировали несколько страниц. Они были длинные и содержали разные блоки. На одной странице были одинаковые по смыслу элементы: меню, списки, элементы основного поля и т.д. Всего 5 длинных тематических страниц.

            Это позволило сделать так, чтобы одинаковые по смыслу элементы (заголовок в списке, доп. поле к статье) были одинаково оформлены.

            В общем, создали базу блоков. Распечатали на бумаге. Вырезали каждый элемент. Взяли холст (лист ватмана). И расставляли элементы.

            Важно отметить, что изначально это портал и была заложена сетка в 12 колонок.

            На листе быстро и удобно размещать вырезанные блоки. Потом фото и в работу дизайнеру.

            Тоже самое можно сделать многими способами, но так в тот момент было быстрее, а главное понятнее всем участникам процесса. Т.к. проектирование (создание прототипов) на тот момент было нам в новинку.
              +1
              а зачем переизобретать balsamiq/mockflow и прочие? Если вопрос в бесплатности — pencil project
                0
                Да, приятно, что есть такие инструменты. Я о них раньше не знал. Но тем не менее, мой способ тоже может жить как дополнительная альтернатива. Он гибкий и бесплатный, дает возможность отобразить именно то, что нужно для дизайнера в этом проекте
                0
                После сканирования листов и сохранения в формате PDF, нам остается загрузить файлы на компьютер и конвертировать их в JPG. Я использую для этого онлайн-сервис «PDF.io».

                Бумага –> PDF -> online -> JPG???


                Если это устраивает, то почему просто не сфоткать на телефоне? И быстрее и качество то же самое получится а может и лучше...

                  0
                  Каждый может выбрать наиболее удобный для себя способ. Почему бы и не сфотографировать)

                Only users with full accounts can post comments. Log in, please.