Глава 1: Проектируем системы (часть 1)
Перед вами перевод книги Atomic Design Брэда Фроста, разработчика интерфейсов, поклонника мобильного интернета и создателя методики “Атомарный дизайн”. Если вы здесь впервые, то лучше начните сначала)
Создавайте системы дизайна, а не страницы
В некотором царстве, в некотором государстве жили-были книги. Помните их? Тяжеленные и громоздкие штуковины, сделанные из древесины загубленных деревьев. Внутри книг были страницы. Вы перелистывали страницы, а они резали ваши пальцы.
Ужасные создания. Я очень рад, что этих самых книг с острыми, как бритвы, страницами больше не существует.
Или…
Ищите системное погружение в тему? Загляните в блог для дизайнеров.
Страницы нашего прошлого
Страницы были с нами долгое время. Несколько тысячелетий, если точнее. Первые книги появились около 4 000 лет назад и представляли из себя толстые глиняные таблички. Вскоре им на смену пришли свитки. Технология чтения прошла длинный путь — папирус, пергамент, бумажные книги, а теперь цифровые — однако концепция страницы удерживает позиции по сей день.
Метафора “страницы” закрепилась в лексиконе веб-дизайнеров с самого появления интернета. Тим Бернерс-Ли изобрел Всемирную паутину, чтобы он, его коллеги из ЦЕРН и другие ученые могли легко обмениваться документами и объединить свои документы в единую систему. А раз интернет появился благодаря документам, — логично, что страницы так глубоко укоренились в терминологии.
И что дальше?
А то, что названия предметов очень сильно влияют на то, как их воспринимают и используют. Мы еще не раз будем говорить об этом в книге. Если мы воспринимаем веб-сайты как веб-страницы, это накладывает отпечаток и на то, как люди с ними взаимодействуют, и как мы подходим к их созданию.
С самого первого дня метафора “страница” снабдила пользователей привычным языком для исследования прекрасного нового мира Всемирной паутины. Знакомые концепции вроде страницы или закладки помогли пользователям освоить абсолютно новое измерение.
Страница была и продолжает быть наглядной и полезной метафорой для тех, кто только знакомится с интернетом. Она же в крайней степени влияет и на то, как создаются веб-сайты.
На заре интернета компании, которые хотели быть представлены онлайн, просто переносили на сайт свои печатные материалы. Такие “буклетные” сайты при всех потенциальных возможностях интернета являлись весьма однобоким решением. Однако создателям сайтов было проще всего относится к ним именно как к цифровым версиям печатных материалов.
С тех пор прошло уже 25 лет, и прежде необходимая метафора “страница” сегодня полностью изжила себя. К несчастью, эта фигура речи продолжает серьезно воздействовать на то, как мы оцениваем и реализуем свои веб-проекты. Я регулярно слышу такие фразы:
“Мы планируем запустить сайт из пяти страниц в октябре…”
“Брэд, сколько времени занимает разработка стартовой страницы?”
“Как можно сделать редизайн сайта университета из 30 000 с лишним страниц?!”
Все эти примеры содержат большую ошибку: в них страницы сайта являются чем-то стандартизированным, изолированным и поддающимся количественной оценке. На самом же деле интернет — это гибкая, интерактивная и взаимозависимая среда. Как только мы примем этот факт, понятие “страница” быстро утратит свое значение в качестве полезной концепции веб-разработки.
Сколько времени займет создание стартовой страницы? Все зависит от того, что на ней будет, не так ли? Запилить простенькую страницу со слоганом и фоновым изображением можно еще до обеда. А если нужны слайдеры-карусели, динамичные формы и интеграция со сторонними сервисами, на это может уйти несколько месяцев.
Что касается сайта университета, легко поддаться искушению воскликнуть: “Тысячи страниц?! Ну и работенка предстоит!” А по факту эти 30 000 страниц могут содержать два-три типа контента и два основных макета.
В конечном счете, сложность проекта намного лучше оценивать не по количеству страниц, а по их функциональными возможностями и компонентами.
Метафора “страница” выполнила свое предназначение — помогла пользователям познакомиться с веб-средой и предоставила разработчикам временную терминологию для создания абсолютно нового измерения.
Но если мы хотим разрабатывать продуманные интерфейсы для обслуживания множества подключенных устройств, пришло время выйти за рамки страниц.
Вырвать страницу
К счастью, веб-сообщество упорно работает над созданием принципов и методов эффективной веб-разработки. Появилась концепция, которая непременно фигурирует в каждом разговоре об успешной веб-разработке: модулярность.
Модулярность появилась задолго до Всемирной паутины. Промышленная революция подарила нам взаимозаменяемые детали, а конвейер Генри Форда навсегда изменил автомобилестроение. Первые автомобили и запчасти изготавливались вручную, что было настоящим кошмаром в плане безопасности и обслуживания. Форд разобрал автомобиль на части и разделил процесс сборки. Результат говорит за себя: с конвейеров выходили более стандартизированные, надежные и безопасные автомобили в рекордно короткие сроки.
Когда индустриальная эра превратилась в эру компьютеров, появилось объектно-ориентированное программирование и установились важные концепции модулярности: разделение ответственностей и принцип единственной ответственности. Именно в эту эпоху появилась Всемирная паутина, поэтому нет ничего удивительного в том, что принцип модулярности быстро превратился в главный принцип дизайна архитектуры веба.
Медленно, но верно, упомянутые концепции начали применяться в работе веб-дизайнеров. В начале двухтысячных мы стали свидетелями появления библиотек вроде YUI и jQuery UI, которые предоставили разработчикам набор инструментов из виджетов и паттернов для создания более согласованных интерфейсов.
Если модулярность была на слуху все это время, почему мы заговорили о ней сейчас?
Короткий ответ звучит так: сегодня модулярность значит больше, чем когда-либо. Прямо сейчас вся наша индустрия тонет в море из девайсов, разрешений экранов и режима онлайн. И в ближайшее время развитие технологий точно не собирается замедляться.
Разрыв будет только ускоряться. Количество и разнообразие устройств с выходом в интернет, — многие из которых нам сложно пока вообразить, — будет расти с невиданной скоростью. Как и количество самых разных людей, которые будут ими пользоваться. Наши существующие стандарты, процессы разработки и инфраструктура долго не протянут. Нынешнее наступление устройств уже довело их до предела. Они не выдержат того, что ждет впереди. — Манифест Future Friendly.
Нравится вам или нет, мультидевайсный мир — наша новая реальность. Было непросто заставить веб-сайты стабильно отображаться в разных десктопных браузерах. Теперь перед нами стоит задача убедиться, что наш веб-интерфейс прекрасно выглядит и работает на широчайшем спектре смартфонов, планшетов, нетбуков, ноутбуков, компьютеров, телевизоров, игровых консолей и т.д.
Чтобы совладать с этой реальностью и сохранить рассудок, абсолютно необходимо сделать шаг назад и разделить гигантские задачи на более мелкие и управляемые части.
И это именно то, что мы делаем. Дух модулярности прокладывает себе дорогу в каждый аспект веб-разработки и оказывает глубокое воздействие на стратегию и процессы компаний, а также на контент, дизайн и разработку.
Над переводом работают Ольга Кокоулина и Ринат Шайхутдинов.
Если вам понравился перевод, дайте нам знать — нажмите кнопку Recommend.
Видеокурсы и практика по дизайну интерактивных систем: ux/ui, веб-дизайн и бренд-дизайн
Вас ждет плотная проектная практика по анимации интерфейсов, дизайну сайтов, а также мобильных и веб-приложений. Под руководством наставников в стиле «смотри и повторяй»!
Breezzly — это среда для тренировки digital-навыков. Здесь вы встретите комплекты видеокурсов в актуальных инструментах интерактивного дизайна, среди них Figma, Principle и Invision Studio. А каждый проект — это живой кейс с историей, собранной по горячим следам!
