Создание нового Nice Studio

Для начала стоило определиться с названием. При мозговом штурме мы учитывали три условия: 1. Компании с таким названием не должно существовать. Или на крайний случай их не должно быть много в РФ. 2.Свободное доменное имя в зоне ru. 3. Легкость и запоминаемость.

В итоге, через несколько дней поиска у нас появилась целая куча странных и не очень названий.

Простота, основательность, дружелюбность — такой получился дизайн Nice Studio.

Движущая сила стиля — это простая геометрия, насыщенные линии, много свободного пространства. Ощущение того, на что можно опереться.

Только понятное

На сайте около 20 страниц. При выборе шрифта опирались на легкость восприятия и хорошую читаемость в любом размере. Geometria — свежий геометрический неогротеск, использовали его в одном начертании Regular.

Нашими основными целями при обновлении нашего веб-сайта были:

Оперативно помочь потенциальным клиентам увидеть потенциал работы с нами

Продемонстрировать наш практический подход в интерактивной и запоминающейся форме

Взять под контроль наш контент, переместив статьи с социальных платформ на наш сайт.

При этом представляя все таким образом, который кажется уникальным и репрезентативным для того, что мы делаем в Narative. В этой статье мы подробно рассмотрим стратегию, дизайн и технологии нового Nice Studio, а также то, что это значит для будущего нашей компании.

Целью новой домашней страницы Nice Studio будет максимально краткое выражение и поддержка этих ключевых сообщений. Мы хотим быстро установить взаимопонимание и укрепить доверие, необходимое для того, чтобы начать проект, либо продолжили изучение нашего сайта, чтобы узнать больше.

Проектирование для фокусировки

В своей основополагающей книге по юзабилити-дизайну Не заставляйте меня думать (Don't Make Me Think) Стив Круг объясняет, что "люди, как правило, тратят очень мало времени на чтение большинства веб-страниц. Вместо этого мы сканируем их, ищем слова и фразы, которые бросаются в глаза. [...] На большинстве страниц нас действительно интересует только часть того, что на странице. Мы просто ищем то, что соответствует нашим интересам или задачам, а остальное не имеет значения."
Пользователи не склонны читать веб-страницы линейно сверху вниз; они быстро просматривают страницу в поисках нужной информации, и только после того, как она обнаружена, они сосредотачиваются на деталях.

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

Хотя современный веб-дизайн выглядит намного чище, чем приведенный выше пример, он также несет в себе многие из тех же проблем. Мы стали лучше скрывать элементы интерфейса и обменивались жесткими таблицами на отзывчивые сетки, но все же в конечном итоге уделяем приоритетное внимание проектированию веб-страниц для плотности информации, а не воздействия.
Во многом это связано с процессом, с помощью которого обычно разрабатываются веб-страницы: мозговой штурм как серия слотов для окончательного контента, который должен заполнить в будущем, с расплывчатым представлением о том, как будет выглядеть этот контент. Когда вы знаете, что вам нужно общаться с пользователями о темах A, B и C, кажется очевидным разделить страницу на разделы A, B и C, но очевидное не обязательно то, что лучше.

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

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

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

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

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

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

Покажи, не рассказывай

Мы не используем слово «дизайн» в тексте нашей домашней страницы. То же самое касается разработки, инжиниринга и копирайтинга. Тем не менее, все это, очевидно, довольно важные части того, что мы делаем. Так что дает?

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

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

В то же время мы хотели сосредоточиться на потенциале и избегать предвзятых представлений о том, как могут выглядеть эти результаты. Одна из причин, по которой мы сохраняем нашу цветовую палитру ограниченной, а визуальные эффекты абстрактными, заключается в том, чтобы избежать проецирования «домашнего стиля» на всю нашу работу. Мы адаптируем наш подход к потребностям наших клиентов и их собственных клиентов, и чрезмерная агрессивность в отношении собственного бренда может привести к перегрузке.

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

Покажи, не рассказывай

Мы не используем слово «дизайн» в тексте нашей домашней страницы. То же самое касается разработки, инжиниринга и копирайтинга. Тем не менее, все это, очевидно, довольно важные части того, что мы делаем. Так что дает?

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

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

В то же время мы хотели сосредоточиться на потенциале и избегать предвзятых представлений о том, как могут выглядеть эти результаты. Одна из причин, по которой мы сохраняем нашу цветовую палитру ограниченной, а визуальные эффекты абстрактными, заключается в том, чтобы избежать проецирования «домашнего стиля» на всю нашу работу. Мы адаптируем наш подход к потребностям наших клиентов и их собственных клиентов, и чрезмерная агрессивность в отношении собственного бренда может привести к перегрузке.

Что за кулисами

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

В нашем техническом стеке есть три основных инструмента, которые помогают сделать все это возможным:



---

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

• Когда пользователь открывает навигацию, содержимое текущей страницы сдвигается вниз, открывая меню. Основные параметры меню расположены в самой доступной части экрана, а ссылки на социальные сети — для нас здесь более низкий приоритет — расположены дальше.
• Пользователь может закрыть меню, либо снова нажав переключатель меню, либо, что более вероятно, просто нажав или просто проведя пальцем вверх по содержимому, которое все еще отображается в нижней части экрана. Мы держим этот контент в поле зрения, чтобы упростить возврат к нему, чтобы напомнить пользователю, где он уже находится, и создать ощущение пространства на сайте.
• Когда пользователь выбирает пункт меню, мы маскируем содержимое предыдущей страницы, закрываем навигацию, а затем загружаем новую страницу. Это похоже на более естественный опыт на мобильных устройствах и делает переход между страницами плавным.

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

Шаг вперед, много шагов вперед

Запуск нового Narative.co сегодня много значит для нашего бизнеса. Это наиболее четкое выражение того влияния, которое мы оказываем на партнеров, с которыми мы работаем, и ценностей, которые важны для нас как для творческих профессионалов, так и для команды, которая вместе строит этот бизнес.

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

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