Awebdesign's Blog

Парадокс выбора

(Перевод Виктории Шидловской статьи Easier Is Better Than Better автора Paul Scrivens из журнала http://www.smashingmagazine.com)

В книге «Парадокс выбора» Барри Шварц (The Paradox of Choice, Barry Schwartz) приходит к интересному заключению:

«Люди делают свой выбор, основываясь не на важности, а на простоте выбора».

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

Если говорить о дизайне, который мы предлагаем клиентам, то мы полагаем, что клиент будет в состоянии принимать осознанные решения и самостоятельно переходить к следующему шагу. Но мы должны понимать, что он итак принимает в день более четырехсот решений гораздо более важных для его жизни, чем наш дизайн.
Вы думаете, люди понимают, что в вождении машины с механической коробкой передач есть свои преимущества? Думаете, им есть до этого дело? С коробкой-автомат гораздо проще ездить, так зачем заморачиваться? (Прим. перев.: в нашей стране все наоборот настолько привыкли к механике, что с трудом переходят на автомат, хотя в условиях пробок автомат намного удобнее!) Как часто мы состоим в отношениях, которые нам не нравятся, просто потому, что проще все оставить как есть, чем вступать в открытую конфронтацию с человеком! (Прим. перев.: Это больше касается мужчин :))

В США есть сеть забегаловок In ‘N Out Burger. Я слышал множество историй об их невероятно сказочных бургерах и картошке. Но настоящий крючок, на который они цепляют своих клиентов — невероятно ограниченное меню. Вы заказываете Двойной, чизбургер или гамбургер. К ним можете заказать картошку, коктейль или соду. Вот и весь ваш выбор (если только вы не знаете какое-то секретное меню). Я там один раз побывал, попробовал еду, она хорошая, но не особо отличается от той, что в других закусочных. Привлекательность этого места в ограниченности выбора. Вам легче сделать заказ, когда не нужно выбирать, какой именно тип куриного бургера в данный момент вам хочется съесть.

Есть замечательный онлайн-магазин Woot.com. Вместо того, чтобы просматривать тысячи наименований товаров, вам почти ничего не надо делать. Магазин предлагает по одной вещи в день. Если вам нравится, то вы покупаете, если нет — заходите на сайт на следующий день и смотрите, что новенького. Проект очень успешный, хотя логика подсказывает обратное. Но если вдуматься, какая разница владельцу магазина — продать по одному из 100 наименований в день или 100 штук одного и того же? Woot сводит ваш выбор к уровню да-нет.

Или представьте, насколько была бы хуже игра Angry Birds, если бы вам нужно было выбирать птичек перед каждым уровнем? Не имея выбора мы концентрируемся на том как использовать тех, что нам дали, что делает игру гораздо более интересной.

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

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

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

Пользовательские установки и выбор

В недавнем прошлом Джаред Спул (Jared Spool) провел исследование и выяснил, что только 5% пользователей поменяли свои настройки в  MS Word. Как компьютерного ботаника меня это исследование удивило, потому что я люблю залезать внутрь приложения и смотреть, что я могу подогнать под себя. Оказалось, что подавляющее большинство людей совершенно не интересуются настройками, главное, чтобы программа работала.

«Мы провели небольшой эсперимент. Мы попросили огромное количество людей выслать нам файл с установками Microsoft Word. На тот момент все настройки хранились в одном файле с названием типа  config.ini, так что мы попросили их найти этот файл на жестком диске и выслать нам. Откликнулось несколько сотен людей.

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

В итоге результаты нас удивили. Менее пяти процентов опрошенных внесли хоть какие-то изменения. Остальные оставили все, как есть».

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

Пользователи считают, что настройки, выставленные по умолчанию, оптимальны. А если нет — ваш продукт провален.

Парадокс выбора

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

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

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

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

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

Примечание переводчика: То же самое двумя словами. Еще 10 лет назад мне объяснили, что клиенту нужно предоставлять 3-5 вариантов макета. Даже если вы знаете, какой из них оптимальный, подбросьте еще пару, чтобы создать у клиента иллюзию выбора. В то же самое время, предоставление на выбор 10 вариаций одного и того же, задержит процесс выбора на неделю или две.

Реклама

Лаборатория Google изнутри. Интервью с UX-дизайнером Google Марцином Вичари

(Перевод Виктории Шидловской интервью Дэна Реддинга для журнала Smashing Magazine)

Маленькое предисловие. Должность Марцина Вичари звучит как Senior User Experience Designer at Google. Люди вроде Марцина исследуют эмоциональную, тактильную, ментальную и любую другую реакцию человека на общение с машинами. В данном случае — при общении человека и Веба. И на основе результатов создают пользовательские интерфейсы, но не только. К примеру, вы знаете, что если набрать в Google «гед кпть спиртое посл 11«, то Google напишет вам «Возможно, вы имели в виду: где купить спиртное после 11»? То есть, исследования компании помогают оптимизировать результаты поиска. То же касается всех остальных приложений Google. И Марцин Вичари — один из тех потрясающих, гениальных творческих людей, которые делают нашу жизнь лучше.

Марцин Вичари - старший UX-дизайнер Google - Marcin Wichari

Марцин Вичари (Marcin Wichary) – старший дизайнер в Google по пользовательским интерфейсам, но его многочисленные роли и области влияния в корпорации четко не определены. Отпечатки его пальцев на огромном количестве программных продуктов Google, от поиска до Google Chrome. Популярность пришла к нему после создания Google Pac-Man Doodle, которого он воссоздал вместе с напарником по Google – Райаном Гермиком (Ryan Germick). Как сказал Райан: «Марцин – гений. Он UX-дизайнер, но также один из лучших программистов на планете».

Марцин дал интервью Дэну Реддингу (Dan Redding) и журналу Smashing Magazine о своей профессиональной карьере, интересе к фотографии и любопытном изобретении по имени Crushinator.

