Виды веб дизайна стили

Основные стили дизайна сайтов — от плоских форм до рисованных элементов

Здравствуйте, уважаемые читатели!

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

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

В этой статье мы поговорим про то, какие бывают стили дизайна сайтов и для каких проектов они подходят.

Виды дизайна

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

Рисованный дизайн — Hand Draw

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

Для кого подойдёт: сайты-визитки креативных и нестандартных специалистов и компаний (тату-мастера, стилисты, имиджмейкеры, дизайнеры интерьеров, PR-менеджеры), сайты различных компаний, использующих креатив в своей работе.

Плоский дизайн — Flat Design

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

Для кого подойдёт: для любого бизнеса. Простота и минимализм – это отличное решение как для начинающих предпринимателей, которые боятся экспериментов и ошибок при позиционировании бренда и фирмы, так и для крупных компаний, которые уже пользуются авторитетом на рынке. Такой дизайн широко применяется как при создании многостраничных сайтов, так и лендингов (о том, каким должен быть дизайн landing page, читайте ЗДЕСЬ).

Материальный дизайн — Material Design

Создателем этого дизайна является компания Google, креативные менеджеры которой в 2014 году приняли решение об отказе упрощённого интерфейса в пользу возвращения к более реалистичным объектам. Была разработана «квантовая бумага» — объект на экране устройства, который подчиняется законам физики. Такой подход позволил разработчикам создать понятный интерфейс для всех пользователей.

После успешного внедрения материального дизайна в интерфейс техники, работающей на операционной системе Android, он стал широко использоваться при создании сайтов различных фирм и компаний.

К его особенностям можно отнести:

• насыщенную цветовую палитру,
• тщательность прорисовки элементов оформления,
• полную визуализацию объектов из окружающего мира.

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

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

Работа над таким дизайном потребует слаженной работы графического иллюстратора, программиста и верстальщика.

Для кого подойдёт: материальный дизайн подходит для сайтов малого, среднего и крупного бизнеса, которые хотят привлечь не охваченные ранее сегменты рынка за счёт такого маркетинга. Также его можно внедрять в процессе ребрендинга, поскольку совершенно новый подход к подаче контента лучше запомнится аудитории и поможет им быстрее освоить изменения.

Другие популярные стили дизайна

Ретро-стиль

Стиль 30-40-хх годов прошлого века является очень востребованным среди иллюстраторов. Стилизованные шрифты, использование pin-up рисунков, эффект выцветания – всё это считается базовыми атрибутами сайта, выполненного под «ретро».

Hi Tech

Этот стиль пришёл в веб-дизайн из оформления интерьеров. Для него характерны строгие линии, использование футуристических элементов, преобладание монохромных оттенков. Он имеет много общего с минимализмом, поскольку в нём практически полностью отсутствуют декоративные элементы. Hi Tech является востребованным среди компаний по производству и реализации бытовой техники, автомобилей, продуктов интеллектуальной собственности.

Organic & Natural

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

«Красивая типографика»

Сочетает в себе элементы «газетного» и «рисованного» стиля за счёт использования нестандартных шрифтов и ярких изображений. В отличие от Hand Draw, здесь акцент делается на содержании. Используется при оформлении landing page, сайтов-визиток, корпоративных сайтов.

Корпоративный стиль

Его базой является минимализм, который дополнен символами, эмблемами, шрифтами, которые призваны вызвать ассоциации с продвигаемым брендом. Несмотря на строгость и формализм, допускается внедрение анимации и графики.

Полигональный стиль

Не один год является одним из самых популярных в сфере дизайна (полиграфического, цифрового, web). Клиенты и иллюстраторы выбирают его за многообразие декоративных элементов, которые позволяют создавать стилизованные иллюстрации и необычные пейзажи. Стиль сочетает в себе градиентные переходы цвета и использование плоских фигур разных форм.

Ар Деко (или Арт Деко)

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

Стиль Apple

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

А какой стиль дизайна ближе по душе вам? Каким бы вы хотели видеть свой будущий сайт? Поделитесь своим мнением в комментариях к статье.

О том, как рассчитывается стоимость дизайна веб-сайта, читайте в ЭТОЙ статье.

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

Источник

WEB-дизайн

для тех, кто начинает создавать сайты

Стили сайтов

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

Стиль дизайна сайта – это моментальное обращение к целевой аудитории. То, что увидит посетитель на сайте в первое мгновение – повлияет на дальнейшее отношение к Вашей компании, и на решение «уйти» или «остаться».

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

Стили дизайна сайта можно разделить по техническому и художественному исполнению.

Основные аспекты формирования стиля веб дизайна:

