Тема цієї статті новий дизайнВКонтакті. Знову змінилося, тепер можна встановити горизонтальну обкладинку групи. Оформлення вашої спільноти ВК з такою шапкою набагато цікавіше. Відверто кажучи, тут не потрібні знання Photoshop. А можна без особливих навичок зробити гарну картинку навіть у PowerPoint, Fotor, Canva, Pixlr Editor.

Перейшовши в групу, можна помітити, що в тих групах стали видні кнопки «Закріплений запис», «Інформація» та «Натисніть меню». А раніше вони були приховані. Звичайно, все оформлення груп відразу поїхало.

Завантаження нової обкладинки

А тепер давайте розберемося, як включити можливість установки горизонтального шапки. Давайте ми клацнемо на кнопку «Управління».

Потім клацаємо на останню і завантажуємо нову обкладинку групи ВКонтакте. Ось тут і можна зрозуміти, що файл завантаження може бути будь-якої величини! Але не менше ніж розмір 1590×400 px. Створюємо прототип обкладинки у будь-якому редакторі. Далі ми можемо виділити та зберегти ту область, яка відповідає вимогам ВК. Ось підказка, де знайти зображення для обкладинки, яким редактором скористатися, щоб

Чим цікавий новий дизайн?

Головне: з'явилося більше місця для інформації. Тепер тут можна написати назву групи, мету її створення, заклик до дії тощо. Таке оформлення буде логічно завершеним та більш функціональним. Але можна залишити і старий дизайн, це справа смаку кожного.

Коли ви оформлятимете горизонтальну обкладинку то помітите, що внутрішнє меню тепер якось випадає із загального контексту. Думаю, краще закріпити картинку для переходу в меню. І використовувати його для розміщення wiki-сторінок у групі.

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

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

Але найважливіше, на мою думку, їм потрібно ретельно продумати систему «Банів», щоб підприємці могли спокійно працювати, не заважаючи тим користувачам, які прийшли розважатися у соцмережу.

Як зробити обкладинку групи Вконтакте онлайн

Включайте свою креативність і вибирайте, що вам більше подобається горизонтальна обкладинка або звичний дизайн Вконтакте. Створення онлайн та встановлення нової обкладинки наочно, по кроках, представлена ​​у відео під статтею.

P.S. Сподіваюся ця інформація стане Вам у нагоді.

P.S.S. Включайте свою креативність та удачі Вам у всіх починаннях!

Сьогодні на конференції Dribbble Meetup Павло Шумаков, провідний дизайнер ВКонтакте, представив новий дизайн сайту ВКонтакте, мобільних клієнтів компанії на iOS та Android, а також новий фотододаток.

ВКонтакті продовжили інтригу з приводу нового дизайну сайту і навіть на презентації наклали розмиття на скріншот. Але й цього прикладу вистачає для того, щоб скласти загальне враження про редизайну. Сайт розбитий на так звані "острова" - кожен запис або будь-який інший блок візуально розділені один від одного. Ширина сайту та його шрифт буде збільшено.

Строки: до кінця 2015 року.

Фотододаток ВКонтакте

Особисто нам цікавіше було подивитися на новий продукт від ВКонтакте - фотододаток. Це свого роду аналог Інстаграма. Він був анонсований ще на нашому заході LIVE Event 2014, але ми, як і ви, побачили його вперше лише сьогодні, і були під враженням. Нова програма розробляється разом з професійними фотографами. У ньому, крім очевидних можливостей, на зразок корекції кольору, ви зможете створювати свої фільтри і обмінюватися ними з друзями. Програма повністю синхронізована з ВКонтакте.

Терміни: сподіваємося на вихід програми вже цього літа, адже саме в цей час воно буде актуальним як ніколи.

Довгоочікуваний Material Design у клієнті ВКонтакті для Android. Повний редизайн всієї програми. Навіть наші колеги "яблучники", глянувши на нього, стали трохи заздрити. Також з'явилася можливість замовити виготовлення пакетів з логотипом. Тепер цей процес стане зручним та швидким.

Терміни: незабаром.

Відеокаталог та нові записи для iPhone

Але й власникам iPhone є чому порадіти. Вони вже давно отримали свій редизайн, який і зараз залишається актуальним, тому на презентації нам показали нові записи та, звичайно, впроваджений відеокаталог. Очевидно, це не єдині зміни.

