Figma + Веб-дизайн

🖐Привет, это Денис из NIXELE™! И сегодня вы узнаете

🔥Почему «красиво» — не значит «удобно», а также почему это можно опровергнуть...

📱Насколько в создании веб-дизайна не важен макет и почему на самом деле инструкцию придумали дебилы (или нет)?

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

💯Кто он, этот ваш идеальный дизайн сайта?

Я решил начать с прогулки: свежий воздух и окружающая атмосфера натолкнули на одну интересную мысль когда я проходил мимо нового жилищного комплекса…

Смотрите, это логотип «Пятерочки» в одном из современных жк в Москве. Вроде бы обычная картина, но посмотрите внимательнее, можете открыть панораму и оглянуться вокруг🧐

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

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

📌Что же получается, «Пятерочка» осознает важность визуальной эстетики?

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

А это визуализация различия вывески на разном фоне(фасаде).

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

Тогда я осознал, что проектирование не всегда самое важное и тратить на дизайн 16,5 дней точно не стоит. Визуальная составляющая зачастую имеет куда более важное значение перед планом. Получается все мои эти наброски не нужны были?

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

🤷‍♂Создание макета сайта это действительно бесполезное занятие?

Я сразу побежал домой изучать взаимосвязь макета и эстетики в веб-дизайне и вот что нашел:

Японские эксперты Масааки Куросу и Каори Кашимура в дизайн-центре компании Hitachi попросили оценить 26 сайтов 292-ух студентов факультета дизайна и психологии. Pезультаты показали положительные результаты в сторону эстетики дизайна: визуально более стильные и красивые сайты выбирали чаще, даже когда навигация ставила в тупик.

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

Об Этом уже говорит работа Флориана Гейгля и Кристины Лерман под названием «Оценка влияния смещения кликов и вставки ссылок в Интернете на навигацию».

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

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

🔹Нужна успешная комбинация - эстетическое впечатление + легко совершенное плановое действие(визуал UI + макет UX). Вместе они подталкивают пользователя на следующий шаг и приводят к целевому действию, а также мотивируют к повторному посещению сайта.

👟Простыми словами - кроссовки должны быть стильными и соответствовать трендам, но самое главное — они должны быть удобными!

Кажется, что каким бы дискофмортым ни был макет(UX), всегда будет важна эстетика(UI) - тяга человека к идеальному невероятно велика!

🔑От сложного к простому - что такое UI/UX дизайн. Аналогия.

Представьте: вы собираете конструктор «Лего-техник», то есть механизм, из подвижных деталей(UX) и обычных блоков, создающих визуальную часть(UI).

Поворотные механизмы в виде шестеренок, троса и колес консруктора(UX) дополняет стильное сочетание желтого и черного(UI)

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

Происходит наращивание новых нейронных связей и мы пониманием, что важно правильно сочетать UI и UX составляющие дизайна.

🎏Визуал по-разному привлекает разные категории людей

Все не так однозначно, нельзя сделать «супер» и «мега» и для всех сразу «в одном флаконе».

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

Воу! Эргономичность, - сложное слово, кажется мы можем обойтись и без него! Само слово означает приспособление предметов труда для комфортной и эффективной работы 

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

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

🔹Ключевое на чем нужно сосредоточиться при разработке дизайна сайта – не UI и не UX составляющие, даже не их сочетание. Самое важное – понять что именно ожидает увидеть пользователь. Потому что от его потребностей и зависит правильное сочетание UI/UX.

«Если между ожиданиями клиентов от продуктов или услуг и их реальным дизайном существует большая разница, то мы вынуждены вступать в неравный бой, пытаясь заставить клиентов пересмотреть их устоявшиеся представления»
Из книги Джона Уэлена «Дизайн пользовательского опыта»

Тесты, тестирование, тестики🔥
— Знаете почему программирование и веб-дизайн одно и то же?
— Потому что это все IT? — спросите вы
— Да, скорее всего вы правы! — Но почему?

Potomu chto никогда не знаешь кто он, этот твой пользователь))

