Рисуем адаптив для мобильной версии с объяснениями

🔥 Бесплатный курс по дизайну с бесплатной обратной связью: t.me/freeeducation_uprockbot
Рисуем адаптив для мобильной версии с объяснениями
Евгений Кузьмин (CEO & Art-director студии UPROCK) делится своим опытом, рисует актуальный дизайн, и разбирает главные ошибки в UX/UI.
0:00 Вступление
0:18 Обзор проекта
0:43 Сетка
1:05 Навигация
1:45 Обложка
2:42 Блок "Преимущества"
3:45 Услуги
4:36 Блок с формой
4:55 Блок "Проекты"
5:55 Блок "Этапы работ"
6:28 Портфолио
6:57 Блок "О нас"
7:28 Блок с отзывами
8:01 Подвал
8:21 Сравнение вариантов
10:54 Завершение
🚀 Ждём вас в школе 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

Пікірлер: 59

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

    🔥 Бесплатный курс по дизайну с бесплатной обратной связью: t.me/freeeducation_uprockbot 1) Здесь рисую этот дизайн-проект с разбором kzread.info/dash/bejne/fGZ-zat_mpipd5s.html 2) А здесь рассказываю, как придумываю сами идеи и как идет дизайн-процесс kzread.info/dash/bejne/hZaelKxqdNC7g7A.html

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

    Классный формат "в сравнении", я такого не встречал и информация заходит ещё доступнее. Финальный дизайн выглядит ещё более круто, на контрасте (хотя и так крутой). Спасибо!

  • @UPROCK

    @UPROCK

    Жыл бұрын

    Супер! Таким мне и хотелось бы, чтобы видели этот формат и этот дизайн) Пожалуйста)

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

    обожаю эти разборы! спасибо!! стараюсь перенимать некоторые решения в проектах на спринтах :)

  • @UPROCK

    @UPROCK

    Жыл бұрын

    Пожалуйста! Да, отлично) Во многом для этого их и делаю)

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

    Столько полезной информации! Очень наглядно и понятно что и почему делать. Спасибо за твою работу, Женя

  • @UPROCK

    @UPROCK

    Жыл бұрын

    Класс! Всегда пожалуйста)

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

    Большое спасибо! очень ждал этот выпуск :)

  • @UPROCK

    @UPROCK

    Жыл бұрын

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

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

    Супер, спасибо Женя, что показал, как можно адаптировать интересные решения под мобильные, при этом не упростив их, а сделать интересно и удобно 👍🏻

  • @UPROCK

    @UPROCK

    Жыл бұрын

    Класс, очень рад, что эти решения тебе пригодятся) Пожалуйста)

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

    ❤‍🔥 очень круто, что обащаешь внимание на ошибки!

  • @UPROCK

    @UPROCK

    Жыл бұрын

    Спасибо! Это одна из основных функций школы)

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

    Пишу снова, что не устаю черпать вдохновение и креатив из видео и постов Евгения!

  • @UPROCK

    @UPROCK

    Жыл бұрын

    И снова я очень рад, что мой контент приносит столько пользы) Спасибо🙏

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

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

  • @UPROCK

    @UPROCK

    Жыл бұрын

    Супер, что всё прояснилось) Пожалуйста)

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

    Как всегда отличное видео с разбором и аргументацией.

  • @UPROCK

    @UPROCK

    Жыл бұрын

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

  • @163onmyneckk
    @163onmyneckk Жыл бұрын

    Супер, спасибо Женя

  • @UPROCK

    @UPROCK

    Жыл бұрын

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

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

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

  • @UPROCK

    @UPROCK

    Жыл бұрын

    Супер, всегда пожалуйста)

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

    Надеюсь Евгений над нами рофлит этим дизайном)

  • @UPROCK

    @UPROCK

    Жыл бұрын

    Само собой, вы все - мой огромный социальный эксперимент😉

  • @Rniellyn

    @Rniellyn

    Жыл бұрын

    Почему ты так думаешь?

  • @perfect_evil7961

    @perfect_evil7961

    Жыл бұрын

    @@Rniellyn очень странный, неопрятный дизайн, с кучей спорных моментов

  • @UPROCK

    @UPROCK

    Жыл бұрын

    ​@@perfect_evil7961 Смотри: целевая аудитория сайта это женщины от 30-40 лет. Поставь себя на их место, уверен ты по-другому взглянешь на дизайн. Это обычная ситуация, когда заказывают не фэшн а какой-то утилитарный сайт, нужно быть к ней готовым)

  • @perfect_evil7961

    @perfect_evil7961

    Жыл бұрын

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

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

    Все классно. Только в блоке отзывов кнопку "Оставить заявку" я бы расположила Под отзывами. А сейчас она к заголовку больше относится, как будто пользователь заявку на отзывы оставить должен. А смысл то в том, чтоб почитать отзывы -> принять решение -> оставить заявку. Логический порядок нарушен.

  • @UPROCK

    @UPROCK

    Жыл бұрын

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

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

    Супер!

  • @UPROCK

    @UPROCK

    Жыл бұрын

    Спасибо🙏

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

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

  • @UPROCK

    @UPROCK

    Жыл бұрын

    Так и есть) Спасибо🙏

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

    Спасибо, полезно)

  • @UPROCK

    @UPROCK

    Жыл бұрын

    Очень рад)👍

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

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

  • @UPROCK

    @UPROCK

    Жыл бұрын

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

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

    Спасибо!

  • @UPROCK

    @UPROCK

    Жыл бұрын

    Пожалуйста☺️

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

    💥💥💯

  • @UPROCK

    @UPROCK

    Жыл бұрын

    😉⚡️☺️

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

    Лайк, очень здорово !🖤 Uprock- это по любви!!! У меня возник такой вопросик: а такое сочетание цветов будет удобно для возрастных 50+? Ведь не такой контрастный шрифт по отношению к беграунду .

  • @UPROCK

    @UPROCK

    Жыл бұрын

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

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

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

  • @UPROCK

    @UPROCK

    Жыл бұрын

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

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

    Извиняюсь, может быть я чего то не понимаю, но все же, почему в меню(которое поп ап) решили расположить все слева а не по центру или справа?) Просто мне кажется пользователю на телефоне было бы проще дотянуться рукой до правой части экрана, учитывая тот факт что мало людей держат телефон в левой руке) Буду очень рад если объясните почему, спасибо)

  • @UPROCK

    @UPROCK

    Жыл бұрын

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

  • @user-kg4pg6pd9m

    @user-kg4pg6pd9m

    Жыл бұрын

    @@UPROCK Спасибо, понял/принял/записал))

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

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

  • @UPROCK

    @UPROCK

    Жыл бұрын

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

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

    Не лучше ли применять прием Mobile First, чтобы потом не приходилось изобретать в мобилке дизайн заново, все таки 90 процентов сидят с телефонов

  • @UPROCK

    @UPROCK

    Жыл бұрын

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

  • @user-dw3vy9to4y

    @user-dw3vy9to4y

    Жыл бұрын

    @@UPROCK Благодарю за ответ)

  • @user-dw3vy9to4y

    @user-dw3vy9to4y

    Жыл бұрын

    @@UPROCK Очень хотелось бы посмотреть видео о том какие разрешения нужно использовать в 2023 для адаптива и посмотреть примеры работ учеников со всеми адаптивами)

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

    Не извиняйся, инфа и так годная ещё и задаром.

  • @UPROCK

    @UPROCK

    Жыл бұрын

    Спасибо за понимание, очень рад, что видео тебе полезно)

Келесі