важная информация (апрель две тысячи пятого)

смотри соответствующий текст страницы «работы».

веб-дизайн

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

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

сайт российского центра «практика»

www.praktika.nnov.ru

обновление 26.02.04

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

задача

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

решение

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

таким образом, моя работа включала следующее:

• информационная архитектура всего сайта (структура представления информации, смысловая группировка рубрик, навигация);
• дизайн всего сайта, кроме форума (впрочем и форум на базе phpbb выбирал я);
• написание кода.

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

результат

можно увидеть по адресу: www.praktika.nnov.ru.

итак, что же мы видим:

• сайт имеет простой, не отягощенный излишней графической информацией, дизайн. для его создания применены каскадные листы стилей (css). применение таблиц для компоновки элементов полностью исключено.
• новая информационная структура сайта позволяет пользователям находить интересующую их информацию быстро и с минимальным количеством кликов.
• благодаря использованию css и чистого, сверстанного почти вручную кода, объем страниц сокращен в 1,5-5 раз по сравнению со старым дизайном! соответственно страницы загружаются в 1,5-5 раз быстрее.
• сайт прост в редактировании и поддержке. например, для смены фонового цвета всех страниц всего сайта нужно поменять всего 6 (!) символов в одном файле.
• структура сайта отделена от дизайна (презентации). иначе говоря, html теги выполняют только свою прямую функцию, функцию структуры. тогда как весь дизайн, композиция элементов на странице, цветовая схема и типографика хранятся в отдельном css файле. это позволит заказчику в будущем произвести полный ре-дизайн сайта с минимальными финансовыми затратами.
• сайт не нуждается в отдельной странице «для печати». все лишние элементы при печати просто убираются. экономится время дизайнера, которому не нужно делать дополнительные страницы «для печати». экономится время пользователя, которому не нужно ждать загрузки этих дополнительных страниц. экономится место на сервере. шрифты без засечек, предназначенные для дисплеев, при печати заменяются на шрифты с засечками, более удобные при чтении с листа. и все это делается через css.

короче говоря, экономия глобальная, удобств масса.

в заключение отмечу, что сайт российского центра «практика» является одним из первых коммерческих сайтов в рунете, построенном без использования таблиц. вне рунета эта практика получила уже довольно широкое распространение. а вот хотя бы и 2 имени, не нуждающихся в представлении: espn.com и quark inc.

[я буду благодарен каждому, кто сообщит о других коммерческих веб-проектах в рунете, созданных до марта 2003 года только на основе html и css без использования таблиц.]

сайт художника кукол анны ха

ru.id-as.com/works/annaha/

задача

в далеком 2000 году задача была поставлена самому себе и была наивной и альтруистической. хотелось показать возможности программы macromedia flash, которая, как казалось на тот момент, открывает новые, необъятные горизонты в веб-дизайне. flash тогда хотелось вставлять везде и в любых количествах.

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

дело было сделано, но отнюдь не доброе.

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

решение

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

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

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

ну вот… оказывается, я ошибался.

результат

то, что получилось в результате, можно увидеть здесь и только здесь.

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

• просмотреть сайт можно, только скачав из интернета соответстующий плагин с англоязычного сайта (в новых версиях windows плагин вшит в систему по умолчанию);
• в силу того, что весь интерфейс построен на flash'е, размер файлов достаточно велик и пользователю приходится частенько ждать полной загрузки flash-ролика;
• внутри сайта, перестает действовать кнопка браузера «назад», пользователь также лишается возможности добавлять определенную страницу сайта в избранное, текст, используемый на сайте, нельзя выделить и скопировать.

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

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

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

просто делать это надо только там, где это действительно необходимо. например, на развлекательных или детских сайтах. или в баннерной рекламе. или в интернет-играх.

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

в заключение несколько примеров именно таких высокопрофессиональных работ: www.pixel-imp.com, www.rawpixels.com, www.hotdesign.com, www.teknoel.com.