То ли через «Твиттер», то ли через RSS… В общем, попалась мне как-то интересная статейка на одном из дизайнерских днявок — тенденции в дизайне сайтов, сопровождающих приложения для iPhone. Суть статьи сводилась к тому, какие элементы по идее должны быть присущи хорошему сайту, созданному для хорошей программы. Одностраничный формат, изображение «айФона», анимированные скриншоты, цена на видном месте, логотип App Store… Почитайте — забавное чтиво, написано со знанием дела.

Чем меня эта статейка зацепила, так это тем, что наглядно показывает — простота запросто может сочетаться с информативностью и эстетичностью. И приведенные примеры (хоть они и не во всем соответствуют выведенным правилам) вполне добротно сделаны — взять хотя бы сайты программ Tea Round, Put Things Off, Classics, LittleSnapper. Такие ресурсы еще задолго до установки и запуска соответствующей программы создают впечатление от продукта. И чем проще и приятнее смотрится сайт, тем быстрее у пользователя сформируется ощущение, что и программа окажется простой и приятной.

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

На автомате

www.fac311.com

Возможно, это временное явление, и вскоре здесь будет заметно больше интерактивности. Но идея полностью автоматического слайд-шоу, демонстрирующего лучшие фотоработы агентства Factory311, — выше всяких похвал. Что может быть лучше и приятнее — ввел адрес, нажал [Enter] и получай удовольствие. Понравилось — щелкни на e-mail-ссылке и черкни пару строк благодарности за просмотр :).

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

+   полностью автоматическая работа галереи

+   полноэкранный режим

Линия времени

www.seohiroshi.com

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

Щелкнув на понравившейся картинке, вы увеличите ее до высоты окна браузера. Щелкнув повторно, развернете на все окно — с автоматической прокруткой, по мере движения курсора.

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

+   занятная концепция временной шкалы

+   удачное использование графических эффектов

+   полноэкранный режим

–   интерфейс на английском, контент на японском

Кому Сметанки?

www.smetana.net

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

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

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

+   большие фотографии

+   сайт построен вокруг портфолио

+   простая понятная структура

+   поддержка средств навигации браузера

–   нет навигации с клавиатуры

Из Копена и Гагена

www.werkstette.dk

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

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

Нью-Йорк из поднебесья

www.pixelcase.com.au

«Картам Google» однозначно не хватает таких панорамных видов. Потрясающее зрелище — круговые панорамы, сделанные с воздушного шара на высоте нескольких сот метров.

Впрочем, «гугло-карты» здесь используются — для вращения камеры и для перемещения от одной точки съемки к другой. Правда, панорамы удобнее листать при помощи ленты миниатюр, расположенной снизу на странице. А управлять камерой комфортно мышью или клавиатурой, включая зумирование (скроллером или клавишами [Ctrl] и [Shift]).

+   очень удобное управление

+   полноэкранный режим

+   просмотр текущего местоположения камеры на карте Google

Все по пачкам

www.cristof-echard.fr

Французский фотограф Кристоф Эшар решил немного поиграть с 3D, попутно разбив свое портфолио на тематические пачки. Чем точнее вы выбираете категорию, тем больше лишних снимков в буквальном смысле улетает за пределы окна браузера.

Очень живо и забавно реализованы передвижения фотографий-карточек при перелистывании галерей изображений — «листалку» из миниатюр снимков так и хочется прокрутить туда и обратно несколько раз, наблюдая, как карточки множатся то с одной, то с другой стороны :). Фотографии не ахти какого размера, но их можно развернуть до размеров окна браузера. При этом интерфейс сайта по максимуму сворачивается, чтобы не мешать. Сам же сайт можно развернуть и вовсе на весь экран.

Единственная заковырка (которую, впрочем, нельзя отнести к недостаткам) состоит в том, что сайт Эшара исключительно франкоязычный. Так что если «ву не парле па франсе», придется щелкать мышью наугад :).

+   очень живая, легкая анимация

+   оригинально сделана полоса прокрутки галерей

Вы махайте, махайте!

www.davidlindseywade.com

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

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

+   поддержка жестов, считываемых через веб-камеру

+   вполне корректное распознавание движений

–   довольно медленный интерфейс

Стопроцентные фрики

Битвы буболов

www.bubole.pl

Арена для онлайновых боев буболов обыграна первоклассно. Здесь не столько сама игра, как ее интерфейс радует нестандартным подходом. Польский «Хипопотам» жжот!

Иконостас без конца и края

www.cubic.com.br

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

Глюкомузыка

www.glitchscape.com

Экспериментальный синтезатор, звук в котором определяют фигуры, которые вы сами рисуете. Положение — нота. Ширина — интервал. Высота — громкость.

По сайту на глаз

web4t.oneforyouoneforme.ca

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

Заходите, открыто!

www.nerdfilms.tv

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