Вопрос: Привет, Марцин! Я понимаю, что ты вовлечен во множество процессов и проектов Google. Ты можешь как-то суммировать свои профессиональные роли в компании?

Марцин Вичари: Конечно. В Google я уже пять с половиной лет, и я всегда был странной смесью UX-дизайнера и разработчика. Думаю, со временем мне становится более комфортно в этой роли. Я начинал работать в команде Internal Tools, мы занимались интернетом, вернее, опытом общения с интернетом. И некоторые инструменты, которые разрабатывают гуглеры, невозможно «показать» людям со стороны. В смысле, ты не можешь прийти домой и сказать: «Мама, посмотри, что я сделал на этой неделе!» Там я проработал где-то 2,5 года, а потом перешел в глобальную команду, которая работает над продуктами, которыми люди могут реально пользоваться. На поиске я сидел тоже где-то 2,5 года.

Вопрос: Ты также работал над Doodles – правильно? (Doodle переводится буквально, как каракули, черточки. Google постоянно использует doodles для освещения каких-то исторических событий на главной странице своего сайта, причем делает это в рамках своего логотипа.)

Марцин: Да! А в этом году я присоединился к команде Chrome. Можно сказать, это третья большая перемена моей работы в Google. Google – супер, потому что позволяет заниматься несколькими вещами сразу. Часть меня занята каким-то проектом, а другая — работает с командой Doodle в качестве… не знаю даже, как это назвать – технического консультанта и соавтора! (Смеется).


Видео, изображающее Google doodle Марты Грэхем в действии. Художник — Ryan Woodward. Как это сделано можно посмотреть здесь. Лучше всего скопировать код скрипта, осуществляющего HTML5-анимацию, с исходного кода страницы.

Вопрос: Каково было твое участие в проекте Martha Graham doodle?

(Марта Грэхем — американская танцовщица, хореограф, почётный доктор искусствоведения Гарвардского университета. Для того, чтобы понять, о чем речь – смотрите HTML5-мультипликацию выше. Это мультипликация стояла на главной странице Google, нарисованная Марта Грэхем изображает его логотип в танце – прим. перев.).

Марцин: Я разработал технику анимации. Необходимые рисунки были сделаны кем-то еще. Существует несколько технологий, которые можно использовать, чтобы поставить анимированный логотип Google на его главную страницу. Например, есть анимированный GIF. Или видео YouTube. Какие-то другие техники. Но у всех свои минусы и плюсы.

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

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

Как дизайнер, в большинстве случаев я невидим. Я могу помочь в разработке технологии, но технологии невидимы совершенно. Многим людям очень понравился doodle с Мартой Грэхем, и я испытывал тихое удовлетворение от того, что помог реализовать его.

"Я редко фотографирую животных, но если уж взялся, то получается забавно". Фото Марцина Вичари.

Вопрос: Что такое Crushinator?

Марцин (смеется): Ok, это просто-напросто название анимационной техники, которую я только что описал. Я пытаюсь убедить команду Doodle создать блог, на котором художники и технологи могли бы обсуждать проблемы, вроде этой. Самая замечательная вещь в Вебе, это то, что ты можешь кликнуть правой кнопкой мыши и «Посмотреть исходный код» или «Просмотреть код элемента» и попытаться вычислить, как это сделано. Вообще-то я в качестве примера выставил пост с doodle Марты Грэхем, чтобы кто-то с инженерным складом ума попытался вычислить, как он работает. Никто не знал, что технология называлась Crushinator, это просто мое дурацкое увлечение «Футурамой».

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

Марцин: Я об этом не думаю в таком ключе, это просто одна из вещей, над которыми я постоянно работаю. Я занимался развитием Веба в течение нескольких лет. Многие веб-разработки, как я уже сказал, появляются в результате скрещивания технологий и любопытства — а что получится. Со временем я открыл для себя, что нет ничего невозможного. Ты уже знаешь, что благодаря HTML5 и всем этим крутым вещам, которые происходят в браузере, что-нибудь обязательно тебе поможет. Так что я постоянно занимаюсь скрещиванием различных технологий, и для меня это не такое уж большое дело. Иногда я просто закидываю результаты своих экспериментов в толпу случайных людей Google, и некоторые результаты становятся популярными, о других же забывают. Поэтому мне кажется, я не тот человек, который может судить о полезности тех или иных моих разработок. Гораздо больше меня интересует, как с помощью этих программок можно продвинуть HTML5 еще дальше на этой неделе? Ну, знаете, стараюсь воодушевлять людей.

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

Марцин: Да, иногда мне тоже так кажется. Люди приходят ко мне и задают вопросы, как будто я разбираюсь в том, что делаю (смеется). И иногда я в самом деле разбираюсь. Иногда я чувствую себя так, как будто мне только что принесли новую видео-игру, и я просто начинаю нажимать на случайные кнопки, что-то происходит на экране, но я не понимаю, почему. Но ощущения клевые, правда же? Потому что HTML5 клевый.

"Эту фотографию меня сделал мой друг. Как драматичное отображение моего типичного дня. "

Вопрос: Есть ли что-то в области юзабилити, что тебя потрясло в последнее время?

Марцин: Есть несколько, но, к сожалению, не могу их обсуждать, это информация для внутреннего пользования.
Хотя… Было кое-что смешное. Недавно вышла статья с исследованиями Принстонского Университета. Вкратце – они утверждают, что использование шрифта Comic Sans сделает ваш материал более легким для запоминания. Чем труднее прочитать твой шрифт, тем больше вероятности, что читатели запомнят, что там написано. И все, кого я знаю, присылали мне ссылку на этот материал. Потому что все знают, как я ненавижу Comic Sans (смеется), страстно. И люди присылают мне эту статью со словами: «Ты был неправ, а мы правы», ну, типа, язык показывают.
Но конечно, статья на самом деле не об этом. Во-первых, вы не должны использовать Comic Sans. Во-вторых, это всего лишь один из аспектов вечной борьбы между удобством (юзабилити) и безопасностью, правильно? Для того, чтобы сделать что-то более безопасным, приходится жертвовать удобством. Как, например, при наборе пароля вы не можете его прочитать. Вместо букв звездочки или точки для того, чтобы другие люди не могли запомнить его. Но это также приводит к тому, что вы можете опечататься. Так что существует огромное количество вещей, где приходится выбирать золотую середину между удобством пользования и безопасностью. Это всегда очень тяжелый выбор, требует большого умственного напряжения. То же самое касается Comic Sans и этой статьи. Ты можешь использовать другой шрифт. Или использовать Comic Sans, чтобы текст лучше запоминался. Круто. Но если таким образом у студентов вырабатывается стойкое отвращение к типографии в общем, или к дизайну, или ко Вселенной (смеется), не думаю, что вы много выиграли. Так что в данный момент я всем показываю язык. Шучу.

