Дизайн landing page под новым углом
Чтобы ввести новые формы в плоский дизайн, дизайнеры вспомнили школьные знания геометрии. Простым и самым удачным решением оказались многоугольники! Треугольники, ромбы, шестигранники, да и просто углы и диагонали пришли на смену порядком надоевшим фотографиям в кружочках. Эти геометрические формы используются для:- навигации по сайту;
- акцента на важных блоках;
- нетривиальной подачи контента.
Клик на фото, чтобы посмотреть пример лендинга в оригинале.
Пример лендинга для веб-разработчиков
Этот сайт принадлежит двум коллегам, один - дизайнер, другой - разработчик (многообещающее сочетание!). Дизайн их сайта очень симметричный, ключевой элемент в нем - ромб. Парни отказались от скучных фотографий в кружочках и смотрите, какого эффекта они добились:Пример лендинга в нише "дизайн интерьеров"
Еще один пример "ромбастого" дизайна. Российская компания по озеленению интерьеров использует ромбы с фото в качестве иллюстраций, а с текстом и заливкой в качестве ссылок. Если перейдете непосредственно на сайт - увидите несколько примеров небольшой анимации с ромбом в главных ролях.
Пример лендинга в нише "рекламное агентство"
В дизайне следующей посадочной страницы углов становится еще больше - к вашим услугам товарищ пятиугольник! Все фигуры разного размера, с заливкой цветом и без, и дополнены забавными дудликами. Такой лендинг говорит целевой аудитории: "Если вы цените юмор и креативные решения, то добро пожаловать к нам".
Три самых главных элемента в этом дизайне: геометрические фигуры, бирюзовый цвет, отрисованные иллюстрации.
А если вы откроете этот сайт, то в качестве бонуса увидите ненавязчивую анимацию.
Пример лендинга в нише "мобильные приложения"
Следующий пример встречает пользователя огромной галочкой. V-элементы продумано "раскиданы" по всему лендингу. В сочетании с мягкими пастельными ретро-иллюстрациями они придают посадочной странице завершенный вид.
Такой лендинг убивает сразу двух зайцев. И вы знаете, что делать, когда хочется использовать и хипстерские картинки, и геометрию. Обратите внимание, как скупо и сдержанно отрисованы кнопки, за счет этого они и выделяются на фоне других составляющих.
Пример лендинга в нише "интернет-магазин"
Удачный пример посадочной страницы для интернет-магазина. Посмотрите, как удачно здесь сочетается графика логотипа и геометрические элементы в дизайне сайта. Плюс к этому, угол, направленный вниз, привлекает пользователя к основному призыву к действию - "стать дистрибьютором".
Пример лендинга-портфолио работ
Пчелы, мёд, пыльца... Как это связано с геометрическим дизайном, спросите вы? Очень просто! Ведь один из самых популярных элементов - это соты, или шестигранники. Отлично подходит, если нужно разнообразить подачу однообразного контента (например, в портфолио работ). За примером вам не придется далеко ходить:
Пример лендинга с диагональными элементами
Геометрия не только освежает дизайн, но и создает иллюзию движения. Сравните статичные лендинги только с горизонтальными и вертикальными линиями и те, в которых есть диагональные элементы. Используя углы и диагонали, можно привлечь внимание пользователей к важной информации, направить взгляд, куда нужно вам. Либо просто разнообразить подачу контента. Посмотрите пример. Вы увидите как оригинальную подачу портфолио, так и самую классическую дизайнерскую ошибку:Заметили, в чем ошибка? Посмотрите на тонкий белый шрифт на черном фоне и на его мелкого брата-близнеца в пояснении к каталогу. Это минус сто к юзабилити: текст не читается и рябит в глазах.
Можно сделать простой вывод: какие бы трендовые элементы вы не использовали, следите за восприятием сайта в целом. Все элементы (шрифт, фон, геометрические формы, цвет, композиция, контент и т.д.) должны работать в комплексе.
Комментарии
Крутая статья
Спасибо! Вам пригодилась информация из статьи?
Нифига не понятно(((
Что именно не понятно, можно поподробнее? Могу на вопросы ответить в комментариях)