геометрия и формы в веб дизайне
7 примеров лендингов с геометрическим дизайном: ошибки и свежие идеи
Представьте себе ситуацию: клиент хочет заказать лендинг, обязательно flat-дизайн, но с какой-нибудь изюминкой. Да, задача не из легких… Как добавить в простой современный дизайн лендинга что-то новое и оставаться в тренде? Не надо изобретать велосипед: дизайнеры уже придумали готовое решение. Вам остается только взять пару приемчиков на вооружение.
Дизайн landing page под новым углом
Чтобы ввести новые формы в плоский дизайн, дизайнеры вспомнили школьные знания геометрии. Простым и самым удачным решением оказались многоугольники! Треугольники, ромбы, шестигранники, да и просто углы и диагонали пришли на смену порядком надоевшим фотографиям в кружочках.
Эти геометрические формы используются для:
Как вы увидите в примерах посадочных страниц, любой контент, поданный под необычным углом (во всех смыслах), воспринимается свежо и по-новому.
Клик на фото, чтобы посмотреть пример лендинга в оригинале.
Пример лендинга для веб-разработчиков
Этот сайт принадлежит двум коллегам, один — дизайнер, другой — разработчик (многообещающее сочетание!). Дизайн их сайта очень симметричный, ключевой элемент в нем — ромб. Парни отказались от скучных фотографий в кружочках и смотрите, какого эффекта они добились:
Пример 1. Дизайн лендинга для веб-дизайнеров. Ключевой элемент дизайна здесь — ромб.
Пример лендинга в нише «дизайн интерьеров»
Еще один пример «ромбастого» дизайна. Российская компания по озеленению интерьеров использует ромбы с фото в качестве иллюстраций, а с текстом и заливкой в качестве ссылок. Если перейдете непосредственно на сайт — увидите несколько примеров небольшой анимации с ромбом в главных ролях.
Пример 2. Дизайн лендинга в нише дизайн интерьеров и озеленение. Посмотрите, как удачно скомбинированы иллюстрации и ссылки в виде сгруппированных ромбов.
Пример лендинга в нише «рекламное агентство»
В дизайне следующей посадочной страницы углов становится еще больше — к вашим услугам товарищ пятиугольник! Все фигуры разного размера, с заливкой цветом и без, и дополнены забавными дудликами. Такой лендинг говорит целевой аудитории: «Если вы цените юмор и креативные решения, то добро пожаловать к нам».
Три самых главных элемента в этом дизайне: геометрические фигуры, бирюзовый цвет, отрисованные иллюстрации.
А если вы откроете этот сайт, то в качестве бонуса увидите ненавязчивую анимацию.
Пример 3. Лендинг в нише «рекламное агентство». Посмотрите, как сочетаются геометрические фигуры, всеми любимый бирюзовый цвет и рукотворные дудлики.
Пример лендинга в нише «мобильные приложения»
Следующий пример встречает пользователя огромной галочкой. V-элементы продумано «раскиданы» по всему лендингу. В сочетании с мягкими пастельными ретро-иллюстрациями они придают посадочной странице завершенный вид.
Такой лендинг убивает сразу двух зайцев. И вы знаете, что делать, когда хочется использовать и хипстерские картинки, и геометрию. Обратите внимание, как скупо и сдержанно отрисованы кнопки, за счет этого они и выделяются на фоне других составляющих.
Пример 4. Дизайн лендинга в нише «мобильные приложения». Этот пример — правильный ответ на вопрос, как сочетать ретро-иллюстрацию и геометрические формы.
Пример лендинга в нише «интернет-магазин»
Удачный пример посадочной страницы для интернет-магазина. Посмотрите, как удачно здесь сочетается графика логотипа и геометрические элементы в дизайне сайта. Плюс к этому, угол, направленный вниз, привлекает пользователя к основному призыву к действию — «стать дистрибьютором».
Пример 5. Пример лендинга в нише «интернет-магазин». Удачное сочетание графики на этикетке продукта и элементов веб-дизайна.
Пример лендинга-портфолио работ
Пчелы, мёд, пыльца… Как это связано с геометрическим дизайном, спросите вы? Очень просто! Ведь один из самых популярных элементов — это соты, или шестигранники. Отлично подходит, если нужно разнообразить подачу однообразного контента (например, в портфолио работ). За примером вам не придется далеко ходить:
Пример 6. Пример лендинга-портфолио. Форма шестигранника придает подборке фотографий свежий вид и помогает разнообразить его (часть фигур — это работы, часть — ссылки).
Пример лендинга с диагональными элементами
Геометрия не только освежает дизайн, но и создает иллюзию движения. Сравните статичные лендинги только с горизонтальными и вертикальными линиями и те, в которых есть диагональные элементы. Используя углы и диагонали, можно привлечь внимание пользователей к важной информации, направить взгляд, куда нужно вам.
Либо просто разнообразить подачу контента. Посмотрите пример. Вы увидите как оригинальную подачу портфолио, так и самую классическую дизайнерскую ошибку:
Пример 7. Пример лендинга с диагональными элементами. Они освежают дизайн и облегчают пользователю восприятие однообразного контента.
Заметили, в чем ошибка? Посмотрите на тонкий белый шрифт на черном фоне и на его мелкого брата-близнеца в пояснении к каталогу. Это минус сто к юзабилити: текст не читается и рябит в глазах.
Можно сделать простой вывод: какие бы трендовые элементы вы не использовали, следите за восприятием сайта в целом. Все элементы (шрифт, фон, геометрические формы, цвет, композиция, контент и т.д.) должны работать в комплексе.
Дизайн лендинга и геометрия: классика или уходящий тренд?
Геометрический веб-дизайн выглядит современно и стильно, хотя находится на пике популярности уже четвертый год. Причина понятна: простые, с детства привычные элементы, позволяют организовать контент, не перегружая посадочную страницу. И заострить внимание на важных деталях. Поэтому геометрия столь любима дизайнерами всего мира.
Как вы считаете, сколько еще геометрические формы будут оставаться в топе? Это классика или тенденция, которая скоро уступит место чему-то новому?
Геометрия В Веб-Дизайне И Создание Абстракции В Photoshop
Геометрические формы используются в веб-дизайне в разном назначении. Их можно увидеть в навигации, визуальном акценте отдельных частей, оформлении фреймов и блоков, секций. Фигуры могут сочетаться друг с другом, создавая оригинальный визуальный эффект рисунка. Как создавать абстрактный геометрический коллаж, и как веб-мастера используют многоугольники в своей работе мы рассмотрим ниже.
Веб-дизайн, если рассматривать его как способ доставки контента пользователю, планируется и создается с особой ответственностью и важностью. Но сама работа упрощается тем, что в основе макета используются сетки, колонки и различные геометрические формы. Квадраты, прямоугольники, трапеции, ромбы, шестиугольники, треугольники, окружности – наиболее распространенные элементы для оформления дизайна, причем, в самых разных стилях. Их можно увидеть в навигации, визуальном акценте отдельных частей, оформления фреймов и блоков, секций. Более того, геометрические форы могут сочетаться друг с другом, создавая оригинальный визуальный эффект рисунка. Четкие, прямые, резкие и неокруглые линии и фигуры часто способствуют ассоциации сайта с передовыми технологиями, даже если сам контент рассказывает о… котятах, например.
В конце лета мы затрагивали немного тему многоугольников в веб-дизайне, рассматривали интересные работы веб-мастеров, упоминали об особенностях многоугольников. Сегодня мы повторно не будем подробно останавливаться на всех тонкостях геометрического веб-дизайна, но уделим внимание тому моменту, когда геометрические формы способны создавать потрясающий визуальный эффект коллажа. Поскольку такую красоту создавать несколько кропотливо, то мы разделим весь этот огромный объем информации на две части, последовательно и обстоятельно рассказывая о каждом варианте. Иными словами: практике работы в Photoshop с геометрическими формами мы посвятим два материала.
В целом, геометрические формы могут использоваться в веб-дизайне в разном назначении. В качестве фоновой текстуры, элемента навигации, но частенько такое применяют и в дизайне 360 0 или с эффектом дополненной реальности. Геометрические элементы – отличный вариант для оформления портфолио, галерей, домашних страниц. Для наглядности и вдохновения посмотрим на некоторые особо яркие примеры дизайна сайтов, которые и послужат нам основой для творения в Photoshop. Речь идет о bigbang, paseoitaigara, webey, mrsaghafi, jtcdesign, paseodegracia.
Геометрия, симметрия, абстракция в Photoshop
А если немного пофантазировать и превратить фотографию в абстрактный коллаж из геометрических фигур? Мы создадим нашу форму, а потом разрежем изображение по ней и выложим новую композицию. Немного цветооткорректируем и придадим эффектов. Ничего не напоминает? Возможно, некоторые из вас вспомнят старые ретро коллажи из фотографий, газет, рисунков, когда из изображений вырезались геометрические фигуры, а затем ими выкладывалась совершенно новая симметричная фигура.
Сложно? Не совсем. Некоторые мастера используют в дополнение к Photoshop еще и Illustrator, но мы сделаем все силами одного только фоторедактора.
Для начала нам предстоит нарисовать в новом документе фигуру «Эллипс» размером 500х500 px. Можно создать такой же по размеру Документ, а затем пропорционально увеличить размер холста до 700х700 px. Можно сразу большой и нарисовав фигуру, отредактировать размеры в окне свойств. Путей много, тут как вам удобнее.
Мы же создали новый документ 500х500 пикселей, включили направляющие через центр (Меню Просмотр – Новая направляющая и затем передвинули их в центр).
Отдельные геометрические фигуры мы будем рисовать разными цветами. Это для наглядности, для удобства выравнивания, чтобы все кружочки, уголочки визуально не сливались в черном цвете.
Затем рисуем отдельный маленький круг размером в половину большого, то есть 250х250 px и располагаем его внутри большого по центру. Поскольку мы рисуем симметричную абстракцию, то эту симметрию и придется создавать по направляющим.
Зажав кнопку Alt, инструментом Перемещение (чтобы автоматически создавались новые слои) создадим еще три копии маленького кружочка и разместим внизу, справа и слева, создав крестик. При этом сами кружочки должны пересекаться между собой и только границей соприкасаться с большим. Затем в центре тоже разместим один кружочек. И вот что должно получиться в итоге.
Поскольку мы рисуем геометрические фигуры, то одних только кругов мало. Давайте создадим треугольник, который должен будет вписаться в большой круг. Выбираем инструмент Многоугольник, устанавливаем количество сторон 3 и размер 250px. Рисуем его, а затем с помощью Трансформирования (Ctrl+T) подгоняем под размер (это чуть удобнее), так чтобы нижняя грань соприкасалась с тремя точками трех горизонтальных центральных кружочков.
А затем этот треугольник копируем и переворачиваем по вертикали. Итог ниже.
Таков наш рисунок.
Несложно, но красиво. Объединяем все слои в группу и делаем копию группы. Вот это нужно для того, чтобы затем иметь в будущем возможность отредактировать фигуру. Если бы мы использовали Illustrator, то фигура осталась бы там, и мы могли бы её там и редактировать. Но в данном случае, мы сохраним её в слоях как группу, а с копией поработаем дальше.
Выбираем группу копию и объединяем все слои. У нас получается отдельная целая фигура. Фон у нас белый, но если его отключить, то фигура будет прозрачной и с ней можно работать дальше.
Теперь:
И так каждый кусочек фигуры мы меняем. Поначалу будет казаться, что получается, откровенно говоря, «белиберда полнейшая». Но… к слою двадцатому вы заметите заметное преображение всего рисунка.
Важно: чтобы слой-кусочек ровно занял положение внутри фигуры, корректируйте его положение с помощью кнопок-стрелок на клавиатуре при активном инструменте Перемещение. Если все равно остаются нежелательные разрывы, активируйте Трансформирование (Ctrl+T) и поправьте форму кусочка. Затем соберите все их в группу.
И вот, что получилось в итоге.
А можно сделать их немного голубоватыми. При этом тонироваться будут только цветные границы. Проблема в том, что у нас кружочки в центре белые (ранее черные), а это значит, что они не затонируются с помощью параметра Цветовой тон. Наложим цветность другим способом.
Поэтому в окне «Цветовой тон/Насыщенность» меняем яркость на ноль и переходим в «Режим наложения» для данного слоя-фигуры. Здесь накладываем цвет и можно немного поиграть с «Внешним свечением», создав тем самым небольшую дымку.
Еще к оригиналу можно добавить теней немного, будто сверху рамка фигурная с линзами (рисунок-то искажен внутри) наложена и от её граней отбрасываются тени.
Мы оставим себе беленький оригинал для дальнейшего работы.
Веб-дизайн в последнее время несколько прохладно относится к коллажам в целом, но наши кусочки, размещенные несколько случайно и хаотично, образуя симметричную геометрическую фигуру, сохраняют целостность композиции и сбалансированность. Поэтому при размещении на главной странице под названием или логотипом, в качестве фона или в ином варианте (затонированым основным изображением или с уменьшением общей яркости и насыщенности) такой эффект не является устаревшим или признаком дурного тона.
Но давайте добавим немного ретро-веяния в коллаж. Мы подобрали вот такую текстуру пыли на черном фоне и добавляем её к нашему документу. Поскольку текстура черная, то режим наложения выбираем «Экран», что позволит сделать её прозрачной, светлой и скрыть, тем самым, всю черноту. Изображение обретет вид временной потертости, потеряет некоторую строгость и четкость.
Теперь над всеми слоями создаем Корректирующий слой «Кривые» (внизу панели слоев иконка есть). Отдельно меняем кривизну для Красного, Зеленого и Синего цвета, создавая тем самым ретро стиль и эффект обработанной старой пленки. Дополнительно можно охладить наше творение, добавив фотофильтр – «Глубокий синий» со средней плотностью.
Окончательный результат наших манипуляций является не чем иным, как абстрактным произведением искусства с частичками изображения, что были изначально вырезаны, а затем выложены в коллаже. Геометрические линии создают баланс произведения, в то время как дополнительное текстурирование и регулировка цветности завершает творение и превращает его в старинное изображение. При этом геометрические узоры могут быть самые разные, как и исходные изображения.
Ниже, например, мы отключили границы фигуры, придавая всей композиции больше воздушности, парения и нечто заоблачного. Таким образом, создается ощущение и ассоциация, что произведение не только представляет красоту технологического города, небоскребы которого поднялись гораздо и гораздо выше облаков, но и все многообразие этой красоты, преломляя и разбивая сцену на отдельные части, смешивая их в строгую симметрию.
Выводы
Геометрические фигуры используются не только в веб-дизайне. И причина тому – способность простых форм строить общение на динамике, движении. Они олицетворяют все это собой, а человек воспринимает геометрию, как нечто прогрессивное. Попробуйте отодвинуться от монитора и посмотреть на созданный нами коллаж издалека. Вы увидите совсем иное произведение, будто бы совсем новое. Возможно, вам покажется, что вот-вот оно закрутится или начнет распадаться на отдельные элементы.
Теперь представьте, что такую небольшую анимацию можно создать в Photoshop, или можно использовать параллакс и двигать отдельно фигуру и фон (он остался у нас целым и невредимым). Идей, в действительности, очень много.
Каждый год конструкции с геометрическими фигурами становятся популярными. В 2011 году в моде были диагонали; в 2013 – стиль METRO и квадраты с прямоугольниками; в 2016-2017 – параллакс породил безумие форм от треугольников до шестигранников. Это они только появились, а потом, в последующие годы, их старались применять практически везде. Таким образом, используя абстрактный коллаж, можно поразить и пользователей, и заказчиков необычностью и ассоциативной технологичностью.
Психология форм в дизайне UX
Успех любой визуальной композиции связан с тем, как люди ее воспринимают. Есть много факторов, влияющих на восприятие человека, и значительную роль играет психология. Аспект, который мы хотим затронуть в сегодняшней статье — психология форм в дизайне UX. Давайте посмотрим, что изучает это направление и как оно может помочь дизайнерам в творческом процессе.
Психология форм
Все визуальные объекты могут быть проанализированы с точки зрения формы. Например, дом может восприниматься как прямоугольник с треугольником сверху, а солнце часто представлено как круг с линиями вокруг него. Люди не всегда могут заметить, какие фигуры и формы окружают их, но все же они оказывают большое влияние на наше сознание и поведение. Наука, изучающая влияние форм на людей, известна как психология форм.
В исследованиях утверждается, что каждая форма имеет свой собственный смысл и влияет на наш разум и реакции. Есть много психологических тестов, которые используются для определения личности или психического состояния посредством форм. Например, выбранная форма может рассказать о чертах характера человека.
Многолетние исследования и тесты помогли специалистам определить, какое значение привносит каждая форма и как она может влиять на восприятие человеком. Давайте посмотрим поближе.
Значение геометрических фигур
Услышав слово «форма», большинство людей сначала думают о геометрических фигурах. Есть много геометрических фигур, которые люди видят ежедневно, включая квадраты, круги, прямоугольники и другие. Но что они означают? Посмотрим.
Квадраты и прямоугольники
Эти две формы считаются наиболее часто используемыми. Мы видим их много раз в день. Стены и мебель, книги или мониторы, сотовые телефоны и камеры, а также многие другие повседневные вещи имеют квадратную или прямоугольную форму. Прямые линии и прямые углы этих двух форм дают ощущение надежности и безопасности. Люди сильно ассоциируют квадраты и прямоугольники с практическими вещами, поэтому они приносят чувство доверия и авторитета.
Треугольники
Треугольник — энергичная и динамичная форма, которая всегда связана с движением и направлением. Линии размещены таким образом, чтобы наши глаза автоматически перемещались в верх треугольника или в направлении, в который направлен острый угол. Треугольники могут иметь разные значения. Прямоугольный треугольник приносит чувства стабильности и равновесия, но остроугольный выглядит рискованным и готовым упасть, давая людям ощущение напряженности.
Круги, овалы и эллипсы
Первым и главным смыслом этой формы является вечность, поскольку у круга нет начала или конца. Круг имеет связь с солнцем и Землей, а также с другими космическими объектами, в то время как эллипс подобен всей вселенной. Вот почему круглые формы могут дать ощущение магии и тайны. Кроме того, в отличие от предыдущих фигур круги не имеют углов, что делает их более мягкими.
Спирали
Эти формы часто можно увидеть в природе, например, раковины и цветы, причина, почему она часто связана с циклом жизни и роста. Кроме того, в некоторых культурах спирали могут представлять информацию. В современном обществе они воспринимаются как признак творчества и острого ума.
Психология форм в дизайне UX — значение естественных форм
Все вещи, созданные природой, имеют свою уникальную форму. Источником вдохновения для художников и дизайнеров становятся листья, цветы, деревья, животные и многие другие представители флоры и фауны. Природные формы имеют четкие значения растений и животных, которых они символизируют. Они часто приносят ощущение освежения и единства с окружающей средой. Кроме того, животные и растения могут также иметь свои собственные характеристики и символы. Например, роза — это цветок любви и страсти, а лев — символ гордости и храбрости.
Значения абстрактных форм в дизайне
Это, как правило, визуальные символы абстрактных идей или упрощенные версии естественных форм. Некоторые абстрактные формы могут быть слишком сложными для распознавания, потому что применяются стилизация, и только мелкие детали дают намек на то, что это такое. Одна абстрактная форма часто имеет как прямые, так и образные значения. Она часто используется в графическом дизайне, особенно для логотипов и иконок. Абстрактные формы — эффективный способ быстро передать сообщение без текста.
Психология форм в дизайне UX — практическое применение
Формы являются важными элементами во всех направлениях проектирования. Они могут служить компонентами визуальной композиции, а также инструментом организации контента, который делит или связывает элементы дизайна в группы. Чтобы сделать хороший дизайн, эксперты должны учитывать значение форм и влияние, которое они оказывают на мнение пользователей.
Графические дизайнеры часто имеют дело с небольшими, но содержательными элементами, такими как логотип и иконками. Мощный логотип должен передать правильное сообщение, которое будет выступать в роли лица бренда. Если формы выбраны надлежащим образом для логотипа, они помогут передать правильное настроение без дополнительных слов. Например, в случае логотипа для финансовой компании один из подходов может применяться для применения форм, которые передают чувство доверия и баланса, например, квадрат или треугольник.
Различные формы часто встречаются в пользовательских интерфейсах цифровых продуктов. Они могут использоваться как кнопки или иконки, а также применяются для организации контента на макете. Например, текстовые блоки часто собираются в прямоугольной или квадратной форме, что позволяет пользователям быстро сканировать текст. Используя различные формы, дизайнеры могут создавать эффективную информационную архитектуру для продукта. Элементы макета могут быть структурированы в определенных формах, чтобы пользователи легко находили основную информацию. Например, если мы разместим контент в треугольной форме, разместив на нем жизненно важный компонент, глаза людей автоматически перейдут на пик.
Психология фигур играет большую роль в типографии. Существует огромное количество шрифтов, и все они оказывают индивидуальное влияние на визуальное восприятие. Некоторые макеты применяют круглые формы как доминирующие, и они кажутся более женственными и мягкими, в отличие от тех, у кого прямые линии и острые углы, которые более формальны и иногда агрессивны. Вот почему важно обратить внимание на то, какие формы доминируют в выбранном шрифте, чтобы избежать конфликта между контекстом и визуальным представлением.
Человеческий ум полон секретов, и часто трудно предсказать возможные реакции. Однако наука о психологии помогает дизайнерам подготовиться и понять, как работает наш мозг, по крайней мере, на каком-то базовом уровне. Знание психологии дизайнеров форм позволяет создавать профессиональные логотипы наряду с пользовательскими интерфейсами для решения проблемных задач для веб-и мобильных продуктов.
Источник