​​› Курсор: мелочь, но приятно

Смена стэйта курсора... Вроде бы мелочь, но в совокупности интерфейса и его восприятия делает невероятную штуку – интуитивно показывает пользователю то, где он сейчас "находится". Не забываем то, что курсор – вещь, которая всегда в фокусе, ведь это главный элемент взаимодействия с веб-интерфейсом. Многие разрабы забивают болт на дефолтные возможности браузера и системы, делая тонну визуальных перделок на css-js. А все потому что они мудаки. Не будь как они – юзай курсоры.

Нахуй надо? Все просто, наведу примеры использования:
◦ Навел на ссылку или активный элемент? Получил "активный" курсор.
◦ В области изображения, которое можно увеличить? Получил курсор "зума".
◦ Пользователь вынужден подождать ответа из сервера? Получает курсор "ожидания".
◦ Неактивный компонент? Получай "запрещенный" курсор!
Таких примеров множество. Это не сложно, зато вы получаете огромный респект от тех, кто зашел на веб-сайт и вынужден изучать ваш интерфейс.

Лайв-пример: ссылка на дефолтные и реализацию кастомных курсоров

#ux #css

​​​​› Ахуенный дефолтный UX инпутов для мобил

Частенько далекие, от мира Сего, разрабы используют только input[type=text] вместо того, чтобы внести чутка больше магии ввиде UX для юзера. А еще чаще – подпиливают тонну пердежных плагинов в кастомные инпуты с всплывающими окнами, там где это не нужно и анриал юзать на тач-девайсах.

Приведу примеры отображения на iOS, Safari:
◦ Select – дропдавн с возможностью кастомизации через стили, с крутецким выбором пунктов на мобилах;
◦ input[type=date] – на мобилах имеет такой же барабан, как и select, но с тремя колонками и выбором дд/мм/гггг;
◦ input[type=tel] – создавался, как видно по названии, для инпутов ввода номера телефона, но может использоваться и для ввода цифровых данных. На мобиле отображает большие цифры, буквы не мешаются под рукой;
◦ input[type=email] – популярнейший тип инпута, наряду с input[type=password], созданный для ввода мыла. На клавиатуре появляется собачка (@);
◦ input[type=url] – крутое решение для инпутов ввода урлов: клавиатура пополняется тремя новыми клавишами - ., / и .com; ◦ input[type=search] – создан для инпута поиска по сайту. Надпись Enter заменяется на Search и при нажатии вызывает submit. К тому же, система распознает это поле и дает возможность искать по сайту, используя строку браузера (скриншот)

Типы инпутов, описанных выше, я собрал на код-карандаше. Смотрите, тестите, юзайте.

Ахтунг! Не стоит забывать что разные типы имеют свои собственные браузерные стили. Например, на iOS Safari:input имеет box-shadow, а input[type=search] закругленные углы.

И, конечно же, загуглив по запросу types of inputs html, вы найдете еще крутых типов инпута.

#ux #html

​​До сих пор делаешь макеты в фотошопе? Поздравляю – ты уёбок. [Ахтунг, баттхёрт-пост]

Ненавижу, блядь, этих мудаков. Они суют своё дерьмо в пыезде-формате и радуются. Они говорят «Гы, держи» заказчикам, разработчикам и другим планктонам проекта. А они же, в свою очередь, качают эти сотни мегабайт мусора и слоев и открывают это дерьмо ТОЛЬКО в фотошопе. А во всем виноват уёбок-дизайнер. Конечно же, есть всякие Zeplin'ы для частичного превращения этого дерьма в что-то съедобное, но это чисто до пизды: ни растр, ни вектор вы не стащите адекватно, дизайнеру сбрасывать её отдельно.

Именно поэтому умные люди создали Figma, которая заставляет дизайнеров и разрабов, от одного упоминания, истекать вовсю. Это просто заебатый и ахуительный инструмент для разработки макетов веб-сайта или приложения с кучей плюшек:
◦ Делать макеты можно с любой ОС, хоть с браузера. Показывать заказчикам можно также – тупо бросив ссылку на проект;
◦ Командная работа – в макете может одновременно работать команда дизайнеров, пиля это все добро онлайн;
◦ Контроль версий – нативный способ откатить изменения без каких-либо проблем;
◦ Комментарии позволяют разобрать каждый пиксель макета без уебищных поисков места обсуждения;
◦ Ахуительная работа с векторами – вообще пушка, это нужно потыкать-попробывать;
◦ Еще множество плюшек, во время создания статьи вдохновился этой статьей – можете почитать

Вдохновился написанием этой статьи от своего лапочки-дизайнера, который ведет свой канал по UI/UX – UI/UX Journal🤘. Он работает в Фигме, он делает крутой и приятный дизайн, он начал вести свой канал. Чем не повод подписаться?

#ux #ui #figma