Несколько лет назад мне посчастливилось стать инженером в команде Google Photos и поучаствовать в их первом запуске в 2015-м. Множество людей вложило силы в этот продукт — дизайнеры, продукт-менеджеры, исследователи и бесчисленные инженеры. Я отвечал за пользовательский веб-интерфейс, а точнее, за сетку с фотографиями.

Ниже я подробно расскажу о том, как мы справились с этими сложностями, и загляну под капот веб-версии Google Photos, как она работает.

Как мы делали веб-интерфейс для Google Photos

#article #ui #js

Как и все вы, я достаточно часто использую YouTube. Музыка, научно-популярные передачи, просмотр роликов для релакса — все это можно найти на сервисе. Ну а поскольку он хорошо знаком всем нам, я попытался наглядно показать способ улучшить взаимодействие человека и платформы.

Как улучшить интерфейс на примере YouTube

#ux #ui #design

​​Inter — шрифт, который сделал Rasmus Andersson, он не шрифтовой дизайнер, он больше про UX/UI, стоял у истоков Spotify, а сейчас в Figma. Но шрифт получился классный и хорошо проработанный. Кириллица есть! И он бесплатный!

rsms.me/inter

#font #ui #ux #design

Material UI — это классный набор UI компонентов основанных на компонетах Google Material Design. Работает с React.

Демо | GitHub

#js #material #ui #react

UX-дизайн: то, что вы наверняка забыли сделать

Иногда приложение кажется простым, минималистичным и лаконичным, но легко упустить из виду то, сколько экранов, формочек, кнопочек, окошек и прочих мелочей приводит к такому восприятию легкости и простоты использования.

Представляем вам чеклист более чем из 30 пунктов для самопроверки. Вот примерные подразделы:
1. Логин и регистрация
2. Профиль
3. Важные детали
4. Запуск

#ui #ux #design

Cutestrap — это отличный UI фреймворк с милым дизайном, множеством кастомизаций и легким API. Фреймворк включает в себя современный grid, для создания адаптивных страниц, а так же компоненты, типографию и множество других опций.

Демо | GitHub

#css #ui #components

UIkit — это легкий и модульный фреймворк для разработки быстрых и мощных веб-интерфейсов.

Он поставляется с широким спектром многоразовых и сочетающихся компонентов. Все UIkit классы с уникальными именами, поэтому они не будут мешать работе других конструкций и расширений, которые используются совместно не вызывая ошибок. Начальные размеры стартуют с 55Kb (js – 33Kb / css – 22Kb).

Демо | GitHub

#css #framework #ui

🛠 Material UI — это интересный набор UI компонентов, основанных на Google Material Design. React компоненты для быстрой и легкой веб-разработки.

WebDEV #инструменты #js #react #UI

📖 MERN Projects for Beginners
🖋 Nabendu Biswas, 2021

Узнайте, как использовать MERN стек (MongoDB, Express.js , React, add Node) для создания нескольких веб-приложений: для знакомств, обмена видео, обмена сообщениями и социальных сетей. При создании этих веб-приложений вы изучите ключевые концепции, в том числе как использовать React hooks, Redux, MongoDB, Express, Heroku, Firebase, Material UI и аутентификацию через Google. Расширяя свое портфолио создаваемыми вами проектами, вы будете хорошо подготовлены как full stack разработчик.

💾 Скачать книгу

WebDEV #book #React #Google #web #UI