Блог Ильи Новикова: заметки с тегом дизайн

20 выводов после Школы редакторов

Thu, 21 Oct 2021 20:46:52 +0100

Школа редакторов Бюро Артема Горбунова — это онлайн-курс, на котором я изучал интерфейсы, верстку, редактуру, переговоры и управление проектами. Занятия у моего потока длились 9 месяцев в 2019-2020 годах. По итогам учебы выступил с докладом перед коллегами о том, как делать лучше любую работу. Ниже конспект.

На полуторной скорости доклад можно послушать за 10 минут

Интерфейс

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

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

Человечность: пользователь вводит в строку поиска что угодно, а дальше машина сама определит, что он имел в виду. Если пользователь не получил сразу нужный результат, он может настроить дополнительные фильтры.

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

Верстка

Не нарушать правило внутреннего и внешнего. Вы читаете абзац текста. Расстояние между строками этого текста называется интерлиньяж. Это пример внутреннего. А внешнее — это все, что вокруг, например расстояние до подзаголовка «Верстка» ↑ или до следующего абзаца ↓. Правило: внутреннее всегда должно быть меньше, чем внешнее. Тогда связанные объекты будут восприниматься как единое целое, а не связанные — разделятся. Так макет не развалится.

Ставить якорные объекты по углам и в центре. Якорные объекты — самые крупные и заметные элементы в макете: картинка, заголовок, логотип, абзац текста, если он всего один. Их нужно расставлять по углам или в центре макета. Тогда он будет работать.

Редактура

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

Переговоры

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

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

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

Управление проектами

Не делать, а сделывать. Классический пример: жена просит мужа купить батон. Он идет, а там длинная очередь, и он не хочет в ней стоять. Это значит, что он не сделал. Или он покупает темный хлеб вместо батона. Это значит, что он не сделал. Или, например, магазин закрыт — он ничего не покупает. Это тоже значит, что он не сделал. Точно так же в работе: если ты попытался сделать задачу, это еще не сделывание.

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

Практика

Плясать от иллюстраций. У нас была задача — сделать страницу магазина электроники. Нужно было рассказать о магазине, доставке, ассортименте. На первой итерации я написал текст для страницы, а вместо иллюстраций вставил эмодзи. Так я сэкономил время и, к тому же, как мне казалось, выступил в общем тренде. Но это не прокатило: за работу я получил 2,5 балла из 5.

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

За первую работу я получил 2,5 балла, за вторую — 4,5. Так я понял, что иллюстрации — самая важная часть информационного продукта

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

Я получил за вторую работу 4 балла из 5, потому что сделал фото контрастнее по сравнению с текстом

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

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

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

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

За эту работу я получил 4 балла, потому что хорошо показал безопасность кондиционера на иллюстрациях и сравнил с другими вариантами

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

Сверстал модулями, но получил только 3,3 балла из-за проблем с отступами

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

Получил 4 балла за эту работу, потому что учил играми

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

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

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

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

Проект

Не браться за нереальное. На третьей ступени мы делали дипломный проект с арт-директором Максимом Ильяховым — сервис жалоб «Накатал». Мы сразу планировали много — за три недели сделать сайт, собрать 30 жалоб, написать 2-3 статьи в блог. Ильяхов не принял такой план. Даже если бы мы успели все это, он просто не смог бы согласовать. В итоге мы запланировали всего лишь 10 жалоб с дизайном и продвижением. Когда нас уже допустили к защите, мы доделали еще 10 — итого получилось 20 штук. Важно не только сделать задачи, но и согласовать ее с клиентом. На это тоже должно быть время в проекте.

Самым сложным оказалось написать реалистичный план и утвердить с арт-директором — на это ушло аж две недели

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

Первое время мы пытались согласовывать правки тестом в чате. Если бы продолжали так и дальше, то провалили бы проект

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

См. также
Семь конспектов лекций «Медузы» — иноагента

Илновиков 2.0

Mon, 23 Apr 2007 00:07:35 +0100

