Pull to refresh
20
0
Александр Кочеванов @aimh

Дизайнер

Send message

Проектируем слайдер на главной странице интернет-магазина: 103 гайдлайна

Reading time 12 min
Views 8.2K

Что мы чаще всего встречаем первым делом, зайдя на сайт интернет-магазина? Это слайдер с баннерами на главной странице. Как сделать его цепляющим, удобным? Что в нем стоит разместить?

В этой статье разберем 103 гайдлайна с примерами.

Читать далее
Total votes 4: ↑3 and ↓1 +2
Comments 4

Публикуем «Канон» — библиотеку знаний дизайнеров ВКонтакте

Reading time 5 min
Views 5.3K

Всем привет, я Матвей Правосудов, старший продуктовый дизайнер ВКонтакте. Ранее мы делились нашей системой VKUI и описывали подход к оформлению приложения для iPad.

Сегодня расскажу о нашей внутренней базе знаний — как и почему она создавалась, о процессе сбора материалов и опыте использования. Как обычно, в конце статьи вас ждёт бонус — ссылка на публичную версию «Канона».

Читать далее
Total votes 12: ↑12 and ↓0 +12
Comments 1

Создаём королевскую форму для приёма банковских карт

Reading time 8 min
Views 17K


В этой статье я дам рекомендации по созданию платёжных форм, которые будут выгодно отличаться от форм ваших конкурентов. Каждый пункт рекомендаций будет сопровождаться примером кода. Полный пример кода, включающий адаптивную вёрстку, реализацию валидационных тултипов, и прочих мелочей опущенных для краткости в самой статье вы можете посмотреть здесь.


В рамках этой статьи мы не рассматриваем привязку формы к какому-то конкретному мерчант, мы лишь делаем её более отзывчивой.


Для создания формы мы будем использовать следующие инструменты:


  1. Нативный JS
  2. BinKing — вспомогательный сервис для создания платёжных форм: https://github.com/sdandteam/binking
  3. IMask — инструмент для создания масок полей ввода: https://imask.js.org/
  4. Tippy — инструмент для создания тултипов: https://atomiks.github.io/tippyjs/

Читать дальше →
Total votes 16: ↑6 and ↓10 -4
Comments 22

Figma: плагины для продуктового дизайна. Локальный топчик с видео-инструкцией

Reading time 8 min
Views 15K

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

Но можно накидать локальный местечковый топчик для продуктового дизайнера например. В нём не будет плагинов в духе «смотрите, какая любопытная идея» или «если вдруг вам когда-нибудь понадобится заменить все картинки на фото Николаса Кейджа». Только ежедневные трудяги. Я уверен, этот список будет полезен не только UI-дизайнерам и сочувствующим. Что-то полезное найдут для себя и все остальные фанаты Figma.

Дайте двадцать лучших!
Total votes 9: ↑9 and ↓0 +9
Comments 19

SVGator.com на практике

Reading time 4 min
Views 4.3K

Как мы пришли к SVGator.com

Digital-рынок сегодня насыщен хорошими решениями, тренды не стоят на месте, одним
из доминантных признаков качества становится анимация интерфейса. В рамках разработки группы продуктов Своё и банковских сервисов Россельхозбанка мы с командой рассматривали
различные решения.

Наш путь начался с lottie, как с более популярного сервиса. Ключевой недостаток: встроенная api. Нам хотелось найти более прагматичное решение без интеграции, поэтому выбор пал на SVGator. В наши цели попадало закрытие микроанимаций элементов интерфейса, оформительские детали и т.п.

Что за зверь и какие задачи решает

SVGator.com — это web-платформа для создания svg-анимаций, то есть svg-файлов со встроенными анимациями, которые без каких-либо проблем интегрируются в html. Можно задать последовательную обработку таких анимаций. Возможен экспорт как js, так и чистым CSS. Возможности js немного шире, но разница не существенная.

