Вконтакте самый первый дизайн – Вконтакте, который мы потеряли. Как провожали старый дизайн соцсети и чем он нам запомнился

Первые дизайны популярных сайтов — Самый сок! — ЖЖ

Первый дизайн Mail.Ru

Напоминает народовский сайт. Наверное, в то время это было нормально и всем нравилось. Хотя, что там было особенного чтобы делать супердизайн? Одна только почта. Это дизайн 1999 года.

Первый дизайн Яндекса

Этот дизайн сделала студия Артемия Лебедева в 1997 году, тогда она, кстати, называлась «Web Design». Такое необычное оформление подходит необычному для того времени сайту. Сразу видна принадлежность сайта компании CompTek. И главная новость написана: «Яndex-Web, о котором так долго говорили, наконец запущен в бета-тестирование. Могло быть и хуже…».

Первый дизайн Рамблера

Примечателен тот факт, что тогда на Рамблере все было на английском и единственная надпись на русском это под логотипом: «Поиск по серверам России». А еще тогда нужно было еще указывать длину запроса: нормальный, короткий, длинный.

Первый дизайн Google

В то время еще Google был доступен по адресу google.stanford.edu и в его индексе было 25 млн. страниц. Это был 1998 год. В принципе с тех пор логотип мало изменился, разве что восклицательный знак в конце убрали. А на главной странице до сих пор все светло и просторно.

Первый дизайн Фейсбук

Первый дизайн ВКонтакте

Первый дизайн Ютуб

источник

      

ibigdan.livejournal.com

Что думают эксперты и пользователи про новый дизайн «ВКонтакте» / Habr

1 апреля 2016 года социальная сеть «ВКонтакте» представила редизайн своего сайта. Новый дизайн был тогда запущен в тестовом режиме. Работа над ним велась полтора года. 17 августа произошел окончательный переход. Все пользователи социальной сети были принудительно переведены на новый дизайн.

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

Мнения, как всегда, разделились. Пока эксперты и пользователи в волю высказываются. Какие выводы из этого сделают разработчики нового дизайна?

Однако «срез общественного мнения» выглядит так:

Более того, негативных отзывов на порядок больше. На платформе change.org появилась петиция в защиту старого дизайна сайта.

«Мы не навязываем и не принуждаем этим жестом к тому, чтобы отказались от нового дизайна. Однако у человека должна быть альтернатива — выбирать, чем пользоваться, а что игнорировать», — пишет автор петиции Максим Литманен. Петицию подписали более 41 тысячи человек (по состоянию на 17 00 МСК, четверг).

«Дуров, верни себя!»

Павел Дуров, который уже достаточно длительный период не занимает позицию генерального директора социальной сети, раскритиковал новый дизайн.
1. Главный раздел сайта – Новости – стали уже. Парадоксально, что необходимость редизайна обосновывалась стремлением более эффективно использовать экран. По факту, если сравнить ширину записей в старой и новой версии, новости лишь сузились на 28px.

2. Новости – как и все остальные разделы – стали ниже на 42px. Из-за фиксированной шапки вертикальное пространство сайта стало меньше, нужно больше проматывать. Это серьезное изменение к худшему: именно вертикальный скролл представляет собой дефицит на большинстве дисплеев.

3. При просмотре главного раздела сайта – Новостей – утрачивается фокус на контенте. В новой версии возник визуальный мусор в виде редко используемой фиксированной правой колонки. С учетом фиксированный шапки и узкой ширины, просмотр новостей стал вдвойне захламлен.


Однако еще в апреле появились и положительные отзывы.
Павел Шумаков, продуктовый дизайнер в Badoo, бывший дизайнер «ВКонтакте»

Шире. Лучше. Функциональнее. Это действительно долгожданное событие. И пользователи, несомненно, будут вознаграждены за столь долгое ожидание. Их ждёт новый, я бы сказал, чистый дизайн. Новый сайт «ВКонтакте» — это большой шаг как для компании, так и для пользователей. Новые возможности, новые разделы. Внимательный пользователь обратит внимание на новый шрифт, который органично вписался в новый дизайн. Не могу сказать, что выбор был простым. Но в правильности решения уверен, и могу за него поручиться.

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

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

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

Дмитрий Провоторов, менеджер проектов «Мануфактура IT Production & Graphic Design»

Суперинтересные мелочи:

• Аудиоплеер занимает главенствующее место. Всем известно, за что люди любят «ВКонтакте». Интересно, какое количество пользователей слушает музыку там? Думаю, что большинство, если плеер занял такое важное место.

• На скриншотах в блоге очень правильная вещь — ссылка на раздел «Реклама» заняла удобное место слева в меню. Но почему это не сделали в интерфейсе? Она осталась в подвале. Я прямо чувствую скрежет зубов тысяч пользователей, которые пытаются «поймать» её в разделах с бесконечной прокруткой. Думаю, докрутят ещё.

