Основные элементы дизайна, участвующие в создании композиции

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

Элементами дизайна являются:

- Точка
- Линия
- Форма, фигура
- Движение
- Цвет
- Узор
- Текстура
- Текст, шрифт

Точка

Точка - простейший элемент визуального дизайна

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

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

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

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

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

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

Точки или пятна можно эффективно использовать в изображениях:

Подчеркнуть ключевую идею

Привлечь внимание

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

Линия

webmaster - Графика в веб-дизайне

Из рубрики: Веб-дизайн глазами профессионалов, graphics web-design - виртуальная школа веб-мастерства, статьи по графике.

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

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

Линия

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

Линия может использоваться независимо, создавая формы даже в тех случаях, когда сами линии незамкнуты. Это можно проследить по иллюстрациям приведенным здесь, например по рисункам Сола Штайнберга (Saul Steinberg) (см. начало параграфа), либо по минималистским проволочным скульптурам Александра Кальдера (Alexander Calder). В о всех этих случаях несколькими линиями раскрывается огромная информация о предмете.

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

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

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

Выразительные свойства линии

Определенные расположения линий несут в себе определенное значение.

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

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

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

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

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

Одна из характерных черт архитектурного стиля Френка Ллойда Райта (Frank Lloyd Wright) - это использование сильных горизонтальных элементов, которые подчеркивают связь конструкции с землей.

Вертикальные линии создают ощущение высоты, полета и воздушности.

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

Диагональные линии создают ощущение движения или направленности, оживляют изображение.

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

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

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

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

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

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

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

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

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

3. Фигура
Когда линия пересекает себя или другую линия, то образуется фигура. Существуют геометрические фигуры (круг, квадрат, прямоугольник, треугольник) и органические фигуры (очертания листа, ракушки, цветка итд).

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

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

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

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

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

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

Мнение исследователя конверсии Брайана Мэсси, о том, как должна выглядеть главная страница интернет-ресурса с коммерческим предложением:

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

Подход уверенного лидера на рынке: главная страница Reebok микросайта

Правила оформления главной страницы продающего сайта

1. Яркий заголовок усилен подзаголовком, которому релевантно изображение
2. Мощный призыв с тонкой анимацией, подчеркивающей предполагаемое намерение
3. Положительный образ, привлекая внимание к предложениям бренда, стимулирует потребительское желание обладать понравившимся
4. Hero-хэдер утверждает в сознании посетителей мысль о полезности продукции, показывая, как ей пользуются другие

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

1. Прежде, выгоды предложения. Для узнаваемости сайта торговой марки Pepsi-Cola, достаточно одного имени. А вашего? В известной книге «не заставляйте меня думать!» Стив Круг рассуждает: «Вы задержитесь на сайте, не поняв его назначения?» И все же в современном коммерческом секторе, видимо не желая отставать от упомянутого супербренда – все стремятся в первую очередь улучшить потребительское мнение о продукте / компании:

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

Заполнение полей форм, само СТА-действие - это стресс. Преодолеть его помогает интерес к предложению, а не кнопки «Подписаться», «Купить». Смягчите однословную категоричность, что-либо предлагая: Узнай рецепты, Запросить демонстрацию. Краткое информирование не перегружает задачей и не даст почувствовать себя потерянным. Что более важно: вместо «WEB брошюры» сайт становится продающей и лидогенерирующей машиной.

3. Социальные доказательства. Общественная полезность – мерило, по которому принято «оценивать» торговое предложение.

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

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

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

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

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

Хороший заголовок - как пионер:

• Всегда готов! – сфокусирован на удобстве для потребителя
• Всем ребятам пример! – адекватный / «экспертен» / апеллирует к авторитетному мнению, как «Методы оптимизации главной страницы вашего сайта от Matt McGee»

Плохой заголовок - как сосиска:

• Отваривать нужно
• Конверсий быстрых не жди – полуфабрикат нуждается в доработке для годности

