От автора: CSS Grid, наряду с многими другими функциями CSS, произвела революцию в мире веб-дизайна. К сожалению, отрасль в целом еще не подхватила это революционное решение, так как пользователи имеют много опасений по поводу CSS Grid. Причиной таких сомнений можно назвать неудовлетворительное состояние обучающих материалов по CSS Grid.
Большинство из этих материалов подпадают под одну из двух категорий:
Воссоздание классических шаблонов веб-дизайна. Сетка очень хорошо подходит для создания классических шаблонов веб-дизайна, таких как карточные сетки и страницы типа «святой грааль».
Эксперименты. Сетка прекрасно помогает создавать всякие крутые вещи, типа поле для Монополии или интерфейсы для видео игр.
Такие виды обучающих программ очень важны для новых технологий. Они являются отправной точкой. А сейчас, как говорит Джен Симмонс, пришло время вырваться из рутины. Чтобы это сделать, мы должны преодолеть наши сомнения.
Страх №1: Асимметрия
Все мы обучались под влиянием концепции, которая гласит, что симметричный и упорядоченные дизайн – лучше. Так и есть, для многих приложений предпочтительным является симметричный дизайн или упорядоченная сетка элементов. Но, в то же время, асимметрия имеет свойство бросаться в глаза, врезаться в память, что никогда не удастся симметрии. Асимметрия интересна своим беспорядком. Если вы все же сомневаетесь, начните с малого.
В этом примере у нас есть простое промо-пространство. Используя асимметричный вертикальный и горизонтальный макет, мы можем усилить визуальное соответствие между иконкой и кнопкой. Не стоит бояться использовать пустое пространство, чтобы направить взгляд пользователя, куда вам нужно.
Кстати о пустом пространстве…
Страх №2: Отрицательное пространство
Когда мы только перешли в третье тысячелетие, для нас считалось нормальным, что пользователю приходится пролистывать страницу. Мы начали вводить в дизайн пустое пространство, и большая часть этого пространства находилась между строками контента. Это сделало дизайн намного чище, но разве вертикальное пустое пространство – это единственный возможный вариант?
В следующем примере дизайн использует отрицательное пространство, чтобы создать у пользователя ощущение изучения страницы. Благодаря тому, что здесь не использовались традиционные строки, глазам пользователя предоставляется возможность внимательно просмотреть и осознать информацию не спеша.
Страх №3: Панк-рок?
В 1970-е годы дизайнеры много обсуждали печатные макеты того времени. Тогда в сфере дизайна царила стабильность, позволяющая развивать творчество. Вслед за этим появились авангардные разработки в стиле «панк-рок». Итак, мой вопрос: можем ли мы быть панк-рокерами в веб-дизайне?
В следующем примере дизайнер не обращает внимания на предрассудки. Наложение текста – это баг? Не-а, это изюминка. Изображения не должны соперничать друг с другом? Нет, выживает сильнейший!
Как спрашивается на этом примере, хорошая ли это идея? Это стоит обсудить. Одно я знаю точно: наши инструменты усовершенствовались и стали более стабильными, пришло время экспериментов. Хотим ли мы, чтобы интернет выглядел одинаково год от года, или же мы мечтаем создать новые и увлекающие шаблоны?
Страх №4: Новые источники вдохновения
Источники вдохновения не должны вызывать страх, но их реализация часто связана с головной болью. Помните, вдохновение – не значит копирование концепции один к одному.
Графический дизайн в стиле панк-рок
Я уже ранее упоминал о замечательных примерах дизайна, пришедших к нам из ’70-х и ’80х. Ловите несколько ссылок и продолжайте изучать панк-рок дизайн:
Дизайн панк-постеров, автор: Шон О’Хаган
Дизайн «Хаос: Вечное влияние панк-рока на графический дизайн», автор: Саймон Мартин
Ретро фильмы
Я изучал киноискусство в колледже и это помогло мне по-настоящему оценить графический дизайн ретро фильмов. Один преподаватель сказал мне: «Характер и тема фильма должны быть понятны по его титрам». Особенно это правило применимо для фильмов, выпущенных после второй мировой войны. Их заставки и постеры – это кладезь идей дизайна.
Научитесь создавать сетки графического дизайна
Графические дизайнеры столетиями используют сетки для макета и по этой теме доступно много литературы:
Видео: Марк Болтон | Дизайн сеток | День CSS 2017
Основы построения макета: 100 принципов дизайна для использования сеток, автор: Бет Тондро
Страх №5: Резервные варианты
Сетки имеют только 74% поддержки в США (на момент написания этой публикации). Это не должно удержать вас от развития собственных креативных идей. Существует множество стратегий, как начать с поддержки для всех браузеров и потом развивать новые макеты.
Использование CSS Grid: Поддержка браузерами без сетки, автор: Рейчел Эндрю
Что дальше?
Именно мы должны продвигать отрасль. Технологии постоянно стимулируют нас создавать новые и необычные дизайны. Они не должны быть такими очевидными и революционными, как в приведенных здесь примерах. Все начинается с осознания того, что мы способны творить удивительные вещи… или наоборот закоснеть. Как вы поможете поучаствовать в развитии отрасли?
Автор: Bryan Robinson
Источник: //css-tricks.com/
Редакция: Команда webformyself.
