Рисуем сайт по реальному ТЗ с комментариями арт-директора

🔥 Бесплатный курс по дизайну с бесплатной обратной связью: freeschool.uprock.ru/
Рисуем сайт по реальному ТЗ с комментариями арт-директора
Евгений Кузьмин (CEO & Art-director студии UPROCK) делится своим опытом, рисует актуальный дизайн, и разбирает главные ошибки в UX/UI.
0:00 Вступление
0:16 Анализ исходного сайта
0:46 Сетка
2:06 Навигация
2:41 Обложка
3:12 Блок "наша компания"
4:47 Блок "Что мы делаем"
6:09 "Почему выгодно сотрудничать с нами"
7:36 Анализ сетки и композиции первых блоков
8:23 "Для кого необходим предрейсовый осмотр?"
9:23 Блок с формой
10:22 Анализ общего ритма и визуальной логики
11:19 Этапы работ
12:12 МЕДПУНКТ
15:04 Лицензии
15:20 Список визуальных правил
16:06 Лицензии (продолжение)
16:30 Блок с CTA
16:45 Подвал
16:54 Результат
17:17 Заключение
🚀 Ждём вас в школе 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]

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

[@user-mm2jy8wt5m]

С нетерпением жду каждый выпуск этой рубрики. Как всегда супер!)

[@UPROCK]

Очень рад, что нравится)

[@and12656]

Мне очень нравится такой формат) Все очень структурированно. Еще мне нравятся темы, очень скользкие, я бы сказал даже не самые приятные для дизайнера) Очень хорошо прокачивает насмотренность) Большое спасибо

[@UPROCK]

Да хочу на личном примере показать, что можно делать хорошо, если захочешь)

[@anastasiabezzubova1496]

Боже мой, Женя! Это слишком классно. Рубрика - огонь, потому что, нам, рядовым дизайнерам всегда кажется, что круто можно сделать только если контент крутой. А ты развеиваешь мифы. Решение с фотографией пункта! Спасибо за твою работу!

[@UPROCK]

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

[@Oleg194734]

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

[@UPROCK]

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

[@user-sf5fx9eh2x]

Самое долгожданное видео недели - новое видео этой рубрики :)

[@alinadenshchikova1481]

Очень жду данные выпуски. Это огонь!!)) Спасибо!

[@UPROCK]

Буду делать их регулярно!

[@user-cr3ul2wm1t]

Лучшие! Не останавливайтесь с таким контентом.

[@UPROCK]

Буду продолжать!

[@max_whoareyou7926]

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

[@UPROCK]

Ради этого и делаю свои видео)

[@ekaterinagoncharuk5666]

Женя, вы мой сенсей в мире дизайна!

[@UPROCK]

Да прибудет с тобой сила, Катя)

[@user-qi1ii8rr9o]

Женя рубрика полезная и познавательная, спасибо вам! И спасибо за все старания 🙏😎

[@UPROCK]

Пожалуйста🙏

[@UPROCK]

Продолжим нашу рубрику по повышению чеков ваших дизайнов. Как вам видео, у меня получается вас радовать регулярно?) Для тех, кто удивляется стоимости наших проектов, то поверьте, для студий это не самая большая стоимость. Если, что можете посмотреть цены и наше портфолио у нас на сайте www.agency.uprock.ru/

[@kasdekjh]

@@dotabuff5288 Вот ты упоротый)) покажите тогда что такое дизайн)) все что вы сказали это картинки, а не про дизайн) Это редактирование картинок) Как таких людей свет еще носит. Рисуйте и дальше свой "мегаофигенный" никому ненужный дизайн. Эксперт нашелся)

[@Alexey_Gorbachev]

@@dotabuff5288 Ты сейчас рассказал про графический дизайн, а не UX\UI. А дизайн у Жени охуенен, рад до усрачки, что учусь у него.

[@UPROCK]

@@Alexey_Gorbachev спасибо, бро)

[@alexmalkovart]

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

[@UPROCK]

Мне тоже она нравится, но редко, когда ее представляют интересно

[@alexmalkovart]

Жду следующее видео. Комментарии просто чудо)))

[@UPROCK]

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

[@alexmalkovart]

@@UPROCK Евгений, мне иногда кажется, что люди не всегда правильно понимают, что такое дизайн. Хороший дизайнер, он больше хороший инженер. А по поводу профессионализма, моё мнение такое. Профессионал в отличие от любителя получает деньги за работу, а уровень дохода зависит от мастерства. Рассуждать, по принципу "мне не нравится" это такое себе дело))) возможно у критикующего человека просто вкус плохой), а где простите конкретика, где это самое место которое не нравится.

[@UPROCK]

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

[@dariamaiorkina9557]

