Для начала - копировать, копировать, и копировать.
Так как у вас есть опыт большой опыт разработки - вы можете брать и перерисовывать "под себя" другие дизайн-макеты.
Изучайте гайдлайны. Основные, с которыми стоит ознакомиться:
Google material,
Human Interface Guidelines, гайды
СБК Контур.
Почитайте про основы типографики и верстки шрифта - советую почитать на эту тему блог
Игоря Штанга, он достаточно ясно все обьясняет.
Вдохновляйтесь лучшими сайтами на
webdesign-inspiration.com и
Awwwards.
Немного о ПО (личный опыт):
Проектирование и вайрфрейминг:
Balsamiq Moqups или
Moqups;
Axure или
JustInMind (последнее для Mac);
Дизайн интерфейса:
Sketch (для Mac) или
Figma (для Windows/Linux)
Прототипирование:
Marvel/
Invision
Так как у вас есть навыки JS (я полагаю) то средства анимации типа
Principle /
вам не сильно пригодятся.
Полезные ресурсы для изучения дизайна:
DeadsignSketchapp.meHabrahabr поток дизайн
и также американские дизайн блоги, коих тысячи.
Можете просто зайти на
мой тви аккаунт и подписаться на того, на кого подписан я )
-------
Если будут вопросы вступайте в чат Pixel Perfect в Telegram, пообщаемся:
https://t.me/pppixel_chat.
Удачи ;-)