UI UX 💒

Как расширить воображение через стихии.

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

Быстрая тренировка на "симулятор реальности":
Разделите холст на 4 части.

Каждому квадрату присвойте одну эмоцию:
😊 радость / 😔 грусть / 😡 гнев / 😌 спокойствие

Каждой эмоции присвойте природный элемент:
🌊 океан / 🏔 горы / 🌋 вулкан / 🌅 закат

Теперь задача: визуализировать.

В статье:

1. Как работает воображение и как его развивать
2. Упражнения для развития воображения
3. Стихии и архетипы: научный подход
4. От алхимии к психологии
5. Тест на ведущую стихию 🌀

Фундаментальные принципы дизайна.

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

В статье:

Принцип первый: Мысль существует только в визуальном воплощении. Нет картинки - нет события.
◦ Примеры и аргументы
◦ Влияние рекламы на восприятие
◦ Пример прикладного использования

Принцип второй: Эмпатия дизайна, искусство видеть чужую мысль.
◦ Важность точного отражения мысли
◦ Уточнение идеи и реализация
◦ Работа с личной идеологией заказчика
◦ Примеры из практики
◦ Анализ личности клиента

Как развить навык?
Уровни сложности визуализации

👇

Идеи для внедрения онтологических и онтических уровней в UI/UX

Внедрение понятий "онтологического" и "онтического" в UI/UX-дизайн связано с созданием системы, которая помогает пользователю воспринимать различие между поверхностным опытом (чувственным, предметным, "онтическим") и более глубоким смысловым уровнем (структурой, связями, "онтологическим"). Это может быть реализовано через дизайн, который буквально "воспитывает" пользователя, направляя его внимание на переход от видимого к смысловому.

В статье:
1. Разобрала понятия в общем и целом
2. Привела примеры
3. Функция "Видимое и скрытое"
4. Принцип "вопрошания" через дизайн
5. Пример UI/UX для приложения "Ментальное Здоровье" с концепциями Хайдеггера

...

Подробнее про личный бренд по Юнгу.
Зачем нужно распознавать архетипы и как это реализовано в дизайне?

Архетипы Юнга: требования к UI/UX дизайну и подходу к работе для каждого архетипа

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

В новой статье:
1. Как заказчик каждого архетипа ставит ТЗ
2. Как каждый архетип подходит к разработке UI/UX
3. Какой подход подойдет для реализации задач для каждого архетипа
4. Как определить архетип заказчика

Хорошего дня, огоньки 💫

Хотите научиться превращать древние идеи в современные хиты? В статье "Оптимизация интерфейсов по принципам древней мудрости: секреты достижения высот" обсуждаем, как старые концепции и нестандартные подходы можно адаптировать под любой проект — от бизнеса до креативного продукта.

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

Прокачайте свои проекты, взглянув на привычное под новым углом. Читайте — и хайпуйте с умом! 🚀

Психоделический мир радикалов и их предпочтений в дизайне.
Как доминирующий радикал может вписаться в концептуальное искусство или IT-дизайн.

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

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

В статье подробно про каждый радикал
Дизайн, который подходит каждому радикалу
Должность соответствующая каждому радикалу
А так же о том как радикалы определять и совмещать
Недостатки радикалов в работе ui ux

👇

Принцип опровержения собственных гипотез

Эго - это не состояние творца, нужно признать ошибки, чтобы творить. Научное знание развивается не через подтверждение гипотез, а через их опровержение.

В статье:

Описание принципа
Как проводить касдевы
Как прописывать и опровергать гипотезы
Работа принципа в UI UX
Работа принципа в СХ

Чем умнее дизайнер, тем красивее и удобнее его кейсы.

Недавно нашла у себя в в еще юношеских архивах книжку «Кодекс Серафинианус»

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

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

В статье:
Как работать с книгой и зачем она?
Как скорость мозга влияет на дизайн?
Упражнение на развитие
...

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

Напиши, @osipova_an если готов поучаствовать и увидеть процесс изнутри!

🕰️ интервью занимает примерно 15 минут.

Для себя ты узнаешь, как гипотезы проверяются на практике 🤔

Интересующая меня аудитория:
Лица, которые так или иначе сталкивались с проблемами психологического здоровья

🎁 В подарок всем, кто примет участие отправлю книгу, как проводить интервью и проверить свои гипотезы на прочность!

Да будет svet 🙏

Новый разбор Ui макета брендового сайта и сам шаблон в подарок 🎁 ссылка на figma под видео

На видео:
1. Дестоп версия главной стариницы
2. Как изменить стиль
3. Правила замены контента
4. Несколько вариантов превью карточек товара
5. Другие возможноные цветовые плитры
6. Как стлизовать кнопки

https://youtu.be/MZsi-ca5Vqc?si=GE2myF3XxtGfnxI2

Универсальная защита дизайна

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

- Какое красивое яблочко 🍎

Организм сделал его красивым, чтобы у сапиенса появилось желание попробовать. Необходимое кажется нам красивым.
Но красиво ли яблоко на самом деле?

Я хочу сказать, что дизайн - это не столько красивая картинка, сколько закладываемый в нее смысл. Таким образом вы можете заставить практически любой макет засверкать, вложив в него подходящий смысл. Особенно заметна эта логике при разборе логотипа, например adidas. Значки у таких лого очень простые в реализации, но заложенный в них смысл преобразует их в шедевр.

