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

• Название: Как спроектировать современный сайт
• Автор: Чои Вин
• Жанр: Программирование

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

---

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

Глава 2. Концепция

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

• Сетки делают информацию упорядоченной, цельной и гармоничной.

• Сетки позволяют предугадать местоположение информации, что облегчает ее восприятие.

• Сетки позволяют добавлять новую информацию, не нарушения дизайнерской концепции.

• Сетки облегчают коллективную работу над проектом, поскольку конкретные решения не наносят ущерба общей концепции.

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

В конце концов, монитор компьютера сам представляет собой тонкую сетку – экран заполнен точками с плотностью 72 пиксела на дюйм, которые образуют эквивалент листа миллиметровой бумаги.

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

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

Следовательно, веб-дизайнеры – во всяком случае те из них, кто склонен к порядку, – хотят влиять на элементы, размещаемые на экране монитора, управлять ими, чтобы подчинить себе эту реальность. Так что сетка оказывается естественным выбором.

Рассматривая приведенные ранее преимущества использования сеток, легко сделать вывод, что они распространяются и на веб-дизайн:

• Сетки добавляют упорядоченность, связность и гармонию веб-страницам с большим объемом информации.

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

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

• Сетки облегчают совместную работу над проектом без ущерба для общей концепции сайта.

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

Независимо от того, работает дизайнер в печатных изданиях, Интернете или других СМИ, сетки развивают его творческие способности.

Для тех, кто мало знаком с сетками, это утверждение может показаться спорным. Многие новички считают, что сетки предъявляют слишком много требований к внешнему виду и стилю, что сетки ограничивают их свободу выражения и творческие порывы.

Хотя эти мысли некогда были популярны и среди опытных дизайнеров, время показало, насколько они ошибочны. Не случайно свою замечательную книгу «Сетка» (1978)

Аллен Хёрлберт начал с предупреждения:...

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

Прошло более трех десятилетий, и такой осторожный подход к дизайну на основе сеток кажется анахронизмом. Большинство опытных дизайнеров согласны, что сетки помогают в нашей деятельности. В 2009 году известный дизайнер, писатель и теоретик дизайна Эллен Лаптон писала:

...

Называть сетку ограничивающей – все равно что называть ограничивающими язык или типографское дело.

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

Невидимый порядок

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

Большинство людей не столь критичны в оценке упорядоченности, по крайней мере, в визуальных образах. Людям необходимо ощущение порядка, но не обязательно его наличие. Они задают себе вопрос, сознательно, но чаще неосознанно: на своем ли месте вещь? Не противоречит ли визуальный образ элементарной логике? На самом деле можно сказать, что люди ищут не только присутствие порядка, но и отсутствие беспорядка.

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

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

В первую очередь сетки представляют собой визуальную упорядоченную систему. Как и любые другие упорядоченные системы, они воздействуют на двух уровнях: сначала на уровне восприятия, а затем на уровне деятельности. Пользователь видит сетку, а затем использует ее.

Краткая ретроспектива

Вернемся на некоторое время в прошлое. Возникновение понятия типографской сетки относят к началу XX века. Это произошло, когда группа архитекторов, печатников, типографов и дизайнеров стала рассматривать графическое искусство как отражение универсальных принципов, общих для природы, математики и технологии. Это действительно так (к этому вопросу мы еще вернемся позднее), но подобное представление не является исчерпывающим. Можно утверждать, что на протяжении всей истории человеческий род занимался поиском порядка. Мы – люди, поэтому наш поиск – это не столько поиск, сколько созидание. Если порядок отсутствовал, мы создавали его. В великолепной «Книге о сетке» (The Grid Book), описывающей историю развития сетки как концептуальной основы, искусствовед Ханна Б. Хиггинс пишет: