Компания Microsoft рассказала в своём блоге об изменениях, внесённых в веб-версию облачного сервиса OneDrive. Дизайн сайта стал адаптивным, теперь все элементы на нем подстраиваются под размер и разрешение экрана, а также под размер окна браузера.


webUI1

Вот что об этом редизайне пишет сотрудник Microsoft, участник команды разработчиков OneDrive Тайлер Расмуссен:

Для всей команды OneDrive несколько последних месяцев были интересными, хоть и трудными. Мы готовили различные нововведения для пользователей этого сервиса на различных платформах — в приложениях для Android, Windows Phone и iOS. Первое крупное обновление дизайна было выпущено ранее в этом году для приложения на Windows Phone. Если вы пользуетесь OneDrive на Android, то могли заметить, что недавно и это приложение стало выглядеть по-другому. Затем мы выпустили версии OneDrive для Android Wear и Apple Watch. А несколько дней назад на iOS вышло крупное обновление приложения для iOS — в нём изменился дизайн значков файлов и папок.

Мы надеемся, что вам нравятся все эти изменения, но последнее из них особенное. Мы представили полностью изменённый сайт OneDrive — с адаптивной «резиновой» вёрсткой.

Не просто редизайн

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

Визуальная разбивка

grid1

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

Каждый компонент интерфейса был переделан таким образом, чтобы мог идеально вписаться в новый визуальный стиль: панели, диалоги, список файлов, навигация в левой части, команды и даже мелкие кнопки. Было проделано очень много работы, но мы очень довольны тем, что получилось в итоге и надеемся, что вы тоже.

2014devices

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

Цвета

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

Типографика

segoe-weight-ramp

Шрифты должны быть хорошо читаемы. Чем они проще, тем легче пользователь воспринимает, что написано на сайте. Нашей основной целью было выбрать такой шрифт, который хорошо бы читался и идеально подошёл к описанию вашего контента, а уж во вторую очередь к интерфейсу OneDrive. Для веб-версии OneDrive мы выбрали шрифт Segoe , который используется в ряде продуктов экосистемы Microsoft. Мы применяем его почти во всех своих цифровых продуктах, поскольку он сохраняет хорошую читабельность независимо от своего размера.

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

Ещё не всё

Новый редизайн сайта — одна из попыток сделать сервис OneDrive удобным и пригодным для использования в повседневной жизни. И мы рады поделиться вами результатами своего труда. Обычным пользователям этот дизайн станет доступен в ближайшие дни, а бизнес-пользователям он будет открыт до окончания этого года. Было проделано очень много работы, и мы надеемся, что вы довольны результатом. Однако, работа над этим сайтом ещё не завершена, в будущем в него будет внесено ещё немало изменений.

Тайлер Расмуссен,
Старший менеджер по дизайну OneDrive.

Система Orphus