<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>О юзабилити простыми словами &#187; Инструменты</title>
	<atom:link href="http://www.birzool.com/category/tools/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.birzool.com</link>
	<description>пишет Ярослав Бирзул</description>
	<lastBuildDate>Thu, 29 Jul 2010 13:19:51 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.1</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Блочная разметка. Программы</title>
		<link>http://www.birzool.com/wiresoft/</link>
		<comments>http://www.birzool.com/wiresoft/#comments</comments>
		<pubDate>Thu, 21 Aug 2008 11:31:52 +0000</pubDate>
		<dc:creator>Ярослав Бирзул</dc:creator>
				<category><![CDATA[Инструменты]]></category>
		<category><![CDATA[wireframes]]></category>
		<category><![CDATA[блочная разметка]]></category>
		<category><![CDATA[проектирование]]></category>
		<category><![CDATA[юзабилити]]></category>

		<guid isPermaLink="false">http://www.birzool.com/?p=126</guid>
		<description><![CDATA[Существует огромное количество графических редакторов&#160;&#8212; растровые, векторные, 3д, есть даже текстовые (sic!). Когда же перед вами стоит задача: в чем же рисовать блочную разметку – вам придется выбирать. Лучше всего, конечно, попробовать каждый из них самому, чтобы определится в своих личных предпочтениях, и составить собственное мнение, но это не всегда удается.

Далеко не у каждого человека [...]]]></description>
			<content:encoded><![CDATA[<p>Существует огромное количество графических редакторов&nbsp;&mdash; растровые, векторные, 3д, есть даже текстовые (sic!). Когда же перед вами стоит задача: в чем же рисовать блочную разметку – вам придется выбирать. Лучше всего, конечно, попробовать каждый из них самому, чтобы определится в своих личных предпочтениях, и составить собственное мнение, но это не всегда удается.</p>
<p><a href="http://www.birzool.com/wiresoft/"><img src="http://www.birzool.com/wp-content/uploads/2008/08/inc.jpg" alt="Программы для создания Wireframes" /></a></p>
<p>Далеко не у каждого человека есть возможность долго тестировать дорогую программу (дешевых среди нужных нам редакторов – нет, но есть пару бесплатных) после месячного, а то и полумесячного тестового периода. Взлом и прочее шулерство – не к лицу, и не по адресу.</p>
<p><span id="more-126"></span></p>
<p>Рассматривать я буду, конечно, далеко не все подходящие редакторы, но несколько хороших, а главное качественных – рассмотрю, а вы уже выбирайте сами, какой вам больше по душе.<br />
Начать хотелось бы с исконно проектировочных программ – <a href="http://www.axure.com">Axure Pro</a>, и <a href="http://www.microsoft.com/expression/products/Overview.aspx?key=blend">MS Expression Blend</a> (не спешите плеваться – программа на высоте).<br />
Итак, поехали.</p>
<h3><a href="http://www.axure.com">Axure Pro</a></h3>
<p>Очень мощная программа, которая позволяет не просто проектировать интерфейсы, но и сразу, же переводить их в <a href="http://ru.wikipedia.org/wiki/Html">html</a>, или <a href="http://ru.wikipedia.org/wiki/Microsoft_Compiled_HTML_Help">chm формат</a> для пущего удобства (<a href="http://ru.wikipedia.org/wiki/Javascript">javascript</a> также широко используется). Т.е. вы водите мышкой в редакторе, а на выходе получаете вполне себе работающий прототип интерфейса, который спланировали ранее. Программа не дешевле остальных участников тестирования, но имеет не меньше возможностей.</p>
<p><img src="http://www.birzool.com/wp-content/uploads/2008/08/axure-pro.png" alt="" /></p>
<p>Прототипирование в этой программе&nbsp;&mdash; легкий процесс благодаря возможности создания диаграмм и простейших сценариев на подобии продуктов Microsoft – <a href="http://ru.wikipedia.org/wiki/Visio">Visio</a> и <a href="http://ru.wikipedia.org/wiki/Outlook_Express">Outlook Express</a>.<br />
Работать с Axure лучше всего на небольших проектах, у которых в наличии большая и компактная функциональность. Также её можно использовать и для больших проектов, но это чревато долгим откликом программы на несильных компьютерах. Для больших же проектов аксурке банально не хватает возможностей: в частности – программирования, и создания баз данных, которые при создании полного прототипа (а не только блочной разметки) определенно нужны.</p>
<p><a href="http://www.axure.com"><img src="http://www.birzool.com/wp-content/uploads/2008/08/logo.gif" alt="" /></a></p>
<p>Конкретно для создания <a href="http://www.birzool.com/wireframes/">wireframes</a> эта программа использует лишь малую часть своего обширного функционала, поэтому назвать Axure программой для создания блочной разметки – нельзя. Скорее она предназначена для визуализации уже спланированного на бумаге прототипа, но и исключать из списка её тоже нельзя – т.к. инструмент, очень мощный и полезный для юзабилистов.<br />
<strong>Стоит Axure на данный момент $589.</strong><br />
Подробнее о работе в этой программе я напишу позже.</p>
<h3><a href="http://www.microsoft.com/expression/products/Overview.aspx?key=blend">MS Expression Blend</a></h3>
<p>Новая линейка графических редакторов от компании <a href="http://www.microsoft.com/">Microsoft</a> – <a href="http://www.microsoft.com/expression/">Expression</a> определенно радует своей функциональностью и внешним видом. Что примечательно – Microsoft лишь выкупила готовый продукт у небольшой гонконгской компании Creature Housе (и самих Creature House тоже выкупила), а не создала конкурента как она обычно поступает в таких случаях. В нашем случае – хотелось бы осветить программу из комплекса MS Expression – Expression Blend. Эта программа предназначена конкретно для создания <a href="http://www.birzool.com/wireframes/">wireframes</a>, и прототипирования, поэтому функционально – она определенно лучше <a href="http://www.axure.com">Axure</a> (для работы с блочной разметкой, конечно же).</p>
<p><img src="http://www.birzool.com/wp-content/uploads/2008/08/expression-blend1.png" alt="" /></p>
<p>Тут в наличии большая библиотека контролов – разнообразные кнопки, выпадающие списки, поля для ввода текста, radio-кнопки, чеклисты и прочие страшные слова. Удобная работа с <a href="http://www.birzool.com/wireframes/">wireframes</a> с помощью множества слоев – также в наличии.<br />
Эта программа также заточена под визуальное создание прототипа итогом которому будет html, xaml-анимация, и javascript файлы.<br />
Есть удобные инструменты для работы с простейшими формами – элипсы, точки, линии, и многоугольники остаются неизменными.</p>
<p>Программа вплотную работает с технологией <a href="http://ru.wikipedia.org/wiki/Silverlight">MS Silverlight</a> (конкурент <a href="http://ru.wikipedia.org/wiki/Adobe_Flash">Adobe Flash</a>) без нужды устанавливать MS Visio с его монстроподобным интерфейсом и прочая-прочая. Есть также встроенный JS-редактор.<br />
Еще одним из преимуществ программы является <a href="http://ru.wikipedia.org/wiki/XAML">XAML-анимация</a>, которая позволяет экспортировать результаты визуальной работы в html без потери качества. Она же создает для прототипа анимацию кнопок, и других контролов. Каждый XAML-файл могут отредактировать <a href="http://ru.wikipedia.org/wiki/C_Sharp">С#</a> или <a href="http://ru.wikipedia.org/wiki/VB">VB</a> программисты вручную, что является определенным плюсом в совместной работе дизайнера и программиста.</p>
<p><a href="http://www.microsoft.com/expression/products/Overview.aspx?key=blend"><img src="http://www.birzool.com/wp-content/uploads/2008/08/top_logo_blend.jpg" alt="" /></a><br />
Также удобна для работы с шрифтовыми интерфейсами, которые практически не используют графику – множество настроек, и функций помогут настоящим типографам сделать очередную дизайнерскую конфетку.<br />
Программа подходит для проектирования не только веб интерфейсов, но и настольных (десткопных) приложений. Небольших приложений, правда, но…<br />
Результатом работы может быть как статическая картинка, так и работающий html-прототип с silverlight и javascript.</p>
<p>Главным минусом программы является то, что дизайнерам, которые ничерта не смыслят в программировании на XML-подобных языках можно в эту программу даже не соваться, т.к. код редактировать приходится ну очень часто. Либо же им придется работать в тандеме с программистом, который знаком с этой программой и <a href="http://ru.wikipedia.org/wiki/XML">XML-языками</a>. Именно так я и поступаю при предоставлении клиенту работающего прототипа.</p>
<p><strong>Стоит данная программа $575</strong>, что довольно ощутимо даже в сравнении с стоимостью Adobe Photoshop CS3 ($1000).</p>
<h3><a href="http://office.microsoft.com/ru-ru/visio/default.aspx">MS Visio</a></h3>
<p>Очень мощный программный комплекс для работы с визуализацией данных. Подойдет далеко не всем дизайнерам – не каждому нужны такие возможности в такой плотной упаковке. В интерфейсе легко можно запутаться. Работа также подобна визуальным редакторам выше, но существуют некоторые ощутимые проблемы. Одна из них – без знаний языка <a href="http://ru.wikipedia.org/wiki/VB">VB Script</a></p>
<p><img src="http://www.birzool.com/wp-content/uploads/2008/08/MS-viso.jpg" alt="MS Visio" /></p>
<p>туда можно даже не соваться. Я попробовал однажды, и не смог осилить ни монстрообразный интерфейс, ни способы работы с программистом в паре. Остановились мы на программе Expression Blend, как я об этом уже писал выше.</p>
<p><a href="http://office.microsoft.com/ru-ru/visio/default.aspx"><img src="http://www.birzool.com/wp-content/uploads/2008/08/Visio2010_bL.png" alt="" /></a></p>
<p><strong> Из плюсов можно выделить:</strong></p>
<ol>
<li>Мощность функций. С помощью этой программы можно спроектировать практически любой сложности интерфейс, как для сайта, так и для десткопной программы.</li>
<li>Хороший визуальный редактор.</li>
<li>Хороший редактор программирования с подсветкой кода и всем-таким.</li>
</ol>
<p><strong>Из минусов же:</strong></p>
<ol>
<li> Ужасную производительность программы.</li>
<li> Запутанность интерфейса.</li>
<li> Сложность работы для простого дизайнера.</li>
</ol>
<p><strong>Стандартная версия стоит 350 долларов, за профессиональную же придется отдать 750 полновесных зеленых рублей.</strong></p>
<h3><a href="http://www.evolus.vn/Pencil/Home.html">Pencil Project</a></h3>
<p>Pencil Project не является программой в полном смысле этого слова. Это расширение для браузера <a href="http://www.firefox.com">Mozilla Firefox</a> (как 2й так и 3й версии). С помощью этого уникального дополнения можно свободно визуализировать интерфейсы, и проектировать блочную разметку. Самый большой плюс – <strong>это абсолютно бесплатно</strong> и под удобной лицензией – <a href="http://ru.wikipedia.org/wiki/GPL">GPL 2</a>. Также большим плюсом является кроссплатформенность – firefox создается под большинство популярных платформ – <a href="http://ru.wikipedia.org/wiki/Windows">Windows</a>, <a href="http://ru.wikipedia.org/wiki/Mac_OS">Mac</a>, <a href="http://ru.wikipedia.org/wiki/Linux">Linux</a>.</p>
<p><img src="http://www.birzool.com/wp-content/uploads/2008/08/Pencil-Project.png" alt="Pencil Project" /></p>
<p>Интерфейс программы радует своей лаконичностью, и при этом мощностью – тут и сетка, и удобное перетаскивание нужных элементов, редактирование текстов, библиотека паттернов и форм. Простенький визуальный редактор только плюс – не засоряет важное пространство в программе и подчеркивает только важные функции, которыми пользуется большинство дизайнеров. В общем и целом – если до этой программы я использовал для создания <a href="http://www.birzool.com/wireframes/">wireframes</a> преимущественно <a href="http://ru.wikipedia.org/wiki/Photoshop ">photoshop</a> (а для прототипирования – Expression Blend) то теперь с удовольствием использую Pencil Project вместо него.</p>
<p><a href="http://www.evolus.vn/Pencil/Home.html"><img src="http://www.birzool.com/wp-content/uploads/2008/08/logo.png" alt="" /></a></p>
<p>В общем – простое, как отвертка, приложение, которое успешно справляется со всеми нужными действиями при создании <a href="http://www.birzool.com/wireframes/">wireframes</a>. Крайне рекомендую пользователям Firefox.</p>
<h3><a href="http://www.balsamiq.com/products/mockups/">Balsamiq Mockups</a></h3>
<p>Довольно часто проектирование интерфейсов начинается на бумажке – на обычных листах, либо в блокноте. Balsamiq Mockups развивает эту идею. Программа очень простенькая – есть множество визуалов – кнопки, списки, полосы прокрутки и прочее (есть даже облако тегов), их перетягиваем на «поле брани».</p>
<p><img src="http://www.birzool.com/wp-content/uploads/2008/08/Balsamiq-Mockups.jpg" alt="" /></p>
<p>По сути – спроектировать тут можно всё. И весь интерфейс будет в зарисовки на бумаге – неровные линии, шрифт. Шрифт, кстати, подобран ну очень удачно – легкочитаемый, кириллический, и в рукописном стиле.</p>
<p><a href="http://www.balsamiq.com/"><img src="http://www.birzool.com/wp-content/uploads/2008/08/balsamiq_logo1.jpg" alt=""/></a></p>
<p>Кому нужна скорость при разработке, недурный результат и простой функционал – тому нужно в обязательном порядке качать эту программу. Профессиональную лицензию я получил, написав в службу поддержки о том&nbsp;&mdash; кто я, и чем занимаюсь. На сайте написано, что <strong>любой блоггер, или журналист может запросить профессиональную лицензию <a href="peldi@balsamiq.com">по этому адресу</a> бесплатно.  Остальным же придется заплатить 79 долларов</strong>.</p>
<h3>Выводы</h3>
<p>Для тех, кому не нужны жуткие навороты: прототипирование в html и прочая шелуха – тому лучше использовать Pencil Project, и Balsamiq Mockups. Я, лично, отдаю преимущество первому – т.к. он абсолютно бесплатен и работает на моем любимом браузере. В то же время Balsamiq Mockups очень удобна, если нужно создать <a href="http://www.birzool.com/wireframes/">wireframes</a> быстро и со вкусом.<br />
В случае же, если вам нужно еще и прототипирование, редактор кода, javascript и прочий функционал – рекомендую обратить внимание на продукт Expression Blend – красивый, функциональный интерфейс которого не оставит вас равнодушным.</p>
<h3>Тем временем</h3>
<p>1. <a href="http://www.design-freak.com/life/ya-svoboden/">Миша Квакин</a> раскрепостился от оков постоянной работы и стал фрилансером.</p>
<p>2. <a href="http://s13.by/2008/08/20/seo-cheklist-nachinayuschego-optimizatora-optimizatsiya-sayta/">Сергей Чаботько</a> рассказывает о том, чему нужно следовать начинающим СЕО-шникам</p>
<p>3. <a href="http://blog.dotfix.ru/2008-08-14/gps-monitoring/">Юра Гугнин</a> написал о своей новой работе в роли маркетолога.</p>
<p>4. <a href="http://futuri.us/2008/07/29/budushhee-tut-mooooo/">Футуриус</a> пишет о МО технологии.</p>
<p>5. <a href="http://chernev.ru/zakruglennye-ugolki-s-pomoshhyu-vml-i-css3.html">Егор Чернев</a> пишет о закругленных блоках с помощью css.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.birzool.com/wiresoft/feed/</wfw:commentRss>
		<slash:comments>26</slash:comments>
		</item>
		<item>
		<title>Цветовые миксеры&#160;&#8212; Adobe Kuler</title>
		<link>http://www.birzool.com/kuler/</link>
		<comments>http://www.birzool.com/kuler/#comments</comments>
		<pubDate>Thu, 10 Jan 2008 22:01:42 +0000</pubDate>
		<dc:creator>Ярослав Бирзул</dc:creator>
				<category><![CDATA[Инструменты]]></category>
		<category><![CDATA[adobe]]></category>
		<category><![CDATA[kuler]]></category>
		<category><![CDATA[дизайн]]></category>
		<category><![CDATA[психология]]></category>
		<category><![CDATA[цвета]]></category>
		<category><![CDATA[цветовой миксер]]></category>
		<category><![CDATA[юзабилити]]></category>

		<guid isPermaLink="false">http://www.birzool.com/kuler/</guid>
		<description><![CDATA[Дабы не откладывать в долгий ящик продолжение понравившейся многим первой части — я решил приступить к нему сразу же. Я думаю это не последняя заметка из рубрики «Инструменты юзабилиста» посвященная цветам или цветовым миксерам — т.к. эти инструменты по настоящему полезны, и применимы во многих сферах деятельности — включая графические и художественные работы. Проблема подбора [...]]]></description>
			<content:encoded><![CDATA[<p>Дабы не откладывать в долгий ящик продолжение понравившейся многим <a href="http://www.birzool.com/colorschemer/">первой части</a> — я решил приступить к нему сразу же. Я думаю это не последняя заметка из рубрики «<a href="http://www.birzool.com/category/instruments/" title="Инструменты для юзабилистов">Инструменты юзабилиста</a>» посвященная цветам или цветовым миксерам — т.к. эти инструменты по настоящему полезны, и применимы во многих сферах деятельности — включая графические и художественные работы. Проблема подбора цвета обычно стоит ребром, но мы её решим.</p>
<p><a href="http://www.birzool.com/kuler/" title="Читайте о Adobe Kuler-е"><img src="http://img263.imageshack.us/img263/9493/kulerrg6.jpg" alt="Adobe Kuler от Ярослава Бирзул" /></a></p>
<p>В первой статье мы выяснили что такое <a href="http://ru.wikipedia.org/wiki/%D0%A6%D0%B2%D0%B5%D1%82%D0%BE%D0%B2%D0%BE%D0%B9%20%D0%BC%D0%B8%D0%BA%D1%81%D0%B5%D1%80">цветовой миксер</a>, и с чем его требуется кушать для пущего увеличения аппетита на примере программы ColorSchemer Studio. Несомненно хорошая вещь, но платная, а я решил сегодня посвятить статью бесплатному, и web-based инструменту от компании <a href="http://www.adobe.com" title="Компания Adobe">Adobe</a>, которые также как и компания <a href="http://www.colorschemer.com/">ColorSchemer</a> вовремя просекли о том, чего не хватает дизайнерской братии. Итак встречайте — Adobe Kuler.</p>
<p><span id="more-26"></span></p>
<blockquote>
<h2><a href="http://kuler.adobe.com" title="Adobe Kuler - цветовой миксер">Adobe Kuler</a></h2>
<p>Эта заметка будет не в пример меньше, чем предыдущая, но не менее полезная. Почему меньше? Потому что веб-сервисы как бы не старались, а дорасти до полноценной программы пока не могут — следовательно — меньше возможностей, но удобнее. Еще один несомненный плюс — <a href="http://kuler.adobe.com" title="Adobe Kuler - цветовой миксер">Kuler</a> сохраняет результаты в вашем Adobe ID — т.е. в случае смены ОС на вашем компьютере, или постоянных сменах компьютера (работа-дом, дом и работа) — все будет доступно, если на компьютерах есть интернет. Что гораздо удобнее, чем возить на флешке готовые палитры из <a href="http://www.birzool.com/colorschemer/" title="ColorSchemer Studio">ColorSchemer Studio</a>.</p>
<p><img src="http://img174.imageshack.us/img174/5893/92957470zk7.jpg" /></p>
</blockquote>
<blockquote>
<h3>Цветовой миксер</h3>
<p>По сравнению с программой на компьютере — веб сервисы явно уступают в возможностях, но не так уж и сильно как раньше. Тут есть всё, что нужно, и даже немного сверху.</p>
</blockquote>
<blockquote>
<p>В отличии от <a href="http://www.birzool.com/colorschemer/" title="ColorSchemer Studio">ColorSchemer Studio</a>, где роль миксера беззастенчиво выполняет цветовое колесо (color wheel) — тут с этой обязанностью справляется какой-то цветовой боченок. По меньшей мере у меня асоциации были именно такие — мы мешаем цвета в бочке, при этом смотрим на эту самую бочку сверху. В принципе — совершенно не затрудняет, и даже скорее всего облегчает задачу — ожидаемый цвет можно получить гораздо быстрее.</p>
<p><img src="http://img175.imageshack.us/img175/29/99869187ao0.jpg" /></p>
</blockquote>
<blockquote>
<p>А можно и не получить. К сожалению при всем видимом удобстве — я часто ловлю себя на мысли, что знаю примерно какой цвет хочу, но не знаю как его получить — и тут <a href="http://kuler.adobe.com">Kuler</a> делает в своем интерфейсе самую большую подлянку — не зная цветовых кодов, и не разобравшись в механике сервиса — ожидаемый цвет получить довольно затруднительно.</p>
</blockquote>
<blockquote>
<p>К счастью разработчики из <a href="http://labs.adobe.com" title="Лаборатория Adobe">Adobe Labs</a> знают свою работу хорошо, поэтому к несколько странному интерфейсу привыкаешь быстро.</p>
<p><img src="http://img174.imageshack.us/img174/4190/35830655au1.jpg" /></p>
</blockquote>
<blockquote>
<h3>Готовые цветовые решения</h3>
<p>В самый первый раз когда попадаешь на <a href="http://kuler.adobe.com">Adobe Kuler</a> — выдается красивый рейтинг лучших, по мнению посетителей, палитр — выбрать можно сразу их и с ними же продолжить работу. Плюсы понятны — далеко ходить не нужно, всё уже готово на полочке.</p>
</blockquote>
<blockquote>
<p> Из минусов хотелось бы сказать только одно — кулер достаточно популярный сервис, и выбрав цвета из первой десятке есть риск встретить «цветового клона» своего будущего сайта. Т.е. лучшее решение — это всё таки создать свой уникальный сборник, благо это удобно.</p>
<p><img src="http://img442.imageshack.us/img442/425/38852938dp0.jpg" /></p>
</blockquote>
<blockquote>
<p> Уже готовые решения можно отсортировать по нескольким способам:</p>
<p>1. <strong>По оценке</strong> — обьяснять в принципе нечего — выдаются лучшие сборники цветов по версии пользователей Кулера, которые вы, кстати, тоже можете оценить и посмотреть детально.</p>
<p>2. <strong>По популярности </strong>&mdash; насколько я понял в данном разделе выдаются самые просматриваемые цветовые решения. Мне кажется, что этот рейтинг не намного отличается от сортировке по оценке, ведь подавляющее большинство людей дальше второй-третей страницы кулера не пойдет.</p>
<p>3. <strong>Новые </strong>&mdash; если вы только что создали свою уникальную палитру, и хотели бы чтобы её кто-то увидел и скачал, кроме вас — этот раздел именно для таких как вы. Тут публикуются самые новые цветовые палитры. Из минусов — ежеминутно создается более 20 палитр, поэтому потеряться можно и тут.</p>
<p>Создав свое решение вы тоже можете добавить его на сайт.</p>
</blockquote>
<blockquote>
<h3>Экспорт</h3>
<p>К сожалению импорта в самом сервисе нет, т.е. улучшить уже готовую палитру вашего сайта не выйдет. Получится лишь только заново их воссоздать. К счастью экспорт тут в наличии и позволяет перенести готовые результаты в любой из инструментов Adobe линейки CS2 и CS3. Молодцы. К сожалению здесь нет экспорта в <a href="http://www.corel.com">Corel</a>, и другие программы, отличные от <a href="http://www.adobe.com">Adobe</a> по понятным причинам.</p>
<p><img src="http://img527.imageshack.us/img527/4020/64611751mm2.jpg" /></p>
</blockquote>
<h3>Выводы</h3>
<p>Как и любое веб-решение какой-то задачи инструмент немного проигрывает в функциональности своим программным собратьям, но зато выигрывает в удобстве и скорости получения результата. Рекомендую использовать данный сервис в случае того, если вы часто меняете свой компьютер, ваши цвета размещенные в интернете никуда от вас не денутся. Для тех же, у кого проблемы с переносом данных нет — рекомендую всё же воспользоватся платным программным аналогом — <a href="http://www.birzool.com/colorschemer/" title="ColorSchemer Studio">ColorSchemer Studio</a>.</p>
<h3>Что происходит?</h3>
<p>1. <a href="http://blog.dotfix.ru/2008-01-10/interview-cupof-coffee-and-nice-talk">Юра Гугнин</a> пишет о прокатившейся волне интервью в блогосфере.</p>
<p>2. <a href="http://www.design-freak.com/2008/01/08/delo-techniki/">Миша Квакин</a> рассуждает и поясняет причины своего недавнего редизайна.</p>
<p>3. <a href="http://s13.by/2008/01/10/pochemu-populyarnyie-bloggeryi-zarabatyivayut-bolshe-i-proektyi-u-nih-vostrebovanyi/">Сергей Чаботько</a> размышляет о том&nbsp;&mdash; почему же популярные блоггеры зарабатывают больше других.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.birzool.com/kuler/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>Цветовые миксеры&#160;&#8212; ColorSchemer Studio</title>
		<link>http://www.birzool.com/colorschemer/</link>
		<comments>http://www.birzool.com/colorschemer/#comments</comments>
		<pubDate>Mon, 07 Jan 2008 07:35:41 +0000</pubDate>
		<dc:creator>Ярослав Бирзул</dc:creator>
				<category><![CDATA[Инструменты]]></category>
		<category><![CDATA[дизайн]]></category>
		<category><![CDATA[миксер]]></category>
		<category><![CDATA[психология]]></category>
		<category><![CDATA[цвета]]></category>
		<category><![CDATA[цветовой миксер]]></category>
		<category><![CDATA[юзабилити]]></category>

		<guid isPermaLink="false">http://www.birzool.com/colorschemer/</guid>
		<description><![CDATA[Я долго думал — чего же еще написать такого весьма интересного — перелопатил довольно большое колличество статей по юзабилити (английских и русских), но тема была выбрана весьма спонтанно и неожиданно — я вдруг подумал о том какое же всё таки большое влияние производит выбор цветов, которые будут использоваться, на будущее проекта.

Я думаю всем читателям и [...]]]></description>
			<content:encoded><![CDATA[<p>Я долго думал — чего же еще написать такого весьма интересного — перелопатил довольно большое колличество статей по юзабилити (английских и русских), но тема была выбрана весьма спонтанно и неожиданно — я вдруг подумал о том какое же всё таки большое влияние производит выбор цветов, которые будут использоваться, на будущее проекта.</p>
<p><a href="http://www.birzool.com/colorschemer/"><img src="http://img185.imageshack.us/img185/5072/imgbs6.jpg" /></a></p>
<p>Я думаю всем читателям и без того понятно, что цвета не должны раздражать, они должны быть не контрастными в работе с основными разрешениями мониторов посетителей, и т.п. чепуха, которая уже не раз обсасывалась на других блогах. Я не буду повторять их слова, достаточно погуглить.</p>
<p>О чем же я всё таки буду писать? О нескольких сервисах-миксерах — подборщиках адекватных для посетителя цветов, что является несомненно полезным инструментом в работе юзабилиста. Цвета, несомненно, очень <a href="http://www.birzool.com/category/instruments/">важный инструмент</a> в достижении большего удобства на сайте, что ярко доказывает на себе пример <a href="http://www.yandex.ru" title="Яндекс. Найдется всё.">Яндекса</a>. Например — то же цветовое разграничение блоков, которые я мимоходом описал в <a href="http://www.birzool.com/ideal-forms/">заметке о идеальных формах</a>, и собираюсь в ближайшее время занятся продолжением сего вопроса.</p>
<p><span id="more-25"></span></p>
<p>Что такое миксер? Это, если по-простому, смеситель. Неважно чего, но в моем случае это цвета — ведь для того, чтобы получить какой-либо цвет нужно создать комбинацию из нескольких других. Следовательно — нам нужен хороший, и удобный инструмент для этого самого смешивания, причем с обязательно интуитивным интерфейсом, и кучей примочек, реализованных в этом самом интерфейсе, который интуитивный. Мы же юзабилисты, ага.</p>
<p>Дабы мои мысли нашли под собой основание — я заглянул в википедию, чтобы посмотреть — что она выдаст мне по определению «миксер» (. Итак, что мы там имеем:</p>
<blockquote>
<p><strong>Миксер</strong> — малый бытовой прибор предназначенный для взбивания яиц, приготовления напитков, муссов, омлетов, жидкого теста и т.п. Миксеры бывают стационарные и ручные (более распространённые устройства).</p>
</blockquote>
<p>Очень… очень исчерпывающий ответ на столь конкретный запрос. Чтобы в дальнейшем у других людей не было проблем — я создал определение <a href="http://ru.wikipedia.org/wiki/%D0%A6%D0%B2%D0%B5%D1%82%D0%BE%D0%B2%D0%BE%D0%B9_%D0%BC%D0%B8%D0%BA%D1%81%D0%B5%D1%80" title="Мое определение цветовому миксеру">Цветовой миксер</a>.</p>
<p>В первой части этой серии статей я расскажу о программе ColorSchemer Studio от одноименной компании, которая являлась первопроходцем в создании подобных продуктов, колличество которых уже перевалило за несколько десятков, в самых разнообразных видах</p>
<h2> ColorSchemer</h2>
<blockquote>
<h3>Цветовое колесо</h3>
<p>На скриншоте ниже можно взглянуть на самый главный инструмент программы — цветовое колесо. Именно в нем мы будем проводить большую часть своего пребывания в данной программе. Используется он просто — достаточно выбрать цвет, и он покажет наиболее подходящие, и контрастные цвета для него. Всё просто.</p>
<p>Это стартовый инструмент, за которым обычно утекает наибольшее колличество времени — ведь соседний цвет может понравится больше, а у него (у соседнего то бишь) еще несколько более совместимых. В общем — красота, а не инструмент.</p>
<p><img src="http://img521.imageshack.us/img521/7668/osxscreenmainqb8.png" alt="Цветовое колесо" height="546" width="740" /></p>
</blockquote>
<blockquote>
<h3>Цветовые гармонии</h3>
<p>Инструмент «Цветовые гармонии» помогает нам увидеть этапы переходов между двумя основными цветами. Причем выдает этот инструмент 2 вида возможных переходов — темный, и светлый. Удобно.</p>
<p><img src="http://img249.imageshack.us/img249/1518/osxscreenharmzd8.png" alt="Цветовые гармонии" /></p>
</blockquote>
<blockquote>
<h3>Цвета с лучшей совместимостью</h3>
<p>В этом инструменте все просто до безобразия — выбираем цвет, и программа выдает нам цвета, которые лучшим образом подходят для того, чтобы использовать их вместе с оригиналом. Замечу, что сами по себе эти цвета могут быть и не очень красивыми, но вот в использовании вкупе с остальными 5ю — получаются действительно красивые вещи.</p>
<p><img src="http://img174.imageshack.us/img174/792/osxscreensuggdt1.png" /></p>
</blockquote>
<blockquote>
<h3>Photoschemer</h3>
<p>Интересная, и новая функция у программы — взять с фотографии несколько цветов, и сгенерировать на их базе совместимые. Убиваем двух зайцев — на фотографиях в большинстве случаев природные цвета, которые не вызывают отторжения. Как можно увидеть по скриншоту — цвета действительно хорошие, и не пробуют сьесть наш мозг.</p>
<p><img src="http://img136.imageshack.us/img136/5248/osxscreenphotoschemerye6.jpg" /></p>
</blockquote>
<blockquote>
<h3>Цветовой миксер</h3>
<p>Опять простейший, и интуитивно понятный инструмент — загружаем два разных цвета, и получаем разнообразные пропорции от их смешивания. Честно говоря — я ни разу этот инструмент не использовал за ненадобностью. Хотя надеюсь кому-то он всё таки потребуется, иначе бы он не был в составе программы. Возможно художникам?</p>
<p><img src="http://img169.imageshack.us/img169/4092/osxscreenmixerfn7.png" /></p>
</blockquote>
<blockquote>
<h3>Анализатор цветовых сочитаний</h3>
<p>Представим себе, что цветовую подборку мы уже сделали, теперь нужно пожинать плоды. Анализатор сочетаний двух цветов — фоновый и текстовый. Т.е. это лучший инструмент для юзабилистов — подобрав цвет фона можно мигом получить его лучшее сочетание для текста. Супер ведь.</p>
<p><img src="http://img504.imageshack.us/img504/230/osxscreenanalyzerel1.png" /></p>
</blockquote>
<blockquote>
<h3>Быстрое превью</h3>
<p>Мало того, что программа подберет с вашей помощью хорошие цвета, так она еще и поможет их в верном порядке расположить на странице. Используются, кстати, психологические методы для этого инструмента, что любопытно само по себе.</p>
<p><img src="http://img441.imageshack.us/img441/8946/osxscreenpreviewgs3.png" /></p>
</blockquote>
<blockquote>
<h3>Печать</h3>
<p>После того как мы сохранили свою именную цветовую палитру — возможно потребуется её распечатать? И это легко сделать с помощью инструмента Print Your Color Schemes. Этим же инструментом можно перегнать полученные результаты в pdf — отличная возможность, если учитывать, что pdf стандартизировали.</p>
<p><img src="http://img119.imageshack.us/img119/4429/osxscreenprintnk8.png" /></p>
</blockquote>
<blockquote>
<h3>Импорт и экспорт</h3>
<p>Помимо печати было бы неплохо иметь возможность импортировать и экспортировать цвета из того же Photoshop. И нам опять дают эту прекрасную возможность. Вот список, которые совместимы с возможностью импорта-экспорта программы.</p>
</blockquote>
<blockquote>
<p><strong>Импорт:</strong></p>
<p>Организовать импорт можно из любой сайтовой CSS (ну ничего себе…), gif изображения, файла цветовых таблиц (.act), и цветовой палитры photoshop (.aco)</p>
<p><img src="http://img412.imageshack.us/img412/4149/osxscreenimportng3.png" /></p>
</blockquote>
<blockquote>
<p><strong>Экспорт: </strong></p>
<p>Экспортировать можно обратно в любую CSS, или html body атрибуты, в gif изображение, цветовую палитру photoshop, файлы цветовых таблиц, цветовую палитру illustrator (боже, и сюда добрались), Adobe Fireworks, и в Corel Painter</p>
<p>Достаточно обьемный список, не правда ли?</p>
<p><img src="http://img245.imageshack.us/img245/4395/osxscreenexportlm6.png" /></p>
</blockquote>
<p>Также в программу входит сверх-удобная пипетка в качестве бонуса. Её кстати можно скачать отдельно бесплатно.</p>
<blockquote>
<h3>Цена</h3>
<p>Увы и ах — но за программу требуют деньгу, что вполне логично — продукт ведь отличный. Стоит она 49 долларов в обоих вариациях — как для Windows, так и для MacOS (я думаю, многие уже перепугались, глядя на скриншоты, что пользователей windows оставили за бортом. К счастью это не так).</p>
<p>Дабы потестировать программу можно воспользоваться 15-дневной trial-версией, но будет мешать попап при старте программы.</p>
</blockquote>
<p><img src="http://colorschemer.com/images/colorpix_screen_expanded.gif" height="234" width="171" /></p>
<blockquote>
<p>На момент написания статьи была доступна версия 1.5.3 для MacOS, и 1.5.1 для Windows</p>
<p><a href="http://colorschemer.com/colorschemerstudio.exe">Скачать программу можно тут (Windows)</a><span style="font-weight: bold"> (2.1MB)</span></p>
<p><a href="http://colorschemer.com/colorschemerstudio.dmg">ColorSchemer Studio для MacOS X</a> <span style="font-weight: bold">1.1MB</span></p>
<p><a href="http://colorschemer.com/ColorPix.exe">Скачать продвинутую пипетку</a> <span style="font-weight: bold">0.6 MB </span></p>
<p><a href="http://colorschemer.com/galleria.wdgt.zip">Скачать виджет на рабочий стол (Win, Mac)</a> —<span style="font-weight: bold">40 KB</span> — позволяет искать уже готовые цветовые палитры, не отрываясь от рабочего стола.</p>
<p><a href="http://colorschemer.com/order.php?studio=1">Купить программу можно тут </a>&mdash; <span style="font-weight: bold">$49</span></p>
</blockquote>
<blockquote>
<h3>Готовые сочетания</h3>
<p>А теперь самое вкусненькое — на сайте программы просто <a href="http://www.colorschemer.com/schemes/">МОРЕ отличнейших цветовых решений</a>. Дерзайте!</p>
</blockquote>
<h3><a href="http://www.colorschemer.com/online.html">Онлайновая версия ColorSchemer Studio</a></h3>
<blockquote>
<h3>Выводы</h3>
<p>Покупать программу конечно стоит (её разумеется можно и взломать, но это личное дело каждого). ColorSchemer Studio предоставляет море возможностей для юзабилистов, графических дизайнеров, и даже художников. Начинающим тоже стоит её советовать, ведь она поможет нам избежать монстров с непобедимыми цветами. В продолжении ждите 2 веб-инструмента которые справляются с похожими обязанностями.</p>
<p>Но продолжение будет через некоторое время, после одной занимательной статьи, которую вы скоро сможете лицезреть.</p>
</blockquote>
<h3>Тем временем</h3>
<p>1. <a href="http://www.design-freak.com/2008/01/05/plastik-rebus/">Миша Квакин</a> загадал блоггерам ребус, от которого у меня болит голова.</p>
<p>2. <a href="http://s13.by/2008/01/05/xap-vs-sape-i-otnoshenie-k-etomu-delu-yandeksa/">Сергей Чаботько</a> размышляет о XAPE и SAP и о том, как к этому безобразию относится Яндекс</p>
<p>3. <a href="http://blog.dotfix.ru/2008-01-06/nanotech-future-is-coming/">Юра Гугнин</a> пишет о нанотехнологиях, и поражается их настойчивому стуку в наши двери.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.birzool.com/colorschemer/feed/</wfw:commentRss>
		<slash:comments>12</slash:comments>
		</item>
		<item>
		<title>Сумасшедшие яйца</title>
		<link>http://www.birzool.com/crazyegg/</link>
		<comments>http://www.birzool.com/crazyegg/#comments</comments>
		<pubDate>Fri, 28 Dec 2007 20:51:09 +0000</pubDate>
		<dc:creator>Ярослав Бирзул</dc:creator>
				<category><![CDATA[Инструменты]]></category>
		<category><![CDATA[crazyegg]]></category>
		<category><![CDATA[дизайн]]></category>
		<category><![CDATA[инструменты]]></category>
		<category><![CDATA[психология]]></category>
		<category><![CDATA[удобство]]></category>
		<category><![CDATA[юзабилити]]></category>

		<guid isPermaLink="false">http://www.birzool.com/crazyegg/</guid>
		<description><![CDATA[Сегодняшняя моя заметка открывает ни много, ни мало, а новую рубрику под названием «Инструменты». Как можно догадаться — в этой рубрике будет проводится перечисление замечательных, полезных, а главное удобных сервисов, программ, для юзабилистов. Ведь нельзя же все в ручную делать, нужно экономить наше дорогое время, и повышать скорость работы. Вот всякие, разнообразные полезные штучки-дрючки я [...]]]></description>
			<content:encoded><![CDATA[<p>Сегодняшняя моя заметка открывает ни много, ни мало, а новую рубрику под названием «<a href="http://www.birzool.com/category/instruments/" title="Инструменты для юзабилити">Инструменты</a>». Как можно догадаться — в этой рубрике будет проводится перечисление замечательных, полезных, а главное удобных сервисов, программ, для юзабилистов. Ведь нельзя же все в ручную делать, нужно экономить наше дорогое время, и повышать скорость работы. Вот всякие, разнообразные полезные штучки-дрючки я и буду тут описывать.</p>
<p><a href="http://www.birzool.com/crazyegg/"><img src="http://img172.imageshack.us/img172/8434/18274658kc4.png" alt="Сумасшедшее яйцо" /></a></p>
<p>Сегодняшняя заметка будет о сервисе отслеживания активности пользователя — <a href="http://www.crazyegg.com" title="Сумасшедшие яйца">CrazyEgg</a>. Я не знаю кому обязан сервис таким говорящим именем, но оно работает, и хорошо. Запоминается? Отлично!</p>
<p><span id="more-23"></span></p>
<blockquote>
<h3>Что это такое?</h3>
<p>Как уже сказано выше это сервис для отслеживания перемещения пользователей по сайту — кто куда кликнул, какие ссылки наиболее популярные и тому подобная, разнородная информация для юзабилистов.</p>
</blockquote>
<blockquote>
<p>Сервис позволяет отслеживать активность определенных пользователей, и выводить эти данные в различных формах: «инфракрасная» — где чем активнее область, тем она «теплее», салюты (чем активнее область, тем больше конфети), простой список с сортировкой по активности, колбы (чем заполненнее колба, тем активнее область), облака (на мой взгляд наиболее удобный вариант — совмещает в себе все остальные вместе взятые).</p>
<p><img src="http://img179.imageshack.us/img179/4377/heatmaptncq8.jpg" alt="Тепловое отслеживание популярности" /></p>
</blockquote>
<blockquote>
<h3>Для кого это?</h3>
<p>Разумеется сервис изначально планировался как первый помощник для юзабилистов, но пользоваться им может каждый, у кого есть деньги — интуитивный интерфейс, и хороший дизайн дает о себе знать — сервис массово популяризировался пол года-год назад. Относительно недорогой, но уж точно не из дешевых — сервис предполагает собой 4 платных линии и одну бесплатную. Дабы написать этот обзор я не поленился заплатить 19 долларов (в месяц) выбрав средний вариант — для нескольких проектов с включенными дополнительными функциями.</p>
<p><img src="http://img169.imageshack.us/img169/4705/overlaytnhg9.jpg" alt="Отслеживание ссылок" /></p>
</blockquote>
<blockquote>
<p><img src="http://img167.imageshack.us/img167/7254/listtntv0.jpg" alt="Список по популярности" /></p>
<p>Да-да, сервис не бесплатен. Точнее бесплатная возможность потестировать есть, но она немного обрезана (можно отслеживать только 5000 посетителей и всего 4 страницы на сайте (внимание — 4 страницы, а не сайтов), т.е. вполне хватает для того, чтобы понять полезность сервиса).</p>
</blockquote>
<blockquote>
<h3>Зачем это?</h3>
<p>С помощью этого сервиса можно тасовать блоки на сайте, которые полезны пользователям больше всего. Больше не нужно спорить создателям — какой блок где расположить. В этом им поможет <a href="http://www.crazyegg.com" title="Сумасшедшие яйца">Сумасшедшее яйцо</a>.</p>
<p><img src="http://img180.imageshack.us/img180/5938/shareresultstndh7.jpg" alt="Добавление проекта" /></p>
</blockquote>
<blockquote>
<p>Также этот сервис поможет вам понять — в какой зоне сайта лучше всего располагать рекламу, когда в вашем сервисе речь зайдет о монетизации. Ведь альтруизм это хорошо, а деньги на содержание сервиса нужны, и не лишним будет вычислить зоны где реклама будет приносить наибольшую отдачу, и наименьшее раздражение у пользователей.</p>
<p><img src="http://img295.imageshack.us/img295/6378/blockingtnzj4.jpg" alt="еще полезности" /></p>
</blockquote>
<blockquote>
<h3>Как это работает?</h3>
<p>Никаких километровых скриптов вставлять не нужно, достаточно вставиь 2 строчки яваскрипта, и сервис начнет отслеживание. Насколько я понял — исполнительный скрипт работает на сервере <a href="http://www.crazyegg.com" title="Сумасшедшие яйца">CrazyEgg</a>, поэтому ваш сайт от этого в производительности не потеряет ни секунды, а полезность довольно таки большая.</p>
<p><img src="http://img185.imageshack.us/img185/796/archivedreportstnvq0.jpg" alt="управление популярностью" /></p>
</blockquote>
<blockquote>
<h3>Сколько это стоит?</h3>
<p>Как я уже упоминал — сервис далеко не бесплатен, хоть и имеет тестовую-бесплатную версию. Расскажу подробнее о тарификации.</p>
</blockquote>
<blockquote>
<p>1. Бесплатная тестовая версия. Включает в себя возможность отслеживания 5 000 посещений, 4 страницы на сайте.</p>
<p>2. Базовая версия. В этой версии можно отследить 10 000 посещений, и 10 страниц, что вполне достаточно для среднего корпоративного сайта. Стоит базовый комплект — 9 долларов в месяц. В этот комплект включены все дополнительные функции.</p>
<p>3. Версия «Стандарт». В неё входит возможность отслеживания 25 000 посещений на 20 страницах. Вполне подходит для тестирования нового стартапа. Стоит она 19 долларов в месяц, именно её я купил для тестирования сервиса, и написания этого обзора.</p>
<p>4. Версия «Плюс». Отличается от предыдущей возможностью отслеживания 100 000 посещений, 50 страниц. Очень хороший тариф для крупных сервисов. Стоит 49 долларов в месяц. Довольно большие деньги за сервис, но они обычно с лихвой окупаются.</p>
<p>5. Версия «Про». Стоит почти 100 долларов, имеет возможность отследить 250 000 посещений на ста страницах. Тариф подходит для монстров с большой посещаемостью и большим количеством страниц.</p>
<p><img src="http://img166.imageshack.us/img166/8967/notificationstnih8.jpg" alt="Отслеживание статистики" /></p>
</blockquote>
<blockquote>
<h3>Есть и аналоги</h3>
<p>Я не поленился, и собрал еще пару ссылок с аналогами, которые предлагают такие же услуги, но немного дешевле.</p>
</blockquote>
<blockquote>
<p> 1. <a href="https://www.google.com/analytics/home/?hl=en" title="Шикарный сбор и анализ статистики">Google Analytics</a> — бесплатный сервис для сбора и анализа статистики, вывод статистики в наиболее наглядной форме, и без разнообразных рейтингов, счетчиков. Очень подробная и полезная вещь. Рекомендую, т.к. сам пользуюсь им для этого блога.</p>
<p>2. <a href="http://www.mapsurface.com/" title="Сервис для отслеживания популярности блоков на сайте">MapSurface</a> — сам еще не использовал (т.к. предпочел CrazyEgg), но врядли будучи плохим сервис собрал бы множество положительных отзывов. К сожалению он сейчас находится в статусе закрытой беты.</p>
<p>3. <a href="http://sourceforge.net/projects/clickheat/" title="ClickHeat - бесплатный аналог CrazyEgg">ClickHeat</a>&nbsp;&mdash; stand-alone скрипт для ваших страниц. Более простой, чем CrazyEgg, но совершенно бесплатный, что является его плюсом.</p>
<p>4. <a href="http://www.clickdensity.com/" title="clickdensity - сервис отображение популярности элементов на странице">clickdensity</a>&nbsp;&mdash; проект во многом похожий на CrazyEgg (даже ценами), но увы не столь удобный в использовании, как его &laquo;старший&raquo; аналог. А жаль.</p>
<p>5. <a href="http://www.robotreplay.com/" title="RobotReplay - сервис для отслеживания пользовательских перемещений">RobotReplay</a>&nbsp;&mdash; Бесплатный проект по отслеживанию перемещения курсора, и выдачи результатов в сплошном видео-потоке&nbsp;&mdash; удобно, и что немаловажно&nbsp;&mdash; бесплатно. Рекомендую.</p>
</blockquote>
<blockquote>
<h3>Вывод</h3>
<p>Использовать можно, и нужно. Вот только тарифы довольно больно кусаются, но обычно эти деньги потом с лихвой отбиваются на повышении конвертации посетителей в деньги. Использовать сервис нужно для тестирования рекламных мест и удобства отдельных страниц, что помогает опять же повысить конвертацию. В общем и целом — <a href="ttp://www.crazyegg.com">полезная вещь</a> для каждого владельца сайтов, а для юзабилиста вообще практически обязательна. К счастью для людей, которые поиздержались деньгами в этом месяце — есть полезные аналоги.</p>
<p><img src="http://img241.imageshack.us/img241/2346/confettitnml5.jpg" alt="Интересная идея визуализации популярности - конфети" /></p>
</blockquote>
]]></content:encoded>
			<wfw:commentRss>http://www.birzool.com/crazyegg/feed/</wfw:commentRss>
		<slash:comments>16</slash:comments>
		</item>
	</channel>
</rss>
