Дизайн

Паттерн дизайн: Что такое паттерн и как его создать

23.02.1970

Содержание

Что такое паттерн и как его создать

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

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

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

Паттерн – это порядок

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

Это понятие используется не только в дизайне, «паттерн» – термин обширный. Его можно встретить в психологии, в музыке, проектировании и даже в биологии. Вот несколько примеров:

  • Паттерны проектирования. В программировании понятие паттерна используется в качестве подхода к проектированию как алгоритма для решения проблемы. Например, чтобы спроектировать табурет, необязательно экспериментировать с одноногими прототипами, если сотни лет до вас люди делали их с четырьмя ножками – у вас есть проверенный шаблон.
  • Паттерн в музыке. Ритмический рисунок, басовая партия или повторяющийся гитарный риф – все это паттерны, которые являются неотъемлемыми частями практически любой музыкальной композиции.
  • Паттерн в психологии и UX-дизайне. Набор шаблонных реакций или последовательности действий называют паттерном поведения. В частности, это используется в дизайне интерфейсов для изучения поведения пользователей.

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

Паттерны в графическом дизайне

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

Паттерны используются повсеместно в дизайне одежды и интерьеров. В интерьере узоры чаще всего можно увидеть на шторах, обоях, мебели и керамической плитке. И в одежде вы их точно встречали. У вас есть любимая рубашка с принтом или вышивкой с повторяющимися элементами? Поздравляем, вы – счастливый обладатель рубашки с паттерном!

Фишка паттернов – в последовательности элементов, которая может продолжаться до бесконечности.

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

Посмотрите на пример сложного паттерна от Akeme Brand Identity. Здесь переплетаются женские фигуры, точки и листья, и все это в одной цветовой гамме. У этого узора нет швов: его можно продолжить в любую сторону, и он всегда будет выглядеть одинаково.

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

Итак, перед вами точно паттерн, если:

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

Паттерн как часть фирменного стиля

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

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

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

Настраивает на долгое чаепитие!

Хороший паттерн помогает донести философию бренда до потребителя. Если воздушный цветочный паттерн идеально подходит для романтичной упаковки чая, то это не значит, что нечто подобное можно использовать для всех чаев на свете. Хороший пример того, как паттерн транслирует суть компании, – дизайн фирменного стиля бара Cru. В этом случае дизайнеры в качестве узора использовали морских обитателей. Это сразу дает понять, на какой кухне специализируется этот бар. А еще здесь можно заметить маленькую деталь – буква «u» в части логотипа напоминает рыболовецкий крючок, и его тоже вплели в паттерн.

Паттерны – многофункциональная штука. С их помощью можно не только показать, на чем специализируется компания, или отобразить настроение продукта – разными паттернами можно разделить однотипные продукты в линейке. Именно так сделали дизайнеры компании Alora Coffee Co., которая занимается кофейными капсулами. Каждая коробочка имеет свой узор, обозначающий вкус. Легко запомнить!

Типы паттернов

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

Геометрический

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

Абстрактный

Абстрактные паттерны могут добавить щепотку современного искусства в ваш дизайн. Правда, такие узоры бывают сильно перегружены элементами, поэтому использовать их стоит с осторожностью. Мне очень нравятся абстрактные узоры от художника Tom Abbis Smith.

Его узоры использовали для дизайна коробочек косметической продукции, в качестве принтов для одежды (есть целая коллекция!) и даже для упаковок попкорна.

Минималистский

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

С персонажами

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

Паттерн из логотипа

На этом примере бесшовный паттерн создан на основе элементов логотипа. Такой паттерн работает на узнаваемость – знакомые цвета и формы образуют узор, который теперь наравне с лого ассоциируется с брендом.

Типографика

Основа таких паттернов – буквы или слова, которые комбинируются по тем же правилам: цвет, угол, расстояние. Если вы создаете подобный узор для бренда, убедитесь, что шрифт соответствует его индивидуальности. Например, можно взять букву из названия компании или слово, которое наиболее точно транслирует философию бренда. Посмотрите, какие паттерны создали для DiaTipo SP. Узор, основу которого составляют буквы и знаки препинания, отлично выглядит на носителях разного рода: от значков до баннеров.

Как создать свой паттерн

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

