Глава 1: Проектируем системы (часть 3)
← Назад | Глава 1: Проектируем системы (часть 2)
Перед вами перевод книги Atomic Design Брэда Фроста, разработчика интерфейсов, поклонника мобильного интернета и создателя методики “Атомарный дизайн”. Если вы здесь впервые, то лучше начните сначала)
# Сперва был код
Как мы уже говорили, в мире информатики модулярность была давно признана базовым принципом. Этот принцип появился задолго до того, как был изобретен интернет, однако потребовалось некоторое время, чтобы он закрепился в умах и сердцах веб-разработчиков.
Язык интернет-программирования JavaScript появился где-то в 1995. Однако, прежде чем стать полноправным признанным языком, коим он является сегодня, ему тоже пришлось пережить “болезни роста”. Теперь, когда JavaScript достиг зрелости, разработчики могут применять испытанные и надежные принципы информатики и для веб-разработки. В результате сегодня мы видим, как на JavaScript разрабатываются сложные паттерны и архитектуры.
Ищите системное погружение в тему? Загляните в блог для дизайнеров.
Конечно, пример с использованием принципа модулярности в JavaScript слегка отдает капитаном Очевидность: как никак, JavaScript является языком программирования. Но объектно-ориентированное мышление прокладывает себе тропинку и в другие аспекты интернета, в том числе к CSS, языку оформления веб-страниц. Такие методологии как OOCSS, SMACSS и BEM появились, чтобы помочь веб-дизайнерам создавать и поддерживать модульную CSS-архитектуру.
# Модулярность в дизайне
Принцип модулярности проникает не только со стороны кода в оформлении сайтов, но и меняет подходы графических дизайнеров к современному веб-дизайну.
По мере того, как растет число разнообразных устройств, создание статичного макета для каждой страницы веб-сайта становится невозможным. Как заметил Стивен Хэй, демонстрировать макеты на дизайнерских компьютерах максимальной комплектации — «все равно что показывать клиентам, как их веб-сайт никогда не будет выглядеть в жизни».
Это не значит, что такие инструменты для статического дизайна как Photoshop или Sketch стали не важны. Напротив. То, как мы используем эти инструменты, — вот, что кардинально поменялось. Собрать сотни супермощных компьютеров нереально, зато эти статические инструменты превосходно подходят для организации рабочего пространства и создания того, что Энди Кларк называет “настроением дизайна”:
Настроение описывает чувства, которые в нас вызывают цвет, фактура и типографика. Возможно, вы уже размышляли об атмосфере, только в других выражениях. Вы могли бы называть это «ощущение», «эмоция» или даже «визуальная идентичность». Какие бы слова вы ни выбрали, атмосфера дизайна не зависит от макета. Она не зависит от структуры и расположения элементов. Но она будет ощущаться на любом устройстве с любым размером экрана. ~ Энди Кларк
Для успеха проекта крайне важно задать своему дизайну настроение как можно раньше. И поэтому дизайнеры нашли способ упростить обсуждения этих тонких материй, отказавшись от создания полных детально проработанных макетов. Дизайнер Саманта Уоррен изобрела прием, который назвала “плитка стиля”. Плитка — это одна страница, которая наглядно демонстрирует все цвета, шрифты и текстуры проекта. Взяв за основу идею Саманты, дизайнер Дэн Молл разработал концепцию составления коллажа элементов, которые призваны продемонстрировать характер дизайна.
Таким образом, когда дизайнеры делят на части предварительное визуальное представление, они экономят свои время и силы, а также избегают демонстрации сырых нереалистичных макетов клиентам. И что еще более важно, такой подход смещает фокус заказчика с эмоциональной реакции на красивую картинку на более предметные обсуждения об общей концепции дизайна и того, отвечает ли она целям проекта. Процесс работы над дизайном кардинальным образом меняется. Мы еще вернемся к этой теме в четвертой главе.
# Системный UI-дизайн
Мы не рисуем дизайн страниц, мы проектируем системы компонентов. ~ Стивен Хэй
Из чего состоит интерфейс? Из каких деталек лего он складывается? Какие ингредиенты мы добавляем в свой дизайнерский Subway сэндвич? Мы все чаще задаемся этими вопросами по мере того, как создаем интерфейсы для все большего числа заказчиков.
Несколько лет назад Итан Маркотт познакомил нас с идеей адаптивного веб-дизайна и его тремя базовыми принципами: адаптивные сетки, гибкие медиафайлы и гибкие медиазапросы CSS. Эти три компонента обеспечили дизайнерам столь необходимую основу для создания гибких макетов, которые адаптируются к любому размеру экрана. И что, возможно, важнее, адаптивный дизайн вдохновил разработчиков на создание продуманных, адаптивных, мультиплатформенных веб-приложений.
Разработчики быстро поняли, что разработка мультдевайсных веб-проектов включает в себя куда больше, чем простое создание няшных страничек. Разработка каждого отдельно взятого элемента интерфейса — это уникальные задачи и решения для того, чтобы этот элемент прекрасно выглядел и работал на любых устройствах.
На больших экранах основная навигация представлена в виде горизонтального меню. Как перенести ее на маленькие экраны? Как адаптировать лайтбоксы, навигационные цепочки и карусели переводятся для меньшего разрешения? Какие нужны альтернативные способы ввода данных? Именно эти вопросы побудили меня к созданию «This Is Responsive», коллекции адаптивных паттернов, которые демонстрируют различные способы подачи разных элементов в адаптивной среде.
Коллекция “This Is Responsive” успешно иллюстрирует то, как шаблоны интерфейсов могут масштабироваться в зависимости от размеров экрана и платформы. Тем не менее, разработчикам и дизайнерам необходимо самостоятельно реализовывать эти шаблоны на практике. И как оказывается, это довольно сложно.
Над переводом работают Ольга Кокоулина и Ринат Шайхутдинов.
Если вам понравился перевод, дайте нам знать — нажмите кнопку Recommend.
Видеокурсы и практика по дизайну интерактивных систем: ux/ui, веб-дизайн и бренд-дизайн
Вас ждет плотная проектная практика по анимации интерфейсов, дизайну сайтов, а также мобильных и веб-приложений. Под руководством наставников в стиле «смотри и повторяй»!
Breezzly — это среда для тренировки digital-навыков. Здесь вы встретите комплекты видеокурсов в актуальных инструментах интерактивного дизайна, среди них Figma, Principle и Invision Studio. А каждый проект — это живой кейс с историей, собранной по горячим следам!
