Немного о "дизайне" для "программиста".
В рамках актуализации знаний технических понял что надо возвращаться во фронт, я там сейчас как динозавр - последнее что помню - это "верстать дивами" и "jQuery", прости господи.
С точки зрения чистой разработки копаюсь вокруг тайпскрипта и Angular/React-а.
Но вопрос возник другой.
Системно появляются сервисы (SaaS-ы я имею в виду), которые явно сделаны одним-двумя людьми, с UX на уровне.
Мы еще когда-то давно с товарищем обсуждали, что в принципе - вполне реально собрать некий "базис" дизайна, UX и типографики, который можно использовать из проекта в проект.
Вот я, например, хочу в качестве pet-project-а сделать обучалку нотам на грифе гитары/клавишах.
Фронт будет говорить "а сыграй-ка мне ноту ре на грифе, там где она встречается между первым и пятым ладом" - и юзер будет играть, а программа - говорить правильно юзер сыграл или нет. Интервалы там спрашивать, итп.
(чтобы на секунду понять куда продвинулся "фронт" - вот например digital audio workstation -
https://github.com/rserota/wad как Ableton итп, можете эффекты навешать на звук, итп. Ну и тюнер в комплекте - я им пользуюсь чтобы ноты разобрать).
Так вот, я стал всех спрашивать - куда же стоит пойти "учиться" чтобы собрать себе базис вот этот UX-ерский, чтобы потом самому себе придумать некий стиль, и его лупить от петпроджекта к петпроджекту, так чтобы при этом все красиво и удобно было?
Выношу из фейсбука самый подробный коммент, спасибо Диме Пронину:
"А собственно
https://blog.prototypr.io/design-for-programmers-d38c56982cd0 и хватит.
Есть шрифты и типографика.
- Не копаемся, берем популярные шрифты и их пары.
- Выставляем нужную иерархию
https://nowodzinski.pl/syncope/Есть иллюстрации и смысл.
Гуглим иллюстрация, ильяхов, визуальное повествование
Статьи, вебинары, что угодно.
Цвета
Гуглим хорошие палитры. Material Palette, гуглим разные сочетания. Тут опасно экспериментировать, проще взять проверенные хорошие надежные наборы.
Это про лендинги.
Дальше только нарабатывать скилл - какой заголовок напишешь, какую палитру выберешь, какой шрифт подберешь, какую иллюстрацию купишь. И нет супер-хитростей, только скилл и практика. (EP: я занялся тем, что в тех сервисах/сайтах где мне нравится как сделано - лезу в код и смотрю как это сверстано и по какой логике)
Про интерфейсы для айтишника.
Паттерны, шаблоны поведения, взаимодействияЕсли делаем UI - можно повесится в сложности и мелочах. Поэтому - просто берем и читаем
https://material.io/design и применяем все паттерны на мобильных устройствах. Можно покрасить в белый цвет, изменить шрифты, закруглить кнопки и все поведение перенести в iOS.
Для веба (вот тут внимание)!! Fluid Design
https://docs.microsoft.com/en-us/windows/uwp/design/basics/commanding-basicsПанели, формы, переходы, навигация, структура разделов.
Дальше тоже - игра и баланс со шрифтами, чтобы получить Apple Design Awwards))
Все эти мелочи - а как упорядочить навигацию. А сколько информации отобразить на одном экране. А какая иерархия инпутов, дропдаунов, описаний. А почему ширина текста не должна быть на весь экран большим полотном, а желательно 66 символов шириной (desktop). А какой визуальный вес, последовательность элементов, баланс - там все уже решено, можно просто использовать.
Панели, формы, переходы, навигация, структура разделов.
Дальше тоже - игра и баланс со шрифтами, чтобы получить Apple Design Awwards))
Все эти мелочи - а как упорядочить навигацию. А сколько информации отобразить на одном экране. А каккая иерархия инпутов, дропдаунов, описаний. А почему ширина текста не должна быть на весь экран большим полотном, а желательно 66 символов шириной (desktop). А какой визуальный вес, последовательность элементов, баланс - там все уже решено, можно просто использовать."
В придачу интересные блоги/статьи которые можно поглядывать:
https://www.smashingmagazine.com/https://css-tricks.com/https://uxdesign.cc/