Стоит ли его нагружать задачами, от которых теряется меткость? Детализировать уникальное предложение можно подзаголовком, применяемым в паре и усиливающим эффект… . Юзабилити-исследование от KISSmetrics:

Идеальный заголовок - 6-ти словный (3+3): в поисковой выдаче беглый взгляд охватывает три слова (с начала или с конца). MOZ называет оптимальным Title в 57-59 знаков

Признаки эффективного заголовка:

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

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

Согласно исследованиям 3M Corporation:

83 % решений принимаемых человеком основаны на визуальной информации. Визуальный образ – то, что скорее запомнится и доверять будут ему. Зрительное воспринимается быстрее текстового в 60 тыс. раз!

• Для оптимизации пользовательского опыта
• Чтобы общаться на одном языке с нужной аудиторией

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

• Расположение на странице
• Пользовательское восприятие (UX)
• Остальная SEO-стратегия / социальный маркетинг
• Уровень конкуренции / временной фактор / сама полезность

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

Возрастающее влияние фактора «полезности» вполне ожидаемо:

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

Уделите внимание типу трафика: брендированный / нишевые запросы / long tail, чтобы не упускать важных клиентов.

8. Сделайте главную страницу удобной в пользовании. Юзабилити часть UX и если принести в жертву своей индивидуальности (чего-то еще), интересы посетителя имеющего и другой опыт, он ответит:

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

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

10. Привлекательная идея vs Проработка элементов. Веб-аудитория оценит привлекательность, явно относящуюся к делу – когда качество элементов безупречно, а их необходимость очевидна.

Лирическое отступление. Древний ваятель на вопрос, как он создает скульптуру:

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

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

Гибкие решения от скульптора Хосе Лопес: «открывая гранитную страницу»

Еще раз о важном:

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

Читайте также: UX-дизайны интернет-магазинов: хорошие и плохие. 21 пример

Главные страницы сайтов™ прод. брендов

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

Эко Хлеб

Достойное оформление – сайт Эко-Хлеб™ с интернет-магазином:

на гл. страницу

• Качественная отрисовка элементов и фотосъемка продуктов
• Уникальность фирменного ретро-стиля с красивым логотипом

Персона

Главная оформлена как промо-страница - сайт торговой марки на Битриксе:

на гл. страницу

• Запоминающийся логотип производителя продуктов питания. Слоган разработан под «товар-локомотив»
• Для имиджевых целей подобраны / отрисованы / подогнаны элементы
• При прокрутке анимированное меню сворачивается в иконку; меняется по секциям тип кетчупа (спецэффект)

Читайте также: 40+ лучших дизайнов сайтов о еде и кулинарии

Крошка Картошка

Интересный вариант оформления - промо-сайт фастфуд бренда:

на гл. страницу

• Позитивный брендинг с логотипом концептуального блюда
• HotSpot тултип-подсказки занимают посетителя познавательными описаниями
• Аудиомаркетинг – послушайте гимн компании

Бургер Кинг

Сайт сети ресторанов быстрого питания с декоративным шрифтом:

на гл. страницу

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

Впечатляющее визуальное воздействие

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

Apidura

Главная страница продающего сайта – английский бренд велотоваров:

на гл. страницу

• Впечатляющие фоны с градиентным переходом к разделяющим иконкам. Стильное полупрозрачное меню, контурные кнопки и
• Феноменальный способ продвижение бренда дизайном: сайт уже получил 10000 пинов на досках Pinterest!

Яркий смысл флэт дизайнов

Читайте также: Сайты в стиле флэт: 20 нестандартных дизайнов

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

Все больше flat-интерфейсов выражают стилистику и особенности позиционирования бренда в интернете / за пределами сети. Смотрите сами, как «упрощения» фирменной индивидуальности сокращает дистанцию между бизнесом и клиентом.

Moosend

Пример редизайна главной страницы – позитивный сайт с красивой типографикой:

на гл. страницу

• Единая гарнитура с одним шрифтом для заголовков & UI, повышая узнаваемость сайта облегчает восприятие его страниц
• Доработано оформление: в логотип вложен смысл бренда, поля регистрации вынесены на первый экран, новые анимации

