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

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

Содержание:

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

• Глава 1. Введение 1

• Точка 1

• Почему я написал эту книгу 2

• Для кого эта книга 2

• Заключительная рекомендация 2

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

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

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

• Математические формулы 3

• XX век 4

• Интернет 4

• Изменение стиля общения 5

• Глава 3. Процесс 5

• Этапы 6

• Исследования и ограничения 6

• Эскизы 6

• Терминология 7

• Глава 4. Начинаем творить 7

• Обзор проектов 7

• Начало работы 7

• Создание наброска 8

• Создание сетки 8

• Создание шаблона страницы 10

• Проект 1. Страница статьи 11

• Проект 2. Информационная страница 13

• Проект 3. Страница профиля 14

• Проект 4. Домашняя страница 15

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

• "Резиновая" верстка 16

• Глава 5. Заключение 17

• Приложение 17

• Сетки 17

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

• О дизайнерах 17

• Типографика 17

• HTML и CSS 17

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

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

Моим родителям, которые сделали все, что могли.

Глава 1. Введение

В некотором смысле дизайн можно рассматривать как метод, с помощью которого красота стремится установить диктатуру в мире. Это должна быть не диктатура в классическом понимании, а скорее требование соблюдать умеренность и ввести дополнительное самоограничение.

При переходе от постановки задачи к выбору способа ее решения дизайнер может относиться к работе с коммерческой (коммерческие требования, технологические ограничения) или художественной (эстетика, удобство использования, человеческий фактор) точки зрения. Независимо от подхода, наиболее успешные дизайнерские работы объединяет стремление превратить хаос в порядок.

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

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

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

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

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

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

Точка

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

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

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

Рассматривая точки на своем листе, я думал: "Если пара любых расположенных неподалеку точек подразумевает скрытую структуру, не лучше ли попытаться влиять непосредственно на эту структуру и управлять ею, чем предоставлять ей свободу действий?"

Ответ на этот вопрос возник из подсознания, из моего стремления во всем найти порядок (или установить его), именно оно и сделало меня графическим дизайнером.

Я решил: "Да! Конечно! Структура должна существовать везде".

Этот урок на практике подтвердил то, что я предполагал все время: скрытая структура существует во всем, что нас окружает. Но теперь мне требовались знания, умения и ресурсы, чтобы использовать порядок для решения наиболее интересных для меня задач.