дизайн

Когда разрабатываете дизайн, сперва сделайте его полностью текстом. Забудьте на время про фотографии, откройте редактор текста, напишите всё. Сперва можно использовать однострочный отсутуп между всеми элементами.

Потом добавьте другие отступы, подвигайте текст пробелами, сделайте иконки текстом (←→×).

После можно приступать к излишествам: заменить тектовые элементы на настоящие иконки, изменить размер шрифта, цвет текста, сам шрифт. Но и здесь не стоит заигрываться.

Простой текст
↓
Текст с отступами
↓
Красивые разные шрифты и иконки

Зачем это всё?

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

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

Получается, сперва собираем ёлку, а потом вешаем украшения.

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

@st8rmi: The new Office App

Через два месяца выходит приложение, но выглядит как-то обыденно. Аутлук и Офис используют стандартные элементы iOS UI Kit и не отличаются от стандартной почты на айфоне.

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

• Windows Terminal
• Мобильный Офис
• Темная тема Офиса

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

Ненастоящее окружение дополняет нереалистичные эффекты, у нас не белые пустые комнаты и рабочие столы: комнаты всегда чем-то заставлены, а на рабочих столах куча файлов, беспорядок и фотография гор вместо нежно-голубого фона. У нас всегда забит календарь (Джейсон Фрид исключение), открыто много программ, вокруг много влияющих на восприятие вещей, в голове много мыслей. Все не так, как в воображаемом вакууме.

Не буду доказывать, что темная тема нужна, просто вот:

1. Apple: темная тема в iOS
2. Apple: темная тема в macOS
3. Google: темная тема в Material Design
4. Microsoft: темная тема в Windows

Темные темы пришли в веб. Теперь Safari, Chrome, Firefox и другие популярные браузеры поддерживают темную тему для сайта. Используем это. Сейчас расскажу как сделать темную тему, чтоб никому не было стыдно.

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

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

Логика

Есть: светлая тема
Будет: основа для работы темной темы

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

CSS

Есть: обычный CSS-код
Будет: переменные, чтоб менять всё в одном месте

Идем в CSS и понимаем, что давно надо перейти на переменные. Прописываем правила с переменными и потом их применяем:

:root {
  /* Создаю переменные с цветами для документа (root) */
  --background-color: #fafafa;
  --foreground-color: #121212;
  --accent-color: #ff5252;
}

div {
  color: var(--foreground-color);
  background-color: var(--background-color);
}

a:hover {
  color: var(--accent-color);
}

Гугл:

“Use dark grey – rather than black – to express elevation and space in an environment with a wider range of depth. Apply limited color…”

