Category: Дизайн

Сайты, в отличие от традиционных носителей, способны развиваться, эволюционировать и даже иметь историю (пример — сайт Джеффри Зельдмана, существующий с 1995 года). Поэтому, создавая сайт, мы на самом деле создаем нечто большее, чем готовый к употреблению продукт. Скорее мы создаем что-то наподобие ДНК. Мы ведь не знаем, что еще придумают Gapingvoid или Дима Честных, и регулярно заходим на их сайты именно по этой причине.
Диаграмма, о которой пойдет речь, может быть полезна в ситуациях, когда есть потребность в создании сайта, но нет особой ясности относительно желаемого результата. Первоначально она возникла у меня как средство донести до клиента всю важность перспективы развития сайта. Однако оказалось, что помимо чисто иллюстративных задач она хорошо решает и другие вопросы, например, помогает понять взаимосвязи между различными частями работы над сайтом, сбалансировать их и направить развитие проекта в правильное русло. Поэтому я решил ею поделиться. Надеюсь, что для кого-то она окажется полезным инструментом.

Диаграмма

[pdf здесь]

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

Что и Как

Оценка по лучу «Что продаем?» — это попытка определить, каковы реальные преимущества компании, качество предлагаемых товаров/услуг, масштаб компании и т.д. Чаще всего люди склонны завышать эту оценку. Поэтому для начала нужно уточнить, что мы принимаем за десять баллов, – тогда многое станет яснее.
«Как продаем» — это ответ на вопрос о том, сколько ресурсов планируется направить на развитие и продвижение сайта.
Если «Что» невелико, нет смысла бросать большие ресурсы на «Как» — вложения вряд ли окупятся. Это очевидно. А вот об обратном часто забывают: если сайт представляет компанию, продукт или услугу высокого уровня, то на его развитие и продвижение потребуется много ресурсов. Хотя бы из-за конкуренции, которая в этих случаях тоже достаточно высока.
В вирусном, партизанском, скрытом и прочих извращенных формах маркетинга эта проблема частично решается за счет привлекательности самого продукта, которая и является мотором его продвижения.

Компания и аудитория

По лучу «Компания» оценивается степень влияния сайта на бизнес, то есть значимость сайта для компании. Луч «Аудитория» — это соответственно попытка оценить значимость сайта для целевой аудитории и ее возможный охват.
Если предполагается, что сайт никак не влияет на бизнес (подход «чтоб был»), трудно ожидать, что он привлечет большую аудиторию. И наоборот, если сайт привлек большую аудиторию, он станет существенным для бизнеса.
Главное средство привлечения аудитории на сайт — это, как всем известно, контент, а не трюки с поисковой оптимизацией. Поэтому переходим к третьей паре параметров.

Дизайн и контент

Понятно, что хороший дизайн положительно влияет на восприятие контента и наоборот. Однако если дизайн уж очень навернут, а контент — никакой, сайт скорее всего будет смотреться смешно. Дизайн без качественного контента — вещь совершенно бесполезная и жаль, что на мучения с ним люди тратят столько драгоценного времени. (Бывают, конечно, случаи, когда дизайн и есть контент. Но это редкое явление и оно не имеет отношения к рассматриваемой ситуации.)
Роль контента, наоборот, чаще всего оказывается недооцененной. Сайты крупных компаний изобилуют канцеляризмами, претензиями на чрезмерную солидность, голословными обещаниями и другими проявлениями псевдотворчества. Думаю, рано или поздно все это уйдет в прошлое и люди будут читать такие тексты с улыбкой. На Западе, во всяком случае, этот процесс уже давно идет.
Но главное в том, что сегодня качественный контент — это новый контент. То есть содержание сайта должно меняться, чтобы он оставался интересным. Поэтому, на мой взгляд, именно контент должен быть главным ориентиром при создании сайта, ориентированного на развитие и долгосрочный контакт с аудиторией. Как создать такой контент – тема для отдельного разговора.
Разумеется, диаграмма не претендует на универсальность. Деление на этапы разработки и развития условно. Для некоторых проектов, наверно, понадобится другая комбинация параметров, для каких-то эта диаграмма вообще не нужна. В любом случае, если кто-то захочет ей воспользоваться, будет интересно узнать о результатах.

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

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

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

