Когнитивная нагрузка Майка Новикова

Цвета для визуализации #datavis#color#ToolReview

Про типографику в интерфейсе. Почти каждый раз когда начинаешь новый проект одной из первых проблем становиться типографика. Надо выбрать шрифт, посидеть продумать все размеры шрифтов, их межбуквенные, межстрочные, собрать стили и тд. Работка пыльная, душная, и в связи с этим хочу немного (или много) облегчить вам жизнь. После того как вы выбрали шрифт, надо выбрать размеры. Лучше чем плагин Typescales вы ничего не найдете. Открываем плагин, выбираем размер базового шрифта (обычно 16 px или иногда 14px, в iOS — 15 px), выставляем scale (рекомендую 1.2, потом руками округлим значения до кратных 4), line height (межстрочный интервал) от 1.2 до 1.35 (это значения для заголовков, в наборном тексте и меньше рекомендую потом заменить межстрочный на 1.4 или даже 1.5), в scales указываем количество стилей которое нам нужно. Жмем Generate и плагин нам автоматически создаст гайд по типографике. Если вы адский фанат золотых сечений и подобных приколов — можно зайти на type-scale и выбрать в scale: Golden Ratio. Сразу скажу — для интерфейса это оч хуевая затея, для коммуникационки более менее норм. После того как мы добавили базовые стили их нужно шлифануть, а точнее подправить межбуквенный интервал (letter spacing). Если вы используете шрифт SF или Inter, то все оч изи, ибо есть плагины: Inter letter spacing (для шрифта inter), и Fix San Francisco (для SF). Если вы используете другой шрифт — советую погуглить запросы типа «<font name> letter spacing» или посидеть потыкать на глаз. Если ничего нет, то можно оставить для наборного шрифта 0 межбуквенный, у шрифтов больше по чуть чуть его уменьшать, а у шрифтов меньше наоборот — увеличивать. Когда размерная сетка готова и межбуквенные настроены остается только назвать стили. Если вы делаете типографику для веба, то точно нужно предусмотреть H1-H… заголовки, стили body текста (наборный текст), caption (мелкий текст) и если нужно — display (текст для промо, лендингов и тд., обычно сильно крупнее обычной типографики в интерфейсе). Если это аппка, то стили для Title, Body Text, Caption. Также если вы делаете типографику для веба нужно продумать ее scale под мобильные устройства. Например у нас есть Display заголовок со свойствами 56 (размер) / 64 (межбуквенный), на мобилке это ту мач, поэтому тестим на нужном нам разрешении подходящий размер, думаю 32/36 для мобилки в этом случае оч даже ничего будет. Так нужно пройтись по всем стилям, body и caption можно оставить едиными с десктопом, или уменьшить для мобилки межстрочный интервал, ибо экран меньше, нужно вмещать больше контента, но это не обязательно. Так у вас получаться стили например H1 Desktop и H1 Mobile и всегда будет понятно где что использовать. Куда же без осознанности…) Кст если вы собираете дефолтную аппку на iOS, то можете ваще всей этой хренью не страдать и зайти на сайт эпла в гайды, там уже все готово. У них своебразные стили, например вместо классических 16 px body, 18 px large text и 20 small heading — там будет 15,17,22. Почему так - я хз, но все это юзают В идеале получается универсальная палашня стилей из которых можно собрать что угодно, а главное — в интерфейсе будет иерархия и чистота, а разработка будет в экстазе 😘

Как настраивать типографику на новом проекте #Fonts#Design

https://serious-about.com/ Лютейший фотостиль у бренда значков #ecommerce#branding#photography

Obsidian бесплатная синхронизация телефона с компьютером https://www.youtube.com/watch?v=P14Op7ENOAU #ToolHacks

Как смотреть видео в интернете быстрее чем на скоростих2 Мне комфортно смотреть и слушать ютуб на ускорении 1.5, но иногда попадаются спикеры, которых тяжело слушать даже на х2 Для таких случаев есть спасительный плагин для браузера — Videospeed Он может ускорять видео до 16х (клавиши S и D), сбрасывать и возвращать скорость (R) Дополнительный бонус: это работает на всех HTML5 Видео — VImeo, Twitch, Apple TV, всякие вебинарные платформы и т.п. Для Chrome https://chrome.google.com/webstore/detail/video-speed-controller/nffaoalbilbmmfgbnbgppjihopabppdk Для Firefox: https://addons.mozilla.org/en-US/firefox/addon/videospeed/ #ToolReview#Web

Записал демо как это работает: С зажатым альтом и ПКМ можно масштабировать окна не прицеливаясь точно в угол. А альт+ЛКМ — двигать окна с интеллектуальным примагничиванием Альт+двойной ПКМ клик в угол быстро разворачивает, или снэпит окно к нужной стороне

У Windows 10 есть две командных строки: cmd и Powershell cmd считается устаревшим — он попроще и менее безопасный, но лично мне работать в нем быстрее и привычнее. Главный минус CMD его примитивность — там нет автозаполнения фраз и других удобных функций, которые стали стандартными для современных командных строк. Оказывается есть проект который решает эту проблему: Clink https://github.com/chrisant996/clink Там очень много функционала, который по умолчанию идет из линуксовой командной строки Bash (Readline), но самое ценное личнго для меня: • История команд, которая сохраняется между сессиями. Можно просто нажать вверх, и покажется последняя использованная команда. • Умное автозаполнение: когда начинаешь писать название файла или путь, серым показывается возможное имя файла. Если нажать на стрелочку вправо, имя заполниться автоматически. #ToolReview#Windows

Ускорить работу с окнами на WIndows в четыре раза https://github.com/RamonUnch/AltSnap #ToolReview #windows

TIL: Если тебя хром не пускает на страницу из-за отсутствия ssl, то нужно ткнуть мышью в пустое место на странице и написать thisisunsafe на клаве

Ускорить работу с окнами на WIndows в четыре раза https://github.com/RamonUnch/AltSnap #ToolReview#windows