Обожаю свою работу. Можно часами спорить с коллегами о том что правильно, а что неправильно, и в итоге так и не сойтись во мнениях, как и тут в коментах)) Мне как душной и жадной до споров личности только в кайф) Странно, что кого-то удивляет, что такой сайт может 250 стоить. Заказчики до сих пор за аутдейтед русский беханс 100+ готовы платить. Дизы с опытом "сегодня лет" иногда зарабатывают больше меня, просто потому что язык подвешен на продажу своих услуг, но у них в макетах куча ошибок фундаментальных. Главное не завидовать, а учиться вежливо убеждать заказчиков, что лыжи едут, и едут куда надо...)

[@UPROCK]

Легко обосновывать свои решения, если в них заложена сильная аргументационная база.

[@lidiiarysich4710]

А скажите пожалуйста, почему такое большое расстояние от "Для кого необходим осмотр?" и остальным текстом?

[@UPROCK]

Привет, в видео рассказал. Могу добавить, что за счет свободного пространства, на самом деле смог дополнительно выделить этот текст.

[@user-mv4rb2lz2y]

Женя, сделайте пожалуйста на этот концепт такой же разбор по этапам работы)) Как «Сад мечты»)) - очень интересно будет прочувствовать, как формировалась эта идея)

[@UPROCK]

Попробую, просто не уверен, что дизайнер сохранил все варианты, хотя я постоянно за это ругаю всех)

[@user-vi1kn3ex2b]

Спасибо за видео! Для меня пока такой дизайн выглядит спорным (например сильно смущают отступы между блоками), но я люблю смотреть на ваши нестандартные решения, уже очень хочу к вам на обучение

[@UPROCK]

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

[@user-jp3kc1wx6f]

А почему на некоторых экранах игнорируются боковые направляющие? Например, фото с девушкой на всю ширину экрана. Разве не должен быть отступ от края везде 40px?

[@UPROCK]

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

[@tupakiso4ka]

афигенно как и всегда

[@UPROCK]

Спасибо😊

[@dambaradnaev6533]

Орнул с медпункта

[@UPROCK]

)

[@thecoolestpersononyt]

Как же круууутооо))

[@UPROCK]

Спасибо, Амина)

[@abdumalikabduvakhidov]

Женя а почему цвет карточек лицензий не сделал белым? на сером фоне что бы выделить

[@abdumalikabduvakhidov]

В видео нашел ответ Спасибо)) (ставил на паузу)

[@UPROCK]

@@abdumalikabduvakhidov как раз писал ответ, рад что решился вопрос)

[@abdumalikabduvakhidov]

@@UPROCK Раньше были ролики по этапно разбирающие этапы, их больше не будет?

[@UPROCK]

@@abdumalikabduvakhidov привет сегодня выложил только новый ролик в таком формате. Посмотри пожалуйста, это то? Плюс еще завел отдельный канал, где студенты рассказывают о своих проектах www.youtube.com/@uprockclan тоже думаю может закрыть подобный вопрос вобщем пиши это решит твой запрос или нет

[@abdumalikabduvakhidov]

@@UPROCK отлично то что ждал

[@Tafratov]

Почему все макеты в подобных видосах отрисовываются в ручную? без Auto-layout и тд

[@UPROCK]

Чтобы упростить сам процесс съемки скринкаста. Суть видео рассказать логику дизайна, а не показать правильный процесс. А так да конечно, надо использовать автолейуты, компоненты и тд.

[@user-qq2kv7so7z]

Добрый день! Какой програмой пользуетесь?

[@UPROCK]

Figma

[@Elena_Shipovnik]

Класс Жень!!! Скорей бы новый выпуск)))

[@UPROCK]

Завтра разберем дизайн-процесс)

[@edwardgrom2207]

Отличная рубрика, мне очень нравится . Есть вопрос, небольшой, какие пропорции картинок(высота и ширина) в вебе стоит использовать , чтобы смотрелось эстетично?

[@UPROCK]

Привет! Рад, что рубрика заходит) Пропорции можно использовать те, что ближе к соотношению самого экрана, 16:9. Но вообще это не обязательное правило и всегда нужно смотреть по ситуации

[@user-vz8vm4ee9v]

Добрый день!Классная работа получилась.А где в скачали такие иконки?

[@UPROCK]

Салют! Спасибо🙏 Найти любые иконки и кучу других полезных материалов можно у меня на www.baza.uprock.ru/ )

[@user-cv4pj1ul7h]

Женя, нравятся ваши разборы.На данный момент закончила ваш курс по мобилкам. Прохожу собесы, в основном запросы на личные кабинеты, СРМ, интернет-магазин стройматериалов и тд)). Можно ли что-то такое разобрать?

[@UPROCK]

Салют, Дарья! да, посмотрю что получится сделать в ближайшее время, заказ принят👍

[@Michael_Faze]

Без презентации такое не продать, так что если такой дизайн смогли ребята Апрок реально продать, то снимаю шляпу, и прошу снять продолжение как продать презентацию сайта. На самом деле тут фишка в том что если смотреть видео сначала и до конца сайт кажется сносным и есть какая то логика, но если поставить на конец на итоговый результат, результат кажется ужасным. Вообщем хороший эксперемент за 250 тысяч))) хоть я и не знаю как это продать, но тут дело во мне. Возможно это и была задумака Жени, и он спецаильно сделал такой дизайн с ошибками чтобы вызвать хейт , продвигая свой канал))) вообщем Успеха тебе. Отличный формат

[@UPROCK]

Пришли пожалуйста примеры сайтов, которые ты считаешь не ужасным.

[@user-tc6ub6lf8e]

Евгений, спасибо за видео. Очень приятно вас слушать. Никакого снобизма. Как по мне, очень теплое отношение к подписчикам). Вопрос немного не по теме ролика. Т.к. сайты заказывает бизнес, какой ваш прогноз на будущее профессии в России? Учитывая нынешнюю ситуацию.

[@UPROCK]

Думаю будет все в порядке, это не первый кризис. IT самая развивающася индустрия, которая себя еще далеко не исчерпала.

[@kayodedesign]

Thanks for making the video. Is it possible to enable English captions on your videos? Started learning a bit of the Russian language.

[@UPROCK]

I will definitely start duplicating all my content in English at the beginning of the year, as well as these videos too. I will be glad if you subscribe to my English channel. And from next year I will update my training program to English. And I will be glad if you manage to pass my training

[@kayodedesign]

@@UPROCK @UPROCK That's an exciting idea! I'll definitely subscribe to your English channel. Yes, I actually stumbled upon your training first. Even though I don't understand the Russian language fully, I'm able to pick up a few valuables from your KZbin videos. I really like how you manage your experience with clients and how you approach work. It helps me! I can't wait for this new development to take effect. Doing this will help your teachings reach a lot English of speakers, not just people from the US or UK, but English speakers from Latin America, Africa and Asia countries. I already turned on KZbin notification for your channel. Thank you once again! You rock 🤘 PS: Leaving another comment here for the KZbin algorithm

[@katni98]

Очень стильный дизайн для такого действительно не самого "симпатичного" направления - медицины! Круто) Единственное, что хочу уточнить, есть какое-то правило о том, какое расстояние должно быть между смысловыми блоками? Например, вот после "линейки" идет больше пространства, чем после фото девушки

[@UPROCK]

@@sasharello дриббл не лучшее место искать референсы.

[@ladalarina8315]

@@UPROCK А какое лучшее? Расскажите.

[@UPROCK]

@@ladalarina8315 беханс и эвордс если всю визуалку делить пополам, то есть не использовать все решения.

[@ladalarina8315]

@@UPROCK Спасибо.

[@user-mp6cu7os1p]

Ждемс видео про адаптив)

[@UPROCK]

Скоро!

[@user-fv6dz7ug9x]

Очень жду люблю ваши разборы. Вёрстка всегда нестандартная.

[@UPROCK]

Спасибо, Мери)

[@Sashad2003]

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

[@UPROCK]

Александр вы вежливо написали, поэтому не подумайте, что я триггерюсь на ваш вопрос, мой ответ: "Уточните, почему вы уверены, что нужны отступы. Обратите внимание, многим понравился редизайн, в том числе и мне. Возможно, ли что вы ошибаетесь? К сожалению, у меня нет формулы, где я могу вам наглядно показать, что эти расстояния достаточны, чтобы визуально разбивать на смысловые блоки. Но исходя из 20-и летнего опыта анализа сайтов после запуска, я уверен, что все сделано в общих чертах правильно."

[@Sashad2003]

@UPROCK У меня опыта не меньше и по этому позволил себе прокомментировать вашу работу, но тут дело не в опыте и не в том что написали подписчики. Большинство людей совершенно не понимают в дизайне и по этому хорошие или плохие отзывы от не профессионалов не играют для меня роли. Что касается вкуса, у всех он разный. Кто то любит рамки, кто то не любит... А вот в плане дизайна есть правила, придерживаясь которых работа становится на порядок лучше. Если идея создать блоки полностью без отступов, отлично, но тогда их не должно быть вообще... Но если таковые имеются, они должны получить достаточно места/уважения и тем самым подчёркивать важные элементы. Если хотите, оставьте ссылку на фигму и я смогу показать вам что имею в виду.

[@UPROCK]

