Веб-дизайн сайтов, уроки web дизайна

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

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

Подкатегории раздела Веб дизайн:

Подписывайтесь на обновления Дизайн Мании, найдете здесь массу интересного для себя — гарантирую.

 

Как сделать идеальный landing page — разработка дизайна лендинга на примере удачных сайтов

Нет ничего более увлекательного в работе над сайтом, чем когда все специалисты объединяют собственные усилия, чтобы сделать новый идеальный лендинг пейдж или главную страницу веб-проекта. Дизайнеры, иллюстраторы, маркетологи, программисты и даже отдел стратегического менеджмента – все трудятся единой командой. В ходе разработки добавляются какие-то детали по SEO, оптимизируется стратегия привлечения клиентов, придумываются иконки и т.п. Сегодня хотим поделиться советами по созданию landing page, которые наверняка пригодятся в решении данной задачи. Текущая статья является переводом этой заметки. Да, и вообще в сети встречается достаточно […]

комментария 2

Минималистичный дизайн рулит — 7 преимуществ и основные особенности стиля

Если хотите создать сайт, то главное правило, которому нужно следовать, — не перестараться. В этом веб-дизайнерам уже не первый год помогает так называемый минималистичный дизайн. Он сейчас, кстати, находится на пике своей популярности. Сегодня мы попробуем разобраться что это за стиль и какие его основные преимущества. Что такое минималистичный дизайн? В целом данное понятие можно определить как максимально лаконичный стиль, характеризующийся простотой и точностью. Основные элементы (цвета и шрифты) также используются с акцентом на простоту и с чрезвычайно ограниченными палитрами, […]

комментария 2

CSS hover эффекты — для картинок, кнопок, при наведении на ссылки, блоки и др.

Очень часто на сайтах вы могли встречать изменение оформления ссылок или кнопок при наведении. Реализовать задачу позволяет специальный псевдокласс :hover в CSS. Сегодня рассмотрим некоторые приемы верстки позволяющие сделать эту фишку, а ниже опубликуем список наиболее интересных из них (с краткими описаниями/пояснениеми). Все варианты разделим на: Эфекты для кнопок и ссылок. Hover в изображениях. CSS библиотеки (подключаются отдельно). Данные группы весьма условны, т.к. многие примеры пересекаются и являются универсальными, то есть могут встречаться при оформлении разных объектов. Hover эффект в […]

комментариев 6

Создание дизайна мебельного сайта: советы, реальные примеры и типовые ошибки

Сразу после публикации поста с лучшими примерами сайтов мебели на глаза нам попалась интересная англоязычная заметка похожей тематики. Она содержит подборку советов и нюансов по созданию мебельных сайтов с наглядными иллюстрациями типовых решений, а также описанием ошибок, которые вы точно не захотите повторять. С проектами данной категории всегда было интересно работать, поскольку они тесно связаны с интерьером или архитектурой, а сама продукция, как правило, обладает изысканным вкусом. Опираясь на опыт дизайнеров и веб-разработчиков, в статье Best Furniture Website Design Examples исследуются факторы, помогающие сделать дизайны сайтов […]

комментария 3

Лучшие примеры сайтов о мебели (40 макетов)

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

комментариев 7

10 тенденций и трендов логотипов 2018

Прошлогодний пост о трендах логотипов 2017 был неплохо воспринят читателями, поэтому мы решили продолжить эту «традицию» и рассмотреть основные тенденции в дизайне логотипов 2018. Не смотря на то, что в сфере веб-дизайна изменения происходят с молниеносной скоростью, некоторые пункты из той статьи остались прежними и «перекочевали» в год текущий. Возможно, тренды дизайна сайтов являются более быстротечными по сравнению с нишей разработки лого, либо с момента публикации предыдущей заметки прошло слишком мало времени (7-8месяцев) + сейчас только начало года. Летом обязательно пересмотрим данный текст и добавим […]

комментария 3

60+ красочных дизайнов сайтов — лучшие примеры для вдохновения

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

