Проектирование — этот, возможно, ключевой этап создания интернет-сайта, отвечает нам на следующие вопросы:

1. Каковы наши цели — зачем мы делаем сайт? Как мы реализуем поставленные цели?
2. Как сайт будет выглядеть и работать?

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

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

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

• Не ограничивайте общение перепиской
• Объясняйте клиенту рабочий процесс
• Главный вопрос на все случаи жизни: «Какова цель?»

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

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

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

В настоящее время подобные сервисы активно развиваются. Крупнейший из них, Typekit, содержит на данный момент 376 шрифтов от более чем 30 производителей. Но вот незадача: Typekit пока поддерживает только подмножество Latin-1, хотя и работает над добавлением поддержки других подмножеств Unicode.

Что же прямо сейчас делать нам, пользователям кириллицы?

Оригинальное название статьи, «Designing for the switch» содержит игру слов и говорит а) о разработке дизайна в эпоху перемен — перехода к нормальной поддержке подгружаемых шрифтов у всех пользователей, и б) о нюансе «моргания», смены шрифта при его подгрузке с помощью @font-face. Вообще говоря, на русском языке достаточно мало информации об опыте и нюансах использования @font-face, поэтому этим переводом я предлагаю начать генерировать более-менее содержательное информационное поле на эту тему. Heath

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

Да, мы были избалованы. Чтобы использовать Вердану, Джорджию или Камбрию, нам не приходилось думать.

Однако дизайнерам долгое время казалось, что им нужно большего. Мы хотим использовать любой шрифт, который нужен нам для нашего дизайна. Мы много нехорошего натворили, пытаясь достигнуть этой цели — например, помещали текст в картинку. Люди поумнее придумали вспомогательные инструменты типа sIFR или Cufón. С совсем недавнего времени большинство браузеров поддерживает @font-face. Плотина открывается. Это рассвет новой эры веб-типографики, и мы обязаны ступать в неё с осторожностью.

За последнее время ситуация с типографическим оформлением сайтов потихоньку начинает улучшаться, но «средняя температура по больнице» растёт очень неуверенно. И в беседах с разными людьми я не раз слышал вопрос: «А зачем вообще заморачиваться с типографикой на сайте?»

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

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

Оказывается, это может быть не просто крышесносно, но ещё и полезно. Как система навигации в паркинге небоскрёба Eureka Tower, самого высокого в Мельбурне, разработанная Акселем Пеемёллером.

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

Линда Фэйн собирает статистику по предпочтениям внешнего вида текстового блока на специальной страничке «Text Prefs».



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

После того, как статистика будет опубликована, обязуюсь доложиться в этом блоге. Ссылка была обнаружена через блог I Love Typography, за что спасибо Джону Бордли.

Сегодня Дизайнер Всея Руси совершил типографический наброс на вентилятор в своём личном блоге в Livejournal.

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

Собственно, половина леммингов начала радостно принимать распоряжение Дизайнера Всея Руси.

Да-да, это не опечатка. Предлагаю новую гражданскую инициативу: ководкинг.

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

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

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

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

Пожалуйста, кидайте ссылки именно на ваши сайты, если вам интересна помощь НПДД (а не на всё подряд) — Колобок не резиновый. Волонтёрство в роли Колобка также приветствуется!

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

Уже после публикации заметки о раскладках клавиатуры наткнулся ещё на один перл, мощнейшее дополнение к FireFox с названием abcTajpu (пока что работает только в версиях 1.5 — 3.0b3).

После установки дополнение фактически заменяет клавишу Compose при работе в FireFox. С помощью abcTajpu можно легко набирать всякие хитрые символы (å℃≈Łķē¾Æ) без шаманских плясок с раскладками, а также задавать любые пользовательские замены (например, два пробела заменять на  ).

Прочие статьи о «типографских» раскладках на Хабре:

• Типографика: «Типографские» раскладки клавиатуры
• Убунтариум: И снова о раскладке Бирмана
• Типографика: Решение проблем с типографской раскладкой Ильи Бирмана
• Типографика: Об использовании длинного тире и пр.

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

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

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

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

www.alistapart.com/articles/settingtypeontheweb
www.clagnut.com/blog/1942
www.jameswhittaker.com/blog/article/em-based-layouts-vertical-rhythm-calculator
meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights
topfunky.com/baseline-rhythm-calculator
www.markboulton.co.uk/journal/comments/incremental_leading

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

Не заставляйте нас изменять размер шрифта

Мы не хотим постоянно менять настройки размера шрифта в браузере при посещении каждого нового сайта.

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

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

Не втирайте нам, что прокрутка страниц — это плохо

Потому что в таком случае все сайты плохие. В прокручивании веб-страницы нет ровным счётом ничего страшного. Ни-че-го. Так же, как нет ничего страшного в перелистывании страниц книги.

Не говорите нам, что текст не важен

95 % того, что обычно называют веб-дизайном, — это типографика.

Не требуйте, чтобы мы начали носить очки

Лучше вместо этого перестаньте тереться носом об экран, откиньтесь в кресле назад (!) и продолжайте чтение этой статьи в расслабленной позе.

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

• Минускульные и маюскульные цифры
• Целые числа и десятичные дроби
• Простые дроби
• Буквенные сокращения (тысяча, миллион, миллиард)
• Диапазоны
• Порядковые числительные и числительные в составе сложных слов

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

Дорогие хабрапользователи! По результатам илссеовадний одонго агнлийксого унвиертисета одного прошедшего опроса создан блог Пишу правильно. Осведомляю об этом те четыре сотни человек, которым это может быть интересно. :)

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

P.S.: И не плюсуйте этот топик, пожалуйста, чтобы он не раздражал на главной странице любителей олбанского. :)

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

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

• титры в кино (movie title sequence),
• кинетическая типографика (kinetic typography).

Под хабракатом приведу несколько роликов-иллюстраций и дам ссылки на дальнейшее копательство в YouTube.