Pull to refresh
1
0

UX-design

Send message

Дизайн-система: что это, для чего и как создать

Reading time5 min
Views55K

Всем привет!

Я рад вернуться к вам, дорогие читатели сообщества, и поделиться опытом и знаниями, полученными благодаря работе в IT-компании Omega.

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

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

Что нужно уметь UX/UI дизайнеру в 2022 году: конспект открытого занятия

Reading time5 min
Views29K

В конце января в Нетологии прошёл открытый урок для новичков в профессии дизайнера. Провёл его Владимир Ойкин, UI-дизайнер в ITECH. Под катом — краткий конспект выступления и ссылка на полный урок, который всем доступен к просмотру.

Читать далее
Total votes 2: ↑1 and ↓10
Comments9

Draw the rest of the f***ing owl — как я учусь на тестировщика с нуля бесплатно. Часть 1. С чего начать

Reading time7 min
Views9.4K

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

И первое, в чем стоит признаться — эту стратегию я не выбирала. По сути, она сама выбрала меня.

Наш котик тоже сначала боялся пылесоса. А потом ничего, втянулся ©

Итак,

Какие вообще были варианты?

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

Читать далее
Total votes 6: ↑5 and ↓1+4
Comments16

Как работает Backend-Driven UI на мобильном клиенте

Reading time12 min
Views22K

Привет всем, кто хочет изменять интерфейс мобильного приложения до выхода нового релиза, всем, кто хочет без лишних доработок на клиенте проводить А/B-тестирование, и всем, кто хочет забыть о срочных «новых пятничных промоакциях», которые нужны уже в понедельник. В этой статье мы поговорим об основах Backend-Driven UI: рассмотрим абстрактно, как всё работает на бэкенде и на клиенте. 

Читать далее
Total votes 17: ↑17 and ↓0+17
Comments2

Атомарный веб-дизайн

Reading time5 min
Views121K
Предлагаю читателям «Хабрахабра» перевод статьи Брэда Фроста (Brad Frost) «Atomic Web Design».



Мы не проектируем страницы, мы проектируем системы компонент. — Stephen Hay

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

Многое было сказано насчeт создания систем дизайна, и наибольший акцент делается, в основном, на установление цветов, типографии, сеток, текстур и т.п. Такой тип мышления, несомненно, важен, но я чуть меньше заинтересован в этих аспектах дизайна, потому что, по большому счeту, они всегда субъективны. В последнее время меня больше озадачил вопрос о том, из чего состоят наши интерфейсы, и как мы можем проектировать их более систематично.
Читать дальше →
Total votes 21: ↑20 and ↓1+19
Comments8

Все об SVG анимации

Reading time41 min
Views162K
В данной статье я хочу осветить тонкости работы с SVG-графикой, SVG анимацию (в том числе и path), проблемы и способы их решения, а также разнообразные подводные камни, коих в SVG огромное множество. Эту статью я позиционирую как подробное руководство.



Здесь не будет никаких плагинов, библиотек и прочего, речь пойдет только о чистом SVG.
Единственный инструмент, который я буду использовать, это Adobe Illustrator.
Получить сакральные знания
Total votes 39: ↑39 and ↓0+39
Comments21

Как создавать Pixel Perfect изображения в Adobe Illustrator

Reading time14 min
Views84K

От переводчика


Рад приветствовать тебя, %юзернейм%!

Я новичок в профессии дизайнера интерфейсов, и как-то давно, листая вакансии, меня заинтересовали требования к одной из них. Среди таких, как знание пакета Adobe, средств прототипирования и навыков в области ux/ui я прочитал, что соискателю именно на эту вакансию неплохо было бы уметь держать порядок в слоях, структуре и названиях файлов и папок, а так же знать и уметь применять на практике то, что называется pixel perfect. Меня это заинтересовало, так как на моей работе ни от меня, ни от других сотрудников этого не требуют, но я всегда старался этого придерживаться и даже пытался убедить в этом других, но мне почему-то не хватало аргументов, чтобы объяснить, для чего это нужно.

С понятием pixel perfect я вообще на тот момент не был знаком, только слышал где-то пару раз, и так как этот пункт стоял в конце списка требований «аккуратности», я понял, что это что-то вроде апогея, вершины айсберга в организации работы над макетами.

Я стал искать, но ничего, кроме статьи на Хабре из пары абзацев про Pixel perfect от программиста не нашёл. Потом я как-то услышал о Monument Valley, и даже наткнулся на справочник Pixel Perfect Precision, но времени изучать так много информации на английском как-то не было, и первый раз он меня не зацепил. Стало появляться время и вышли некоторые статьи, одна из которых, наполненная практическими советами по Pixel Perfect зацепила меня, и я решил не просто прочитать и понять, а ещё и перевести по возможности литературно, чтобы дать вопросу широкую известность, и распространить тему на Хабре.

