Как сделать редизайн Вконтакте

Каналы Информационные технологии Frontflip 17. Редизайн Вконтакте: как сделать хорошо и избежать фронтенд-хайпа

05 мая 2016

17. Редизайн Вконтакте: как сделать хорошо и избежать фронтенд-хайпа

В гостях Вячеслав Шебанов (ВК, Твитер) и Евгений Найденышев (ВК). Содержание выпуска 01:40 первый миллион пользователей нового дизайна 03:20 в ВК только фулстек-разработчики 05:11 ВК и SPB Frontend 06:32 как давно планировался редизайн? Как вели работу параллельно с существующим дизайном? 11:15 continuous integration delivery 16:24 какая была задача у нового дизайна?

21:35 широкоформатные экраны 23:23 главный вопрос выпуска — почему не реакт? 28:41 как происходит рендеринг? 33:01 а где же БЭМ? Какая методология верстки? 36:54 PostCSS и его плагины 41:20 как организована сборка? 52:08 как по шагам написать новый модуль для контакта? 1:04:29 ВК и опенсорс 1:08:40 кого берете в разработчики и что нужно знать?

⚡️КАК СДЕЛАТЬ ДИЗАЙН ГРУППЫ ВКОНТАКТЕ

1:12:32 все должно работать быстро! 1:17:12 Пики Picks Илья Mind Pump: Raw Fitness Truth Вячеслав Babel Handbook Артем Excel REST API У нас есть страница с темами для будущих выпусков. Рассказывайте друзьям и приходите сами! Не забывайте оценивать нас в iTunes и подписываться в Твиттере.

Источник: soundstream.media

Как сделать редизайн вконтакте

Чтобы получить доступ к новому дизайну, нужно найти и отсканировать QR-код. Коды будут появляться на улицах, в бизнес-центрах, ТЦ и на сеансах в кинотеатрах в Москве и Санкт-Петербурге.

Также QR-кодом для обновления делится пресс-служба «ВКонтакте».

Что нового:

Соцсеть избавилась от синей плашки наверху приложения, изменила список вкладок внизу экрана (теперь это «Новости», «Обзор», «Сообщения», «Друзья» и «Профиль») и убрала разделительные полоски.

Новая вкладка «Обзор»

Разделы «Сообщества», «Музыка», «Видео», «Трансляции», «Подкасты», «События», VK Pay и мини-приложения объединены на одной вкладке «Обзор». Из этой же вкладки можно запустить поиск по всем сервисам и сканер QR-кодов.

КАК создать и оформить группу ВКонтакте | Настройка, дизайн и продвижение

Профиль

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

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

При переходе на страницу другого пользователя на отдельную панель вынесены кнопки «Позвонить», «Перевести деньги», «Отправить подарок» и «Уведомления».

Также сверху теперь указывается id пользователя.

Вкладка «Друзья»

Раздел «Друзья» появился вместо «Уведомлений». Раньше доступ к друзьям можно было получить через список в разделе «Еще».

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

«Мы полностью переосмыслили дизайн и подчеркнули возможности для общения и самовыражения. Изменили вкладки внизу экрана, которые предоставляют быстрый доступ к самым важным разделам. <. >Также мы освободили место для новых сервисов и органично вписали уже существующие — ведь только за последний год «ВКонтакте» появилась платформа VK Mini Apps, карточки музыкантов, подкасты, новые закладки и другие нововведения. Теперь все на своих местах», — сообщила заместитель технического директора «ВКонтакте» Ольга Фролова.

Источник: rb.ru

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

Наконец, этот день настал — 17 августа 2016 года Вконтакте запустил новый дизайн после длительного тестового периода, который продолжался около 4 месяцев. Вконтакте отказался от устаревших flash технологий и перешел на HTML5. Новый дизайн избавлен от лишних элементов, он выглядит шире, в настройках можно подобрать адаптированные шрифты для пользователей с проблемами зрения.

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

Еще одно нововведение в контакте — это возможность генерировать наклейки сообществ. В контакте дал возможность создавать наклейки. Теперь каждый желающий может сделать красивый логотип в виде QR-код и разместить его на визитку или даже на биг-борд. О редакторе для разработки наклеек читаем тут ⇒ http://socialnie-seti. info/vkontakte/free-stickers/

Изменения внешнего вида VK:

1. Основная часть сайта стала шире за счет увеличения ширины обоих левых сайдбаров (боковых колонок).
2. Изменился логотип сайта, который вы увидите в левом верхнем углу страницы.
3. Аватарка в профилях пользователей vk стала заметно крупнее.
4. Миниатюры аватарок списка друзей, а также в ленте новостей — круглой формы.
5. В новостях можно включить «умную ленту», в этом случае сверху будут отражаться самые интересные новости.
6. Изменился дизайн фотопросмотрщика. Комментарии к фотографиях находятся справа от фотографий.
7. Новый интерфейс личных сообщений. Он пока включается по желанию. Для этого на странице диалогов в нижней части нажмите на значок шестеренки и выберите «Перейти в новый интерфейс»:

   Личные сообщения примут вид, как современных мессенджерах. Слева список собеседников, а справа — открытый текущий диалог.

8. Изменения затронули и дизайн групп вконтакте

Как вернуть старый дизайн ВКонтакте

Не всем пришелся по душе новый дизайн ВКонтакте, и многие пользователи ищут ответ на вопрос «как вернуть старый вариант дизайна vk».

Для пользователей браузеров Google Chrome, Firefox и Оперы есть очень простой вариант. Нужно всего лишь установить необходимые расширения. Расскажу об этом подробнее.

Для Google Chrome:

1. Установите расширение для браузера Google Chrome — Stylish. Скачать его можно по ссылке >>>
2. Откройте в браузере сайт vkontakte и нажмите на иконку расширения (в виде буквы S в верхнем правом углу браузера) -> найдите другие стили для этого веб-сайта
   
3. Вас автоматически перенаправит на страницу сайта userstyles.org с различными стилями вконтакте. Из предложенного списка выберите «Старый дизайн»
4. На странице с дизайном нажмите на кнопку «+ Install with Stylish»:
   
5. И последнее — подтвердите действие установки дизайна:
   

Вернуть старый интерфейс для пользователей Mozilla Firefox

1. Установить расширение Stylish для Firefox
   
2. Выполнить все действия по установке дополнения — разрешить загрузку, установку плагина и перезапустить браузер. Все подсказки будут показаны во всплывающих окнах.
3. Теперь перейдите на vk.com и нажмите на иконку дополнения возле кнопки «Меню» Firefox -> Найти все стили для текущего сайта»
4. Выполните действия из пунктов 3 и 4 аналогичные действиям в браузере Google Chrome.
5. Дайте согласие на установку стилей старого дизайна:
   

Для Оперы

1. Перейдите на страницу стиля вконтакте на сайте userstyles и нажмите на кнопку установки плагина для Оперы.
2. Одобрите все действия по установке,
3. На странице вконтакте жмите на иконку расширения -> найти стили для этого сайта,
4. Выберите старый стиль вк,
5. Нажмите на кнопку «+ Install with Stylish»
6. Одобрите действие.

Смотрите видео урок

Источник: vgrafike.ru