Рисуем дизайн продуктового сайта на фрилансе
Рет қаралды 8,377
Күн бұрын🔥 Бесплатный курс по дизайну с бесплатной обратной связью: t.me/freeeducation_uprockbot
Рисуем дизайн продуктового сайта на фрилансе
Евгений Кузьмин (CEO & Art-director студии UPROCK) делится своим опытом, рисует актуальный дизайн, и разбирает главные ошибки в UX/UI.
0:00 Вступление
0:30 Обзор проекта
0:50 Изучение контента
1:12 Общая структура лендинга
1:24 Первые наброски
3:13 Добавляем цвета
3:32 Экспериментируем с контентом и элементами
5:17 Экспериментируем с контентом и элементами
5:52 Первая завершенная концепция
9:40 Вторая итерация с концепцией
10:26 Третья итерация
11:02 Четвертая итерация
12:15 Финальная версия, анализ
16:10 Адаптив
16:22 Подготовка кейса на Behance
17:05 Завершение
🚀 Ждём вас в школе UX/UI дизайна №1 UPROCK: school.uprock.ru/middle
☀️ Написать менеджеру школы: t.me/uprocksale
ПОЛЕЗНОЕ ДЛЯ UX/UI-ДИЗАЙНЕРОВ:
Скачать бесплатно кириллические шрифты: www.fonts.uprock.ru/
Все самые полезные сайты и мокапы для дизайнеров: www.baza.uprock.ru/
Бесплатная онлайн-книга по UX/UI-дизайну: www.uprock.ru/education
Зарубежные статьи по UX: www.uprock.ru/all-articles
Видео-уроки по дизайну: t.me/uprockdesign
НАШИ СОЦ. СЕТИ:
Личный инстаграм Евгения: / zhenya.ninja (запрещен в РФ)
Крутые анимации из наших кейсов: dribbble.com/uprockpro
Лучшие сайты на Behance: www.behance.net/uprockawards
Заказать дизайн сайта или брендинг компании: www.agency.uprock.ru
#вебдизайн #figma #ux #uprock
@UPROCK Жыл бұрын
🔥 Бесплатный курс по дизайну с бесплатной обратной связью: t.me/freeeducation_uprockbot Готовый сайт - helloganss.ru/ Кейс - clck.ru/33Yzzv Отзыв Рамиля о совместной работе - kzfaq.info/get/bejne/fqmlmK16us-9hoE.html
@Tail_wind Жыл бұрын
Жень, привет, отличное видео, в целом вопросов к содержанию нет все структурировано и по полочкам. Ты словно пазл собираешь пытаясь находить все новые и новые итерации. Единственная просьба для последующих видео - сделать больший акцент на ТЗ. Вкратце показать с каким проблемами столкнулся дизайнер, как разделил весь этот наплыв текста по полочкам и так далее. Мне кажется это будет полезно как новичкам которые только начинают выполнять заказы так и тем кто уже в деле но все же старается каждый раз черпать новую полезную информацию. Спасибо!
@UPROCK Жыл бұрын
Салют! Спасибо за развернутый комментарий и четкий запрос👍 Принято, масштабирую этот момент
@li69no Жыл бұрын
Как всегда, все очень чисто и понятно! Смотреть и слушать ваш канал - одно удовольствие💥
@UPROCK Жыл бұрын
Спасибо🙏
@lamborgean Жыл бұрын
Женя, прекрасный формат, даже мне, твоему студенту интересно. Очень нравятся и мотивируют подобные рассказы про процесс разработки проектов!
@UPROCK Жыл бұрын
Класс, спасибо🙏 На самом деле студентам эти видосы не меньше, а может даже больше полезны, можно со стороны посмотреть на процессы взаимодействия школы и студента во время работы над выполнением реальных задач)
@NordBird Жыл бұрын
Ух ты, какая красота получилась! Все четко, понятно и нескучно. Как будто и правда высекли скульптуру) Как уже сказали тут, хотелось бы побольше про работу с ТЗ, так как это темный лес пока думаю для многих начинающих)
@UPROCK Жыл бұрын
Спасибо за отзыв 🙏Запрос принят)
@qaigymoon Жыл бұрын
Какой свежий крутой формат, да и музыка на фоне отлично подобрано, видно уровень по западному что то новое в СНГ как глоток свежего воздуха, такой приятный и не загруженный вайб
@UPROCK Жыл бұрын
Класс, спасибо за такой позитивный комментарий☺️
@iKuer Жыл бұрын
очень хороший формат видео, очень много полезного, спасибо!
@UPROCK Жыл бұрын
Супер⚡️ Всегда пожалуйста)
@user-qi1ii8rr9o Жыл бұрын
Жень спасибо, классный формат видео, полезный 🙏
@UPROCK Жыл бұрын
Пожалуйста, Виталий! очень рад⚡️
@KZ-uo8gc 10 ай бұрын
Очень классный формат! Полезно, все разжевано детально. Я раньше думал что надо долбит один макет пока не выйдет классно. А вы показали что нужно несколько макетов, с последующим улучшением
@UPROCK 10 ай бұрын
Салют! Рад, что формат зашёл👍Да, по сути это единственный способ получить действительно качественный результат
@paulfomin6292 Жыл бұрын
Ни добавить ни отнять, все конкретно и по делу)
@UPROCK Жыл бұрын
Супер👍 Очень рад, что видео так воспринимается!
@anastasiabezzubova1496 Жыл бұрын
Формат видео - пушка! Спасибо, что показаны все шаги; доступно проследить нить развития идеи и концепции. Согласна с предыдущим комментатором: хотелось бы узнать, какие были ограничения и задачи у проекта. Работа получилась лаконичная, строгая, но очень стильная!
@UPROCK Жыл бұрын
Очень рад, что видео зашло, спасибо за комментарий! Запрос принят)
@maxmoovi Жыл бұрын
Четкая подача контента, с удовольствием смотрю ваши видео. Крутой проект, ничего лишнего. Всё четко и аккуратно.👍👍👍
@UPROCK Жыл бұрын
Супер, спасибо🙏
@oxanakrylova6535 Жыл бұрын
Женя привет! У вас с Рамилем получилась отличная команда супер-архитекторов контента. Так все разложили логично и структурно. Такая скучная тема - клавиатура заиграла новыми красками. Спасибо за отличное обучающее видео и подробное описание процессов. Супер полезно! До встречи в следующем эпизоде. Ждем
@UPROCK Жыл бұрын
Привет, Оксана! Спасибо за такой добрый и позитивный комментарий☺ До встречи, следите за обновлениями)
@fneissiz Жыл бұрын
Очень круто! Жень, ты сказал в конце, что постарался все детали рассказать, у тебя получилось! Продолжай также все глубоко разбирать, т.к. ценность высока)
@UPROCK Жыл бұрын
Супер🙏Спасибо за отличный отзыв
@PINpiter Жыл бұрын
Спасибо за ролик. Хороший проект :)
@UPROCK Жыл бұрын
Пожалуйста) Согласен😉
@eugennaumov1860 Жыл бұрын
Лайк! Ещё не досмотрел, но очень круто!
@UPROCK Жыл бұрын
Спасибо🙏
@greensquare6360 Жыл бұрын
Женя, спасибо за разбор! Хотелось бы больше раскрытия логики создания вайрфреймов.
@UPROCK Жыл бұрын
Пожалуйста! Заказ принят)
@user-tp2wu4kw4v Жыл бұрын
Рамиль молодец! Хороший дизайн! Талант сразу виден
@UPROCK Жыл бұрын
Точно! Рамиль очень круто поработал, он большой молодец⚡
@olgamaltseva Жыл бұрын
Спасибо
@UPROCK Жыл бұрын
Пожалуйста☺️
@ldca241 Жыл бұрын
Крутой проект, отличное видео! Смотрю давно, но ни разу не слышал подробного обсуждения темы про поиск и изготовление иллюстративного контента. Вот и в этом проекте хотя и понятно в основном как решались эти вопросы, но не до конца.
@UPROCK Жыл бұрын
Спасибо🙏 Предоставление контента для сайта - изначально задача заказчика и ситуации, когда дизайнеру необходимо самому искать/изготавливать иллюстративный материал, скорее исключения. Запрос я понял и подумаю, что смогу сделать и как развить эту тему в следующих видео)
@masiukkatya Жыл бұрын
Крутой формат🔥
@UPROCK Жыл бұрын
Спасибо🙏
@purplepilled_m Жыл бұрын
Крутой проект!
@UPROCK Жыл бұрын
Спасибо) Проект и правда отличный👍
@khrustalev_creative Жыл бұрын
Огонь же)
@UPROCK Жыл бұрын
Точно так) 👍
@user-re9pq3bj3h Жыл бұрын
Супер контент
@UPROCK Жыл бұрын
Спасибо🙏
@tiffany-user Жыл бұрын
Круто. Тоже сейчас на коммерческом проекте с Павлом нахожусь)
@UPROCK Жыл бұрын
О, да, ждём от вас крышесносных результатов🔥
@ana.lomakina Жыл бұрын
Видела это сайт на МОТ, так и знала что это uprock!!!!
@UPROCK Жыл бұрын
☺
@user-ib4yo7bm5p Жыл бұрын
🔥🔥🔥
@UPROCK Жыл бұрын
☺☺☺
@user-xh6wd7up6h Жыл бұрын
Женя привет,если возможно хотелось бы видеть момент подбора референсов,возможно сетки. p.s видео ТОП))) Спасибо за то,что вносишь краски в серый "дизайнерский" Ютуб)
@UPROCK Жыл бұрын
Салют! Заказ принят) Пожалуйста, очень рад☺️
@MaBrg1 Жыл бұрын
Вдохновилась)
@UPROCK Жыл бұрын
Класс) Именно для этого и делаем видео👍
@user-we8zk6cz8b Жыл бұрын
Дизайн мне понравился и подача тоже хорошая. Единственный момент, дизайнер проводил какие либо анализы или только на основании технического задания работал? Интересно было бы посмотреть анализ, поиск референсов и т.д. Почему именно такой стиль в дизайне был выбран, а не другой и прочее. Хочется увидеть как дизайнер мыслил в процессе создания макета.
@UPROCK Жыл бұрын
Привет! Предварительные исследования делают только для крупных продуктов, потому что для лендинга это слишком дорого. А так, тестирование делают, в основном, уже после запуска. В таких ситуациях необходимо отталкиваться от паттернов восприятия информации пользователем, они от проекта к проекту во многом очень похожи. Мы выявили основные ключевые аспекты, которые нужно рассказать людям, и составили карту акцентов, и проектировали опираясь на неё. Не рассчитывайте на то, что исследования это панацея, даже если при проведелии предварительных исследований вы получите точный результат. Если бы так было - нейронки действительно могли бы выполнять боьлшую часть работы за нас) Очень многое построено на эмпатии и на гипотезах, требующих проверки. По поводу того, как мыслил дизайнер - вроде как раз в видео об этом я и рассказывал, если остались какие-то вопросы, напишите пожалуйста, я дополню
@sergey4522 Жыл бұрын
Спасибо, очень интересно и познавательно. Впервые увидел как правильно по этапам разделить работу! Сколько часов пришлось потратить? Делали анимацию в After Effects?
@UPROCK Жыл бұрын
Всегда пожалуйста) Да, делалось в афтере
@Irina_Cool 2 ай бұрын
Всё супер. Только иконки из разных наборов, непорядок)))
@UPROCK 2 ай бұрын
Спасибо, Ирина! Будем тщательнее следить за этим моментом😉
@emaeshka Жыл бұрын
Здравствуйте. Планируете ли вы сделать урок по созданию сайта webflow. Было бы думаю интересно
@UPROCK Жыл бұрын
Салют! Тема интересная, заказ принят) Посмотрю, что можно сделать, спасибо👍
@olshanti7563 Жыл бұрын
отличный видос! спасибо. сам сайт не очень получился. в конечной версии много неаккуратностей осталось.
@UPROCK Жыл бұрын
Салют! Рад что видос зашёл🙏 А что за неаккуратности на сайте?
@Anastasia-ms7cx Жыл бұрын
Получается не было работы с референсами? Кажется, с ними быстрее поиск концепции происходит и нагляднее…
@UPROCK Жыл бұрын
Привет, особо здесь не было, Рамиль сразу накидал свое направление. Но это не значит, что не нужно пользоваться референсами.
@user-we8zk6cz8b Жыл бұрын
И ещё добавлю свой комментарий. Мне не хватает стоимости клавиатуры. Я зашёл, хочу купить, а сколько она стоит? Только нажав кнопку купить и перейдя на озон я увидел стоимость. Может мелочь, но думаю стоимость нужна.
@StudioSerious1 Жыл бұрын
Согласен, цену нужно выделить огромным жирным шрифтом ))
@dmitrybusarev1396 Жыл бұрын
Если будет стоимость сразу, не все кнопку «купить» нажмут 🙃
@UPROCK Жыл бұрын
Так и есть) ориентированно на фанатов таких клавиатур)
@alevi_21 Жыл бұрын
Бомбический проект🔥 Сколько ушло времени на вёрстку этого лендинга в тильде?
@RamilSharifull Жыл бұрын
3 дня примерно и день на проверку)
@alevi_21 Жыл бұрын
@@RamilSharifull Вы сами лично собрали?
@RamilSharifull Жыл бұрын
Да)
@alevi_21 Жыл бұрын
@@RamilSharifull Круто) Я как раз думал изучить тильду параллельно, теперь ещё сильнее вдохновился) Как думаете, за какое время можно научиться собирать подобного рода лендинги самостоятельно?
@RamilSharifull Жыл бұрын
@@alevi_21 кстати у UPROCK есть курс по webflow и скоро будет по Tilda от себя могу сказать, 1-2 месяцев может хватить чтобы начать уверенно пользоваться этим инструментом
@ber1830 Жыл бұрын
Неймовірно вражений стільки корисного
@UPROCK Жыл бұрын
Спасибо🙏
@user-kf9qv5pb1k Жыл бұрын
Наведу критику, готов к дискуссии: 1. По дизайну - Не совсем к месту ощущается полоса с иероглифами, т.к. она встречается очень редко, и когда ее видишь, то думаешь что в ней какой-то посыл. А его нет - В конце сайта где форма отправки, там есть чекбокс "Согласен с правилами обработки персональных данных". Так вот оно не очень хорошо смотрится с большими скруглениями у блока сверху и кнопки внизу. 2. Зашел на сам сайт - если честно, то верстка оставляет желать лучшего. Съезжают карточки при смене цвета клавиатуры. С отступами беда. Резюме: нужно еще дорабатывать. Считаю что выкатили сырую версию, и стоило провести как минимум еще одну итерацию по разработке дизайна
@UPROCK Жыл бұрын
Да, спасибо за комментарий
@dmitrybusarev1396 Жыл бұрын
а чего на рабочем сайте предлоги висячие не поправили?🤔
@UPROCK Жыл бұрын
Потому что это веб-сайт, и в связи с рядом технических особенностей на нем допустимо игнорирование специфичных типографических правил)
@dmitrybusarev1396 Жыл бұрын
@@UPROCK так есть же непечатный служебный код для неразрывного пробела. Текстовые блоки небольшие и очень заметны эти буковки одинокие
@UPROCK Жыл бұрын
@@dmitrybusarev1396 почему этим великим знанием никто не пользуется тогда?)
@dmitrybusarev1396 Жыл бұрын
@@UPROCK в смысле, у вас в Апроке? Я не знаю 🤷 Но есть html-код, плагины для Figma, для CMS, типограф у Лебедева.
@UPROCK Жыл бұрын
@@dmitrybusarev1396 у тебя в комментарии висят предлоги)
@matteriya6637 Жыл бұрын
дизайн крутой, выбрала определенную клавиатуру меня закинуло на азон и тут я прям потерялась
@UPROCK Жыл бұрын
Согласен! К сожалению, предложения по способу реализации продукции выходят за рамки нашей дизайнерской экспертизы(
@VadimPasternak Жыл бұрын
Процесс итераций вообще не понятен. Если текста и фоток нет на местах, как вы понимаете что нужно доработать? По ощущениям кейс на бх получился лучше сайта.
@UPROCK Жыл бұрын
Привет, Вадим! В начале, самое главное - создать на основе предварительно проведённой аналитической работы общую структуру, логику расположения элементов, стройную композицию. В таком случае, если впоследствии понадобится отредактировать или совсем поменять текст или фотографии (а такое часто бывает) не придётся переделывать весь интерфейс. По поводу бихенса, это практически повсеместное явление. Задача кейса - поразить воображение дизайн-сообщества свежестью подхода и смелостью решений, чтобы получить больший отклик. Задача сайта - быть удобным и закрывать потребности пользователя.
@VadimPasternak Жыл бұрын
@@UPROCK спасибо за исчерпывающий ответ. Евгений, вы лично отвечаете или все же модератор?
@UPROCK Жыл бұрын
@@VadimPasternak лично)
@VadimPasternak Жыл бұрын
@@UPROCK мое почтение, Евгений. Почему на дизайн-выходных в Суздале не был???? 😂😂😂😂😂
@UPROCK Жыл бұрын
@@VadimPasternak да как-то заработался(
@user-pooser164 Жыл бұрын
Жаль, что вы пропустили объяснение, как вы пришли к такой стилистике((
@UPROCK Жыл бұрын
Это происходит только через поиск разных форм и ассоциаций, стандартная рутина на проекте
@user-pooser164 Жыл бұрын
@@UPROCK мне кажется, эта рутина очень интересна, я часто слышу от дизайнеров про интуитивность, но любое стилистическое решение можно пояснить до мелочей, поэтому все же очень хотелось бы, чтобы вы где-то описали свой творческий поиск
Alexey Bychkov: веб-дизайн и фриланс
Рет қаралды 44 М.
Дмитрий Варфоломеев
Рет қаралды 74 М.