Давайте я покажу процесс создания простого паттерна с логотипом Timeweb. Весь процесс я буду показывать в программе Adobe Photoshop 2020.

  1. Для начала создадим новый документ. У меня это будет холст размером 200х200 пикселей. 
  2. Теперь нужно поместить изображение, которое будет основой для нашего узора. Я подготовилась заранее, поэтому просто помещаю в документ изображение стрелочки, которую я взяла с лого Timeweb. Отрегулируйте размер элемента, захватив его за уголок с зажатыми клавишами Shift+Alt. Изображение будет трансформироваться относительно центра. Удаляем слой с фоном, предварительно сняв с него замочек. Панель со слоями расположена в правой части.
  3. Дублируем наш слой с элементом. Для этого нужно нажать на слой в списке слоев или просто на сам объект, а затем – Ctrl+J. 
  4. Следующий шаг – применяем сдвиг. Выбираем наш новый скопированный слой, затем нажимаем в верхней панели вкладку «Фильтр» – «Другое» – «Сдвиг».
  5. В окне «Сдвиг» необходимо выбрать количество пикселей, на которое будет смещаться объект. Мой холст размером 200х200 пикселей, и я выбираю смещение на 100 пикселей по горизонтали и по вертикали. Убедитесь, что в параметрах выбран пункт «Вставить отсеченные фрагменты». Нажимаем ОК. 
  6. Почти готово! Теперь нужно перейти во вкладку «Редактирование» и нажать «Определить узор». 
  7. Задаем нашему узору какое-нибудь имя и нажимаем ОК. 

Давайте попробуем залить этим паттерном какой-нибудь холст. Я создала документ рандомного размера. Чтобы применить узор к фону, сначала разблокируем его, а затем дважды кликнем мышью. У вас появится окно, отвечающее за стиль слоя. Здесь слева есть пункт «Наложение узора», где в выпадающем меню можно найти узор, который мы создали. Готово!

Заключение

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

Что такое паттерн и как его использовать

Хотите сделать яркий и запоминающийся дизайн? Тогда используйте паттерны! А мы расскажем, когда и как лучше их применять, чтобы на ваш дизайн обратили внимание.

Забавный паттерн с котиками.

Паттерны, или повторяющиеся элементы, можно встретить повсюду, даже в природе: пчелиные соты, коралловые полипы, снежинки. На сайте National Geographic есть специальный раздел, посвященный паттернам в природе. В дизайне паттерны с большим успехом используют уже очень давно. Узоры — обязательная часть платья в любой культуре во все времена: русский народный костюм, шотландская клетка, античные греческие платья. А некоторые бренды берут их за основу своего фирменного стиля, например, знаменитые клетки Louis Vuitton.

Паттерны очень удобно использовать в дизайне, ведь они дают огромное поле для творчества — чередовать в определенной последовательности можно все что угодно: котиков, руки, ноги и головы или бегущих людей. Их несложно переносить на любую создаваемую продукцию: одежду, ручки, папки, блокноты, фирменные наклейки. Посмотрите, как здорово смотрится продукция Equestar или The bean, наверняка многим захочется иметь их стильные вещицы. А как наверно круто гулять по такому яркому Мельбурну или исторической чешской Славонице!

Фирменный стиль Equestar.

Стена в Мельбурне.

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

 

Веб-дизайн

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

Для корпоративных сайтов подойдут сдержанные абстрактные или геометрические паттерны.

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

Кофецентричный паттерн на сайте Forbetter Coffee.

 

Или пойти еще дальше и сделать анимированные паттерны.

Анимированный абстрактный паттерн.

 

Мода

Принты и орнаменты давно стали идентификатором бренда. Например, Burberry очень любит использовать в своих коллекциях клетку (тартан), а Etro известен коллекциями с пейсли или, как его еще называют, «турецкие огурцы».

Тартан Burberry.

Etro paisley pattern.

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

 

Дизайн интерьера

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

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

Дамаск в интерьере.

Меандр в интерьере.

Гусиная лапка в отделке софы.

Так пейсли лучше не использовать.

 

Фирменный стиль

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

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

Фирменный паттерн «Альпари» представляет собой бесконечно повторяющиеся переплетенные линии, которые напоминают гильоширную сетку на купюрах.

Красивый паттерн с птицами для Jota Lamarque.

 

А у магазина традиционной китайской медицины Sumber Waras — национальные китайские элементы.

Китайские мотивы в паттерне для Sumber Waras.

 

Оформление

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

Брендин и упаковка для Piatta Deli.

