Карткові фокуси: застосування карток у веб-дизайні

31

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

Отже, в даній статті я поясню вам що таке «картковий дизайн», і як він впливає на веб-дизайн в цілому.

Зростання мобільних технологій поступово привів до зміни архітектури веб-сайтів в бік чуйності й адаптивності. Ці два параметри стали обов’язковими. Дані події сприяли великому успіху «карт» — одному з основних напрямів веб-дизайну в 2015 році.

Тим не менш, ми можемо з упевненістю стверджувати, що карти не просто дизайнерська примха, за ними майбутнє веб-розробки, так як це найкращий спосіб організації і відображення контенту в послідовній формі. Отже, в даній статті я поясню вам що таке «картковий дизайн», і як він впливає на веб-дизайн в цілому. Поїхали!

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

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

І дійсно, в 17 столітті в Лондоні вперше з’явилися «торгові картки», з їх допомогою люди знаходили роботу: це був перший приклад сучасних «візиток».

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

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

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

Що собою представляють карти в інтернеті?

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

Основна мета карт забезпечити короткий огляд певної теми в замкнутому просторі. І якщо читач зацікавився новиною, він може по одному кліку перейти на нову сторінку з повним текстом. Веб-сайти Facebook або Twitter користуються цими перевагами, вони впровадили в свій дизайн шаблон карт, відображаючи великі обсяги контенту і зберігаючи при цьому дорогоцінний простір.

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

Крім своєї корисності карти є поширеним вибором в дизайні з-за їх сумісності з чуйними фреймворками. З допомогою «Розбитого на частини» структури можна створювати привабливі інтерфейси, а також така структура є ідеальною для розробки на мобільних платформах. Форма карти вкрай схожа на форму сучасного смартфона.
Ми часто говоримо про «текучих» макетах. Карти надають нам невеликі шматочки контенту, за допомогою яких можна «залити» сторінку під різні розміри і форми екранів.

Чому слід застосовувати карти?

З тих пір як карти стали універсальними, вони можуть бути використані по-різному в залежності від необхідних функцій. Нижче представлено кілька причин, навіщо використовувати карти:

Це тренд: тенденції по своїй природі тимчасове явище, однак, використовуючи карти, ви можете ефективно зробити ваш сайт знаменитим.

Карти вводять порядок: карти впроваджують рівні організації контенту.

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

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

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

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

Хто застосовує карти?

Dribbble

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

Pinterest

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

Twitter

Twitter, використовуючи обмеження в 144 символу в одному повідомленні, народився з «вбудованим карткових макетом». У минулому році соціальна мережа запустила свій власний продукт під назвою «Twitter Cards», додаток, розроблене, щоб допомогти вам «картизировать» ваш контент, якщо ви постите його в системі. Розробники описують свій додаток, як можливість:

«прикріпити багато фото, відео та іншого медіа контенту до твітів, що переведе трафік на ваш веб-сайт»

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

The Guardian

Знаменита Британська газета The Guardian застосувала картковий дизайн до свого веб-сайту для того, щоб «думати по-новому і поліпшити виявлення та просування контенту».

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

Висновок

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