Создайте свою визуальную библиотеку: советы и задачи по дизайну

Опубликовано: 2020-12-17

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

Что такое визуальная библиотека?

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

Приведем пример: как дизайнеру перед вами стоит задача создать новый веб-сайт.

Какой сайт? Вы можете спросить. Что ж, это все, что у вас есть. Вызов от коллеги. Да еще у тебя есть час на это. Это задача, которую мы сделали в DevriX, и вот один из результатов через 3600 секунд:

Дизайн Алекса Димитрова

Времени на рассмотрение темы было не так много, так что она попала прямо в шапку. Какие компоненты есть в заголовке?

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

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

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

Как создать визуальную библиотеку

Хотя самый простой ответ - «создать больше дизайнов», он не очень удовлетворителен просто потому, что для этого нужно гораздо больше. Что важнее, так это разнообразие. Строим разные конструкции. Один из подходов к этому - редизайн больших сайтов.

Вот несколько примеров:

Facebook:

Источник изображения: Dribbble

Gmail:

Источник изображения: Dribbble

Twitter:

Источник изображения: Dribbble

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

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

Источник изображения: Dribbble

Чтобы иметь возможность придумывать столько конфигураций и макетов, значит иметь хорошую визуальную библиотеку. Знать, что вы можете это сделать. Это похоже на то, что рядом с вами кто-то говорит: «Нарисуйте мне рамку», затем «Добавьте заголовок», и вы делаете это, не задумываясь. Все эти решения приняты, потому что вы уже это сделали. Действительно, он также следует основам дизайна, но вы не можете постоянно дотягиваться до своих заметок или книг. Это похоже на обучение ИИ - вам нужно строить шаблоны, используя «успешный порядок элементов».

Всем визуальным художникам необходимо создавать библиотеки

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

Искусство Ким Чон Ги

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

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

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

Графика Сюзанны Хельми

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

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

Источник изображения: Artstation

Проблемы, связанные с компонентами веб-дизайна

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

1 - Кнопки

Один из самых фундаментальных компонентов веб-сайта. Пуговицы бывают всех форм и размеров. Вы можете установить градиенты, изменить цвета, добавить текстовую тень, добавить границы (более одной), добавить стиль глянца, очертить их, изменить их форму (квадрат, закругленные углы, круг), некоторые поставляются со значками, другие имеют значки, разделенные в суб-кликабельная область.

Источник изображения: Dribbble

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

2 - Карты

Карты или коробки - еще один очень распространенный компонент. Он может содержать любой тип контента, хотя некоторые общие элементы могут быть верхним / нижним колонтитулом + основным содержимым.

Источник изображения: Dribbble

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

3 - Комментарии

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

Источник изображения: Dribbble

Задача: Пример выше демонстрирует именно это. Теперь попробуйте придумать что-нибудь, связанное с компонентом комментариев - комментарии пользователей, статусы обновления задач (которые находятся в области комментариев), комментарии в чате, что угодно. Все, что находится между 7-10 вариантами, будет хорошим числом. Опять же - постарайтесь, чтобы все они были разными. Исследуйте больше, находите идеи, просматривайте сайты.

Цель этих упражнений - найти способы выполнять общие элементы новыми способами, о которых вы раньше не знали .

4 - Слайдеры

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

Источник изображения: Dribbble

Задача: просмотрите Интернет и различные дизайны, чтобы узнать больше о различных макетах и ​​подходах. Может быть, взгляните на библиотеки JS, где они делают слайды, чтобы увидеть, что у них есть. Оттуда создайте 10-15 различных дизайнов для слайдеров. Опять же - постарайтесь сделать каждый дизайн как можно более отличным от предыдущего, а не просто использовать небольшие улучшения.

5 - Формы ввода

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

Источник изображения: Dribbble

Задача: ваша задача здесь - найти самую странную информацию, которая может понадобиться кому-то на веб-сайте. Загрузите PDF или PSD (выберите один), информацию о кредитной карте, добавьте рецепт для файлов cookie, рассчитайте пропорции смешивания красок, создайте конфигуратор автосалона. Все, что приходит в голову, чем уникальнее, тем лучше. Снова продолжайте просматривать веб-сайты, чтобы увидеть реальные решения. Создайте не менее 10 различных уникальных форм с уникальным дизайном.

Резюме

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

Использование вышеперечисленных задач в качестве домашнего задания поможет вам пополнить свое портфолио. Не ограничивайте себя только 5 упомянутыми задачами, выходите на улицу, просматривайте веб-сайты, делайте редизайн, изучайте их и продолжайте развивать свои дизайнерские чувства и создавать собственную визуальную библиотеку!