Вопрос: Когда проявился твой интерес к компьютерному программированию?

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

Фото, вроде этого, - моя попытка "очеловечить" машины

Вопрос: Как ты думаешь, когда будучи мальчиком ты наблюдал за игроком в тире, ты как бы мониторил опыт пользователя?

Марцин: Может быть! Интересный вопрос. В детстве я обожал «Рассказы о пилоте Пирксе» польского писателя Станислава Лемма. Я был очарован ими, потому что они о космосе, пришельцах, будущем – для ребенка это нечто. Но когда я перечитываю книгу сейчас, то вижу, что она целиком о взаимоотношениях человека с машинами. Машины – это роботы и космический корабль. Но в целом, книга об отношениях человека и компьютера. И вопрос сейчас в том, был ли я заинтересован в данной теме еще будучи ребенком. Или эта книга сформировала меня. Или и то, и другое. То же касается игровых автоматов. Может, я смотрел на людей и пытался понять, что они испытывают. Или меня вдохновляло, сколько веселья и радости могут принести нам технологии, и какое наслаждение пытаться самому их создавать. Сейчас то же самое я испытываю по отношению в HTML5. Кто знает, что будет через 10 лет.

Вопрос: Как ты представляешь себе интернет через 10 лет?

Марцин: Попытки предсказать будущее, как правило, неудачны! Я даже наоборот стараюсь не пытаться его предсказывать, потому что у меня это выходит ужасно.
Но могу поделиться тем, что приводит меня в восторг. Прямо сейчас происходят вещи, которые, на первый взгляд, не могут изменить наше отношение к пользовательским интерфейсам. Например, существует идея, что скоро Retina Display (дисплей-сетчатка, использован в iPhone4) и другие технологии будут настолько совершенны, что смогут передавать несовершенство окружающего мира. Возможно, типографика вовсе не должна быть идеальной – потому что она не идеальна в книгах. Возможно, скоро появится что-то со «сломанным» интерфейсом, «сломанным», чтобы копировать реальный мир, а не «сломанным» потому что мы плохие разработчики.
Особенно эта идея будоражит мое воображение по отношению к типографии. В течение сотен лет мы создавали типографскую культуру, она имеет огромную историю, и мы достигли эры, когда типография стала потрясающей. У нее теперь такие возможности. В ней столько красоты. И тут, приходят 80-е со своими компьютерами и сметают все на своем пути! (Смеется). Теперь у нас есть моноширинные шрифты и «подчеркивание»…
Теперь у нас есть Unicode, а HTML5 и CSS3 позволяют использовать различные шрифты, и, возможно, мало по малу, мы вернем это все назад. Возможно, мы объединим все, что мы так любим в книгах и в компьютерах.

Вопрос: Можешь привести в пример обычный день UX-дизайнера Google?

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

Большую часть своего дня я провожу, уставившись в компьютер. Так как основной работой для меня является HTML5, то чаще всего открыт какой-нибудь текстовый редактор, иногда Photoshop. Я столько времени потратил на HTML5, что мне уже проще относиться к нему, как к дизайнерской программе.

Вопрос: Можешь рассказать еще что-то о своей работе в Google?

Марцин: Я всегда был последователем «старой школы». Много-много лет назад я написал сайт в программе FrontPage (смеется). Но с тех пор я всегда писал код вручную, в каком-нибудь самом простом текстовом редакторе. Сейчас это TextMate, хотя я никогда не использую его продвинутые возможности. Мне нравится держать все в своих руках.

Думаю, это мой принцип – начинать работу с нуля, даже если код был уже где-то набран, даже набран раньше мной. Это позволяет мне в постоянно меняющейся среде HTML5 и CSS3 учиться новым вещам, менять подход к работе, вспоминать, как я делал это прошлый раз и пытаться сделать по-другому. Просто из принципа. И это всегда приносит удивительные ощущения. Конечно, такой подход работает только при разработке маленьких проектов, этих моих экспериментов. Невозможно же каждый месяц переписывать Gmail (смеется).

Все это выглядит очень просто. Браузер в одном окне, TextMate – в другом, и множество Command-Tab и Command-R. Ну, типа мышечная память.

У меня есть пара простых инструментов, которые я разработал для себя и для команды Google, и которые мне следовало бы сделать общедоступными (open source), и меня очень расстраивает, что я не могу этого сделать. У одного такого инструмента тоже смешное название. Это Transmogrifier – из комиксов «Кельвин и Хоббс» (Calvin and Hobbes), которые я очень люблю. Эта программка позволяет мне очень быстро и легко тестировать различные шрифты и параметры прототипов. JavaScript не очень хорош для CGI, так что Transmogrifier позволяет мне не открывать и закрывать различные панели инструментов. Я просто включаю в код одну строку JavaScript, а об остальном он позаботится сам.

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

Вопрос: Google имеет хорошую репутацию благодаря доверию пользователей выдаваемой информации и постоянному тестированию своей продукции. Как это влияет на пользовательские ощущения от сайтов Google?

Марцин: Мы исторически были всегда сфокусированы на исследовании восприятия пользователей. Во многих продуктах, включая поиск Google, основным критерием является максимально точный и быстрый отклик на запрос пользователя, ответ на очень точный вопрос. В течение многих лет разные люди говорили нам, что мы не занимаемся дизайном своих приложений, что они просто такие, какие есть, сами по себе. На самом деле, в большинстве случаев самым продуманным дизайном является тот, который выглядит так, будто его нет вообще. Такие приложения выглядят более объективными. Менее «отредактированными». Доверие к выданной после поиска информации очень важно для нас.

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

Попытался сыграть на этом пианино. Мне пришлось выкручиваться - многие клавиши уже не работают.

Вопрос: Как у тебя появился интерес к фотографии?

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

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

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

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

Как правильно подбирать шрифты

(Перевод Виктории Шидловской статьи Best Practices of Combining Typefaces из журнала Smashing Magazine)

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

Итак, все шрифты делятся на те, что с засечками (serif) и без засечек (sans serif, от французского sans — без). Шрифты без засечек по-русски принято называть рублеными.

И оказалось, что по европейской традиции шрифты с засечками делятся на 4 класса:

Пример старостильного шрифта - Garamond

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

Старо-стильные шрифты делятся на категории Venetian и Aldine (также называют Garalde). Примеры шрифтов класса Old style Adobe Jenson (Venetian), Janson, Garamond, Bembo, Goudy Old Style, и Palatino (все Aldine или Garalde).

Пример шрифта класса Transitional - Times New Roman

Пример шрифта класса Transitional - Times New Roman

Transitional или Baroque (Переходный или Барочный) – впервые появился в середине 18-го века. Эти шрифты наиболее широко распространены, среди них Times New Roman (1932) и Baskerville (1757). Этот класс шрифтов с засечками находится между старостильными и современными (modern), отсюда и название Transitional. Разница между тонкими и толстыми линиями шрифта более отчетливая, чем в старом стиле, но не такая драматичная, как в современном.

Пример шрифта класса Modern - Bodoni

Modern или Didone (Современный) – появился в конце 18-го века. Характеризуется экстремальным контрастом между тонкими и толстыми линиями знака. Современный шрифт имеет вертикальный акцент (тонкие линии точно посередине вверху и внизу), тонкие красивые засечки. Шрифт тонкий, но вертикальные линии очень толстые. Большинство шрифтов класса Modern менее читабельные, чем Old style и Transitional. Примеры шрифта — Bodoni, Didot, и Computer Modern.

Пример шрифта класса Slab serif - Rockwell

Slab serif или Egyptian (Брусковый) – обычно имеет совсем незначительную, если вообще имеет, разницу между тонкой и толстой частью знака. Slab serif обладают «толстым», квадратным видом и иногда имеют фиксированную ширину, что означает, что все знаки и пробелы между словами имеют одинаковую ширину (как typewriter). Иногда такие шрифты называют рубленными с засечками, так как они имеют вид шрифтов без засечек. Slab serif появился примерно в 1800 году. Примеры шрифтов — Clarendon, Rockwell и Courier.

Ну а теперь перейдем к теме статьи — как правильно подбирать и сочетать шрифты при создании макета.

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

Сочетайте шрифты с засечками со шрифтами без засечек (sans serif и serif)

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

На рисунке внизу — типичная текстовая раскладка. На примере слева в заголовке использован Trade Gothic Bold No.2, а в тексте — Bell Gothic. Оба шрифта – рубленые. Однако, у них очень разные «личности». Хорошее правило при создании макета, не привлекать излишнее внимание читателя к виду шрифта. Trade Gothic предполагает серьезность, а Bell Gothic, наоборот – динамику и экспрессивность.

Как правильно подбирать шрифты

Сочетание этих шрифтов вызывает нежелательный дизайнерский конфликт. Trade Gothic хочет перейти прямо к фактам, а Bell Gothic хочет веселиться. Такое напряжение между шрифтами – не наша цель, его следует избегать.

Теперь рассмотрим пример справа. Мы заменили Bell Gothic шрифтом Sabon. Sabon, как шрифт с засечками, очень хорошо работает с Trade Gothic. Они оба нацелены на ясность и читабельность благодаря хорошей высоте знаков (x-height, грубо говоря, это высота строчной буквы x в шрифте, она определяет расстояние между базовой линией и верхней) . Таким образом, у обоих шрифтов одна и та же цель, потому они и составляют отличную пару.

Избегайте шрифтов из одного класса

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

На примере внизу, слева, в заголовке использован шрифт Clarendon Bold, который относится к классу Slab serif. В теле статьи использован Officina Serif который также относится к slab serif. Шрифты класса Slab serif отличаются ярко выраженным характером, им нравится доминировать на странице. Использование двух шрифтов класса slab serif в одном месте может вызвать ненужное напряжение.

Как правильно сочетать шрифты

А теперь обратите внимание на правую сторону примера. Clarendon Bold в заголовке поставлен рядом с более нейтральным New Baskerville. New Baskerville относится к универсальному классу Transitional serif с широкими знаками, которые хорошо сочетаются с жирным Clarendon.

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

Присвойте шрифтам разные роли

Один из простых способов подбора шрифтов, это составление ролевой дизайнерской схемы для каждого шрифта. В примере ниже мы использовали Akzidenz Grotesk Bold прописными для имени автора статьи. Для заголовка — Rockwell Bold. Вводный абзац и основной текст статьи в одном шрифте – Bembo, но разного размера. И, наконец, подзаголовок — Akzidenz Grotesk Medium.

Присвойте шрифтам разные роли

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

В общей сложности мы использовали 4 шрифта из 3-х гарнитур, все они привели к связанному, сплоченному дизайну, так как у каждого шрифта своя роль, четко определенная в типографической иерархии. Так что если сомневаетесь – распределите роли!

Контрастная жирность шрифтов

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

На примере слева у нас разные размеры шрифта, но недостаточный контраст по толщине. Myriad Light рядом с Minion Bold «пропадает» и теряет визуальный авторитет. Как бы то ни было, но глаз читателя должен в первую очередь выделять заголовок, а не превью.

