Минималистичный сайт — правила создания и примеры дизайна
Минимализм – очень интересная тема, потому как основывается на идее того, как меньшее в итоге становится большим. Дизайнеры часто думают о том, как убрать излишества в разметке сайта, а кто-то становится сторонником этого модного тренда. Но какими должны быть минималистичные сайты? Хотя в идее и правилах их создания нет принципиальной новизны, все же различные штрихи меняются со временем.
Современные направления web-дизайна и применение техник CSS3/HTML5 добавили свежих идей и вместе с адаптивным дизайном проложили дорогу новому минималистичному стилю. Дизайнеры минималисты могут теперь сосредоточиться на красивом интерфейсе, навигации и отображении контента. Я надеюсь, что эти идеи, методики могут быть полезны тем, кого интересуют принципы минимализма в веб-дизайне.
Минимизируйте число несущественных элементов
Создание разметки мне напоминает что-то вроде фокусирования на главной «идее» с экспериментами в навигации и разных альтернативных методов для оживления сайта. Вопрос только в том, как будет основной контент соответствовать видео, изображениям, галереям, постам блога и практически всему.
Дизайн портфолио Jonatan Castro чрезвычайно элегантен и демонстрирует мое представление о красоте. Вам сразу же представляется маленькое слайд-шоу из иконок и предыдущих работ. Навигация минимальна, но кликабельное лого показывает и прячет панель с контактами, кнопками соц. сетей, ссылками на другие ресурсы автора. Отличная идея, в данном случае – убрать определенную часть контента и освободить драгоценное место экрана для решения одной первостепенной задачи. При этом посетитель легко может открыть и закрыть панель по собственному желанию.
Придерживайтесь правила: только рабочий дизайн
Я всегда использую фразу: не изобретайте велосипед. И она идеально подходит для веб сферы, потому как столько всякой информации сейчас доступно стало. Но стоит ли пытаться создать свой новый и амбициозный дизайн, который в конечном итоге не оправдает надежд, и может в итоге пагубно отразиться на этом сайте. Не лучше ли вместо этого эффективно использовать уже существующий код, который протестирован многими веб-разработчиками и имеет успешную практику применения. Разработать минималистичный дизайн сайта — это супер просто, когда вы понимаете правильно, что именно создаете и как это должно быть представлено. Проект Fedena – Open Source платформа для школ и содержит информацию для студентов и классов. Сайт очень простой, навигация плюс базовый контент.
Но что вы сразу заметите, это то, как он работает. Начиная с главной страницы, вы легко можете найти то, что вас интересует. Что еще более интересно, каждое веб приложение идеально адаптировано к работе на данном шаблоне сайта. Не важно где посетитель находится: на блоге, форуме или любой иной странице сайта – все элементы выглядят однородно.
Визуально большие блоки контента
Типично для этого стиля не использовать флэш графику или баннеры. Фон часто является одним из оттенков или паттерном и совсем не обязательно разделять страницу на отдельные секции линиями. Крупные блоки контента – надежное средство привлечь внимание в любом месте страницы сайта.
Haik Avanian портфолио – превосходный пример реализации этой идеи. Посетителю, впервые попавшему на главную страницу сразу же понятно: как устроена навигация по сайту и как просмотреть все работы в портфолио дизайнера. Каждый блок контента является ссылкой на внутреннюю страницу с информацией и деталями работ.
Дизайн, который оставляет хорошее впечатление о стиле минимализма. Возможно, вы найдете лучшие примеры подобных портфолио но замечу, что данную методику можно использовать при создании практически любого типа сайта: бизнес, стартапы, интернет-магазины, как на основе платных шаблонов, так и самописного движка.
W+K Tokyo – минималистичный адаптивный сайт c дизайном изначально ориентированным на использование контентных блоков. Посетив страницу WORK вы обнаружите еще большее действие этого правила. Этот дизайн работает, потому как каждая деталь на странице выглядит упорядоченной и занимает свое место.
Баланс контента и свободного пространства
Данное правило не самоцель или руководство к действию, поскольку все тренды веб-дизайна основаны на нуждах проектов. И я хочу подчеркнуть что минимализм в конечном счете, не ставит задачу так: убрать как можно больше всего с веб-страницы. Хорошо когда много свободного пространства, но это не обязательное требование.
Я сошлюсь на дизайн-агенство Appex, создавших минималистичный вид для своего сайта (это также пример минимализма и адаптивного дизайна) с большими сдвоенными блоками в прокручиваемом контенте. На их сайте при скроллинге, фиксированный тулбар находится в верху страницы. Этот способ часто встречается и действительно хорошо работает, оставляя много свободного места на странице.
В дизайне их сайта также используются горизонтальные блоки, которые многим так нравятся.
Их хорошо использовать для разделения значимых объектов на веб-странице, таких как точки входа в портфолио или руководства пользователям. Горизонтальные блоки легко сделать утончёнными, используя границы или цвета фона. Но часто их можно оставить «как есть», расположив каскадом на странице.
В пользу свободного пространства доводы довольно просты: чрезмерное заполнение страницы контентом сильно затрудняет чтение. Разрабатывая супер-детальный дизайн как у Appex, требуется соблюдать общий баланс. Это не сразу получается – но продолжайте пробовать! Минимализм – это один из наилучших методов профессиональной практики создания пользовательских интерфейсов / новых навыков для пользователей. Создание дизайна, который будет нравиться посетителям сайта и «продажа» вашего контента – почти взаимосвязаны.
Примеры минималистичного дизайна сайтов
Future Fabric
спасибо, в закладки
На этот раз мы рассмотрим несколько десятков примеров минималистичный дизайн веб-сайтов. Посмотрим, смогут ли они вам понравиться.
Минималистичный дизайн сайта — правила создания. Примеры what can i do