Л Вместо этого ты показываешь им то, что ты хочешь?

Д Да. Если ты не вложишь в дело самого себя, оно может стать мёртвым и скучным. Многие дизайнеры не делают этого, и это объясняет, почему вокруг так много скучающих дизайнеров и скучного дизайна. Один человек сказал с целью задеть меня, что всё, что я сделал, было потворствованием своим желаниям; я ответил бы: я надеюсь, что оно было таковым. Именно тогда и получается самая лучшая работа. Люди используют идею следования своим желаниям в негативном смысле, но я бы не хотел, чтобы кто-то работал для меня без страсти, не стараясь изо всех сил сделать лучшее, что может. Он должен привнести в работу что-то свое, иначе я мог бы с тем же успехом нанять вместо него простого верстальщика…

Однако над дизайнером, особенно начинающим, часто нависают призраки. В его работу незаметно проникают элементы, чуждые поставленной задаче, и ему трудно отличить действительно удачное решение от образа, который лично ему нравится. И если опытным дизайнерам удается сочетать личную включенность и взгляд на задачу «со стороны клиента», то у не очень опытных «личный вклад» выглядит со стороны скорее как перекос, попытка «тянуть одеяло на себя», бегство в не очень реальный, зато «свой» мир.
Как бороться с этим перекосом? Исключить из дизайна все личное, увы, не означает прийти к лучшему дизайну. Все знают, что такое «замученный» макет. В каком-то смысле он даже хуже, чем макет «с перекосами», — он подавленный, отталкивающий, усталый, иными словами, он несет дурную энергетику, которую зритель не может не чувствовать.
Мне кажется, что проблему надо решать с другой стороны. Не нужно исключать из работы личного вклада дизайнера, наоборот, нужно не останавливаться на полпути, а стремиться сделать этот вклад более осмысленным. Ведь большинство «роз на тендере паровоза» вырастают в макете под влиянием минутного неосознанного порыва. Потом, задним числом, художник называет это «я так вижу». Но по большому счету, он и сам не знает, что именно он видит, до тех пор, пока об этом не задумается. А что, если задуматься вначале?..
Один из способов такого осмысления – сознательная попытка получить до начала работы «обратную связь» от себя самого — например, путем использования филы, случайного стимула, инструментов CoRT или других креативных методик. Помимо прямого эффекта в виде возможных интересных идей дизайнер как минимум преодолеет начальный барьер отчуждения, включится в работу, почувствует ее своей и в то же время отнесется к ней более осознанно.

Никогда не видел большого смысла в дефинициях, но вот в процессе написания заметки, которая появится следующей, наткнулся [.doc 96kb] на замечательную подборку определений дизайна. Тот, кто ее сделал, должен был прочитать много хорошей литературы. Привожу за некоторым сокращением.

