В Go есть возможность создавать файлы изображений.
С помощью этого мы можем создавать картинки на лету (в runtime).
Где же это может пригодится?
Что плохо в новых значках Google
6 мин
Перевод
Компания Google «переосмыслила» G Suite как Google Workspace и выродила удивительное семейство разноцветных логотипов вместо всем привычных, узнаваемых, а в случае Gmail — даже культовых — иконок. На их месте появились маленькие радужные капли, которые мы теперь будем изо всех сил пытаться отличить друг от друга на вкладках браузера. Компании любят громко и много разглагольствовать о фирменном дизайне, поэтому в качестве противоядия попробую просто на пальцах объяснить, почему эти иконки такие плохие и почему они не продержатся долго.
Во-первых, я понимаю намерение Google. Они пытаются унифицировать визуальный язык различных приложений в своём наборе. Это может быть важно, особенно для такой компании, которая отказывается от приложений, сервисов, языков проектирования и других вещей, словно сбрасывая балласт с падающего воздушного шара (удивительно удачное сравнение, на самом деле).
Поймут ли ваши иконки пользователи из других стран? Обзор научных исследований
5 мин
Дизайнеры часто используют иконки для того, чтобы помочь пользователю быстрее находить нужные функции. Кажется, что иконки универсальнее, чем текст. Даже на браслете путешественника изображены иконки, потому что язык люди другой культуры не поймут, а в картинках разберутся.
Пора обновить ваш монитор
16 мин
Перевод
Иллюстрация: Юлия Прокопова
Я программист. Я не занимаюсь цифровой живописью, обработкой фотографий, видеомонтажом. Меня действительно не волнует широкая гамма или даже правильная цветопередача. Я провожу большую часть своих дней в текстовом браузере, текстовом редакторе и текстовом терминале, глядя на едва движущиеся буквы.
Поэтому я оптимизирую настройки, чтобы показывать действительно, действительно хорошие буквы. Для этого необходим хороший монитор. Не просто нужен, а ОБЯЗАТЕЛЕН. А под «хорошим» я имею в виду настолько хороший, насколько это возможно. Это мои мысли, основанные на моём собственном опыте того, какие мониторы лучше подходят для программирования.
Рендеринг текста вас ненавидит
14 мин
Перевод
Оглавление
- 1. Терминология
- 2. Стиль, вёрстка и форма зависят друг от друга?
- 3. Текст — это не отдельные символы
- 4. Эмодзи ломают цвет и стиль
- 5. Сглаживание — это ад
- 6. Эзотерика
- 6.1. Шрифты могут содержать SVG
- 6.2. Символы могут быть чертовски большими
- 6.3. Выделение — это не рамка, а текст идёт во всех направлениях
- 6.4. Как написать то, что невозможно написать?
- 6.5. Стиль является частью шрифта (за исключением случаев, когда это не так)
- 6.6. Нет идеального текстового рендеринга
- 6.1. Шрифты могут содержать SVG
- 7. Дополнительные ссылки
Рендеринг текста: насколько сложным он может быть? Оказывается, невероятно сложным! Насколько мне известно, буквально ни одна система не выводит текст «идеально». Где-то лучше, где-то хуже.
Предположим, вы хотите произвольный текст с произвольными шрифтами, цветами и стилями, с переносом строк и поддержкой выделения текста. По сути, это минимальные требования для правильного отображения сложного текста, окна терминала, веб-страницы и т. д.
В общем, сразу скажем: здесь нет последовательных правильных ответов, всё намного важнее, чем вы думаете, и всё влияет на всё остальное.
Мы обсудим темы, которые не объединяются в рамках какой-то единой концепции, это просто вопросы, с которыми мне пришлось столкнуться за несколько лет работы над рендерингом текста в Firefox. Например, не будем слишком подробно обсуждать проблемы сегментации текста или управления различными текстовыми библиотеками для конкретной платформы, поскольку этим я не слишком интересуюсь.
В чём уникальность BeOS и HaikuOS
9 мин
Перевод
Первое, на что следует обратить внимание в бета-версии Haiku — это работа с пакетами.
Когда мы говорим просто «пакеты», то подразумеваем только запуск пакетного менеджера на GNU/Linux, и т.д., но Haiku умеет гораздо больше.
Как я уже упоминал в обзоре Haiku Beta, это первый официальный релиз функции управления пакетами. Если сформулировать вкратце, то представьте PackageFS как нечто похожее (но не такое же) на старую систему модулей Slax 6, но со всеми обычными инструментами для «пакетов».
Систему управления пакетами можно описать в пяти кратких пунктах:
Когда мы говорим просто «пакеты», то подразумеваем только запуск пакетного менеджера на GNU/Linux, и т.д., но Haiku умеет гораздо больше.
Как я уже упоминал в обзоре Haiku Beta, это первый официальный релиз функции управления пакетами. Если сформулировать вкратце, то представьте PackageFS как нечто похожее (но не такое же) на старую систему модулей Slax 6, но со всеми обычными инструментами для «пакетов».
Систему управления пакетами можно описать в пяти кратких пунктах:
- универсальные инструменты командной строки (как и следовало ожидать);
- HaikuDepot;
- средство обновления программ;
- мониторинг состояния пакетов и/или системы;
- PackageFS (где все пакеты плавно монтируются и подключаются при загрузке), с побочным эффектом — аккуратным слоем безопасности.
Сказ о старинных иконках. Загадка 18-и цветов. Прозрачный и инверсный цвета
4 мин
Recovery Mode
Мало кому ныне не плевать на лишние килобайт-другой. Но такие люди есть, и как раз для такого задрота человека эта заметка и написана. )
В тех единичных случаях, когда мне нужно было записать выразительную иконку (.ico) приложения и одновременно следовало сэкономить байты, я пользовался следующим хаком: записывал изображение в 16-цветном режиме — но! — не в обычной фиксированной палитре, а в адаптивной.
Что это даёт? Иконка 48х48, 1-битовая прозрачность, 256 цветов = 3774 байта, она же в 16 цветах = 1662 байт. Выигрыш – 2 килобайта, при незначительном падении качества изображения.
Пример. Слева — направо:
Как это работает? Как ни странно, 16-цветная иконка всегда носит в себе палитру. То есть, 99.9% старинных иконок несут в себе абсолютно одинаковую 64-байтную таблицу цветов (4 байта на цвет). И, да – оказывается, её можно перепрограммировать.
В тех единичных случаях, когда мне нужно было записать выразительную иконку (.ico) приложения и одновременно следовало сэкономить байты, я пользовался следующим хаком: записывал изображение в 16-цветном режиме — но! — не в обычной фиксированной палитре, а в адаптивной.
Что это даёт? Иконка 48х48, 1-битовая прозрачность, 256 цветов = 3774 байта, она же в 16 цветах = 1662 байт. Выигрыш – 2 килобайта, при незначительном падении качества изображения.
Пример. Слева — направо:
- 256-цветный оригинал
- фиксированная стандартная 16-цветная палитра (причем здесь пару минут подбирал штриховку, чтоб изображение имело хоть сколько-нибудь приличный вид)
- адаптивная 16-цветная палитра + штриховка (dithering).
Как это работает? Как ни странно, 16-цветная иконка всегда носит в себе палитру. То есть, 99.9% старинных иконок несут в себе абсолютно одинаковую 64-байтную таблицу цветов (4 байта на цвет). И, да – оказывается, её можно перепрограммировать.
Этот SVG всегда показывает сегодняшнюю дату
2 мин
Перевод
Для своей странички с контактными данными нужна была стандартная иконка календаря, чтобы люди просматривали мой ежедневник. Такие иконки почти всегда делают наподобие бумажного календаря. Но мне стало интересно, можно ли сделать календарь чуть полезнее, если добавить динамическую иконку.
И вот он, SVG-календарь, который всегда показывает сегодняшнюю дату:
Фоновое изображение сделано на основе иконки Twitter TweMoji Calendar — CC-BY
Поддержка текста в SVG слегка неудобная, так что позвольте объяснить, как я это сделал.
И вот он, SVG-календарь, который всегда показывает сегодняшнюю дату:
Фоновое изображение сделано на основе иконки Twitter TweMoji Calendar — CC-BY
Поддержка текста в SVG слегка неудобная, так что позвольте объяснить, как я это сделал.
10 приемов по созданию красивых бизнес презентаций из 2017 года
6 мин
Встречали ужасные PowerPoint презентации с разноцветными слайдами и безвкусными картинками? Тогда вы точно должны прочитать эту статью!
ВАЖНО: здесь я пишу только про бизнес презентации для чтения — не для публичных выступлений. Это важно понять, так как техники разные в этих двух форматах. Под форматом «бизнес презентаций для чтения» я подразумеваю такие документы как коммерческие предложения, спонсорские пакеты, инвестиционные презентации проектов, презентации продуктов, которые в большинстве случаев отправляются исключительно по электронной почте.
В этой статье я расскажу о наиболее распространенных ошибках в дизайне и поделюсь своими 10 приемами по созданию поистине крутых презентаций. Почти все примеры, которые я привожу ниже, — это выдержки из реальных кейсов, которые мы реализовали.
Здесь важно отметить, что 10 приемов актуальны на 2017 год (и ближайшие месяцы 2018).
Начнем с самого важного при создании презентации:
ВАЖНО: здесь я пишу только про бизнес презентации для чтения — не для публичных выступлений. Это важно понять, так как техники разные в этих двух форматах. Под форматом «бизнес презентаций для чтения» я подразумеваю такие документы как коммерческие предложения, спонсорские пакеты, инвестиционные презентации проектов, презентации продуктов, которые в большинстве случаев отправляются исключительно по электронной почте.
В этой статье я расскажу о наиболее распространенных ошибках в дизайне и поделюсь своими 10 приемами по созданию поистине крутых презентаций. Почти все примеры, которые я привожу ниже, — это выдержки из реальных кейсов, которые мы реализовали.
Здесь важно отметить, что 10 приемов актуальны на 2017 год (и ближайшие месяцы 2018).
Начнем с самого важного при создании презентации:
Оптическое выравнивание и пользовательские интерфейсы
16 мин
Туториал
Привет, меня зовут Иван Греков, я работаю во фронтенд-команде Badoo, занимаюсь вёрсткой пользовательских интерфейсов на проектах компании.
В работе с макетами интерфейсов я использую графические редакторы, такие как Adobe Photoshop и Sketch. В них все слои по умолчанию представляют собой прямоугольные контейнеры. Когда мы выравниванием один слой по центру относительно другого, то для выравнивания используются центры прямоугольных контейнеров. Такой подход крайне неудобен при работе с иконками, поскольку выравниваемые фигуры могут сильно отличаться от прямоугольных контейнеров. И чем больше несимметричная фигура отличается по площади и по точкам координат от прямоугольника, в границы которого она вписана, тем заметнее разница между центрами фигуры и её контейнера. Это приводит к дисбалансу композиции в интерфейсных иконках.
Такая ситуация хорошо знакома специалистам в области дизайна, обычно она решается вручную, что требует определённых знаний и навыков. Именно поэтому она может создавать трудности для верстальщиков и разработчиков, которые решают эту задачу подручными инструментами.
Продолжение эксперимента: прохожие рисуют известные логотипы по памяти
1 мин
Первая часть эксперимента понравилась многим —собрала много плюсов и попала в лучшее, — поэтому мы опять вышли на улицу и попросили прохожих нарисовать известные логотипы по памяти. Конечно, не все умеют рисовать, но это не важно — интересно посмотреть, какие детали и особенности образов запомнились людям, а какие — нет. В этот раз вспоминаем Старбакс, Пежо, Ладу, Киви и Йоту — пока не открыли пост, можете проверить себя.
5 худших приемов отечественного дизайна из 90-х
2 мин
В девяностые, когда стали доступны первые компьютеры, каждый мог стать дизайнером и сделать вывеску для своего ларька.
К нам в рубрику #logomachine_help присылают самые разные логотипы, но от многих по-прежнему веет тем самым любительским дизайном из 90-х. Мы собрали самые распространенные проблемы в 5 худших приемов, которых лучше избегать, если ты не возишь щебень на самосвале.
К нам в рубрику #logomachine_help присылают самые разные логотипы, но от многих по-прежнему веет тем самым любительским дизайном из 90-х. Мы собрали самые распространенные проблемы в 5 худших приемов, которых лучше избегать, если ты не возишь щебень на самосвале.
Как мы делали совершенно новый КОМПАС-3D: История в семи главах → часть 2
7 мин
Продолжение. Ссылка на первую часть (Осторожно, трафик!).
Продолжаем разбирать по полочкам революционный интерфейс CAD-системы КОМПАС-3D v17. В первой части наш проектировщик интерфейсов Сергей Швецов рассказал, с какими задачами столкнулась команда, с какими задачами столкнулись при разработке нового дизайна. Если вы не понимаете, откуда цитаты или не знаете спецтерминов — добро пожаловать в первую часть материала!
Осторожно, трафик!
Продолжаем разбирать по полочкам революционный интерфейс CAD-системы КОМПАС-3D v17. В первой части наш проектировщик интерфейсов Сергей Швецов рассказал, с какими задачами столкнулась команда, с какими задачами столкнулись при разработке нового дизайна. Если вы не понимаете, откуда цитаты или не знаете спецтерминов — добро пожаловать в первую часть материала!
Осторожно, трафик!
Ближайшие события
Как мы делали совершенно новый КОМПАС-3D: История в семи главах → часть 1
10 мин
Привет, Хабр! Мы компания АСКОН, разработчик инженерного софта. Возможно, вы слышали про наши продукты КОМПАС-3D, Вертикаль, ЛОЦМАН:PLM, Pilot-ICE, Renga и геометрическое ядро C3D.
Они помогают промышленным предприятиям создавать модели изделий любой сложности и затем выпускать их на производстве, а строительным компаниям и проектным организациям воплощать архитектурные замыслы и управлять информационной моделью зданий и сооружений.
В нашем блоге мы будем рассказывать о самых разных сторонах разработки продуктов: развитии функционала, тестировании, api, дизайне, юзабилити, работе с геометрическим ядром (а оно у нас собственное!), команде и других важных, любопытных и иногда инсайдерских подробностях!
Сегодня у нас важный день. Не только потому, что мы опубликовали наш первый материал
на Хабре. 17 апреля мы выпустили новую, можно даже сказать революционную, версию
системы 3D-моделирования КОМПАС-3D v17. И главный герой этой революции — интерфейс. Ему и посвящается пост (в нескольких главах!) Сергея Швецова, дизайнера-проектировщика
пользовательских интерфейсов АСКОН. Осторожно, трафик.
Они помогают промышленным предприятиям создавать модели изделий любой сложности и затем выпускать их на производстве, а строительным компаниям и проектным организациям воплощать архитектурные замыслы и управлять информационной моделью зданий и сооружений.
В нашем блоге мы будем рассказывать о самых разных сторонах разработки продуктов: развитии функционала, тестировании, api, дизайне, юзабилити, работе с геометрическим ядром (а оно у нас собственное!), команде и других важных, любопытных и иногда инсайдерских подробностях!
Сегодня у нас важный день. Не только потому, что мы опубликовали наш первый материал
на Хабре. 17 апреля мы выпустили новую, можно даже сказать революционную, версию
системы 3D-моделирования КОМПАС-3D v17. И главный герой этой революции — интерфейс. Ему и посвящается пост (в нескольких главах!) Сергея Швецова, дизайнера-проектировщика
пользовательских интерфейсов АСКОН. Осторожно, трафик.
Не находите ли вы неудачной кнопку перехода на страницу номер 100?
1 мин
Поговорим про интерфейсы и про то, что видим на этой ленте статей, прокрутив её вниз, до пагинатора.
Конечно, очевидно, что после кнопки с номером «8», ведущей на страницу номер 8 по стрелке, похожей на стрелку возле слова «Туда» должна идти кнопка, ведущая на страницу с номером 9.
Но вы удивитесь, увидев, куда она ведёт. Просто наведите мышь и посмотрите на адрес ссылки. «Очевидность» существует месяца 3 и мне удалось по ошибке нажать эту кнопку и сходить на сотую страницу раза 3. Стало понятно, что в этой кнопке что-то не так и в интернете кто-то неправ.
Поможем доказать это.
1. Почему вредно после кнопки «8» ставить кнопку со стрелкой, похожей на стрелку «туда», но ведущую не туда?
К примеру, вот очень похожая…
Конечно, очевидно, что после кнопки с номером «8», ведущей на страницу номер 8 по стрелке, похожей на стрелку возле слова «Туда» должна идти кнопка, ведущая на страницу с номером 9.
Но вы удивитесь, увидев, куда она ведёт. Просто наведите мышь и посмотрите на адрес ссылки. «Очевидность» существует месяца 3 и мне удалось по ошибке нажать эту кнопку и сходить на сотую страницу раза 3. Стало понятно, что в этой кнопке что-то не так и в интернете кто-то неправ.
Поможем доказать это.
1. Почему вредно после кнопки «8» ставить кнопку со стрелкой, похожей на стрелку «туда», но ведущую не туда?
К примеру, вот очень похожая…
101 бесплатный сервис для дизайнера
10 мин
Представляем вам подборку бесплатных сервисов для дизайнера. Это первый вариант, в дальнейшем планируем расширять, добавляя новые разделы и инструменты.
Как собрать иконочный шрифт из файла скетча
6 мин
Туториал
У дизайнера есть несколько разных способов передать иконки разработчику:
— отдельными файлами PNG и спрайтом PNG,
— отдельными файлами SVG и спрайтом SVG,
— иконочным шрифтом.
Разработчики фронтенда все чаще привыкли использовать иконки в виде шрифта. Этим же способом распространяются популярные иконочные наборы (например, Font Awesome). У нас в компании разработчики тоже просят «дай шрифт». Мы некоторое время отлаживали схему сборки шрифта: как из файла Sketch автоматически получить файл, пригодный для фронтенда, не замучив дизайнера.
В этом посте я расскажу о нашей схеме, покажу скрипты сборки. Рассказ может быть полезен разработчикам фронтенда и дизайнерам интерфейсов. В меньшей степени он будет полезен бекендным разработчикам интерфейсов (классический Asp.Net MVC или что-то подобное): схема будет та же, но не будет готовых файлов конфигураций и скриптов.
9 интересных сервисов для веб-дизайнера. Специальная подборка
3 мин
В современном веб-дизайне существует достаточно много инструментов для web-дизайна. Это и классика — графические редакторы Photoshop и Sketch, и программы, совмещающие одновременно дизайн и верстку, такие как Macaw и Adobe Muse. И, как мы считаем, будущее web-дизайна — платформы для визуального дизайна сайтов в браузере, одним из примеров которых является Pixli.
Но, кроме использования основного инструмента, дизайнер пользуется, как правило, целым рядом вспомогательных сервисов и инструментов, упрощающих его работу.
Ниже, мы отобрали перечень из 9 весьма интересных и полезных ресурсов, к которым веб-дизайнеры обращаются и используют довольно часто:
Но, кроме использования основного инструмента, дизайнер пользуется, как правило, целым рядом вспомогательных сервисов и инструментов, упрощающих его работу.
Ниже, мы отобрали перечень из 9 весьма интересных и полезных ресурсов, к которым веб-дизайнеры обращаются и используют довольно часто:
Редизайн Titan Quest под смартфоны и планшеты
6 мин
Перевод
Как адаптировать классику жанра hack'n'slash, игру Titan Quest, любимую целым поколением компьютерных игроков, под смартфоны и планшеты? Я недавно пришёл в DotEmu и это стало вопросом, на который мне нужно было ответить. Но это был не только вопрос, это был вызов, потребовавший почти 20 месяцев размышлений, итераций и разработки для правильной «перезагрузки» потрясающей игры для её армии фанатов!
Всё нужно было (пере)создавать, но я и моя команда были невероятно мотивированы побороть сложности и компромиссы, которые неизбежно возникали. Мы ни разу не усомнились, что Titan Quest станет отличной мобильной игрой, и всегда верили, что она заслуживает своего места на мобильных платформах.
Я не мог вносить изменения в оригинальную игру, поэтому для реализации мобильной версии многие элементы должны были эволюционировать. Задача, стоявшая передо мной, была внушительной…
Медленная эволюция интерфейсов или сага о четвёртой кнопочке
1 мин
Recovery Mode
С приходом windows на наши десктопы у нас появились окна приложений и этими окнами нужно было как-то управлять. Были сделаны две кнопки «сворачивания окна» и «разворачивания на весь экран», но довольно быстро дизайнеры интерфейса windows осознали, что закрывать окна приходится не реже чем сворачивать и разворачивать на весь экран и интерфейс получил третью кнопку в коем законсервированном состоянии и пребывает уже более двадцати лет и не только на windows. МакОС и различные окружения рабочего стола для Линукс использую полностью аналогичную систему, разве что положение этих кнопок иногда меняется (кто-то в левом верхнем углу окна их поместит, кто-то в правом).