@@Sashad2003 вы очень адекватно написали первый комментарий и у меня не было задачи вас задеть. Это на всякий случай пишу вам. По вашему второму сообщению ответ ниже: 1. Других пользователей упомянул, потому что на текущий момент у нас нет другой фокус группы. Людям понравилось и это потенциальные пользователи. Но да это только косвенное доказательство. 2. По поводу опыта упомянул в контексте того, что пробывал подобные решения и на реальных пользователях все было хорошо, на конверсию негативно эти решения не влияли. 3. По поводу отказа от отступов на мой взгляд не обязательно все время придерживаться одного правила, его можно и нужно адаптировать под конкретный контент в блоке, что я и делал. Думаю вы поддержите меня, что цель видео показать именно мой подход, если какие-то нюансы дизайна вы сделали по другому, то это ваше право и ваш подход. И я уважаю его, более чем уверен с вашим подходом получился бы не менее интересный проект. Думаю в этом и прелесть дизайна, что каждый опытный дизайнер может показать свое уникальное решение, которое одинаково качественно решает задачу. В этом и прелесть изучения разных подходов, посмотреть, а как можно было бы по другому?

[@user-sk7gn7rs3s]

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

[@UPROCK]

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

[@happy_lion]

Классный макет!

[@UPROCK]

Спасибо!

[@yulliaospishcheva475]

Да где вы берете эти картинки...

[@UPROCK]

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

[@user-nv5tv5ld5q]

@@UPROCK по какому принципу вы делаете сетку? на глаз? или как

[@eugennaumov1860]

лайк!

[@UPROCK]

И тебе тоже)

[@dinmolchanov1950]

Круто, но! 1) Почему встречает нас фото фонендоскопа?) Это "клише" медицины, особенно прикольно наблюдать этот инструмент в сайтах о стоматологии (не у вас). 2) Если хотите показать в декоративном оформлении "мерные риски", то можно было б добавить их немного больше по кол-ву (взять за пример любой шприц), они не так ярко выражены, но дробят более порционно, а акцентно выделить именно как есть сейчас, тогда этот графический приём будет считаться более явно. Опять же вопрос, как это будет читаться в моб версии (может сбоку?)). З.Ы. Я очень уважаю школу uprock, но в данной рубрике очень много вопросов к сайтостроению, как к инструменту маркетинга

[@UPROCK]

Вы можете использовать все что угодно вместо фонендоскопа. Везде ставить мерные риски не панацея. Просто хотелось сделать на контрасте с округлыми краями. Мобильную версию покажу на днях.

[@dinmolchanov1950]

​@@UPROCK не везде мерные риски, я имел в виду | _ _ _ _ | такие темы)

[@user-sf5si4hg4v]

А Женя то - приколист)

[@UPROCK]

Что есть то есть 😉

[@user-ti8fo7vt3l]

А разве можно обрезать фото девушки по середине головы?

[@UPROCK]

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

[@kote2120]

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

[@UPROCK]

Стараюсь, прислушиваться к вашим комментариям😊

[@daryashkatimka7814]

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

[@UPROCK]

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

[@daryashkatimka7814]

@@UPROCK добрый день, да, возможно Вы правы, учту это

[@UPROCK]

@@daryashkatimka7814 Спасибо большое за понимание🙏

[@hanzohasashi5014]

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

[@UPROCK]

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

[@oiboimytop1061]

все норм в целом, но МЕДПУНКТ смотрится как-то совсем уж инородно, как по мне. Такое ощущение, что на этом блоке CSS отключилось, и все встало, как встало. А так дизайн хороший

[@UPROCK]

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

[@paulgromov]

А сетка где? Разметка и сетка это разные вещи. А чем отличается экран ноута, от обычного монитора? разрешением в процентах системы? забавно Фотографии лучше работают, чем "пресные иконки", которые сложно идентифицировать Результат: Отсутствует целостность. Нет единого стиля. путь пользователя хаотичен и не продуман. Визуально, также выглядит, как мусорка. А повторяющийся текст "что мы делаем" это дизайн ради дизайна. При просмотре 1к1 это будет вырви глаз и оторвет все внимание от "классных иконок". Заголовок + текст это необходимая вещь для клиента, которую читают. было интересно. Спасибо за видео

[@UPROCK]

Спасибо за комментарий

[@vitallesnyk451]

Так особых изменений не внесены ,такой же скучный клон получился . Или я ничего не понимаю и дизайнер тонкой души человек который так видит ?!

[@UPROCK]

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

[@pet_lover_channel]

Где найти таких платежеспособных и лояльных клиентосов? макет супер унылый вышел. Точно ошибки с ноликом лишним в цене нет?

[@Tafratov]

А что по-вашему не унылый дизайн? Хотелось бы взглянуть на ваше портфолио или макеты

[@NoName-oh3oq]

Давай покажи свое портфолио, ганстер, посмотрим

[@UPROCK]

Завидовать не красиво

[@pet_lover_channel]

@@Tafratov а ты свое покажешь?

[@pet_lover_channel]

@@NoName-oh3oq покажешь свое, ковбой?