Чои Вин - Как спроектировать современный сайт
ШАБЛОН РАССЫЛКИ
Обратите внимание, что наша сетка может применяться не только для сайтов. Ее также можно успешно использовать и в других областях. Проведенная нами работа поможет оформить информационную рассылку Designery.us, на которую подписываются пользователи.
«Резиновая» верстка
Все созданные нами шаблоны имели фиксированную ширину: то есть ширина юнитов, колонок, областей и т. д. остается постоянной при изменении размеров окна браузера. Большинство коммерчески успешных сайтов используют этот принцип с момента появления Интернета. Данный подход оказался самым эффективным методом компоновки, позволяющим создать качественный дизайн в среде, которая не всегда является дружественной по отношению к дизайнеру.
Однако я не могу не рассмотреть «резиновую» верстку – создание страниц, меняющих размер в зависимости от области просмотра.
Дизайнеры хотят создать сайты, действительно учитывающие предпочтения пользователей. Поэтому нельзя отбрасывать веские доводы, направленные против страниц фиксированной ширины и вступающиеся за «резиновую» верстку. В сущности, фиксированная ширина веб-страницы отражает склонность дизайнера к контролю над реальным использованием, тогда как страницы, меняющиеся в зависимости от области просмотра, в первую очередь учитывают потребности пользователей.
Можно сказать, что при большом размере экрана сайт должен занимать всю доступную область, а при маленьком размере – соответствующим образом уменьшаться. Было бы не совсем справедливо утверждать, что «резиновая» верстка пытается подстроится под всех пользователей, но у нее близкая к этому задача. Интернет представляет собой конгломерат множества систем, которые обслуживают широкие группы пользователей способами, максимально учитывающими их индивидуальные потребности. Согласитесь, что одинаковое восприятие содержания или функциональности одного и того же сайта невозможно. Почему же внешний вид должен быть одинаковым для всех? «Резиновая» верстка больше подходит для Интернета и лучше учитывает его сильные и слабые стороны, чем страницы фиксированных размеров. Как уже было отмечено ранее, чем естественнее решение, тем оно эффективнее.
До недавнего времени возможности веб-дизайна не позволяли нам в полной мере насладиться «резиновой» версткой. Новые возможности браузеров, наряду с новшествами, которые появились в CSS и JavaScript, позволяющими учитывать параметры устройств, дают возможность дизайнерам создавать гораздо более динамичные страницы.
Дизайнеры-новаторы теперь могут заниматься так называемым «отзывчивым» веб-дизайном. Итан Маркотт, его активный сторонник, утверждает, что такой подход открывает новые возможности:
Можно сделать сайт удобным и привлекательным внешне, используя при этом стандартные технологии, чтобы сайт был не только более гибким, но и адаптировался к среде, в которой он воплощается.
Эти технологии невероятно быстро развиваются, поэтому я решил не рассматривать их в своей книге. Оптимальные методы в сфере «отзывчивого» веб-дизайна пока еще не найдены.
Тем не менее основные принципы дизайна остаются в силе независимо от развития нового подхода. Справедливым остается и тот факт, что дизайнеры должны продолжать делиться возможностями управления собственными произведениями с пользователями, которые хотят управлять своими действиями. Было бы ошибкой считать, что «отзывчивый» веб-дизайн означает предоставление пользователям полного контроля, потому что в действительности им нужны только некоторые функции. Пользователи надеются, что дизайнеры не только предоставят им некоторую оболочку, но и доработают ее в достаточной степени, чтобы ею можно было управлять.
Дизайнеру следует принимать некоторые решения за пользователя, но не все, а только те из них, которые помогают в восприятии. Дизайнер дает возможность пользователю управлять наиболее важными для его целей аспектами восприятия, но пользователь при этом должен ощущать стабильность и надежность.
«Отзывчивый» веб-дизайн не делает эту задачу проще. На самом деле он ее усложняет. Появятся еще больше ситуаций, которые необходимо учитывать, больше комбинаций элементов пользовательского интерфейса в различных сочетаниях, что затруднят восприятие сайтов. Таким образом, сетка становится еще важнее для общего дизайна; создание строгой сетки, лежащей в основе «отзывчивого» веб-дизайна, сделает его более обоснованным и надежным.
Одни и те же принципы дизайна на основе сетки могут использоваться как в «резиновой» верстке, так и в «отзывчивом» веб-дизайне. Юниты можно объединять в колонки и области, а размеры элементов менять в зависимости от основных параметров сетки. Эти элементы должны увеличиваться и уменьшаться в соответствии с этими же параметрами, но важно помнить, что изменяться должно не всё. Некоторые элементы могут и должны оставаться неизменными. В среде, где элементы бесконечно меняют размеры, очень важно сохранить постоянство, предоставить пользователям какие-нибудь ориентиры. По мере развития этой теории появятся новые возможности для дизайнеров, работающих в этой области. Но неизменной останется центральная роль дизайнера – человека, управляющего пользовательским восприятием.
Глава 5. Заключение
Завершая рассказ об основанном на использовании сетки веб-дизайне, мне хотелось бы ненадолго остановиться на перспективах его развития.
Типографская сетка лежит в основе бесчисленного множества афиш, книг, журналов и других выразительных примеров дизайнерского искусства, но пока еще не получила широкого применения в цифровом мире. По мере развития средств и технологий все больше дизайнеров начинают использовать основные принципы сетки в новой среде, сетки могут стать более распространенными, поскольку представляют собой естественное решение, позволяющее отображать цифровые материалы и обеспечивать их функциональность. Благодаря постоянному совершенствованию технологии в ближайшем будущем роль сеток станет еще более важной и они принесут еще больше пользы в новом цифровом мире.
Моя книга – это попытка помочь ускорить этот процесс, распространить принцип сетки в надежде, что он изменит к лучшему практику веб-дизайна и дизайна во всех цифровых сферах. Но не стоит думать, что эта книга прогнозирует будущее, в котором Интернет или любое другое цифровое средство станет больше походить на мир печатной продукции и аналоговых СМИ, чем сейчас. Скорее наоборот.
По мере развития технологий СМИ будут все меньше и меньше походить на те, что были раньше. Технические новшества будут формировать и изменять наше общение.
Что более важно, поведение пользователей будет развиваться, порождая новые способы взаимодействия в цифровом мире. Все это предоставляет дизайнерам новые возможности и ставит перед ними новые проблемы. Изменение задач дизайна приведет к изменению дизайн-решений.
Разработка дизайна на основе сетки – это не попытка использовать преимущества старого метода в рамках нового. По сути, чтобы принципы создания сеток обеспечили действительно положительные перемены в Интернете или любом цифровом СМИ, дизайнеры должны перерабатывать и изменять их в зависимости от поставленных задач. Многому можно научиться на основе существующего опыта использования сеток, и нам еще предстоит освоить много правил их применения. Самая важная мысль состоит в том, что дизайнер должен понимать поставленную перед ним задачу и найти соответствующее решение.
Приложение
Одной книги о сетках будет явно недостаточно для дизайнера, стремящегося к новому. Чем больше вы узнаете о работах других специалистов, тем быстрее вы развиваетесь. Я привожу список лучших книг, посвященных сеткам и дизайну, которые я читал. Он неполный, во всех этих книгах и на сайтах упоминаются множество других «источников вдохновения». Старайтесь по возможности прочитать всё, что доступно по этой теме.
Последнее замечание: кроме указанных ресурсов ознакомьтесь с сайтом-спутником этой книги: http://grids.subtraction.com. Здесь вы сможете найти обновления списка литературы, дополнительные комментарии и много другой информации.
Сетки
• Der typografische raster. The Typographic Grid, Hans Rudolf Bosshard.
• A Practical Guide to Designing Grid Systems for the Web, Mark Boulton.
• Grid Systems: Principles of Organizing Type, Kimberly Elam.
• Geometry of Design, Kimberly Elam (Элам К. Геометрия дизайна. Пропорции и композиция. СПб.: Питер, 2011).
• The Grid Book, Hannah В. Higgins.
• The Grid, Allen Hurlburt (Хёрлберт А. Сетка: Модульная система конструирования и производства газет, журналов и книг. М.: Книга, 1984).
• Grid Systems in Graphic Design, Josef Muller-Brockmann.
