Городской Дизайн веб-сайтов

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

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

Визуальные акценты с атмосферой мегаполиса

Ощущение конкретного места создается несколькими решениями, повторяющимися на каждой странице:

• Фотографии реального окружения: фасады зданий, пешеходные переходы или оживленная рыночная улица, снятые при естественном освещении.
• Выразительные заголовки над лаконичным основным текстом — по аналогии с яркой фасадной вывеской над объявлениями на витрине.
• Строгая сетка, в которой границы фотографий и текстовых панелей идеально совпадают, напоминая ритм оконных проемов на фасаде.
• Палитра, заимствованная с городских улиц: чаще всего серый бетон и черный асфальт в сочетании с одним акцентным цветом для кнопок.

Этот сигнальный цвет нередко начинает проникать в подзаголовки и иконки, создавая излишнюю пестроту. Если настроить цвета централизованно для всего сайта, бренд streetwear сможет обновлять акцентный оттенок для каждого нового релиза в одном месте. В официальной документации по Site Colors подробно описано, как Nicepage применяет единую цветовую схему ко всем страницам.

Когда фотографии вытесняют факты

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

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

Солнечные блики на экранах смартфонов

На экране смартфона панорама горизонта обрезается до отдельного здания, поэтому в hero-секциях лучше использовать кадры, где ключевой объект расположен ближе к центру. Адаптивные режимы Nicepage позволяют точно настроить кегль шрифта, отступы и расположение элементов для узких экранов. Размещайте фотографию объекта и его адрес в пределах одного экрана, чтобы пользователям не приходилось постоянно прокручивать страницу вверх и вниз.

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