Сочетайте шрифты разной жирности

Справа мы использовали Myriad Black над Minion нормальной толщины. Возможно, заголовок тяжеловат, но по крайней мере, у читателя не возникает сомнений по поводу того, что читать первым.

Создайте на странице различную тональность текста

В типографии тональность достигается различными способами – толщиной, размером, шириной строк, кернингом и пр. Самый простой способ «увидеть» тональность – смотреть на макет не прямо, а боковым зрением. Посмотрите на пример внизу, направив взгляд немного справа или слева от картинки, так, чтобы вы уже не могли читать текст, но могли видеть его общий тон.

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

Используйте разную шрифтовую насыщенность

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

Не смешивайте настроения шрифтов

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

На примере слева мы соединили Franklin Gothic Bold и Souvenir. Общее впечатление от Franklin Gothic – мужество, сила, стойкость, но с налетом элегантности. Он не ублажающий взор, но очень функциональный. А Souvenir – игривый, легкомысленный, немного равнодушный, но очень симпатичный. Эти два шрифта рядом, как бифитер перед Букингемом и маленькая девочка, которая пытается его рассмешить. Такое смешение плохо работает. Разное настроение шрифтов привлекает внимание к самим шрифтам, а не содержанию, что свидетельствует о слабом дизайне.

Не смешивайте разные по настроению шрифты

Справа в пару к Souvenir мы поставили более подходящего соседа. У Futura Bold много лиц, но он очень хорошо сочетается с Souvenir по многим причинам. Во-первых, у обоих шрифтов высокие x-height. Оба шрифта обладают округлостью форм и незначительной, но тем не менее заметной закрученностью концов. Ни один из них не доминирует над другим. Оба работают на создание веселого, приподнятого настроения. Напряжения между ними нет.

Сочетайте яркое с нейтральным

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

На примере слева Dax Bold стоит рядом с Bernhard Modern. Плохой выбор хотя бы по двум соображениям.

Сочетайте яркое с нейтральным

Во-первых, Dax имеет узкие знаки и большую x-height, в то время как Bernhard Modern, наоборот, при большой ширине глифов обладает одной из самых низких x-height среди популярных классических гарнитур. Во-вторых, Dax неформальный, современный и яркий. Идеально подходит при подачи текста технарям, компьютерщикам и вообще современной молодежи. Bernhard Modern, наоборот, классический, спокойный, рафинированный и даже немного личный. Объедините неподходящие физические характеристики шрифта с личностными, и получите очень плохо функционирующую типографику.

Взглянем на более удачный выбор. В правой колонке Dax Bold поставили рядом с Caslon. Caslon относится к классу Old style (Старый стиль), но был модернизирован и смягчен для лучшей сочетаемости с другими шрифтами. В данном контексте он выглядит удовлетворительно рядом с Dax. Заметьте, как в первую очередь мы видим личность Dax в заголовке, и как Caslon отступает назад и приглашает нас к чтению. В этом примере Caslon является нейтральным выбором для поддержки более яркого Dax.

Избегайте несоизмеримых сочетаний

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

Слева мы поставили Antique Olive Nord – чрезвычайно жирный шрифт, — рядом с Garamond Narrow. Контрастный перебор очевиден. В большинстве подобных случаев, такой контраст идет дальше обычного привлечения внимания и вызывает ощущение неуклюжести. Следовательно, он не доносит до читателя смысла текста.

Избегайте слишком большого контраста

Справа в заголовок мы поставили Antique Olive Nord. Garamond Narrow мог бы быть заменен на тот же Garamond в варианте book weight, но более хороший выбор — после некоторых колебаний — это Chaparral. У Chaparral более высокая x-height, чем у Garamond, и в общем у него более современный и нейтральный вид рядом с характерным Antique Olive Bold.

Будьте проще – не используйте более двух шрифтов

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

На примере внизу мы составили четкую типографскую иерархию, добились разнообразия, получили интересную разбивку по тональности текста и его возрастающую читабельность. Все это было сделано с помощью всего двух шрифтов. Хотя, строго говоря, у нас здесь пять шрифтов: три Helvetica Neue и два Garamond.

Используйте два шрифта

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

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

Используйте различные размеры шрифта

Самый простой принцип мы оставили напоследок: используйте разные размеры шрифта для достижения контраста между ними.

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

Используйте разные размеры шрифта

Справа мы использовали те же два шрифта, но другого размера. TheMix Italic был значительно увеличен, в то время как New Century Schoolbook уменьшен до более нормального, хоть и все еще читабельного, размера.

Использование различных шрифтовых размеров помогает четко распределить иерархию и увеличить тоновое разнообразие в типографии.

Шпаргалка по CSS3 – список новых стилей

Это шпаргалка по CSS3, написанная специально для Smashing Magazine. Ссылка ведет на .pdf файл на их ресурсе. Новые стили можно использовать только для новых браузеров (Firefox 3.5, Opera 9.6, Safari 3+, Google Chrome and Co.) Список можно распечатать.

download the pdf (5 pages, 123 Kb)

CSS3 список свойств

Всплывающая панель на ява-скрипт и CSS3

(Перевод Виктории Шидловской урока Джона Филлипса на spyrestudios.com)

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

Что мы будем делать:

Разметка HTML

Начнем с шапки документа. Здесь главное — ссылки на наш файл CSS и файл jQuery из библиотеки Google. Позже мы вернемся к шапке и пропишем код ява-скрипта.

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Vertical Sliding Info Panel With jQuery</title>
	<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
	<script type="text/javascript"
src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
</head>
</html>

В теле документа мы создадим div и назовем его «container». Этот div будет содержать весь наш контент, Lorem Ipsum в данном случае. Пока что это не панель.

<div id="container">
	<h1>Vertical Sliding Info Panel With jQuery</h1>
		<h2>The Sliding Panel And Trigger Button On The Left
Have Absolute Positioning</h2>
<p>This is an example of simple page that's centered
and has a vertical sliding panel on the far left (try it! click on
the 'infos' tab that's on the left!). We used jQuery to create this
sliding panel (and CSS3 rounded corners because it looks cool)</p>
<p>
<a href="http://spyrestudios.com/
how-to-create-a-sexy-vertical-sliding-panel-using-jquery-and-css3/"
title="How To Create A Vertical Info Panel With jQuery">Click here
to return to the tutorial on SpyreStudios</a></p>
	<div>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ut eget eros libero. Fusce tempus quam sit amet erat mollis a fermentum nibh
imperdiet. Fusce iaculis sapien in turpis aliquet porta. Donec tincidunt
gravida tortor, vel dignissim augue convallis sit amet. Aliquam auctor ornare
accumsan. Cras convallis elit tincidunt arcu semper egestas. Mauris interdum
fringilla nisi. Cras a dapibus lectus. Praesent blandit ullamcorper ornare.
Nam hendrerit sollicitudin urna non ultricies. Phasellus condimentum auctor risus,
at accumsan tellus tempor vel. Nunc mattis eleifend dolor at adipiscing.</p>
	</div>
</div>

Дальше примемся за нашу всплывающую панель. Здесь добавим несколько параграфов, h3 и линков.

<div>
	<h3>Sliding Panel</h3>
	<p>Here's our sliding panel/drawer made using jQuery with the 
toggle function and some CSS3 for the rounded corners</p>
	<p>This panel could also be placed on the right. This could be 
particularly useful if, <a href="http://spyrestudios.com" 
title="SpyreStudios">like me</a>, you have a left-aligned website layout.</p>

	<h3>A Little Something About Me</h3>
	<img src="images/jon_image.jpg" alt="Jon Phillips" />
	<p>My name's Jon, I'm a freelance designer, blogger, musician. 
I run SpyreStudios and I specialize in WordPress blogs, CSS, XHTML and PHP</p>

<div style="clear:both;"></div>
<div>
	<div>
	<h3>Navigation</h3>
		<ul>
<li><a href="http://spyrestudios.com/" title="home">Home</a></li>
<li><a href="http://spyrestudios.com/about/" title="about">About</a></li>
<li><a href="http://spyrestudios.com/portfolio/" title="portfolio">Portfolio</a></li>
<li><a href="http://spyrestudios.com/contact/" title="contact">Contact</a></li>
<li><a href="http://spyrestudios.com" title="blog">Blog</a></li>
		</ul>
	</div>

	<div>
		<h3>Social Stuff</h3>
		<ul>
<li><a href="http://twitter.com/jophillips" title="Twitter">Twitter</a></li>
<li><a href="http://designbump.com/user/147" title="DesignBump">DesignBump</a></li>
<li><a href="http://digg.com/users/jophillips" title="Digg">Digg</a></li>
<li><a href="http://delicious.com/jon.phillips" title="Del.Icio.Us">Del.Icio.Us</a></li>
<li><a href="http://designmoo.com/users/jonphillips" title="DesignMoo">DesignMoo</a></li>
		</ul>
	</div>
</div>
<div style="clear:both;"></div>

</div>
<a href="#">infos</a>

Завершим наш HTML-документ тэгами body и html.

CSS

Как вы можете видеть, наш CSS очень прост, добавлены только сругленные углы и кнопка trigger, которая запускает выезд панели. Заметьте также, что у панели и trigger-а абсолютное позиционирование по левому краю.

body {
background:#1a1a1a;
text-align:left;
color:#666;
width:700px;
font-size:14px;
font-family:georgia, 'time new romans', serif;
margin:0 auto;
padding:0;
}

a:focus {
outline: none;
}

h1 {
font-size: 34px;
font-family: verdana, helvetica, arial, sans-serif;
letter-spacing:-2px;
color:#9FC54E;
font-weight:700;
padding:20px 0 0;
}

h2 {
font-size: 24px;
font-family: verdana, helvetica, arial, sans-serif;
color:#444444;
font-weight: 400;
padding: 0 0 10px;
}

h3 {
font-size:14px;
font-family:verdana, helvetica, arial, sans-serif;
letter-spacing:-1px;
color:#fff;
font-weight: 700;
text-transform:uppercase;
margin:0;
padding:8px 0 8px 0;
}

img{
float: right;
margin: 3px 3px 6px 8px;
padding: 5px;
background: #222222;
border: 1px solid #333333;
}

p {
color:#cccccc;
line-height:22px;
padding: 0 0 10px;
margin: 20px 0 20px 0;
}

img {
border:none;
}

#container {
clear: both;
margin: 0;
padding: 0;
}

#container a{
float: right;
background: #9FC54E;
border: 1px solid #9FC54E;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
text-decoration: none;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px;
font-weight: 700;
}

#container a:hover{
float: right;
background: #a0a0a0;
border: 1px solid #cccccc;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
text-decoration: none;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px;
font-weight: 700;
}

.content {
font-style:normal;
font-family:helvetica, arial, verdana, sans-serif;
color:#ffffff;
background:#333333;
border:1px solid #444444;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
margin: 30px 0 50px;
padding: 15px 0;
}

.content p {
margin: 10px 0;
padding: 15px 20px;
}

.panel {
position: absolute;
top: 50px;
left: 0;
display: none;
background: #000000;
border:1px solid #111111;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
width: 330px;
height: auto;
padding: 30px 30px 30px 130px;
filter: alpha(opacity=85);
opacity: .85;
}

.panel p{
margin: 0 0 15px 0;
padding: 0;
color: #cccccc;
}

.panel a, .panel a:visited{
margin: 0;
padding: 0;
color: #9FC54E;
text-decoration: none;
border-bottom: 1px solid #9FC54E;
}

.panel a:hover, .panel a:visited:hover{
margin: 0;
padding: 0;
color: #ffffff;
text-decoration: none;
border-bottom: 1px solid #ffffff;
}

