Awebdesign's Blog

Принципы минимализма в веб-дизайне

(перевод Виктории Шидловской одноименной статьи из Smashing Magazine)

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

Меньше – это больше

«Меньше – это больше», наверное, самая известная фраза, иллюстрирующая движение минимализма. Фраза была популяризована архитектором Людвигом Миесом ван де Рохом (Ludwig Mies van der Rohe) в описании эстетики минимализма.
В веб-дизайне принцип «Меньше – это больше» означает использование только самых необходимых дизайнерских элементов. Используйте меньше, чтобы макет не был сборником бессмысленных фишек.

Примеры

North Kingdom

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

минимализм в веб-дизайне

Sleepover

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

минимализм в вебдизайне

Lindvall A&D
Простой векторный рисунок стула, еле видный, если вы не смотрите на него, иллюстрирует идеологию «Меньше – это больше».

минимализм в веб-дизайне

Your Neighbors

Еще один простой дизайн, с гораздо большим количеством графики.

минимализм в веб-дизайне

Sharpenr

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

минимализм в веб-дизайне

Избегайте ненужных вещей

В книге «Элементы стиля» авторы Странк и Уайт (Strunk & White) ввели термин «Избегайте ненужной работы». В философии минимализма эта фраза была переделана на «Избегайте ненужных вещей». Другими словами – не включайте ненужные элементы в свой дизайн.

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

Примеры

up&onward

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

принципы минимализма

Lachlan Bailey

Единственное изображение и вертикальное меню – вот и все, что здесь есть.

минимализм

Sarah Hultin

Другой пример одного изображения и вертикальной навигации

минимализм вебдизайн

Aleksei Dubrovsky

Дизайнер этого сайта пошел еще дальше – никаких изображений, только заголовок и простое меню.

минимализм вебдизайн

Вычитайте, пока есть что

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

Примеры

Anothercompany

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

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

Works in Silence

минимализм

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

Brett Arthur Photo

минимализм в вебдизайне

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

Danny Guy Photography

минимализм в веб-сайтах

Черный фон выделяет этот дизайн из множества других в стиле ультра-минимализм. Заметьте – в углу картинки опция по переводу изображения в полноэкранный режим.

Brian Danaher

веб минимализм

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

Каждая деталь имеет значение

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

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

Примеры

Executive Edits

правила минимализма

Дизайн стал выдающимся благодаря экстра-большому заголовку и тонким линиям между элементами.

Christine Szczupak Photography

детали в минимализме

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

Kha Hoang

детали в минимализме

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

The Rules of a Gentleman

детали минимализма

Все, начиная с толстой линии наверху и заканчивая миксом шрифтов делают этот сайт изысканным и утонченным.

Ryan Willms

детали в минимализме

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

Electricgecko

принципы минимализма

Светлый цветной фон под содержимым делит этот дизайн на смысловые части.

Минимум цвета

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

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

Примеры

Pixelbot Webdesign

цвет в минимализме

Яркие цвета выделяются на фоне черно-белого дизайна.

Second and Park

цвет в минимализме

Приглушенные цвета хорошо играют в минималистичном дизайне, особенно в сочетании с серым.

Glinga

цвета в минимализме

Простой веб-сайт с серым фоном и яркими акцентами.

Superawesome

цвета в минимализме - розовый

Малиновый цвет очень популярен в минимализме.

Nation

цвета в минимализме - серый и голубой

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

Пустое пространство жизненно необходимо

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

Пустое пространство «делает» дизайн минималистичным. Без него вы либо придете к сетке, либо к гранжу, либо к чем-то еще, но не к минимализму.

Примеры

Straightline

Тонна воздуха вокруг элементов.

52 Weeks of UX

минимализм - пустое пространство

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

Blank Studio

минимализм - много воздуха

Большое белое пространство между навигацией и изображением.

Тренды

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

Серый

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

Brian Hoff

минимализм в вебдизайне - серый цвет

Серый может играть роль акцента, не только в роли фона или типографики.

Michael Cronin

минимализм - серый цвет

Серый в качестве фона хорошо сочетается с холодным синим.

Ross Gunter

минимализм веб-майты

Очень простой дизайн с серым фоном.

Sort Design

минимализм веб-сайты

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

Jack Osborne

Серый цвет хорошо образует градиенты.

5-Squared

Серые тени привлекают внимание без замусоривания макета.

Большие шрифты

Добавить комментарий

Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

Логотип WordPress.com

Для комментария используется ваша учётная запись WordPress.com. Выход / Изменить )

Фотография Twitter

Для комментария используется ваша учётная запись Twitter. Выход / Изменить )

Фотография Facebook

Для комментария используется ваша учётная запись Facebook. Выход / Изменить )

Google+ photo

Для комментария используется ваша учётная запись Google+. Выход / Изменить )

Connecting to %s

%d такие блоггеры, как: