Рисуем стильный сайт для игровой студии с арт-директором [Re-Design]

Поділитися
Вставка
  • Опубліковано 6 чер 2024
  • 🔥 Бесплатный курс по дизайну с бесплатной обратной связью: t.me/freeeducation_uprockbot
    Рисуем стильный сайт для игровой студии с арт-директором [Re-Design]
    Евгений Кузьмин (CEO & Art-director студии UPROCK) делится своим опытом, рисует актуальный дизайн, и разбирает главные ошибки в UX/UI.
    0:00 Вступление
    0:17 До и после
    0:30 Анализ текущего сайта
    1:43 Сетка
    2:31 Навигация
    3:36 Обложка
    5:17 Блок "Надёжность и стабильность"
    8:25 Блок с портфолио
    10:45 Как движется взгляд пользователя
    12:23 Блок "Как мы работаем"
    13:08 Блок с отзывами и клиентами
    13:25 Ход повествования
    14:08 Блок со статьями
    14:44 CTA-кнопка и подвал
    15:35 Анализ сетки готового макета
    16:14 Сравнение со старым сайтом
    17:07 Варианты дизайна
    17:51 Завершение
    🚀 Ждём вас в школе 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

КОМЕНТАРІ • 180

  • @UPROCK
    @UPROCK  Рік тому +40

    🔥 Бесплатный курс по дизайну с бесплатной обратной связью: t.me/freeeducation_uprockbot
    Что может быть лучше для завершения недели, чем еще одна практика по дизайну от меня))
    Как вам проект?

    • @max_whoareyou7926
      @max_whoareyou7926 Рік тому +2

      Класс жду следующее видео)

    • @UPROCK
      @UPROCK  Рік тому +4

      @@max_whoareyou7926 Скоро выложу!

    • @user-xq3ri8cm3e
      @user-xq3ri8cm3e Рік тому

      Пушка!

    • @dance_and_loveyourself
      @dance_and_loveyourself Рік тому

      Огнище

    • @user-vw5tc1ch3c
      @user-vw5tc1ch3c Рік тому

      Очень приятно и интересно смотреть ваши видео. Рад, что учился и учусь в вашей школе! Невероятно крутые, топ! ❤

  • @anastasiya_n
    @anastasiya_n Рік тому +16

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

    • @UPROCK
      @UPROCK  Рік тому +3

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

  • @radjivbriya5417
    @radjivbriya5417 Рік тому

    Спасибо Женя! Понятно, интуитивно, без воды. Приятно смотреть и вникать в суть.

    • @UPROCK
      @UPROCK  Рік тому

      Рад, что нравится формат!

  • @aleksandrsolomonov9042
    @aleksandrsolomonov9042 Рік тому

    Зашло! Пояснения процесса - отдельное мастерство 👍

    • @UPROCK
      @UPROCK  Рік тому

      Супер! Рад что зашло) Надеюсь, со временем ваш дизайн будет не менее обоснованным)

  • @antiswag
    @antiswag Рік тому +7

    Как всегда на высоте!)
    Приятные и плавные анимации самого видео, современный и привлекающий дизайн макета, + пошаговое объяснение каждого блока.
    Спасибо, что ведешь ютуб. Очень сильно в свое время помог не промахнуться в выборе школы для обучения. Переживал в те времена попасть в неумелые руки и заплатить за общую информацию, делая посредственные работы. Благо это все обошлось и вот уже я во всю делаю корпоративный сайт :)
    Еще раз спасибо тебе и твоим крутым кураторам, что помогают развиваться в этой замечательной сфере!)

    • @UPROCK
      @UPROCK  Рік тому +1

      Очень рад, бро, что смог помочь тебе и ты не ошибся с выбором. Обещаю, буду всегда развивать школу и давать только лучшие знания!

  • @dana.zevaeva
    @dana.zevaeva Рік тому

    Очень круто и понятно, Женя, спасибо за рубрику!))

    • @UPROCK
      @UPROCK  Рік тому

      Рад, что рубрика нравится) Пожалуйста!

  • @maxvieru2730
    @maxvieru2730 Рік тому +3

    Очень классный формат! Побольше бы такого :) Помогает понять как думает опытный дизайнер и прокачивает "обоснованость"🔥

    • @UPROCK
      @UPROCK  Рік тому

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

  • @user-mv4rb2lz2y
    @user-mv4rb2lz2y Рік тому +8

    Женя, очень понравился твой ре-дизайн))
    Интересно, через какое время эти ребята изменят свой сайт))😊
    Очень жду процесс создания, прошлый ролик из этой рубрики очень зашёл 🙌🏼

    • @UPROCK
      @UPROCK  Рік тому +2

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

  • @serrgibio
    @serrgibio Рік тому

    Женя, ты красавчик! Продолжай радовать талантливыми идеями!

    • @UPROCK
      @UPROCK  Рік тому

      Спасибо! Буду продолжать двигаться дальше)

  • @GFeest_
    @GFeest_ Рік тому +1

    Обалденное видео. Спасибо!

    • @UPROCK
      @UPROCK  Рік тому

      Пожалуйста)

  • @edwardgrom2207
    @edwardgrom2207 Рік тому +1

    Мне очень понравилось, большое спасибо за разбор реального проекта !!!

    • @UPROCK
      @UPROCK  Рік тому

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

  • @user-tp6we6db8s
    @user-tp6we6db8s Рік тому

    Редизайн, подача материала - просто бомба, Uprock лучшие!

    • @UPROCK
      @UPROCK  Рік тому

      Спасибо, Дарья)

  • @anastasiami621
    @anastasiami621 Рік тому

    обожаю😂❤‍🔥офигенный формат

    • @UPROCK
      @UPROCK  Рік тому

      Спасибо) Очень рад, что формат нравится)

  • @user-kc6cs9vo8b
    @user-kc6cs9vo8b Рік тому

    Спасибо большое! Очень крутой разбор

    • @UPROCK
      @UPROCK  Рік тому

      Пожалуйста) Рад, что видео нравится

  • @tommyshelby8122
    @tommyshelby8122 Рік тому +5

    Женя, каждый день смотрю твои видео и балдею с каждого проекта
    Очень хотелось бы увидеть ролик, где ты рассказываешь подробнее про работу с типографикой

    • @yuliiakochurovski5891
      @yuliiakochurovski5891 Рік тому +1

      И мне хочется увидеть. Я тоже каждый день смотрю. Все повторять пытаюсь

    • @UPROCK
      @UPROCK  Рік тому

      Посмотри пожалуйста эти ролики, возможно они закроют этот вопрос: ua-cam.com/video/MulF0MG0VdU/v-deo.html ua-cam.com/video/3fqJRH-TqCs/v-deo.html

    • @tommyshelby8122
      @tommyshelby8122 Рік тому

      @@UPROCK я их смотрел) я имел ввиду на конкретных проектах, как определять оптимальные размеры для стилей
      Неужели на глаз?))

    • @UPROCK
      @UPROCK  Рік тому +1

      @@tommyshelby8122 Да, на самом деле нужно постоянно перебирать множество вариантов, чтобы по итогу выбрать самый оптимальный. В начале пути тебе помогает арт-дир (или как в моей школе, куратор), чтобы "откалибровать" свое понимание того, что нужно пользователю. Фактически тебе нужно развить вкус и эмпатию, а потом ты сам сможешь подбирать самые безумные, но эффективные решения)

  • @georgybakharev4645
    @georgybakharev4645 Рік тому

    Кайф. Я хочу также научиться защищать свои дизайн-решения)

    • @UPROCK
      @UPROCK  Рік тому

      Если будешь учиться у меня - обещаю, что научишься, у нас даже есть специальный блок для презентаций) Можешь посмотреть здесь www.youtube.com/@uprockclan

  • @user-uf7zj1ux4r
    @user-uf7zj1ux4r Рік тому

    Давно смотрю Вас, очень крутые работы)
    Хотелось бы увидеть видео про сложные интерфейсы, по типу CRM или что-то близкое к этому :(
    Надеюсь такое видео выйдет))))))

    • @UPROCK
      @UPROCK  Рік тому

      Может быть тебе такое видео подойдет?
      ua-cam.com/video/KhS5soaWC-4/v-deo.html

  • @aliciajc4985
    @aliciajc4985 4 місяці тому

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

    • @UPROCK
      @UPROCK  4 місяці тому +1

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

    • @aliciajc4985
      @aliciajc4985 4 місяці тому

      Евгений, спасибо Вам за обратную связь! Скажите, пожалуйста, на примере этого дизайна, если заголовок, например h1/h2 меньше описания, не будет ли трудностей у гугл-поисковика? Надеюсь, нет). Уж очень крутые подходы! @@UPROCK

    • @UPROCK
      @UPROCK  3 місяці тому +1

      @@aliciajc4985 Пожалуйста🔥Очень рад) Нет, при грамотном подходе к верстке никаких проблем с индексированием такого сайта не возникнет

  • @555EMIL777
    @555EMIL777 Рік тому +7

    Визуал дичайший! Ещё нравится объяснение логики действий. Так становятся понятны причины видимого следствия. Спасибо за крутой ролик. Понравилась мысль про висячие предлоги и союзы, но я уже так научился и боюсь не смогу делать макеты иначе :)
    Ещё хотелось попросить видео о различии колонок и направляющих. Почему направляющие сместили колонки? И как это отразилось на последующей вёрстке?

    • @UPROCK
      @UPROCK  Рік тому +1

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

  • @juliaelynuya8729
    @juliaelynuya8729 Рік тому

    Просто огонь!!!

    • @UPROCK
      @UPROCK  Рік тому

      Спасибо)

  • @user-ks5jb6gw6n
    @user-ks5jb6gw6n Рік тому

    это очень круто! надеюсь, я тоже так научусь.

    • @UPROCK
      @UPROCK  Рік тому

      Обязательно!

  • @alexeismirnov4483
    @alexeismirnov4483 Рік тому

    Спасибо за видео, Евгений, как всегда - респект!
    Попутно замечу, как ученик школы Uprock, начинал учиться в Uprock и одновременно в Way up (Гаврилов)... там, как раз и учат вот тому дизайну, с первого кадра)))😄

    • @UPROCK
      @UPROCK  Рік тому

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

  • @atmanoum
    @atmanoum Рік тому +1

    С удовольствием посмотрел! Дизайн, как минимум, необычный) Заметил тут и у студии йоги, что в конце предложений точка то есть, то её нет

    • @UPROCK
      @UPROCK  Рік тому +1

      Привет! По-хорошему обычно точку не ставят. Пойми правильно, не хватает времени чтобы и сам проект нарисовать и видео смонтировать) на коммерческие поекты обычно выделяется больше времени

  • @VasiliiTIRELL
    @VasiliiTIRELL Рік тому

    бомба! рубрика топ

    • @UPROCK
      @UPROCK  Рік тому

      Супер) Рад, что зашло

  • @user-qi1ii8rr9o
    @user-qi1ii8rr9o Рік тому +3

    Спасибо Женя за видос. Шикарный дизайн, хороший рассказ) "Будь проще и люди подтянутся" хорошо знакомо) Да будет интересно посмотреть процесс, как пришли к этому дизайну! Отличный формат видео, полезный и познавательные 🙏. Женя а на основе чего выбирать сетку, и как определять какую? Спасибо 😎

    • @UPROCK
      @UPROCK  Рік тому +1

      Договорились скоро выложу!

  • @erickmetzplay
    @erickmetzplay Рік тому

    Огонь!

    • @UPROCK
      @UPROCK  Рік тому

      Спасибо!

  • @user-op1hp5sf2f
    @user-op1hp5sf2f Рік тому

    По-моему, это лучший редизайн, который пока делал Женя в рамках этой рубрики)

    • @UPROCK
      @UPROCK  Рік тому +1

      Лучший редизайн в рамках этой рубрики ПОКА)

  • @kasdekjh
    @kasdekjh Рік тому +2

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

    • @UPROCK
      @UPROCK  Рік тому +1

      Черно-желтый достаточно агрессивный/активный и поэтому сложный в работе.

  • @Adelina_88
    @Adelina_88 Рік тому +1

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

    • @UPROCK
      @UPROCK  Рік тому +1

      Привет, Алина! да, так и есть, в дизайне нет критичных правил) Есть только одно правило: чтобы дизайн был классным для пользователя и для бизнеса клиента

  • @user-rn1og5wd3n
    @user-rn1og5wd3n Рік тому +1

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

    • @UPROCK
      @UPROCK  Рік тому

      Да можно и анимацию, это уже на следующем этапе. Но как ты правильно заметил, можно нарисовать и в статике круто, чтобы без анимации все было хорошо.

  • @olegmercurian8510
    @olegmercurian8510 Рік тому

    Добрый день! А где на платформе "геткурс" смотреть это обновление по иллюстрациям, про которое в завершении видео говорил Евгений? Не видел такого обновления. Я приобрёл этот курс.

    • @UPROCK
      @UPROCK  Рік тому

      Привет! Уточни пожалуйста, о каких иллюстрациях речь? Если про курс, то он добавится в ближайшее время

    • @olegmercurian8510
      @olegmercurian8510 Рік тому

      @@UPROCK да, про включение в курс "От нуля до миддл". Кажется так называется

  • @eugennaumov1860
    @eugennaumov1860 Рік тому

    Лайк!

    • @UPROCK
      @UPROCK  Рік тому

      И тебе тоже сердечко!

  • @en_larionova
    @en_larionova Рік тому

    Видео очень классное и полезное, спасибо вам! Подскажите пожалуйста, какой шрифт в проекте использовался на заголовках?)

    • @UPROCK
      @UPROCK  Рік тому +1

      Пожалуйста, очень рад) Следите за оповещениями, впереди ещё много интересного)
      В проекте использовался шрифт Neue Machina

    • @en_larionova
      @en_larionova Рік тому

      @@UPROCK Спасибо вам большое за ответ! 😊

    • @UPROCK
      @UPROCK  Рік тому

      @@en_larionova Всегда пожалуйста)

  • @terekhova__l
    @terekhova__l Рік тому

    Женя, подскажи пожалуйста чем ты руководствуешься когда задаешь направляющие? 3 колонки у тебя будет или две или 4 и тд. Это зависит от задумки (сначала родился концепт и под него строишь сетку) или наооброт
    Никак не могу с этим разобраться.

    • @UPROCK
      @UPROCK  Рік тому +1

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

    • @terekhova__l
      @terekhova__l Рік тому

      @@UPROCK Спасибо за ответы🙏🏼

  • @user-dw3vy9to4y
    @user-dw3vy9to4y Рік тому

    Где глянуть сайты вживую
    которые вы сделали?

    • @UPROCK
      @UPROCK  Рік тому

      Привет! Можно посмотреть портфолио студии www.agency.uprock.ru/#projects

  • @user-ez5xl1zb3e
    @user-ez5xl1zb3e Рік тому

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

    • @UPROCK
      @UPROCK  Рік тому

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

  • @Freefire-op1hu
    @Freefire-op1hu Рік тому +1

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

    • @UPROCK
      @UPROCK  Рік тому

      Класс) очень рад что новый формат нравится)
      Да, можно отзеркалить

  • @sergejatcenko5539
    @sergejatcenko5539 Рік тому +1

    Видео супер, вся серия то что надо, прямо в точку, чтобы понять как и почему. Спасибо за подробные объяснения - почему это сделано именно вот так. От себя очень прошу добавить в объяснения про декор и вспомогательные элементы. Например, в этом проекте есть желтая подсветка в одном месте страницы, в блоке этапы работы, справа от кнопки "Оставить заявку". Для чего ее сделали? Почему именно тут? Почему этот элемент только один на странице? Как пришли к тому чтобы использовать именно этот элемент? Понимаю, что это удлинит время работы над видео, но если получится, будет очень здорово. Спасибо!

    • @UPROCK
      @UPROCK  Рік тому

      Привет! Жёлтая подсветка там нужна потому что сам по себе блок узкий и нужно было композиционно заполнить общее пространство. Почему именно в этом месте: чтобы сделать дополнительный акцент на кнопке "оставить заявку".
      Он не один на странице, в блоке с блогом точно такая же подсветка, только другого цвета, так как элементы справа сами по себе жёлтые и всё бы сливалось.
      Пришли к данному решению с помощью перебора большого количества вариантов: было ощущение что эти места пустоваты и для баланса в композиции нужно было их заполнить. Но на самом деле использование этих элементов не критично.

  • @katni98
    @katni98 Рік тому +1

    Какой стииль! Подскажите, пожалуйста, есть ли какое-то правило, по которому вы делаете отступы между смысловыми блоками? Есть какое-то определенное расстояние или это уже с опытом определятся "на глаз"? Мне просто всегда хочется добавить "воздуха" между блоками, но у вас очень все логично, органично и ёмко выглядит, что хочется тоже научиться такому же подходу) Буду рада ответу

    • @UPROCK
      @UPROCK  Рік тому +2

      Если не знаешь какие делать отступы - делай 150)
      А вообще мы делаем таким образом, чтобы визуально считывалось четкое разделение между разными областями. Иногда это можно реализовать за счет размещения в плашке, либо за счет цвета, как в этом макете. Одно могу сказать: без переборов большого количества вариантов не найти нужный. В этом и суть обучения, куратор будет давать много комментариев и правок, пока не "откалибруется" понимание)

  • @flockdot
    @flockdot Рік тому

    Хотелось бы посмотреть как будет сайт на мобилке. Как будет работать гигантский текст в первом блоке

    • @UPROCK
      @UPROCK  Рік тому +1

      Заказ принят) Макет уже нарисован, ролик по нему сделаем без проблем

  • @RemoveCompetitor
    @RemoveCompetitor Рік тому

    А есть этот сайт свёрстанный? Где его увидеть?

    • @UPROCK
      @UPROCK  Рік тому

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

  • @BabyBoom21
    @BabyBoom21 Рік тому

    Снимаю шляпу)

    • @UPROCK
      @UPROCK  Рік тому

      Взаимно)

  • @NaFUNya
    @NaFUNya Рік тому

    Евгений, Вы сказали, что те, кто сейчас купил Middle+ получает еще и навык в иллюстрации, если я купил 11 ноября, ко мне же тоже относится? И в каком разделе это будет, Сайты про? Спасибо большое, я сейчас на спринте лендинга и за 3 недели плодотворной работы чувствую, как во мне начала появляться структурность и понимание этапов разработки с точки зрения логики сайта, Спасибо за Вашу работу!

    • @UPROCK
      @UPROCK  Рік тому +1

      Привет! очень рад)
      Никому не говори, по большому секрету: у тебя тоже будут все обновления и бонусы)

  • @anastasiya_n
    @anastasiya_n Рік тому

    подскажите, пожалуйста, как называется шрифт, который здесь в заголовках используется?

    • @dmitryom
      @dmitryom Рік тому +1

      PP Neue Montreal

    • @anastasiya_n
      @anastasiya_n Рік тому

      @@dmitryom спасибо!

    • @UPROCK
      @UPROCK  Рік тому +1

      Спасибо, что помогли!

  • @konstantin_davydov
    @konstantin_davydov Рік тому

    Контейнер 1360px многовато будет, если разрешение монитора 1366px. Там ещё скролл-бар браузерный, отнимает где-то 15-17px.

    • @UPROCK
      @UPROCK  Рік тому

      Да, ты прав, лучше делать с запасом, 1320

  • @teploukhov_sad
    @teploukhov_sad Рік тому +1

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

    • @UPROCK
      @UPROCK  Рік тому +1

      Привет! Я имею в виду инструменты. В связи с тем, что стандартные колонки ограничивают нас в выборе решений для сетки, композиции и вообще давным давно устарела, для обозначения сетки на сайте я пользуюсь направляющими вместо layout grid

  • @katiazhukov6796
    @katiazhukov6796 Рік тому

    Cool

  • @MichvelCrew
    @MichvelCrew Рік тому

    Дальтонический привет))

    • @UPROCK
      @UPROCK  Рік тому

      Взаимно☺️

  • @DaniilFrank
    @DaniilFrank Рік тому +1

    Иллюстрация обалденная! Если не секрет, ее рисовал веб-дизайнер или именно иллюстратор?)

    • @getcasher
      @getcasher Рік тому

      на стоках такого типа иллюстраций много, обычно из нескольких можно собрать что-то подходящее

    • @UPROCK
      @UPROCK  Рік тому

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

    • @UPROCK
      @UPROCK  Рік тому +1

      @getcasher с одной стороны да, но с другой стороны нужен хороший вкус и умение рисовать самому чтобы собрать что-то достойное

    • @DaniilFrank
      @DaniilFrank Рік тому

      @@UPROCK жаль я в свое время купил все курсы по отдельности, а не пакетом 😅

  • @kkatyanovikova
    @kkatyanovikova Рік тому +1

    А как такую 3D сделать?

    • @UPROCK
      @UPROCK  Рік тому +2

      Я учу этому на курсе school.uprock.ru/middle
      а так в векторе нарисовать или сделать аналогичное что-то в Cinema 4D или Blender

  • @user-cl1yy6tq5b
    @user-cl1yy6tq5b Рік тому

    Очень классно! Только почему колонки это устаревшая механика?

    • @UPROCK
      @UPROCK  Рік тому

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

    • @radjivbriya5417
      @radjivbriya5417 Рік тому

      Потому что колонки придумали дизайнеры из Твиттера, много лет назад и на данный момент они сами от колонок отошли, это видно по новому дизайну соц. сети

    • @UPROCK
      @UPROCK  Рік тому

      @@radjivbriya5417 больше я думаю это из графического дизайна пришло, но твиттер тоже повлиял на это

  • @k09t1
    @k09t1 Рік тому

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

    • @UPROCK
      @UPROCK  Рік тому

      Давай попробуем поэксперементировать. Ответь мне на два вопроса:
      1. В моем макете контент более логично и понятнее структурирован?
      2. Есть ли отражение визуального позиционирования и индивидуализация компании в моем дизайне?

    • @k09t1
      @k09t1 Рік тому

      @@UPROCK
      1-да
      2- не совсем уверен. Мало айдентики компании, но это наверное больше вопрос к компании. Если вы уберете логотип то да я пойму что компания занимается разработкой ПО, но что именно это за компания навряд ли - скорее очередная компания.
      Вопрос в принципе не к вашей работе данной, а ко всему тренду который сейчас мы можем наблюдать. Широкая типографика, минимум контента.
      Мало CTA, интересно просто как все это влияет на цифры.
      Если что я без Хейта, а скорее с точки зрения исследования

    • @UPROCK
      @UPROCK  Рік тому +1

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

  • @vsssss1089
    @vsssss1089 Рік тому +1

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

    • @UPROCK
      @UPROCK  Рік тому

      Привет! Да, так и есть - стиль дизайна Uprock это по сути результат большого анализа всего, что есть на рынке, всех рабочих решений. Молодец, что проанализировал, не все готовы искать закономерности в куче UI-китов) Всё равно нужно понимать, количество блоков ограничено, а вот их комбинации и варианты коррекции правил под разные ситуации - почти бесконечны.

    • @vsssss1089
      @vsssss1089 Рік тому

      @@UPROCK По сути ведь получается, что ты и твоя команда БУКВАЛЬНО продаёте самый удобный курс по UX/UI Дизайну, который применим везде. Вопрос: почему идиоты из госуслуг спонсируют не тебя, а мразотные скиллбоксы?

    • @UPROCK
      @UPROCK  Рік тому +1

      @@vsssss1089 думаю у меня не достаточно известности, как у скилбокса. Но я не стремлюсь за этим. Если у нас увеличится внезапно количество студентов в 2 раза, то качество резко упадет. Я предпочту лучше более равномерный спокойный рост.

  • @user-br1on6su1k
    @user-br1on6su1k Рік тому

    Очень классно получилось !!!
    Женя, а не считаешь ли что у тебя проекты становятся однообразными ?
    Она проявляется в больших шрифтах и заголовках, разбросанным описаниям и сетка уже одинаковая в большинстве работах
    Я не негативлю, просто хочу узнать твое мнение об этом ))

    • @kuptsov_design
      @kuptsov_design Рік тому +2

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

    • @UPROCK
      @UPROCK  Рік тому +1

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

    • @user-br1on6su1k
      @user-br1on6su1k Рік тому

      @@kuptsov_design я знаю что все похожи, но Женя всегда был на пару шагов впереди от трендов и всегда придумывал что-то новое вот и спросил )

    • @user-br1on6su1k
      @user-br1on6su1k Рік тому

      Спасибо, буду ждать )

    • @UPROCK
      @UPROCK  Рік тому +4

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

  • @goodlooking7480
    @goodlooking7480 9 місяців тому

    Ну блииин. Что с выключкой? Второй слайд. Текст над топ-7. Евгений, ну ты чего?

    • @UPROCK
      @UPROCK  9 місяців тому

      6:18 ну и вот для кого я тут распинался целую минуту?🥲

    • @goodlooking7480
      @goodlooking7480 9 місяців тому

      Ну как же. Как же можно так оставить. Я бы постарался придумать как-то что-то... Но так бы не оставил. Размер кегля не в любви с шириной колонки.
      НО! Специалист тут вы! И профи. + агентство и школа. А это делов миллиард, выдержка и способность зарабатывать на этом хорошо. Это тоже надо уметь.
      Я на своем дезигне. Вобще не могу заработать. И нахера я тут спорю? ))) Умник блин.
      Спасибо за урок
      @@UPROCK

  • @deBaltasar
    @deBaltasar Рік тому

    Женя ты крутой, но почему сайт этого проекта до сих пор старый?

    • @UPROCK
      @UPROCK  Рік тому

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

  • @user-cl1yy6tq5b
    @user-cl1yy6tq5b Рік тому

    «Ежедневные статьи по UX» - тут ссылка сломалась

    • @UPROCK
      @UPROCK  Рік тому

      Ты про эту ссылку? www.uprock.ru/all-articles
      Если не та то напиши пришлю корректную)

  • @Yarik_Ushakov
    @Yarik_Ushakov Рік тому

    7:55 ЗЕЛЁНЫЙ? Я ДУМАЛ ЕДКО-ЖЕЛТЫЙ АХАХА

    • @Yarik_Ushakov
      @Yarik_Ushakov Рік тому

      я потом увидел сноску😢

    • @UPROCK
      @UPROCK  Рік тому +1

      Да-да, именно поэтому она там и размещена😉

    • @Yarik_Ushakov
      @Yarik_Ushakov Рік тому

      @@UPROCK гений

  • @modernodj
    @modernodj Рік тому

    Классный дизайн.

    • @UPROCK
      @UPROCK  Рік тому

      Спасибо) рад, что зашло)

  • @Volen-Duh
    @Volen-Duh 9 місяців тому

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

    • @UPROCK
      @UPROCK  9 місяців тому

      И это не единственное правило русского письма, которым можно пренебречь, чтобы сделать дизайн более функциональным и удобным😉

    • @Volen-Duh
      @Volen-Duh 9 місяців тому

      @@UPROCK Я что-то упускаю, наверное. Какой именно функциональностью обусловлена простановка запятых в меню вообще? Чтобы что? Но это бы ладно, вкусовщина, коли бы перечисления не начинались с Большой буквы, а так... Необходимости никакой, а выглядит безграмотно.
      Опустить точку в заголовке, в крайнем случае удержать однобуквенный предлог до перевода строки, что-то больше ничего на ум не приходит, где можно поступиться с правилами.

  • @Vladimir-po8qe
    @Vladimir-po8qe Рік тому +3

    6:18 Так нельзя делать нигде - ни в вебе, ни в печати. Это не «прием из ворда», это ошибка всех любителей и начинающих дизайнеров, которые ничего не знают про переносы и инструменты борьбы с дырами в тексте - изменение расстояния между словами, буквами, а также небольшое растягивание глифов по горизонтали. Я уже не первый раз вижу такой «графический прием», который впитывают новички и, к сожалению, считают, что именно так выглядит выравнивание по ширине. Если прием «красная строка» можно применить в вебе как графический прием и это будет выглядеть вполне красиво, то делать «дырявые» текстовые блоки - это неправильно, т.к. это воспитывает шрифтовое бескультурье. Типографика, как ни крути, имеет свои правила и законы, связанные с эстетикой и удобочитаемостью, любой хороший дизайнер должен их знать, прежде чем попытаться нарушить.

    • @UPROCK
      @UPROCK  Рік тому +4

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

    • @Vladimir-po8qe
      @Vladimir-po8qe Рік тому

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

    • @UPROCK
      @UPROCK  Рік тому

      @@Vladimir-po8qe я думаю начинающим правильно научиться обще принятым стандартам, а потом уже пробывать эксперементировать. Ну как минимум я так учу)
      Спасибо, за комментарий и что посмотрел мое видео)

    • @user-hc4fx1gz4g
      @user-hc4fx1gz4g Рік тому +1

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

    • @UPROCK
      @UPROCK  Рік тому

      @@user-hc4fx1gz4g так и есть

  • @user-di1fc2qq3e
    @user-di1fc2qq3e 9 місяців тому

    а это реальный проект?

    • @UPROCK
      @UPROCK  9 місяців тому

      Это часть реального проекта одного из моих студентов, обратившегося за консультацией

  • @Tapi1945
    @Tapi1945 Рік тому

    Будем так же бомбить...

    • @UPROCK
      @UPROCK  Рік тому

      Именно... Рок-н-ролл🔥

  • @dormidonttoucan
    @dormidonttoucan Рік тому

    А сама студия не в курсе да, что вы ей сделали редизайн?

    • @UPROCK
      @UPROCK  Рік тому

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

  • @ux.ui-builder
    @ux.ui-builder Рік тому

    Хороший зелёный сайт

  • @abdumalikabduvakhidov
    @abdumalikabduvakhidov Рік тому

    Висячие предлоги

  • @mirofficial1049
    @mirofficial1049 Рік тому

    В начале мне кажется сразу видно зрительный F паттерн, что не так?)

    • @UPROCK
      @UPROCK  Рік тому +1

      Поверь, никто его не закладывал, паттерн это не про размещение контента в форме буквы F) Это скорее про движение слева направо по строке, возврат к основной оси, перемещение на уровень вниз, движение слева направо и так далее