a.trigger{
position: absolute;
text-decoration: none;
top: 80px; left: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px 40px 20px 15px;
font-weight: 700;
background:#333333 url(images/plus.png) 85% 55% no-repeat;
border:1px solid #444444;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
display: block;
}

a.trigger:hover{
position: absolute;
text-decoration: none;
top: 80px; left: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px 40px 20px 20px;
font-weight: 700;
background:#222222 url(images/plus.png) 85% 55% no-repeat;
border:1px solid #444444;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
display: block;
}

a.active.trigger {
background:#222222 url(images/minus.png) 85% 55% no-repeat;
}

.columns{
clear: both;
width: 330px;
padding: 0 0 20px 0;
line-height: 22px;
}

.colleft{
float: left;
width: 130px;
line-height: 22px;
}

.colright{
float: right;
width: 130px;
line-height: 22px;
}

ul{
padding: 0;
margin: 0;
list-style-type: none;
}

ul li{
padding: 0;
margin: 0;
list-style-type: none;
}

Если хотите поставить кнопку открытия панели и саму панель вправо, просто перепишите код, вместо

a.trigger{
position: absolute;
top: 80px; left: 0;
}

.panel {
position: absolute;
top: 50px; left: 0;
}

нужно написать так:

a.trigger{
position: absolute;
top: 80px; right: 0;
}

.panel {
position: absolute;
top: 50px; right: 0;
}

Также перенесите скругленные углы, вместо

border:1px solid #444444;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;

нужно написать так:

border:1px solid #444444;
-moz-border-radius-topleft: 20px;
-webkit-border-top-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;

Если вы хотите, чтобы trigger и панель оставались всегда видимыми при прокрутке окна, пропишите фиксированное позиционирование:

a.trigger{
position: fixed;
top: 80px; left: 0;
}

.panel {
position: fixed;
top: 50px; left: 0;
}

Чтобы изменить прозрачность панели, измените код здесь:

filter: alpha(opacity=85);
opacity: .85;

jQuery

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


< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Vertical Sliding Info Panel With jQuery</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script type="text/javascript" 
src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>

<script type="text/javascript">
$(document).ready(function(){
	$(".trigger").click(function(){
		$(".panel").toggle("fast");
		$(this).toggleClass("active");
		return false;
	});
});
</script>
</head>

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

Вы также можете скачать zip-архив со всеми необходимыми файлами этого урока по jQuery и CSS3

Принципы минимализма в веб-дизайне

(перевод Виктории Шидловской одноименной статьи из Smashing Magazine)

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

Меньше – это больше

«Меньше – это больше», наверное, самая известная фраза, иллюстрирующая движение минимализма. Фраза была популяризована архитектором Людвигом Миесом ван де Рохом (Ludwig Mies van der Rohe) в описании эстетики минимализма.
В веб-дизайне принцип «Меньше – это больше» означает использование только самых необходимых дизайнерских элементов. Используйте меньше, чтобы макет не был сборником бессмысленных фишек.

Примеры

North Kingdom

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

минимализм в веб-дизайне

Sleepover

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

минимализм в вебдизайне

Lindvall A&D
Простой векторный рисунок стула, еле видный, если вы не смотрите на него, иллюстрирует идеологию «Меньше – это больше».

минимализм в веб-дизайне

Your Neighbors

Еще один простой дизайн, с гораздо большим количеством графики.

минимализм в веб-дизайне

Sharpenr

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

минимализм в веб-дизайне

Избегайте ненужных вещей

В книге «Элементы стиля» авторы Странк и Уайт (Strunk & White) ввели термин «Избегайте ненужной работы». В философии минимализма эта фраза была переделана на «Избегайте ненужных вещей». Другими словами – не включайте ненужные элементы в свой дизайн.

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

Примеры

up&onward

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

принципы минимализма

Lachlan Bailey

Единственное изображение и вертикальное меню – вот и все, что здесь есть.

минимализм

Sarah Hultin

Другой пример одного изображения и вертикальной навигации.

минимализм вебдизайн

Aleksei Dubrovsky

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

минимализм вебдизайн

Вычитайте, пока есть что

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

Примеры

Anothercompany

минимализм вебсайты

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

Works in Silence

минимализм

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

Brett Arthur Photo

минимализм в вебдизайне

Другой прекрасный пример использования минимума элементов.

Danny Guy Photography

минимализм в веб-сайтах

Черный фон выделяет этот дизайн из множества других в стиле ультра-минимализм. Заметьте – в углу картинки опция по переводу изображения в полноэкранный режим.

Brian Danaher

веб минимализм

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

Каждая деталь имеет значение

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

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

Примеры

Executive Edits

правила минимализма

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

Christine Szczupak Photography

детали в минимализме

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

Kha Hoang

детали в минимализме

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

The Rules of a Gentleman

детали минимализма

Все, начиная с толстой линии наверху и заканчивая миксом шрифтов делают этот сайт изысканным и утонченным.

Ryan Willms

детали в минимализме

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

Electricgecko

принципы минимализма

Светлый цветной фон под содержимым делит этот дизайн на смысловые части.

Минимум цвета

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

Как и в случае с деталями, цвет играет критическую роль, если количество цветов ограничено. Обращайте внимание на значение цветов и на то, как они сочетаются друг с другом.

Примеры

Pixelbot Webdesign

цвет в минимализме

Яркие цвета выделяются на фоне черно-белого дизайна.

Second and Park

цвет в минимализме

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

Glinga

цвета в минимализме

Простой веб-сайт с серым фоном и яркими акцентами.

Superawesome

цвета в минимализме - розовый

Малиновый цвет очень популярен в минимализме.

Nation

цвета в минимализме - серый и голубой

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

Пустое пространство жизненно необходимо

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

Пустое пространство «делает» дизайн минималистичным. Без него вы либо придете к сетке, либо к гранжу, либо к чем-то еще, но не к минимализму.

Примеры

Straightline

Тонна воздуха вокруг элементов.

52 Weeks of UX

минимализм - пустое пространство

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

Blank Studio