комментариев 18

Лучшие заметки о веб-дизайне за 2017 год, материалы для скачивания и вдохновения

Первая статья в новом году традиционно будет в виде дайджеста — предлагаем вам ознакомиться с лучшими публикациями Дизайн Мании за 2017. Они пригодятся как новым посетителям, которые только недавно подключились к аудитории сайта, так и тем, кто хотел бы освежить в памяти все важные заметки прошедшего года. Основные тематики постов в 2017 не сильно отличались от более ранних периодов, все они сгруппированы в несколько разделов: статьи, материалы для скачивания, вдохновение и сервисы. Подобные записи найдете за 2016 год и предыдущий […]

комментария 3

UI Patterns — полезный архив паттернов интерфейсов

В процессе проектирования интерфейса приложений или сайтов полезно учитывать имеющийся опыт других специалистов и лучшие варианты решения типовых задач. Это позволяет избежать ненужных ошибок и получить хорошие отзывы от ваших пользователей. В разделе про UI/UX дизайн мы публиковали некоторые заметки по данной теме: например, был обзор 20-ти ресурсов с дизайнами мобильных интерфейсов, а также разные статьи про гамбургер меню, историю развития кнопок на сайтах и т.п. Сегодня рассмотрим похожий сервис UI Patterns, что является своего рода библиотекой типовых паттернов дизайна […]

комментария 3

Подчеркивание ссылок и текста через CSS, свойство text-decoration

В одной из прошлых статей мы писали о мини дизайнерском тренде в виде добавления ярких фоновых полосок под ссылками и текстом на сайте. Аналогичный эффект также можно встретить в современных иллюстрациях для социальных сетей, которые содержат некий контент. Сегодня решили продолжить тему и рассмотреть вопрос с точки зрения верстки, то есть рассказать как сделать подчеркивание текста / ссылок в HTML. В этом нам поможет одна замечательная статья, где хорошо описаны все нюансы текущей темы. В реализации будем использовать разные настройки […]

комментария 4

Конец эпохи статичных дизайнов логотипов?

В продолжение статьи о трендах дизайна логотипов хотелось бы обсудить интересную особенность, которая характерна для них в последнее время. Сейчас одного единственного статического изображения уже недостаточно дабы полноценно представить ваш бренд в сети. Тут потребуется целая библиотека с вариантами логотипов для охвата всех имеющихся задач. На самом деле, данная идея появилась не внезапно, а развивается уже некоторое время. Просто подумайте о множестве вариаций лого сайтов на разных устройствах, их использовании в социальных сетях, о favicon, выводимой в адресной строке браузера, и т.п. […]

комментария 2

Примеры дизайнов кнопок на сайтах и в интерфейсах (с 2009 и до наших дней)

Кнопки для веб-сайтов и приложений используются повсеместно: при входе в профили социальных сетей, совершении покупок в интернете, отправке сообщений через форму обратной связи и т.д. Это один из самых важных элементов UI/UX дизайна и онлайн проектов в навигации и разного рода призывах к действию (Call To Action). Поэтому не удивительно, что ему уделяется достаточно много внимания. Сегодня публикуем перевод одной интересной статьи от Wojciech Dobry, где собраны примеры кнопок на сайтах и приложениях, начиная с далекого 2009. Все скриншоты взяты из популярной […]

комментария 4

Фоновое подчеркивание для выделения текста, CSS свойство text-decoration-skip

После рассмотрения мини-тренда с летающими логотипами хотим познакомить вас с еще одной актуальной темой, о которой недавно написали в Medium. Речь пойдет про весьма оригинальный способ выделения текста с помощью фоновой «подложки» в виде цветной жирной линии. Ниже в статье найдете парочку примеров данной техники. Само по себе решение вызывает достаточно неоднозначную реакцию у сообщества. Еще со времен зарождения классического «однопиксельного» подчеркивания некоторых дизайнеров смущает пересечение нижних полосок с буквами. В последствии были придуманы разные хаки и даже специальное CSS […]

комментария 4