Текст книги "Как спроектировать современный сайт"

Дополнительные страницы

Созданные нами шаблоны – страница статьи, страница категории, страница профиля и домашняя страница – предлагают четыре совершенно разных подхода к компоновке материалов в созданной нами сетке. Эти страницы, вероятно, будут просматриваться чаще всего, поэтому они могут послужить довольно хорошей основой для разработки остальных страниц сайта.

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

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

СТРАНИЦА АВТОРА

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

СТРАНИЦА ABOUT US

Этот же подход можно применить к разработке страницы About Us, на которой приведены задачи сайта, история и краткая биография его создателей. Воспользуемся соотношением 2:1, как на шаблоне страницы статьи. Эта страница будет менее насыщенной, поэтому уберем вертикальную разделительную линию, отграничивающую область основного материала и биографии создателей, находящиеся в правой колонке.

СТРАНИЦА АРХИВА

Не каждый шаблон, связанный со статьями, должен соответствовать такой же модели, что и страница статьи. Можно предположить, что для страницы с архивной информацией понадобится совершенно другой подход. В качестве основного принципа организации и компоновки здесь идеально подходит календарь.

СТРАНИЦА ПРОЕКТА

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

СТРАНИЦА НАСТРОЕК

Страницы настроек бывают очень сложными, но сетка позволит упростить их вид. На странице настроек сайта Designery.us разные поля сгруппированы в колонку шириной шесть юнитов, а подписи к каждому элементу располагаются слева в колонке, образованной четырьмя юнитами.

ШАБЛОН РАССЫЛКИ

Обратите внимание, что наша сетка может применяться не только для сайтов. Ее также можно успешно использовать и в других областях. Проведенная нами работа поможет оформить информационную рассылку 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.

• 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.

• Swiss Graphic Design: The Origins and Growth of an International Style, 1920–1965, Richard Hollis.

• Corporate Diversity. Swiss Graphic Design and Advertising by Geigy 1940–1970.

 Josef Miiller-Brockmann: Pioneer of Swiss Graphic Design, Lars Muller and Paul Rand.

• Josef Muller-Brockmann, Kerry William Purcell.

• Otl Aicher, Markus Rathgeb.

• Design Is One, Leila and Massimo Vignelli.

Типографика

• The Elements of Typographic Style, Robert Bringhurst (Бринхёрст P. Основы стиля в типографике. М.: Д. Аронов, 2006).

• TypeWise, Kit Hinrichs.

• Thinking with Type: A Critical Guide for Designers, Writers, Editors, & Students, Ellen Lupton.

• Stop Stealing Sheep & Find Out How Type Works, Erik Spiekermann (Шпикерман Э. О шрифте. М.: ПараТайп, 2005).

• The New Typography, Jan Tschichold (Чихольд Я. Новая типографика. М.: Студия Артемия Лебедева, 2011).

HTML и CSS

• Bulletproof Web Design, Dan Cederholm (Седерхольм Д. Пуленепробиваемый Web-дизайн. М.: НТ Пресс, 2006).

• Web Standards Solutions'. The Markup and Style Handbook, Dan Cederholm.

• Eric Meyer on CSS, Eric Meyer.

• Designing with Web Standards, Jeffrey Zeldman with Ethan Marcotte.

Интерактивный дизайн

• About Face 3: The Essentials of Interaction Design by Alan Cooper (Купер А. Алан Купер об интерфейсе. Основы проектирования взаимодействия. СПб.: Символ-Плюс, 2009).

• The Inmates Are Running the Asylum: Why Tech Products Drive Us Crazy and How to Restore the Sanity, Alan Cooper, Robert Reimann, and David Cronin (Купер A., Райман P. и Кронин Д. Психбольница в руках пациентов. СПб.: Символ-Плюс, 2005).

• Don’t Make Me Think: A Common Sense Approach to Web Usability, Steve Krug (Круг С. Веб-дизайн: книга Стива Круга, или Не заставляйте меня думать! СПб.: Символ Плюс, 2008).

• Designing Web Usability, Jakob Nielsen (Нильсен Я. Вебдизайн. Книга Якоба Нильсена. СПб.: Символ-Плюс, 2006).

• Designing for Interaction: Creating Innovative Applications and Devices, Dan Saffer.

• Designing Interfaces: Patterns for Effective Interaction Design, Jennifer Tidwell (Тидвел Дж. «Разработка пользовательских интерфейсов. 2-е изд. СПб.: Питер, 2011).

• Glut: Mastering Information Through the Ages, Alex Wright.