Избранное

Бочка — чёрная

Не понимаю ребят, которые красят бочку красным. Бочка — чёрная!

Интересно, кто-нибудь ещё читает блог... :-)

#666

cover white transparent

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

Дизайнеры забывают, что мы живём не в виртуальной реальности. Между монитором и глазами есть воздух, от глаз до мозга тоже не близкая дорога, за окном светит солнце, ночью в мониторе отражается торшер, на мониторе пыль, да и откалиброван он хреново. А кто-то вообще дальтоник. Природа сама подмешает всякого разного в ваши #000, #666 и #FFF — и цвета, и шума — никто не увидит их такими же, как видели вы в своём воображении.

Не стесняйтесь, используйте чистые цвета. Не страдайте, проверяя всю палитру на наличие в ней ровно трёх процентов серобуромалинового. Будьте проще. Камон.

Что такое хорошо и что такое плохо

Не вникать в смысл дизайна, забывать о полезном действии и верстать макет по пикселям, в лоб. Плохо.

Понимать задачу. Писать спецификации до начала работы. Хорошо.


Полагаться только на свои силы. Плохо.

Общаться с коллегами. Радоваться их успехам. Помогать в трудную минуту. Хорошо.


Надолго застревать на сложных элементах и не обсуждать решение или возможность упрощения. Плохо.

Планировать время, делать работу в срок без начальника с палкой. Хорошо.


Валить вину на других. Тыкать пальцем и не предлагать решения. Говорить «так было в дизайне». Плохо.

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


Паниковать. Смотреть телек. Плохо.

Отдыхать. Точить пилу. Хорошо.


Радоваться чужим ошибкам. Критиковать, держать обиду. Плохо.

Брать ответственность на себя, руководствоваться принципами «если не я, то кто?» и «сделать, а потом извиниться». Хорошо.


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

Видеть проблемы там, куда не добрался дизайнер. Хорошо.


Хранить удачные решения и трюки в секрете. Плохо.

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


Психовать, когда арт-директор с дизайнером переделали макет целиком. Плохо.

Не успокаиваться и улучшать продукт после релиза. Хорошо.


Закрывать глаза на стиль кода, использовать нечитаемые названия переменных и классов. Плохо.

Документировать. Хорошо.


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

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


Не заботиться о деградациях. Плохо.

Заботиться о доступности данных. Хорошо.


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

Расставлять приоритеты, отсекать лишнее. Меньше обещать. Хорошо.


Ничем не интересоваться, работать по старинке. Пренебрегать семантикой и микроформатами. Плохо.

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


Не усложнять жизнь, забывая об исключениях, изменяемых данных, пользовательских ошибках. Плохо.

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


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Плохо.

Придумывать уместные анимации интерфейса, не требуя разжевать каждый кадр. Хорошо.


Не оптимизировать разметку, картинки, стили и скрипты. Плохо.

Бороться с рутиной автоматизацией и готовыми решениями. Хорошо.


Думать, что «кроссбраузерно» — одинаково во всех браузерах. Плохо.

Писать автоматические тесты, тестировать руками, не полагаться только на тестировщиков. Хорошо.


Не делать собственные проекты. Плохо.

Пользоваться своими интерфейсами. Хорошо.


Притворяться хорошим. Плохо.

Видеть, в чём сегодня был недостаточно хорош, и завтра становится лучше. Хорошо.

Тюнер

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

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

Я мог час крутить колки и всё равно остаться недовольным. Грешил я, конечно, на инструмент. Однажды я полдня провёл в гитарном магазине, но так и не нашёл гитары, которая по-настоящему строит...

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

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

Используйте тюнер, так делают все профессионалы. Вы удивитесь, ваша гитара, оказывается, строит.

Константино-польский

Повторим урок про Константинопольского и невлезающий текст.

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


1. Переносите его на следующую строчку:


Но не забывайте про декоративные элементы:

Ничего не должно ломаться, если текст вдруг стал длиннее:

2. Когда структура страницы почему-то не допускает переносов, прячьте второстепенные слова, размеченные заранее:

3. Или делайте фейдаут:

Продублировав текст во всплывающей подсказке, элементарном title:

Кстати, кроме фейдаута ещё есть тень, не такой затёртый приём:

4. Нельзя переносить, резать и прятать — уменьшайте кегль, как на сайте «Я расту»:

Технолог — тоже дизайнер

В начале октября я попробовал себя в роли докладчика на фестивале «404» в Самаре. Видео моего доклада недавно появилось на Вимео:

Какие-то враги отрезали ему «Яйца» — так называлась последняя часть. Сейчас перескажу её здесь.


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

На сайтах такие секреты редки, но почему бы, если проект готов, и осталось немного сил, не сделать что-нибудь весёлое? Тем более, что здесь вы предоставлены сами себе.


На «Техкранче в Москве — 2010» был такой календарик:

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

Пасхальные яйца — это своеобразные шутки для внимательных пользователей. И хороший повод написать в твитер.


Вот я специально к фесту запрятал яичко на сайте Бюро, моё имя там тоже есть:


Хорошо дизайнит тот, кто дизайнит последним :-)

2012   404   доклад   я

Альтернативный способ подчёркивания текста

Однажды на сайте студии Лебедева изменился стиль ссылок, было text-decoration: underline, а стало border-bottom: 1px solid c более бледным цветом:
Новые ссылки на сайте студии

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

Ощущения прыгающей строки не было бы, если голубая линия стояла выше, там же где и нативное подчёркивание. Но как этого добиться? Надёжно управлять позицией border-bottom не возможно; перекрасить text-decoration можно с помощью вложенного элемента, но такое подчёркивание будет перекрывать нижние выносные элементы букв.
Перекраска underline с помощью вложенного элемента

Короче, задача показалась мне интересной, и я написал твит:
Кто первый придумает как забледнить обычный text-decoration: underline, тот молодец, border-bottom сосёт.

Кроме ответов про вложенный элемент, было два, которые и вдохновили на эту заметку.

1) Вадим Макеев написал про светлое будущее:
@pepelsbey: По хорошему, это делается при помощи text-decotation-color из CSS3 Text — http://dev.w3.org/csswg/css3-text/#text-decoration-color
2) Сергей Чикуёнок предложил решение для сурового настоящего через хитрые градиенты, причём он не ограничился сплошной линией, и показал ещё пунктир и точки:
@chikuyonok: Сделал пример с различными стилями подчёркивания ссылок с помощью CSS-градиентов — http://jsfiddle.net/yyHNp/5/
Это решение позволяет удобно управлять цветом, позиционированием и стилем линии, но не работает в старых браузерах. Для совместимости с динозаврами вместо градиентов можно использовать не столь гибкие картинки, как в моём примере border-bottom vs. background.

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

Скоростная вёрстка

Вот как надо верстать.

Берём макет, открываем и сразу сохраняем его через Save for web (само название этого окошка как бы намекает):
Скоростная вёрстка

Вставляем картинку в код:
Скоростная вёрстка

Сайт уже почти готов, осталось добавить немного навигации, для это как раз есть чудо-теги map и area:
Скоростная вёрстка

Тадам! Cайт готов, можно даже по страничкам походить и от копипаста защитились, это же важно.
Скоростная вёрстка

Аква-кнопки и ещё

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

Чуваки, которые так делают, вы почему это делаете? Потому что не знаете, как выглядят элементы интерфейса на Маке и думаете, что это дизайнер такую спец. кнопочку изобрёл? Или вам кажется, что этой красотой надо поделиться и с пользователями Виндоус Экспи? Или вас кто-то заставляет?

Зря скруглённые поля
Зря скруглённые поля

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

Аква-кнопки и ещё
ИЕ 6, Виндоус Экспи

Аква-кнопки и ещё
Опера 9.64, ФриБСД 7.0

Аква-кнопки и ещё
Сафари 5.1, Мак ОС Лев

Спасибо, Капитан Очевидность

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

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

Х*й, бл@!

Вот Коля Митин пишет в твитере:

> Я никогда не понимал почему хуй — плохо, а х*й — нормально. Какая разница какие символы я использую, если всем понятно, что именно я пишу?

Всё совсем наоборот — хуй гораздо лучше х*я.

Сам я редко матюгаюсь, но к мату отношусь без чванливого ханжества. То есть если кому-то нужны эти слова для выражения своих мыслей и эмоций, окей — их право. Но когда человек начинает дебильными звёздочками, собачками и диезиками шифровать слово, да так, чтобы оно при этом оставалось понятным, он, сука, заставляет меня генерировать это слово в своей голове. Перекладывает ответственность на меня, а сам не при делах, типа. Ну не мудак ли такой автор?
Ctrl + ↓ Ранее