Поэтому необходимо знать погоду сайта, дизайн которого создаешь. А осадки на ней - это user flow. Смотите, так выглядит погодный циклон на сайте:

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

Именно такую карту наша команда использовала при запуске тестовой версии сайта хоккейной лиги чемпионата кхл 3на3. На тепловой карте мы с командой отчетливо видели какие элементы привлекают пользователя и работают так, как и было задумано, а какие остаются без внимания и требуют UI/UX доработки.

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

📌Как повлияло на разработку веб-дизайна

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

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

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

Ведь цель дизайна сайта, не только замотивировать потенциального покупателя купить авто именно здесь, но и привести к целевому действию юзера, «случайно» попавшего на ваш сайт.

📌Как вы думаете, что вам может рассказать одна бутылка кетчупа?

Вроде бы ничего особенного, только если это не бутылка Heinz. Знакомтесь — мем, посвященный именно ей:

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

Эталона идеального дизайна сайта не существует, но существует план, который может помочь.

⚡8 советов от NIXELE™ по созданию идельного дизайна сайта

• Чаще соприкасайтесь с прекрасным но не утопайте в нем - выделите на подбор примеров только час, разбейте их по группам и оттолкнитесь от чего-то одного

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

• Проверенные решения на то и провренные, они работают — изучайте теорию и психологию, используйте нейросети и выбирайте с умом то, на чем будет посторен UI/UX дизайн

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

• Будьте открытее к общению — опрашивайте не только ца, но и своих друзей и знакомых. Порой люди, совсем далекие от темы, могут натолкнуть на интересные мысли

• Не бойтесь сносить здание под корень — не бойтесь начать все с начала, даже если работу полностью придется стереть

• Ставьте широкие видовые окна — делайте дизайн «прозрачным» в первую очередь понятным и доступным, и только потом красивым

• Любите себя — прощайте себе даже крупномасштабные косяки и умейте найти силы на то, чтобы вернуться к работе, даже когда много правок

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

🔹Визуал и практичность работают вместе, полагаясь на потребности пользователя. Знакомтесь: формула которую мы вывели

UI - визуал; UX - пользовательский опыт; TA - целевая аудитория; DS - дизайн

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

🙌Спасибо за прочтение данной статьи, ваша активность помогает скорейшему выходу нового материала
👉Всегда рад обратной связи — не забывайте про чек-поинты в виде опросов выше и по ссылке) Увидимся в следующей статье😉

Чистый интерфейс, дорогие шрифты, много пространства и плавные анимации создают эффект роскоши.

2. AI и персонализация

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

3. Визуальный акцент: 3D и видео

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

4. Mobile-first подход

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

5. Геймификация

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

3. Сравнение с западным и европейским дизайном

4. Крупные бренды и агентства, формирующие digital-дизайн в Дубае

Некоторые компании, задающие тренды:

• Emirates — премиальный UX авиасайта.

• Emaar — продуманный веб-дизайн для недвижимости.

• Dubai Holding — сложные корпоративные сайты с фокусом на пользовательский опыт.

• Digital Gravity, WebCastle, CodeGuru — агентства, создающие digital-продукты мирового уровня.

Заключение

Веб-дизайн в Дубае — это сочетание эстетики, технологий и адаптации под уникальные культурные требования. Если в Европе и США важны удобство и инновации, то в Дубае ключевыми факторами становятся премиальность, AI-оптимизация и визуальная привлекательность. Развивая digital-проекты в ОАЭ, важно учитывать эти особенности, чтобы создавать успешные и востребованные продукты.

P.S.
Если вы веб-дизайнер и хотите работать в Дубае, не забудьте о мультиязычности, визуальной роскоши и адаптации под мобильные устройства — это залог успеха в этом регионе!

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

Также стоит помнить, что мы не всегда отталкиваемся от чёткого плана, но и действуем в угоду человеческого фактора. И это нормально 💜

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

Часть 2

Допустим, вы уже задали себе необходимые вопросы и ответили на них. Теперь нам необходимо:

1. Определить достижимые цели

2. Сформировать личный план по развитию

3. Продумать этапы