Девяностая статья! Как вы уж могли заметить, «Илновиков» со всем редакторским составом (один человек) несколько месяцев находился в вынужденном отпуске, из которого выходит как раз сегодня, обещая публиковать время от времени в меру интересные материалы и анонсы текстов, выходящих в других изданиях (да, я с удовольствием пишу за деньги).

Подавляющее большинство предыдущих текстов публиковались, рассылались по RSS и комментировались за счет лежавшего в основе «Илновикова» Textus CMS, системы управления контентом, когда-то купленной у Дмитрия «Spectator» Смирнова (кстати, он тоже возобновил публикации в своем блоге, инджой) и, увы, совершенно устаревшей с тех времен. Помимо этого, «движок» Смирнова, как и любой уникальный движок для всех видов блогинга, совсем не был заточен под этот сайт, а, соответственно, каждый раз приходилось делать массу ненужных телодвижений.

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

Ajax — веб-приложение, в котором используются технологии обращения к серверу без перезагрузки страницы.

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

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

То, что у нас получилось, мне самому нравится настолько, что я даже готов повторить это еще раз, отдельным абзацем с восклицательными знаками. Алексей Скрипник! Сергей Коровкин! Спасибо вам!

Пунктуационные извращения

Sat, 09 Dec 2006 06:35:22 +0100

Чтобы не искать «того англичанина, который…», лучше сразу скажу, что в русском интернете извращаться над пунктуацией придумал Артемий Лебедев, просто предложив использовать книжные правила на вебе. У него я впервые прочитал об экранной типографике, правила которой заключаются в правильных кавычках, тире и привязке союзов и частиц. То есть не такое уж это и извращение, а просто приятное для глаза написание пунктуационных знаков. Но любой средний россиянин, прочитав мою статью, скажет что-то вроде: «Пока я тут пашу с утра до вечера, вы, тупые эстеты, спорите, как правильно тире писать» — это, собственно, и заставляет меня так её озаглавить.

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

И если вы почему-то не знаете языка html, то отмечу, что для всех пробелов, тире, дефисов или кавычек есть специальные обозначения. Вот вам некоторые из них:

&laquo; левая кавычка (левая ёлочка)
&raquo; правая кавычка (правая ёлочка)
&#133; многоточие
&#132; открывающая лапка
&#147; закрывающая лапка
&#150; дефис
&minus; минус
&#151; тире
&nbsp; пробел

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

Исключение из текстов недобуквы ё — не совсем пунктуационное извращение, но о нем нельзя ни упомянуть. Принято считать, что нормального человека эти две точки сверху только отвлекают (вáм комфóртно читáть, напримéр, тéкст с указáнием ударéния?).

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

/* Висячая пунктуация © Студия Артемия Лебедева */
font.slaquo {margin-left: 0.44em}
font.hlaquo {margin-left: -0.44em}
font.sbrace {margin-left: 0.3em}
font.hbrace {margin-left: -0.3em}

И впредь делать такие замены (у меня они происходят автоматически):

