Как думает арт-директор, когда рисует макет?!

🔥 Бесплатный курс по дизайну с бесплатной обратной связью: t.me/freeeducation_uprockbot
Как думает арт-директор, когда рисует макет?!
Евгений Кузьмин (CEO & Art-director студии UPROCK) делится своим опытом, рисует актуальный дизайн, и разбирает главные ошибки в UX/UI.
0:00 Вступление
0:24 Анализ исходного сайта
1:07 Первые варианты макета
3:49 Эксперименты с палитрами
4:06 Проработка каждого блока в отдельности
5:29 Проработка обложки
6:00 Проверка гипотез
7:40 Движение к финальному варианту
9:33 Финальные варианты цвета
10:50 Варианты по деталям блоков
12:13 Последние правки
12:52 Финальный вариант макета
13:24 Заключение
🚀 Ждём вас в школе 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

Пікірлер: 71

  • @UPROCK
    @UPROCK6 ай бұрын

    🔥 Бесплатный курс по дизайну с бесплатной обратной связью: t.me/freeeducation_uprockbot

  • @soplyamily
    @soplyamily Жыл бұрын

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

  • @UPROCK

    @UPROCK

    Жыл бұрын

    Да так и есть, дизайнеры часто путают дизайн с изобразительным искусством)

  • @UPROCK
    @UPROCK Жыл бұрын

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

  • @dmitriikulbaka1862

    @dmitriikulbaka1862

    Жыл бұрын

    Насчет музыки -- идеально, ненавязчиво и именно фоновая. Формат огонь! Для себя открыл концепцию работы -- сохранять шаг за шагом, не переписывая каждый раз с нуля, а внося правки в то что уже есть. Хотя для опытного дизайнера это и очевидная вещь.

  • @UPROCK

    @UPROCK

    Жыл бұрын

    @@dmitriikulbaka1862 спасибо большое за отзыв, значит пока оставлю так) И рад, что подтолкнул к новому подходу.

  • @user-os2un7jm1k

    @user-os2un7jm1k

    Жыл бұрын

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

  • @UPROCK

    @UPROCK

    Жыл бұрын

    @@user-os2un7jm1k Договорились!

  • @hannehai
    @hannehai Жыл бұрын

    Женя, прекрасный обзор живого примера! Благодарю!🙏 Я в восторге, словно отдохнула эти 14 минут! 💜Формат однозначно продолжать! Звук, музыка, анимация, красота! 👍😇😍

  • @UPROCK

    @UPROCK

    Жыл бұрын

    Класс, что изучение нового позволяет отдыхать)

  • @NikitaIshimbaev
    @NikitaIshimbaev Жыл бұрын

    Однозначно интересный формат, хочется видеть такие видео чаще) Удивило, как быстро перебрали такое большое кол-во вариантов 😅

  • @UPROCK

    @UPROCK

    Жыл бұрын

    Поверь, я сам удивился) думал видео выйдет на полчаса минимум. Но надо укладываться в формат ютуба 10-20 минут.

  • @marusyam2591
    @marusyam2591 Жыл бұрын

    Интересно! Понимаешь, как выстраивается идея и почему те или иные решения иногда не удачные. Спасибо 💚👍

  • @UPROCK

    @UPROCK

    Жыл бұрын

    Буду еще искать новые форматы!

  • @Elena_Shipovnik
    @Elena_Shipovnik Жыл бұрын

    Жень спасибо тебе что помогаешь нам развиваться, в такое тяжёлое время так помогает отвлечься....!!!!

  • @UPROCK

    @UPROCK

    Жыл бұрын

    Очень рад помочь, это наполняет меня смыслом.

  • @dooooors
    @dooooors Жыл бұрын

    формат очень крутой! очень ждем подобных видео разборов)

  • @UPROCK

    @UPROCK

    Жыл бұрын

    Класс, рад что формат нравится) Непременно буду делать!

  • @user-qi1ii8rr9o
    @user-qi1ii8rr9o Жыл бұрын

    Спасибо Женя! Полезные, емкие и познавательные видео! Класс 🙏😎

  • @UPROCK

    @UPROCK

    Жыл бұрын

  • @user-jf1bo5bc8p
    @user-jf1bo5bc8p Жыл бұрын

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

  • @UPROCK

    @UPROCK

    Жыл бұрын

    Спасибо большое)

  • @user-mv4rb2lz2y
    @user-mv4rb2lz2y Жыл бұрын

    Очень понравился формат! Теперь буду больше вводить экспериментов и не бояться отказываться от решений, которые казались изначально самыми лучшими)) 😅

  • @UPROCK

    @UPROCK

    Жыл бұрын

    Очень рад, что вдохновил тебя Юля)

  • @user-pu8mv9ps3s
    @user-pu8mv9ps3s Жыл бұрын

    Значит весь секрет в итерациях и арт-дирекшене. А я думаю, почему у меня всё так топорно...) Очень интересный формат. Ход мысли и житейский кейс, это просто к-к-комбо)

  • @UPROCK

    @UPROCK

    Жыл бұрын

    Да так и есть, хороший артдирекшн решает. В этом весь секрет обучения у меня школе дизайна.

  • @aysel_ays
    @aysel_ays Жыл бұрын

    Спасибо! Засыпаю с вашими разборами❤

  • @UPROCK

    @UPROCK

    Жыл бұрын

    Я "за" здоровый сон)

  • @talukov
    @talukov Жыл бұрын

    Очень интересно, спасибо!

  • @UPROCK

    @UPROCK

    Жыл бұрын

    Всегда пожалуйста, очень рад)

  • @atmanoum
    @atmanoum Жыл бұрын

    Интересно! Хорошо объясняешь логику при разработке дизайна. Я раньше всегда делал один вариант и в неё что-то менял, сейчас пересмотрю подход

  • @UPROCK

    @UPROCK

    Жыл бұрын

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

  • @inobdinabdurahmonov2718
    @inobdinabdurahmonov271811 ай бұрын

    Супер-крутой короткий и полезный видос 🤘

  • @UPROCK

    @UPROCK

    11 ай бұрын

    Спасибо🙏

  • @anastasiya_n
    @anastasiya_n Жыл бұрын

    посмотрела, как интереснейший короткометражный фильм! 🔥 Как очередное подтверждение тому, что хороший дизайн - это многократный перебор вариантов. У меня с генерированием таких вариантов всегда проблемы (я сейчас только учусь), ступор

  • @UPROCK

    @UPROCK

    Жыл бұрын

    Да хорошая работа - это много работы)

  • @user-oi2ul7on5i
    @user-oi2ul7on5i Жыл бұрын

    Привет, накидывай компрессор на дорожку голоса с пресетом под подкаст или вокал. Некоторые слоги тихо. + 100 к подаче будет как у джо рогана. Спасибо за ролики

  • @UPROCK

    @UPROCK

    Жыл бұрын

    Привет! Буду иметь в виду, попробую, спасибо!

  • @user-os2un7jm1k
    @user-os2un7jm1k Жыл бұрын

    Здравствуйте :) Спасибо, что показали все варианты макетов Скажите, по поводу блока "Услуги" в финальной версии, кликнув на услугу, что будет? Справа поменяется картинка и снизу появится описание или пользователь перейдет на другую страницу? По дефолту картинка справа от списка услуг - это просто картинка? Правильно? Или она относится к первой услуге? Не понятно, просто) По поводу цвета текста на светло сером фоне (например, блок Услуги) Сорри, уже под прошлым видео писала. Вы пояснили, но я не понимаю. Не подумайте, что я душнила :) Ну правда шрифт, именно прописной, мне не четко виден, Объясню чего пристала Мне давали тестовое - темную тему для приложения, Я сделала на своем низком уровне на темно-синем фоне светло- оранжевые буквы, но плохо подобрала контрастность. Дизайнер, который проверял макет закидал меня помидорами. И велел впредь проверять контраст и доступность согласно требованиям WCAG. Поэтому вот я и проверяю теперь) Я понимаю, что сейчас новый взгляд на сочетание цветов. Мне очень нравятся ваши решения на Бехансе, там есть много нестандартного) Пару раз замечала, что если брать необычное сочитание фона и фришта и подгонять под требования WCAG, то фон или максимально темный или максимально светлый получается, а шрифт наобарот Можете пояснить за эту тему? или Может не надо загоняться сильно по этому поводу?

  • @UPROCK

    @UPROCK

    Жыл бұрын

    Привет! При клике на услугу происходит переход на страницу с подробной информацией о самой услуге / либо на поп-ап. По дефолту изображение справа - просто абстрактная картинка из их портфолио. При наведении на услугу из списка она меняется на соответствующую. В статичном макете это всё может быть не так очевидно, а на реальном сайте будет очень логично и просто. По поводу прописаного шрифта: действительно, можно подобрать и получше. Пойми правильно, я ограничен по времени с этими видео, и дело даже не в том, сколько времени можно уделить самому макету, сколько во времени, которое нужно, чтобы свежим взглядом оценить. Я удовлетворён этим шрифтом процентов на 80. То есть он в принципе нормальный, но можно ли найти лучше? Да, можно. Про дизайнера, который тебя заклевал - как с рабами в Риме, нет хуже хозяина, чем недавний раб: нет хуже дизайнера чем недавний джун, которого все клевали, похоже что ситуация именно такая) Поправить контрастность вообще несложно, когда у тебя все цвета в стилях, зачем делать из этого проблему?

  • @lidiiarysich4710
    @lidiiarysich4710 Жыл бұрын

    Понравился больше понравился светло-серый вариант. Выглядит чище что ли, и текст хорошо считывается. Ну и да, обзор интересный )

  • @UPROCK

    @UPROCK

    Жыл бұрын

    Специально для вас оставил все варианты, чтобы вы могли выбрать себе любой.

  • @BobPagespb
    @BobPagespb Жыл бұрын

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

  • @UPROCK

    @UPROCK

    Жыл бұрын

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

  • @Milena_makeit
    @Milena_makeit Жыл бұрын

    Спасибо большое за обзор! Сколько уходит времени примерно в школе на создание одного проекта?

  • @UPROCK

    @UPROCK

    Жыл бұрын

    Если чистого времени, то 40 часов, как реальный проект. А так распределяйте время, как вам удобно.

  • @Tanatopraktik
    @Tanatopraktik Жыл бұрын

    Круто

  • @UPROCK

    @UPROCK

    Жыл бұрын

    Спасибо🙏

  • @dinmolchanov1950
    @dinmolchanov1950 Жыл бұрын

    Красиво конечно, но не без нюансов) 11:06 четырёхзначные цифры не отбиваются пробелом (вы же не отбиваете год, например 2 022), пятизначные и далее конечно да. По финальному макету: 1) В телефоне код страны не обрамляется скобками (это было раньше, когда код было вводить необязательно) 2) В форме "получить консультацию" зачем делать такую "колбасу" из кнопки? Всё равно в мобильной версии она ужмётся. 3) В блоке "проекты", если будет больше 5-ти преимуществ, как это будет выглядеть? 4) В блоке "портфолио" вообще не читается слайдер, а в моб. версии это как будет, там по формату поместится только одна фотка и стрелка? 5) В блоке "отзывы" ну тут верстальщик вам передаст большой "привет" (круг, в круге), ну такое себе решение ради креатива, хотя смело) 6) Внизу всё таки маркетолог обязательно скажет добавить CTA, зуб даю) В целом: такой сайт непонятен, как он будет корректироваться, если вносят дополнения, и как это сделать максимально для выгоды компании? Как он выглядит в адаптиве и как перестроятся все блоки с этим учётом? Но всё равно спасибо вам за контент, для начинающих дизайнеров это очень ценно!

  • @UPROCK

    @UPROCK

    Жыл бұрын

    Спасибо за правки, и рад, что вы не мой клиент) Кстати самые худшие клиенты, это дизайнеры

  • @konstantin_davydov
    @konstantin_davydov Жыл бұрын

    🔥🔥🔥

  • @UPROCK

    @UPROCK

    Жыл бұрын

    👐👐👐

  • @yuliiakochurovski5891
    @yuliiakochurovski5891 Жыл бұрын

    Я успокоилась немного ))) Пока делала самый первый свой лендинг в рамках учебы перебрала 1000 **** 0000 вариантов. Видимо это правильно и хорошо, что так делала...

  • @UPROCK

    @UPROCK

    Жыл бұрын

    Да так правильно, главное не увлекаться)

  • @ScreaminPND
    @ScreaminPND Жыл бұрын

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

  • @UPROCK

    @UPROCK

    Жыл бұрын

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

  • @ScreaminPND

    @ScreaminPND

    Жыл бұрын

    @@UPROCK понял, ознакомлюсь, спасибо

  • @UPROCK

    @UPROCK

    Жыл бұрын

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

  • @alex_pivko
    @alex_pivko Жыл бұрын

    Люди все так восхищены этим видео. Не соглашусь именно по дизайну. Как преподносится идея и сам формат - великолепно. Тематика сад мечты. Вариант который был изначально конечно сильно переиграл эту тематику. Шрифт, картинки, цвета. Вся типографика и графика ушли в рисовалку. Итоговый вариант ваш наоборот сильно ушел в проектирование и в процесс. Как будто между первым вариантом и вашим итоговым не нашлось золотой середины. Кто является ЦА сайта сад мечты ? Мне кажется женщины в основном. Делать серый фон было мне кажется жутковато. светлый вариант лучше но нам нем тоже есть свои странные решения именно если смотреть со стороны пользователя. Короче у меня много вопросов которые я хотел бы обсудить но не на уровне спора а на уровне реально беседы. У меня нет опыта большого в дизайне, я совсем новичок. Но я ухватил твою, Женя, идею - дизайн должен быть реализован для конкретного пользователя, через проведение исследований. В данной работе мне кажется в точку не попали. Сейчас коплю деньги на обучение в вашей студии, потому что я увлечен веб дизайном и мне нравится думать о том как дизайн влияет на пользователя. И чувствую что ваша школа поможет мне раскрыться. Планирую тариф от 0 до мидл +. Ждите в рядах учеников как смогу всю сумму накопить )) И спасибо Женя за твою работу. Благодаря твоим видео я прошел кризис когда уже хотел бросить веб дизайн и благодаря твоей философии в дизайне я понял что мне просто нужен апгрейд.

  • @UPROCK

    @UPROCK

    Жыл бұрын

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

  • @alex_pivko

    @alex_pivko

    Жыл бұрын

    @@UPROCK полностью согласен, что не бывает ничего идеального в мире. И даже хорошо что можно увидеть и очень хорошее и просто хорошее а иногда даже что не нравится. Это же значит что канал и автор честно все показывает

  • @BaxtiyorjonSobirjonov
    @BaxtiyorjonSobirjonov Жыл бұрын

    To be Continued...

  • @UPROCK

    @UPROCK

    Жыл бұрын

    Еще адаптив будем рисовать по этому макету)

  • @vladimirtochanenko482
    @vladimirtochanenko4827 ай бұрын

    Формат видео интересный но слишком много внимания подбора цвета на всех этапах. Видать дизайнеру нравится играть с цветом, а не шрифтами.)) Курсив в заголовках я б не использовал, по лает излишней динамики а сад вообще не про динамику )

  • @UPROCK

    @UPROCK

    7 ай бұрын

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

  • @umxaten6326
    @umxaten6326 Жыл бұрын

    Чето не понял. Тут header не несёт информации, тайтлы не в геометрии, а информативность за счёт иконок совершенно неразборчивых страдает. Я правильно понимаю,что весь свой максимализм в жопу надо запихать и слушать заказчика? (Сам вообще новичок, но глаз алмаз)

  • @UPROCK

    @UPROCK

    Жыл бұрын

    Привет, прости немного не понял про хедер, тайтл и тд. Поясни пожалуйста с радостью отвечу. По поводу максимализма его в любом случае нужно придержать) Но и клиента не нужно во всем слушать, нужно понять его пожелания и цели, а вот решение уже за тобой.

  • @modernodj
    @modernodj Жыл бұрын

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

  • @UPROCK

    @UPROCK

    Жыл бұрын

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

Келесі