12 ключевых макетов сайтов ★

12 клю­че­вых маке­тов сай­тов: пол­ный гид для веб-дизай­не­ров. Когда кли­ент гово­рит «хочу кра­си­вый сайт», пер­вое, что нуж­но сде­лать — выбрать пра­виль­ный макет. 

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

Под­пи­ши­тесь на Tiku Digital ВКонтакте

Двухколоночный макет — классика жанра

Про­ве­рен­ная вре­ме­нем струк­ту­ра: основ­ная широ­кая колон­ка для кон­тен­та и узкая боко­вая для навигации/​дополнительной информации.

• Где исполь­зо­вать: бло­ги, новост­ные сай­ты, интернет-магазины
• Плю­сы: чёт­кая струк­ту­ра, удоб­ная навигация
• Мину­сы: может выгля­деть устаревшим

Разделённый экран — для смелых решений

Экран делит­ся на две части, каж­дая со сво­им кон­тен­том. Встре­ча­ют­ся рав­ные и нерав­ные (напри­мер, ⁷⁰⁄₃₀) разделения.

• Где исполь­зо­вать: сай­ты с дву­мя рав­но­знач­ны­ми вари­ан­та­ми выбора
• Плю­сы: визу­аль­но при­вле­ка­тель­но, выде­ля­ет важное
• Мину­сы: тре­бу­ет тща­тель­но­го под­бо­ра контента

Асимметричный макет — вызов традициям

Наме­рен­ный дис­ба­ланс созда­ёт дина­ми­ку и при­вле­ка­ет вни­ма­ние к клю­че­вым элементам.

• Где исполь­зо­вать: кре­а­тив­ные агент­ства, арт-проекты
• Плю­сы: уни­каль­ный внеш­ний вид
• Мину­сы: слож­но реа­ли­зо­вать без поте­ри удобства

F‑образный макет — как читают пользователи

Осно­ван на иссле­до­ва­ни­ях дви­же­ния глаз: сна­ча­ла гори­зон­таль­но свер­ху, затем вниз и сно­ва горизонтально.

• Где исполь­зо­вать: инфор­ма­ци­он­ные сай­ты, блоги
• Плю­сы: соот­вет­ству­ет есте­ствен­но­му поведению
• Мину­сы: может выгля­деть шаблонно

Комментарий эксперта

Поль­зо­ва­те­ли ска­ни­ру­ют стра­ни­цу бук­вой F. Пер­вые две стро­ки — золо­тая зона. Если ваш кон­тент не попа­да­ет туда, он не суще­ству­ет.

— Якоб Ниль­сен (Jakob Nielsen), соучре­ди­тель Nielsen Norman Group (NN/​g) и «отец юзабилити»

Z‑образный макет — для лендингов

Глаз дви­жет­ся от лого­ти­па (свер­ху сле­ва) через клю­че­вую инфор­ма­цию к CTA (сни­зу справа).

• Где исполь­зо­вать: про­мо-стра­ни­цы, лендинги
• Плю­сы: ведёт поль­зо­ва­те­ля к цели
• Мину­сы: огра­ни­чен­ная ёмкость контента

Мнение эксперта

Z‑паттерн — это исто­рия с мора­лью: веди­те взгляд к CTA, а не застав­ляй­те его блуж­дать.

— Якоб Ниль­сен (Jakob Nielsen), соучре­ди­тель Nielsen Norman Group (NN/​g) и «отец юзабилити»

Карточный макет — любимец соцсетей

Кон­тент орга­ни­зо­ван в виде отдель­ных кар­то­чек, как в Pinterest или Instagram.

• Где исполь­зо­вать: гале­реи, ката­ло­ги, портфолио
• Плю­сы: отлич­ная адаптивность
• Мину­сы: может фраг­мен­ти­ро­вать восприятие

Цитата эксперта

Кар­точ­ки рабо­та­ют, пото­му что ими­ти­ру­ют есте­ствен­ное пове­де­ние — про­смотр «кусоч­ков» инфор­ма­ции, как в физи­че­ском мире.

— Якоб Ниль­сен (Jakob Nielsen), соучре­ди­тель Nielsen Norman Group (NN/​g) и «отец юзабилити»

Макет с главным изображением — wow-эффект

На пер­вом экране — пол­но­раз­мер­ное изоб­ра­же­ние с мини­му­мом текста.

• Где исполь­зо­вать: фото­гра­фы, оте­ли, пре­ми­ум бренды
• Плю­сы: силь­ное эмо­ци­о­наль­ное воздействие
• Мину­сы: тре­бу­ет каче­ствен­ных изображений

Кирпичный макет — динамика и хаос

Эле­мен­ты раз­ной высо­ты рас­по­ло­же­ны без стро­гих линий, как кир­пи­чи в кладке.

• Где исполь­зо­вать: твор­че­ские порт­фо­лио, блоги
• Плю­сы: визу­аль­но интересно
• Мину­сы: слож­но вос­при­ни­мать иерархию

Журнальный макет — для больших объёмов

Мно­го­уров­не­вая струк­ту­ра с раз­ны­ми бло­ка­ми кон­тен­та, как в печат­ных журналах.

• Где исполь­зо­вать: новост­ные пор­та­лы, онлайн-журналы
• Плю­сы: мно­го кон­тен­та на одной странице
• Мину­сы: риск перегруженности

Фиксированная навигация — всегда на виду

Меню оста­ёт­ся види­мым при скрол­лин­ге страницы.

• Где исполь­зо­вать: сай­ты с глу­бо­кой структурой
• Плю­сы: удоб­ство навигации
• Мину­сы: зани­ма­ет место на экране

Скрытая навигация — минимализм

Меню появ­ля­ет­ся толь­ко по запро­су (зна­ме­ни­тый «гам­бур­гер»).

• Где исполь­зо­вать: мобиль­ные вер­сии, мини­ма­ли­стич­ные сайты
• Плю­сы: эко­но­мия пространства
• Мину­сы: сни­жа­ет discoverability

Оценка эксперта

Меню за гам­бур­ге­ром — это игра в прят­ки с поль­зо­ва­те­лем. Вы пря­че­те 80% функ­ци­о­на­ла и удив­ля­е­тесь, поче­му его не нахо­дят».

— Якоб Ниль­сен (Jakob Nielsen), соучре­ди­тель Nielsen Norman Group (NN/​g) и «отец юзабилити»

Интерактивный макет — игра с пользователем

Эле­мен­ты реа­ги­ру­ют на дей­ствия: меня­ют­ся, дви­га­ют­ся, трансформируются.

• Где исполь­зо­вать: порт­фо­лио дизай­не­ров, инно­ва­ци­он­ные проекты
• Плю­сы: вовле­ка­ет пользователя
• Мину­сы: слож­ная реализация

Как выбрать идеальный макет?

Отве­ча­ем на 3 клю­че­вых вопроса:

1. Кто ваша ауди­то­рия? (воз­раст, при­выч­ки, устройства)
2. Какой глав­ный кон­тент? (текст, фото, видео, товары)
3. Какое основ­ное дей­ствие? (чте­ние, покуп­ка, контакт)

Заключение: нет плохих макетов — есть неправильное применение

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

Какой макет вы исполь­зу­е­те чаще все­го? Дели­тесь опы­том в комментариях!