Небольшой технический момент. Оригинальная статья с Tuts+ называется «How to Create Pixel Perfect Artwork Using Adobe Illustrator», при этом я могу вас уверить, что большая часть из предложенных в статье настроек присутствует и в Adobe Photoshop CS6, а уж в Adobe Photoshop CC вообще можно повторить всё это полностью.

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

Краткое содержание


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

Настройки Abobe Illustrator


  1. Edit > Preferences > Units > General → Pixels
    Edit > Preferences > Units > Stroke → Pixels
  2. Edit > Preferences > Guides & Grid > Gridline every → 1px
    Edit > Preferences > Guides & Grid > Subdivisions → 1px
  3. Edit > Preferences > General > Keyboard Increment → 1px
  4. View > Snap to Grid
    View > Snap to Point
  5. View > Pixel Preview

Не благодарите.
Всех заинтересовавшихся прошу пройти под кат.

Как создавать pixel perfect изображения в Adobe Illustrator




Читать дальше →
Total votes 31: ↑27 and ↓4+23
Comments6

Веб-типографика: создаем таблицы для чтения, а не для красоты

Reading time12 min
Views22K
Наталия Шергина, фрилансер-редактор и студентка Нетологии, специально для блога перевела лонгрид Richard Rutter о типографике веб-таблиц.



Хорошие дизайнеры не жалеют времени на типографику. Они тщательно подбирают шрифты, перебирают множество типографических шкал и скрупулезно применяют пробелы (white space) ради удобства пользователя. Затем появляется соблазн покреативить — и вот все мысли уже не о пользователе. Однако таблицы нужны в первую очередь, чтобы их читали и использовали, а не просто любовались.
Читать дальше →
Total votes 34: ↑33 and ↓1+32
Comments9

10 сервисов для создания структуры сайта в 2020 году

Reading time12 min
Views150K

Прототипирование — значимый этап в веб-разработке, который позволяет определить и сформировать ДНК проекта на ранних стадиях. В последние годы количество онлайн-сервисов и инструментов для прототипирования ощутимо возросло. В этом обзоре представлены 10 сервисов для создания визуальных сайтмэпов.


Прежде чем перейти к описанию инструментов не лишним будет разобраться в терминологии.

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

octopus.do visual sitemap
Читать дальше →
Total votes 23: ↑22 and ↓1+21
Comments9

«На западе нет арт-директоров моложе 40 лет. У нас им можно стать до 30». Каково быть дизайнером в ИТ

Reading time7 min
Views12K


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

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

Поэтому, дизайнеры, которые появились в начале двухтысячных были совершенно другими. Сейчас дизайнер — это универсальный солдат. Человек, который может идти как в диджитал, так и в типографический дизайн. Может делать и веб, и приложения, и анимацию. Подробнее о профессии нам рассказал Сергей Чирков — преподаватель факультета веб-дизайна в GeekBrains и основатель CHYRKOV studio.
Читать дальше →
Total votes 25: ↑24 and ↓1+23
Comments2

Дихотомия UI и UX: UI-дизайнер ≠ UX-дизайнер

Reading time5 min
Views17K
Кому велено чирикать — не мурлыкайте!
Кому велено мурлыкать — не чирикайте!

(с) Путаница, Корней Чуковский


На сайтах о поиске работы 99% вакансий с заголовком “UI/UX Designer” содержат тексты про интерфейсы, сценарии использования и дизайн. Кто был первоисточником этого сложно сказать, но UI и UX имеют довольно мало общего.

Star Wars

Хотелось бы дать в руки коллегам хорошую дубинку аргументацию для расширения их возможностей, ну и вообще, окончательно разобраться в отличиях UI и UX…
Читать дальше →
Total votes 19: ↑16 and ↓3+13
Comments9

Что такое UX/UI дизайн на самом деле?

Reading time4 min
Views1.1M
Очень много недопонимания в среде дизайнеров и разработчиков. Также много глупых вопросов, связанных с UX и UI у новичков. Часто просто из-за того, что люди не знают сути понятия UX/UI и, не зная о чем говорят, называют вещи не своими именами.

Я хочу раз и навсегда поставить точку и простым понятным языком объяснить, что значит «UX/UI дизайн».

UX/UI дизайн на примере точильных камней
Разные типы интерфейсов для заточки лезвий.

Читать дальше →
Total votes 19: ↑16 and ↓3+13
Comments33

10 книг по UI/UX дизайну, которые стоит прочитать

Reading time4 min
Views139K


Стать отличным UI/UX дизайнером не так просто: нужно знать основы, постоянно отслеживать последние тенденции и использовать их на практике. Каждый из нас время от времени обращается за советом к коллегам или друзьям, но когда нужна проверенная информация, лучшие советчики – это специализированные издания.

У многих UI дизайнеров есть своя личная коллекция любимых книг. Сегодня мы приготовили список из 10 крутых книг по дизайну, которые по той или иной причине могли пройти мимо вас.
Читать дальше →
Total votes 18: ↑14 and ↓4+10
Comments6

Четыре правила интуитивного UX

Reading time12 min
Views36K
Это советы по улучшению UX ваших проектов БЕЗ многочасовых сессий по изучению пользовательского поведения, бумажного прототипирования или любых других модных словечек.

(Серьёзно, поищите «дизайн-мышление». 100500 результатов!)

Для кого эта статья?

  • Разработчики. Вы создали собственное приложение, но каждый пользователь мучается с ним. И вы знаете: если они говорят вам это в лицо, то дело действительно плохо.
  • Графические дизайнеры. Изучать UX по статьям в интернете — это какой-то… очень болезненный способ умереть.
  • Менеджеры проектов. Вы уже на четверть UX-дизайнер. Было бы неплохо освоить остальные навыки.
  • И остальные проходимцы. Все, кто корпит над своими проектами по вечерам и выходным. Вам тоже пригодится.
Total votes 23: ↑22 and ↓1+21
Comments22

Как пройти собеседование в компанию мечты? Советы от тимлидов IT-компаний

Reading time6 min
Views37K
16-17 июля в 95 км от Москвы пройдёт конференция для python-разработчиков PYCON RUSSIA. Традиционно мы делаем серию интервью с докладчиками и организаторами.

В первом посте мы спросили тимлидов четырёх разных компаний, на что они обращают внимание во время собеседований, какие ошибки допускают кандидаты, как понять, что человек подходит в команду, и чего никогда нельзя делать во время интервью. На вопросы ответили: CTO в компании «Точка» Данила Штань, руководитель разработки в ЦИАН Михаил Юматов, руководитель группы Python-проектов в Rambler&Co Олег Чуркин и руководитель PyCharm Community в JetBrains Андрей Власовских.


Читать дальше →
Total votes 37: ↑25 and ↓12+13
Comments49

Отказать в один клик, или как дизайнеру получить работу мечты

Reading time18 min
Views25K
Руководитель отдела проектирования интерфейсов в Контуре Сергей Соловьёв и IT-рекрутёр в IT-People.ru Рушана Каюмова на прошлогодней конференции DUMP рассказали про ошибки в резюме и портфолио, которые допускают даже самые опытные дизайнеры, как сделать правильное тестовое, как пройти собеседование и не довести до слез рекрутёра и арт-директора.

Доклад нисколько не потерял своей актуальности за год, поэтому под катом публикуем его видео и текстовую версию.


Читать дальше →
Total votes 11: ↑11 and ↓0+11
Comments11

Мои правила хорошей дизайн-системы. Компоненты и архитектура интерфейса в Figma

Reading time8 min
Views57K


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

Фигма и другие современные инструменты позволяют задавать взаимосвязи между элементами, упрощая редактирование отдельных компонентов или целых экранов; группировать их в библиотеки компонентов и давать желаемые права доступа.

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

По методологии Атомарного дизайна, я начну с атомов и буду двигаться дальше к более сложным компонентам. Буду работать в Фигме и продемонстрирую, что у Скетча появился серьёзный конкурент.

Total votes 12: ↑7 and ↓5+2
Comments21

UI/UX события 2017 года, которые вас точно не утомят

Reading time14 min
Views25K
Какой дизайнер не хочет стать лучшим в своей области? А лучший способ узнать что-то действительно крутое – это пообщаться с людьми, которые на этом собаку съели. Поэтому сегодня мы предлагаем вашему вниманию список всевозможных интересных мероприятий (в первую очередь, посвященных теме UI/UX) как для начинающих дизайнеров, так и для продвинутых, которые вы, возможно, захотите внести в свой ежедневник.


Читать дальше →
Total votes 26: ↑21 and ↓5+16
Comments15

Кейсы: разработка спецификаций и гайдлайнов (web ui kit)

Reading time9 min
Views28K


Сегодня я поделюсь опытом разработки графической документации по гайдлайнам. Это оказалось мое второе задание для Viline. И как Вы не помните из первой части, я делал редизайн страницы видео-курса. В данной статье я опишу процесс разработки стилистики всех элементов и различных состояний. Придумаю и сформулирую некоторые правила, чтобы интерфейс получился сбалансированным и доступным с учётом аудитории…
Читать дальше →
Total votes 23: ↑15 and ↓8+7
Comments34

Information

Rating
Does not participate
Location
Hamburg, Hamburg, Германия
Date of birth
Registered
Activity