18 января 2018, 16:30

DIЧ № 27: о навигации, динамических лого и городской айдентике

Самый дизайнерский дайджест на Cossa вернулся. Второй сезон.

Red Collar, redcollar.ru

Зеркала — Northern Ground

Сайт digital-студии Northern Ground из США. Ребята ежегодно выкатывают по свежему сайту. В этот раз получился строгий, но вместе с тем креативный монохром.

Надвое

Для небольших сайтов-портфолио, диджитал-агентств или дизайн-студий, где есть только «Работы» и «О нас», отлично подойдёт горизонтальное разделение сайта.

На каждой странице есть два поля. Верхнее отведено кейсам, а нижнее — проекту и команде. Здорово реализована как вертикальная, так и горизонтальная навигация.

Упразднение лишнего клика

Фишкой сайта может стать не только дизайн, но и инструменты взаимодействия. Иногда применяют какую-то одну фишку, например, зажать и держать пробел для загрузки сайта. А можно сделать клавиатуру основным пультом управления, добавив этим оригинальности и увеличив доступность сайта.

Успейте купить корпоративный пакет COSSA-2025 со скидкой!

Cossa анонсирует главный рекламный формат на весь 2025 год: сразу 8 различных опций.

Пакет идеально подходит для онлайн-сервисов, стартапов, интернет-компаний и digital-агентств.

Успейте приобрести пакет до повышения цены!

Для путешествия по проекту не надо ничего кликать. Хочешь поменять страницы, нажми ← или →, хочешь почитать текст, наведи на нужную половину и скролль. Свежее, но интуитивно понятное и простое взаимодействие.

«Интересная навигация. Хороший пример стилистики, крутая смесь резких и плавных анимаций. В наше время никого уже не удивишь мелкими интерфейсными анимациями: это делают на автомате. Зато их отсутствие наоборот воспринимается как крутой ход, чтобы добавить сайту резкости и строгости», — Денис Сафонов, Creative Frontend Developer в Red Collar.

Резиновая карусель — Analytica Projects

Analytica Projects занимается контролем качества пищевых продуктов. Сайт разработан Twenty two degrees в коллаборации с Рубеном Санчезом и Вицентом Люцендо (Ruben Sanchez & Vicente Lucendo).

Тянучий случай

Лендинг, иначе говоря — некий последовательный сторителлинг, можно и нужно подавать «вкусно». Так, чтобы пользователь захотел изучить его от и до, а не закрыть на втором слайде.

Это пример отличного отзывчивого WebGL-сайта. В зависимости от скорости скролла сайт с разной степенью искажения имитирует растягивание по цилиндру в 3D-пространстве. Игровой эффект плюс продуманные детали — пример того, что даже одна страница может быть приятной и запоминающейся.

Индикатор прокрутки

Никто не любит чувствовать себя потерянным и глупым. Если в дизайн не вписывается стандартный индикатор скролла страницы, то обязательно придумайте свой. Главное — обозначить, где именно находится человек и сколько ему осталось до конца страницы.

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

Как создают звуки

Видео о том, как озвучивают кинокартины в Голливуде и творят закадровую магию. Тащат в студию коня, морозят искусственный снег, держат про запас шум ветра в соснах или... А вот смотрите скорее, это очень интересно!

Бехансы

Адаптивная мякота — Carus

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

Carus производит мягкие напольные покрытия. Новый фирменный стиль подчёркивает переход компании из среднего в премиум-класс и акцент на B2B-сегменте. Логотип динамичный, каждая форма передаёт суть продукта: тут стоит кровать или шкаф, там покрытия нет, здесь будет не прямо-, а многоугольник. Ребята красиво развили эту идею в каталогах продукции: даже наслоение интерьерных фотографий напоминает логотип.

Вишни и слова — Fundão

Если вы создаёте айдентику для чего-то исторически значимого — города, госучреждения, многолетнего регулярного события, — обязательно сохраняйте наиболее узнаваемые символы. Если рубанёте с плеча, то обесцените труд других людей и серьёзно затормозите рост бренда.

Айдентика для Португальского городка Fundão. Два смысла в одном символе: это и вишнёвый плод (главный символ города), и кавычки для цитаты известного местного поэта Эужениу де Андраде, которому регион отчасти обязан своей популярностью. Кроме того, в кавычки можно заключать любые слова, благодаря чему сам город становится говорящим.

«Хорошо, что так обыграли вишни и кавычки, сделали просто, минималистично и со вкусом. Но для городской айдентики этого всё же мало. Хорошо было бы сделать ещё и фирменный паттерн, он отлично подойдёт для фона городской среды и увеличит узнаваемость стиля. А сами кавычки использовать более широким образом: например, пустить в качестве пинов на городских картах», — Денис Ломов, креативный директор Red Collar.

Перевод digital-годноты от DEADSIGN

Почему важно делать скетчи до варфреймов? Автор статьи убеждён, что мало просто придумать идею и функции приложения. Важно понять, что именно увидит пользователь на экране — и только затем интегрировать новые функции. О разнице между скетчем и варфреймом, почему скетчи помогают в общении с клиентом, и как они вообще между собой связаны. Налетай!