Tribute Media

Американское веб-маркетинговое агентство – лаконичный минимум (CMS Drupal):

на гл. страницу

• Стрелки и анимированные иконки указывают на выдвижное меню / дублирующую навигацию по вкладкам
• Призыв размещен в первом экране по F-схеме просмотра: лого> цифры> кнопка

Bizible

Главная страница с отличными идеями – сайт небольшой компании:

на гл. страницу

• Красивый сайт сразу привлекает рифмованной связкой «заголовок + подзаголовок»
  
• Мягкая выразительность UI с тоновой проработкой и размытием текстуры фона. Социальные доказательства и отзывы встроены в фоны каруселью
• Формы с названиями полей в контексте поясняющих предложений – хорошее юзабилити при уникальном дизайне

Zendesk

Редизайн главной страницы – сайт современной компании с эффектным контентом:

на гл. страницу

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

Читайте также: Анимация по правилам UX-дизайна: полное руководство

Эффектные страницы с интересными дизайн-решениями

Сегодня не удивишь wow-эффектом на «Главной». В тренде – полезная анимация.phive.pt – португальский фитнес-сайт с интерактивным дизайном на JS и jQuery.

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

Ged Group

Пример последовательного визуального стиля – сайт с jQuery эффектами:

на гл. страницу

• Векторная графика согласует главную с внутренними страницами. Больше чем эстетика! – пользователь увереннее на сайте с четко определенной идентичностью
• 2-6х фигурная сюжетная сцена прорисовывается анимированной предзагрузкой
• Ненавязчивые интерфейсные микровзаимодействия, эффект Кена Бернса для картинок и скролл-анимации

Medpraktika

Клиентоориентированный дизайн главной страницы медицинского сайта:

на гл. страницу

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

Главная страница как лендинг

Читайте также: 30+ адаптивных лендинг пейдж шаблонов на HTML (бесплатные, премиум)

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

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

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

01. Яркие цвета

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

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

• AdaptD.com - Использование цвета схожей насыщенности и яркости позволяет выглядеть сайту как единое целое.
• Joshua Goodwin - Использование оттенков одного яркого цвета может работать также хорошо.
• Noe Design - Даже ограничивая использование ярких цветов только заголовками, можно сделать еще больше.
• Design Slurp - Добавление эффектов освещения к яркой цветовой схеме можно сделать сайт более поп.
• Tracy Apps Design - Смешивание яркого цвета с более приглушенным, делают яркими цвета более выделяющимися.

02. Градиенты и световые эффекты

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

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

• Charlie Gentle - Сочетание градиентов и световых эффектов может иметь большее влияние, когда основные цвета приглушённые.
• Fred Maya - Огромный спектр возможных эффектов освещения можно использовать, как объединение углового освещения с волшебными пылевидными пятнами.
• Leihu.com - Другая комбинация тонких градиентов с легкими артефактами.
• The Open Video Alliance - Лёгкий градиент над фоном - сразу поднимает дизайн на новый уровень.
• Squarespace - Еще один сайт с тонким эффектом освещения в заголовке.

03. Прозрачность

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

• Chris Arbini - Прозрачность над рисунком фона работает очень хорошо.
• Design Attik Прозрачные блоки для работы с фоном фото выглядят еще лучше.
• Envato - 1 пиксельная непрозрачная рамки вокруг вашего прозрачного блока добавляет дополнительный лоск.
• Lilly’s Table - Прозрачность может сделать ваш текст более поп то же время позволяя фону быть в центре сцены.
• Quinta da Bela Vista - Использование прозрачных блоков аналогичных цвету фона выделяет их.

04. Грандж

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

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

• Glocal Ventures - Добавление шероховатой границы основной области содержания добавляет дополнительный уровень лоска.
• squareFACTOR - Грандж элементы как мазки кисти и брызги легко внедрить на чистых участках, как сделано в этом заголовке.
• Rob Goodlatte - Беспорядочный края и грязный-фон две особенности грандж дизайна.
• Paravel Design - Даже что-то простое, как добавить в статью фоновую картинку с акварельным мазком может дать сайту немного грандж эффекта. Добавление тонкого грязного фона, ещё больше усиливает вид, сохраняя профессиональный имидж.
• Von Dutch - Грандж с элементами может хорошо подходить для сайта с контрастными изображениями.

