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

#почитать

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

Портится не только код, но и интерфейсы. С энтропией кода бороться тяжело. С интерфейсами вопрос решить проще, если проектировать их по правильным принципам.

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

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

▫️Неоптимально подобран кегль. Надо прищуриваться, менять масштаб или приближать экран.
▫️Кнопка трудноразличима или глубоко спрятана. Больше времени и усилий уходит на поиск и наведение.
▫️Много пустот на экране. Приходится больше листать.
▫️Много элементов на экране. На поиск нужной информации тратится больше времени.
▫️Папка пустая, но выглядит кликабельной. На проверку пустой папки тратится время.

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

⏱Читать статью

Почему я почти никогда не начинаю проектирование (или дизайн) сайта с главной страницы

#почитать

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

⏱Читать статью

Графика древности: палитры

#почитать

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

⏱Читать статью

Дизайн-система Gravity UI от Яндекса: как построить современный интерфейс

#почитать

С помощью библиотеки компонентов Gravity UI можно строить современные интерфейсы. В неё входит:

▫️набор базовых React-компонентов;
▫️библиотека-конструктор для лендингов;
▫️подробные гайды по использованию компонентов;
▫️библиотека в Figma;
▫️набор готовых иконок, в составе которого почти 600 вариантов;
▫️ChartKit — пакет для визуализации данных;
▫️Yagr — высокопроизводительный рендеринг графиков, основанный на uPlot;
▫️I18n — пакет для локализации интерфейса
▫️и ещё более 25 полезных библиотек.

⏱Читать статью

Расстановка переносов в тексте. Практикум

#почитать

Выравнивание текста появилось в CSS ещё в первой версии и в каком-то смысле копировало возможности текстовых редакторов. В текстовых абзацах выравнивание по умолчанию происходит по левому краю, а правый же край остаётся неровным, в виде «лесенки». Для большинства текстов это смотрится вполне естественно, да и читать вполне комфортно.

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

▫️Ручные переносы
▫️Автоматические переносы
▫️Дополнительные возможности

⏱Читать статью

Подбор цветов для проекта: советы и сервисы

#почитать

▫️Про цвет, модели и температуру
▫️Про сочетания цветов


Сервисы по созданию и подбору цветовых палитр:
▫️ColorScheme
▫️Adobe Color
▫️Khroma
▫️Colormind

⏱Читать статью

Использование псевдоэлемента ::marker

#почитать

Для изменения вида маркеров в списке издавна используется приём с псевдоэлементом ::before.
Более современный способ для управления видом маркеров основан на использовании псевдоэлемента ::marker. Работает он схожим образом c ::before, только не приходится добавлять list-style. Таким образом, для простых ситуаций, когда надо лишь заменить символ маркеров и задать им цвет, псевдоэлемент ::marker подходит лучше всего. Когда к маркерам требуется добавить фон, мы переключаемся на ::before.

▫️Псевдоэлемент ::marker позволяет менять вид маркера у пунктов списка и заголовка <summary>.
▫️Маркерам, созданным через ::marker, можно задать цвет и параметры шрифта.
▫️Элементы <details> и <summary> многие недооценивают, хотя они позволяют делать интересные элементы интерфейса, вроде ниспадающего меню, аккордеона и др.
▫️С помощью ::marker допустимо менять символ маркера в элементе <summary>.

⏱Читать статью

🔥 Неизвестно полезный CSS

#почитать

CSS не отстаёт от JavaScript. Постоянно развивается. Классно же. Мне особенно радостно видеть, как старые задачи, которые я решал при помощи костылей, теперь можно сделать при помощи одного свойства. Только многие фишки неизвестны широкому кругу разработчиков. Честно говоря, некоторые я сам узнал недавно. В любом случае так дальше нельзя. Надо исправлять ситуацию. Я собрал фишки, которые могут быть полезны в разного рода проектах. Неважно, верстаете ли вы сайт для малого бизнеса или создаёте супермодное React приложение.

▍ Что можно делать со свойством text-decoration
▍ Стилизация каждого слова при переносе текста
▍ Больше контроля над обрезкой изображения
▍ Не позволяем браузерам скрыть часть контента после прокрутки страницы

Итог. Сейчас CSS предоставляет нам:
- Свойства text-decoration-line, text-decoration-thickness, text-decoration-style, text-decoration-color и box-decoration-break для красивых многострочных ссылок с дефолтным подчёркиванием;
- Свойство object-position для более корректной обрезки изображений;
- Свойство scroll-margin-top, сохраняющее контент видимым после прокрутки страницы;

⏱Читать статью