Швидкий редизайн мобільних додатківта iOS. Перші концепти оновлень зовнішнього виглядуопубліковані в офіційному блозі"ВКонтакте", в якому, крім усього іншого, Князєв також розповів про роботу дизайнерів у компанії.
У клієнтах та iOS знову з'явиться таббар – єдина навігаційна панель із вкладками у нижній частині екрану, що охоплює основний функціонал. До речі, дизайнери соціальної мережі відмовилися від неї у 2012 році. У новому баченні дизайну таббар включає головні розділи «ВКонтакті»: «Новини», «Пошук та рекомендації», «Повідомлення», «Сповіщення» та меню користувача. Бокове меню, судячи з опублікованих скріншот, у редизайні додатків повністю приберуть.

Крім кардинально нового інтерфейсу користувача, дизайнери «ВКонтакте» із майбутнім оновленням зовнішнього вигляду додадуть і кілька функціональних нововведень. У розділі «Пошук та рекомендації» з'являться прямокутні історії користувачів, що знаходяться поблизу, а також стрічка потенційно цікавих записів від нових авторів. Провідний дизайнер «ВКонтакте» описує новий розділ як «таку залипальну штуку, де можна знайти щось якісне та незнайоме з урахуванням особистих уподобань». У стрічці новин введуть лічильник переглядів (зараз він відображається лише при відкритті запису), а лайки стануть червоними.

Коли вийдуть оновлені

Рунет бідний оглядами редизайну відомих сайтів та сервісів. Ця стаття не заради того, щоби це виправити. Моя мета обговорити із спільнотою вирішення однієї з проблем веб-версії Вконтакте.

У минулорічному конкурсі на редизайн ВК автори конкурсу згадали про проблеми веб-версії. Проблемою номер один назвали вузьку ширину сайту. Я згоден із командою Вконтакте і вирішив побудувати своє рішення у боротьбі з цією проблемою.

Біль

Проблема №1 - Вузький екран

Крім ширини екрана, я виділив ще 2 проблеми.

Проблема №2 - Різний стиль веб-версії та програм

Проблема №3 - Месенджер

Месенджер у ВК з'явився порівняно недавно. Перша його версія помітно вибивалася за стилем і згодом вирішили. Основна проблема месенджера, на мій погляд, це те, що він живе паралельно з сайтом. Вікно листування маленьке. І хоч воно й масштабується, але воно прив'язане до абсолютних координат – користуватися сервісом не зручно. На Фейсбуці месенджер також живе окремо від сайту, розмножуючи при цьому безліч маленьких вікон-переписок.

Теорія - способи стати ширшими

Давайте спочатку вирішимо, що таке тонкий екран. Поточна ширина ВК – 791пк. У конкурсному завданні було зазначено адаптувати сайт під дозвіл від 1024пк. Як я бачу, вирішенням проблеми вузького екрану буде робочий інтерфейс на роздільній здатності 1024-1600пк. Тобто інтерфейс здатний працювати як на вузькій (1024пк) роздільній здатності, так і на широкому (1440+пк).

1. Фізичне розтягування

Рішення в лоб – робимо сайт гумовим.

Плюси:
+ Легко реалізувати

Мінуси:
− Контент стає не читаним
− Потрібно повністю переглядати деякі розділи сайту (наприклад, друзі)

2. Паралельний виклад

Прийом був помічений у концепції редизайну Фейсбука 2006 року від iA – коментарі розташовані праворуч від постів. 5 років тому я випробував його на одному із своїх проектів.

Плюси:
+ Пости розташовуються лінійно, не розриваючись коментарями
Коментарі до постів видно відразу без додаткових переходів

Мінуси:
− Нерівномірна щільність інформації на екрані
− Версія під 1024пк на превелику силу може бути створена або змушена відрізнятися від широкої
− Потрібно повністю переглядати деякі розділи сайту

3. Панелі, що зміщуються

Підхід, що став популярним у веб-сервісах: срм-системах, таск-менеджерах. Екран складається із залежних панелей. Панелі з'являються праворуч, якщо екран не вміщає все, то ліві панелі ховаються в міру появи правих.

Плюси:
+ На маленьких дозволах можна перемикати панелі, на великому показувати все відразу
+ Схожість інтерфейсу з версією під планшети