05. Рисованный дизайн

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

Самым простым способом начать работу с рисованными элементами это использовать рисование Photoshop кистями, шрифтов и иконок. Их широкий выбор можно найти бесплатно.

• Richard Stelmach - Добавление простого эскиза к главной странице сайта может сделать много последствий.
• Happy Dangy Diggy - Рисованные элементы могут дать вашему сайту веселый, непринужденный вид.
• Luova - Заголовки отличное место, чтобы наложить рисунок или живописи, сохраняя профессиональный вид сайта.
• Idiotic Adventures - Эскизы смешанные с шрифтами, которые выглядят как рисованные работают особенно хорошо.
• Sawyer Hollenshead - Другой, прекрасный пример, наброска шрифтов и рисованного изображения.

06. Приглушённые цвета

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

• CSS Addict - Смешивание приглушенных цветов с ярким или темным цветом выделяет их больше.
• Cuisine Saine - Приглушенный не должно означать только серые и выгоревшие. Перемешанные зеленый, красный, и другие цвета добавляют интереса.
• I-Avion - Даже яркие цвета (зеленовато-желтые, как в этой конструкции) может использовать более приглушенные тона, в паре цветов аналогичных оттенков.
• Ian James Cox - Сопряжение мягкого загара и крема с черным делает акцент на очень профессионально выглядящий сайт.
• Joe Nyaggah - Уменьшение насыщенности ярких красок дает им другое качество и делает их, в то же время, немного ретро.

07. Эффект акварели

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

• Ali Felski - Акварель элементы не обязательно должны быть светлыми или пастель.
• Boompa - Смешивание акварель картины с чертежами добавляет дополнительный визуальный интерес.
• Matt Dempsey - Более абстрактные кисти акварели позволяют смотреть более спокойно.
• One Starry Night - Использование акварельных кистей над акварель фоном прекрасно выглядит, особенно в паре с казуальным шрифтом.
• Sunrise Design - Акварель сцена делает заголовок большим.

08. Природные элементы

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

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

• Story Pixel - Природные элементы не обязательно должны быть фото-реалистичны.
• Theater Website Services - Лоснящиеся и глянцевые элементы природы хорошо работать в заголовке.
• Weberica - Лозы и птицы органически чувствуют себя в заголовоке этого сайта, особенно при сочетании с элементами акварели.
• 84 Colors - Хотя он не виден на этом изображении, листья и другие природные элементы на этом фоне немного "движутся", как если бы они были качающимися на ветру.
• Juan Diego Velasco - Простой фон газона в смеси с другими антропогенными элементами дает возможность чувствовать себя естественно.

09. Фото-реалистичные фоны

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

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

• Outline 2 Design - Смесь фото-реалистичного фона с другими фото-реалистичными элементами (такими, как изображение ссылки "Заказать сейчас") складываются в очень профессиональный вид сайта.
• Ernest Hemingway Collection - Создание фото-реалистичного коллажа, который выглядит как стол или столешница очень популярная тенденция.
• Design Top 10 - Фото-реалистичный фон не должны быть сложными, чтобы произвести впечатление.
• Marmalade on Toast - Фото-реалистичный фон не должен состоять из нескольких элементов.
• Design 54 - Простой коллаж из реалистичных изображений с общей темой является также популярным методом.

10. Негабаритная типографика

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

• Toggle - Негабаритная типографика не обязательно должна быть огромной, просто большее, чем от вас обычно ожидают.
• Citizen Wausau - Иногда, чуть-негабаритные шрифты могут иметь больше последствий, чем гигантский шрифт.
• Protagonize - Другим, примером - просто немного больше, чем мы ожидали. Это позволяет самому шрифту выделяться.
• Matt Lawrence - Ограничение негабаритных шрифтов заголовка вашего сайта не дает большой эффект.
• This is Aaron’s Life - Негабаритный шрифт все таки является опцией.