Оформление книги паттерном.

 

Паттерн на форзаце книги.

 

Паттерн в декоре посуды.

 

Фотография

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

Стулья PressFoto.

Окна PressFoto.

Паттерн в архитектуре.

На PressFoto вы можете найти много разных паттернов: цветочные, линейные, с животными и разные геометрические.

 

Смотреть паттерны

 

Пользуйтесь нашими советами и паттернами — делайте свой дизайн уникальным!

Похожее

Дизайн паттерны — принципы выбора шаблонов проектирования

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

Зачем нужны шаблоны UI?

Шаблоны проектирования UI – повторяющиеся решения общих проблем пользовательского интерфейса. Они представляют собой готовые решения в дизайне UI, избавляют от необходимости «изобретать колесо» и сокращают время разработки дизайна интерфейса.

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

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

Преимущества использования шаблонов:

    • Значительная экономия вашего времени и средств, предсказуемая конверсия без A/B тестов
    • Гарантия что размещение элементов на сайте будет понятно, привычно и удобно пользователю
    • Большой выбор готовых шаблонов в библиотеках шаблонов и UI фреймворках, а также возможность сразу увидеть, как будет выглядеть ваш сайт.

Недостатки использования шаблонов:

    • Шаблоны и настоящий креатив находятся на разных полюсах. Шаблоны дают удобство, но не создают wow-эффекта. Для него нужна индивидуальная разработка дизайна.
    • Шаблоны легко испортить при внедрении. Стоит допустить некоторое количество ошибок и вместо качественного UI получится дешевый.

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

Классификация шаблонов по задачам

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

3 уровня организации шаблонов:

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

Шаблоны дизайнов пользовательского интерфейса делятся на следующие категории:

Шаблоны навигации

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

Пример: вкладки, меню.

Социальные шаблоны

Помогают взаимодействовать с другими пользователями онлайн.

Пример: система баллов, доски, отзывы, чаты.

Шаблоны ввода

Обеспечивают взаимодействие с системой путем ввода информации и получения обратной связи.

Пример: поля для загрузки, текстовые поля, выпадающие списки.

Шаблоны подачи контента

Определяют, как подается контент для работы с ним, поиска и быстрого просмотра.

Пример: таблицы, карточки, галереи.

 

Проверка соответствия конкретного шаблона вашим потребностям включает в себя:

  1. Описание проблемы, связанной с использованием интерфейса, которую нужно решить.
  2. Уточнение ситуаций, при которых возникает эта проблема.
  3. Поиск эргономического принципа, на котором основан шаблон.
  4. Описание сути проблемы, которую можно решить разными способами.
  5. Объяснение, каким образом применение данного шаблона решит проблему и повлияет на удобство пользования сайтом.
  6. Проверку примеров удачного применения шаблона.
  7. Внедрение: как применять шаблон к текущей проблеме.

Как найти необходимые паттерны дизайна на платформах

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

  • UI-patterns. com – популярная база паттернов. Пользоваться ею очень удобно, так как шаблоны дизайна расположены по категориям, а найденные шаблоны можно группировать. Каждый паттерн сопровождается разъяснениями и подобранными вручную наглядными примерами. Также на сайте содержится много полезных статей, которые помогут вам эффективнее использовать шаблоны в ваших проектах.
  • GoodUI – масштабный проект Jakub Linowski. Все паттерны, которые присутствуют на сайте, прошли так называемое A/B-тестирование, призванное выявить, в чем и насколько они эффективны. Пользователям предоставляется доступ к более 100 шаблонов, выбранных на основании 197 тестирований. Приятным бонусом является то, что сайт предлагает 100%-ую гарантию возврата средств, если шаблон не даст вам ожидаемых результатов.
  • Dribble – онлайн-сервис, который объединяет графических дизайнеров, веб-дизайнеров, иллюстраторов. Особенностью сервиса является то, что публиковать работы там могут только получившие инвайт за качественные работы дизайнеры. Чтобы найти нужные шаблоны среди всех выставленных на сайте, воспользуйтесь функцией поиска. На Dribblе есть также продвинутый поиск, но за него придется заплатить. Сервис отдельно выделяет паттерны, получившие больше просмотров или комментариев.
  • Behance – ведущая интернет-платформа для просмотров и публикации творческих работ. На Behance удобно просматривать портфолио понравившихся вам дизайнеров, там же есть подборки паттернов, трендов и идей. Для поиска паттернов просто воспользуйтесь фильтрами и поиском. Также на платформе присутствуют шаблоны, разработанные Evergreen.
  • Awwwards – платформа для подбора паттернов для сайтов с необычным и креативным дизайном. Иными словами: если вы видите сайт, непохожий на другие, но при этом удобный и интуитивно понятный, вполне вероятно, что он создан на паттерне из этой платформы. У каждого шаблона здесь есть оценка за несколько категорий: дизайн, удобство, креативность, контент, то, как сайт выглядит на мобильных устройствах. Таким образом вам будет удобно выбрать, ведь помимо внешнего вида, у вас будет дополнительная важная информация о каждом шаблоне.

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

