Привет, Хабрапользователь. Кажется, ты используешь AdBlock. Хабрахабр
развивается и существует за счет доходов от рекламы. Добавь нас в исключения.
открытое письмо как отключить

Типографика

индекс
73,40
31 июля в 15:11

«Бездумное» использование шрифтов из песочницы

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

image

6515
20
apstim –2,4
21 июля в 11:50

7 правил создания красивых интерфейсов. Часть 2 перевод



Недавно мы в «Я люблю ИП» закончили курсы по дизайну от trydesignlab.com. И это одна из самых важных статей, которую нам посоветовал ментор в процессе обучения. Сегодня мы публикуем вторую часть перевода. Посмотреть все наши работы с курсов можно в ВКонтакте по тэгу #design101@iloveip.

Мы говорили о правилах создания чистых и красивых интерфейсов.

Вот эти правила:
  1. Свет падает сверху (Часть 1)
  2. Сначала черное и белое (Часть 1)
  3. Увеличьте белое пространство (Часть 1)
  4. Научитесь накладывать текст на изображения
  5. Научитесь выделять и утапливать текст
  6. Используйте только хорошие шрифты
  7. Крадите как художник

+42
33470
844
iloveip 100,0
15 июля в 20:38

«Й» вам не «и» краткое! О важности нормализации Unicode

й

За последние полгода интернет просто наводнила «буква» «й». Я встречал ее на новостных сайтах, в мессенджерах, на хабрахабре и geektimes. «О чем вообще речь?» — спросите вы — «Я вижу обычную букву й!». Вам повезло. Я вижу ее так:
image
image
image
image
image
Если вы из тех счастливчиков, у кого буква «й» выглядит так же, как и «настоящая» «й», вот вам фокус: скопируйте ее (букву «й») в блокнот, поставьте курсор в конец буквы и нажмите backspace. Магия, отвал башки просто!
Как же так получается?

Графемы, глифы, code points, компоновка и байты

Очень краткое введение:
Графема — то, что мы привыкли называть буквой в смысле единицы текста. Глиф является единицей графики, и может графически представлять саму графему или же ее часть (например, различные диакритические знаки: ударения, умляуты, надстрочное двоеточие у буквы ё и т.д.).
Code Point — то, как записывается текст в представлении Unicode. Одна графема может записываться разными code points.
Code Points кодируются различным байтовым представлением в зависимости от стандарта: UTF-8, UTF-16, UTF-32, BE, LE…
Языки программирования, как правило, работают с code points; для нас, людей, привычно мыслить глифами.

Давайте же наконец разберемся с нашей буквой й. Что же в ней такого особенного?
Эта буква представляет из себя одну графему («и» краткое), но записана она двумя code points:
U+000438 CYRILLIC SMALL LETTER I
U+000306 COMBINING BREVE

Если вы проделали фокус с нажатием backspace, вы как раз и стерли COMBINING BREVE, или, говоря полиграфическим языком, значок краткости над гласной.

Обычная буква «и» краткое, которую мы все с вами привыкли набирать клавиатурой, представляет из себя композитный символ, который записывается одним code point:
U+000439 CYRILLIC SMALL LETTER SHORT I
+94
29124
142
ValdikSS 141,1
8 июля в 11:45

Сетки для адаптивного дизайна



Мы собрали наиболее частые темы, связанные с сеткой в адаптивном дизайне, чтобы «повысить резкость» термина как такового и систематизировать практические знания: как настраивать сетку в дизайн-макете, по каким параметрам делать расчет, какие особенности адаптивной среды учитывать и на какие детали обращать внимание.
+22
21514
308
twileug 17,6
6 июля в 15:10

7 правил создания красивых интерфейсов перевод



Недавно мы в «Я люблю ИП» закончили курсы по дизайну от trydesignlab.com. И это одна из самых важных статей, которую нам посоветовал ментор в процессе обучения. Именно поэтому мы решили её перевести. Посмотреть все наши работы с курсов можно в ВКонтакте по тэгу #design101@iloveip.

Вступление


Сначала о главном. Это руководство не для всех. Это руководство прежде всего для:
  • разработчиков, которые хотят уметь делать хорошие интерфейсы для себя, если вдруг прижмёт;
  • UX-дизайнеров, которые знают, что хороший UX-дизайн продаётся лучше в красивой UI-упаковке.

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

А пока давайте я расскажу, что вы найдёте в этой статье.

+76
79096
1512
iloveip 100,0
9 июня в 15:16

How-to: Типографика в дизайне email-писем перевод



Исследования показывают, что в почтовых программах до 43% email-подписчиков отключено отображение картинок. Это означает, что донести до них нужную информацию с помощью email-рассылки можно только если использовать реальный текст в HTML-версиях писем.

При этом, данный факт вовсе не означает, что можно использовать только Arial и Times New Roman. В сегодняшнем материале мы рассмотрим существующие возможности по работе с шрифтами в email.
22 мая в 17:32

Оптическая компенсация перевод



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

Такой подход казался мне логичным, но он оказался неверным.

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

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

Давайте взглянем на небольшое количество показательных примеров.
+60
38981
307
shimapa23 0,0
6 мая в 17:38

Типограф — история продолжается

В процессе подготовки 3-й версии Типографа написал небольшой jQuery-плагин, который обязательно войдет в релиз, способный облегчить жизнь многим разработчикам сайтов в вопросе типографики.
+21
12655
93
Spearance 0,0
7 апреля в 16:43

Как изменить имя шрифта из песочницы

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

Я столкнулся с этой проблемой следующим образом. Требовалось на домашнем компьютере сконвертировать набор документов из САПР «Компас» в формат PDF. Для этой цели имелся КОМПАС-3D Viewer. А затык вышел с тем, что автор документов набрал их шрифтом Arial Narrow, который на компьютере отсутствовал; вместо него смотрелка подставляет шрифт Arial, из-за чего все надписи в документе разъезжаются как попало.

Конечно, мы все знаем, как можно решить проблему с отсутствующим шрифтом, да и с редактором Компаса. Но есть у меня скверная привычка не нарушать авторские права без крайней необходимости, потому стал искать законное и относительно честное решение. В компьютере стоял свободный шрифт Liberation Sans Narrow (TrueType), который очень похож на Arial Narrow, а главное, имеет те же метрики. Надо было лишь убедить систему (речь идёт о Windows Vista), что точно такой же шрифт зовут Arial Narrow, только и всего.
+9
5668
42
Ihnatus 0,0
3 апреля в 18:22

Лучшая иконка — текст перевод

Если не можешь сказать коротко и ясно, скажи длинно и ясно, но только не коротко и непонятно.
janatem


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

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



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

+52
43980
181