1. Design is a manifestation of the capacity of the human spirit to transcend its limitations. (George Nelson)
2. Designers who design like machines will be replaced by machines. It is not the digital but the intuitive, not the measurable but the poetic, not the mechanical but the sensual, which humanize design. (Katherine McCoy)
3. Design plays a central, not merely ornamental, part in the creation of meaning. (Derick de Kerchhore)
4. Design describes the processes of selecting shapes, sizes, materials and colours to establish the form of something that is to be made. The object can be a city or town, a building, a vehicle, a tool or any other object, a book, an advertisement or a stage set. Design is the activity which forms a major part of reality as we experience it. (Johnatan Pile)
5. Design is not an art or a science, a socio-cultural phenomenon or a business tool. It is an innovative process which uses information and expertise from all these sectors. It uses creativity first to analyse and synthesise the interactions between them and, secondly to offer appropriate and innovative responses (forms) which, in application, should go beyond the sum of each sector’s vision and capacity and yet remain recognisable and pertinent to them all. (A.M. Boutin – Liz Davis)
6. Design is the cardinal means by which human beings have long tried to modify their natural environment. Design, the act of putting constructs in an order, seems to be human destiny. (Richard Neutra)
7. In anything at all, perfection is finally attained not when there is no longer anything to add, but when there is no longer anything to take away, when a body has been stripped down to its nakedness. (Antoine De Saint Exupery)
8. Design is a process of turning people’s ideas into forms. Transforming the invisible into the visible, design is also the operation of turning mental, social and spiritual entities into physical ones. Design is the process of the human creation of new realities. However, this assumes a thorough knowledge of the qualities and effects of the material world. Good design is the result of an excellent idea going into a good form, an excellent immaterial entity going into a good material one. Creating reality is always a synthetic activity, and the result must be beautiful. (Kenji Ekuan)
9. Design is everybody’s business: we live in it, we eat in it, we pray and play in it. When I say that design is everybody’s business, I don’t mean that design is a do-it-yourself job. I mean that it affects everybody, at all times, in our lives. Unless we gain a better understanding of design, we shall witness our environment getting steadily worse, in spite of the constant improvement of our machines and tools. (P.J.Grillo)
10. Good design keeps the user happy, the manufacturer in the black and the aesthete unoffended. (Raymond Loewy)
11. The word ‘design’ can mean either a weightless, metaphysical conception or a physical pattern. The opposite of design is chaos. (Buckminster Fuller)
12. The word design signifies so many different things: a process, a means of promoting sales, and a stage on the road to production. It enhances products, and sells them; it solves problems and conveys ideas; it is artistic and commercial, intellectual and physical. This many-sidedness &endash; or ambiguity and endash; is something we have to learn to live with, as a historically incontrovertible fact. (Frederique Huygen)
13. Design requires a constant remodelling of our ideas as it must adapt its language to new possibilities offered by new structural materials. (P.J.Grillo)
14. Industrial Design is a creative activity whose aim is to determine the formal qualities of objects produced by Industry. These formal qualities include the external features, but are principally those structural and functional relationships which convert a system to a coherent unity, both from the point of view of the producer and the user. Industrial Design extends to embrace all aspects of human environment which are conditioned by industrial production. (Thomas Maldonado)
15. Design, in its broader sense, is creation of systems for living. (Yoshida Mitsukuni)
16. Simplicity – a virtue so rare and essential in design, does not mean want or poverty. It does not mean the absence of any decor, or absolute nudity. It only means that the decor should belong intimately to the design proper, and that anything foreign to it should be taken away. Decor must be consistent and totally integrated with the whole design story. (P.J.Grillo)
17. Design must be meaningful. And “meaningful” replaces the semantically loaded noise of such expressions as “beautiful”, “ugly”, “cool”, “cute”, “disgusting”, “realistic”, “obscure”, “abstract”, and “nice”, labels convenient to a bankrupt mind when confronted by Picasso’s Guernica, Frank Lloyd Wright’s Fallingwater, Beethoven’s Eroica, Stravinsky’s Le Sacre du printemps, Joyce’s Finnegans Wake. In all of these we respond to that which has meaning. (Victor Papanek)
18. The design philosophy informing the concept of “The Humane Village” recognizes what individuals want in their daily lives; what they want to see and feel in their neighbourhoods, their homes and their workplaces; a sense of calm, permanence and timeless beauty, served but not dominated by the marvels of technology. Returning life to the pleasures of privacy and friendship in settings made to human scale. Building with foresight and restoring with care. Looking first to the needs and wishes of people. (Ben Park)
19. Design is the process, that turns ideas into products that deligts their users. (Andrew Summers)
20. Design is what you do, not what you’ve done. (Alan Fletcher)
21. Design is giving shape to man’s dream. (Kenji Ekvan)
22. Good design is the solution best adapted to necessity, but wery superior to it. (André Breton)
23. Most think of design in terms of putting lipstick on a gorilla. (Dieter Rams)
24. A designer is an emerging synthesis of artist, inventor, mechanic, objective economist and evolutionary strategist . (Buckminster Fuller)
25. Design is the anti-thesis of accident. (Vernon Barber)
26. Good design is intelligence made visible. (Le Corbusier)

