Редизайн Google Chrome, який тривав цілий рік (ІСТОРІЯ остання)

DesignTalk.club закінчує черговий класний матеріал – цього разу це адаптований переклад на українську мову статті Ханни Лі, топової дизайнерки – про повний інтерфейсу Chrome. Сьогодні до вашої уваги – третя частина цього надзвичайно цікавого лонгріду!

Частина 4

7. Одне вікно, щоб управляти ними всіма

Після того, як я набралася впевненості, переглянувши всі тексти, кольори та іконки в нашому інтерфейсі, я була готова до роботи з універсальним вікном пошуку.

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

Отже, я повернулася до “стовпів” нашого бренду і уважно вивчила наш логотип. Перше, що я помітила, це літера “С”.

Це свідчить про неформальний характер нашого бренду, тому важливо було знайти доброзичливу форму. Ми також використовуємо ті ж чотири кольори, що і логотип Google, щоб показати нашу спадщину. Насправді, Android, Google і Chrome мають одну повторювану форму на всіх своїх логотипах. Коло.

Кола – це природні форми, на відміну від прямокутників. Тому у них менше зорового когнітивного навантаження. Ця форма була ще свіжою в моїй свідомості після дворічного перебування в Лондоні.

Коли назви станцій метрополітену вперше були позначені прямокутними знаками, пасажирам було важко відрізнити їх від плакатної реклами. Тому в 1912 році вони додали червоні кола, щоб їх було легше знайти. Потім Френк Пік включив це коло в знаменитий логотип.

Мені здалося, що це найкраща метафора для нашого універсального вікна пошуку.

Вона повинна не просто показувати, де ти знаходишся, вона повинна допомагати тобі потрапити з одного місця в інше.

Глибоко вивчивши наш логотип, мені особливо сподобалася його форма:

Це була буквально форма нашого бренду.

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

https://leonardo.osnova.io/5b79f2d0-ccaf-844d-232a-b6a83a762a67/-/format/mp4/

Так як поява миші призвела до формування текстового поля, нам потрібно було щось нове для пристрою введення мобільних телефонів, представлених на ринку – наші пальці. Які ця форма також посилила.

Випадково, у нас також була команда на виставці Френка Стелли в музеї Де Янга. Використання Стелою полотен криволінійної форми виривалося з стандартної прямокутної рамки.

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

Я повторила модерністські настрої, тому що традиційні форми мистецтва стають неактуальними і застарілими для наших завдань. Тому ми назвали наш новий напрямок візуального дизайну «Модерн».

Потім ми вивчили тисячі проектів.

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

Один з наших дизайнерів дійсно думав, що це просто вайрфрейм.

Використання тіні Material також було не зовсім доречним, оскільки це не вирішувало нашу первісну проблему з позиціонування як простого “пошукового вікна”. А нижня додавала ще 4dp – і була важкою і вертикально зміщеною по центру.

Ми навіть спробували повністю видалити контейнер, але елементи тепер здавалися випадково розкиданими, і зміна відцентрованної URL-адреси потягла за собою значні витрати на розробку.

Як з’ясувалося, наші колеги також працювали над тим, щоб зробити нашу URL-адресу чистішою, а Material 2 тільки почав поширюватися. Він приніс з собою більш насичену колірну палітру, яка дала більше життєздатності нашій формі.

І як виявилося, маючи однакову форму, ми також зробили наш код менш складним, з меншою кількістю перехідних анімацій – ідеальним балансом дизайну та ефективності.

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

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

Ідеально? Поки що ні, але це не те, що змушує мене не пишатися тим, що ми зробили. Справа в тому, що ми зробили Chrome меншим за розміром і знизили витрати на завантаження, зробивши так, щоб кожен піксель, який ми створили, прокладав шлях наступному дизайнеру, який прийде з чимось ще кращим.

Особисто я зрозуміла, що ми щось зробили правильно, коли один з учасників нашого дослідження користувачів сказав:

«Це змушує мене відчувати себе спокійніше і може допомогти мені протягом усього дня».

І не тому, що їм сподобався дизайн, а тому що саме таким я бачила Chrome.

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

ДУЖЕ РАДИМО ПОЧИТАТИ:

6 нових та корисних інструментів для дизайнерів та маркетологів: Glorify, Artyline, Vectormator + ще 3

6 книг які варто прочитати кожному дизайнеру: Тім Браун, Майк Монтейро, Аарон Уолтер + ще 3

Як нарешті почати малювати вектор: 5 гарних порад

Залишити відповідь