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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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