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

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

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 от Мэри Гэллоуэй . Вы легко сможете определить где заголовок, подзаголовок, дата, и информация, которая важна меньше.

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

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

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

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

Материал подготовлен на основе текста, взятого с сайта blog.bufferapp.com .

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

Далее приведены 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. Текстурированные фоны

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

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

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

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

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

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

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

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

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

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

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

Читаем и запоминаем:

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

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

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

4. RGB: цветовая модель «красный, зеленый, синий». Если CMYK используется для печати, то RGB – это самая распространенная модель в цифровой графике. В отличие от принтеров, компьютерные мониторы используют красный, зеленый и синий цвета в своей палитре. Именно поэтому RGB является основной моделью, используемой веб-дизайнерами.

«К чему может адаптироваться дизайн?» - спросите вы. К виду используемого устройства, ответим мы. С увеличением использования мобильных устройств адаптивный дизайн – дизайн, который позволяет сайтам идеально вписываться в экраны любых устройств, - стал ключевым моментом в создании сайтов. Если вы задумались об адаптации вашего сайта под мобильные устройства (а об этом стоит задуматься), то передовое решение Wix для создания мобильной версии сайта вам обязательно пригодится. И да, это абсолютно бесплатно.

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

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

Также известный как «дизайнерский язык Microsoft», был разработан Microsoft и сегодня используется во многих продуктах компании. Вдохновением для его создания послужили дорожные знаки, и его задача – быть таким же простым и ясным. Главное здесь – думать о дизайне как о рабочем пространстве, а не как о произведении искусства.

9. Плитка: этот структурный стиль стал популярен благодаря успеху сети Pinterest. В его основе лежит структура, состоящая из колонн, и параллельная, но не симметричная подача материала в виде «плиток». В результате получаются разноразмерные сегменты, которые при этом сохраняют аккуратный, организованный вид. При помощи редактора Wix вы можете легко применить эту красивую структуру на вашем сайте. Просто нажмите Добавить > Галерея > Masonry.

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

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

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

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