Теоретическая часть



страница5/6
Дата04.05.2018
Размер0.98 Mb.
ТипРуководство
1   2   3   4   5   6

Клонирование

Адрес Музея клонов: www.artlebedev.ru/portfolio/museum (http://www.artlebedev.ru/portfolio/museum/)

Практически все веб-каталоги похожи на «Яху», создатели которого придумали самый удобный способ подачи рубрикатора: две колонки со ссылками на основные подрубрики. Остальные каталоги похожи на «Яху» не потому, что являются клонами, а потому, что они выглядят как каталоги. А «Яху» просто был первым.

Существует клонирование. Это когда просто берут чужую структуру, картинки и (иногда) меню.

С другой стороны, существует формат. Это набор правил, свойств и функций, присущих (в нашем случае — визуально) какому-либо виду.
Например, мы всегда отличим газету от других печатных изданий. Ее типичные признаки — особая бумага, черно-белая печать, крупный логотип на первой полосе, верстка колонками, разные размеры заголовков, мелкий наборный шрифт, отсутствие скрепок и т. д. Нельзя утверждать, что «Известия» — это клон «Правды».

http://img.artlebedev.ru/kovodstvo/sections/25/jeans.jpg

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



Нужно не бояться повторить чью-то схему, а уметь придумать каждый раз что-то новое.

Советы

Кнопку размером 88×31 придумали в компании «Netscape». Первая картинка в этом формате выглядела так:



http://img.artlebedev.ru/kovodstvo/sections/42/nnow.gif

Потом такую же сделал «Microsoft» для рекламы «Explorer». Потом еще кто-то, потом еще. “…Так в мире появился один из самых идиотских форматов. Ни два ни полтора…”

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

В качестве примера можно привести порядок расположения кнопок «Ok» и «Cancel» в различных ОС.

Если в диалоговых окнах ОС Windows крайней справа расположена кнопка «Cancel» (отменяющая действие), то в MacOS это наоборот кнопка «Оk» (подтверждающая действие).

При размещении кнопок «Вперед» и «Назад» или «Ok» и «Cancel» в формах» необходимо исходить из правила, в разных местах интерфейса это расположение должно быть одинаковым.

Использование логотипов на сайтах

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

Типографский термин логотип, появившийся в начале XIX века, сперва был синонимом лигатуры, то есть объединенных вместе двух или трех знаков.



http://img.artlebedev.ru/kovodstvo/sections/124/logotypes.gif

Ко второй половине века логотипом называли любое текстовое клише, например, название газеты, которое не было необходимости набирать каждый раз заново.



http://img.artlebedev.ru/kovodstvo/sections/124/tpg.jpg

А в XX веке логотип — это все что угодно: шрифтовое начертание, знак, а также их комбинация.



Создание логотипа

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

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

Правило: не нужно превращать подпись на фотографии в рекламу.


Снимок, подписанный жадным фотографом.




Размер текста не важен — надпись, закрывающая часть изображения, не имеет права на существование.



Ничто не портит фотографию сильнее, чем добавлением рамки и наложением красивого шрифта.


Подпись должна быть видна только тогда, когда мы ее осознанно ищем.

Заставки на сайтах

На некоторых сайтах можно встретить первую страницу, которая не посвящена анонсам свежих материалов или перечню рубрик, а просто содержит красивую (или некрасивую) картинку.



Правило: если нет стопроцентной уверенности в необходимости заставки, и есть сомнения в том, что она произведет должное впечатление на посетителя, заставку делать не надо.

Существуют страницы-заставки, выполняющие роль входной двери.



http://img.artlebedev.ru/kovodstvo/sections/46/tema-rrr.jpg
Впервые в рунете такая специальная заставка была применена 16 февраля 1996 года на сайте
Н.Ж.М.Д. (http://www.tema.ru/rrr/).

Ужасная манера — в качестве заставки вешать скриншот с основной страницы сайта. Это особенно раздражает тем, что посетитель невольно вчитывается в названия разделов, выбирает понравившийся, тыкает в него — и оказывается на странице, где еще раз нарисована вся навигация.



Заставку надо делать так, чтобы вход был очевиден.

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

Основная функция заставки (кроме информирования или создания настроения) — служить входом на сайт. Все элементы заставочной страницы должны сопровождаться текстовыми ссылками на главную страницу (например, надписью «вход»).

Какие бывают заставки:

I. Простая графическая заставка, коллаж, фотография, анимация, являющаяся ссылкой на главную страницу с содержанием.

II. Флеш-заставка. Обычный презентационный ролик. Часто размещается временно — чтобы заставить всех посмотреть информацию, скажем, о скидках. Месяц повисит — и исчезнет.

III. Простая страница, на которой расположена информация о технических ограничениях (например, «Сайт работает только в первом «Эксплорере» при разрешении 100×100») или предупреждение для несовершеннолетних.

IV. Любой набор информации — ссылки на свежие новости, анонсы продуктов, адреса.

Неправильно устраивать двери из кодировок. Во-первых, большинство современных пользователей уже не имеет представления о том, чем КОИ отличается от ДОСа. Во-вторых, нельзя заставлять человека совершать сложный выбор еще до того, как он чем-то заинтересовался на сайте. Ему проще уйти по кнопке «назад», чем задуматься о неочевидном выборе.

Определение местонахождения на сайте

URL означает uniform resource locator. Впервые эта аббревиатура появилась в рабочем документе автора веба Тима Бернерса-Ли


21 марта 1994 года. Изначально Бернерс-Ли использовал понятие UDI — uniform document identifier.

Правило: посетитель всегда должен получить осмысленное и предсказуемое содержимое, если он стер часть адреса до ближайшей косой черты.

Для начала необходимо решить, на каком языке будут даны названия файлов. Лучше всего использовать английский. В редких случаях уместен русский (точнее, волапюк, транслитерация или клер) — например, при написании нецензурных слов, при употреблении русских слов, ставших частью английского. Крайне нежелательно смешивать языки, например: http://sait.ru/staff/sekretarsha/new/novichki.html

Данный параграф имеет в интернете адрес http://www.artlebedev.ru/kovodstvo/sections/48/. Каждый читатель может навигироваться по сайту, стирая справа части адреса до ближайшей косой черты. Если стереть 48, попадаешь в оглавление параграфов, и так далее.

Если бы адрес был чем-нибудь типа www.artlebedev.ru/kovodstvo/?q= %E8 %E4 %E8 %EE %F2 %F1 %EA %E8 %E9+ %E7 %E0%EF %F0 %EE %F1+ %ED %E0+ %F1 %E0 %E9 %F2&num=10, читатель совершенно терял бы ориентацию. К сожалению, многие сайтостроители не следят за чистотой адресов, за что посетители им платят сполна: не запоминают ни одной внутренней страницы.



Дублирующая навигация

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

Пример — сайт журнала «Итоги»:



http://img.artlebedev.ru/kovodstvo/sections/49/itogi.gif

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



На сайте все должно быть прекрасно — и адрес, и дублирующая навигация.

В качестве примера — сайт Бориса Акунина:



http://img.artlebedev.ru/kovodstvo/sections/49/akunin.gif

Если читатель не желает нажать кнопку «назад», ему будет удобно выбрать пункт дублирующей навигации. А адресная строка по-прежнему будет демонстрировать стройность и предсказуемость структуры сайта.



Статусная строка

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

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

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

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

Сайты и звуки

В свое время каталог сайтов «АУ!» (позднее «Атрус») встречал всех посетителей отвратительным женским воплем: «А-а-а-а-а-а-у-у-у-у-у!». С тех пор автор туда не ходит, хотя кричать перестали.



Правило: в интернете нельзя использовать звуки и музыку в декоративных целях.

Многие сайты сегодня используют фоновую музыку или проигрывают звуковую заставку при входе. Этого делать нельзя по нескольким причинам:



  • посетитель не готов к тому, что сайт будет звучать;

  • у посетителя играет своя музыка;

  • фоновую музыку практически никогда нельзя выключить;

  • звук с сайта редко бывает хорошего качества;

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

  • смысловой и функциональной нагрузки у музыки на сайте — ноль целых, ноль десятых;

  • веб — среда текстовой и визуальной информации. Звук обитает во флеш-заставках (где действие связано со звучанием) или в аудиоформатах (которые прослушиваются обычно с помощью специализированных программ).

Звук имеет право на существование, если:

  • посетителю предоставлена возможность самому указать, хочет он послушать сайт или нет;

  • он несет смысловую нагрузку (что случается крайне редко).

Использование симметрии на сайтах

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



Симметрия помогает дизайнеру все испортить

Пример первый Расположение слов по схеме «1–3–2» вместо «1–2–3» встречается повсеместно — на улицах любого города, в любой газете с рекламными объявлениями.

http://img.artlebedev.ru/kovodstvo/sections/85/vaka.jpg

Такое расположение текста в угоду симметрии можно увидеть практически на любом кинотеатре, например: «Кино Полярный театр». Имеется в виду кинотеатр «Полярный», но дизайнеру проще уйти в дворники, чем поставить слова по порядку.



http://img.artlebedev.ru/kovodstvo/sections/85/sumki.jpg

«Стоматологические УЛЫБКА услуги» и пр.



Вывод: симметрия — мощный прием, который нельзя применять только «для аккуратности» или «для красоты».

Пример второй Поиск закономерностей, совпадений, общих элементов — один из основных инструментов дизайнера. Но только не в ущерб смыслу.

http://img.artlebedev.ru/kovodstvo/sections/85/tsbp.jpg

Это означает «Центральное бюро путешествий». Даже бустрофедон (одна строка — слева направо, следующая — справа налево) легче читать. Здесь же зритель должен спуститься сверху вниз, потом подняться наверх, пройти слева направо, а потом снова отправиться вниз. А некоторые будут читать парами: ЦП, ЕУ, НТ, — пока не поймут, что смысла не прибавляется.

Результаты тестирования показали, что зритель тратит направильное прочитывание этой вывески вслух от семи до тридцати секунд. При этом первая реакция — молчание.

Законы дизайна

В дизайне законов нет. Не было и не будет.

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



http://img.artlebedev.ru/kovodstvo/sections/99/l\'amore.jpg

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

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

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



Использование разнообразия шрифтов

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

От знания таких «законов» страдают дизайнеры и заказчики. Страдают потому, что используют ограничения, которые пригодны в определенных ситуациях, но ни в коем случае не являются универсальными.

Краткий перечень «законов», которые постоянно приходится слышать как от дизайнеров, так и от заказчиков:



  • шрифты с засечками читаются легче, чем гротески (шрифты без засечек);

  • цветовая гамма должна состоять из одного-двух цветов;

  • существуют несочетаемые цвета;

  • черный цвет имеет негативный (похоронный, мрачный) подтекст;

  • белый текст на черном фоне читается плохо (и вообще выворотка плохо читается);

  • нельзя использовать стандартные фильтры программы «Фото Шоп»;

  • на полосе (коробке, плакате) не должно быть больше семи значимых объектов, так как человек не в состоянии одновременно держать в голове более семи чего-либо;

  • логотип на полосе должен располагаться справа внизу (слева вверху и т. д.);

  • логотип должен быть простой и лаконичной формы;

  • дизайн должен быть минималистичным, а текст — коротким;

  • надпись на плакате, упаковке, в рекламе должна быть такой, чтобы человек успел ее прочесть за одну (две, три) секунды;

  • нельзя использовать изображения рукопожатия и земного шара, цвета российского флага;

  • иллюстрации для печати должны иметь разрешение 300 точек на дюйм, а картинки из интернета вообще нельзя печатать в журнале;

  • фреймы на сайте — это плохо;

  • горизонтальная прокрутка окна недопустима;

  • женщины, дети и т. д. являются положительными образами.

Простота дизайна

Люди боятся показаться недостаточно умными.


Люди, считающие себя творческими, — особенно. Авторы учебников — вдвойне. Дизайнеры — втройне.

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



Информационные и презентационные сайты

Информационный дизайн (www.ya.ru)

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



http://img.artlebedev.ru/kovodstvo/sections/56/yaru-2.jpg

  • Живет на всю ширину экрана.

  • Грузится за секунды и работает везде.

  • Идеально подходит для ежедневного использования.

  • Не требует времени на изучение — все сразу понятно.

Презентационный дизайн (mtelecom.ru)

Чтобы выжить, презентационным сайтам придется либо брать на вооружение приемы информационного дизайна, либо предоставлять альтернативный (быстрый) доступ к информации.



http://img.artlebedev.ru/kovodstvo/sections/56/mtelecom.jpg

  • Ограничен в ширине, чтобы поместиться в окне при минимальном разрешении (фиксированный дизайн на ширину больше 620 пикселей — ламерство и неуважение по отношению к пользователю).

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

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

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

Экранная типографика

Все тексты должны обязательно «обогащаться». Ни один текст не должен появиться на публике в исходном сыром виде.

Краткий справочник

§ § параграф

© © знак охраны авторского права (copyright)

® ® символ зарегистрированного товарного знака

™ ™ символ товарного знака

° ° знак градуса

« « левая кавычка (левая ёлочка)

» » правая кавычка (правая ёлочка)

’ ’ апостроф

„ „ открывающая лапка

“ “ закрывающая лапка

“ “ открывающая английская лапка

” ” закрывающая английская лапка

• • жирная точка

– – короткое тире

− − минус

± ± плюс-минус

— — тире

№ № знак номера

Кавычки. В русских текстах используются «елочки» или „лапки“:

« ... »

„ ... “

Во всех текстах на английском:



“ ... ”

‘ ... ’

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



" . . . "

Шрифтовики короткое тире обычно делают шириной с букву N (поэтому на английском оно называется en dash). На вебе этот символ набирают с помощью кодов –, – или –.



Неправильно

Правильно

Коляныча - за пивом послать!

Коляныча — за пивом послать!

Тире не надо путать с дефисом — оно обычно в два-три раза длиннее.

Традиционно в англо-американской типографике диапазоны чисел обозначаются коротким тире (иногда его еще называют средним).



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

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



Неправильно

Правильно

Коляныч пошел за
пивом

Коляныч пошел
за пивом

Крикну
— а в ответ тишина

Крикну —
а в ответ тишина



Поделитесь с Вашими друзьями:
1   2   3   4   5   6


База данных защищена авторским правом ©vossta.ru 2019
обратиться к администрации

    Главная страница