Пт, 5/04/19 – 9:26 | 2 комментария

Эта статья о том, что для успеха Landing Page важна не только визуальная привлекательность. От лендингов ждут высоких конверсий. Эффективность лендингового сайта особенно …

Читать статью »
Дизайн

Секреты веб-дизайна, примеры стильных сайтов

Тренды / ТОП

Топ лучших идей, новые тенденции и тренды WEB’а

Маркетинг

Статьи о маркетинге сайтов, примеры эффективности

Свой сайт

Как создать, оформить, сделать сайт лучше

Шаблоны сайтов

Обзоры шаблонов: лучшие темы для сайта

Главная » Дизайн, Тренды / ТОП

Минималистичный сайт — правила создания и примеры дизайна

19 декабря 2012 3 комментария

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

Современные направления web-дизайна и применение техник CSS3/HTML5 добавили свежих идей и вместе с адаптивным дизайном проложили дорогу новому минималистичному стилю. Дизайнеры минималисты могут теперь сосредоточиться на красивом интерфейсе, навигации и отображении контента. Я надеюсь, что эти идеи, методики могут быть полезны тем, кого интересуют принципы минимализма в веб-дизайне.

Минимизируйте число несущественных элементов

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

супер-минималистичный сайт портфолио

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

Придерживайтесь правила: только рабочий дизайн

Я всегда использую фразу: не изобретайте велосипед. И она идеально подходит для веб сферы, потому как столько всякой информации сейчас доступно стало. Но стоит ли пытаться создать свой новый и амбициозный дизайн, который в конечном итоге не оправдает надежд, и может в итоге пагубно отразиться на этом сайте. Не лучше ли вместо этого эффективно использовать уже существующий код, который протестирован многими веб-разработчиками и имеет успешную практику применения. Разработать минималистичный дизайн сайта — это супер просто, когда вы понимаете правильно, что именно создаете и как это должно быть представлено. Проект Fedena – Open Source платформа для школ и содержит информацию для студентов и классов. Сайт очень простой, навигация плюс базовый контент.

Минималистичный дизайн сайта: правила создания и примеры

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

Визуально большие блоки контента

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

Haik Avanian портфолио – превосходный пример реализации этой идеи. Посетителю, впервые попавшему на главную страницу сразу же понятно: как устроена навигация по сайту и как просмотреть все работы в портфолио дизайнера. Каждый блок контента является ссылкой на внутреннюю страницу с информацией и деталями работ.

пример хорошего дизайна сайта в стиле минимализм

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

Читайте также:  80+ новых бесплатных тем WordPress для портфолио

минималистичный адаптивный дизайн

W+K Tokyo – минималистичный адаптивный сайт c дизайном изначально ориентированным на использование контентных блоков. Посетив страницу WORK вы обнаружите еще большее  действие этого правила. Этот дизайн работает, потому как каждая деталь на странице выглядит упорядоченной и занимает свое место. 

Баланс контента и свободного пространства

Данное правило не самоцель или руководство к действию, поскольку все тренды веб-дизайна основаны на нуждах проектов. И я хочу подчеркнуть что минимализм в конечном счете, не ставит задачу так: убрать как можно больше всего с веб-страницы. Хорошо когда много свободного пространства, но это не обязательное требование.

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

пример хорошего дизайна сайта в стиле минимализм

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

горизонтальные блоки

Их хорошо использовать для разделения значимых объектов на веб-странице, таких как точки входа в портфолио или руководства пользователям. Горизонтальные блоки легко сделать утончёнными, используя границы или цвета фона. Но часто их можно оставить «как есть», расположив каскадом на странице.

В пользу свободного пространства доводы довольно просты: чрезмерное заполнение страницы контентом сильно затрудняет чтение. Разрабатывая супер-детальный дизайн как у Appex, требуется соблюдать общий баланс. Это не сразу получается – но продолжайте пробовать! Минимализм – это один из наилучших методов профессиональной практики создания пользовательских интерфейсов / новых навыков для пользователей. Создание дизайна, который будет нравиться посетителям сайта и «продажа» вашего контента – почти взаимосвязаны.

Примеры минималистичного дизайна сайтов

Jonathan Glynn Smithминималистичный дизайн сайта

Future Fabric 

минималистичный дизайн сайта

Hering Berlinминималистичный сайт

Читайте также:  9 тенденций в дизайне сайтов 2018 года