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.

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

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

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

Юрий Гордон
Типограф, иллюстратор и автор книги. Источник: https://www.artlebedev.ru/izdal/kniga-pro-bukvy2/

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

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

Александр Кременской
Арт-директор Студии Олега Чулакова

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

Фильмы и сериалы

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

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

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

Подкаст

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

Конференции

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

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

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

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

{ "author_name": "Игорь Яковлев", "author_type": "self", "tags": ["\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434","\u0441\u043e\u0432\u0435\u0442\u044b","\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430","\u0438\u0434\u0435\u0438","\u0437\u0430\u0434\u0430\u0447\u0438","\u0434\u0438\u0437\u0430\u0439\u043d","\u0432\u0435\u0440\u0441\u0442\u043a\u0430","\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430","\u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u0430\u044f_\u043a\u043e\u043d\u0444\u0435\u0440\u0435\u043d\u0446\u0438\u044f","designisfrontend"], "comments": 2, "likes": 3, "favorites": 34, "is_advertisement": false, "subsite_label": "dev", "id": 213178, "is_wide": true, "is_ugc": true, "date": "Tue, 09 Mar 2021 15:51:55 +0300", "is_special": false }
0
2 комментария
Популярные
По порядку
1

Очень насыщенная подборка материалов, спасибо что поделились)

Ответить
0

спасибо! если есть, что добавить – велкам!

Ответить

Комментарии

null