Паттерн что это такое в дизайне


Что такое фирменный паттерн и зачем он нужен компании?

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

Что такое паттерн?

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

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

Зачем нужны паттерны? Какую пользу они приносят?

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

Уникальный узор поможет вашей корпоративной символике ярко выделиться на рынке, сделает ее более заметной и узнаваемой. Более того, со временем этот паттерн будет ассоциироваться с вашим брендом сам по себе, без дополнительного упоминания компании или продукта. Например, всем известен знаменитый паттерн Louis Vuitton (золотистые орнаменты и перекрещенные буквы LV на коричневом фоне) или же не менее известный паттерн бренда Burberry (красно-бело-черно-желтая «клетка»).

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

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

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

Как и где можно использовать паттерны?

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

Корпоративный сайт и социальные сети

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

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

Продукция и ее упаковка

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

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

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

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

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

Носители фирменного стиля

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

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

Как получить оригинальный паттерн при помощи сервиса Logaster?

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

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

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

www.logaster.ru

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

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

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

Паттерны, или повторяющиеся элементы, можно встретить повсюду, даже в природе: пчелиные соты, коралловые полипы, снежинки. На сайте 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 вы можете найти много разных паттернов: цветочные, линейные, с животными и разные геометрические.

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

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

studio.everypixel.com

Паттерны и текстуры в дизайне – в чем отличие?

Дизайн

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

К примеру:

Вот, что происходит, когда соединяешь текстуры – видны швы:

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

Паттерны:

 

Узор из паттернов:

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

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

Простые: 

Сложные паттерны:

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

Кожа:

Дерево:

Кирпичи:

Асфальт: 

Холст:

Бетон:

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

Итак, мы выяснили, что паттерны – важная часть дизайна. Их можно использовать для печати на любой поверхности – на календарях, ежедневниках, визитках, на одежде, наклейках и т.д. Текстуры могут использоваться как подложка или фон, а также служить основой, из которой также можно создать паттерн в графических программах Adobe Photoshop или Adobe Illustrator.

Примеры использования текстур и паттернов:

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

Оформление книги:

Упаковка:

Сайты:

Печатная реклама:

И напоследок – если вы не хотите использовать в дизайне уже готовые паттерны и текстуры, вы можете создать их самостоятельно.

Пример создания паттерна:

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

  Ознакомьтесь с дополнительной информацией об услугах нашего агентства в этой области. 
Источник 1, источник 2, источник 3

triza-media.ru

Как использовать паттерны и текстуры в дизайне сайтов

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

Что такое паттерны и текстуры

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

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

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

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

Создание паттернов

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

Чтобы подробнее рассмотреть, как образуются такие картинки, откроем Photoshop и создадим изображение из паттерна.

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

Эта вкладка находится в разделе «Редактирование -> Управление наборами». В окне можно увидеть узоры и текстуры, которые встроены в программу. Также можно загружать свои паттерны с помощью соответствующей кнопки.

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

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

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

Как паттерны используются в дизайне

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

Фон

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

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

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

Фон элементов

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

Здесь паттерны и текстуры используются в шапке сайта и в оформлении фильтра. Такой способ выделяет эти элементы среди остальных и придает сайту определенный стиль.

Отдельные элементы

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

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

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

Такие паттерны используются как отдельные элементы, дополняющие контент и вызывающие определенные эмоции у пользователей.

Декоративные детали

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

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

Особенности использования паттернов и текстур в дизайне

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

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

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

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

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

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

Привлечение внимания к элементам

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

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

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

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

Создание глубины

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

С помощью таких текстур можно не только выделить элементы на макете, но и создать ощущение глубины, объемности макета. Рельефности можно добиться как такими простыми текстурами, как на примере, так и довольно сложными анимированными паттернами. Главное правило при таком использовании паттерна - визуально распределить элементы так, чтобы они гармонично смотрелись на макете и были одинаково «рельефными».

Эмоциональное взаимодействие

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

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

Другой пример:

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

Связь паттернов и юзабилити сайта

Несмотря на перечисленные преимущества паттернов, возникает вопрос: как узоры и текстуры влияют на юзабилити сайта? Хорошо ли они влияют на удобство пользования ресурсом? Рассмотрим эти вопросы подробнее.

Главное - стиль

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

Отвлечение внимания

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

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

idbi.ru

Что такое дизайн-паттерны

Дизайн-пáттерн — это маленькое стандартизированное дизайн-решение. Концепция того, как должен работать элемент интерфейса или логическое решение задачи.

В разработке ПО под паттернами подразумевается нечто подобное, но с точки зрения программирования.

Я называю паттернами то, что в когнитивной психологии называется прототипами.

Механизм обучения

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

Почему нужны

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

Паттерны существуют в первую очередь в коллективном сознании.

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

Соответствие паттерну

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

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

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

Опасность паттернов

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

Пример грубого нарушения паттерна

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

На основе отклика системы пользователь будет моделировать новый паттерн для текущего случая: «на этом сайте ссылки разворачивают меню».

slashdesigner.ru

Термины графического дизайна для не дизайнера

Леттеринг, кёрнинг, фавикон — что это? Термины графического дизайна для не дизайнера

Оставьте свой номер телефона и наш менеджер свяжется с Вами и ответит на любые вопросы

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

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