Структурируем данные, чтобы нам было проще с ними работать

🌟 Определим достижимые цели

Из ответов на вопросы это:

— Научиться в дизайн простых интерфейсов за ~4 месяца
— Начать зарабатывать через 4 месяца

Дополнительные вводные:

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

💎 Главный навык для старта 💎

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

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

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

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

🌟 Сформируем личный план развития

1. Учимся 4 месяца

Мы поняли, что этого достаточно для начального этапа с таким сроком

2. Выбираем самообразование

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

3. Через 4 месяца ищем подработку

Работу в компании вряд ли мы найдём + нас интересует именно доп. заработок. А вот зайти на какую‑нибудь фриланс биржу можно. Там не всегда важен опыт,. Главное себя продать.

Часть 3

🌟Этап 1. Изучаем инструмент Figma

Для этого идём, например, на Behance. Скриншотим работы и пытаемся отрисовать 1в1. Пока что погружаться в теорию нет смысла. Берём только сайты и их адаптивы. Для изучения iOS HIG и Android MUI нам времени не хватит. Поэтому повторки Android и iOS экранов не рисуем.

Гуглить мы всё ещё не разучились. Ищем ответы на вопросы в браузере, youtube и др.

🌟Этап 2. Нам нужен осознанный дизайн

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

1. Изучаем все стандартные интерфейсные web-элементы и принципы отрисовки web-интерфейса, его адаптивность

Закрепляем на практике

2. Изучаем типографику, вёрстку, композицию, визуальную иерархию, цвет

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

🌟Этап 3. Учимся структурировать работу

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

Поиск и формирование первичных данных:

— Брифинг
— Изучение предметной области
— Поиск конкурентов
— Подбор эвристик

Определение фактических данных:

— Эвристический анализ
— Анализ конкурентов
— Пользовательские истории
— Схема информационной архитектуры

Дизайн:

— Пользовательские пути
— Макеты низкой детализации
— Макеты высокой детализации

Передача дизайна в разработку:

— Подготовка макетов
— Нейминг
— UI-kit, компоненты

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

🌟Этап 4 Формирование портфолио

Здесь, я уверен, вы сможете найти всю информацию сами :)

💎 И ещё раз: теория ➔ практика. Всегда. 💎

Также старайтесь не придумывать велосипед. Почти всё о чем вы подумали, уже кто‑то сделал до вас)

Полезные ресурсы

📂 UX/UI Дизайн роадмап

Сам пользуюсь и всем советую . Его можно взять за основу для дальнейшего развития. Но только после всего описанного выше. Этот роадмап предоставит вам дальнейшие вызовы и правильный курс развития.

📂 Рекомендуемая литература:

1. Типографика и вёрстка. Артём Горбунов.
2. Теория цвета. Иоханнес Иттен.
3. Пиши, сокращай. Максим Ильяхов.
4. Сожги своё портфолио. Майкл Джанда.
5. Новая типографика. Ян Чихольд
6. Дизайн привычных вещей. Дональд Норман.
7. Психбольница в руках пациентов. Алан Купер.

Это моя первая статья на Пикабу. Буду благодарен за обратную связь в комментариях и поддержке реакциями ❤

Генерация: тексты, идеи, ответы на вопросы

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

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

Режим рассуждений

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

Генерация изображений

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

Работа с файлами

Загружайте в чат с Алисой текстовые файлы в форматах pdf, txt, doc и docх. Нейросеть сумеет ответить на вопросы по их содержанию, проанализировать данные или сделать сжатый пересказ. Например, вы можете загрузить в чат файл с ответами респондентов, чтобы Алиса подготовила по ним отчёт. Или дать нейросети научную статью, чтобы она сделала конспект или глоссарий.

Персонализированное общение с Алисой — в опции «Про»

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

Использовать новые бесплатные возможности вы можете в чате на https://alice.yandex.ru, на главной странице Яндекса, в приложениях Алиса и Яндекс, а также в Яндекс Браузере для Android (чуть позже нейросеть появится в десктопном Браузере и версии для iOS). Будем рады вашим отзывам!