11.05.2019

Используемые в статье картинки взяты из открытых источников и используются как иллюстрации.

Что такое паттерн и как его использовать в графическом дизайне

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

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

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

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

Паттерн в веб-дизайне

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

Наиболее популярные варианты оформления сайтов с помощтю паттерна:

— Генерируемые паттерны — яркий вариант оформления сайта. Интерфейс реагирует с помощью курсора. Пример.

— Узоры — подчеркивают работу с большим объемом данных.

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

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

Паттерн в фирменном стиле

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

— Использование паттерна добавляет дороговизну бренду.

— Оригинальный узор формирует уникальность и повышает узнаваемость компании.

— Паттерн помогает донести до потребителя ценности и суть деятельности бренда.

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

Z-образный паттерн в дизайне интерфейсов

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

Пользователи не читают веб-страницы, они их просматривают.

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

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

Что такое Z-паттерн, как он работает и почему он работает

Как и следовало ожидать, макет z-шаблона следует форме буквы Z. Дизайн z-паттерна задает маршрут, по которому человеческий глаз перемещается при просмотре страницы слева направо, сверху вниз:

  • Сначала люди просматривают сверху слева направо, формируя горизонтальную линию
  • Далее, вниз в левую часть страницы, создавая диагональную линию
  • Наконец, снова слева направо, образуя вторую горизонтальную линию

Когда глаза пользователей двигаются по этому шаблону, он образует воображаемую букву “Z”:

Пример Z-шаблона. Изображение: Tutplus

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

Когда его использовать

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

Z-шаблон действительно блестяще подходит для дизайн-проектов, где простота и призыв к действию – наиболее важные принципы. Лендинг страница Facebook – пример Z-шаблона

Как его использовать

Прежде чем приступать к разработке макета страницы, важно найти ответы на следующие вопросы:

  • Когда посетитель попадает на вашу страницу, какую информацию вы хотите, чтобы он заметил?
  • В каком порядке вы хотите, чтобы он видел информацию?
  • А чем вы хотите его занять?

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

Очень важно создать направление движения.

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

  • Точка #1. Отправная точка путешествия зрителя. Это идеальное место для вашего логотипа.
  • Точка #2. Поместите предметы, которые вы хотите, чтобы читатель увидел, сначала в верхней части Z. Глаз, естественно, будет следовать по пути Z, поэтому цель состоит в том, чтобы поместить ваш вторичный “призыв к действию” в конце. Поместите больше визуального веса в точку #2 – сделайте кнопку (или другой ключевой элемент) яркой и красочной, чтобы привлечь внимание пользователей и направлять их по ходу Z-паттерна.
  • Центральная область страницы. Необходимо заполнить ее содержимым, которое интересует пользователя, но все же побуждая его обратить взгляд вниз к следующей строке. Например, вы можете поместить изображение герой в центр страницы, чтобы отделить ее верхнюю и нижнюю части и направить глаза по пути Z.
  • Точка #3. Направлять пользователей к окончательному призыву к действию в точке #4. Например, ваша страница продвигает какой-либо продукт, который вы хотите продать. Вы желаете, чтобы потенциальные клиенты увидели рекламный текст, который убедит их его купить, прежде чем они увидят кнопку “Купить сейчас”. Таким образом, вы можете использовать точку #3 для сообщения преимуществ или другой полезной информации для пользователей.
  • Точка #4. Это финишная линия, строка между ней и точкой 3 должна содержать контент, который подталкивает взгляд пользователя к углу. Точка #4 сама по себе является идеальным местом для вашего основного призыва к действию.
Предлагаемый Z-шаблон

Ниже вы можете увидеть два замечательных примера Z-шаблона от Basecamp и Evernote.

Пример Z-паттерна от BasecampПример Z-паттерна от Evernote

Зиг-заг паттерн

Есть одна интересная и полезная вещь, касающаяся Z-паттерна. Мы можем немного расширить этот шаблон, рассматривая его скорее, как серию z-движений, а не одно большое z-движение.

Как вы можете видеть ниже, это именно то, что делает Dropbox, направляя пользователей через несколько ключевых функций продукта и заканчивая своим повторным Z-паттерном с помощью кнопки призыва к действию “Зарегистрироваться бесплатно”. В этом шаблоне кнопка “Узнать больше” играет роль вторичной кнопки призыва к действию, который помогает читателям перейти на следующую соответствующую страницу без необходимости читать весь рекламный текст.

Пример Зиг-заг паттерна

Вывод

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

Читайте также: F-образный паттерн в дизайне интерфейсов

Спасибо!

Подписывайтесь на UX Planet: Twitter | Facebook

F-образный паттерн в дизайне интерфейсов

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

Что такое F-паттерн и как он работает?

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

Этот шаблон был популяризирован исследованием отслеживания движения глаз, проведенным NNGroup. В исследовании приняло участие более 200 пользователей, смотревших на тысячи веб-страниц, и было обнаружено, что основное поведение чтения было довольно последовательным на многих сайтах и при различных задачах. Этот шаблон чтения похож на букву F и имеет следующие три компонента:

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

 

F-образный и E-образный паттерн чтения страницу

NNGroup демонстрирует, как исследования отслеживания движения глаз выявили, что пользователи (в культурах чтения слева направо) обычно просматривают тяжелые блоки контента по шаблону, который похож на букву F или E. Области, в которых пользователи больше всего смотрели, окрашены в красный цвет. Желтые области показывают меньшее количество просмотров, за которыми следуют наименее просматриваемые синие области. Серые области не привлекали никаких фиксаций.

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

Почему мне следует его использовать?

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

Когда мне следует его использовать?

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

CNN использует F-паттерн

Как использовать F-паттерн

F-паттерн буквально дает дизайнеру больше контроля над тем, что увидят.

Определите приоритетность вашего контента

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

Задайте начальные ожидания

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

На этой странице cамый важный контент можно увидеть за несколько секунд. Изображение: tutsplus
Проектируйте для просмотра, а не для чтения

При применении шаблонов думайте о том, где размещать контент:

  • Начинайте новые абзацы заманчивыми ключевыми словами.
  • Люди сначала будут смотреть на наиболее доминирующий элемент (элемент или область с наибольшим визуальным весом) на странице. Таким образом, придайте больше визуального веса тому, что имеет значение: используйте типографику, чтобы указать важность текста (например, попробуйте выделить ключевые слова в тексте) и определенные цвета для выделения кнопок.
  • Раскрывайте только одну идею на абзац и используйте как можно больше маркеров списка.
  • Помещайте наиболее важный контент (например, призыв к действию) с левой и с правой стороны, где пользователь начинает и заканчивает горизонтальный просмотр страницы. Эта кратковременная пауза, когда они спускаются ниже по странице, дает им дополнительное время для анализа информации.
Используйте боковую панель

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

  • Используйте все, что вы хотите, чтобы ваш пользователь видел, но то, что не вписывается в основной контент. Это может быть реклама, список “связанных статей”, виджет социальных сетей и т.д.
  • Используйте ее как инструмент для поиска пользователями определенного контента. Очевидным примером является список категорий, облако тегов, виджет “популярные посты” и т.д.
Medium размещает субнавигацию в боковой панели.
Избегайте скучных макетов

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

Изображение: tutsplus

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

Вывод

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

Читайте также: Z-образный паттерн в дизайне интерфейсов

Спасибо!

Подписывайтесь на UX Planet: Twitter | Facebook

Паттерн проектирования Functional design (Шаблон функционального дизайна) на PHP

Шаблон функционального дизайна (англ. Functional design) — это шаблон проектирования, использующийся для упрощенияпроектирования ПО. Функциональный дизайн гарантирует, что каждый модуль компьютерной программы имеет только однуобязанность и исполняет её с минимумом побочных эффектов на другие части программы. Функционально разработанныемодули имеют предельно низкую связанность.

Преимущества

