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

минимализм в дизайне сайтов

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

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

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

Blake Allen Design

Преувеличенные шрифты используются здесь повсеместно.

EndGrain

минимализм в дизайне сайтов - шрифты

Другой пример огромного шрифта в заголовке сайта.

Words Are Pictures

минимализм в вебе - шрифты

Большая типографика популярна также в качестве акцента, а не только основного ловящего взгляд элемента.

Ryan Evans

минимализм шрифты

Веб-сайт, сочетающий на странице несколько великоразмерных шрифтов. Этот прием хорош при небольшом количестве текстового контента.

Division Paris

минимализм шрифты

Прекрасный пример огромного шрифта в шапке сайта.

Узоры и картинки в качестве фона

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

Jeroenhoman.com

минимализм - фон и узоры

Бледные узоры придают дизайну законченный вид.

IdeaPaint

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

Большое фоновое изображение все равно в рамках минимализма, если остальное содержимое страницы остается простым.

Простая сетка

Сетка не является необходимым элементом стиля минимализм. Тем не менее иногда она может организовать «голый» дизайн.

Fitzroy & Finn

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

Простая сетка имеет смысл при организации картинок одинакового размера.

Design Woop

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

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

Fortyone

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

Еще один прекрасный пример использования простой сетки для организации картинок, на этот раз вместе с пояснительным текстом.

Things

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

Простая на вид сетка подчеркивает правильную дизайнерскую мысль («То, о чем вы должны думать во время дизайна – это содержимое, люди, содержимое и еще раз содержимое»).

Corporate Risk Watch

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

Positively Melancholy

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

Такая сетка, как здесь, хорошо организует фотографии разного размера.

Круги

Круги можно обнаружить на многих сайтах в стиле минимализм. Они используются в шапках и в качестве акцентов.

iLTD

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

Простой круглый логотип в шапке.

Bless

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

Круглые бэйджики вроде этого также популярны.

Royale

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

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

Бонус — прозрачность

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

Slideshow Press

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

Прозрачность логотипа придает дизайну дополнительную глубину.

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

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

Логотип WordPress.com

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

Фотография Twitter

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

Фотография Facebook

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

Google+ photo

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

Connecting to %s

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