Типографика *

8 апреля в Екатеринбурге пройдет конференция DUMP. Традиционно мы публикуем обзоры секций от программных директоров.

Первый наш пост о секции Web-design. Программный директор Дарья Прокуда рассказала о том, как готовилась программа, что интересного будет в секции и зачем на нее идти.

Не совсем уже новость, но появился новый шрифт для программеров — Iosevka. Появляться он начал ещё осенью, но на Хабре упоминаний пока не было.



Iosevka — стройный моноширинный шрифт, вдохновлённый такими шрифтами, как Pragmata Pro, M+ и PF DIN Mono. Имеются варианты как с засечками, так и без, начертания с разными степенями жирности. Кириллица есть, само собой. Шрифт генерируется полностью из открытого исходного кода (при участии Node.js), путём настройки можно изменить начертание некторых знаков (таких как «a», «g», «l» и других).

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

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

Существует много способов «одушевить» продукт: придумать зверюшку-символ, использовать образы людей, фотографии, иллюстрации. Я расскажу вам о леттеринге. Осторожно — много картинок!

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

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

Шрифтовые дизайнеры избегают выбирать Helvetica и Arial. Вам тоже следует их опасаться.

Helvetica, наиболее очевидный выбор для многих брендов и «нердов от типографики», по умолчанию используется в приложении Apple Mail. Gmail по умолчанию использует Arial, шрифт, который один дизайнер назвал «неказистым внебрачным сыном Гельветики». Если браузер не поддерживает Arial, Gmail использует вместо него Гельветику.

Хотя Helvetica – любимый вариант для многих «помешанных на дизайне», поскольку он относительно нейтрален, недостаточное расстояние между элементами шрифта и их сильная схожесть затрудняют чтение объемных текстов. «Буквы начинают слипаться, – говорит Надин Шахин (Nadine Chahine), шрифтовый дизайнер из Monotype. – Это делает текст слишком скученным».

Рад представить дополнение оригинального списка из 300 потрясающих бесплатных сервисов. Автор оригинальной статьи Ali Mese добавил ещё +100 новых сервисов, которые помогут найти все — от источников вдохновения и редакторов фотографий до создания опросов и бесплатных иконок.

И еще подборку +500 инструментов от 10 марта 2017 г. смотрите здесь.

A. Бесплатные веб-сайты

• HTML5 UP: Адаптивные шаблоны HTML5 и CSS3.
• Bootswatch: Бесплатные темы для Bootstrap.
• Templated: Коллекция 845 бесплатных шаблонов CSS и HTML5.
• Wordpress.org | Wordpress.com: Бесплатное создание веб-сайта.
• Strikingly: Конструктор веб-сайтов.
• Layers: Создание сайтов на WordPress (new).
• Bootstrap Zero: Самая большая коллекция бесплатных шаблонов Bootstrap (new).
• Landing Harbor:  Продвижение мобильного приложения c помощью бесплатного лендинга (new).

Всем привет!

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

Apple использовала набор шрифтов Helvetica в качестве системного шрифта для iOS с момента выпуска первого iPhone. Они также заменили им Lucida Grande в Mac OS X, начиная с версии 10.10 Yosemite. Так почему же теперь Apple решила избавиться от самого любимого в мире шрифта?

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

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

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

Вот эти правила:

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

Мы собрали наиболее частые темы, связанные с сеткой в адаптивном дизайне, чтобы «повысить резкость» термина как такового и систематизировать практические знания: как настраивать сетку в дизайн-макете, по каким параметрам делать расчет, какие особенности адаптивной среды учитывать и на какие детали обращать внимание.

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

Вступление

Сначала о главном. Это руководство не для всех. Это руководство прежде всего для:

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

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

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

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

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

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

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

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

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

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

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

Чтобы научиться дизайну, мы записались на курс Design 101 от trydesignlab.com. Первые уроки были посвящены визуальной иерархии. Мы перевели одну из лучших статей на эту тему от 99designs.com.



Перевод от сайта для начинающих предпринимателей «Я люблю ИП»

Автор оригинальной статьи Ali Mese добавил ещё 100 новых бесплатных сервисов. Все 400 потрясающих сервисов доступны здесь. И еще подборку +500 инструментов от 10 марта 2017 г. смотрите здесь.

A. Бесплатные Веб-Сайты + Логотипы + Хостинг + Выставление Счета

• HTML5 UP: Адаптивные шаблоны HTML5 и CSS3.
• Bootswatch: Бесплатные темы для Bootstrap.
• Templated: Коллекция 845 бесплатных шаблонов CSS и HTML5.
• Wordpress.org | Wordpress.com: Бесплатное создание веб-сайта.
• Strikingly.com Domain: Конструктор веб-сайтов.
• Logaster: Онлайн генератор логотипов и элементов фирменного стиля (new).
• Withoomph: Мгновенное создание логотипов (англ.).
• Hipster Logo Generator: Генератор хипстерских логотипов.
• Squarespace Free Logo: Можно скачать бесплатную версию в маленьком разрешении.
• Invoice to me: Бесплатный генератор счета.
• Free Invoice Generator: Альтернативный бесплатный генератор счета.
• Slimvoice: Невероятно простой счет.

Windows, начиная с Vista, предоставляет два механизма для адаптации приложений к мониторам с высокой плотностью пикселей (точек на дюйм, DPI): увеличенные системные шрифты и полномасштабное увеличение окон. К сожалению, попытка заставить некоторые ваши приложения работать в каком либо из режимов может оказаться безуспешной, благодаря сочетанию нерадивых разработчиков и плохих решений принятых Microsoft.

Эта страница предназначена для того, чтобы помочь пользователям понять и исправить, возможные проблемы при настройке высоких значений DPI. Пожалуйста, обратите внимание что мы рассмотрим только традиционные приложения Windows, не Windows Store («Metro», «Modern UI») приложения. Последние используют новый API WinRT, который обеспечивает собственный механизм масштабирования.

Привет, Хабр! Многие уже знают о моей страсти к попытке собрать самое лучше, что может быть полезно для веб-разработчиков или веб дизайнеров. И шрифты — не исключение. Программное обеспечение для работы со шрифтами постоянно развивается. Количество дизайнеров желающих опробовать себя в типографике растет с каждый днем. А сегодня я хочу представить вам их наработки — 30 потрясающих бесплатных шрифтов, которые мне удалось собрать за последний год.

Polar

Доброго времени суток, Хабр.

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

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


Первая рулонная печатная машина «Magdeburger Zeitung»