Системы с функционально-спроектированными частями легче модифицировать, потому что каждая часть делает только то, длячего она предназначена. Так как поддержка программы занимает больше 3/4 жизни успешной системы, эта особенностьявляется решающим преимуществом. Это также делает систему лёгкой для понимания и документирования, что такжеупрощает обучение. Результатом является то, что практическое время жизни функциональной системы больше.

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

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

Методика

Стандартный способ обеспечения функционального дизайна — это обзор описания модуля. Если описание включает связи,такие как «и» или «или», тогда дизайн имеет более, чем одно предназначение, и соответственно возможно будет иметьпобочные эффекты. Предназначения должны быть разделены в отдельные модули для того, чтобы функциональный дизайн былбы достижим.

Критика и ограничения

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

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

Применение к 3D моделированию и симуляции

Последнее время некоторые софтверные компании вводят Функциональный дизайн как концепцию описания Parametric featurebased modeler для 3D моделирования и симуляции. В этом смысле, они имеют в виду параметрическую модель (parametricmodel) объекта, параметры которого связаны с настоящими параметрами дизайна. Например, ось, изменяющая диаметр взависимости от прочности материала и величины силы, приложенной к ней в симуляции. Считается, что таким образомбудет увеличена производительность в процессе проектирования для механических и даже возможноархитектурных/структурных сборок путем внедрения результата анализа методом конечных элементов непосредственно вповедение индивидуальных объектов.

Pattern Design — Бесшовные векторные узоры без лицензионных отчислений

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

Рето Кнехт

Менеджер проектов в Balleristo.eu

«Нам нравится большое разнообразие дизайнов в Pattern Design. Более того, техническое качество дизайнов безупречно… что экономит нам много времени».

Josefine

Менеджер по продукции в Cissi och Selma

«Обратная связь — это просто, когда вы имеете дело с компанией, которая любит дизайн выкройки. Практически лучший продукт и опыт покупок (легкость). В каталоге представлены только великолепные дизайны, вы не найдете мусора, о котором вы бы пожалели о покупке.Качество печати просто отличное и очень помогает ».

Элой Паласиос

Владелец Magnacrom Digital

«Для нашего www.teppich-printer.de мы долгое время искали современные, стильные и повторяемые дизайны.
Pattern Design — это как выбор дизайнов, так и безупречная техническая реализация, к нашему полному удовлетворению».

Питер Саппер

Владелец PhotoFabrics GmbH

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

Карин Херрманн

Владелец little-pieces-design.de

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

Джеймс

Владелец JJ Textiles Manchester

«Идеальная подготовка данных для печати, а также быстрое и несложное общение, включая очень хорошую поддержку в поиске конкретных шаблонов.«

Керстин Стадо

Менеджер по продукту в Hama GmbH & Co KG

