TechCrunch кардинально змінив веб-дизайн

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

Останній раз TechCrunch змінював свій сайт 5 років тому. За цей час тенденції веб-дизайну значно змінилися разом із потребами користувачів. А оскільки портал завжди серйозно ставився до вигляду свого сайту, то оновлення застарілого інтерфейсу є цілком очевидним. Цього разу керівництво ресурсу відповідально підійшло до процесу редизайну і вирішило фактично з нуля створити новий вигляд веб-ресурсу.

«Як і веб-дизайн, наша команда істотно еволюціонувала за 5 років, ми переросли наш сайт — його структура перестала відповідати нашим вимогам, а безлад з купою непотрібних елементів та функцій накопичувався так швидко, що ми самі почали губитися в структурі сайту. Ми зрозуміли, що найкращий спосіб повністю позбутися сміття — це повне перезавантаження. Тому ми вирішили не просто оновити дизайн, а перебудувати його з нуля. Це не остаточний вигляд сайту, ми плануємо ще багато над ним працювати, тому ми вирішили створити щось універсальне мінімалістичне, щоб нам було простіше вдосконалювати систему, а ви мали максимально зручний досвід взаємодії”, — пояснює продукт менеджер порталу Ніколь Уілке (Nicole Wilke).

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


Для пришвидшення та полегшення взаємодії з ресурсом команда відмовилась від посторінкового інтерфейсу і створила новий — у формі однієї сторінки. Раніше, при відкритті публікації, вантажилася сторінка з матеріалом і разом із цим оновлювався весь UI сайту. Тепер користувачі не повинні кожного разу чекати повного оновлення сторінки, тому що, новий контент з’являється в межах існуючого. Це виглядає дуже просто: ви гортаєте стрічку, натискаєте на потрібний вам матеріал, і він одразу розгортається вниз в межах стрічки. При закритті статті ви повертаєтесь до того місця ньюзфіду, де зупинилися.


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


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


Видно, що однією з головних ідей, яку переслідувала команда при створенні нового дизайну, було створення невимушеної взаємодії, юзер повинен докладати мінімально зусиль при користуванні. Для полегшення життя користувачів команда також повністю прибрала шапку сайту, де був логотип і навігаційна панель. Її дизайнери замінили на традиційне меню з категоріями ліворуч. Вони навіть не змушують юзерів виділяти лінк статті для копіювання, а дають його одразу після публікації разом із функцією “copy”. Там же користувач може в один клік поділитися матеріалом у соц. мережах.


Новий дизайн TechCrunch є дуже простим і невимушеним. Це допомагає швидко орієнтуватися серед великої кількості контенту, користувача ніщо не відволікає від прочитання останніх новин та цікавої аналітики зі сфери IT-технологій. Головним завданням команди TechCrunch було зробити взаємодію із сайтом максимально швидкою та зручною, і вони з цим ідеально впорались. Все просто та з розумом.