Figma + Дизайн

Ключевые особенности:

• 150+ готовых компонентов (кнопки, карточки, поля ввода).

• Полная библиотека Material-иконок.

• Адаптивные шаблоны для разных устройств.

• Темная и светлая темы с продуманными цветовыми схемами.

• Детально проработанные состояния элементов.

Идеально подходит для дизайнеров, создающих продукты для экосистемы Google (Android, веб-приложения).

2. Apple iOS UI Kit

Исчерпывающий набор компонентов для iOS-приложений, созданный с учетом всех требований Human Interface Guidelines от Apple.

Ключевые особенности:

• Нативные элементы интерфейса iOS (таб-бары, алерты, action sheets).

• 50+ готовых экранов (онбординг, профиль, настройки).

• Реализация темного режима по стандартам Apple.

• Системные шрифты SF Pro с правильными межбуквенными интервалами.

• Компоненты для новых функций iOS (контекстные меню, drag and drop).

Идеально подходит для дизайнеров мобильных приложений под iOS.

3. Material Design Icons

Самая полная коллекция иконок в стиле Material Design от Google.

Ключевые особенности:

• 5000+ иконок в трех стилях (filled, outlined, rounded).

• Полная поддержка темной/светлой темы.

• Оптимизированные векторные формы.

• Регулярные обновления и добавления.

• Удобная система поиска и категоризации.

Лучшее применение: универсальное решение для любых проектов в стиле Material Design.

4. Feather Icons

Ультра-минималистичные иконки с тонкими линиями и идеальными пропорциями.

Ключевые особенности:

• 287 тщательно отобранных иконок.

• Единый стиль для всей коллекции.

• Идеальная читаемость в маленьких размерах.

• Простая кастомизация цвета.

• Поддержка всех популярных форматов.

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

5. Bootstrap Icons

Bootstrap Icons — это официальный набор иконок от создателей фреймворка Bootstrap. Коллекция включает более 1800 векторных иконок в едином стиле, оптимизированных для веб- и мобильных интерфейсов. Иконки выполнены в чистом, минималистичном дизайне с аккуратной геометрией, что делает их универсальными для различных проектов.

Ключевые особенности:

• 1800+ иконок в едином стиле (линейные и монохромные).

• Полная совместимость с Bootstrap 5 (но можно использовать и без него).

• Гибкость настройки — легко менять цвет, размер и обводку.

• Оптимизированные SVG-формы для четкого отображения в любом размере.

• Регулярные обновления (добавляются новые иконки).

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

Советы по эффективному использованию

• Создавайте библиотеки компонентов — организуйте задублированные киты в удобную для вас структуру.

• Настраивайте под свои проекты — адаптируйте цвета, шрифты и размеры под конкретные задачи.

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

• Комбинируйте ресурсы — не бойтесь смешивать элементы из разных наборов.

• Делитесь находками — если обнаружили отличный бесплатный ресурс, расскажите о нем коллегам.

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

🖐Привет, это Денис из 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

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

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. Психбольница в руках пациентов. Алан Купер.

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

То есть, если понравился чужой сайт, можно сделать скриншот любой страницы и загрузить в сервис, и он взамен выдаст HTML/Tailwind/JS код. Есть сервис, действующий примерно по такому же принципу.

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

Почему примерно?

Copycoder

Потому что в Copycoder так же перетаскивается скрин сайта, а еще можно и дизайн Figma, или макетов Ul, только на выходе сервис выдает не код, а готовый текстовый промпт, которыей можно использовать в AI-инструментах разработки, таких как Cursor, Bolt и v0 - это надо учитывать.

CopyCoder предлагает бесплатный план с 5 промптами в месяц и платный план за $15 в месяц с 25 промптами