Главным препятствием на пути каких бы то ни было попыток веб-композиции всегда была разноразмерность экранов. Для графического дизайнера, строящего композицию исходя из формата издания, это препятствие кажется непреодолимым. Но его можно обойти, если в буквальном смысле изменить точку зрения. Это позволит выявить несколько закономерностей и даже создать обоснованную композиционную классификацию сайтов.
Исходная идея такова. Экран — это окно. Когда люди смотрят в окно, они обычно вначале направляют взгляд в его середину. Вторая посылка: западные люди читают слева направо и сверху вниз. В результате исходная точка, с которой начинается просмотр сайта, назовем ее оптический центр, смещается от геометрического центра влево и вверх.
В результате некоторых наблюдений я пришел к выводу, что оптический центр делит экран по горизонтали в отношении примерно 5:11, а по вертикали – в отношении 1:4. Я, разумеется, не претендую, что у всех людей дело обстоит именно так; более того, это очень приблизительный подход, потому что он не учитывает разницу в пропорциях экранов. Более точным было бы геометрическое определение этой точки, которое бы увязывало ширину и высоту экрана (рис. 1).

Рис. 1. Из центра экрана (1) по левой диагонали отложить вверх четверть ее длины (2); затем провести горизонтальную линию вправо до края экрана (3) и линию к верхней границе экрана под углом 45 к горизонтали (4). Из вершины этой второй линии провести линию в левый нижний угол экрана (5). Искомая точка (6) будет лежать на пересечении этой линии с проведенной ранее горизонталью.
А теперь начинается самое интересное. Сместим диагонали экрана так, чтобы они пересекались в новом центре (это прием из книжной композиции). Возьмем прямоугольник с диагоналями, равными половине проведенных. Эта область экрана будет самой заметной. Из ее правого верхнего угла проведем линии влево и вниз — образуются две новых области, соответственно вверху и справа. Мы получили одну из типичных веб-композиций: посередине слева область основного контента, вверху главное меню, справа контекстная колонка (рис. 2) — именно так устроено, например, большинство блогов (рис. 3).

Рис. 2.

Рис. 3.
Композицию можно усложнить, определив оптические центры для каждой из образованных областей и затем повторив деление еще раз. Такая композиция может подойти для сайтов со сложной структурой.
Другой вариант композиции мы получим, если сразу разделим экран из оптического центра, таким образом позволяя глазу иметь лучший обзор всего сайта вместо того, чтобы сразу фокусироваться на контенте. В этом случае мы видим сайт с верхним блоком (заголовок, баннер, меню…), главным меню слева, блоком контента справа и, если поделить оставшееся пространство еще раз, с дополнительной колонкой справа. Думаю, эта композиция является одной из самых распространенных (рис. 4-5).

Рис. 4.

Рис. 5.
Полученные области можно поделить дальше и получить что-нибудь ну очень сложносочиненное (рис. 6). Потом. Если захочешь 🙂

Рис. 6

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

