Основы UI/UX дизайна от @budkoolga_

Всем привет! Ребята, видим все ваши домашки, вы молодчины! Домашек много, сделать разбор у нас займет несколько дней, постараемся дать фидбек как можно скорее🙌 Пока можете просмотреть предыдущий материал, если что-то пропустили либо, если очень хочется , начать дизайнить второстепенные страницы ⚡️

Привет-привет! Я немного выпала из графика😔 Как у вас дела, все успевают делать домашки и вносить правки? Сегодня новый урок и вы наконец будете дизайнииить👯‍♀️7. Создание дизайн концепции 🧑‍🎨Цветhttps://www.youtube.com/watch?v=i3hVinKbPyUhttps://ru.experrto.io/blog/2021/07/02/polnoe-rukovodstvo-po-cvetu-v-uxui-dizajne/Эффектыhttps://www.youtube.com/watch?v=drLvxUHGFGgОбтравкаhttps://www.youtube.com/watch?v=6eidT1AfEEkСтилиhttps://www.youtube.com/watch?v=XuRLL5vZZaQ Ошибки дизайнеровhttps://www.youtube.com/watch?v=OXvMHf7L03o https://www.youtube.com/watch?v=gXMcnvs4M2QВидео про правки и критику, всегда отделяйте себя от своей работыhttps://www.youtube.com/watch?v=kQGeU27LKYY Домашка - 1) Создать дизайн главного экрана, используя за стилистическую основу ваш мудборд, идеи по структуре можете брать на референсах, которые вы нашли. 2) Добавляем цветовые палитры в стили, типографику пока можно не добавлять. 3) Все делаем аккуратно по сетке, именуем и группируем (!), используем автолэйауты и только где необходимо и удобно - компоненты.Так как это учебный макет,а не коммерческий, то иконки можете брать с фигмы комьюнити, фото можно брать с unsplash.com, векторную графику с freepik.com.Рядом с дизайном главной страницы оставляем мудборд и структурные референсы, ссылки на ваш проект добавляем в фигму и расшариваем -​​https://www.figma.com/file/D44nLG1Hz6RzblXFgszmUx/User-Flow-%26-Prototype?node-id=529%3A1159 Домашки необходимо сделать до вторника 12:00 по Киеву. Как обычно, на все вопросы ответим в чатике. Всем вдохновения✨❤️

Разбор домашних заданий по теме Wireframes & Prototype⚡️1 часть - https://www.loom.com/share/80a1b83d6709453aaed3d6e6be65412a2 часть - https://www.loom.com/share/9b58d66c85064407ba86f1f5e0b5c04e3 часть - https://www.loom.com/share/209242e7db58480b8a73a7f7f118cace4 часть - https://www.loom.com/share/74bde2ba88c0469f945321f690c3aca5Ребята, пожалуйста смотрите не только свой работу, но и как минимум целиком запись, в которую вы попали, можете увеличивать скорость воспроихведения.Часто повторяются одни и те же ошибки, некоторые моменты я могла упустить, но обязательно каждый проверьте самостоятельно в своей работе:1) Нейминг и группировка слоев (!), почти у всех не было этого, все аккуратно именуем и по папочкам раскладываем 2) Расположение элементов по сетке3) Работа с автолэйаутом и компонентом, кому необходимо пересмотрите уроки, если что задавайте вопросы в чат, но хорошенько разберитесьВсе большие молодцы, проделана отличная работа ❤️

Всем привет! Сегодня самостоятельный практический урок, сейчас проверять не будем, но на следующей проверке обязательно посмотрим. 6. Moodboard 🎨Создание мудборда важная часть работы, это не быстрый подбор картинок, на него выделяется отдельно время при оценке проекта. Изучите разные стили сайтов, проанализируйте структуру и вдумчиво подберите самые качественные референсы.https://www.youtube.com/watch?v=_NyzFyV6Haw https://www.youtube.com/watch?v=Tb7L9AiGJEc https://www.youtube.com/watch?v=w3DUz_SxS3wДополнительный материал по брендингу из 10 коротких лекцийhttps://youtube.com/playlist?list=PLGkSGRGZ4xV62TjIDepvyn3gdz8hdiKlCДомашка - 1. Создать мудборд для своего проекта, подобрать референсы в едином стиле.2. Подобрать референсы по структуре. Найти по 3 рефа структуры на каждый блок вашей главной страницы и разместить рядом. Здесь примеры могут быть любого стиля/цвета, главное чтобы совпадала суть блока с вашим блоком на главной.Все пояснения и примеры тут -https://www.figma.com/file/D44nLG1Hz6RzblXFgszmUx/User-Flow-%26-Prototype?node-id=747%3A3177 Следующее задание будет в пятницу. Как всегда все вопросы в чатик ❤️

