Горячее
Лучшее
Свежее
Подписки
Сообщества
Блоги
Эксперты
Войти
Забыли пароль?
или продолжите с
Создать аккаунт
Я хочу получать рассылки с лучшими постами за неделю
или
Восстановление пароля
Восстановление пароля
Получить код в Telegram
Войти с Яндекс ID Войти через VK ID
Создавая аккаунт, я соглашаюсь с правилами Пикабу и даю согласие на обработку персональных данных.
ПромокодыРаботаКурсыРекламаИгрыПополнение Steam

Топ прошлой недели

  • AlexKud AlexKud 38 постов
  • SergeyKorsun SergeyKorsun 12 постов
  • SupportHuaport SupportHuaport 5 постов
Посмотреть весь топ

Лучшие посты недели

Рассылка Пикабу: отправляем самые рейтинговые материалы за 7 дней 🔥

Нажимая кнопку «Подписаться на рассылку», я соглашаюсь с Правилами Пикабу и даю согласие на обработку персональных данных.

Спасибо, что подписались!
Пожалуйста, проверьте почту 😊

Помощь Кодекс Пикабу Команда Пикабу Моб. приложение
Правила соцсети О рекомендациях О компании
Промокоды Биг Гик Промокоды Lamoda Промокоды МВидео Промокоды Яндекс Директ Промокоды Отелло Промокоды Aroma Butik Промокоды Яндекс Путешествия Постила Футбол сегодня

Uxui

С этим тегом используют

Дизайн Ux Ux-дизайн Ui Все
38 постов сначала свежее
3
user10424664
user10424664
13 дней назад

Как переносить «висячие» слова на новую строку с помощью JavaScript⁠⁠

Как переносить «висячие» слова на новую строку с помощью JavaScript Разработка, Программирование, Javascript, Типографика, Uxui, Ui, Ux, Frontend, Верстка, IT, Программист, Telegram (ссылка), Длиннопост

изображение сгенерировано в ChatGPT

В типографике существует понятие “висячих слов” — это короткие слова (предлоги, союзы, местоимения), которые остаются в конце строки при переносе текста. Такие переносы нарушают удобочитаемость и эстетику текста. В русской типографике принято избегать переносов после коротких слов длиной 1-2 символа.

Решение проблемы с помощью JavaScript

Для автоматического предотвращения переносов после коротких слов можно использовать JavaScript, который заменяет обычные пробелы на неразрывные пробелы ( ) после определённых слов.

// Перенос висячих слов

document.addEventListener('DOMContentLoaded', function () {

// 1. Находим все текстовые элементы, которые нужно обработать

const textElements = document.querySelectorAll('p, span, h1, h2, h3, h4, h5, h6, li, dt, dd');

// 2. Список предлогов и союзов, которые нельзя переносить

const prepositions = ['в', 'без', 'до', 'из', 'к', 'на', 'по', 'о', 'от', 'перед', 'при', 'через', 'для', 'с', 'у', 'и', 'а', 'но', 'да', 'или', 'либо', 'что', 'чтобы', 'как', 'когда', 'если', 'вы'];

// 3. Функция для обработки каждого элемента

textElements.forEach(element => {

// Получаем все текстовые узлы внутри элемента

const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT);

const textNodes = [];

while (walker.nextNode()) {

textNodes.push(walker.currentNode);

}

// Обрабатываем каждый текстовый узел

textNodes.forEach(textNode => {

let text = textNode.nodeValue;

// Заменяем пробелы после коротких слов на неразрывные пробелы

text = text.replace(/(^|\s)([а-яё]{1,2})\s/gi, (match, prefix, word) => {

// Проверяем, есть ли слово в списке предлогов

if (prepositions.includes(word.toLowerCase())) {

return prefix + word + '\u00A0'; // \u00A0 - это неразрывный пробел

}

return match;

});

// Обновляем содержимое текстового узла

textNode.nodeValue = text;

});

});

});


Разбор кода по частям


1. Инициализация скрипта