...

Упражнение "Зеленая точка" на концентрацию

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

Оно очень простое в исполнении, но крайне полезное:

1. Нарисуйте зеленую точки на листе бумаги. Диаметр точки может быть разным, вы можете с этим экспериментировать.
2. Повесьте точку на стену или на любую другую поверхность.
3. Сядьте ровно напротив точки на расстоянии не менее 1 метра.
4. Сконцентрируйтесь на точке и не отводите от нее взгляд.
5. Если ваши мысли убегают прочь, возвращайте их к точке, важно отпустить все вокруг и больше ни о чем не думать.
6. Концентрируйтесь на зеленой точке пока не получится освободить сознание. Если у вас получится удерживать сознание хотя бы в течении 1 минуты, то далее вы сможете удерживать внимание любое количество времени.

Какая польза и какое влияние на мозг? 👇

Грибочки, выкладываю первую часть статьи "Как находить идеи для дизайна?"

В статье разбираю 2 способа, которые сама использую, с примерами реализации.

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

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

...

Новый разбор Ui макета брендового сайта и сам шаблон в подарок 🎁 ссылка на figma под видео

На видео:
1. Дестоп версия главной стариницы
2. Как изменить стиль
3. Правила замены контента
4. Адаптивная версия
5. Другие возможноные цветовые плитры
6. Как подготовить макет к верстке

https://youtu.be/dTm-hvcQJRg?si=SHzo0FYNkn41OVZ7

Кролики, записала новый видео-обзор к подарочному шаблону в Figma

Шаблон для интернет-магазина, а именно главная страница

На видео:
1. Дестоп версия главной стариницы
2. Как изменить стиль
3. Правила замены контента
4. Адаптивная версия

Ссылка на макет под видео, а в обзоре рассказываю какие моменты важно учитывать при работе с шаблоном

https://youtu.be/pHKBy5V5qdw?si=RbIqFMm3REcAwMOr

Упражнение:
Развить способность создавать ассоциативные связи между идеями для создания изображения.

Выберите слово или понятие, которое хотели бы визуализировать. Например, слово "эмоция"

Разбивка на ассоциации: Разбейте выбранное слово на 10 ключевых элементов, составляющих его смысл. Например, для слова "эмоция" элементами могут быть "цвет", "форма", "линия".
Разбейте их на пары и напишите каждой паре общую ассоциацию, вне зависимости от других слов. Например для слов "синий" и "тигр" ассоциация может быть "Бренд"

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

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

Сбор изображения: Соберите все нарисованные элементы вместе так, чтобы они создавали единое изображение.

Рекомендации и пример реализации👇

Нулевой интерфейс - ты рили космос!

1. Что такое нулевой интерфейс и где он используется?
2. Исследования целевой аудитории нулевого интерфеса на примере космонавта.
3. Пример формирование персонажей и сценариев использования, на основе той же ситуации в космосе.
4. Пример адаптации контента под контекст ситуации
5. Применение искусственного интеллекта и алгоритмов машинного обучения.
6. Пример итеративного тестирования и улучшения, под тот же интерфейс
7. Пример возможного сценария итогового нулевого интерфейса для космонавта в космосе

...

Разработка UI UX у которых нет аналогов - 2 часть

5. Разработка прототипа
6. Подбор стилистики, референсов под элементы UI
7. Разработка UI

...

Давно не было технических статей.
Разработка UI UX у которых нет аналогов - 1 часть

Шаги разработки:

Проработка функционала
Проработка контента
Выбор цветовой палитры
Подбор референсов под элементы UX
Подбор стилистики, референсов под элементы UI
Разработка прототипа
Разработка UI

В первой части статьи разбираю первые 4 шага
...

Упорядоченный хаос в дизайне

Мир не стоит на месте, меняя понятие здравого смысла.

1. Папа Хаос в коммуникациях
2. Мама Анархия в UI UX

...

Экзистенциальный вопрос, для проработки сопротивления: почему зомби-апокалипсис никто не называет эпохой возрождения?

Друзья, хочу сегодня разобрать архетипы Юнга и то, насколько точно они отражаются в брендинге!

Зачем нужно распознавать архетипы и как это реализовано в дизайне?

Так же добавила краткое описание 2х ведущих архетипов у дизайнеров, так что, надеюсь, вы узнаете себя =)

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


Упражнение - Времена года

Разбейте холст на 4 части.

Каждому квадрату присвойте время года:
❄️зима / 🌿весна / 🌞лето / 🍁осень

Так же каждому квадрату присвойте стихию:
💧вода / 🌳земля / 🔥огонь / 💨воздух

Визуализируйте.
Заполните иллюстрацией каждый квадрат.

Условия:

Вы можете использовать любые материалы, пространство и любой формат выполнения.

Времена года и стихии не могут повторяться.

Вы можете использовать только абстрактные образы.


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

Анализ аналогов - часть №2

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

В статье:
Какие элементы необходимо анализировать?
Как их выбрать?
Как собрать единый прототип
Как подобрать стилистический референс

В последнее время было много лирики, так что на этот раз сухо и по делу.

Анализ аналогов - часть №1

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

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

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

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

...

И еще один видео-обзор, на
этот раз к карточке товара!
Выкладываю один дизайн, чтобы в итоге получился целый проект.

https://youtu.be/1PKS_iEBVNo?si=WimQirhRw2qwrSqJ