Всем привет! Следующее задание будет завтра утром, разбор домашних заданий постараемся так же опубликовать сегодня-завтра🙌

Приветик👋 Cегодня новый урок, домашки необходимо сделать до понедельника 21:00 по Киеву.5. Создание Wireframes и кликабельного прототипа 💻Прототип/ваерфреймhttps://www.youtube.com/watch?v=8mbcZJdTrtkИнтерактивные компонентыhttps://www.youtube.com/watch?v=fivhuNIHdfcБулиевые операцииhttps://www.youtube.com/watch?v=pGerHSng4MUСейчас на этапе ваерфреймов нам нет необходимости показывать состояние элементов/ховеры, но как сделать выпадающее меню нужно научитсяhttps://www.youtube.com/watch?v=27KAE2HLjEgДополнительный материал - мастер-класс от Даши по анимации элементов для эффектного портфолио -https://www.youtube.com/watch?v=12bltcm11DU Домашка - Изучите ссылки выше. Далее приступайте к уроку.https://www.loom.com/share/99a3ff966e934e72959cb14316696b9f1. Необходимо сделать минимум 5 ваерфреймов (главная страница должна содержать минимум 6 блоков), на этом этапе главное показать тип контента, что именно будет в блоке - фотка/текст/галерея и тд. Все делаем черно-белое, без лишних стилей, но все блоки собираем аккуратно и по сетке, правильные отступы соблюдаем, все уже должно быть красиво. Гуглим конкурентов, смотрим как они реализовывают тот или иной блок, замечаем решения, которые чаще всего используются.2. Все ваерфреймы связываем между собой в кликабельный прототип с помощью меню, футера и логической последовательности (Блог - внутренняя текстовая страница, Каталог товаров - внутренняя страница товара и тд). Ни одну кнопку или пункт в меню не оставляем без связи, все должно работать как на сверстанном сайте. Готовый прототип переносить не нужно, но в фигме ниже оставляем ссылку на ваш рабочий файл, даем права для редактирования ( budkoolga95@gmail.com и sodandesign@gmail.com ).Прототип из урока и домашки оставляем тут -https://www.figma.com/file/D44nLG1Hz6RzblXFgszmUx/User-Flow-%26-Prototype?node-id=529%3A1802 Все вопросы в чатик, всем продуктивности⚡️🌪

Обзор на домашки(можете увеличить скорость воспроизведения), все комментаии так же есть в фигме🙌 -https://www.loom.com/share/31b7c1f31d7d4182b0cd156a77843178

Всем привет! Столько домашек, красавчики 😍 Разбор опубликуем в течение дня, а новое задание будет завтра утром, пока немного отдохните, все-таки вечер пятницы ✨

Домашки присылаем до четверга 21.00 по Киеву 🙌

Привет-привет!👋 В создании дизайна как и в строительстве дома, чтобы сделать качественный продукт, необходимо начать в первую очередь с определения для кого мы этот дом строим, какие основные функции у дома и какой будет каркас, а не с выбора краски для стен. В этом уроке вы создадите юзер флоу - структуру проекта, над которым вы будете работать последующие занятия.4. Основы UX и User Flow 🧑‍💻Теория:https://www.youtube.com/watch?v=aoqBCP5tcF4https://www.youtube.com/watch?v=PJyZlgURwN8 https://ux-journal.ru/5-samyh-vazhnyh-printsipov-vizualnogo-dizajna-dlya-ux-ui-dizajnerov.html https://www.uprock.ru/articles/zakony-ux-v-realnom-mirehttps://abramova-freelance.ru/user-flow https://www.youtube.com/watch?v=ZBR1UYqo4SAДомашка - Изучите ссылки выше. Далее приступайте к уроку.1 часть -https://www.loom.com/share/19fbd3309c224854965b9c13c8c84c7c2 часть -https://www.loom.com/share/8f2a6a27d57448cea526480481ea0f37Выберите простой сайт на несколько страниц, сфера которого вам нравится (от 5 до 10 страниц), если хочется чего-то посложнее, то можно сайт с регистрацией или с корзиной, как маназин в видео, не слишком сложный, алиэкспресов нам не нужно 🙂 Далее на основе этого сайта вы будете тренироваться и делать редизайн, поэтому хорошо выбирайте, чтобы глаза горели как хотелось задизайнить сайт в этой сфере. После того как выбрали сайт, проектируем юзер флоу, пока что лучше ничего от себя не добавлять, а просто отображаем то, что сейчас есть на сайте. Готовые юзер флоу добавляем в фигму, с указанием ссылки на сайт и вашего имени.Здесь лежит пример юзер флоу из видео и сюда нужно будет закидывать свои -https://www.figma.com/file/D44nLG1Hz6RzblXFgszmUx/User-Flow?node-id=0%3A1Как обычно, на все вопросы ответим в чатике ❤️