20 Effective Web Design Practices and Techniques

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

Далее приведены 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 - Рисованные элементы могут дать вашему сайту веселый, н