Как спроектировать современный сайт - Чои Вин

Однако я не могу не рассмотреть «резиновую» верстку – создание страниц, меняющих размер в зависимости от области просмотра.

Дизайнеры хотят создать сайты, действительно учитывающие предпочтения пользователей. Поэтому нельзя отбрасывать веские доводы, направленные против страниц фиксированной ширины и вступающиеся за «резиновую» верстку. В сущности, фиксированная ширина веб-страницы отражает склонность дизайнера к контролю над реальным использованием, тогда как страницы, меняющиеся в зависимости от области просмотра, в первую очередь учитывают потребности пользователей.

Можно сказать, что при большом размере экрана сайт должен занимать всю доступную область, а при маленьком размере – соответствующим образом уменьшаться. Было бы не совсем справедливо утверждать, что «резиновая» верстка пытается подстроится под всех пользователей, но у нее близкая к этому задача. Интернет представляет собой конгломерат множества систем, которые обслуживают широкие группы пользователей способами, максимально учитывающими их индивидуальные потребности. Согласитесь, что одинаковое восприятие содержания или функциональности одного и того же сайта невозможно. Почему же внешний вид должен быть одинаковым для всех? «Резиновая» верстка больше подходит для Интернета и лучше учитывает его сильные и слабые стороны, чем страницы фиксированных размеров. Как уже было отмечено ранее, чем естественнее решение, тем оно эффективнее.

До недавнего времени возможности веб-дизайна не позволяли нам в полной мере насладиться «резиновой» версткой. Новые возможности браузеров, наряду с новшествами, которые появились в 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.

•  The Designer and the Grid, Lucienne Roberts and Julia Thrift.

•  Making and Breaking the Grid, Timothy Samara (Самара T. Создавая и ломая сетку. Мастерская графического дизайна. М.: РИН-Холдинг, 2005).

Сайты, на которых можно найти информацию о сетках

• Система сетки – http://www.thegridsystem.org

• Пять простых шагов к созданию систем сеток от Марка Бултона – http://bit.ly/atBRYh

• Дизайн на основе сеток – http://grid-based.com

• Gridness – http://gridness.net

• Blueprint CSS Framework – http://www.blueprintcss.org

• Система Grid 960 – http://960.gs

• «Отзывчивый» веб-дизайн – http://responsivewebdesign.com

• Fluidgrid – http://fuid.newgoldleaf.com

О дизайнерах

•  Unimark International: The Design of Business and The Business of Design, Jannet Conradi.

•  Paul Rand, Steven Heller.