CSS-свойство isolation: создаем новый контекст наложения

#почитать

В CSS «контекст наложения» следует понимать буквально. Он позволяет HTML-элементам образовывать стек (наложение) с их стартовой позиции, основываясь на базовом элементе, который предоставляет контекст.

О свойстве position можно почитать в статье «CSS-свойство position: разбираемся с позиционированием элементов».

⏱Читать статью

Дизайн визуальных коммуникаций — графика как средство для общения

#почитать

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

⏱Читать статью

"Идиократия" в реале. Интерфейсы становятся всё примитивнее, наступает тирания маргинального юзера

#почитать

" ... непонятно другое. Почему происходит реальная деградация интерфейсов. Грубо говоря, почему они становятся всё более примитивными и тупыми? И речь не только о веб-сайтах. Разработчиков отчасти можно понять: им реально сложно в условиях сильной фрагментации веб-платформы. Сайт должен нормально выглядеть в разных браузерах (движки Blink, WebKit, Gecko, EdgeHTML). Главная причина - другая.

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

⏱Читать статью

Скорее всего, вам не нужен JavaScript

#почитать

▫️Один из базовых принципов веб-разработки: выбирать наименее мощный язык, подходящий для решения задачи. В случае веба это означает, что нужно по возможности выбирать HTML вместо CSS, а затем CSS вместо JS.

▫️JS — самый универсальный язык из всех трёх, потому что на нём вы описываете, как должен вести себя браузер; но также он может ломаться, отказываться загружаться, требует дополнительных ресурсов для скачивания, парсинга и исполнения. Кроме того, при его использовании очень легко ограничить доступ пользователей, выполняющих браузинг при помощи клавиатуры или специальных возможностей.

▫️В отличие от JS с его императивностью, HTML и CSS декларативны. Вы говорите браузеру, что делать, а не как это делать. Это значит, что браузер сам выбирает, как это делать, и может сделать это наиболее эффективным образом.

▫️Так как функции HTML и CSS обрабатываются браузером, они могут быть более производительными, более нативными, более адаптируемыми к предпочтениям пользователя и в общем случае иметь бОльшую accessibility.

⏱Читать статью

Паттерны верстки. Как объединить верстальщиков и дизайнеров

#почитать

▫️Критерии хорошего дизайна
▫️Рекомендации по верстке
▫️Использование готовых ui систем и bootstrap
▫️Паттерны
▫️Цветовые стандарты
▫️Кратность отступов и размеров

и многое другое

⏱Читать статью

OKLCH в CSS: по­че­му ушли от RGB и HSL

#почитать

В CSS мы чаще всего пишем цвета через rgb() или hex — но так сложилось исторически. Новая спецификация CSS Color 4 позволит нам описывать цвета через новые методы. В этой статье мы расскажем, почему нам больше всего нравится oklch().

⏱Читать статью

"Средний посетитель Facebook загружал десятки мегабайт CSS. Большая часть из них не использовалась"

#почитать

▫️Facebook выпустил новую CSS-in-JS библиотеку — StyleX

▫️Позиционируется данный помощник для js-подобных фреймворков типа React, Preact, Solid, lit-html и Angular, однако оперирующие html шаблонами Vue и Svelte тоже могут задействовать StyleX, но после предварительной специальной её кастомизации.

▫️StyleX компилируется в атомарные CSS, для чего используется Babel плагин.

▫️Основная утверждаемая выгода от использования StyleX - переиспользование, типизация, будет всё круто на больших проектах. Ну и получение наконец полного "Single File Component" файла с js, css и html в одном флаконе.

⏱Читать статью

Ускоряем сайт оптимизацией шрифтов - большой гайд

#почитать

▫️Шрифты в сжатом виде в формате woff2 могут занимать от 10% до 25% размера всех файлов страницы, загружаемых на первых этапах. Мы учитываем именно создаваемую нагрузку на сеть. Например, HTML, CSS, JavaScript код перед передачей по сети сжимается в 4-5 раза с помощью технологии gzip. То есть, 10%-25% это именно доля от объёма передаваемых данных.

▫️Таким образом, сократив размеры шрифтов в 2 раза, можно добиться ускорения на 5%-12%, что очень весомо. Тем более что работа по оптимизации займёт не более часа. Как это сделать, мы расскажем в этой статье.

⏱Читать статью

Альтернатива WP, Joomla, Drupal - Processwire

#почитать

"Признаться, был удивлён возрастом сего инструмента - почти такой же бородач как и пресловутый WP(!), стабилен, имеет нишу, но популярностью вроде как особо не обзавёлся."

⏱Читать статью