минимализм - много воздуха

Большое белое пространство между навигацией и изображением.

Тренды

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

Серый

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

Brian Hoff

минимализм в вебдизайне - серый цвет

Серый может играть роль акцента, не только в роли фона или типографики.

Michael Cronin

минимализм - серый цвет

Серый в качестве фона хорошо сочетается с холодным синим.

Ross Gunter

минимализм веб-майты

Очень простой дизайн с серым фоном.

Sort Design

минимализм веб-сайты

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

Jack Osborne

минимализм вебсайты

Серый цвет хорошо образует градиенты.

5-Squared

минимализм в дизайне сайтов

Серые тени привлекают внимание без замусоривания макета.

Большие шрифты

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

Blake Allen Design

Преувеличенные шрифты используются здесь повсеместно.

EndGrain

минимализм в дизайне сайтов - шрифты

Другой пример огромного шрифта в заголовке сайта.

Words Are Pictures

минимализм в вебе - шрифты

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

Ryan Evans

минимализм шрифты

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

Division Paris

минимализм шрифты

Прекрасный пример огромного шрифта в шапке сайта.

Узоры и картинки в качестве фона

Бледные узоры и огромные иллюстрации в качестве фона могут создать очень интересный визуальный эффект минималистичному веб-дизайну.

Jeroenhoman.com

минимализм - фон и узоры

Бледные узоры придают дизайну законченный вид.

IdeaPaint

минимализм, вебдизайн - фон

Большое фоновое изображение все равно в рамках минимализма, если остальное содержимое страницы остается простым.

Простая сетка

Сетка не является необходимым элементом стиля минимализм. Тем не менее иногда она может организовать «голый» дизайн.

Fitzroy & Finn

минимализм вебсайты

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

Design Woop

минимализм вебстайты, макет

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

Fortyone

минимализм макет

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

Things

минимализм макет

Простая на вид сетка подчеркивает правильную дизайнерскую мысль («То, о чем вы должны думать во время дизайна – это содержимое, люди, содержимое и еще раз содержимое»).

Corporate Risk Watch

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

Positively Melancholy

минимализм макет

Такая сетка, как здесь, хорошо организует фотографии разного размера.

Круги

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

iLTD

минимализм тренды

Простой круглый логотип в шапке.

Bless

минимализм тренды

Круглые бэйджики вроде этого также популярны.

Royale

минимализм тренды

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

Бонус — прозрачность

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

Slideshow Press

минимализм тренды

Прозрачность логотипа придает дизайну дополнительную глубину.

Использование @font-face в качестве иконок

Посмотреть демо использования шрифта в качестве иконок можно на блоге Some Random Dude.

Данный тьютор основан на @font-face CSS rule, :before selector и content rule.

Первое правило позволяет включать любые шрифты и использовать их по мере необходимости, таким образом наши возможности не ограничены шрифтами web-safe. Поэтому мы можем также включать шрифты с символами-картинками, как семейство Wingding.
:before selector позволяет перед каждым выбранным элементом вставлять какой-то контент. Например, следующая строка вставляет строку «Note: » перед содержимым каждого P-элемента, если в составе названия его класса есть значение «note»:
p.note:before { content: «Note: » }

А content rule – это как раз тот контент, который можно вставить с помощью :before и :after селекторов.

«За и «Против» использования шрифтов в качестве иконок

За:

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

2. Одна иконка – множество размеров. Так как шрифты основаны на векторной графике, то от изменения размера их качество отображения не меняется. Так что можно не загружать одни и те же иконки в размерах icon_8×8.png, icon_16×16.png, icon_24×24.png.

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

4. Трансформации с помощью CSS3 открывают интересные возможности (немного подробнее для примера – ниже).

Против:

1. Шрифт может тяжело весить. Сложный шрифт запросто может вытянуть на 90Kb. Не совсем удобно, если собираешься использовать как иконку всего лишь один символ.

2. Потенциальный тэговый взрыв. Поиграв с @font-face-иконками я понял, что неправильное их использование может привести к уродливой маркировке.

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

Имплементация

Простой CSS-код:


@font-face {
  font-family: 'IconicStroke';
    src: url("iconic_stroke.eot");
    src: local('IconicStroke'),
       url("iconic_stroke.svg#iconic") format('svg'),
       url("iconic_stroke.otf") format('opentype');
}

Я применяю класс iconic, чтобы включить иконку в то место, куда захочу, ставлю отображение inline-block, чтобы применить трансформации CSS3.


.iconic {
  display:inline-block;
  font-family: "IconicStroke";
}

Наконец, применяю правило content, чтобы вставить иконку:


.iconic.home:before {
  content: '!';
}

В HTML я использовал тэг a для отображения иконки, так как она в определенных случаях может быть якорем для ссылок. Тэг может быть не пустым.


<a name='home' class='iconic home'></a> Home

Использование CSS3 с шрифтовыми иконками

В исходнике этой статьи (ссылка наверху страницы) можно посмотреть также пример использования данного метода вместе с CSS3.
Проведите мышью над заголовком:
Roll over this text to see transition
И увидите результат.
Код для имплементации такой звездочки, никаких ява-скриптов:


.iconic {
	display:inline-block;
	font-family: "IconicStroke";
	text-shadow: 0px 0px 2px rgba(0,0,0,.33);
	-webkit-transform: rotate(0deg) scale(1);
	-moz-transform: rotate(0deg);
	-webkit-mask-image: -webkit-gradient(linear,
		left top,
		left bottom,
		from(rgba(0,0,0,.5)),
		to(rgba(0,0,0,1)));
	-webkit-transition: all .3s ease-in-out;
	cursor: default;
	padding:10px 0 10px 10px;
 }

.iconic:hover {
	-webkit-transform: rotate(-10deg) scale(1.3);
	-moz-transform: rotate(-10deg) scale(1.3);
	text-shadow: 0px 0px 4px rgba(0,0,0,.5);
	color:#c00 !important;
}
%d такие блоггеры, как: