Дизайн

Программа от арт-директоров из Яндекса — из первых рук узнаете, как управляют дизайном в IT

Яндекс Практикум запустил курс «Арт‑дирекшн» для коммуникационных и графических дизайнеров и начинающих арт‑директоров. Программа не включает в себя обучение основам дизайна, а направлена на развитие навыков, необходимых арт-директору в ежедневной работе.

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

Вы научитесь:

• Понимать цели и задачи бренда;

• Сохранять консистентность бренда и коммуникаций;

• Работать с системой дизайна;

• Оптимизировать работу с помощью нейросетей;

• Понимать цели и задачи бизнеса и маркетинга, брифовать заказчиков;

• Налаживать коммуникацию со стейкхолдерами и смежными отделами;

• Презентовать идеи, аргументировать их с точки зрения стратегии и цифр;

• Выстраивать дизайн-отдел и руководить им, планировать и распределять задачи;

• Давать обратную связь, вести сложные коммуникации.

Главное о курсе:

• 4 месяца учёбы, 6 часов в неделю;

• 3 индивидуальные консультации с ментором + план карьерного развития;

• 7 воркшопов с опытными арт‑директорами;

• Много практики по реальным задачам арт‑директора;

• Вечный доступ к материалам курса;

• Диплом о повышении квалификации или сертификат и справка.

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

→ Пройдите бесплатный тест

🪬 Сломанный UX как защита от дурака

Наливал тут кипяток из автомата с водой. Режим «экстра горячая вода для чая» на нем включался только после выполнения сложного ритуала — покрутить колесико, зажать кнопку, пару секунд подумать, и только после этого кипяток начинал литься

Давайте подумаем, где такой же подход стоит использовать в приложении

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

Как минимум — показать предупреждающий экран и попросить ввести пин-код

Хотя эти действия настолько обыденные, что обычно выполняешь их с той же легкостью, как открытие двери и выключение утюга

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

◾ потрясите телефон, если хотите удалить сообщение только у себя

◾ разгадайте капчу, если действительно хотите репостнуть этот аморальный мем в чат с родственниками, а не друзьями

◾ нажмите кнопки от 1 до 9, если хотите подключиться к звонку с включенной видеокамерой

Хороший пример кстати это флоу отмены подписки в яндексе. Случайно точно не нажмешь

остальные посты 👉 https://t.me/dolgo_polo_dev

10 советов, как собрать UI-кит

UI-кит помогает командам поддерживать консистентность интерфейсов и упрощает процессы дизайна. Лера Ган, дизайнер AGIMA, поделилась советами, которые помогут вам собрать хороший UI-кит:

1. Используйте автолайауты. Они избавят от рутины и помогут избежать ошибок.

2. Комментарии к элементам. Добавляйте пояснения к компонентам. Это упростит понимание функциональности и цель элементов для всей команды.

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

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

5. Сетка и отступы. Убедитесь, что сетка и отступы подходят для разных разрешений. Это упростит адаптацию интерфейса на разных устройствах.

6. Единый стиль изображений. Это важно для поддержания целостного внешнего вида, особенно — для иконок и графики.

7. Состояния элементов. Отрисуйте все состояния элементов, чтобы они были готовы к любым сценариям использования.

8. Общение с командой. Обсуждайте все изменения с коллегами. Это предотвратит непредвиденные ошибки.

9. Резервные копии. Всегда важно сохранять резервные копии, чтобы иметь возможность вернуться к прежней версии.

10. Цветовые темы. Протестируйте темную тему интерфейса. Актуально, т. к. пользователи часто используют оба режима.

Это краткая выжимка статьи из нашего блога. В полной версии найдете много примеров и лайфхаков от автора.

30-го октября выпустили нейросеть для создания изображений Recraft V3.

Примечательна эта нейросеть тем, что заняла первое место на арене Artifical Analysis, обогнав предыдущего лидера — FLUX1.1 [pro].

У Recraft V3 есть 6 особенностей:

• Умеет создавать векторные изображения. Правда, деталей о том, как это работает, не нашёл. Предположу, что Recraft V3 создаёт обычное растровое изображение, а затем другая нейросеть превращает его в векторное.

• Специально обучена создавать корректную анатомию (руки, ноги). Проверил, — руки примерно в 70 % случаев правильные (результат хороший, ведь старые нейросети даже за кучу попыток не всегда справляются).

• Умеет делает бесшовный и аккуратный inpaint и outpaint. По сути, это значит, что существует inpaint-версия Recraft V3.

• Умеет создавать очень длинные тексты на изображениях (не просто одну фразу).

• Точно следует запросу (цвет, расположение, количество объектов).

• Позволяет выбрать основной цвет изображения.

Я люблю сравнивать нейросети по тому, как они создают изображения улицы, ведь так можно многое понять:

• Есть люди.

• Есть автомобили.

• Нужна композиция.

• Есть множество деталей.

• Всё должно стоять на своём месте, а для этого нужно «понимание» пространства.

Однако улицы Recraft V3 создаёт плохо: слишком много «каши». Даже FLUX.1 [dev] справляется с улицами значительно лучше.

Попробовать Recraft V3 можно на сайте или через API. Весов не опубликовали.

Сайтов с примерами изображений, созданных Recraft V3, не нашёл: примеров мало везде.

Из рабочего чата, залипательное — хороша почти каждая строчка, даже мелкий текст по периметру :)

Какие книги читать дизайнеру: мнение экспертов

Недавно в нашем блоге вышла статья о том, что происходит на рынке продуктового дизайна в 2024 году. Эксперты из нескольких компаний рассказали, какие тренды они видят сегодня и чего ожидать в этой сфере в будущем. Среди прочего, они ответили и на вопрос о том, как дизайнеру прокачивать скиллы.

Вот какие книги они упоминают:

• «Дизайн привычных вещей» Дона Нормана;

• «Пиши-сокращай» Максима Ильяхова;

• «Спроси маму» Роба Фитцпатрика;

• «Начни с почему» Саймона Синека;

• «Переломный момент» Малькольма Гладуэлла;

• «Паттерны дизайн-менеджмента» Юрия Ветрова;

• «ВкусВилл. Как совершить революцию в ритейле, делая всё не так» Евгения Щепина;

• «Тайная жизнь цвета» Кассии Сен-Клер;

• «Настольную книгу Project-менеджера» Владимира Завертайлова;

• «То, что мы видим, то, что смотрит на нас» Жоржа Диди-Юбермана;

• «История журнального дизайна» Ольги Рожновой;

• «Об интерфейсе» Алана Купера.

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

Давно хотел сделать из текстовой строчки "Морские волны" (Sea Waves) собственно морские волны. Интересно получилось?

Координаты каждого символа рассчитываются real-time в коде. Только что запустил страничку игры Effulgence в Steam. Заходите посмотреть и оценить необычный дизайн.

Обзор возможностей распознавания и генерации трехмерных тел с использованием алгоритмов ИИ — Никита Петрушан / Ural Digital Weekend 2024

Опубликовали запись доклада секции «Разработка» с Ural Digital Weekend 2024.

1. Что такое трехмерное тело?

2. Проблема распознавания образов в ИИ.

3. Плюсы и минусы фотограмметрии.

4. Выбор алгоритмов и методов.

Ответы на эти вопросы вы услышите в докладе.

Ссылка на запись доклада в ВКонтакте.

Ссылка на презентацию: https://goo.su/HAhYs

Почему умирает OpenHarmony

Если вы откроете проект на gitee.com вы увидите что проект включает в себя больше 700 (семисот!) репозиториев. Секрет в том что ни один из этих проектов в отдельном репозитории не компилируется независимо! Один знакомый разработчик, который работает с этим богатством, рассказал мне, что чтобы скомпилировать какой либо из проектов составляющих OpenHarmony вы должны скачать и скомпилировать минимум 450 репозиториев! Дело в том что даже отдельные приложения такие как mailBox, storage с СМС-ками, с контактами, видео плеер, ... которые, казалось бы, должны быть отдельными приложениями таковыми не являются. Они все компилируются как части одной монолитной прошивки смартфона (как части операционной системы) и вы не можете скомпилировать их без компиляции всей системы, такая опция просто не предусмотрена.

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

Каждый новый добавленный в OpenHarmony репозиторий приближает видимый крах проекта.

Интересно как обстоят дела у Андроида в этом смысле.

Одна линия, чтобы рассказать историю или Bad Apple на графике WL

Сначала получаем видеофайл анимации Bad Apple каким-либо образом и загружаем его в любую ячейку ввода. Извлечем один кадр

video = Import[FileNameJoin[{"attachments", "Touhou - Bad Apple.mp4"}], 
{"ImageList", All}];
img = video[[500]] // Thumbnail

Кстати, удобно, что Bad Apple выполнена в стиле теневой анимации, поэтому мы можем легко преобразовать любое изображение в сетку из 1 и 0. Если знать положение каждого темного пикселя, то не составит труда обойти их всех одной линией

img = img // ImageAdjust // Binarize;
pos = PixelValuePositions[img, 0];
{length, path} = FindShortestTour[pos];

Здесь нам не нужна длина, а только сам путь, который содержит индексы точек из pos, соединённых в нужном порядке для формирования кратчайшего маршрута через все тёмные пиксели

ListLinePlot[pos[[path]]]

Чтобы убрать угловатости, можно сгладить скользящим средним

ListLinePlot[MovingAverage[pos[[path]], 5]]

Если повторить это со всеми кадрами и стащить звук отдельный байт массив, то можно сделать такую анимацию в реальном времени.

Код полной анимации приведен в этой статье (EN).

Про дизайн HR-сервисов. Часть 3

В первой части рассказали о важности дизайна для HR Tech в целом, а во второй — о хороших решениях для интерфейсов HR-сервисов. Теперь же опишем, насколько для подобных продуктов важна инклюзивность.

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

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

• Семантическая структура и метаданные. Стоит разрабатывать интерфейс с четкой семантической структурой, чтобы пользователи с различными способностями могли легко ориентироваться и понимать контекст информации.

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

Больше о карьерный сайтах рассказываем в отдельном статье, а о дизайне — в нашем телеграм-канале.

Про дизайн HR-сервисов. Часть 2

В первой части рассказали о важности дизайна для HR Tech в целом. Теперь же поговорим о том, на какие тонкости в интерфейсах дизайнеру стоит обращать внимание.

1. Минимализм и простота. Чем больше в макете чистых линий и простых форм, тем лучше.

2. Персонализация. Важно давать пользователю настраивать интерфейс под себя — менять цветовую схему или настраивать опции отображения информации.

3. Мобильная адаптация. Адаптивный дизайн позволяет сотруднику управлять HR-задачами с телефона или планшета.

4. Интерактивные элементы и сервисы. Анимации, интерактивные диаграммы и инфографика упрощают взаимодействие с сервисами.

5. Чат-боты и возможности ИИ. Они берут на себя рутину и механическую работу.

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

7. Использование иконок. Иконки нужны не только в цифровых продуктах, но и в HR-сервисах. Они упрощают навигацию и понимание функционала.

8. Дизайн-системы. Обеспечивают консистентность дизайна. Человек должен чувствовать, что о нем заботятся.

9. Динамичные и адаптивные формы. Динамичные формы, которые адаптируются к вводу данных, минимизируют необходимость вручную настраивать интерфейс.

10. Голосовой интерфейс. Голосовые команды и функции распознавания речи делают сервис инклюзивным, улучшают доступность и увеличивают производительность.

В следующей части расскажем о важности инклюзивности для дизайна HR Tech сервисов. А больше про дизайн — в нашем телеграм-канале.

Про дизайн HR-сервисов. Часть 1

HR Tech сервисы принято рассматривать просто как точки входа в компанию или как агрегаторы корпоративных новостей. Однако они могут рассказать о бизнесе куда больше, чем кажется. Сам подход к созданию подобных площадок уже на уровне дизайна показывает, что представляет собой компания как работодатель.

Вот какие задачи HR-сервисы должны закрывать:

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

2. Персонализированный подход. ИИ и аналитика помогают строить персонализированные программы обучения и адаптироваться к уникальным запросам каждого сотрудника. Когда люди чувствуют поддержку со стороны компании, они более лояльны. И это заметно извне. Рекомендации, отзывы, посты в соцсетях — всё это создает привлекательный HR-бренд.
   
   О персонализации и автоматизации найма — в интервью с российскими HRD.

Через дизайн можно показать любые особенности работодателя. Если компания поддерживает онлайн-обучение, одобряет гибкую форму занятости или много работает с нейросетями, это влияет на визуальные решения карьерного сайта. Любая мелочь вроде темной темы помогает соискателю больше узнать о компании.

Во второй части расскажем о принципах построения интерфейса в HR-сервисах.

We will IT+Rock you: как мы делаем конференцию про ИТ в рок-стиле

31 октября мы в Orion soft проводим конференцию Orion Digital Day про ИТ-инфраструктуру, DevSecOps, кибербезопасность, управление данными и технологические коллаборации. 

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

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

При этом центром притяжения останется деловая программа:

• Пленарные сессии с топ-спикерами из Самолета, Альфа-Банка, Газпром нефти, Positive technologies, Яндекс Go и другими;

• Технотреки про практики DevSecOps, кибербезопасности, управления данными;

• Кейсы от Ингосстраха, Газпром нефть, аэропорта Шереметьево, Smartavia;

• Митапы в лаундж зоне с лучшими кальянами Москвы.

А вечером — концерт с официальным трибьютом AC/DC!

Мероприятие пройдет в Москве в арт-пространстве LOFT #8. Будем рады видеть вас! Участие бесплатное, регистрация и подробная программа доступны по ссылке. И да, можно приходить без галстуков в вашем любимом рок-мерче :)

Пятница, вечер, а я все продолжаю тыкать свой kui в ноды кубернетиса.

Натыкал такое, добавил две новые команды: Node pods и Top node pods. Первая позволяет посмотреть все поды ноды. А вторая сделать топ поды ноды.

И если поды ноды kubectl умеет показывать из коробки, как-то так:

kubectl get po -A --field-selector spec.nodeName=<node_name>

То с топами подов нодов пришлось немного повозиться, kubectl не может сам сделать топ поды ноды, говорит такое:

kubectl top po -A --field-selector spec.nodeName=<node_name>
Error from server (BadRequest): "spec.nodeName" is not a known field selector: only "metadata.name", "metadata.namespace"

Пришлось ему немного помочь, сначала я запомнил поды ноды в переменную np

np=$(
   kubectl get po -A --field-selector spec.nodeName=<node_name> | \
   awk '{print $2}'
)

Потом сделал топ всех подов и грепнул поды ноды

kubectl top po -A | grep -F "$np"

И еще там были сопутствующие изменения и вот это вот все.

Творите, выдумывайте, пробуйте!)

Интересный механизм генерации экрана для ATARI XL/XE. Из-за особенности работы видеочипа мы можем для каждой строки сканирования указать видеорежим и то, с какого участка памяти брать данные для строки.

На картинке можно увидеть зоны хода луча, когда он выключен, это Horizontal Retrace и Vertical Retrace, соответственно интервал между строками и между следующими кадрами. В эти интервалы можно выполнять код, который будет делать что-то интересное для нас. Тут будем переключать таблицы символов. Зачем это нужно? Есть текстовый режим графики 40х24 с пятью цветами, который можно использовать для игр, но мы сильно ограничены в рисовании контента динамически, так как это по сути спрайты ориентированные по знакоместам. Символы в XL/XE представлены таблицей в 128 штук (1024 байт) и мы можем рисовать изображение внутри кодовой таблицы, а потом выводить символы в виде текста. Кажется, что 128 символов не хватит чтобы заполнить экран в 40х24=960 байт, вот тут мы и получаем профит.

Новый экран будет (условно) выглядеть так:

ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890!@#$

И так 24 раза. После каждых 8 строк сканирования (1 знакоместо) мы сдвигаем кодовую таблицу на 40*8 байт, где уже готово изображение для второй порции строк и т.д. То есть рисуем в памяти где участок для кодовой таблицы, а видеочип рисует их как символы. Мы получаем динамическую генерацию экрана и 5 цветов.

Когда я такое придумал, то думал, что это изобретение века, но потом нашёл информацию о таком способе: Источник 1, источник 2.

Приглашаем на бесплатный вебинар «Проектирование и дизайн пользовательского интерфейса». Рассмотрим первые шаги, которые необходимо выполнить перед проектированием интерфейса. А также проанализируем пример опросного листа, который должен заполнить клиент, чтобы помочь лучше понять его потребности и предпочтения. 

📅 Дата: 10.10.2024

⏰ Время: 17:00-18:00 (Мск)

На вебинаре:

✔️ Вопросы из опросного листа. Что и зачем спрашивать

✔️ Пользовательские сценарии. Что такое, из чего состоят и зачем нужны

✔️ Информационная структура продукта. Почему без неё никуда

👨‍🎓 Спикер: Игнашов Евгений — cпециалист в области UI/UX проектирования.

👉 Записаться 👈

Привет, снова я со своим kui'ем!)

Позанимался немного с нодами и подумал что удобно было бы выбирать ноды из вывода kubectl top no, добавил это. Команда (top) доступна на первом шаге (выбор кластера) и через "быстрые команды".

Творите, выдумывайте, пробуйте!)

LanguageSwitcher (Дополнение к прошлому посту)

Теперь LanguageSwitcher можно скачать в виде .exe файла и запустить его без лишней мороки (для тех кто переживает, что ваши данные под угрозой всё еще есть скрипт в исходном виде).

Также теперь Language Switcher можно установить и на Linux в виде скрипта

Все нюансы и подробности описаны в репозитории

Dctv ghbdtn!

Наверное каждый сталкивался с такой ситуацией, когда набираешь длинное сообщение и не смотришь на монитор, а там что-то вроде названия статьи, а под рукой нет какого нибудь Switcher-a (жаба душит).

Чтобы не стирать всё и не писать заново, предлагаю вам своё бесплатное решение -  скриптом LanguageSwitcher, который значительно облегчит вашу работу с текстом(Пока только для Windows). 

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

Для использования достаточно скачать AutoHotKey1.1, уже готовый .ahk скрипт из репозитория и легким движением руки (Ctrl+Shift+L) выделенный текст "Ghbdtn? lhe;bot" превращается в "Привет, дружище".

Более подробная инструкция, включая настройку автозагрузки скрипта описана на GitHub