• Реорганизация меню. «Новости» и «Сообщения» победили «Друзей», «Группы» и всех остальных.

• В «Новостях» вижу две надписи «Поиск». Догадываюсь, в чем отличия, но догадываться — это не очень хорошо для интерфейса.

• «Сначала интересные» — это мягкий переход к новому типу новостной ленты? Чтобы не было «Дуров, верни стену!»?

• Кнопка «Присоединиться к тестированию» нового интерфейса — очень хорошая. Очень. Я прошу вас, присоедините меня. Я сам этого хочу. Нет, вы меня не заставляете.
Классно. Как на моём iPad. Давно пора. Дальше будут к большим переменам двигаться маленькими шагами, уверен.

Мы взяли комментарии у других экспертов и задали им свои вопросы.

Денис Шумов, арт-директор m18.ru

Согласны ли вы, что нужно было предоставить пользователям выбор между старым и новым дизайном?

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

Насколько оправдано время, потраченное на разработку нового дизайна? Оптимально ли, по вашему мнению, соотношение время-результат?

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

Одобряете ли вы новый дизайн в целом? С точки зрения удобства использования? С точки зрения внешнего вида?

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

Что категорически не нравится?

Таких вещей нет.

Илья Божко, дизайнер компании ТМ

Согласны ли вы, что нужно было предоставить пользователям выбор между старым и новым дизайном?

Нет не согласен, разработчики ВК поступили правильно, запустив открытый бета-тест нового интерфейса, подготовив пользователя к обновлению. Поддерживать два стиля очень трудно.

Насколько оправдано время, потраченное на разработку нового дизайна? Оптимально ли, по вашему мнению, соотношение время-результат?

Сейчас сказать сложно, результат будет виден только через некоторое время.

Одобряете ли вы новый дизайн в целом? С точки зрения удобства использования? С точки зрения внешнего вида?

В целом — да. Есть моменты, которые требуют доработки, но в целом редизайн удался.

Что категорически не нравится?

Не нравится выбор шрифтов: размер, цвет, использование в целом. Круглые аватарки. Не нравится, что перенесли важные контролы (Мне нравится, Поделиться ) с левой части — в правую.

Какие элементы дизайна кажутся удачными?

Более продуманные элементы управления, иконки уведомления и аудиозаписи в шапке, страница сообщения.

Дмитрий Чута, CEO/Founder в Chapps

Согласны ли вы, что нужно было предоставить пользователям выбор между старым и новым дизайном?

Если вы спрашиваете о временном тестировании, когда часть юзеров начали использовать новую версию и своими фидбэками помогли исправить большую часть проблем то, безусловно, мой ответ «да». Но если же речь идёт о выборе старого/нового послефинального релиза, который вчера состоялся, то, конечно, нет.

С одной стороны, существование двух версий уменьшает количество негативной реакции от пользователей, с другой стороны, это создает намного больше сложностей для поддержки и аналитики сайта. В конце концов мы знаем, многим пользователям всегда будет что-то не нравиться. Помните, как «стену» превратили в блог? Было очень много шума, но VK не дожил бы до сегодняшнего дня, если бы все оставил как есть и прислушался к мнению пользователей.

Насколько оправдано время, потраченное на разработку нового дизайна? Оптимально ли, по вашему мнению, соотношение время-результат?

Цифры, конечно, на первый взгляд кажутся завышенными, но только для тех, кто не работал с крупными проектами с миллионами очень разных и активных юзеров. Big data — это всегда сложно. У меня такой опыт есть и я постараюсь объяснить. Например, дизайнер захотел сменить размер аватарки, для сайта с 5000 юзеров — это не проблема. Но сделать серверный ресайз 400 миллионов аватарок (сколько там сегодня юзеров в VK?) — это уже ресурсоемко.

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

Одобряете ли вы новый дизайн в целом? С точки зрения удобства использования? С точки зрения внешнего вида?

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

Что категорически не нравится?

Чисто субъективно мне хочется вернуть «Уведомления», как было раньше: без вывода их в отельную иконку с дропдауном, а еще поле поиска сделать больше и сам поиск сделать лучше и умнее.

Какие элементы дизайна кажутся удачными?

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

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

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

habr.com

VK by design / ВКонтакте corporate blog / Habr

ВКонтакте — это множество интерфейсов для разных платформ. Сегодня Вы узнаете о том, как мы работаем над этими интерфейсами, создавая дизайн своих продуктов.


Немного о нас. В команде дизайна трудятся шестеро увлечённых творческих ребят 22-24 лет. Мы универсальны: дизайнер не прикован к одному направлению на века и может сегодня заниматься мобильной версией, а завтра — каким-то сервисом из десктопной.

Инструменты и подходы


Наши мобильные приложения состоят из более чем 500 разных экранов. Плюс полчища интерфейсов из веба, плюс m.vk.com. Нужно уметь эффективно организовывать работу со всем этим богатством.

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

Раньше на каждом экране приложения использовались свои иконки в разных цветах и размерах. Например, newsfeed_search, wall_search_gray и т.д. Теперь мы сделали иконки универсальными и можем переиспользовать их. Всего одна иконка поиска вместо пяти разных.

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

Все основные компоненты для каждой платформы собираются в коллекцию — UI Kit. Вот как это выглядит:

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

В 2015 году мы полностью перешли с Photoshop на Sketch для проектирования наших интерфейсов. Для распределения задач мы используем Trello, а рабочие файлы синхронизируются в Dropbox. Создаём прототипы в Principle, Framer и Origami, пробуем новые инструменты и плагины.

Ставим цели


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

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

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

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

Навигация


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

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

Сам по себе таббар — ни разу не новинка. Сейчас это стандартный подход к навигации на Android и iOS. У нас он когда-то тоже был:

Обратите внимание на 2011 год — всё довольно просто, если функциональность приложения вмещается в пять вкладок.

Тогда все фичи в первую очередь внедрялись в вебе, и в лучшем случае воплощались в API заметно позже, а то и вообще никогда. Но времена менялись: всё больше пользователей обзаводились смартфонами, парадигма Mobile First набирала обороты, и приложения стали уметь гораздо больше. На подходе были новые занимательные разделы и сервисы, и одной нижней панели им катастрофически не хватало.

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

И, кажется, таббар — идеальный вариант. На дворе MMXVII, табы прочно обосновались в гайдлайнах Apple и Google. Так мы решим свою задачу — вынесем самое нужное на расстояние одного тапа и сохраним всё разнообразие возможностей в привычном меню.

Что ж, отлично. Осталось понять, что будет во вкладках. Здесь нужно отметить, что идеологически мы почти не практикуем A/B тестирование UX на больших выборках живых людей. Даже глобальный редизайн полной версии сайта после выкатки на часть пользователей допиливался только в отношении каких-то мелких деталей. Принципиальные вопросы вроде приоритета разделов мы решаем ретроспективно, планируя будущее на основе обширного опыта из прошлого.

Проанализировав множество разных статистик, мы (без особой, впрочем, интриги) выбрали четыре основных раздела: Новости, Поиск и Рекомендации, Сообщения и Уведомления. В пятой вкладке оставляем меню, где будет всё остальное.

А что же старое доброе меню? Здесь мы дали себе волю в создании концептов:

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

Поиск и Рекомендации


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

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

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

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

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

Лента новостей


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

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

И самое главное — мы покрасили лайк. Да, теперь он красный (ну почти, #FF3347), сочный и заметный. Больше никаких сомнений, лайкнули Вы эту роскошную статью или ещё только собираетесь. Мы давно к этому шли. Первые эксперименты с цветом сердечка мы начали ещё в 2014 году, в процессе создания нового дизайна веб-версии ВКонтакте.

Аудиоплеер


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

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

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

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

Редактор историй


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

Мы решили попробовать другой распространённый подход для быстрого переключения между масками:

Подводим итоги


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

Уже совсем скоро будут официально запущены обновлённые приложения ВКонтакте для Android и iOS, где реализованы некоторые из описанных концептов.

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

Муртол Лазвачев, активный пользователь ВКонтакте

habr.com

«ВКонтакте» обновил дизайн: пропал Дуров, появился Гарольд

Поначалу новый вид будет доступен миллиону пользователей

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

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

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

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

Вадим Васильев, ведущий социальный сетей MK.ru, прокомментировал новый дизайн так: «Очень непривычный дизайн, это всё-таки самое большое обновление за всю историю ВК. Позаимствовали у Facebook широту размаха и несколько проверенных временем фич, вроде ленты новостей и уведомлений. Виден потенциал для большего количества таргетированной рекламы, монетизировать популярность сайта станут по полной программе. Отмечу удобство новых разделов аудиозаписей и диалогов, с которыми стало легче управляться. Дизайн, вероятно, ещё сильно изменится, а пока жду большой ругани пользователей в духе «Верните стену!».

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

Господи, зачем я подключила новый дизайн #вконтакте. Он такой ущербный. Хочу обратно старый.

— Анна Уракова (@UrakovaAnna) 1 апреля 2016 г.

#Вконтакте обновил дизайн. Браво! нравится

— Андрей Горохов (@andrew_gorohov) 1 апреля 2016 г.

Загадала на Новый Год больших перемен в жизни. Изменился дизайн ВКонтакте.
Ну спасибо, че, свое получила

— Les (@AlesyaSheer) 1 апреля 2016 г.

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

www.mk.ru

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *