Kirill Kuznetsov, portfolio

Самоочевидные иконки

2011-04-14T22:24:00+03:00

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

Дело было в конце прошлого века: кому-то (возможно, Тёме) пришла идея заменить встречающиеся из проекта в проект ссылки «Главная», «Поиск», «Написать письмо» пиктограммками «Дом», «Лупа», «Конверт» соответственно. Чуть позже или почти сразу стали изображать иерархию квадратиков вместо ссылки «Карта сайта», тележка стала синонимом «Покупательской корзины», а пользователь стал изображаться как некий полуовал с кружком наверху.

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

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

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

На данный момент базовые иконки распространены повсеместно, переместившись из систем навигации в GUI (лупа в поисковой строке например). Фактически произошли глобальные изменения пользовательского сознания: указанные выше иконки теперь воспринимаются как некая данность виртуального мира, общее место оформления веб-интерфейсов.

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

Pluxfolio — версия 0.42

2010-11-12T12:00:00+03:00

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

Проект Pluxfolio получил новый импульс развития — теперь системой будет полноценно заниматься камрад bender.rodriges. Бендер жжёт.

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

По Pluxfolio также будет вестись страница на гугл-коде.

Следите за развитием событий.

В продолжение предыдущей статьи

2010-11-02T13:47:00+03:00

Спустя полгода ответственно заявляю: самый лучший способ работы с кастомными шрифтами — их выгонка под веб-форматы. Делается это проще и удобнее всего в пару кликов через сервис Font-Face Generator на сайте FontSquirrel.

Поймайте свою белочку.

CSS+HTML знак рубля

2010-05-14T22:06:00+03:00

Наверно каждый дизайнер (по крайней мере, до внесения знака рубля в таблицу Unicode) должен найти свой вариант отображения знака рубля на веб-странице. Кто-то использует картинки, кто-то внедряет шрифты, кто-то извращается с DTD, а я просто соединил 2 символа, букву Р и длинное тире.

Код CSS:

body { margin: 0 auto; padding:0} p.rubl { letter-spacing:-1em; padding:0; margin:0 auto; width:1em; height:1em; position:relative} p.rubl span { font-size:3em;} p.rubl span + span { font-size:1.6em; position:absolute; left:0; top:.7em;} @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { p.rubl span + span {top:.6em; } /* opera */ } *:first-child+html p.rubl span + span { top:.6em; } /* ie 7 */

HTML разметка всего из одной строчки.

А вот и живой пример знака рубля (точнее — его «быстрорастворимый» вариант). Мои 5 браузеров и бол-во тестов на browsershots.org данный код проходит весьма успешно, за редким исключением навроде хардкорных сочетаний Konqueror\Ubuntu. Плюс этого метода в том, что размеры задаются в масштабируемых единицах, и поэтому в IE7 например увеличение-уменьшение размера шрифта проходит «на ура». Прошу тестировать.

Про портфолио

2010-04-20T22:39:00+03:00

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

футболки с типографикой

2010-01-07T21:13:00+03:00

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

«1С-Битрикс: Корпоративный портал»

2009-12-02T19:10:00+03:00

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

Респект разрабам.

Pluxfolio — версия 0.2

2009-08-24T14:56:00+03:00

На официальном сайте движка доступна новая версия.

В Pluxfolio версии 2 все ключевые процессы оптимизированы — теперь управление работами стало ещё проще и удобнее. Вы создаете галерею — синхронно на сервере создается одноименная папка. Кидать полноразмерные работы в эту папку можно как через админку (на странице Картинки), так и через FTP. Вы заходите браузером в вашу новую галерею — в ней на лету создаются превьюшки работ и обновляется счетчик работ.

Размеры превьюшек теперь задаются в админке (Настройки — Настройки контента).

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

Вторая версия движка весит на 20 килобайт меньше первой.

Спасибо Максиму Белкину.

Растём…

2009-08-10T14:05:00+03:00

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

HTML 5 уже здесь!

2009-08-05T22:34:00+03:00

Как известно, рабочая группа W3 консорциума обещает разродиться языком разметки HTML 5 уже в 2022 (две тысячи двадцать втором) году, но в сети уже появился прекрасный пример документа, размеченного по лекалам HTML 5й версии и третьего CSS.

Код просто песня, явное сближение с XML, приведу только один отрывок:

<header id="banner" class="body">
    <h1><a href="#">Smashing HTML5! <strong>HTML5 in the year <del>2022</del> <ins>2009</ins></strong></a></h1>
    <nav><ul>
      <li class="active"><a href="#">home</a></li>
      <li><a href="#">portfolio</a></li>
      <li><a href="#">blog</a></li>
      <li><a href="#">contact</a></li>
    </ul></nav>
  </header>

  <aside id="featured" class="body"><article>
    <figure>
      <img src="images/temp/sm-logo.gif" alt="Smashing Magazine" />
    </figure>
    <hgroup>
      <h2>Featured Article</h2>
      <h3><a href="#">HTML5 in Smashing Magazine!</a></h3>
    </hgroup>
    <p>Discover how to use Graceful Degradation and Progressive Enhancement techniques to achieve an outstanding, cross-browser <a href="http://dev.w3.org/html5/spec/Overview.html" rel="external">HTML5</a> and <a href="http://www.w3.org/TR/css3-roadmap/" rel="external">CSS3</a> website today!</p>
  </article></aside>

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