Від автора: CSS Grid, поряд з багатьма іншими функціями CSS, зробила революцію в світі веб-дизайну. На жаль, галузь в цілому ще не підхопила це революційне рішення, так як користувачі мають багато побоювань з приводу CSS Grid. Причиною таких сумнівів можна назвати незадовільний стан навчальних матеріалів по CSS Grid.
Більшість з цих матеріалів підпадають під одну з двох категорій:
Відтворення класичних шаблонів веб-дизайну. Сітка дуже добре підходить для створення класичних шаблонів веб-дизайну, таких як карткові сітки і сторінки типу «святий грааль».
Експерименти. Сітка чудово допомагає створювати всякі круті речі, типу поле для Монополії або інтерфейси для відео ігор.
Такі види навчальних програм дуже важливі для нових технологій. Вони є відправною точкою. А зараз, як каже Джен Сіммонс, прийшов час вирватися з рутини. Щоб це зробити, ми повинні подолати наші сумніви.
Страх №1: Асиметрія
Всі ми навчалися під впливом концепції, яка свідчить, що симетричний і впорядковані дизайн – краще. Так і є, для багатьох додатків кращим є симетричний дизайн або упорядкована сітка елементів. Але, в той же час, асиметрія має властивість кидатися в очі, врізатися в пам’ять, що ніколи не вдасться симетрії. Асиметрія цікава своїм безладдям. Якщо ви все ж сумніваєтеся, почніть з малого.
У цьому прикладі у нас є просте промо-простір. Використовуючи асиметричний вертикальний і горизонтальний макет, ми можемо посилити візуальне відповідність між іконою і кнопкою. Не варто боятися використовувати порожній простір, щоб направити погляд користувача, куди вам потрібно.
До речі про порожньому просторі…
Страх №2: Негативне простір
Коли ми перейшли в третє тисячоліття, для нас вважалося нормальним, що користувачеві доводиться перегортати сторінку. Ми почали вводити в дизайн порожній простір, і велика частина цього простору знаходилася між рядками контенту. Це зробило дизайн набагато чистіше, але хіба вертикальне порожній простір – це єдиний можливий варіант?
У наступному прикладі дизайн використовує негативний простір, щоб створити у користувача відчуття вивчення сторінки. Завдяки тому, що тут не використовувалися традиційні рядка, очам користувача надається можливість уважно переглянути і усвідомити інформацію не поспішаючи.
Страх №3: Панк-рок?
У 1970-ті роки дизайнери багато обговорювали друковані макети того часу. Тоді в сфері дизайну панувала стабільність, що дозволяє розвивати творчість. Слідом за цим з’явилися авангардні розробки в стилі «панк-рок». Отже, моє питання: чи можемо ми бути панк-рокерами у веб-дизайні?
У наступному прикладі дизайнер не звертає уваги на забобони. Накладення тексту – це баг? Не-а, це родзинка. Зображення не повинні змагатися один з одним? Ні, виживає найсильніший!
Як питається на цьому прикладі, хороша це ідея? Це варто обговорити. Одне я знаю точно: наші інструменти удосконалилися і стали більш стабільними, прийшов час експериментів. Чи ми хочемо, щоб інтернет виглядав однаково рік від року, або ж ми мріємо створити нові та захопливі шаблони?
Страх №4: Нові джерела натхнення
Джерела натхнення не повинні викликати страх, але їх реалізація часто пов’язана з головним болем. Пам’ятайте, натхнення – не значить копіювання концепції один до одного.
Графічний дизайн в стилі панк-рок
Я вже раніше згадував про чудових прикладах дизайну, які прийшли до нас з ’70-х і ’80х. Ловіть кілька посилань і продовжуйте вивчати панк-рок дизайн:
Дизайн панк-постерів, автор: Шон О ‘ Хаган
Дизайн «Хаос: Вічне вплив панк-року на графічний дизайн», автор: Саймон Мартін
Ретро фільми
Я вивчав кіномистецтво в коледжі і це допомогло мені по-справжньому оцінити графічний дизайн ретро-фільмів. Один викладач сказав мені: «Характер і тема фільму повинні бути зрозумілі за його титрів». Особливо це правило застосовується для фільмів, випущених після другої світової війни. Їх заставки та постери – це джерело ідей дизайну.
Мистецтво графічного дизайну титрів для фільмів протягом історії кінематографа, автор: Ребекка Гросс
Сол Басс і його підхід до дизайну заставок для фільмів, опубліковано Академією Кінематографічних мистецтв і наук
Навчитеся створювати сітки графічного дизайну
Графічні дизайнери століттями використовують сітки для макета і по цій темі є багато літератури:
Відео: Марк Болтон | Дизайн сіток | День CSS 2017
Гуити Новин: Історія графічного дизайну: Глава 58, Історія макетів дизайну і сучасні газети і журнали
Основи побудови макета: 100 принципів дизайну для використання сіток, автор: Бет Тондро
Страх №5: Резервні варіанти
Сітки мають тільки 74% підтримки в США (на момент написання цієї публікації). Це не повинно утримати вас від розвитку власних креативних ідей. Існує безліч стратегій, як почати з підтримки для всіх браузерів і потім розвивати нові макети.
Використання CSS Grid: Підтримка браузерами без сітки, автор: Рейчел Ендрю
Відео: Поліпшення макета, автор: Джен Сіммонс
Поступальний удосконалення Переосмислення прогресивного поліпшення і відповідальність розробника, автор: Брайан Робінсон
Що далі?
Саме ми повинні просувати галузь. Технології постійно стимулюють нас створювати нові і незвичайні дизайни. Вони не повинні бути такими очевидними і революційними, як у наведених тут прикладах. Все починається з усвідомлення того, що ми здатні творити дивовижні речі… або навпаки заскніти. Як ви допоможете взяти участь у розвитку галузі?