document.addEventListener('DOMContentLoaded', function () {

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


2. Поиск текстовых элементов

const textElements = document.querySelectorAll('p, span, h1, h2, h3, h4, h5, h6, li, dt, dd');

Скрипт находит все основные текстовые элементы на странице: параграфы, заголовки, элементы списков и другие. Вы можете расширить этот список, добавив другие селекторы.


3. Список коротких слов

const prepositions = ['в', 'без', 'до', 'из', 'к', 'на', 'по', 'о', 'от', 'перед', 'при', 'через', 'для', 'с', 'у', 'и', 'а', 'но', 'да', 'или', 'либо', 'что', 'чтобы', 'как', 'когда', 'если', 'вы'];

Массив содержит наиболее распространённые предлоги, союзы и другие служебные слова русского языка, после которых нежелательны переносы.


4. Обход текстовых узлов

const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT);

TreeWalker позволяет пройти по всем текстовым узлам внутри элемента, включая вложенные теги. Это важно, так как текст может содержать форматирование (, и т.д.).


5. Регулярное выражение для замены

text = text.replace(/(^|\s)([а-яё]{1,2})\s/gi, (match, prefix, word) => {

Регулярное выражение ищет:
· (^|\s) — начало строки или пробел (группа 1);
· ([а-яё]{1,2}) — слово из 1-2 русских букв (группа 2);
· \s — пробел после слова;
· Флаги gi означают глобальный поиск без учёта регистра.


6. Условная замена

if (prepositions.includes(word.toLowerCase())) {

return prefix + word + '\u00A0'; // \u00A0 - это неразрывный пробел

}

Если найденное короткое слово есть в списке предлогов, обычный пробел заменяется на неразрывный пробел (\u00A0). Это предотвращает разрыв строки между предлогом и следующим словом.


Результат работы

После выполнения скрипта текст “Я иду в магазин” не будет разорван на строки как “Я иду в” и “магазин”. Предлог “в” всегда останется на одной строке со следующим словом благодаря неразрывному пробелу.

Настройка скрипта

Вы можете легко адаптировать скрипт под свои нужды:
· Добавить новые селекторы в querySelectorAll() для обработки других элементов;
· Расширить список слов в массиве prepositions;
· Изменить длину слов в регулярном выражении с {1,2} на другое значение;
· Добавить обработку других языков, изменив диапазон символов в регулярном выражении.

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

P.S.: это JS решение иногда не во всех случаях срабатывает + бывают сложности с адаптивностью: на смартфонах может переносить совсем не так, как хотелось бы, текст может «уехать» за пределы контейнера, нужно будет «фиксить» эти моменты в CSS.


Разработчики, а как вы решаете вопрос переноса «висячих» слов?

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

Показать полностью 1
Разработка Программирование Javascript Типографика Uxui Ui Ux Frontend Верстка IT Программист Telegram (ссылка) Длиннопост
13
ronineponi
ronineponi
20 дней назад

Как прокачать портфолио UX/UI-дизайнера и проходить интервью?⁠⁠

Как я переосмыслила портфолио, перестала бояться тестов и научилась рассказывать про свои проекты по-человечески.

Когда-то я думала, что в UX/UI главное — красивая картинка. Что если макеты выглядят чисто, выровнены по сетке и у кнопок радиус 8, то этого достаточно. Спойлер: нет. Портфолио — это не просто шоу «посмотрите, как я умею в фигму», это разговор с работодателем.

И это штука, через которую ты либо "пролетаешь", либо тебя зовут в команду.

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

Показывайте не только «красиво», но и «зачем»

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

Рефлексия в кейсе — важная вещь. Один HR мне даже сказал: «Вы — первый кандидат, кто написал, что бы улучшил в своём же кейсе. Это подкупает».

Как прокачать портфолио UX/UI-дизайнера и проходить интервью? Портфолио, Дизайн, Ux-дизайн, Ux, Uxui, Найм, Длиннопост

Тестовое — это не контрольная

Раньше я боялась тестовых, как школьных экзаменов. Сейчас вижу в них возможность. Там важно не идеально «нарисовать», а показать, как вы думаете. Я объясняю свои действия, даже если где-то сомневаюсь — и это ценится.

Был случай: я приложила два варианта решения в тестовом. Один “по ТЗ”, второй — альтернативный. Мне потом сказали, что именно второй вариант стал причиной, по которой меня пригласили в команду.

Говорите просто, как есть

На интервью я не использую пафосных фраз. Рассказываю честно: где запуталась, где нашла идею, где пришла к решению после трёх неудачных итераций. Люди это чувствуют.

Раз мне сказали: «Спасибо, что не “пичите”, а просто объясняете по-человечески». Это был лучший комплимент.

Не бойтесь немного поиграть с подачей

Мне нравится добавлять необычности: немного 3D, анимацию, нестандартные переходы. Например, в проекте HASART я использовала игральные кубики в интерфейсе, а в проекте MISSTAKE — геймифицированный слайдер. Эти детали замечают и запоминают.

Как прокачать портфолио UX/UI-дизайнера и проходить интервью? Портфолио, Дизайн, Ux-дизайн, Ux, Uxui, Найм, Длиннопост

Портфолио — это не галерея, а продолжение вас

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

Что точно сработало у меня:

  • ✅ Делать не просто макеты, а живые истории-кейсы.

  • ✅ Объяснять свои решения, даже если они не «идеальны».

  • ✅ Не бояться тестовых и превращать их в мини-презентацию.

  • ✅ Оформлять кейсы как документ, а не просто скриншоты.

  • ✅ Быть собой. Писать от себя, без «правильных» формулировок.

Если вы только собираете портфолио — не переживайте, что всё не идеально. Главное — живой подход, искренность и способность показать, как вы думаете. Всё остальное — придёт.

Показать полностью 2
Портфолио Дизайн Ux-дизайн Ux Uxui Найм Длиннопост
2
1
ronineponi
ronineponi
22 дня назад

Геймификация в интерфейсах B2B и B2C⁠⁠

Геймификация — это слово, которое сегодня звучит буквально отовсюду. Но если отбросить пафос, по сути это всего лишь добавление игровых элементов в самые обычные — порой скучные — процессы. Что-то вроде: был просто ползунок, стал — мини-квест. Был список задач — стал рейтинговый турнир. Скука в интерфейсе уходит, а вместо неё появляется азарт и вовлечённость. И, как ни странно, это работает: по данным исследований, прибыль компаний после внедрения игровых механик может вырасти аж на 25–95%, а вовлечённость пользователей — примерно на треть.

Так что я решила собрать в этой статье всё самое полезное про геймификацию в B2C и B2B: где, как и зачем она используется, и как вообще с её помощью улучшить интерфейс.

Начну с B2C — то есть всех тех приложений и сервисов, которыми мы пользуемся каждый день. Здесь геймификация работает почти как маркетинг: помогает удерживать клиента, делает процесс взаимодействия приятнее и даже подталкивает к покупкам. Самое популярное — это, конечно, баллы, бонусы и уровни скидок. Простой пример: купил — получил очки, накопил — получил уровень, поднялся — получил бонус. Логика максимально понятная, и она нравится пользователям.

Также хорошо работают мини-игры в рассылках или на лендингах. Клиенты охотно включаются в такие активности, особенно если есть шанс выиграть что-то полезное. Ну и, конечно, всякие таблицы лидеров, бейджи и ачивки: соревнование с другими покупателями, достижение целей, похвала за активность — всё это даёт ощущение игры и «своего» прогресса. Кстати, по данным Deloitte, это реально может поднять вовлечённость в общении с брендом почти на 40%.

Вот самые часто встречающиеся фишки в B2C-интерфейсах:

  • Очки и уровни

  • Значки и бейджи

  • Таблицы лидеров

  • Прогресс-бары и челленджи

  • Коллекционные механики («Собери все купоны», «Пройди все этапы»)

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

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

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

В моей практике я сталкивалась с проектами, где даже простые штуки — вроде прогресс-бара или виртуальной валюты — реально повышали вовлечённость. И да, если говорить про реальные кейсы, у меня есть два хороших примера:

В проекте HASART я добавляла в интерфейс игральные кубики — пользователь мог «бросать» их прямо на экране. Такая мелочь, а люди моментально вовлекались: это выглядело неожиданно, весело и создавало чувство азарта.

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

Вот какие приёмы чаще всего встречаются в B2B-интерфейсах:

  • Таблицы лидеров среди сотрудников

  • Баллы и уровни за KPI, курсы, помощь команде

  • Виртуальная валюта за достижения

  • Квизы и игровые тесты на обучение

  • Прогресс-бары по проектам

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

Если коротко, то: Геймификация — это не про «веселье ради веселья», а про превращение действий в интересный и мотивирующий процесс. Она помогает пользователю увидеть свой прогресс, почувствовать результат, получить удовольствие от пути. И это работает как в B2C, так и в B2B, если подходить с умом. Ну и главное: никакая игра не заменит продуманный интерфейс, но может стать тем самым «вишенкой на торте», которая делает весь опыт вкуснее. Как в проектах HASART и MISSTAKE — простые элементы, но сколько жизни они добавляют.

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

Показать полностью 2
Дизайн Uxui Геймификация Видео Без звука Короткие видео Длиннопост
2
1
artxksu
artxksu
1 месяц назад

Дизайнер и генеративная нейросеть Recraft: почему ИИ не заменяет, а помогает⁠⁠

Генеративные нейросети стремительно меняют дизайн. То, что недавно казалось экспериментом, сегодня становится повседневным инструментом. Глобальный рынок генеративного дизайна с ИИ к 2024 году достиг $741 млн и, по прогнозам, вырастет до $994 млн уже в 2025. Более 59% дизайнеров и разработчиков применяют нейросети в работе: от генерации изображений до ускорения идей и референсов. А в креативной индустрии таких уже 83%, и каждый пятый обязан это делать по требованию заказчиков.

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

Как распределяются роли: человек + нейросеть

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

Recraft: генеративный инструмент, созданный для дизайнеров

Дизайнер и генеративная нейросеть Recraft: почему ИИ не заменяет, а помогает Дизайн, Дизайнер, Искусственный интеллект, Тренд, Midjourney, Компьютерная графика, Uxui, Бренды, Визуал, Яндекс Дзен (ссылка), Длиннопост

Источник: Recraft

Recraft — молодая, но уверенно развивающаяся генеративная платформа. Она ориентирована на дизайнеров и создание визуалов в едином фирменном стиле. Recraft позволяет генерировать не только растровые, но и векторные изображения, иконки, иллюстрации, даже 3D-объекты. Встроенные функции — удаление фона, апскейл, редактирование областей, выбор шрифтов, подбор цвета и референсов — делают Recraft похожим на редактор и генератор в одном. Recraft создаёт изображения, выдержанные в стилистике бренда, работает с вектором (чего не умеют Midjourney и DALL-E), а также имеет интерфейс с возможностью вносить правки на лету. Всё это делает инструмент не просто генератором, а дизайнерской платформой.

Recraft и другие нейросети: что выбрать

Midjourney — лидер в визуальных эффектах и глубоком стиле. DALL-E — точен в генерации по тексту. Stable Diffusion — гибкий, кастомизируемый, но сложный. Recraft выигрывает в задачах брендинга и продукта. Он предлагает стабильный стиль, редактируемость и вектор.

Дизайнер и генеративная нейросеть Recraft: почему ИИ не заменяет, а помогает Дизайн, Дизайнер, Искусственный интеллект, Тренд, Midjourney, Компьютерная графика, Uxui, Бренды, Визуал, Яндекс Дзен (ссылка), Длиннопост

Пример генерации в Midjorney. Источник: РБК Тренды

Recraft — единственный из крупных генераторов, кто даёт дизайнеру привычный workflow с Ctrl+Z и правкой прямо на холсте. Если вам нужен логотип, серия иконок или баннер в одном стиле — Recraft даст лучший результат. При этом Recraft проще в освоении: не нужен Discord, не нужно знание ML. Это web-интерфейс, похожий на Figma или Canva. Он подойдёт и новичку, и профессионалу. Главный плюс — гибкость и адаптация под визуальные задачи брендов.

Дизайнер и генеративная нейросеть Recraft: почему ИИ не заменяет, а помогает Дизайн, Дизайнер, Искусственный интеллект, Тренд, Midjourney, Компьютерная графика, Uxui, Бренды, Визуал, Яндекс Дзен (ссылка), Длиннопост

Генерация векторной графики в Recraft. Источник: Recraft

Тренды 2024–2025: как будет меняться работа дизайнера

ИИ встраивается в привычные редакторы. Photoshop и Illustrator добавляют нейросети. Figma тоже работает над AI-функциями. Скоро генерация фонов, иконок или кнопок станет встроенной. Также растёт количество платформ, работающих в реальном времени. Дизайнер рисует — ИИ предлагает продолжение прямо на холсте. Это уже делает Recraft, и скоро появится массово. Важный тренд — персонализация. ИИ будет обучаться на брендбуках, портфолио и выдавать изображения строго в стиле клиента. Также возрастает роль этики. Дизайнер должен уметь работать с ИИ ответственно: проверять источники, не нарушать авторские права, отмечать AI-контент. Уже появляются профессии: AI-дизайнер, prompt-инженер, AI-куратор. Это не «будущее», а новая реальность.

Дизайнер и генеративная нейросеть Recraft: почему ИИ не заменяет, а помогает Дизайн, Дизайнер, Искусственный интеллект, Тренд, Midjourney, Компьютерная графика, Uxui, Бренды, Визуал, Яндекс Дзен (ссылка), Длиннопост

ИИ функции Figma. Источник: Figma

Заключение: симбиоз дизайна и ИИ — это уже сегодня

ИИ не заменяет дизайнера. Он усиливает его. Он даёт скорость, вариативность и объём. А человек — идею, смысл и контекст. Recraft показывает, как можно объединить генеративные возможности и профессиональный подход. Midjourney, DALL-E, Stable Diffusion — всё это мощные инструменты. Но именно Recraft заточен под дизайн. В нём уже работают специалисты, создающие баннеры, обложки, интерфейсы и даже мерч.

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

Если вы хотите обновить визуал, запустить айдентику, собрать графику под digital-проект — я помогу. Работаю с нейросетями, профессионально использую Recraft. Делаю современный дизайн, где техника работает на смысл. Готова обсудить задачу — пишите.

📩 Telegram: @artxksu🎨

Behance: https://www.behance.net/ksushak1

Показать полностью 4
Дизайн Дизайнер Искусственный интеллект Тренд Midjourney Компьютерная графика Uxui Бренды Визуал Яндекс Дзен (ссылка) Длиннопост
1
artxksu
artxksu
1 месяц назад

Почему бизнесу не нужен «креатив ради креатива», а нужен системный визуальный стиль⁠⁠

📌 В сфере дизайна и маркетинга часто превозносится «креатив» — яркие, нестандартные визуальные решения, рассчитанные на WOW-эффект. Компании стараются удивлять потребителей, придумывают оригинальные идеи для каждой новой рекламной кампании или интерфейса. Но чрезмерное увлечение разрозненным креативом без общей системы может сыграть с брендом злую шутку. Вместо того чтобы укреплять его образ, такой подход лишь размывает узнаваемость. Намного ценнее для бизнеса — внятный визуальный язык: продуманный, последовательный стиль, который пронизывает всю коммуникацию бренда. Он обеспечивает узнаваемость, укрепляет доверие аудитории и положительно влияет на продажи. В этой статье мы сравним креативный и системный подходы, рассмотрим реальные цифры и примеры известных брендов и расскажем, как построить визуальный язык, который действительно работает.

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

Креативный подход стремится сделать каждое визуальное решение уникальным и запоминающимся. Дизайнеры при таком подходе стараются отойти от шаблонов и создать нечто совершенно новое. Каждый баннер, экран приложения или пост в соцсетях оформляется с нуля. Это может дать эффект новизны и неожиданности, краткосрочно привлечь внимание. Однако у такого подхода есть существенные минусы: отсутствие единого визуального стиля делает коммуникации бренда нестабильными и разрозненными. Пользователь не успевает запомнить визуальный облик бренда. Сегодня — один стиль, завтра — другой, и у потребителя просто не формируется ассоциация. Теряется узнаваемость, а значит — и лояльность. Бренд не запоминается, его сложно идентифицировать. Кроме того, постоянный поиск «чего-то нового» требует больших ресурсов и времени, увеличивает риск ошибок и непонимания со стороны аудитории.

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

Как визуальный язык влияет на восприятие бренда и продажи

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

Первое впечатление формируется за секунды — и почти полностью визуально. Согласно данным FuelForBrands, до 94% первого впечатления о продукте или бренде формируется именно на основе визуального оформления. Если сайт или реклама выглядят плохо — пользователь может просто не захотеть вникать дальше. Важно понимать: мы живём в мире высокой конкуренции, и визуальный фактор стал определяющим.

По данным Стэнфордского университета, 75% пользователей оценивают доверие к компании по дизайну её сайта. И, согласно исследованию Edelman, 81% людей не совершают покупку, если не доверяют бренду. Следовательно, плохой визуал = отсутствие доверия = потеря клиента. Визуальная последовательность — это фундамент доверия. Если бренд выглядит одинаково во всех точках — пользователь воспринимает его как устойчивый и серьёзный.

Что касается узнаваемости, то здесь цифры говорят сами за себя. Исследование Reboot показало, что использование фирменного цвета увеличивает узнаваемость бренда на 80%. Ещё один факт — 55% первого впечатления о бренде формируется визуально. Это значит, что без системы в оформлении нельзя выстроить внятный, запоминающийся образ. Если бренд «в каждом канале разный» — у аудитории нет шансов его запомнить.

Кроме того, визуальный язык напрямую влияет на конверсии. 38% пользователей уходят с сайта, если он выглядит непривлекательно. И речь не только о красоте — важны удобство, читаемость, логика. Если один баннер оформлен в одном стиле, следующий — в другом, кнопки скачут, цвета противоречат — пользователь теряется. Возникает недоверие: «Это точно один и тот же бренд?» Такой опыт снижает вероятность покупки.

И наконец, системный визуальный язык влияет на выручку. Исследование Lucidpress показало, что согласованный визуальный стиль на всех платформах может увеличить выручку компании до 23%. Ещё одно исследование говорит, что 68% компаний, которые внедрили единый бренд-стиль, зафиксировали рост доходов минимум на 10%. Уверенный визуал упрощает путь пользователя к покупке, повышает доверие и способствует повторным продажам.

Примеры: как работают бренды с визуальным языком

Coca-Cola — классика системного подхода. Более ста лет компания сохраняет узнаваемый логотип, цветовую гамму и форму бутылки. Даже креативные рекламные кампании всегда строятся вокруг этих элементов. В результате Coca-Cola узнаётся 94% людей по всему миру. Это — сила постоянства.

Почему бизнесу не нужен «креатив ради креатива», а нужен системный визуальный стиль Бренды, Ux, Ui, Uxui, Бизнес, Конверсия, Apple, Google, Графический дизайн, Интерфейс, Яндекс Дзен (ссылка), Длиннопост

Системный подход в дизайне бренда Coca-Cola. Источник: bvd

Apple — ещё один пример бренда, который мыслит не кампаниями, а системами. Упаковка, сайты, интерфейсы, розничные магазины — всё оформлено в едином ключе. Минимализм, чистота, внимание к деталям. Apple не следит за модой, она её создаёт. Этот визуальный стиль стал не просто узнаваемым, а эталонным. Результат — $400+ млрд стоимости бренда.

Почему бизнесу не нужен «креатив ради креатива», а нужен системный визуальный стиль Бренды, Ux, Ui, Uxui, Бизнес, Конверсия, Apple, Google, Графический дизайн, Интерфейс, Яндекс Дзен (ссылка), Длиннопост

Дизайн-система бренда Apple. Источник: Apple Developer

Google до 2014 года имел разрозненный визуал. Но с появлением Material Design всё изменилось. Gmail, Google Drive, Android — всё стало единым. Пользователи перестали теряться, ассоциации стали устойчивыми. С тех пор Material Design стал примером для других компаний: единый стиль — это удобно, современно и эффективно.

Почему бизнесу не нужен «креатив ради креатива», а нужен системный визуальный стиль Бренды, Ux, Ui, Uxui, Бизнес, Конверсия, Apple, Google, Графический дизайн, Интерфейс, Яндекс Дзен (ссылка), Длиннопост

Google Material Design. Источник: Google Design

Вывод: системность выигрывает в долгую

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

Если вы хотите, чтобы ваш продукт выглядел профессионально, вызывал доверие и приносил результат — начните с визуального языка. Это инвестиция, которая окупается. Бренд, у которого есть чёткая визуальная система, всегда выглядит сильнее.

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

📲 Telegram: @artxksu

📁 Behance: https://www.behance.net/ksushak1

Показать полностью 3
Бренды Ux Ui Uxui Бизнес Конверсия Apple Google Графический дизайн Интерфейс Яндекс Дзен (ссылка) Длиннопост
0
6
user10373678
user10373678
3 месяца назад

Как я пере-изобрел клавиатуру для Cмарт ТВ, а ребята из VK Видео ее заимствовали не сказав «Спасибо»⁠⁠

Как я пере-изобрел клавиатуру для Cмарт ТВ, а ребята из VK Видео ее заимствовали не сказав «Спасибо» Ux, Ux-дизайн, Uxui, Видео ВК, ВКонтакте, Дизайн, Менеджмент, Левша, Ui, Uiux, Гифка

Мня так в детстве учили — если, кто-то тебе сделал, что-то хорошее скажи «спасибо». У меня это записалось на подкорке, на автоматизме, как элементарная вежливость и этика. А вот безликий менеджмент VK этике видать не обучен.

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

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

Реально годно, молодцы, попользовался - крутое все же решение я предложил. Только вопрос — «А зачем было ждать 10 лет, пока я вас пинать не начал?»

Как я пере-изобрел клавиатуру для Cмарт ТВ, а ребята из VK Видео ее заимствовали не сказав «Спасибо» Ux, Ux-дизайн, Uxui, Видео ВК, ВКонтакте, Дизайн, Менеджмент, Левша, Ui, Uiux, Гифка

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

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

Нет уж — строка цифр выведенная сразу вместе с буквами, рядом с пробелом — мое изобретение: максимально простое, супер очевидное. Но никто, за все время существования VK Видео даже и не подумал в эту сторону. И Рутьюб, и Ютьюб, и прочие сервисы тоже.

В профессиональном кругу, многие меня поддержали, а еще была и критики. Но тоже никто не сказал: «Мужик, спасибо, стало проще пользоваться, будут еще идеи — дерзай».

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

А всем вам, я желаю приятного просмотра любимых сериалов)

Показать полностью 2
Ux Ux-дизайн Uxui Видео ВК ВКонтакте Дизайн Менеджмент Левша Ui Uiux Гифка
8
Zelenykh
Zelenykh
8 месяцев назад
Графический и Веб-дизайн

Когда открыл чужой дизайн-макет в Фигме⁠⁠

А ты аккуратно оформляешь макеты?😉

[моё] Дизайн Дизайнер Figma Uxui Веб-дизайн Видео Вертикальное видео
2
Chad.AI
Chad.AI
9 месяцев назад

Нейросети отберут вашу работу — миф или правда?⁠⁠

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

Нейросети отберут вашу работу — миф или правда? Искусственный интеллект, Midjourney, ChatGPT, Uxui, Нейронные сети, Будущее, Длиннопост, Арты нейросетей, Маркетинг, Копирайтинг

ИИ приведёт к массовой безработице

Часть задач правда окажется невостребованной. Но к массовой безработице это не приведёт. 

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

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

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

Нейросети станут умнее человека

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

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

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

Что касается форс-мажорных ситуаций — тут сразу мимо. ИИ всё ещё не умеет действовать правильно, поэтому зачастую сбивается и начинает вести себя странно. Вспомним ту же Теслу, которая уже несколько раз выходила из строя. Нейросетям пока неоткуда взять жизненный опыт.

Компании будут больше доверять ИИ, ведь он всегда говорит правду

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

Например, в российском сервисе Chad AI есть функция веб-поиска. При поиске информации нейросеть ориентируется на статьи из Яндекса, но ведь люди же не всегда пишут в них экспертную информацию? Вот и думайте!

Скоро нейросети будут развиваться сами

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

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

Что в итоге

Не стоит бояться ИИ, а вот сделать его своим помощником будет полезно. Он может упростить рутинные задачи. Но чтобы обучать ИИ, нужно всё время «прогрессировать» и самому — осваивать новое, искать непривычные пути решения задач. Используйте нейросети как инструмент для упрощения жизни и работы. А чтобы оставаться востребованным специалистом, получайте новый опыт и развивайте творческое мышление — это ИИ точно не умеет.

Показать полностью
Искусственный интеллект Midjourney ChatGPT Uxui Нейронные сети Будущее Длиннопост Арты нейросетей Маркетинг Копирайтинг
4
Посты не найдены
О нас
О Пикабу Контакты Реклама Сообщить об ошибке Сообщить о нарушении законодательства Отзывы и предложения Новости Пикабу Мобильное приложение RSS
Информация
Помощь Кодекс Пикабу Команда Пикабу Конфиденциальность Правила соцсети О рекомендациях О компании
Наши проекты
Блоги Работа Промокоды Игры Курсы
Партнёры
Промокоды Биг Гик Промокоды Lamoda Промокоды Мвидео Промокоды Яндекс Директ Промокоды Отелло Промокоды Aroma Butik Промокоды Яндекс Путешествия Постила Футбол сегодня
На информационном ресурсе Pikabu.ru применяются рекомендательные технологии