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

Рет қаралды 9,342

Күн бұрын

🔥 Бесплатный курс по дизайну с бесплатной обратной связью: 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 Жыл бұрын

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

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

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

@UPROCK Жыл бұрын

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

@smnslvv Жыл бұрын

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

@UPROCK Жыл бұрын

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

@galina_sosnovskaya Жыл бұрын

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

@UPROCK Жыл бұрын

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

@bogdanpavlov2754 Жыл бұрын

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

@UPROCK Жыл бұрын

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

@VasiliiTIRELL Жыл бұрын

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

@UPROCK Жыл бұрын

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

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

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

@UPROCK Жыл бұрын

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

@pavelsv777 Жыл бұрын

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

@UPROCK Жыл бұрын

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

@yaklevaia Жыл бұрын

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

@UPROCK Жыл бұрын

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

@BobPagespb Жыл бұрын

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

@UPROCK Жыл бұрын

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

@163onmyneckk Жыл бұрын

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

@UPROCK Жыл бұрын

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

@subbota_00424 Жыл бұрын

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

@UPROCK Жыл бұрын

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

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

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

@UPROCK Жыл бұрын

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

@tetianachvalunova5715 Жыл бұрын

Супер!

@UPROCK Жыл бұрын

Спасибо🙏

@onailsam Жыл бұрын

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

@UPROCK Жыл бұрын

Очень рад)👍

@violetta9256 Жыл бұрын

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

@UPROCK Жыл бұрын

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

@olgamaltseva Жыл бұрын

Спасибо!

@UPROCK Жыл бұрын

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

@perfect_evil7961 Жыл бұрын

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

@UPROCK Жыл бұрын

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

@Rniellyn Жыл бұрын

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

@perfect_evil7961 Жыл бұрын

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

@UPROCK Жыл бұрын

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

@perfect_evil7961 Жыл бұрын

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

@teploukhov_sad Жыл бұрын

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

@UPROCK Жыл бұрын

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

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

💥💥💯

@UPROCK Жыл бұрын

😉⚡️☺️

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

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

@UPROCK Жыл бұрын

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

@csc_annem Жыл бұрын

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

@UPROCK Жыл бұрын

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

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

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

@UPROCK Жыл бұрын

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

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

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

@UPROCK Жыл бұрын

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

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

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

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

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

@UPROCK Жыл бұрын

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

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

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

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

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