Frontend-разработчикам и UX-дизайнерам: профессиональные ресурсы, книги и фильмы для развития hard skills
24 рекомендации экспертного сообщества Design is Frontend.
Обучение и лайфхаки
Learn.javascript.ru — учебник по JavaScript. Основы, тонкости и фишки JavaScript/DOM.
Developer.mozilla.org — платформа для обучения веб-технологиям и программному обеспечению: статьи о технологиях, справочники и руководства, документация и инструменты разработчиков Mozilla.
«Чтение документации фреймворков, библиотек и браузеров – один из самых полезных навыков, который когда-то бустанул мой рост. Если получится, можно начать читать официальныые спецификации, — это уже сеньорский уровень».
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 Здесь собрана актуальная информация по трендам и технологиям.
Telegram-каналы и чаты
«Библиотека верстальщика» — примеры реализации интересных элементов: иконки для соцсетей, анимация чекбоксов и так далее.
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, изучив некоторые моменты поведения потребителя, разработала более качественный дизайн (новая зубная щетка имела толстую ручку), что в конечном итоге повлияло на продажи.
«Модульные системы в графическом дизайне», Йозеф Мюллер-Брокманн — какие модульные системы и сетки бывают и как их использовать.
Книга представляет собой подробное пособие по использованию модульной системы в графическом дизайне и оформительской работе. Автор на примерах рассказывает о применении модульной сетки в дизайне книг, периодических изданий, корпоративной полиграфии, выставочных пространств, приводит исторические образцы архитектуры, типографики и дизайна и убедительно доказывает универсальность и эффективность модульного метода проектирования.
Источни��: softculture.cc
«Книга про буквы от Аа до Яя», Юрий Гордон — книга о буквах — в основном о кириллических (но по ходу дела приходится вспомнить и о греко-римских корнях нашей азбуки).
Эта книга — вторая попытка объяснить самому себе, а заодно и всем интересующимся, что такое буквы русского алфавита и почему они выглядят так, а не иначе. С тех пор как была предпринята первая, автор стал опытнее на триста шрифтов, или как минимум на шестьдесят тысяч букв, изготовленных собственными руками.
«Придумай. Сделай. Сломай. Повтори», Мартин Томич, Кара Ригли и другие — настольная книга приёмов и инструментов дизайн-мышления.
Не знаете, как сдвинуть брейнсторминг с мертвой точки? Эта книга поможет. В книге описаны 60 приемов и техник, которые можно применить для любого иннов��ционного проекта. Для каждого метода перечислены простые и понятные упражнения, а также готовые шаблоны и инструменты, тематические исследования и задачи д��я проектирования.
«Принципы. Жизнь и работа», Рэй Далио — жизненные и управленческие принципы Рэя Далио, одного из самых влиятельных и богатых людей планеты, и история его детища — крупнейшего в мире хедж-фонда Bridgewater.
Фильмы и сериалы
«Абстракция: искусство дизайна» — документальный сериал об известных представителях мира искусства и дизайна. В первом сезоне представлены иллюстратор Кристоф Ниман, дизайнер кроссовок Nike Тинкер Хэтфилд, сценограф Эс Делвин, архитектор Бьянке Ингельс, дизайнер автомобилей Ральф Джилс, дизайнер Паула Шер, фотограф Платон и дизайнер интерьеров Илзе Кроуфорд.
«Гельветика» — фильм о типографике, графическом дизайне и визуальной культуре в целом. Фильм представляет собой исследование городского пространства и шрифтов, которые его наполняют, а также цикл бесед с известными дизайнерами об их работе, творческом процессе, выборе и эстетической составляющей шрифтов.
Подкаст
«Веб-стандарты» — еженедельный выпуск новостей фронтенда.
Конференции
Design is Frontend — бесплатная ежеквартальная онлайн-конференция, посвященная комплексному решению проблемы низкого качества вёрстки.
Frontendconf — все аспекты разработки клиентской части веб-проектов: дизайн, юзабилити, вёрстка, JavaScript, веб-медиа и так далее. Конференция проходит один раз в год.
Благодарим коллег из PINKMAN, Voximplant, Студии Олега Чулакова и Hawking Bros. за помощь в подготовке материала.
А что бы вы порекомендовали фронтенд-разработчикам и UX-дизайнерам? Самые полезные рекомендации добавим в подборку.