11. Декоративная типографика

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

• JP33 - Ограниченная декоративная типографика в заголовке может сделать его выделяющимся больше.
• Lord Likely - Использование декоративных шрифтов в нескольких элементах вашего сайта придает чувство логичности.
• Cogitatur - Смешиванием нескольких декоративных шрифтов на сайте можно оказать большое влияние на дизайн. Просто имейте в виду, что шрифты должны иметь одинаковые элементы, вес, с другими элементами дизайна для достижения наилучших результатов.
• Simone Maranzana - Смешивание скриптовых и шрифтов с серифами делает очень элегантным любой веб-сайт.
• Designr.it - Другим прекрасным примером является смешание декоративного шрифта с традиционными Serif-ом.

12. Огромные фоны

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

• Bada Bing Design - Смелый фон, который использует ограниченную цветовую схему не подавляет содержание страницы.
• Piz’za-za - Фотографический фон вашего бизнеса может сделать огромное влияние.
• Youandigraphics.com - Большие фоны не обязательно должны быть сложными. Смесь повторяющихся текстур с красочными фото создает влияние в комлексе.
• Gummi Sig - Смешивание элементов фона также можете давать большое влияние, как это делается здесь смесь гранжа, акварели, фото-реалистичных элементов и световых эффектов.
• Safety Goat - Геометрический фон может дать огромный эффект, особенно при смешивании с элементами гранджа.

13. Ретро и винтажные элементы

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

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

• Ctrl+N - Коллаж винтажных элементов делает большую заявку.
• Klassiker in Acryl - Винтажный фон, в паре с винтажными шрифтами создаёт обстановку 60-х.
• Radio-The New York Moon - Этот сайт с парой винтажных элементов радио и газеты достигает эффекта 40-х.
• Rose Fu - Соединение антикварного вида бра с модными элементами придает викторианский стиль сайту.
• Duirwaigh Studios - Смесь винтажных и антикварных элементов цирка дает водевиль чувств на этом сайте.

14. Привлекательные заголовки

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

• Buen Retiro Vergara - Смелый заголовок, тесно связан с содержанием сайта и работает хорошо для любого веб-сайта.
• Deqq - Изображение в заголовке, несколько пар элементов (освещение, фотографий, яркие цвета) делает хорошую заяку.
• Ma.tt - Сочетание различных элементов в заголовке имеет очень мощное воздействие и отлично работает на личном блоге или казуальном сайте.
• Crush + Lovely - Заголовки не обязательно должны быть яркими и блестящими. Более мягкий заголовок, с отличием от остальной части сайта может быть столь же впечатляющим.
• Drew Wilson - Заголовок всеми цветами радуги, и некоторые тонкие рисованные элементы обращают глаз на логотип и название сайта.

15. Элементы коллажа

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

• BLK + MTN - Коллаж элементы с цифровой работой очень хорош, для профессионального сайта.
• Kiss Me I’m Polish - Коллаж элементы, используемые редко, могут добавить что-то дополнительно к дизайну вашего сайта, что действительно ставит ее на следующий уровень.
• M Katek - Рваный документ ставит сайт на линии между коллажем и гранджем.
• Web Designer Wall - Смесь рисованных элементов, обрывков бумаги и другие тематические бумажные элементы создадут очень интересный и уникальный дизайн коллаж.
• Toucouleur - Смешивание искусственных-документ элементов с цифровыми элементами коллажа делает этот заголовок еще более интересным.

16. Текстурированные фоны

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

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

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

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

1. Пространство

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

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

Правильное планирование поддерживает это деликатное равновесие и позволяет посетителям беспрепятственно путешествовать сквозь пространство.

Линии

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

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

Формы

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

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

Освещение

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

Настроение или атмосфера в комнате сильно зависят от освещения, поэтому важно потратить время на правильное решение.

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

Цвет

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

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