— уже давно рассказал, что выбирать черный (#000000) для темной темы не стоит — лучше выбрать темно-серый. Устанавливаем цвета для темной темы. Если их больше, чем три — фон, текст и акцентный, — то просто менять местами не подойдет, надо изучать поведение цвета.

@media screen and (prefers-color-scheme: dark) {
  :root {
    /* Перезаписываю переменные с цветами для темной темы */
    --background-color: #121212;
    --foreground-color: #fafafa;
  }
}

Работаем с цветом

Есть: обычная смена цветов местами
Будет: замена цветов на другие

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

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

Для проверки контраста в Chrome сделали приспособление века в инструментах разработчика: открываем инструменты разработчика (Ctrl|Cmd + Shift + I), включаем наведение (Ctrl|Cmd + Shift + C), наводим на текст и видим сразу маленькое окошко, где показана контрастность. Если в стилях нажать на цвет элемента, то появится точная контрастность и линии, помогающие ее настроить.

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

Суммируя: переменные, правильные цвета, медиа-стили.

Решил рассказать о всяких мелочах в дизайне сайта. Некоторые штуки я подглядел в других блогах, например у Бирмана и в его Эгее, и переделал под свой блог.

Штука с заголовками

Заголовок показывает иерархию. Если я нахожусь на главной странице, заголовок «Давид Кистаури», если в блоге и списке проектов: «Давид Кистаури. [раздел]», дальше продолжается через точку. Например у раздела тегов в блоге заголовок «Давид Кистаури. Блог. Теги».

Это правило не соблюдается для шаблонных страниц: статей, страниц проектов, разделов для каждого тега, потому что писать «Давид Кистаури. Блог. Как использовать ВС Код, если ты пишешь текст» — издевательство над читателем, особенно тем, кто заходит с телефона.

Штука со ссылками

Над заголовком всегда стоят ссылки в блоках. Они делятся на два типа: постоянные — primary — и непостоянные — secondary. Постоянных три: главная страница, страница с проектами и блог — они представляют разделы сайта; при добавлении нового раздела добавляется и ссылка.

Постоянные ссылки

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

Непостоянные ссылки

Они имеются не всегда и зависят от страницы. В блоге две ссылки: на список тегов и РСС. На странице проекта одна ссылка — на сам проект. Такие ссылки имеют дополнительный фоновый цвет, а текст по стандарту синий.

При ховере постоянных ссылок заливается фон, непостоянных — текст. При фокусе у ссылки появляется внутренняя рамка, заданная через тень.

Расположение непостоянных ссылок

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

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

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

Штука с линейками

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

Штука с темной темой

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

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

Вдохновение

Пока я делал этот сайт, много анализировал, думал, исследовал и подглядывал. Со всего веба набрал по чуть-чуть и добавил от себя. Тут самые яркие источники крутого дизайна.

1. Дизайн АйОС — скругления и стиль кнопок в целом может напоминать элементы АйОС. Шрифт тоже подобный.
2. Портфолио Сергея Сурганова — центр сайта — минимализм в портфолио — позаимствован у Сергея Сурганова. У него еще есть монолог, где он рассказывает, почему такой принцип крут и почему картинки не обязательны.
3. Блог Максима Ильяхова — я включил сюда именно блог Ильяхова, но он написан на Эгее, поэтому источником является именно дизайн движка, но так легче показать пример и я вдохновился именно его блогом. Вся типографика: отступы, размеры заголовков, длина строки и много другого по тексту изначально было взято оттуда, потом дорабатывалось и изменялось.
4. Блог Аруна Веркатесана — Изначально мой блог был с квадратами, у которых были картинки. Было похоже на это решение. Картинки пережили изменения только в разделе с проектами, но яркие цвета по разделам остались.

Если твое приложение в этом списке, то время праздновать! Если нет — читай статью и делай, как эти разработчики.

Лучшие приложения

В АйОС 11 Эппл наконец выпустили новую дизайн систему, которую они до этого тестировали в Эппл Музыке. Я говорю про новые стандарты дизайна приложений с большими заголовками. Очень много людей, которые хейтят такой дизайн, но мне он очень нравится. Это заслуга хорошей типографики — шрифт Сан Франциско крут.

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

Memento

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

Procreate

Procreate — приложение для креаторов (уау). У них есть и карманная версия для Айфона и обе версии соответствуют дизайн гайдлайнам. Я не использую это приложение, но я видел скриншоты, видео и много хороший отзывов — просто подпишитесь на них в Твиттере

PDF Viewer

Очень хорошее приложение от команды ПСПДФКит. Использую почти каждый день, потому что в школе удобнее открывать ПДФки, вместо таскания учебников. Я нашел это приложение у Федерико Витичи в Твиттере. У него очень много функций, возможно, даже больше, чем во многих десктопных приложениях, и есть кастомные темы. Есть платная версия, но мне и бесплатной достаточно. Также поддерживаются вкладки.

WhatsApp

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

Также много других приложений, как Scriptable — пожалуйста, почини поисковое меню, — Jayson, Pretext и много других, которые я не использую, как Timery и MindNode.

Если вы можете предложить еще, то напишите мне в Телеграм или Твиттер