Часть фирменного стиля, который мы разработали для конференции тестировщиков

Логотип Логотип — это не просто красивая картинка. Это фирменный знак, с которым клиенты ассоциируют бренд. Логотип не обязан описывать сферу деятельности: Apple не продает яблоки, а Starbucks — русалок, и тем не менее эти бренды известны каждому. Логотип не может быть узнаваемым сам по себе — чем чаще люди видят логотип на разных носителях, тем быстрее запоминают.. Поэтому иметь хороший лого мало, важно еще и грамотно его использовать. Кроме того, логотип должен хорошо читаться, не теряя детали, — и на небольшой визитке, и на рекламном баннере. В России виды логотипов никак не различают, однако в англоязычных странах разделяют непосредственно сам логотип (logo), его шрифтовую (logotype) и символическую (logomark) части. Шрифтовая часть — стилизованное название компании — может выступать как самостоятельный лого. Например, Кока-кола отлично ассоциируется со своим лого и в символе не нуждается:

Такой же автономией и узнаваемостью может обладать и просто символ:

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

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

Гайдлайн

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

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

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

Примерили упаковку для вок-кафе

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

Паттерн для кафе Like Waffle

Негативное пространство В детстве многие вырезали снежинки из бумаги. Каждая снежинка получалась неповторимой из-за вырезанных фигур, которые образовывали пустое пространство. Это и есть негативное пространство, когда пустота превращается в полноценный объект. Этот прием часто используется при создании логотипов. Известный пример — логотип компании FedEx и стрелка между буквами E и X. Один раз увидишь — никогда не развидишь.

Еще пример — логотип для студии интерьеров:

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

Фавикон для видеоблога Геннадия Орлова

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

Если подбираете шрифт для своего проекта, попробуйте поискать в нашей статье: «11 бесплатных шрифтов с кириллицей».

Гарнитура

Шрифты объединяются в гарнитуры. Проще объяснить значение этого термина при помощи его английского аналога — font family — семейство шрифтов. Гарнитура включает в себя несколько шрифтов, объединенных одними стилистическими особенностями, например наличием засечек. Times New Roman, Gotham, Helvetica — это гарнитуры, т.е. наборы шрифтов, а не сами шрифты.

Леттеринг

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

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

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

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

Интерлиньяж Интерлиньяж — это расстояние между строками текста. Обычно интерлиньяж делают примерно в полтора раза больше размера самих букв — это помогает достичь баланса между текстом и «воздухом». Растровые изображения (растр) Представьте набор для вышивания крестиком. Схема вышивки — это сетка из цветных квадратов. На самом деле из такой сетки с квадратиками (пикселями) состоят многие изображения — они-то и называются растровыми. Попробуйте увеличить фотографию или цифровой рисунок, и вы сразу увидите много квадратных ячеек. Самая известная программа, которая работает с растровыми изображениями, — Фотошоп. Растровое изображение получается детализированным, довольно точно передает цвета, градиенты и полутона. Главный минус таких изображений — их невозможно уменьшить или увеличить без потери качества. При увеличении становятся видны пиксели, а при уменьшении часть из них теряется. Векторные изображения (вектор) Векторные изображения состоят из точек и линий, а не из пикселей, как растровые. По сути, каждое векторное изображение — это сочетание геометрических объектов: кривых, многоугольников, кругов и т.д. С вектором работает, например, Адоб Иллюстратор. Векторное изображение можно увеличить и уменьшить до любого размера без потери качества. Поэтому логотипы всегда делают в векторе: их легко масштабировать и для маленькой визитки, и для огромного рекламного щита. Однако добиться фотографической точности с помощью векторной графики почти невозможно — потребуется очень большое количество точек и кривых. Цветовые модели: RGB, CMYK, Pantone Аббревиатура RGB расшифровывается как Red, Green, Blue (красный, зеленый, синий). В RGB из этой триады формируются оттенки цветов на экране монитора. Все изображения, которые вы просматриваете через компьютер, смартфон, телевизор, отображаются в этой цветовой модели. Цветовая модель CMYK используется в типографии. Принтер, печатая изображение, использует и смешивает краски четырех цветов: голубого (Cyan), пурпурного (Magenta), желтого (Yellow) и черного (ключевого цвета, Key color). Многие цвета RGB не могут отобразиться в CMYK — при печати они тускнеют, и оттенки получаются совсем не те, которые ожидали. Чтобы цвета на печатной продукции передавались без искажений, придумали цветовую модель Pantone. Для каждого оттенка Pantone указано точное процентное содержание цветов CMYK. Бумажные каталоги Pantone есть в каждой типографии. Выбрав необходимый цвет из каталога, можно быть уверенным в том, что при печати получится точно такой же цвет. Как итог Мы рассказали про некоторые важные термины, с которыми вы, скорее всего, столкнетесь при работе с дизайнером или дизайн-студией. Этот список, конечно, только верхушка айсберга, поэтому он будет постоянно пополняться.

Текст подготовила Екатерина Киселева

Нужен логотип?

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

blog.logomachine.ru


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

Календарь

ПНВТСРЧТПТСБВС
     12
3456789
10111213141516
17181920212223
24252627282930
31      

Мы в Соцсетях

 

vklog square facebook 512 twitter icon Livejournal icon
square linkedin 512 20150213095025Одноклассники Blogger.svg rfgoogle