Мінуси:
− Не звичний для веб-користувачів варіант
− Сайт розташований не в центрі екрану, а ліворуч
− Великий обсяг архітектурної роботи
− Відсутність лінійного перегляду, потрібен клік по новині для прочитання коментарів

4. Два вікна

Інтерфейс із двома активними робочими розділами на екрані.

Плюси:
+ Вимагає мало змін у поточному інтерфейсі

Мінуси:
− Не зрозуміло як працювати з 2 режимами одночасно і навіщо

5. Дві колонки

Режим відображення інформації схожий на таймлайн на Фейсбуці. Концепт, заснований на цьому варіанті, перемігу конкурсі редизайну ВК.

Плюси:
+ Легко компонувати інформацію
+ Рівномірна щільність даних на екрані

Мінуси:
− Роздвоюється увага під час читання новин
− Фейсбук

6. Картки

Перехід від вертикальної оповіді у бік сітки. Приклад – Пінтерест.

Плюси:
+ Легко масштабується під будь-який дозвіл

Мінуси:
− Важко сприймати контент (важко переучуватися)
− Потрібно повністю переглядати всі розділи сайту

Практика – моє рішення

Своє рішення я побудував на 4-му підході: екран із двома активними вікнами. Друге вікно – месенджер. Це дозволяє переписуватись під час читання новин. При цьому не використовуючи 2 вкладки браузера.

На невеликих (<1440пк) экранах окно чата сворачивается.

За бажання воно відкривається поверх основного контенту. Сценарій ведення листування під час читання новин працює також.

Сама панель користувачів з останніми листуваннями залишається на екрані у всіх розділах сайту:

Деталі за кадром

Якщо вдивитися у скріншоти, то видно й інші зміни в інтерфейсі:

1. Фон.З'явилося тло підвищення контрасту блоків.

2. Поділ на блоки.Пости розклеїлися на незалежні блоки.

3. Лайки переїхали нагору.Мабуть найспірніша зміна і, ймовірно, заслуговує на окреме обговорення.

4. Зникло колишнє верхнє меню.Усі його функції вже були задубльовані у розділах сайту. На його місце став рівень вкладок. У такий спосіб вдалося скоротити один поверх навігації. Фільтри (рідко використовувана річ) переїхали до списку. Зник ще один поверх навігації.

5. Два режими перегляду друзів.Один запозичений із веб-версії, інший із планшетної. Важко оцінити який популярніший і зручніший.

6. Особисті нотатки.З'явився блок особистих нотаток про кожного друга. Кому сподобалося, беріть тут - VK Memos.

7. Веб-дзвінки.Вони вже були раніше у ВК, але були зроблені як окремий режим роботи. Зараз це непомітна функція, яка не заважає основному серфінгу та спілкуванню.

Замість постскриптуму

Хіба можливо редизайн соціальної мережі без прототипу сторінки користувача.
Поточна версія перевантажена інформацією: музика, відео, групи, паблики, фотографії, фотографії на карті, фотоальбоми, друзі, спільні друзі, друзі онлайн, передплатники… Я вирішив відрізати все зайве:

На цьому все, дякую за увагу.

Написати про новий дизайн? Ну нарешті!

!!! Увага!!! Загалом, відразу попереджаю, що я оцінюю дизайн не тільки як користувач, але і як дизайнер (у тому числі той, хто має відношення до Інтернету) і напишу багато не тільки про сам дизайн, але й про те, чому так багато незадоволених. І буде багато літер!

Щодо того, чому все так незвично:

Як тільки першого квітня (через що всі дуже сумнівалися в серйозності оновлення) став доступний новий дизайн з обмеженим бета-тестуванням, я одразу зайшов до блогу Вк і підключився. Після цього почав скакати по всіх розділах і дивитися що та як там. Першого ж дня знайшов близько п'яти багів, які одразу відправив адміністрації для виправлення. Не виправили лише один, який вважають логічним (те, що не можна переслати зображення другові, наприклад із спільноти або стрічки, і після цього зберегти його в альбом. логіка в тому, що мовляв сам відправив - значить навіщо зберігати), але ця штука була і в минулому дизайн.

