Frontend-разработчикам и UX-дизайнерам: профессиональные ресурсы, книги и фильмы для развития hard skills

24 рекомендации экспертного сообщества Design is Frontend.

Learn.javascript.ru — учебник по JavaScript. Основы, тонкости и фишки JavaScript/DOM.

Developer.mozilla.org — платформа для обучения веб-технологиям и программному обеспечению: статьи о технологиях, справочники и руководства, документация и инструменты разработчиков Mozilla.

«Чтение документации фреймворков, библиотек и браузеров – один из самых полезных навыков, который когда-то бустанул мой рост. Если получится, можно начать читать официальныые спецификации, — это уже сеньорский уровень».
Юрий Чижов, Технический директор PINKMAN

web.dev — ресурс о производительных сайтах с хорошими показателями метрик. В разделе Measure можно провести быстрый аудит сайта и получить отчёт с рекомендациями по улучшению ресурса. В разделе Learn — полезная информация для разработчиков о том, как повысить качество сайта.

css-tricks.com — лайфхаки по вёрстке и статьи с разбором интересных тем. Например, как анимировать SVG с помощью border-image, настраивать шрифты в Dark Mode через css и многое другое.

css-live.ru — статьи про frontend-разработку. Теория и интересные трюки для использования: как убрать сдвиги в вёрстке наложением в CSS Grid, уроки CSSbattle и многое другое.

css.yoksel.ru — статьи про css и svg. Адаптивное видео с помощью встроенных математических функций CSS, генератор цветовых тем и другие полезные материалы.

https://tympanus.net/codrops/category/playground/ — сайт с готовыми современными анимациями для вдохновения.

webdesign-master.ru — блог фуллстак-разработчика, создающего сайты «под ключ».

Создатель проекта webdesign-master Алексей Климанов объясняет все технологии и используемые инструменты. Для начинающих верстать советую его плейлисты «Джедай вёрстки», чтобы перебороть страх вёрстки страниц/сайтов с нуля.
Ещё рекомендую подписаться на теги, связанные с веб-разработкой, на medium.com и habr.com Здесь собрана актуальная информация по трендам и технологиям.
Влад Шуянов, Тимлид фронтенд-разработки Hawking Bros.

«Библиотека верстальщика» — примеры реализации интересных элементов: иконки для соцсетей, анимация чекбоксов и так далее.

HTML/CSS Tasks — сборник тестов по HTML и CSS.

JavaScript Tasks — сборник тестов и заданий по JS (фронтенд и бэкенд).

MSK VUE.JS — публичный чат сообщества разработчиков MSK VUE.JS.

Design is Frontend — чат экспертного сообщества Design is Frontend, где дизайнеры и фронтенд-разработчики обсуждают лайфхаки качественной вёрстки.

«Поясни за UX» — канал с хорошими и плохими UX-примерами, а также UX-мемы по средам.

Design Like Apple: Seven Principles For Creating Insanely Great Products, Джон Эдсон — как относиться к продукту с философской точки зрения.

Книга основана на примерах, показывающих различие между хорошим и плохим дизайном. Например, зубная щетка от Reach прославилась своей эргономичностью на рынке, но при внимательном анализе оказалось, что у нее откровенно неправильный дизайн. Вскоре Oral-B, изучив некоторые моменты поведения потребителя, разработала более качественный дизайн (новая зубная щетка имела толстую ручку), что в конечном итоге повлияло на продажи.
Издательство «Манн, Иванов и Фербер», источник: https://www.mann-ivanov-ferber.ru/books/paperbook/design-apple/

«Модульные системы в графическом дизайне», Йозеф Мюллер-Брокманн — какие модульные системы и сетки бывают и как их использовать.

Книга представляет собой подробное пособие по использованию модульной системы в графическом дизайне и оформительской работе. Автор на примерах рассказывает о применении модульной сетки в дизайне книг, периодических изданий, корпоративной полиграфии, выставочных пространств, приводит исторические образцы архитектуры, типографики и дизайна и убедительно доказывает универсальность и эффективность модульного метода проектирования.
Издательство Студии Артемия Лебедева, Источник: https://www.artlebedev.ru/izdal/modulnye-sistemy/

<p>Источник: <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fsoftculture.cc%2F&postId=213178" rel="nofollow noreferrer noopener" target="_blank">softculture.cc</a></p>

«Книга про буквы от Аа до Яя», Юрий Гордон — книга о буквах — в основном о кириллических (но по ходу дела приходится вспомнить и о греко-римских корнях нашей азбуки).

Эта книга — вторая попытка объяснить самому себе, а заодно и всем интересующимся, что такое буквы русского алфавита и почему они выглядят так, а не иначе. С тех пор как была предпринята первая, автор стал опытнее на триста шрифтов, или как минимум на шестьдесят тысяч букв, изготовленных собственными руками.
Юрий Гордон, Типограф, иллюстратор и автор книги. Источник: https://www.artlebedev.ru/izdal/kniga-pro-bukvy2/

«Придумай. Сделай. Сломай. Повтори», Мартин Томич, Кара Ригли и другие — настольная книга приёмов и инструментов дизайн-мышления.

Не знаете, как сдвинуть брейнсторминг с мертвой точки? Эта книга поможет. В книге описаны 60 приемов и техник, которые можно применить для любого инновационного проекта. Для каждого метода перечислены простые и понятные упражнения, а также готовые шаблоны и инструменты, тематические исследования и задачи для проектирования.
Александр Кременской, Арт-директор Студии Олега Чулакова

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

«Абстракция: искусство дизайна» — документальный сериал об известных представителях мира искусства и дизайна. В первом сезоне представлены иллюстратор Кристоф Ниман, дизайнер кроссовок Nike Тинкер Хэтфилд, сценограф Эс Делвин, архитектор Бьянке Ингельс, дизайнер автомобилей Ральф Джилс, дизайнер Паула Шер, фотограф Платон и дизайнер интерьеров Илзе Кроуфорд.

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

Трейлер к фильму «Гельветика»

«Веб-стандарты» — еженедельный выпуск новостей фронтенда.

Design is Frontend — бесплатная ежеквартальная онлайн-конференция, посвященная комплексному решению проблемы низкого качества вёрстки.

Frontendconf — все аспекты разработки клиентской части веб-проектов: дизайн, юзабилити, вёрстка, JavaScript, веб-медиа и так далее. Конференция проходит один раз в год.

Благодарим коллег из PINKMAN, Voximplant, Студии Олега Чулакова и Hawking Bros. за помощь в подготовке материала.

А что бы вы порекомендовали фронтенд-разработчикам и UX-дизайнерам? Самые полезные рекомендации добавим в подборку.