Глава 1: Проектируем системы (часть 4)
← Назад | Глава 1: Проектируем системы (часть 3)
Перед вами перевод книги Atomic Design Брэда Фроста, разработчика интерфейсов, поклонника мобильного интернета и создателя методики “Атомарный дизайн”. Если вы здесь впервые, то лучше начните сначала)
Фреймворки UI в теории и на практике
Дизайнеры и разработчики прежде были ограничены лишь временем и ресурсами. Теперь им поручено создавать интерфейсы, которые прекрасно выглядят и работают на любом устройстве. Это серьезная задача.
Ищите системное погружение в тему? Загляните в блог для дизайнеров.
Разнообразие устройств увеличивается, а проекты по-прежнему необходимо выпускать в разумные сроки. Это привело к появлению интерфейсных фреймворков таких как Foundation от Zurb и Bootstrap.
UI-фреймворки предоставляют дизайнерам коллекцию шаблонов HTML, CSS и JavaScript, которые добавляют функциональности интерактивным компонентам: выпадающим спискам, каруселям и т.п. По сути, это полезные наборы инструментов для быстрой сборки интерфейсов.
И знаете, такие инструменты очень популярны. На момент написания книги Bootstrap является самым популярным репозиторием на GitHub с более чем 77 000 звездами и 30 000 ответвлений. Популярность этих фреймворков говорит о том, что дизайнеры и разработчики ищут надежную платформу для работы в сложной сегодня веб-среде.
Одним из главных плюсов фреймворков вроде Bootstrap является скорость. С их помощью разработчики быстрее воплощают идеи, создают прототипы и запускают сайты.
Шаблоны, которые входят в состав фреймворков, уже протестированы в разных браузерах. Это позволяет уделять больше времени важным задачам, а не мучаться с тестированием допотопной версии Internet Explorer. К тому же в случае проблемы, коммьюнити быстро подскажет решение.
Благодаря такому увеличению скорости фрилансеры могут взять дополнительный проект, а то и три, что обеспечит финансовую стабильность в течение года.
В среде стартапов, где Bootstrap повсеместно используется, минимально жизнеспособные продукты могут запускаться быстрее. Это ведет к более быстрому ответу на вопрос относительно их жизнеспособности.
Таким образом, фреймворки вроде Bootstrap — невероятно популярные системы проектирования с проверенными компонентами, благодаря которым более качественные проекты быстрее уходят в релиз. Какие аргументы против могут быть?
Ну… Правда жизни такова, что за перечислением достоинств всегда следует какое-то «но».
# Не все так гладко с фреймворками
В детстве, когда я смотрел фантастические фильмы, в моей голове крутился один и тот же вопрос: «Почему герои всегда ходят в одинаковой одежде?»
Я мог только предположить, что со временем мы избавимся от моды. «Эти комбинезоны стильные и удобные! Давайте с этого дня все будем ходить только в них?» — «Отличная идея!»
Естественно, человек устроен иначе. У всех нас разные вкусы, разные запросы, цели и желания. Разнообразие — специя жизни, и именно мода, музыка и дизайн отражают нашу многогранную натуру. Тем не менее, мы часто хотим, чтобы в интернете все было одинаковым. «Почему все браузеры просто не стандартизируют WebKit?» «Почему производители устройств не могут использовать одни и те же размеры экрана?» «Всегда используйте jQuery!» «Никогда не используйте jQuery!» «Используйте фреймворки!» «Никогда не используйте фреймворки!»
Как и в мире людей, перед каждым веб-проектом стоят разные задачи и цели, что приводит к тысячам разнообразных решений. Для любого из них найдется свое время и место. Однако дизайнеры и разработчики должны обладать достаточной проницательностью, чтобы понимать, какой инструмент и когда использовать.
Фронт-енд фреймворки предлагают частное решение специфической проблемы и определенный дизайн. Да, они повышают скорость разработки, но результат напоминает те костюмы из фантастических фильмов. Когда все используют одни и те же кнопки, сетки, выпадающие меню и тому подобные компоненты, сайты действительно начинают выглядеть одинаково. Если бы Nike, Adidas, Puma и Reebok решили переделать дизайн своих сайтов с использованием Bootstrap, результат получился бы идентичным. Конечно, каждый бренд мог бы изменить и улучшить стандартный внешний вид, но даже после кастомизации у них бы остались заданные фреймворком структура, стиль и функциональность.
Помимо проблем с похожестью, фреймворки могут добавить ненужного к пользовательскому опыту. Большая часть разработчиков не используют абсолютно все компоненты и функции, которые заложены в фреймворк. К несчастью, пользователям все равно приходится загружать неиспользуемые CSS и JavaScript, из-за чего страницы открываются мучительно медленно.
Или может возникнуть обратная ситуация: функционала фреймворка оказалось недостаточно, поэтому разработчикам пришлось дописывать значительный объем кода для достижения нужной цели. В какой-то момент вы можете подойти к черте, после которой время, затрачиваемое на модификацию, расширение и исправление фреймворка, перевесит первоначальное преимущество его использования — скорость разработки.
Кроме того, существует проблема с неймингом. Если вы используете фреймворк, значит соглашаетесь с чьей-то структурой, присвоенными названиями и стилистикой. Естественно, важно создавать полезный фронт-енд лексикон, но, возможно, с фреймворком вы получите не то, что ожидали из названия. Я бы, например, отказался от идеи использования стандартного компонента Bootstrap для выделения области контента, которую они называют «Jumbotron». Следует хорошо обдумать, как названия компонентов фреймворка будут вязаться с существующим кодом, прежде чем начинать его использовать.
А теперь, когда мы пропустили фреймворки через мясорубку критики, давайте притормозим. Надо признать, что концептуально они все-таки важны. Работа с инструментом дизайна, который способствует повышению согласованности и уменьшает время разработки — вообще отличная идея.
На обсуждениях редизайна домашней страницы Microsoft Дейв Руперт, разработчик веб-студии Paravel, подчеркнул важность разработки и передачи клиенту системы дизайна. Дэйв замечательно сформулировал мысль о том, что не обязательно использовать Bootstrap для каждого клиента, лучше создавать «мини-бутстрапы для каждого клиента».
Адаптивные проекты, которые мы делаем для клиентов, должны быть во многом схожи с полнофункциональными системами вроде Twitter Bootstrap. Эти живые образцы кода являются самодокументирующимися руководствами по стилю, которые предназначены для удовлетворения потребностей клиента и постоянно изменяющейся инфраструктуры мультидевайсного интернета. ~ Дэйв Руперт
Речь идет не просто об использовании системы дизайна, а о создании вашей собственной системы.
Над переводом работают Ольга Кокоулина и Ринат Шайхутдинов.
Если вам понравился перевод, дайте нам знать — нажмите кнопку Recommend.
Видеокурсы и практика по дизайну интерактивных систем: ux/ui, веб-дизайн и бренд-дизайн
Вас ждет плотная проектная практика по анимации интерфейсов, дизайну сайтов, а также мобильных и веб-приложений. Под руководством наставников в стиле «смотри и повторяй»!
Breezzly — это среда для тренировки digital-навыков. Здесь вы встретите комплекты видеокурсов в актуальных инструментах интерактивного дизайна, среди них Figma, Principle и Invision Studio. А каждый проект — это живой кейс с историей, собранной по горячим следам!
