Боль фронтов, или что нам нужно от дизайнеров
Извечная борьба дизайнеров и разработчиков уже давно ведётся в мире веб-разработки. Как правило, у разных представителей обеих сторон возникают одни и те же проблемы из года в год.
В этой статье автор постарался разобрать некоторые из этих проблем и предложить пути их решения:
https://habr.com/ru/post/541666/
#фронтенд #ui
Извечная борьба дизайнеров и разработчиков уже давно ведётся в мире веб-разработки. Как правило, у разных представителей обеих сторон возникают одни и те же проблемы из года в год.
В этой статье автор постарался разобрать некоторые из этих проблем и предложить пути их решения:
https://habr.com/ru/post/541666/
#фронтенд #ui
👍17😁2❤1👏1
Как сделать навигацию на сайте документации
Эта статья пригодится в первую очередь техническим писателям и разработчикам сайтов документации, но также понравится любителям опенсорса и красивых вещей. В ней вы узнаете: как можно улучшить навигационное меню на сайте документации, сократить время сборки и размер сайта больше чем в два раза на примере сайта, собранного при помощи Antora.
Подробнее:
https://tproger.ru/articles/krov-pot-i-slezy-kak-ja-peredelal-navigaciju-na-sajte-dokumentacii-i-v-chjom-profit-peredelki/
#ui
Эта статья пригодится в первую очередь техническим писателям и разработчикам сайтов документации, но также понравится любителям опенсорса и красивых вещей. В ней вы узнаете: как можно улучшить навигационное меню на сайте документации, сократить время сборки и размер сайта больше чем в два раза на примере сайта, собранного при помощи Antora.
Подробнее:
https://tproger.ru/articles/krov-pot-i-slezy-kak-ja-peredelal-navigaciju-na-sajte-dokumentacii-i-v-chjom-profit-peredelki/
#ui
🍾3
Как понять режимы наложения раз и навсегда
Ну что, дизайнеры, давайте представим, что вам необходимо выбрать режим наложения для создания очередного потрясающе красивого элемента страницы. Что вы будете делать? Скорее всего начнёте перебирать каждый вариант наложения по списку, пока не найдёте подходящий. Так?
Если вы всё ещё не знаете, чем отличается Lighten от Soft Light или Multiply от Screen, то для вас есть статья, которая доходчиво всё объяснит:
https://awdee.ru/blending-modes/
#ui #design
Ну что, дизайнеры, давайте представим, что вам необходимо выбрать режим наложения для создания очередного потрясающе красивого элемента страницы. Что вы будете делать? Скорее всего начнёте перебирать каждый вариант наложения по списку, пока не найдёте подходящий. Так?
Если вы всё ещё не знаете, чем отличается Lighten от Soft Light или Multiply от Screen, то для вас есть статья, которая доходчиво всё объяснит:
https://awdee.ru/blending-modes/
#ui #design
👍19🍓1
Разработка идеального пользовательского интерфейса для выбора языка
Насколько сложно может быть разработать качественный языковой селектор? Это не так просто, как можно подумать. Вам нужно избегать перенаправлений, разделять настройки языка и стран, допускать переопределения и использовать немодальные окна.
Окунитесь в мир разработки идеального UI и научитесь создавать лучший селектор языка в этой статье:
https://www.smashingmagazine.com/2022/05/designing-better-language-selector/
#фронтенд #ui
Насколько сложно может быть разработать качественный языковой селектор? Это не так просто, как можно подумать. Вам нужно избегать перенаправлений, разделять настройки языка и стран, допускать переопределения и использовать немодальные окна.
Окунитесь в мир разработки идеального UI и научитесь создавать лучший селектор языка в этой статье:
https://www.smashingmagazine.com/2022/05/designing-better-language-selector/
#фронтенд #ui
👍2
Тирания маргинального юзера: почему веб-интерфейсы становятся примитивнее?
Автор статьи обратил внимание на то, что интерфейсы сайтов становятся всё более примитивными, словно рассчитаны на жителей «Идиократии».
Одна из причин — огромное количество устройств разного типа: смартфоны, ноутбуки, настольные ПК, киоски и другие устройства со встроенными браузерами. Но главная причина по мнению автора — пользователи.
Структура цифровой экономики такова, что она ориентируется на «отвлечённого» пользователя с дефицитом внимания. Корпорациям выгодно эксплуатировать, полусознательное состояние человека, продавая ему товары. И многие веб-разработчики служат этому культу.
Как именно это выражается, как влияет на работу веб-разработчиков и что с этим можно сделать — читайте в статье: https://habr.com/ru/companies/ruvds/articles/777420/
#ui #фронтенд
Автор статьи обратил внимание на то, что интерфейсы сайтов становятся всё более примитивными, словно рассчитаны на жителей «Идиократии».
Одна из причин — огромное количество устройств разного типа: смартфоны, ноутбуки, настольные ПК, киоски и другие устройства со встроенными браузерами. Но главная причина по мнению автора — пользователи.
Структура цифровой экономики такова, что она ориентируется на «отвлечённого» пользователя с дефицитом внимания. Корпорациям выгодно эксплуатировать, полусознательное состояние человека, продавая ему товары. И многие веб-разработчики служат этому культу.
Как именно это выражается, как влияет на работу веб-разработчиков и что с этим можно сделать — читайте в статье: https://habr.com/ru/companies/ruvds/articles/777420/
#ui #фронтенд
🤣31❤2👎1
Old but gold: Как понять режимы наложения раз и навсегда
Ну что, дизайнеры, давайте представим, что вам необходимо выбрать режим наложения для создания очередного потрясающе красивого элемента страницы. Что вы будете делать? Скорее всего начнёте перебирать каждый вариант наложения по списку, пока не найдёте подходящий. Так?
Если вы всё ещё не знаете, чем отличается Lighten от Soft Light или Multiply от Screen, то для вас есть статья, которая доходчиво всё объяснит: https://awdee.ru/blending-modes/
#ui #design
Ну что, дизайнеры, давайте представим, что вам необходимо выбрать режим наложения для создания очередного потрясающе красивого элемента страницы. Что вы будете делать? Скорее всего начнёте перебирать каждый вариант наложения по списку, пока не найдёте подходящий. Так?
Если вы всё ещё не знаете, чем отличается Lighten от Soft Light или Multiply от Screen, то для вас есть статья, которая доходчиво всё объяснит: https://awdee.ru/blending-modes/
#ui #design
🔥5👍2
Интересная библиотека нарисованных от руки UI-компонентов
На сайте собраны кнопки, слайдеры, шаблоны для видеоплеера и другие элементы для сайтов: https://wiredjs.com/showcase
Выглядит очень интересно. Особенно, если совместить с похожими проектами. Например, chart.xkcd. В итоге получится полностью нарисованный от руки сайт.
#ui #design #инструменты
На сайте собраны кнопки, слайдеры, шаблоны для видеоплеера и другие элементы для сайтов: https://wiredjs.com/showcase
Выглядит очень интересно. Особенно, если совместить с похожими проектами. Например, chart.xkcd. В итоге получится полностью нарисованный от руки сайт.
#ui #design #инструменты
🔥24❤2👍2
Разработчики выпустили Cally — библиотеку UI-компонентов календаря
Разработчики опубликовали на GitHub компактную библиотеку многофункциональных компонентов календаря. Код Cally написан на TypeScript и опубликован в открытом репозитории: https://github.com/WickyNilliams/cally
В календаре можно выбирать отдельные даты, недели и отображать сразу несколько месяцев на экране. Для внедрения доступны пользовательские стили дизайна.
Библиотека не зависит от фреймворков и прост в использовании, в проекте не используются сторонние библиотеки и компоненты, а набор не навязывает конкретную структуру DOM. Пакет весит всего 9 КБ при сжатии в Gzip.
Библиотеку можно установить с помощью пакетного менеджера npm. В коде Cally доступно через импорт модуля или CDN:
<script type="module" src="https://unpkg.com/cally"></script>
#ui #design #инструменты
Разработчики опубликовали на GitHub компактную библиотеку многофункциональных компонентов календаря. Код Cally написан на TypeScript и опубликован в открытом репозитории: https://github.com/WickyNilliams/cally
В календаре можно выбирать отдельные даты, недели и отображать сразу несколько месяцев на экране. Для внедрения доступны пользовательские стили дизайна.
Библиотека не зависит от фреймворков и прост в использовании, в проекте не используются сторонние библиотеки и компоненты, а набор не навязывает конкретную структуру DOM. Пакет весит всего 9 КБ при сжатии в Gzip.
Библиотеку можно установить с помощью пакетного менеджера npm. В коде Cally доступно через импорт модуля или CDN:
<script type="module" src="https://unpkg.com/cally"></script>
#ui #design #инструменты
👍14
Эффект матового стекла для веба
Разработчик, участвовавший в создании игр Forza, так вдохновился их элементами дизайна, что решил повторить их с помощью HTML. Конечно, без CSS тут тоже не обошлось, а где-то даже потребовался JS, но результат получился отличным.
Своим опытом и готовым проектом автор поделился в статье.
#html #css #ui
Разработчик, участвовавший в создании игр Forza, так вдохновился их элементами дизайна, что решил повторить их с помощью HTML. Конечно, без CSS тут тоже не обошлось, а где-то даже потребовался JS, но результат получился отличным.
Своим опытом и готовым проектом автор поделился в статье.
#html #css #ui
🔥12👍3
SDUI, или Как бэкенд-разработчику почувствовать себя фронтендером
Server Driven UI (SDUI) — это пользовательский интерфейс, управляемый сервером. Он сокращает клиентскую логику и обеспечивает согласованность между клиентскими платформами (web, iOS, Android и т. д.) за счёт возврата информации о продукте (элементов экрана для отображения и их содержимом) из API.
Другими словами, эта технология позволяет UI сделать запрос к API и получить в ответ JSON, в котором содержатся компоненты экрана (кнопки, checkbox’ы, поля для ввода и т. д.), а также логика их отображения под необходимую платформу.
Как это работает, рассказали в статье.
#ui #бэкенд #sdui
Server Driven UI (SDUI) — это пользовательский интерфейс, управляемый сервером. Он сокращает клиентскую логику и обеспечивает согласованность между клиентскими платформами (web, iOS, Android и т. д.) за счёт возврата информации о продукте (элементов экрана для отображения и их содержимом) из API.
Другими словами, эта технология позволяет UI сделать запрос к API и получить в ответ JSON, в котором содержатся компоненты экрана (кнопки, checkbox’ы, поля для ввода и т. д.), а также логика их отображения под необходимую платформу.
Как это работает, рассказали в статье.
#ui #бэкенд #sdui
👍6💩5
This media is not supported in your browser
VIEW IN TELEGRAM
Слайдер настроения на чистом JS
Автор этого проекта создал слайдер, который поможет вам точно указать степень эмоционального состояния. Такой элемент пригодится везде, где требуется оценить качество предоставленной услуги, работы или чего-нибудь ещё.
Создан он с помощью SCSS и JS. Забрать код в свой проект или изучить подробнее можно по ссылке на codepen.
#codepen #слайдер #ui
Автор этого проекта создал слайдер, который поможет вам точно указать степень эмоционального состояния. Такой элемент пригодится везде, где требуется оценить качество предоставленной услуги, работы или чего-нибудь ещё.
Создан он с помощью SCSS и JS. Забрать код в свой проект или изучить подробнее можно по ссылке на codepen.
#codepen #слайдер #ui
CSS-фреймворк в стиле CS 1.6
Любители контры на месте? Специально для вас я нашёл и принёс UI-библиотеку, сделанную в духе знаменитого шутера. Инструкция по установке и все возможные стили ждут вас здесь:
https://cs16.samke.me/
Не знаю, где вы ей найдёте применение, но очень хотелось бы на это посмотреть. Поэтому, если где-то её используете, поделитесь потом в комментариях к посту.
#библиотека #css #ui
Любители контры на месте? Специально для вас я нашёл и принёс UI-библиотеку, сделанную в духе знаменитого шутера. Инструкция по установке и все возможные стили ждут вас здесь:
https://cs16.samke.me/
Не знаю, где вы ей найдёте применение, но очень хотелось бы на это посмотреть. Поэтому, если где-то её используете, поделитесь потом в комментариях к посту.
#библиотека #css #ui
🔥25❤2👍2
This media is not supported in your browser
VIEW IN TELEGRAM
Жидкие кнопки для вашего сайта
Подборка из шести кнопок, с которыми пользователю будет интересно взаимодействовать даже до момента нажатия на них. Сделаны на связке HTML + SCSS + JavaScript.
Посмотреть код и забрать их к себе в проект можно тут:
https://codepen.io/Zaku/pen/eRmRxz
#codepen #ui #фронтенд
Подборка из шести кнопок, с которыми пользователю будет интересно взаимодействовать даже до момента нажатия на них. Сделаны на связке HTML + SCSS + JavaScript.
Посмотреть код и забрать их к себе в проект можно тут:
https://codepen.io/Zaku/pen/eRmRxz
#codepen #ui #фронтенд
👍15🔥10🗿2🤔1
Прокачайте свой UI Kit: 10 практических советов для UX/UI дизайнеров
В быстро меняющемся мире дизайна важно, чтобы ваш UI Kit не только соответствовал современным требованиям, но и облегчал работу всей команды. В этой статье вы найдете конкретные рекомендации по реорганизации структуры компонентов, улучшению документации, внедрению адаптивности, поддержке темной и светлой тем, созданию обширной системы иконок и многому другому. Эти шаги помогут сделать ваш UI Kit более функциональным и вдохновляющим инструментом.
https://habr.com/ru/articles/805581/
#ui@tproger_web #ux@tproger_web #дизайн@tproger_web
В быстро меняющемся мире дизайна важно, чтобы ваш UI Kit не только соответствовал современным требованиям, но и облегчал работу всей команды. В этой статье вы найдете конкретные рекомендации по реорганизации структуры компонентов, улучшению документации, внедрению адаптивности, поддержке темной и светлой тем, созданию обширной системы иконок и многому другому. Эти шаги помогут сделать ваш UI Kit более функциональным и вдохновляющим инструментом.
https://habr.com/ru/articles/805581/
#ui@tproger_web #ux@tproger_web #дизайн@tproger_web
This media is not supported in your browser
VIEW IN TELEGRAM
CSS Loaders: готовые анимации загрузки без JS
Когда нужно быстро добавить симпатичный индикатор загрузки — не обязательно писать его с нуля. На css-loaders.com собраны десятки готовых CSS‑анимаций: спиннеры, полоски, точки, волны и даже креативные 3D‑эффекты. Все варианты работают без JavaScript и легко кастомизируются под ваш дизайн. Просто копируйте код и вставляйте в проект.
#фронтенд #css #ui
Когда нужно быстро добавить симпатичный индикатор загрузки — не обязательно писать его с нуля. На css-loaders.com собраны десятки готовых CSS‑анимаций: спиннеры, полоски, точки, волны и даже креативные 3D‑эффекты. Все варианты работают без JavaScript и легко кастомизируются под ваш дизайн. Просто копируйте код и вставляйте в проект.
#фронтенд #css #ui
👍4🤩3