Стили веб дизайна
Работая в сфере веб дизайна, не раз сталкивался с вопросами, касающихся стилей веб дизайна в целом и стиля конкретного сайта в частности. И клиенты, и знакомые дизайнеры не раз интересовались, в каком стиле сделан тот или иной сайт. Иногда возникало непонимание вопроса по причине того, что в один и тот же термин вкладывались разные понятия. Например, мне показывали сайт, выполненный в стиле минимализма, а оказывалось, что сайт попросту сделан без элементарных знаний верстки, не заполнен информацией. Показывали «готический» сайт, «готичность» которого заключалась в черном фоне и в применении устрашающих картинок.
Тогда я решил поискать существующий теоретический материал по этой теме. Было найдено множество информации отечественных и зарубежных авторов, усвоить которую оказалось непростым делом. Одни авторы разделяли стили веб дизайна, исходя из источника возникновения (те же готические сайты, стиль чертежей и моделей, кибер-панк, стиль бумажных пакетов и т.д.) , другие полагались на сферу применения (домашние странички, фирменные сайты, корпоративные сайты, контентные сайты). Встретил даже такую необычную классификацию сайтов Рунета: сайты в стиле Артемия Лебедева и сайты в стиле Василия Пирогова. Первые известны чистотой дизайна и кода, выверенной логической структурой сайта, соблюдением правил юзабилити и русского языка. Вторые пропагандируют объективно красивый дизайн, применяя элементы окружающей нас действительности, воздействуя в своих работах на эмоциональную сферу посетителя сайта.
Вследствие этого возникла необходимость собственного классифицирования стилей веб дизайна и определения отличительных признаков каждого стиля. Естественно, изобретать велосипед никто не собирается. Изучая множество книг, статей и обсуждений на форумах, пришел к выводу, что выработанных классификация стилей веб дизайна не так уж и много.
Что такое классификация? Это не что иное, как условное распределение всей совокупности веб сайтов по группам в соответствии с какими-либо общими признаками.
В чем необходимость классификации? В том, чтобы разговаривать с друг другом на одном языке. В том, чтобы художник, получив заказ на создание макета веб сайта, например, в стиле кибер-панк, смог легко настроится на работу, уже зная общие отличительные признаки этого стиля.
Замечу, что классификация стилей веб дизайна отнюдь не является априори, аксиомой. Все это только руководство к действию. Клиенту — чтобы сформулировать свою мысль так, чтобы понял художник и дизайнер, художнику — чтобы настроиться на заказ, понять направление работы.
2. Обзор существующих классификаций стилей веб дизайна.
В предыдущей главе уже было упоминание о существующих классификаций стилей веб дизайна. Теперь остановимся на этом подробнее.
Классификация Курта Клонингера (Curt Cloninger).
- HTMинимаLизм. (HTMinimaLism School ).
- Мондриановский плакатный стиль. (Mondrian Poster School).
- Табличный пиктографический стиль. (Grid-Based Icon School).
- Суперминиатюрный, в стиле Сим Сити. (SuperTiny SimCity School).
- Низкокачественный грандж. (Lo-Fi Grunge School).
- Стиль бумажных пакетов. (Paper Bag School).
- Готический органический стиль. (Gothic Organic School).
- Пиксельный панк-рок стиль. (Pixelated Punk Rock School).
- Стиль чертежей и моделей. (Drafting Table/ Transformer School).
- Стиль 1950-х «Привет, Китти!» (1950s Hello Kitty School).
- Солнечный схематичный стиль семидесятых. (1970s Dayglow Outline School).
- Аналоговый стиль ручного рисунка. (Hand-Drawn Analog School).
- Пустынный ковбойский стиль. (Dusty Cowboy School).
Классификация Дмитрия Кирсанова. Разделяются веб сайты по принадлежности владельца сайта к той или иной категории.
- Персональная страничка.
- Некоммерческие сайты.
- Корпоративные сайты.
- Контентные сайты.
В сети Интернет встречается множество других классификаций. Некоторые из них являются интерпретированными графическими стилями. Некоторые разделяются по технике исполнения, например, векторные, растровые. Разделяют также сайты по способу верстки: табличные, блочные. Попадались такие названия стилей, как чистые, футуристические, Web PopArt , классические, художественные и даже «отстойные».
3. Основные аспекты формирования стиля веб дизайна.
Перед тем, как составить свою таблицу стилей веб дизайна, надо выделить основные аспекты формирования этих стилей. Основоположные составляющие каждого из них. Проще говоря, выделить те признаки, по которым различаются эти самые стили.
Композиционное решение. Взаиморасположение объектов, расстановка, соотношение размеров, форм и т. д. Композиционное решение сайта сразу определяет положение основного контента, положение меню навигации, способы прокрутки на странице (горизонтальное, вертикальное, внутри блоков).
Цветовая схема. Цвет, составляющий дизайн сайта, является особенно важным компонентом. Цветовая схема сайта формирует впечатление от сайта, создает настроение. Естественно, что все цвета сайта должны соответствовать общей идее сайта, целевой аудитории. Важно, чтобы цвета сайта гармонировали друг с другом и ни в коем случае не раздражали посетителей. Создание цветовой гармонии — одна из первых задач дизайнера.
Шрифтовые схемы.. Выбранному стилю дизайна всегда должен соответствовать шрифт. Шрифт, его цветовая схема, верстка просто обязаны идти в общем контексте сайта. Выбор категории и гарнитуры, размера влияет на восприятие дизайна не меньше «красивой картинки».
Наличие/отсутствие определенных графических символов и их модификаций. Каждому стилю веб дизайна присущи определенные элементы. Создавая макет сайта в каком-нибудь стиле, стоит задуматься о стилевом соответствии. К графическим символам на сайте относятся логотип, пиктограммы, иконки и т. д. Глупо выглядел бы веб сайт, выполненный в органическом стиле, с плавными природными линиями, с легким дизайном и с логотипом в стиле хай-тек.
Способы обработки изображений. Технические приемы. Для каждого стиля веб дизайна присущи свои методы и приемы. Например, векторная или растровая обработка изображений. Разумное применение анимации, различных технологий (Flash, JavaScript, DHTML. ). Различные методы художественной отрисовки элементов. На одних сайтах допустима компьютерная графика, на других идеально подходит качественно обработанная фотография, на третьих необходима 3D визуализация.
4. Актуальная классификация стилей веб дизайна.
Проанализировав все вышеизложенные стили, адаптируя западные классификации для Рунета, приведу свой список стилей веб дизайна. Сразу скажу, что в общей таблице будут присутствовать стили, классифицированные по различным признакам. Таблица стилей со временем будет обновляться. Добавятся новые стили.
- Готический органический стиль.
- Табличный стиль, пиктографический.
- Минимализм. Миниатюрный стиль.
- Текстовый стиль.
- Плакатный стиль.
- Журнальный стиль.
- Стиль кибер-панк. Пиксельный панковский дизайн. Футуристический стиль. Стиль хай-тек.
- Стиль хиппи. Стиль дневного света и цветов.
- Стиль грандж.
- Стиль Web 2.0.
В данной статье подробно расписывать каждый стиль я не буду. Детально изучить эти стили можно будет в отдельных статьях на нашем сайте.
-
Описание стилей будет проходить по следующим пунктам:
- Обзор стиля.
- Цели и применение.
- Источник вдохновения.
- Технические приемы.
6. Заключение. Советы заказчикам и веб дизайнерам.
Этот перечень стилей веб дизайна не является конечным. Также, как и не является полным руководством к действию. Художники и дизайнеры могут смешивать стили, создавать свои, новые. Каждый коммерческий проект, естественно, будет диктовать свои условия.
Заказчик сайта, не представляя теоретической части веб дизайна, сможет понятно описать пожелания для будущего сайта. Ведь часто бывает, что человек хочет одно, пытается объяснить понятным ему языком, но у координатора проекта складывается совсем иная картина. А о том, что сформировалось в сознании художника и вовсе говорить страшно. 🙂 Поэтому заказчику намного проще будет посмотреть существующие стили, выбрать подходящий и в последующей работе отталкиваться от него.
При создании дизайна веб сайта я рекомендую придерживаться одной стилевой линии. Но бывают такие проекты, где очень удачно смешиваются разные стили. В любом случае разрабатывать дизайн веб сайта нужно комплексно, учитывая все элементы и компоненты. Самой распространенной ошибкой дизайнеров и художников является уделение слишком большого внимание шапке веб сайта в ущерб остальным элементам, которые «лепятся» позже. Вследствие этого теряется общая композиция и идея сайта. Все блоки сайта становятся разрозненными, чужеродными по отношению друг к другу.
На сегодняшний день по данным исследовательской компании Netcraft, количество сайтов, работающих в интернете по состоянию на 31 мая 2007 года, достигло отметки в 122 000 635 сайтов. Задача дизайнеров, художников и, особенно, заказчиков создавать красивые сайты, создавать новые стили, течения и движения в веб дизайне. Стоит подхватывать новые идеи, рисковать, создавая что-то новое. Интернету нужен Креатив в истинном смысле. В осуществлении этой задачи и работает коллектив студии веб дизайна TopCreative, наряду с другими командами профессионалов.
Рустам aka _malysh_, дизайнер студии TopCreative
Тренды веб-дизайна в 2023 (часть 1)
Допустим, вам нужен в этом году веб-сайт. Но вы не знаете с чего начать его создание. Первый и главный вопрос от визуалов: а как мой сайт будет выглядеть? Можно взять вашего самого главного конкурента и сказать: «Хочу не хуже, чем у них». Это решение — самое простое и немножечко «не смарт». Поскольку «Часто люди не знают, чего хотят, пока вы им это не покажете» , не стоит разглядывать всё подряд. Лучше разбить всё, что собираетесь просмотреть, на категории. В нашем случае — на тренды веб-дизайна.
Лично я, когда вхожу в какое-то море выбора, стараюсь начать с классификации. Нужно подобрать светильник — а какие категории светильников вообще бывают? Нужно подобрать холодильник… ну, вы поняли.
Итак, чтобы не оказаться у разбитого дизайн-корыта, давайте определимся с основными трендами веб-дизайна.
Комплексный градиент
Не такой уж это и новый тренд. Давайте называть его «стабильным»? В каком году появился последний логотип запрещенной инста-сетки? В 2016-м. То есть, тренду «градиент» уже более семи лет! За это время он становится всё изощреннее. Почему популярность градиента не ослабевает? Просто, все природные цвета — по-сути своей градиентны. Вы никогда не найдете «чисто белой розы», «монотонно бурой свёклы» или «абсолютно синего неба» на этой планете.
Кроме того, градиент создаёт иллюзию движения без какой-либо анимации. Любой минималистический дизайн слегка приправленный градиентными «выкрутасами» становится невероятно динамичным.
Клейморфизм
Несмотря на страшноватое название, у сайтов и рекламных материалов выполненных в этом стиле всегда свеженький, понятный и слегка шутливый вид. Все эти условные человечки и человеческие ручки встречаются нам с вами повсеместно. Давненько вы бывали в ПВЗ Сбермаркета? Там на стенах как раз представлены образы из популярной и бесплатной библиотеки клейморфизма.
Клейморфизм образовался путем смешения четырех суб-трендов веб-дизайна:
1. светлые, пастельные и яркие цвета
2. большие угловые закругления
3. внешняя тень «по периметру», словно мы с вами светим на такую карточку фонариком сверху.
4. трехмерные фигуры.
Бенто-дизайн
Термин Bento Box происходит из Японии, где «бенто» означало сервировать еду в разных прямоугольных блюдцах в свою очередь уложенных в прямоугольную коробку. Вот уже несколько лет Bento Box — это тенденция проектирования пользовательских интерфейсов.
В основе стиля Bento лежат: визуальная иерархия и четкая, наглядная организация. Bento очень хорошо работает с небольшими прямоугольными экранами. То есть, с мобильными устройствами и везде, где требуется спроектировать адаптивный дизайн.
Дизайн в стиле Bento выглядит современно и модно. Благодаря тому, что Bento используется такими ИТ-монстрами, как Apple и Microsoft, пользователям всегда понятен контент, организованный по его канонам.
Bento лучше всего работает, когда вы разбиваете содержимое на небольшие (всегда прямоугольные!) фрагменты. Различные по размеру квадраты создают акцент: больше — значит важнее.
Если в ячейки Bento добавить яркие цвета, позитивные шрифты и динамичные изображения, получится самый что ни на есть современный интерфейс.
На сайте bentogrids.com накапливается подборка удачных примеров Бенто-дизайна.
Дизайн в стиле Мемфис
Ностальгия… Именно такое чувство испытывают «бумеры», когда тренд дизайна родившийся в 80-х годах прошлого столетия, возвращается сюда — в 2023-й! Мемфис появился, как это часто бывает, на волне отвергания прежних тенденций. Новые технологии, материалы и футуристические веяния становились все более популярными. Мемфис выступал против жесткости модерна и минимализма. Мемфисс-дизайнеры стремились привнести в культуру «радикальное, смешное и возмутительное», смешать геометрию ар-деко с цветами в стиле поп-арт и мебельным шиком 1950-х годов.
Большими поклонниками мемфиса были Карл Лагерфильд и Дэвид Боуи. А в массовой культуре этот стиль активно использовался во многих фильмах, в том числе в «Назад в будущее II».
Сегодня мемфис — это больше, чем просто тенденция в дизайне. Он нарушает типичные нормы и поощряет свежесть, креативность, уникальность и даже бунтарство дизайна.
Однажды вы решаетесь обставить свою комнату в стиле Мемфис и всё… этот отважный отрезок жизни вы не забудете никогда. Будете вспоминать свой вызов шаблонам тепло и с улыбкой.
Впрочем, про этот стиль я обещаю написать отдельную развернутую статью.
Стили и направления в дизайне сайта
Дизайн сайта может быть самым разнообразным, все зависит от фантазии его разработчиков. На просторах интернета можно встретить минимальный дизайн в черно-белом стиле, а можно найти поражающие воображение цветные решения. В связи с этим возникает необходимость классифицировать дизайн сайтов, и делается это с учетом различных признаков. Рассмотрим основные из них, а представленная ниже схема наглядно демонстрирует это деление.
1. Дизайн сайта по цветовой гамме. Качество современных мониторов позволяет передавать около 16 миллионов цветов из цветовой модели RGB . Для дизайна сайта можно использовать абсолютно любой из них, или комбинировать цвета в интересные сочетания. Поэтому классификация по данному признаку будет немного общей.
- Темный стиль. В этом случае в дизайне сайта доминируют темные цвета.
- Светлый стиль. Это противоположность предыдущему пункту.
- Цветной стиль. Ситуация, когда в дизайне преобладает конкретный цвет, но не черный или белый.
- Разноцветный стиль. Здесь используется комбинация ярких цветов для создания визуального веса.
2. Дизайн по количестве графики. Здесь выделяют три основных направления:
- Чистый стиль. Графику на таком сайте можно увидеть в очень малом количестве: логотип, кнопки и иконки. А главное внимание уделяется контентной составляющей.
- Стандартный стиль. Графика здесь присутствует, но в основном только в шапке веб-сайта. Такой стиль на данный момент является самым распространенным.
- Художественный стиль. В данном случае доминирующий элемент сайта – графика. Такой прием повышает запоминаемость сайта, привлекает внимание, но вот на его информационную составляющую многие даже не смотрят.
3. Дизайн сайта по размещению содержимого и его количеству. Этот пункт будет важным для ориентации пользователя на сайте. Бывают три типа:
- Минимальная структура. В дизайне доминирует один главный элемент, а все остальное сконцентрировано вокруг.
- Двух- и трехколончатая структура. Она является наиболее широко применимой. Обычно выделяется одна колонка для основного содержимого сайта, а вторая и третья для полезных блоков – новости, меню и др.
- Сложная структура. Сюда можно отнести любую другую структуру сайта, не подпадающую под две вышеописанные. Здесь можно найти много панелей, блоков, колонок и чаще всего она применяется при создании интернет-порталов.
4. Дизайн по тематике сайта. Именно этот пункт имеется ввиду, когда говорят о классификации дизайнов сайтов. Однако при создании самого сайта это не самый важный критерий, от него не зависит ни объем работ, ни другие составляющие. Принято выделять следующие стили:
- Классический. Это стиль, которым обладают самые крупные и широко известные ресурсы. Например, в данный момент классическим можно считать Web 2.0 дизайн сайтов.
- Ретро. На таком сайте можно увидеть различные вещи из прошлых десятилетий: элементы декора, интерьер и даже ретро-шрифты.
- Футуристический стиль. Здесь, наоборот, используются воображаемые вещи из будущего: высокотехнологичные роботы, компьютеры и другая техника.
- Гранж. Такой стиль дизайна представляет собой хаотичную и небрежную композицию, чаще всего не очень яркую и даже темную, иногда с потертостями, пятнами и с аналогичными «гранжевыми» цветами.
- Журнальный. Данный дизайн очень напоминает журнальный разворот: большие заголовки, фото, колонки. Стиль часто используется для «оффлайновых» журналов и тех, которые существуют только в интернете. Часто его можно увидеть на сайтах женской тематики, о доме, семье, взаимоотношения.
- Мультипликационный. На сайте встречаются персонажи мультфильмов, комиксов, другие рисованные элементы. Сфера применения такого стиля — товары для детей и тому подобное.
Этот список можно продолжить в зависимости от тематики сайта (например, сайт интернет –магазина, продающего книги, можно охарактеризовать «книжным» стилем). При создании сайта нет необходимости придерживаться какого-то одного стиля, лучше делать это в зависимости от его целей и задач, а также использовать фирменный логотип и стиль компании.
- 24.08.2012
- Комментариев: 0
- веб-дизайн
Статьи по теме:
- Безопасный редизайн сайта
- Листинг товаров
- Доработки необходимые сайту
- Почему мобильная верстка занимает важную роль ?
- Тренды веб дизайна в 2018 году
Стили в веб-дизайне: как объяснить дизайнеру, каким должен быть сайт
В большинстве случаев при заказе разработки дизайна для сайта, вас попросят заполнить бриф, в котором будет пункт «укажите ссылки на сайты, которые вам нравятся» или что-то вроде того. Это очень важный пункт, так как описать словами ожидания от визуальной составляющей дизайна вряд ли кому удастся – проще показать.
Но тут может возникнуть другая проблема. На разных сайтах вам могут понравиться разные элементы, порой несовместимые между собой. Если дизайнеру все равно, он, конечно, разместит их в одном макете. А вы потом за голову будете хвататься: «По-отдельности было красиво, а вместе – ерунда какая-то!».
Чтобы такого не получилось, можно просто указать дизайнеру в каком стиле должен быть будущий сайт. А специалист (если дизайнер – специалист) сам подберет все нужные и сочетающиеся между собой элементы.
Этот способ подойдет и в случае, когда вам просто некогда бороздить просторы интернета в поисках образцов для исполнителя.
Какие стили веб-дизайна бывают
Стилей в веб-дизайне множество. Проблема усугубляется тем, что часто дизайнеры прибегают к их смешению. Но есть несколько общих направлений, которые можно достаточно четко отделить друг от друга и которые сейчас в тренде. О них и поговорим.
Классика
Характерные черты:
- лаконичные формы, строгая стилистика;
- неброские цвета, обычно светлые оттенки;
- привычное расположение основных элементов: логотип в верхнем углу, горизонтальное меню;
- сдержанные шрифты;
- отсутствие ярких иллюстраций.
Авторство: Валерия Ряскова