Что мы чаще всего встречаем первым делом, зайдя на сайт интернет-магазина? Это слайдер с баннерами на главной странице. Как сделать его цепляющим, удобным? Что в нем стоит разместить?
В этой статье разберем 103 гайдлайна с примерами.
Александр Кочеванов @aimh
Дизайнер
Публикуем «Канон» — библиотеку знаний дизайнеров ВКонтакте
5 min
Всем привет, я Матвей Правосудов, старший продуктовый дизайнер ВКонтакте. Ранее мы делились нашей системой VKUI и описывали подход к оформлению приложения для iPad.
Сегодня расскажу о нашей внутренней базе знаний — как и почему она создавалась, о процессе сбора материалов и опыте использования. Как обычно, в конце статьи вас ждёт бонус — ссылка на публичную версию «Канона».
Создаём королевскую форму для приёма банковских карт
8 min
Tutorial
В этой статье я дам рекомендации по созданию платёжных форм, которые будут выгодно отличаться от форм ваших конкурентов. Каждый пункт рекомендаций будет сопровождаться примером кода. Полный пример кода, включающий адаптивную вёрстку, реализацию валидационных тултипов, и прочих мелочей опущенных для краткости в самой статье вы можете посмотреть здесь.
В рамках этой статьи мы не рассматриваем привязку формы к какому-то конкретному мерчант, мы лишь делаем её более отзывчивой.
Для создания формы мы будем использовать следующие инструменты:
- Нативный JS
- BinKing — вспомогательный сервис для создания платёжных форм: https://github.com/sdandteam/binking
- IMask — инструмент для создания масок полей ввода: https://imask.js.org/
Tippy — инструмент для создания тултипов: https://atomiks.github.io/tippyjs/
Figma: плагины для продуктового дизайна. Локальный топчик с видео-инструкцией
8 min
Для Figma написан целый легион плагинов на все случаи жизни. Постоянно появляются рейтинги и топ-листы супер-пупер-мега-лучших. Но этот инструмент используют люди разных конфессий, решая разные свои задачки. Рыцари фриланса рисуют лендинги, студийные братья собирают промо-сайты, еретики даже визитки и плакаты пытаются делать в Figma. И для всех есть свои плагины. Поэтому делать общий топ-100 — пустое занятие.
Но можно накидать локальный местечковый топчик для продуктового дизайнера например. В нём не будет плагинов в духе «смотрите, какая любопытная идея» или «если вдруг вам когда-нибудь понадобится заменить все картинки на фото Николаса Кейджа». Только ежедневные трудяги. Я уверен, этот список будет полезен не только UI-дизайнерам и сочувствующим. Что-то полезное найдут для себя и все остальные фанаты Figma.
SVGator.com на практике
4 min
Как мы пришли к SVGator.com
Digital-рынок сегодня насыщен хорошими решениями, тренды не стоят на месте, одним
из доминантных признаков качества становится анимация интерфейса. В рамках разработки группы продуктов Своё и банковских сервисов Россельхозбанка мы с командой рассматривали
различные решения.
Наш путь начался с lottie, как с более популярного сервиса. Ключевой недостаток: встроенная api. Нам хотелось найти более прагматичное решение без интеграции, поэтому выбор пал на SVGator. В наши цели попадало закрытие микроанимаций элементов интерфейса, оформительские детали и т.п.
Что за зверь и какие задачи решает
SVGator.com — это web-платформа для создания svg-анимаций, то есть svg-файлов со встроенными анимациями, которые без каких-либо проблем интегрируются в html. Можно задать последовательную обработку таких анимаций. Возможен экспорт как js, так и чистым CSS. Возможности js немного шире, но разница не существенная.
В рамках продуктов группы Своё мы создавали различные анимации для лоадеров, микроэлементов (таких как стрелка дропдауна), логотипов и элементов оформления. Мы ещё находимся на стадии экспериментов с SVGator, но уже чётко понимаем, в каких моментах он имеет преимущества и что можно создать с его помощью:
• Небольшие функциональные элементы интерфейса. Например, интерактивные состояния компонентов и вытекающая микроанимация
• Регулярные объекты, которые можно усилить посредством анимации. Например, логотипы, в частности, кейс с кастомизацией лого под праздники
• Элементы дизайна. Например, иллюстрации
UI-элементы и жесты в мобильных приложениях
4 min
Хабр, привет! Вы часто задумывались, обнаружив баг в мобильном приложении и заводя его в баг-трекер, как правильно назвать ту или иную часть интерфейса или действие, которые привели к ошибке? Или читаешь описание задачи и задумываешься, как должен выглядеть какой-то экран и что должно появиться при тапе на кнопку. А может, вы описываете продуктовые задачи и не всегда чувствуете себя на одной волне с дизайнерами и разработчиками, которые иногда начинают говорить на эльфийском? Чтобы исключить недопонимание, неясности и вопросы, мы решили создать перечень наиболее распространенных элементов и жестов и показать их на примере Юлы.
А вы знали, как называется «та самая выезжающая снизу экрана шторка» или несколько (три и более) тапов подряд? Ответы на эти вопросы и названия многих других элементов читайте в нашей статье.
Зачем Chrome Dev Tools дизайнеру
3 min
На Хабре есть несколько статей про полезные фишки Chrome Dev Tools, но давайте добьём этот список в разрезе пользы для дизайнеров, которые хотят потестировать готовую вёрстку своих макетов.
32 отличия дизайна мобильного приложения под iOS и Android
12 min
Железный дизайнер из Redmadrobot Design Lab Артур Абраров делится наблюдениями.
Адаптировать дизайн под другую платформу — неотъемлемая часть работы дизайнера мобильных приложений. Цель этой работы — органично вписать дизайн в паттерны взаимодействия пользователя. К тому же, проработанная адаптация упрощает разработку за счёт использования нативных компонентов платформы.
Чтобы адаптировать дизайн правильно, нужно соблюдать гайдлайны платформ: Human Interface Guidelines (HIG) у iOS и Material Design у Android. И общаться с разработчиками, в идеале подключать их к дизайну как можно раньше, чтобы они могли сразу задать технические ограничения.
Но в чём именно отличается дизайн под iOS от дизайна под Android? В этой статье я разберу 32 конкретных отличия дизайна под iOS и Android. Они поделены на четыре группы:
- Базовые отличия.
- Отличия в навигации и паттернах (UX).
- Отличия в компонентах (UI).
- Прочие отличия.
Особенности iOS будут слева, а Android — справа или сверху/снизу.
Базовые отличия
Human Interface Guidelines vs Material Design
Почти все отличия этой статьи взяты из анализа этих гайдлайнов. Их суть на идейном уровне следующая. HIG — это про плоский, лёгкий, дружелюбный дизайн, пришёл он из постепенного отказа от скевоморфизма.
Material же имеет несколько основополагающих принципов: материал как метафора; смелый, графический, сознательный; осмысленная анимация; гибкая основа и кроссплатформенность. Если вы не знакомы с гайдлайнами, лучше их прочесть до того, как ознакомитесь со статьёй.
Acronis Design: Дополнительные инструменты дизайнера
6 min
Я Сергей, ведущий дизайнер в компании Acronis. В этой статье я расскажу о тех инструментах, которые мы не только внедряем, но разрабатываем для других дизайнеров внутри компании. Речь пойдет о плагинах для Sketch, консольных утилитах и расширениях для Chrome.
Полное руководство по правильному использованию анимации в UX
9 min
Предлагаю вашему вниманию перевод очень крутой статьи по анимации интерфейса.
The ultimate guide to proper use of animation in UX автора Taras Skytskyi.
В настоящее время трудно впечатлить или даже удивить анимацией интерфейса. Она показывает взаимодействие между экранами, объясняет, как использовать приложение или просто направляет внимание пользователя. Изучая статьи об анимации, я узнал, что почти все они описывают только конкретные варианты использования или общие факты об анимации, но я не сталкивался с какой-либо статьей, где все правила, касающиеся анимации интерфейсов, были бы четко и практически описаны. Но, в этой статье я не буду писать ничего нового, я просто хочу собрать все основные принципы и правила в одном месте, так что другим дизайнерам, которые хотят запускать анимированные интерфейсы, не нужно было искать дополнительную информацию.
The ultimate guide to proper use of animation in UX автора Taras Skytskyi.
В настоящее время трудно впечатлить или даже удивить анимацией интерфейса. Она показывает взаимодействие между экранами, объясняет, как использовать приложение или просто направляет внимание пользователя. Изучая статьи об анимации, я узнал, что почти все они описывают только конкретные варианты использования или общие факты об анимации, но я не сталкивался с какой-либо статьей, где все правила, касающиеся анимации интерфейсов, были бы четко и практически описаны. Но, в этой статье я не буду писать ничего нового, я просто хочу собрать все основные принципы и правила в одном месте, так что другим дизайнерам, которые хотят запускать анимированные интерфейсы, не нужно было искать дополнительную информацию.
Как сделать gif-анимацию для Behance и Dribbble?
2 min
Tutorial
Дизайнерам бывает сложно переводить анимированный ролик в gif и подстраиваться под ограничения анимации для Behance и Dribbble.
Есть много статей о том, как быстро сделать анимацию в Principle, Flinto и других редакторах, но нет ничего о том, как её готовить конкретно для Behance и Dribbble.
Мы протаптывали эту тропинку сами и поняли, какой способ для нас оптимальный. Статья будет полезна тем, кто ещё не разобрался.
Дизайн-система. Определение понятия
8 min
В российском дизайн-сообществе сформировалось и все чаще встречается мнение о том, что возникший в последние годы хайп вокруг дизайн-систем — не более, чем пузырь, раздутый вокруг давно существующей темы, а вовлеченные в это дело авторы спекулируют на старых понятиях.
Прототипирование — это просто, как собрать пазл. Мультикомпоненты дизайн системы в Figma
3 min
Если вы работаете в среде Figma, то скорее всего вы используете компоненты в своих дизайн-процессах и знаете в чем их преимущества. Когда в ежедневной фриланс рутине я устал повторять создание одних и тех же списков, табов, таблиц или любых других модулей, состав которых динамичен, я начал думать об автоматизации этих процессов, чтобы рутина как минимум протекала быстрее. Таким образом мультикомпоненты и были открыты!
Дизайн-система Acronis. Часть первая. Единая библиотека компонентов
7 min
Меня зовут Сергей, я работаю старшим дизайнером в компании Acronis. В отделе дизайна продуктов для бизнеса я отвечаю за разработку и внедрение единой библиотеки компонентов.
Так как у нас много продуктов и сервисов, а дизайн в этих продуктах и сервисах сильно отличается, мы решили его унифицировать и привести к единому UI. Зачем? Все просто: такой подход дает возможность оптимизировать работу отдела, сосредоточить дизайнеров на UX, ускорить процесс разработки и запуск новых продуктов, снизить нагрузку на отделы тестирования и значительно сократить количество багов на стороне front-end. В этой статье я расскажу о нашем опыте, остановлюсь на инструментах и покажу, как устроена библиотека изнутри.
Создание Tinkoff Design System. Первые шаги
5 min
В цикле статей Tinkoff Design System я расскажу, как мы строим нашу дизайн-систему по методологии Atomic Design.
Создание Tinkoff Design System. UI Kit, версионирование и витрина компонентов
6 min
В предыдущей публикации я рассказал о том, как мы пришли к пониманию необходимости создания дизайн-системы, и какой профит мы можем получить от ее внедрения. И, конечно, процессы создания и внедрения не такие простые, как кажутся на первый взгляд. Мы столкнулись с рядом серьезных проблем, которые нам предстояло решить. Именно о процессе создания и трудностях пойдет речь в этой статье.
Как объяснить дизайн четырехлетним?
5 min
Translation
Недавно я пришел с предложением в местную начальную школу. Мне хотелось поговорить с детьми о моей работе, рассказать им какие-то основы дизайна, возможно, чему-то научить.
Я планировал пообщаться со старшими ребятами, рассказать то, что считал действительно крутым в своей работе, поделиться каким-то интересным опытом, но в итоге меня попросили провести урок с учениками подготовительной группы (примерно 4-5 лет). Несмотря на то что сначала я был скорее разочарован, это оказалось очень интересной задачей!
Главная особенность работы с детьми такого возраста в том, что ты не можешь ничего рассказать о брендах с которыми работал. Четырехлетние дети не будут восторженно реагировать на истории о работе на Channel 4, BBC и Disel. «Я получал награды BRIT, и даже разработал веб-сайт, на котором получил запись imdb!» — дети не поймут, о чем я вообще говорю. Поэтому нужно было в самых простых выражениях объяснить то, что я сделал, и почему это так важно. Я подумал: было бы здорово показать детям дизайн во всех его формах.
Что я сделал?
Персональные данные (Краткий FAQ)
8 min
Что такое персональные данные?
Персональные данные - любая информация, относящаяся к определенному или определяемому на основании такой информации физическому лицу, в том числе:
— его фамилия, имя, отчество,
— год, месяц, дата и место рождения,
— адрес, семейное, социальное, имущественное положение, образование, профессия, доходы,
- другая информация (см. ФЗ-152, ст.3).
Например: паспортные данные, финансовые ведомости, медицинские карты, год рождения (для женщин), биометрия, другая идентификационная информация личного характера.
В общедоступные источники персональных данных (адресные книги, списки и другое информационное обеспечение) с письменного согласияфизического лица могут включаться его фамилия, имя, отчество, год и место рождения, адрес, абонентский номер и иные персональные данные (см. ФЗ-152, ст.8).
Персональные данные относятся к информации ограниченного доступа и должны быть защищены в соответствии с законодательством РФ. При формировании требований по безопасности систем персональные данные разделяют на 4 категории.
Полный путеводитель по созданию лендингов, которые продают
16 min
Translation
Мы продолжаем знакомить вас с лучшими статьями по веб-дизайну. Сегодня мы перевели свежую статью на Medium о создании эффективных посадочных страниц. Перевод выполнен «Я люблю ИП».
Лендинги — это посадочные страницы, которые созданы специально для достижения определённых целей конверсии. Иногда в качестве лендинга выступает главная страница (хотя многие считают, что она не может быть настоящим лендингом). Но чаще всего создаются специальные посадочные страницы для определённых маркетинговых кампаний.
Цели конверсии могут включать всё, что угодно, начиная с оформления покупки и заканчивая заказом бесплатной информации. Как только у вас есть конкретная цель и вы понимаете ваш рынок, вы можете создавать, тестировать и оптимизировать лендинги, которые помогут вам лучше всего достигнуть поставленных целей.
Бутстрэппинг — бизнес с нуля. Часть 1
5 min
В данной серии статей я расскажу о нашем опыте поднятия бизнеса только своими силами с полного нуля до оборота 350 тыс. евро в год, или, как еще называют такое явление, — бутстрэппинг.