Услуги по дизайну выкройки, предоставляемые дизайнерами

  • Что такое дизайн выкройки?

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

  • Что отличает хороший узорчатый дизайн?

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

  • Надо ли что-то готовить для дизайнера?

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

  • Как выбрать подходящего дизайнера выкройки для моего проекта?

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

  • Сколько стоит разработка выкройки?

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

  • В чем преимущество создания выкроек для моего бизнеса?

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

    • Как и с чего начать? — Елена Вилькен


    Она поддерживает жизнь и разжигает мою любовь к творчеству, и ее слова вдохновляли и помогали мне преодолевать воображаемые или вполне реальные границы, неудачи и страхи снова и снова.… Давайте будем настоящими! Когда вы работаете не по найму и ваш доход покрывает семью из 5 человек, давление может иногда сказываться на вас, и не так уж сложно потерять свою точку зрения 🙂

    У нее сердце учителя, и ее слова поддержки и вдохновения были так же ценны для меня, как и технические и бизнес-знания, которыми она делится.

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

    Я безмерно благодарен за такой курс, благодарен за все время на исследования, которое он экономит, и за учителя, который так свободно делится своими знаниями и инструментами.Это изменило правила игры.

    Запись на курс погружения происходит только раз в год, на неделю. Он открылся сегодня утром и будет работать с 19 по 26 февраля 2019 года. << Вы можете найти все подробности здесь.

    Зарегистрируйтесь по ссылке, содержащейся в этом сообщении в блоге, и я пришлю вам бесплатную подарочную карту Amazon на 75 долларов на следующий день после закрытия курса. … Художественные принадлежности, кто-нибудь? 😉

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

    … Я знаком со многими курсами (включая MATS), и это лучший и наиболее полный курс , с которым я когда-либо сталкивался.
    Это дорожная карта того, как стать дизайнером поверхностных рисунков.
    Начиная с технической стороны вещей — наброски, все о Adobe Illustrator для начинающих и продвинутых уровней, фирменный стиль, построение всех типов сложных бесшовных повторяющихся узоров, создание коллекций, создание портфолио — до продвижения вашей работы, выбора отрасли, того, как составьте список контактов, передовых методов общения с компаниями и т. д., а также за кулисами и бизнесом поверхностного дизайна с контрактами, лицензиями, авторскими правами, ведением бухгалтерского учета и финансов и т. д.

    Я повторюсь 🙂 Это действительно стоит каждой копейки.
    … Увидимся на курсе погружения? 🙂


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

    Секрет создания более прочных рисунков поверхности

    Вы когда-нибудь задумывались, как можно улучшить дизайн рисунков поверхности? Возможно, вы хотите, чтобы композиция была более сильной и динамичной или чтобы цвета гармонировали и были более сбалансированными. Жанетта Гонсалес вернулась в блог (вы поймали ее первые две статьи , посвященные проектированию на Spoonflower ?), Чтобы дать вам несколько полезных советов и примеров из Marketplace, которые вы можете использовать, чтобы добиться наилучших результатов шаблоны когда-либо!

    5 вопросов, которые следует задать себе, прежде чем приступить к проектированию

    Какова тема моего дизайна?

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

    Какие мотивы я могу рисовать и как они будут дополнять друг друга?

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

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

    Какой тон / чувство я хочу передать? Есть ли что-нибудь рассказать?

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

    Как люди будут использовать мой дизайн?

    Вы разрабатываете для ткани? Возможно, вы создаете что-то вроде обоев, подарочной упаковки или одежды. Все вышеперечисленное? Это в изысканной гостиной? Дизайн для детской? Представьте, как он будет выглядеть после завершения и как будет использоваться. Это поможет вам выбрать цвета, решить, какие мотивы нарисовать, и соответствующим образом масштабировать дизайн. Найдите еще больше советов по проектированию продуктов.

    Для кого я проектирую?

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

    Доски настроения и мотивы

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

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

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

    Нарисуйте свои мотивы под разными углами.

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

    Тусовка | Wildwood

    Измените масштаб мотивов в вашей композиции.

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

    Pink Chard от katecruise

    Подумайте, как добавить индивидуальности своему дизайну.

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

    Ветеринарная медицина | Presepe 2018

    Меняйте мотивы по стилю, расположению (см. Ниже!) И исполнению в композиции.

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

    Rec Room Madness

    Макет дизайна

    После того, как вы нарисовали мотивы, вы можете расположить их в различных макетах рисунков.

    Брошенные узоры

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

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

    Мод Скандинавский | Limited Color Paisley

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

    Flying High

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

    Посадка на Луну

    Линейные узоры

    Хотите создать горизонтальный или вертикальный макет? Расположите элементы в виде полосатой раскладки. Это отличная альтернатива созданию полосатого узора с однотонными цветами. Вы также можете создавать узоры границ и выравнивать их рядом друг с другом по вертикали или горизонтали.

    Колючие кактусы и суккуленты | Совообразные на Луне

    Мозаичные узоры

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

    Сумерки марокканские | Star Tile

    Работа с цветом

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

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

    Protea Garden

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

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

    Space City Mono

    Не можете определить правильные цвета? Используйте инструмент «глазная капля» в программе дизайна, чтобы извлекать цвета из изображений на доске настроения.Ваша доска поможет сообщить общие цвета, используемые в теме, для цветовой палитры вашего дизайна. Также подумайте об использовании природных цветов или поищите цветовые палитры в Интернете. Design-Seeds — отличное место для начала!

    Использование этих советов и их учет при создании выкроек поможет вам разработать комплексный процесс и новые забавные решения для создания выкроек. Прежде чем вы это узнаете, вы будете готовы представить свой дизайн на предстоящем конкурсе Spoonflower Design Challenge!

    О гостевом блоггере

    Жанетта Гонсалес — художник и дизайнер из Лос-Анджелеса.Ее многопрофильная студия специализируется на дизайне поверхностей, дизайне одежды, иллюстрациях и графическом дизайне.

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

    Паттерны проектирования

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