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

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

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

• Designers Couch - Тонкий тон-в-тон фон добавляет ощущение текстурированной ткани.
• Jason Julien - Тонкие грязные текстуры на заднем плане добавляют грандж элементы на сайт.
• Leigh Taylor - Тонкая текстура, используемая в заголовке и фоне придает чувство преемственности между элементами.
• Zone Art CSS - Смесь текстурированных элементов в фоне добавит больший визуальный интерес.
• DGS Creative - Простые текстуры, похожие на бетонные или каменные, добавляют отличие от иных "чистых" дизайнов сайта.

17. Вкладки и навигация

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

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

• Prime Cut Design - Простые тон-в-тон вкладки работают хорошо, когда активную вкладку как-то можно выделить. Как здесь, где неактивные вкладки шероховатые, а активные чистые и блестящие.
• Momentum - Повторяя элементы дизайна различных частей сайта можно добавить общую преемственность дизайна.
• Salvemos al Arbol - Вкладки использующиеся, чтобы показать логические шаги имеют много смысла, когда речь заходит о юзабилити.
• Chris Jennings - Они могут быть не только горизонтальные.
• Abel and Cole - Простые, очерченные вкладки, хорошо работают в рамках простого дизайна сайта.

18. Черный и белый

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

• Carsonified - Смесь очень темно-серый с кремом даcт немного ретро.
• Minimal - Использование большого количества белого делает сайт более легким и более упорядоченным, чем с черным дизайном.
• J Bradford Dillon - Соединение тонкого белого цвета с темными коричневато-серыми дает очень классический и традиционный дизайн.
• John Likens - Совершенно черный и белый делают сильное графическое ударение
• Paiko - Оттенками серого можно сделать сайт более притягательным, чем сайты с большей контрастностью.

19. Горизонтальный скролинг

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

• Dean Oakley - Делает очень ясно, каким образом перемещаться по сайту. Прокрутки добавляет юзабилити.
• Nebon Media - Горизонтальные конструкции особенно хорошо работают для портфолио сайтов.
• Gavin Castleton - Интересный эффект на горизонтальном сайте, сайт начинается от центра и имеет скролинг как в лево так и вправо.
• Lucuma - Сайт использует сочетание горизонтальной прокрутки и модальных блоков для отображения содержимого.
• Hasrimy - Согласованный фон на несколько экранов на сайте с горизонтальной прокруткой придает чувство логичности.

20. Мультяшные элементы

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

• Creative Magasine - Элементы не обязательно должен быть карикатуры.
• Digimurai - Использование мультипликационного персонажа как талисман или логотип работает очень хорошо.
• Mochi Media - Монохроматические элементы мультфильмов являются наиболее универсальными.
• Spoof University - Использование мультипликационного персонажа, который согласуется с темой вашего сайта (таких, как профессор на сайте Spoof университета) добавляет, даже юмористический элемент.
• Francesco Mugnai - Мультяшные фигуры и карикатуры общеизвестных личностей являются популярными.

Творческая переработка оригинала