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

стиль

Акцентирующим элементом "приветственного блока"
является:

- баннер или слайдер, заверстанный на всю ширину экрана, либо уже ширины экрана и лежащий на подложке

- человек либо предмет, отделенный от фона путем затемнения или размытия и т.д.

- текст в виде офера, анонса и кнопки, призывающей к действию

АКЦЕНТЫ:

ОСОБЕННОСТИ:

- Структура построена колонками;

- Наименование и логотип находятся в верхней части страницы;

- Меню расположено слева или сверху, выпадающее либо статичное;

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

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

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

ГДЕ ИСПОЛЬЗУЕТСЯ:

Классический стиль уникален и используется в оформлении сайта практически любого типа: сайт компании, магазин, визитка, афиша, новостной сайт, landing page и т.д.

Промо-дизайн

Фото- и видеофон

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

АКЦЕНТЫ:

ОСОБЕННОСТИ:

ГДЕ ИСПОЛЬЗУЕТСЯ:

В промо-дизайне важно выгодно показать товар (услугу, эвент и тд).
Используется в магазинах, сайтах брендовых компаний, Landing page

Крупные фотографии и видео;
Много свободного пространства;
Акцент выделенных элементов;
Крупные заголовки.

FLAT. Векторная иллюстрация

плоский дизайн, мультяшный стиль

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

АКЦЕНТЫ:

ОСОБЕННОСТИ:

ГДЕ ИСПОЛЬЗУЕТСЯ:

Плоская графика и иллюстративный стиль применяется для компаний, занимающихся:

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

Векторные иллюстрации;
Двухмерная графика;
Минимум фотографий;
Контрастные цветовые решения.
Одноцветные фоны, разграничивающие контент.

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

Сцена - объект - ломаная сетка

промо, минимализм с использованием ломаной сетки и паралакса

В центре композиции, которая является сценой поставлен акцентируемый объект:

- изображение человека или предмета в виде цельной фотографии, вырезанной фотографии, иллюстрации или 3D-объекта но плоском фоне (цветовая плашка или фото- и видео-фон)

- 3D-объект, находящийся в центре объемной комнаты. Объект выделен ха счет размытия или затемнения (осветления) или монохромизации (пантон, ч/б) комнаты.

АКЦЕНТЫ:

ОСОБЕННОСТИ:

ГДЕ ИСПОЛЬЗУЕТСЯ:

- Как правило это ПРОМО-САЙТЫ (сайты брендовых компаний или магазины). На приветственном баннере показан товар, актуальный сегодня, участвующий в акции или нуждающийся в продвижении...

На макете часто применяется параллакс или анимация, реагирующая на перемещение курсора или скроллинг.

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

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

Минимализм, Fashion, Сверхчистый стиль

Ничего лишнего. Чем меньше - тем больше...

Главное на сайтах в стиле минимализм — простота и ничего лишнего. Количество визуального оформления сводится к минимуму. Текстовые блоки сжаты до ключевых фраз или призыва к действию. Сайт должен выглядеть легким, воздушным.

Минимализм очень распространен в реальности, добрался и до веб-пространства. Основной акцент — на простом и неброском оформлении. Здесь не должно быть ничего лишнего! Информативность проявляется не в обилии контента, а наоборот. Иногда весь текст на минималистичных сайтах заменен на видео или сжат до пары фраз или призыва к действию.

АКЦЕНТЫ:

ОСОБЕННОСТИ:

ГДЕ ИСПОЛЬЗУЕТСЯ:

- сайты брендовых компаний
- сайты Fashion-индустрии и модных показов
- интернет-магазины
- Landing Page

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

Карамельный веб «2.0». Скевоморфизм

Первая декада XXI века

Акцент - реалистичные материалы и яркие реалистичные объекты.

Эти клише наполняли интернет в основном с 2003 по 2010. Часто технологии не очень поспевали за модой. Вспомним, например, верстку закругленных уголков, которая делалась с помощью картинок. Однако, как видно из этого же примера с уголками, мода подхлестывала технологии.

АКЦЕНТЫ:

ОСОБЕННОСТИ:

ГДЕ ИСПОЛЬЗУЕТСЯ:

- Сайты компаний
- Интернет-магазины
- Landing Page

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

Черты скевоморфизма в вебе:

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