<p> « → <p><font class="hlaquo">&laquo;</font>
« → <font class="slaquo"> </font> <font class="hlaquo">&laquo;</font>
(→ <font class="sbrace"> </font> <font class="hbrace"> (</font>

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

Иллюстратора!

Wed, 11 Oct 2006 09:17:37 +0100

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

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

А не далее, чем вчера открылся Illustrators.ru, оформленный студией «RedKeds» и поддерживающийся талантливыми иллюстраторами.

Картинка, illustrators.ru

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

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

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

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

Но в любом случае — будет следить за этим проектом. А картинка ниже должна просто подтвердить все сказанное мной.

Иллюстрация, Александр Житомирский

Что смотреть: логотипы

Fri, 22 Sep 2006 22:08:56 +0100

Скучновато как-то, в последнее время. Вот, зашел даже на Lenta.ru, в надежде увидеть что-нибудь похожее на «мальчик запертый в холодильнике съел свою ногу», но и на «Ленте» ничего нету.
Йован Савович

Интересно, как точно Йован почти пять лет назад описал положение дел на этой неделе (кстати, раз уж мы заговорили об этом талантливом сербе, он же сделал и отличную пародию на Lenta.ru). Вот только на «Ленте» в наше время никто и не надеется увидеть что-то забавное, но зато ее редакция пару дней назад порадовала нас бумажным дайджестом за семь лет, который я считаю обязательным для скачивания (~0,75Мб).

Ну, а когда скучно мне, я вовсе не захожу на Lenta.ru, а совсем наоборот — делаю то, что многим людям кажется самым неинтересным в мире занятием — смахнув слой пыли с экрана, включаю телевизор. И первое, на что автор обратил внимание в этот раз — это обновление фирменного стиля некоторых каналов.

Возвращаясь к дайджесту «Ленты», хочется вспомнить себя в 1999, но память позволяет сказать наверняка только одно: я понятия не имел, что такое ребрендинг. Это уже не говоря о том, что автор толком не понимал смысл сотовой связи и уж тем более не знал ни про какой «Билайн», который и начал то, результаты чего мы теперь встречаем в виде яиц на красном фоне, игривой надписи «Альфа-Банк» и, конечно же, красочных логотипов в углу телевизионного экрана.

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

НТВ, логотип

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

Первый канал, логотип

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

ТНТ, логотип

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

РЕН ТВ, логотип

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

ТВЦ, логотип

Обновленный логотип ТВЦ выглядит значительно лучше предыдущего и выполнен в стиле «яйцо на красном фоне», правда, почему-то очень смахивает на «Квингруп» Студии Лебедева. Но кроме красивого логотипа и пары хороших заставок нет ничего, что бы заставило меня хоть изредка заглядывать на ТВЦ.

СТС-Москва, логотип

Неплохой фирменный знак первого развлекательного.

ТВ3, логотип

Логотип, вполне соответствующий каналу, демонстрирующему хорошие старые фильмы и «Клан Сопрано».

Россия, логотип

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

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

Монитор, как у Гейтса

Tue, 12 Sep 2006 11:35:46 +0100

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

Но прежде, позволю себе небольшое лирическое отступление.

В последнем интервью журналу Fortune глава Microsoft, Билл Гейтс, рассказал о том, как он работает. По словам, пожалуй, самого проклинаемого человека на Земле (говорят, по статистике, произносится минимум три ругательства в секунду в его адрес, часто с обилием непечатных слов), на его столе стоят три больших монитора, подключенных к процессору. На левом экране открыта папка входящих писем, на центральном красуется письмо, которое самый богатый человек в мире вот прямо сейчас читает, а на правом — окно браузера (надо думать, сам он пользуется чем-то поудобнее Internet Explorer). Но основной кайф в том, что разные объекты можно перетаскивать с одного дисплея на другой.

Билл Гейтс на рабочем месте, фото Робина Твомей

А на днях малоизвестная компания Seamless Display анонсировала новый жидкокристаллический монитор Radius 320. И на это не стоило бы обращать внимания, если бы устройство не было диагональю 50 дюймов, что по размерам сравнимо только с гейтсовскими выстроенными в ряд дисплеями (чем, по сути, оно и является). Но стоит упомянуть более понятный для всех параметр — разрешение экрана составляет 4800×1200 пикселов.

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

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

Radius 320, монитор

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

Штрихкодовая революция

Thu, 07 Sep 2006 07:58:16 +0100

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

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

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

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

Презентация Barcode Design, кадр

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

Штрихкоды, Barcode Design

Разумеется, такая красота не мешает считыванию со штрихкодов информации.

Шесть приемов дизайна 2.0

Thu, 24 Aug 2006 08:42:43 +0100

Когда-то мы все писали в LiveJournal, комментировали посты на dirty.ru, использовали ключевые слова при постинге в блоге, да и вообще делали много других обычных вещей. А потом какие-то люди ~~пришли и все испортили~~ назвали это «вебом 2.0», который за полтора года успел набрать бешенную популярность, стать неинтересным для инвесторов, ненавидимым снобами и даже матерным словом хуже «маркетинга».

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

Логотип в стиле веб 2.0

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

Особенность 1. Пастельные тона
Просто приятные глазу цвета, которые в общем-то использовались и раньше. Особенно популярны голубой и розовый; и их сочетание (вспомните хотя бы flickr.com).

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

Особенность 3. Тени
Едва заметные тени у основных элементов сайта — ленты новостей, важных блоков и так далее. Как и много лет назад, их принято рисовать вручную, убивая на это уйму времени. Хотя и обыкновенные тени, которые может сделать Photoshop вполне приемлемы.

Особенность 4. Плавный градиент
Легкий перелив пастельных тонов из светлого в темный (обычно сверху вниз). Не придает ни объема, ни каких-либо ещё эффектов, просто приятная штука.

Особенность 5. Округлость элементов дизайна
Сглаженные углы основной ленты, навигации или кнопок (который кстати, должны быть огромными, просто огромными). Можно использовать прямоугольный блок, а в нем — элементы с закругленными углами, или наоборот, неважно.

Особенность 6. Шрифт без засечек
Шрифты из серии Sans Serif: Verdana, Arial, Helvetica. Считается, что текст, написанный крупной Верданой читать удобнее всего (не на бумаге, конечно, только на вебе). Кроме того, сейчас начинается мода на Arial.

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

В общем, веб 2.0 принес простой и приятный дизайн с минимальным количеством графики, который почти полностью исключил flash- и gif-анимацию, java-аплеты и прочую никому ненужную фигню.

К слову, на страницах «Илновикова» с самого начала используются третья и последняя особенность. Но у меня тут не веб 2.0, о нет.

Клавишные новости

Fri, 18 Aug 2006 22:18:36 +0100

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

Сегодня утром на сайте Студии Артемия Лебедева появилась ссылка на фотоотчет первого обладателя Optimus Mini Three, который сделал снимки фирменной коробки и прибора в действии. Напомню, что «Оптимус Мини» — это небольшой гаджет с тремя чувствительными дисплеями, который можно использовать как панель управления, пульт или простой индикатор времени, погоды, свежей почты или чего угодно еще. Да, его почему-то принято называть «клавиатурой».

Optimus Mini Three, фирменная коробка

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

Вторую новость вы наверняка уже ни раз видели — некто Питер Хинтьенс со своими друзьями организовали сообщество CAPSoff, которое борется с клавишей Caps Lock. Эти люди считают, что она совершенно бесполезна и не должна находиться на клавиатурах вообще, и уж тем более на таком видном месте. Кто-то предлагает просто коллективно отодрать беззащитную кнопку со своих клавиатур. Но один из гуманных вариантов расправы с клавишей — просто перенести её наверх и вправо, к кнопке Scroll Lock и другим. Тогда она не будет мешать нормальным людям, но по-прежнему останется доступной программистам и спамерам, которым нужно писать БОЛЬШИМИ БУКВАМИ.

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

Ну и наконец то, что я оставил на десерт — программа установки типографической раскладки на клавиатуре, написанная Ильей Бирманом, которая позволяет двумя-тремя клавишами вводить типографические знаки — правильные кавычки, тире и вообще все, о чем я уже как-то раз рассказывал. То есть, она добавляет каждой клавише ещё по два символа, которые будут вводиться при удерживании Alt Ctrl и Shift.

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

Типографская раскладка клавиатуры, Илья Бирман

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

Логотипер

Thu, 27 Jul 2006 06:19:59 +0100

Знаете ли вы, что 22 мая был день рожденья Артура Конан Дойла? Нет? Я бы об этом тоже вряд ли узнал, если б не Google.

Google, логотип

Если вы вдруг Google не пользуетесь, и не понимаете, о чем я, то, во-первых, зря вы так и, во-вторых, об именинах писателя мне стало известно из логотипа поискового гиганта, который в этот день обзавелся силуэтом Шерлока Холмса и британским фонарем, вместо букв o и i, соответственно. Но наверняка большая часть моих читателей знает, что такие метаморфозы происходят у Google почти каждый праздник. И все они хранятся на специальной странице.

А на днях CNN, которой, видимо, со всем уже нечего писать, разоблачила художника, который подрисовывает всю эту мишуру, хотя его имя было известно ещё года два-три назад. Его зовут Денис Хванг (Denis Hwang) и он в Google работает, как ни странно, программистом. То есть, конечно, он не совсем любитель и не подрисовывает все это от нечего делать, нет. Хванг закончил художественную школу, а выучил C++ (или на чем они там пишут?) и устроился в поисковый гигант программистом уже потом.

Когда у создателей Google, Сергей Брина и Лари Пейджа, появилась идея издеваться время от времени над своим логотипом, они наняли нормального художника. А в один прекрасный день Дениса попросили доработать присланный художником логотип. И если в двух словах — потом от услуг профессионала пришлось отказаться. С тех пор он и есть «самый известный и в тоже время самый неизвестный художник в мире».

Разумеется, все его работы проходят модерацию Брина и либо попадают на заглавную поисковика, либо — «в стол». Каждый год даже для одного и того же события рисуются все новые картинки. Например, в День Святого Патрика он покрыл Google зарослями, а в День Матери обошелся двумя алыми розами.

Отдельно стоило бы отметить логотип ко дню начала Чемпионата Мира по футболу — кроме банального мяча, там есть человек, который явно бьет кого-то головой в живот. Потрясающее совпадение, не правда ли?

Google, логотип

Также советую посмотреть логотипы, которые в Google прислали посетители.

Жгун жжот

Sun, 18 Jun 2006 13:22:42 +0100

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

Для тех, кто не понимает, о чем я, расскажу. В детстве Егор любил перерисовывать картинки из журналов «Мурзилка» и «Крокодил». Пару лет назад начал рисовать в CorelDraw осмысленно, год назад что-то начало получаться. Во всяком случае, так Жгун пишет о себе. В действительности он пользователь-тысячник LiveJournal.com и известный на вебе художник, с недавних пор работающий в Студии Лебедева штатным иллюстратором. Как уже было написано выше, на днях он открыл обновленную версию своего сайта, где уже выложил почти все свои работы. Иллюстрации распределены по трем разделам — «Афиши», «Не афиши», «Разное» — их реально много, что заставляет меня добавить «трафик! трафик! трафик!». Новый Zhgun.Ru работает на специальном движке, который написал его брат, Глеб Жгун, поэтому логотип в шапке и стрелочки внизу по бокам периодически меняются со стандартных на те, которые нарисовали Яна Франк, Олег Тищенков, Артемий Лебедев, Владимир Камаев и другие друзья Егора.

Теперь по воскресеньям я буду писать то, что интересно мне одному (все равно в эти дни меня никто не читает) или проводить какие-нибудь незамысловатые опросы. Ниже — одна красивая картинка, которая, по-идее, должна заставить вас сходить по всем ссылкам выше.

Иллюстрация, Егор Жгун

Знак рубля

Wed, 14 Jun 2006 05:35:59 +0100

Вчера наш любимый президент подписал закон «О внесении изменения в статью 4 Федерального закона „О Центральном банке Российской Федерации“», согласно которому Банк России наделяется правом утверждать графическое обозначение рубля в виде специального знака. Теперь, как вы понимаете, только осталось придумать и нарисовать этот самый знак. Кто этим будет заниматься примерно известно, а вот как он будет выглядеть остается только догадываться, чем я и займусь в этой заметке.

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

Предположим, что Банк России довольно консервативен, и знак будет похож на все остальные (далеко не во всем требуется какой-то креатив) иностранные символы — доллар, евро и другие. Соответственно, обычная буква и двойное (или одинарное) зачеркивание, которое ещё и выполняет функцию ножки от R.

Знак рубля, мой вариант

В следующем варианте русский увидит «Ру», а иностранец R со свойственным для таких знаков одинарным зачеркиванием.

Знак рубля, мой вариант

Кроме народных акций, свой вариант представил и российский ведущий веб-дизайнер Артемий Лебедев.

Знак рубля, вариант Лебедева