Після цього я опублікував у своїй спільноті з короткою інформацією про редизайну та голосування. Стало цікаво, як перші користувачі відреагують. Більшість скаржилися на те, що не можуть знайти якийсь функціонал, наприклад, тумблер у повідомленнях (який легко знаходиться якщо навести мишку на край діалогового вікна). Так, такі елементи інтерфейсу дуже незвичні на тлі всього того, що було в рунеті останнім часом. Але це не проблема нового дизайну. Це проблема того дизайн-мислення, яке сформувалося у рунеті за останні роки. У нас дуже рідко роблять прогресивний і хороший (!) дизайн, який стає зручнішим і еволюціонує плавно і рівномірно, дозволяючи користувачу звикати до нових елементів, більш інтуїтивних і правильних з точки зору UX (user experience - та частина дизайну інтерфейсів, яка відповідає за доступність) користувачеві та зручність). Натомість ми маємо різкі стрибки у найпрогресивніших розробників, які викликають хвилю непорозуміння з боку користувачів. І все це на тлі величезної кількості сайтів з жахливим дизайном, який незручний, але просто звичний. А все тому, що роблять сайти зазвичай або дешево, або за принципом "ось як у них треба". Ті, хто мають потенціал і можуть творити прогрес, просто не працюють за ті гроші, які пропонують у рунеті, і йдуть робити добре і дорого до зарубіжних хлопців. Ось це все дуже сумно і чому введення нового дизайну Вк нагадує хрещення Русі. Але через деякий час користувачі звикнуть, запам'ятають, де що змінилося, і зрозуміють, що все не так погано.

Щодо "косіть під фейсбук, ну хоч стрічка без чужих лайків!".

Справа в тому, що дизайн еволюціонує і поки що оптимальним вважається, який називають дизайном форм і змісту. Його розробив недавно Google і багато хто його підхопив.

У ньому все базується на пропорційних елементах та акцентах, що робить його дуже простим та зрозумілим у умілих ручках розробника. Ось усі ці виїжджаючі ліворуч у додатках панельки з профілем, наприклад, – це все воно.

Згадаймо як ті ж телефони виглядали років 10-15 тому. Кожна модель Nokia була чимось абсолютно новим: всі ці висувні панелі, розкладні на всі боки екрани, шалені розташування клавіатур - це все було дуже круто. При цьому не пам'ятаю скарг на нерозуміння новинок, адже все було таке нове, цікаве і круте!

Але з прогресом все звелося до простої платівки з кнопкою зверху та двома збоку (або трьома ззаду, як у LGE). Тепер продукт або як у когось, або новий і незрозумілий. Зараз немає сенсу винаходити велосипед, тим більше якщо він буде менш зручним, ніж той, що вже є. Просто зараз дизайн пристроїв та інтерфейсів, веб-дизайн прийшли до оптимуму і краще зробити стає все складніше. Великі виробники не так дурні, що копіюють один в одного, вони настільки грамотні, що приймають ті правила, які визначають зручність, і вони нарешті дійшли загальної концепції.

Те саме стосується і дизайну у соціальних мережах. Розробники в останню чергу хочуть, щоб їм сказали, що вони вкрали дизайн. Ні. Ніхто не засудить вас, якщо ви зробиш стілець, схожий на тисячі інших стільців. Ікеа так і робить: вони роблять до болю банальні, але прості та добрі речі. Тоді в чому проблема з веб-дизайном?

Тепер ось моє суб'єктивне "думаю" щодо вже найновішого.

Стало краще. Це правда. Стара версія змінювалася настільки мало, що вона вже швидше схожа на старі тематичні форуми з двохтисячних, ніж на сучасну соціальну мережу. Тепер мобільна версія та програми стали мати багато спільного з сайтом. Адже це чудово. З'явився логічний зв'язок між ними. У спільнотах зникли ці уродські багатоповерхові аватари на підлогу сторінки з "Підпишись" і так далі. Тепер оповіщення можна перевірити кліком не йдучи зі сторінки, адже це просто лайки та відповіді, а не графа для окремого споглядання. Фотографії з відповідями тепер доповнюють одна одну при відкритті, а не йдуть у нескінченність униз.

Щодо повідомлень:Я спілкуюся в Вк багато (5-20 діалогів на день) і ось цей новий формат мене дуже тішить. Ті ж, хто не задоволений, спокійно можуть перейти на старий формат, натиснувши на шестерню внизу екрана і змінивши налаштування. Усі мають бути задоволені, хіба ні?

У той же час я згоден