Стили дизайна веб страница

Стили и элементы современного веб-дизайна

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

Coastal Creative называет 2018-й годом контрастов и сочетаний разных стилей & направлений. Оформляя веб-сайт крупными изображениями, современный дизайнер волен добавить ретро-паттерны, цвета & типографику. Может использовать 2D окружение в трехмерном дизайне или статические иллюстрации с ненавязчивыми эффектами.

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

Текст, перекрывающий графический контент

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

Дизайны с наслаиванием и пересечением контента в общем пространстве:

elegantseagulls.com – сайт агентства с чистым дизайном и нестандартными подходами

carbonbeauty.com – минималистичный черно-белый дизайн, заголовок смещается вниз с прокруткой и проходит за и перед блоками

thibaultpailloux.com – разработчик на собственном сайте разнообразил тренд, украсив переходы градиентами

Асимметричные макеты и «ломаная» сетка

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

Дизайны с асимметричной разметкой и наслаиванием элементов:

welikesmall.com – ультрасовременный дизайн digital-агентства использует ломаную сетку с асимметричными пересечениями элементов. Крутые эффекты и микро-анимации интерфейса

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

originalterritory.com – приятный eCommerce сайт «Территория собак» с асимметричной разметкой. Дизайн мягкий, компактный и современный

imsproductions.com – красивое применение тренда на сайте американской продакшн компании

heeds.eu – яркий и нестандартный дизайн. Двуцветная коррекция изображений, градиенты, ломанная разметка

Duotone и оверлей поверх изображений

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

Современные и эстетичные веб-дизайны применяющие дуотон:

muller.it – итальянский продуктовый бренд красиво оформил сайт дуотон-видеобекграундом с добавлением мягкого градиента

cliquestudios.com – на главной странице сайта дизайн-агентства кейсы разграничены цветовыми фильтрами (overlay)

socialplayground.com.au – дуотон фото усиливают социальные доказательства, украшают главную и страницу «О нас»

Современное ретро в иллюстрациях и элементах

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

Современные сайты с элементами ретро-стиля:

sugarfirepie.com – винтажная иллюстрация в главном экране создает первое впечатление о кондитерском бренде, улучшает UX-дизайн сайта

Кастомные иллюстрации

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

Источник

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

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

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

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

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

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

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

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

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

Источник