Итоги года: Редизайны «ВКонтакте», Uber, Apple Music, «Студии Артемия Лебедева»

Редакция рубрики «Интерфейсы» вспомнила наиболее обсуждаемые и примечательные редизайны сервисов, сайтов компаний и приложений в 2016 году. «ВКонтакте»

1 апреля 2016 года соцсеть «ВКонтакте» представила новую версию дизайна сайта — первое крупное обновление интерфейса веб-версии сервиса за 10 лет.

Интерфейс новой версии сайта российской соцсети выполнен в концепции «островов»: основной контент страниц — записи сообществ и пользователей — находится в блоках с белым фоном. Весь сайт получил голубой фон.



Редизайн был тепло принят сообществом дизайнеров. Позднее сооснователь «ВКонтакте» Павел Дуров, покинувший компанию в апреле 2014 года, сформулировал 7 претензий к новому дизайну «ВКонтакте».

«Проведенный редизайн не только не соответствует стандартам 15–16 года (таким, как Material), но и снижает юзабельность ресурса. Все перечисленные элементы нового дизайна были вслепую скопированы с Facebook образца 2012 года», — отметил Дуров. По его словам, основные разделы сайта стали уже, пропал фокус с контента и фотографий, а белый фон был заменен на «грустный и пасмурный».

В ответ на претензии Дурова операционный директор «ВКонтакте» Андрей Рогозов сформулировал 7 плюсов редизайна соцсети. Навигация упростилась, общаться стало удобнее, а сайт стал работать быстрее, ответил Рогозов. Uber

В ноябре 2016 года крупное обновление интерфейса — впервые с 2012 года — получило и приложение Uber. В начале года компания изменила логотип и фирменный стиль, отказавшись от чёрно-белой палитры, при этом в приложении на тот момент обновился только экран загрузки.

В новом приложении изменились основные сценарии использования. Например, теперь нужно сначала выбрать пункт назначения для поездки, а затем указать нужный класс автомобилей — ранее Uber предлагал сначала выбрать класс, а затем указать пункт прибытия. [embedded content]

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



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

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

В июне 2016 года Apple объявила о полном редизайне сервиса Apple Music — спустя год после запуска первой версии.

Изменились все экраны приложения. Теперь при входе в Apple Music пользователь видит свою музыкальную библиотеку отдельно от произведений, доступных для онлайн-прослушивания. Разработчики упростили интерфейс и спрятали редко используемые функции. Например, раздел Connect с публикациями артистов переместился во вкладку For you.

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

Первая версия Apple Music

Обновленная версия Apple Music Сайт «Студии Артемия Лебедева»

Еще одно крупное обновление дизайна произошло у сайта «Студии Лебедева». Главная страница выполнена в виде блога, появились теги для навигации по проектам студии и адаптивная верстка для мобильных пользователей.



Раздел «Наше всё» с работами компании получил новую сетку — все проекты представлены в прямоугольных блоках.





Новый сайт получил адаптивную верстку. При этом ранее Лебедев выступал против создания мобильных версий сайтов: «Чем хорош современный смартфон? Тем, что это практически полноценный компьютер. Он умеет все. В том числе — нормально показывать сайты. Спрашивается, если телефон нормально показывает сайт, зачем что-то еще изобретать? Через телефон все отлично видно».



Предыдущая версия сайта:

YouTube

В мае Google представила новый интерфейс YouTube, выполненный в стиле Material Design. На главной странице основные изменения коснулись строки поиска — теперь она расположена в середине «шапки» сайта. Кнопка «Upload» заменена на пиктограмму из мобильных приложений Google.



Основные изменения произошли на странице каналов — их фон теперь привязан к основному цвету на картинке-обложке. Логотип канала теперь отображается в круге, а не в квадрате.



Новый дизайн

Старый дизайн «Фламп»

Сервис отзывов «Фламп», принадлежащий компании »2ГИС», в июне представил новую версию своего сайта, обновил логотип и расширил возможности пользователей. В частности, у них появилась возможность связаться с зарегистрированными на «Флампе» представителями компаний.

По словам представителей сервиса, основной акцент сделан на удобном поиске и выборе подходящих компаний. Система поиска теперь поддерживает естественные запросы по различным характеристикам: например, «кафе с wi-fi», «круглосуточная парикмахерская» и так далее.

Новая версия

Старая версия сайта

Часть пользователей «Флампа» раскритиковала новый дизайн сервиса, обвинив компанию в резкой смене «привычного и яркого» интерфейса на «слишком лаконичный и холодный». «Новая газета»

В июле «Новая газета» представила новую версию своего сайта, которая напомнила пользователям дизайн издания «Медиазона».





Разработкой нового сайта издания занималась студия Charmer, которая ранее работала над проектами Meduza, «Ведомости», «Арзамас», Afisha Daily. РИА Новости

Дизайнеры РИА Новости изменили структуру страниц и избавились от лишних элементов. На заглавной странице остались только главные темы дня. Блок новостей дизайнеры опустили ниже, на «второй экран» сайта.

Раздел «Картина дня» остался на «третьем экране». В холдинге считают, что трёхуровневая подача информации «позволит читателю получить полное представление об информационном поле в пределах одного экрана».



«Ситимобил»

Обновленный дизайн приложения московского такси-сервиса разрабатывала «Студия Артемия Лебедева». Разработчики говорят, что во время работы проанализировали более 80 приложений такси-сервисов, сравнивая ходы и способы решения однотипных задач.



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

Forbes

В декабре российское издание Forbes представило первое крупное обновление сайта после смены владельца, гендиректора и главного редактора.

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



«Дождь»

Российский телеканал «Дождь» перешел на адаптивную верстку и новый стиль страниц. Главная страница сайта теперь состоит из двух колонок — блок «Новости» разработчики расположили в левой колонке, оставив центральную часть страницы для ТВ-сюжетов. Материалы канала теперь имеют крупные иллюстрации.



Приложение Google Maps

В 2016 году Google провела редизайн карт для своих приложений на iOS и Android, а также в веб-версии.

Слева — старый дизайн, справа — новый

Разработчики изменили шрифты, используемые в приложениях, и убрали с карт элементы, которые могут мешать навигации. Теперь на Google Maps объекты, которые могут интересовать пользователя в первую очередь, подсвечиваются желтым оттенком. Статьи по теме