ШАБЛОНЫ САЙТОВ

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

Шаблоны "Главных страниц" отсортированы
по ДИЗАЙНУ и по ТЕМАТИКЕ.

Ниже в ближайшее время будут представлены варианты оформления различных блоков сайта: ПОДВАЛ, ОТЗЫВЫ, МЕНЮ, КАРТОЧКА ТОВАРА, КОРЗИНА и т.л.

Варианты дизайна ЭЛЕМЕНТОВ КОНТЕНТА

Здесь представлены варианты дизайна ЭЛЕМЕНТОВ КОНТЕНТА, объединенных в блоки (шапка, подвал, банннер или слайдер, отзывы, карточка товара и т.д.).
Задача этих материалов - помощь дизайнерам в выборе стилистики (flat или скеоморф и т.д.), метода взаимодействия элементов, например: иконки и текст (друг под другом, слева-направо или с наложением и т.д.)

ШАПКА САЙТА (Header)

Самый важный элемент сайта - ОДЁЖКА, по которой встречают. Блок навигации + "Приветственный экран"

ПОДВАЛ САЙТА (Footer)

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

КОНТАКТНАЯ ИНФОРМАЦИЯ

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

"ПРИВЕТСТВЕННЫЙ ЭКРАН" - главный раздел web-страницы, состоящий из меню навигации и контактного блока, баннера или слайдера (изображает товар или услугу, участвующую в промо-акции или показывает вид деятельности компании), как правило, ниже расположены "шайбы" - инфографика, показывающая основные виды товаров или услуг компании

ТЕКСТ + ИЗОБРАЖЕНИЕ

Взаимодействие заголовков, текстового блока и кнопки с иконкой, фото или другим изображением

ИКОНКА + ОПИСАНИЕ

Взаимодействие иконок и их описания, например: Схема оплаты, Как мы работаем, Наши преимущества и т.д.

ИНФОГРАФИЧЕСКИЕ КАРТОЧКИ

Графика + текст, расположенные геометрических фигурах или оформленные в виде карточек

МЕНЮ + КАРТОЧКИ КАТАЛОГА

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

КАРТОЧКА ТОВАРА

Блок детальной информации о товаре или услуги с возможностью заказа и оплаты

КОРЗИНА

Блок информации о выбранном товаре с возможностью заказа и оплаты.
Здесь же ВИДЫ ОПЛАТЫ, ДОСТАВКА и т.д.

ФОРМА ДЛЯ ЗАПОЛНЕНИЯ

Заполняемые формы для интерактивного взаимодействия, например: подписаться, задать вопрос, заказать звонок и т.д.

ОТЗЫВЫ

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

ПЕРСОНАЛЬНЫЕ КАРТОЧКИ

Информационные блоки с изображением человека и его описанием, например: Преподаватели курса, Наши специалисты и т.д.

СЛАЙДЕР

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

...

Сортировка шаблонов по ТЕМАТИКЕ САЙТА

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

Сортировка шаблонов по СТИЛЮ ДИЗАЙНА

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

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

стиль

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

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

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

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

ПРИВЕТСТВЕННЫЙ БЛОК - это блок, включающего в себя "шапку" с логотипом и контактной информацией, баннер либо слайдер и ряд иконок под баннером ("шайбы") описывающие основные виды деятельности компании или товары и услуги)

Оффер – основа все всех продаж, специальное предложение ограниченное временными рамками, от которого клиенты не способны отказаться

АКЦЕНТЫ:

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

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

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

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

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

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

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

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

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

Смотреть все макеты в этом стиле

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

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

Смотреть все макеты в этом стиле

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

АКЦЕНТЫ:

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

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

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

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

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

Смотреть все макеты в этом стиле

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

АКЦЕНТЫ:

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

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

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

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

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

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

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

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

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

Смотреть все макеты в этом стиле

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

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

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

АКЦЕНТЫ:

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

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

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

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

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

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

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

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

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

Смотреть все макеты в этом стиле

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

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

АКЦЕНТЫ:

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

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

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

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

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

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

Смотреть все макеты в этом стиле

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

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

АКЦЕНТЫ:

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

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

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

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

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

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