Не будет большим преувеличением сказать, что современный дизайн обязан своим рождением беспредметному искусству, возникшему в России начала XX века. Его создали Кандинский, Малевич, Татлин, Лисицкий и еще несколько художников. Но одно из самых популярных изобретений графического дизайна принадлежит не им, а голландцу Питу Мондриану, который путём сложных духовно-теоретических исканий пришёл к выводу, что в его искусстве нет места кривым линиям и диагоналям и создал несколько полотен с разноцветными прямоугольниками, разделенными жирными линиями. (На самом деле правильнее было бы сказать — несколько полотен, заполненных линиями, между которыми иногда возникают разноцветные прямоугольники.)
Находка Мондриана нашла поддержку в исторической зависимости печатного набора от прямоугольника; дизайн по-мондриановски оказался чрезвычайно удобным для полиграфии. Однако с наступлением компьютерной эры прямоугольник перестал играть какую-либо заметную роль в технологиях печатного дела, а «The End of Print» Дэвида Карсона довершил дело на концептуальном уровне, отправив мондриановский дизайн назад в область чистой эстетики. Но тут случилось непредвиденное — с возникновением Интернета ситуация вернулась на круги своя. Сегодняшняя модель визуального представления веб-страницы подразумевает отображение структуры документа посредством прямоугольных блоков. И вот мы наблюдаем новое победное шествие Мондриана — на сей раз по экранам наших компьютеров.

Картина Мондриана «Composition with Large Blue Plane, Red, Black, Yellow, and Gray». 1921. Oil on canvas, 60.5 x 50 cm, Dallas Museum of Art.

У Мондриана интересно то, что, во-первых, линии доминируют над прямоугольниками, и во-вторых, прямоугольников всегда неопределённо много и их взаимоотношения довольно сложны. Это структуры, где в принципе может быть любое число элементов. Поэтому дизайн по-мондриановски можно рассматривать как способ организации меняющегося потока элементов. Что как нельзя более подходит для веб-страниц, предполагающих возможность интерактивного взаимодействия с пользователем и соответственно меняющееся содержание. Стоит заметить, что такой дизайн не создаёт законченного целого (так как число элементов каждого отдельного «кадра» потока неизвестно).
Для организации известного пространства, где размещено известное количество элементов, классический дизайн использовал пропорции, соотнося элементы и целое. В ситуации неопределенного количества элементов на пространстве неопределенной формы это в принципе невозможно (я просто перевожу на абстрактный язык ситуацию, известную каждому веб-дизайнеру — мы не знаем, на каком устройстве пользователь просматривает наш сайт). В каком-то смысле в веб-дизайне предмет лишился формы, а следовательно, исчез как предмет.
Так мы возвращаемся к беспредметному искусству. Парфенон больше невозможен, потому что у него должно быть столько колонн, сколько вам сегодня нравится; Венера Милосская — чудовище с неопределённым количеством рук. Дадаизм, сюрреализм, поп-арт и всё последующее — всего лишь следствия ситуации, возникшей с рождением беспредметного искусства.
И всё-таки картины Мондриана — это красиво. Несмотря на отсутствие предмета, неопределённый формат и неизвестное содержимое. Осталось научиться мыслить потоками.

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

Собственно, решается она только естественным путём, поэтому смысловая избыточность является скорее признаком хорошего дизайна, чем его основанием. Попытки же «навернуть» дизайн ведут в противоположную сторону, к появлению откровенных излишеств. К счастью, такие попытки наталкиваются на здоровый инстинкт нашего современника, помогающий благополучно не замечать бессмысленных нагромождений привычной эклектики (подобные работы напоминают «Город бессмертных» Борхеса: «Куда ни глянь, коридоры, тупики, окна, до которых не дотянуться, роскошные двери, ведущие в крошечную каморку…»).

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

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

Другой пример — мода на двойные двоеточия в веб-дизайне. Возникнув из естественной и повсеместной игры с клавиатурными символами как элементами графики, они радовали наш глаз примерно с 1998 года. К моменту наступления y2k (вот ещё один пример игры) вроде бы от двоеточий устали, и какое-то время казалось, что мода на них прошла. Но вот недавно довелось увидеть в Рунете целую фантасмагорию двоеточий, в крутизне которой бледнели не только названия собственно разделов сайта, но и все когда-либо существовавшие зарубежные аналоги. Может быть, лучше поставить точку?

Хотя лучше, наверное, многоточие… ведь, как известно, теория суха, а дизайн кудрявый вечно зеленеет.