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

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

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

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

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

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

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

Линии

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

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

Формы

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

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

Освещение

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

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

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

Цвет

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

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

Вы когда-нибудь задумывались, что станет для вас возможным в маркетинге даже с небольшим запасом знаний дизайна? Хотите вывести ваши соцсети на новый уровень, увеличить количество подписчиков, лайков и шеров? Без хорошего визуального контента не обойтись! К счастью, в эру интернета обучение новому стало доступным каждому, кто умеет пользоваться поисковиком. Чтобы легче было осваиваться в новой области, изучите эти 48 понятий дизайна и область их применения. Для удобства чтения мы разбили термины на группы.

Оформление

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

1. Золотое сечение

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

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

2. Правило третей

Представьте, что на вашем изображении нарисована сетка, которая своими линиями делит изображение на 3 равных части.

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

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

Шрифты и отступы

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

3. Шрифты с засечками (serif)

Засечки – это как бы маленький «взмах» или завитушка на буквах. Самый известный представитель – Times New Roman. Шрифты с засечками лучше использовать для заголовков и других выделяющихся элементов. Они цепляют взгляд читателя.

4. Без засечек (sans-serif)

«Sans» означает «без», соответственно, «sans-serif» – шрифт без засечек на буквах. Типичный представитель – Arial.

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

5. Шрифты с засечками в виде пластин (slab serif)

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

Пример такого шрифта – Museo Slab.

6. Рукописные стили текста

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

Пример, как может выглядеть текст шрифта в рукописном стиле.

7. Моноширинный шрифт

Моноширинный шрифт (также известный как шрифт фиксированного шага, фиксированной ширины или непропорциональный шрифт) – когда буквы и остальные знаки (числа и значки обозначений) занимают одинаковое количество горизонтального расстояния. Иными словами: и буква «ж» и буква «т» будут равны по ширине, равно как и цифра «2». Большой массив моноширинного текста воспринимать сложно. Зато это может быть хорошим дизайнерским решением для заголовках на афишах.

8. Иерархия

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

Пример, иллюстрирующий важность иерархии объектов в тексте.

9. Кернинг

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

10. Отступы между словами

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

11. Пространство между строками

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

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

12. Висячие строки

Это линии текста, которые остаются «в одиночестве» наверху или внизу абзаца. Есть 2 варианта висячих строк:

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

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

13. Lorem Ipsum

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

Цвета

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

14. RGB

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

15. HEX

Hex – модель, состоящая из 6 цветов, которую используют в HTML, CSS и в дизайне приложений программного обеспечения для репрезентации цветов.

16. CMYK

CMYK – цветовая модель, которая используется для печати. Цвета CMYK изначально более светлые, чем получаемые при смешении цвета. Чем больше смешений, тем темнее получаемый цвет.

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

17. Цветовая модель Пантон

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

18. Теплые цвета

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

19. Холодные цвета

Холодные цвета, такие, как синий, зеленый, фиолетовый, имеют способность успокаивать.

20. Аналоги

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

21. Комплиментарность

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

22. Триады

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

23. Цветовая теория

Есть 3 базовых понятия в цветовой теории:

1. Цветовые круги – дают подсказку, какие цвета лучше использовать вместе.
2. Цветовая гармония – согласованность цветов в результате найденной их пропорциональности форм и объемов использования.
3. Контекст того, как используются цвета, их влияние на человеческое восприятие.

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

24. Палетка

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

25. Монохромность

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

26. Градиент

Градиент – это постепенное изменение цвета в другой цвет (например, зеленый плавно переходит в синий) или плавный уход цвета в прозрачность. Есть 2 типа градиента: линейный и радиальный.

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

27. Прозрачность/непрозрачность

Это позволяет сделать некоторые элементы дизайна прозрачными. Чем меньше уровень непрозрачности, тем более прозрачным выходит элемент. Например, 100% непрозрачность означает объект в обычном виде.

Более прозрачные объекты «весят» меньше. Можно выделять остальные предметы на изображении. С помощью прозрачности «играют» с оттенками цветов.

28. Тон

Тон – способ описания цвета. Любой цвет в цветовом круге – это тон. Красный, синий и желтый – это тона.

29. Оттенок

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

Насыщенные тона позволяют выделить главное. Использование оттенков делает объекты визуально мягче и легче.

Брендирование

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

30. Логотип

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

31. Брендовый символ

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

32. Иконка

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

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

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

33. Стайл-гайды

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

Работа с дизайном

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

34. Сетка

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

35. Масштаб

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

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

36. Соотношение сторон

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

37. Текстура

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

38. Симметричная раскладка предметов

Это раскладка вещей на картинке так, чтобы они были под углом 90 или 180 градусов друг к другу. Иными словами: предметы лежат параллельно или перпендикулярно друг другу.

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

39. Белое пространство

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

Хороший пример белого пространства – домашняя страница Google. Все практически состоит из белого цвета, чтобы пользователи могли сконцентрироваться на строке поиска.

40. Разрешение

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

41. Контраст

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

42. Насыщенность

Понятие насыщенности относится к интенсивности и чистоте цвета. Чем более насыщенный цвет, тем более ярким он кажется. Ненасыщенные цвета кажутся бледными.

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

43. Blur

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

44. Кадрирование

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

45. Реалистичная отрисовка объекта

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

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

46. Плоский дизайн

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

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

47. Растр

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

48. Вектор

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

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

Ребята, мы вкладываем душу в сайт. Cпасибо за то,
что открываете эту красоту. Спасибо за вдохновение и мурашки.
Присоединяйтесь к нам в Facebook и ВКонтакте

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

сайт делится с вами самыми важными из этих правил.

1. Определитесь с предназначением помещения

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

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

2. Продумайте настроение и характер

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

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

3. Симметрия и баланс для гармонии

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

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

4. Цвет и фактура всегда вместе

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

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

5. Освещение – самая чувственная составляющая дизайна интерьера

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

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

6. Детали определяют интерьер

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

7. Окружайте себя тем, что любите

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

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

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

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

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

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

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

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

01. Линия

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

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

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

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

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

С другой стороны у нас брендинг для бренда соков Frooti от Sagmeister & Walsh . В отличие от предыдущего примера, которые выбрали палитру, которая мягко дополняет себя, в этом брендинге были выбраны контрастные цвета, которые сделали дизайн энергичным и игривым.

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

Посмотрите на этот ежегодный отчет от Brighten the Corners и Аниш Капур , который привлекает внимание к симметричности текстовых столбцов, отражая их по обе стороны страницы.

Ежегодный отчет Zumtobel от Brighten the Corners и Аниш Капур

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

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

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

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

DME Promotional poster 2008 от Джека Кроссинга

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

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

08. Текстура

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

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

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

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

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

10. Иерархия

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

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

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

Посмотрите на это свадебное приглашение от Southern Fried Paper . Обратите внимание, как дата (очень важная часть приглашения) сделана больше, смелее и заметнее, чем текст ниже. Но при этом дата не затмевает имен «Одри и Грант».

Одри и Грант от Southern Fried Paper

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

Взгляните на этот плакат для The Night Market от Мэри Гэллоуэй . Вы легко сможете определить где заголовок, подзаголовок, дата, и информация, которая важна меньше.

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