В рамках продуктов группы Своё мы создавали различные анимации для лоадеров, микроэлементов (таких как стрелка дропдауна), логотипов и элементов оформления. Мы ещё находимся на стадии экспериментов с SVGator, но уже чётко понимаем, в каких моментах он имеет преимущества и что можно создать с его помощью:

 Небольшие функциональные элементы интерфейса. Например, интерактивные состояния компонентов и вытекающая микроанимация

 Регулярные объекты, которые можно усилить посредством анимации. Например, логотипы, в частности, кейс с кастомизацией лого под праздники

Элементы дизайна. Например, иллюстрации

Читать далее
Total votes 14: ↑10 and ↓4 +6
Comments 16

UI-элементы и жесты в мобильных приложениях

Reading time 4 min
Views 204K


Хабр, привет! Вы часто задумывались, обнаружив баг в мобильном приложении и заводя его в баг-трекер, как правильно назвать ту или иную часть интерфейса или действие, которые привели к ошибке? Или читаешь описание задачи и задумываешься, как должен выглядеть какой-то экран и что должно появиться при тапе на кнопку. А может, вы описываете продуктовые задачи и не всегда чувствуете себя на одной волне с дизайнерами и разработчиками, которые иногда начинают говорить на эльфийском? Чтобы исключить недопонимание, неясности и вопросы, мы решили создать перечень наиболее распространенных элементов и жестов и показать их на примере Юлы.

А вы знали, как называется «та самая выезжающая снизу экрана шторка» или несколько (три и более) тапов подряд? Ответы на эти вопросы и названия многих других элементов читайте в нашей статье.
Читать дальше →
Total votes 23: ↑21 and ↓2 +19
Comments 9

Зачем Chrome Dev Tools дизайнеру

Reading time 3 min
Views 6.5K

На Хабре есть несколько статей про полезные фишки Chrome Dev Tools, но давайте добьём этот список в разрезе пользы для дизайнеров, которые хотят потестировать готовую вёрстку своих макетов.

Поехали
Total votes 12: ↑11 and ↓1 +10
Comments 5

32 отличия дизайна мобильного приложения под iOS и Android

Reading time 12 min
Views 56K
image

Железный дизайнер из Redmadrobot Design Lab Артур Абраров делится наблюдениями.

Адаптировать дизайн под другую платформу — неотъемлемая часть работы дизайнера мобильных приложений. Цель этой работы — органично вписать дизайн в паттерны взаимодействия пользователя. К тому же, проработанная адаптация упрощает разработку за счёт использования нативных компонентов платформы.

Чтобы адаптировать дизайн правильно, нужно соблюдать гайдлайны платформ: Human Interface Guidelines (HIG) у iOS и Material Design у Android. И общаться с разработчиками, в идеале подключать их к дизайну как можно раньше, чтобы они могли сразу задать технические ограничения.

Но в чём именно отличается дизайн под iOS от дизайна под Android? В этой статье я разберу 32 конкретных отличия дизайна под iOS и Android. Они поделены на четыре группы:

  1. Базовые отличия.
  2. Отличия в навигации и паттернах (UX).
  3. Отличия в компонентах (UI).
  4. Прочие отличия.

Особенности iOS будут слева, а Android — справа или сверху/снизу.

Базовые отличия


Human Interface Guidelines vs Material Design


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

Material же имеет несколько основополагающих принципов: материал как метафора; смелый, графический, сознательный; осмысленная анимация; гибкая основа и кроссплатформенность. Если вы не знакомы с гайдлайнами, лучше их прочесть до того, как ознакомитесь со статьёй.

image

image
Total votes 29: ↑29 and ↓0 +29
Comments 14

Acronis Design: Дополнительные инструменты дизайнера

Reading time 6 min
Views 3.3K


Я Сергей, ведущий дизайнер в компании Acronis. В этой статье я расскажу о тех инструментах, которые мы не только внедряем, но разрабатываем для других дизайнеров внутри компании. Речь пойдет о плагинах для Sketch, консольных утилитах и расширениях для Chrome.

Читать дальше →
Total votes 20: ↑20 and ↓0 +20
Comments 1

Полное руководство по правильному использованию анимации в UX

Reading time 9 min
Views 45K
Предлагаю вашему вниманию перевод очень крутой статьи по анимации интерфейса.
The ultimate guide to proper use of animation in UX автора Taras Skytskyi.



В настоящее время трудно впечатлить или даже удивить анимацией интерфейса. Она показывает взаимодействие между экранами, объясняет, как использовать приложение или просто направляет внимание пользователя. Изучая статьи об анимации, я узнал, что почти все они описывают только конкретные варианты использования или общие факты об анимации, но я не сталкивался с какой-либо статьей, где все правила, касающиеся анимации интерфейсов, были бы четко и практически описаны. Но, в этой статье я не буду писать ничего нового, я просто хочу собрать все основные принципы и правила в одном месте, так что другим дизайнерам, которые хотят запускать анимированные интерфейсы, не нужно было искать дополнительную информацию.
Читать дальше →
Total votes 41: ↑41 and ↓0 +41
Comments 31

Как сделать gif-анимацию для Behance и Dribbble?

Reading time 2 min
Views 63K


Дизайнерам бывает сложно переводить анимированный ролик в gif и подстраиваться под ограничения анимации для Behance и Dribbble.

Есть много статей о том, как быстро сделать анимацию в Principle, Flinto и других редакторах, но нет ничего о том, как её готовить конкретно для Behance и Dribbble.

Мы протаптывали эту тропинку сами и поняли, какой способ для нас оптимальный. Статья будет полезна тем, кто ещё не разобрался.
Читать дальше →
Total votes 8: ↑7 and ↓1 +6
Comments 2

Дизайн-система. Определение понятия

Reading time 8 min
Views 32K


В российском дизайн-сообществе сформировалось и все чаще встречается мнение о том, что возникший в последние годы хайп вокруг дизайн-систем — не более, чем пузырь, раздутый вокруг давно существующей темы, а вовлеченные в это дело авторы спекулируют на старых понятиях.
Читать дальше →
Total votes 28: ↑28 and ↓0 +28
Comments 5

Прототипирование — это просто, как собрать пазл. Мультикомпоненты дизайн системы в Figma

Reading time 3 min
Views 40K
Если вы работаете в среде Figma, то скорее всего вы используете компоненты в своих дизайн-процессах и знаете в чем их преимущества. Когда в ежедневной фриланс рутине я устал повторять создание одних и тех же списков, табов, таблиц или любых других модулей, состав которых динамичен, я начал думать об автоматизации этих процессов, чтобы рутина как минимум протекала быстрее. Таким образом мультикомпоненты и были открыты!


Узнайте, как ускорить дизайн-процессы
Total votes 24: ↑23 and ↓1 +22
Comments 12

Дизайн-система Acronis. Часть первая. Единая библиотека компонентов

Reading time 7 min
Views 24K


Меня зовут Сергей, я работаю старшим дизайнером в компании Acronis. В отделе дизайна продуктов для бизнеса я отвечаю за разработку и внедрение единой библиотеки компонентов.


Так как у нас много продуктов и сервисов, а дизайн в этих продуктах и сервисах сильно отличается, мы решили его унифицировать и привести к единому UI. Зачем? Все просто: такой подход дает возможность оптимизировать работу отдела, сосредоточить дизайнеров на UX, ускорить процесс разработки и запуск новых продуктов, снизить нагрузку на отделы тестирования и значительно сократить количество багов на стороне front-end. В этой статье я расскажу о нашем опыте, остановлюсь на инструментах и покажу, как устроена библиотека изнутри.

Читать дальше →
Total votes 33: ↑33 and ↓0 +33
Comments 34

Создание Tinkoff Design System. UI Kit, версионирование и витрина компонентов

Reading time 6 min
Views 54K
image

В предыдущей публикации я рассказал о том, как мы пришли к пониманию необходимости создания дизайн-системы, и какой профит мы можем получить от ее внедрения. И, конечно, процессы создания и внедрения не такие простые, как кажутся на первый взгляд. Мы столкнулись с рядом серьезных проблем, которые нам предстояло решить. Именно о процессе создания и трудностях пойдет речь в этой статье.
Читать дальше →
Total votes 60: ↑44 and ↓16 +28
Comments 39

Как объяснить дизайн четырехлетним?

Reading time 5 min
Views 20K
image

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

Я планировал пообщаться со старшими ребятами, рассказать то, что считал действительно крутым в своей работе, поделиться каким-то интересным опытом, но в итоге меня попросили провести урок с учениками подготовительной группы (примерно 4-5 лет). Несмотря на то что сначала я был скорее разочарован, это оказалось очень интересной задачей!

Главная особенность работы с детьми такого возраста в том, что ты не можешь ничего рассказать о брендах с которыми работал. Четырехлетние дети не будут восторженно реагировать на истории о работе на Channel 4, BBC и Disel. «Я получал награды BRIT, и даже разработал веб-сайт, на котором получил запись imdb!» — дети не поймут, о чем я вообще говорю. Поэтому нужно было в самых простых выражениях объяснить то, что я сделал, и почему это так важно. Я подумал: было бы здорово показать детям дизайн во всех его формах.

Что я сделал?

Читать дальше →
Total votes 26: ↑26 and ↓0 +26
Comments 20

Персональные данные (Краткий FAQ)

Reading time 8 min
Views 230K

Что такое персональные данные?


Персональные данные - любая информация, относящаяся к определенному или определяемому на основании такой информации физическому лицу, в том числе:  
— его фамилия, имя, отчество, 
— год, месяц, дата и место рождения, 
— адрес, семейное, социальное, имущественное положение, образование, профессия, доходы, 
другая информация (см. ФЗ-152, ст.3).
Например: паспортные данные, финансовые ведомости, медицинские карты, год рождения (для женщин), биометрия, другая идентификационная информация личного характера.
В общедоступные источники персональных данных (адресные книги, списки и другое информационное обеспечение) с письменного согласияфизического лица могут включаться его фамилия, имя, отчество, год и место рождения, адрес, абонентский номер и иные персональные данные (см. ФЗ-152, ст.8).
Персональные данные относятся к информации ограниченного доступа и должны быть защищены в соответствии с законодательством РФ. При формировании требований по безопасности систем персональные данные разделяют на 4 категории.
Читать дальше →
Total votes 82: ↑75 and ↓7 +68
Comments 112

Полный путеводитель по созданию лендингов, которые продают

Reading time 16 min
Views 75K


Мы продолжаем знакомить вас с лучшими статьями по веб-дизайну. Сегодня мы перевели свежую статью на Medium о создании эффективных посадочных страниц. Перевод выполнен «Я люблю ИП».

Лендинги — это посадочные страницы, которые созданы специально для достижения определённых целей конверсии. Иногда в качестве лендинга выступает главная страница (хотя многие считают, что она не может быть настоящим лендингом). Но чаще всего создаются специальные посадочные страницы для определённых маркетинговых кампаний.

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

Читать дальше →
Total votes 37: ↑22 and ↓15 +7
Comments 2

Бутстрэппинг — бизнес с нуля. Часть 1

Reading time 5 min
Views 25K

В данной серии статей я расскажу о нашем опыте поднятия бизнеса только своими силами с полного нуля до оборота 350 тыс. евро в год, или, как еще называют такое явление, — бутстрэппинг.
Читать дальше →
Total votes 28: ↑20 and ↓8 +12
Comments 21
1

Information

Rating
Does not participate
Location
Казань, Татарстан, Россия
Date of birth
Registered
Activity