• Композиционное решение. Взаиморасположение объектов, расстановка, соотношение размеров, форм и т. д. Композиционное решение сайта сразу определяет положение основного контента, положение меню навигации, способы прокрутки на странице (горизонтальное, вертикальное, внутри блоков).
• Цветовая схема. Цвет, составляющий дизайн сайта, является особенно важным компонентом. Цветовая схема сайта формирует впечатление от сайта, создает настроение. Естественно, что все цвета сайта должны соответствовать общей идее сайта, целевой аудитории. Важно, чтобы цвета сайта гармонировали друг с другом и ни в коем случае не раздражали посетителей. Создание цветовой гармонии — одна из первых задач дизайнера.
• Шрифтовые схемы. Выбранному стилю дизайна всегда должен соответствовать шрифт. Шрифт, его цветовая схема, верстка просто обязаны идти в общем контексте сайта. Выбор категории и гарнитуры, размера влияет на восприятие дизайна не меньше «красивой картинки».
• Наличие/отсутствие определенных графических символов и их модификаций. Каждому стилю веб дизайна присущи определенные элементы. Создавая макет сайта в каком-нибудь стиле, стоит задуматься о стилевом соответствии. К графическим символам на сайте относятся логотип, пиктограммы, иконки и т. д. Глупо выглядел бы веб сайт, выполненный в органическом стиле, с плавными природными линиями, с легким дизайном и с логотипом в стиле хай-тек.
• Способы обработки изображений. Технические приемы. Для каждого стиля веб дизайна присущи свои методы и приемы. Например, векторная или растровая обработка изображений. Разумное применение анимации, различных технологий (Flash, JavaScript, DHTML. ). Различные методы художественной отрисовки элементов. На одних сайтах допустима компьютерная графика, на других идеально подходит качественно обработанная фотография, на третьих необходима 3D визуализация.

Основные компоненты фирменного стиля сайта:

1. Контент сайта, т.е. материалы сайта (текст сайта, таблицы, графика сайта).
2. Логотип фирмы.
3. Название сайта.
4. Оформление верхней части страниц сайта.
5. Система оформления навигации сайта.
6. Фон страниц сайта.

Основные технологии, используемые для создания дизайна сайта

Фон для сайта

Существуют четыре, наиболее популярных метода создания фона сайта (бекграунда):

• одноцветный фон,
• использование текстуры в качестве фона сайта,
• фон сайта в виде градиента,
• использование изображения в качестве фона сайта.

Flash технологии для сайта

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

• флеш-меню,
• флеш-ролики,
• интерактивные презентации,
• рекламные баннеры, и пр.

Рисованный дизайн сайта

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

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

3D моделирование для сайта

3D моделирование – это процесс создания трехмерной модели объекта. Чаще всего применяют данный метод, в сочетании с флэш-технологией. Возможность совмещения 3D графики и flash-технологий позволяет создавать эксклюзивные работы (сайты, баннеры) с 3D эффектами, демонстрирующие трехмерные объекты в движении, процессе и действии.

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

Виды стилей, используемых для создания дизайна сайта

Классический

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

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

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

Как правило, классический дизайн сайта используют, создавая веб-ресурс для бизнеса (компаний и корпораций). При этом, акцентируют внимание на логотипе (наиболее ярком и привлекающем внимание, цветовом изображении) — наиболее узнаваемом элементе бизнеса.

Классический дизайн сайтов, чаще всего, выполнен в строгом стиле, цветовая гамма – нейтральна, без излишне кичливых или наоборот мрачных цветов.

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

Минимализм (с графикой)

Минималистический стиль обладает рядом преимуществ:

• простота восприятия информации,
• акцентирование на главных элементах сайта.

Основа минимализма – использование минимума средств при создании сайта. Однако, в этом случае, многократно возрастает значение профессионализма исполнителя подобного ресурса.

Web 2.0 определяют как комплексный подход к организации, реализации и поддержке веб-ресурса. Основными характеристиками стиля веб-2 являются:

• Простота
• Центральное выравнивание
• Небольшое количество колонок
• Выделение областей цветом
• Градиенты
• Слегка увеличенный размер шрифта
• Блоки с закругленными углами
• Глянцевые блики на кнопках
• Логотипы с зеркальным отображением
• Отсутствие привычной высокой шапки

Гранж

Стиль «гранж» позволяет делать дизайн менее однородным, более органичным и немного хаотичным. Гранж — противоположность вылизанного стиля web 2.0, протест гламуру, идеальной холодной красоте и ненастоящему.

Его характерными признаками являются текстурированные и песчаные фоны, неровные и рваные края, затертые и размытые графические элементы вдохновленные городской и индустриальной архитектурой и пейзажами.

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

Готический

Готика — характеризует заключительную стадию развития средневекового искусства Западной Европы. Готический стиль характеризуется яркими красками, использованием элементов с позолотой и витражей. Это экспрессивный стиль, отражением которого является игра цвета, использованием камня и стекла.

Готический стиль в дизайне чаще всего используют для создания игровых или контент сайтов.

Векторный

Дизайн для сайта, выполненный на основе векторного клипарта практически ничем может не отличаться от выполненного вручную дизайна элементов.

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

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

Хай-тек

Дизайн сайта в стиле hi-tech определяет принадлежность к высоким технологиям. Целевой аудиторией являются посетители – новаторы, они энергичны, стремятся следовать в ногу со временем.

Хай-тек — стиль, пропагандирующий эстетику материала, поэтому цветовое решение: цвета чистые и четкие, без полутонов: черный, белый и серый в основе и красный, синий, зеленый и желтый — как дополнение.

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

С эффектом параллакса

Одной из тенденций сегодня в производстве веб-сайтов – нарушение традиционных представлений о пользовательской навигации, создание впечатления, запоминаемость.

Эффект параллакса используется для создания анимированных иллюзий, эффекта движения объектов на сайте.

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

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

Технология параллакс позволяет применять этот эффект для всего сайта, или анимировать только один из элементов (допустим шапку, фон или баннер) сайта.

Эффект используют для создания презентаций брэндов, промо-сайтов, сайтов-визиток, небольших бизнес-сайтов, социальных сайтов, сайтов-портфолио, виртуальных бутиков, сайтов салонов или ресторанов.

Минимализм (текстовый)

Чаще всего используется для создания контент-сайтов.

Для сайта характерно минимум графики. Применение различных модулей и эффектов для вывода текстового контента.

Сайт четко структурирован в соответствии с структурой документов и видов текстовой информации.

Органический

Органический стиль в дизайне предполагает использование природных и натуральных визуальных объектов. Минимальное вмешательство в фотографии.

Беря за основу в дизайне сайта этот стиль, в качестве бекграунда используют фотографии с изображением природы, так же могут быть использованы слайды с использованием «органических» компонентов, содержащие природные и экологичные текстуры.

Органический дизайн основан на живом чувствовании, мышлении, стремлении познать красоту, законы природы.

Ретро (винтажный)

В середине 2000-х годов стал набирать популярность ретро (винтажный) стиль. Ретро-дизайн может включать ретроспективные, классические или античные элементы. Наиболее популярными историческими периодами, обыгрываемыми в дизайне сайтов, являются:

• дизайн под античность и период до 20 века,
• дизайн в стиле культуры начала 20 века,
• дизайн в стиле пост-военного периода и более позднего времени (наиболее популярен период до 60-70-х годов)

Ретро стиль используется, тогда, когда нужно сформировать у потребителя определенные знания о продукте, подчеркнуть его богатую историю.

Журнальный (газетный)

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

• Вертикальность расположенной информации, часто в 2 или 3 колонки. Каждая колонка разделена либо полосами, гармонирующими со всем стилем сайта, либо пробелами. Присутствуют поля слева и справа, как принято в тетрадках и любых книгах.
• Одна страница может содержать совершенно по-разному оформленные блоки информации. Это может быть обыкновенный текст в колонке, текст в цветной рамке с другим фоном и другим стилем в заголовке, поясняющий текст на самих изображениях. Макетирование журнала определяет с помощью сетки расположение картинок и заголовков.
• Заголовки выделяются полужирным начертанием, разными стилями шрифта и многообразием цвета.
• Шрифты, используемые в тексте без засечек, размер средний.
• Очень много хороших высококачественных фотографий, которые являются яркими пятнами на странице веб-журнала и затмевают по цветовому решению другие графические элементы сайта.
• Присутствуют фоновые иллюстрации, по цвету гармонирующие с основным цветом веб-страницы журнала.
• Навигация по максимуму представляет все подразделы сайта без повтора в футере, ссылки на темы рубрик есть на каждой странице.
• Наполнен яркими красками, радостью, неким праздничным настроением.
• Попадая на сайт, выполненный в журнальном стиле, чувствуешь привычное ощущение отдыха от просмотра бумажного журнала.

Дизайн в журнальном стиле предполагает размещение на страницах сайта больших объемов текстовой информации. Изображения информативно дополняют текст и несут смысловую нагрузку.

Мультипликационный

Мультяшный стиль сайта — рисованный дизайн, стилизованный под мультфильмы или комиксы:

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

Чаще всего применяется для создания веб-проектов для детей и мам.

Футуристический

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

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

Источник