Рисуем адаптив для мобильной версии с объяснениями
Вставка
- Опубліковано 22 тра 2024
- 🔥 Бесплатный курс по дизайну с бесплатной обратной связью: freeschool.uprock.ru/
Рисуем адаптив для мобильной версии с объяснениями
Евгений Кузьмин (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
![Принципы дизайна мобильных приложений [16+]](http://i.ytimg.com/vi/yXixmsYyHBA/mqdefault.jpg)
🔥 Бесплатный курс по дизайну с бесплатной обратной связью: freeschool.uprock.ru/
1) Здесь рисую этот дизайн-проект с разбором ua-cam.com/video/J2JkIFj5CG8/v-deo.html
2) А здесь рассказываю, как придумываю сами идеи и как идет дизайн-процесс ua-cam.com/video/Sbj2J1DmUSM/v-deo.html
обожаю эти разборы! спасибо!!
стараюсь перенимать некоторые решения в проектах на спринтах :)
Пожалуйста!
Да, отлично) Во многом для этого их и делаю)
Классный формат "в сравнении", я такого не встречал и информация заходит ещё доступнее. Финальный дизайн выглядит ещё более круто, на контрасте (хотя и так крутой). Спасибо!
Супер! Таким мне и хотелось бы, чтобы видели этот формат и этот дизайн) Пожалуйста)
Столько полезной информации! Очень наглядно и понятно что и почему делать. Спасибо за твою работу, Женя
Класс! Всегда пожалуйста)
Большое спасибо! очень ждал этот выпуск :)
Всегда пожалуйста) Очень рад)
Следите за оповещениями, буду публиковать разборы адаптивов других проектов, тут и в тг
Супер, спасибо Женя, что показал, как можно адаптировать интересные решения под мобильные, при этом не упростив их, а сделать интересно и удобно 👍🏻
Класс, очень рад, что эти решения тебе пригодятся) Пожалуйста)
❤🔥 очень круто, что обащаешь внимание на ошибки!
Спасибо! Это одна из основных функций школы)
супер! благодарю! стало намного понятнее. как и все ваши видео максимально полезны 🤩
Супер, что всё прояснилось) Пожалуйста)
Пишу снова, что не устаю черпать вдохновение и креатив из видео и постов Евгения!
И снова я очень рад, что мой контент приносит столько пользы) Спасибо🙏
Как всегда отличное видео с разбором и аргументацией.
Рад, что формат нравится)
Супер, спасибо Женя
Всегда пожалуйста)
Очень интересно, спасибо!
Супер, всегда пожалуйста)
Тоже очень люблю этот ваш формат видео - супер полезно, даже для дизов с опытом, как по мне.
Так и есть) Спасибо🙏
Женя, всё супер) но всё же этапы работ, я бы тоже сделал карточками со свайпом в сторону. Потому что сейчас этот непервостепенный блок занимает много места в длину и его долго прокручивать. А так, если если пользователя заинтересует - он посвайпает. А сейчас ему придется все это прокручивать пальцем) Оставлять в длину можно только важные блоки, такие как услуги) Сам так делаю, моё мнение) А дизайн у вас крутецкий!
Спасибо большое)
Спасибо, полезно)
Очень рад)👍
Спасибо!
Пожалуйста☺️
Надеюсь Евгений над нами рофлит этим дизайном)
Само собой, вы все - мой огромный социальный эксперимент😉
Почему ты так думаешь?
@@Rniellyn очень странный, неопрятный дизайн, с кучей спорных моментов
@@perfect_evil7961 Смотри: целевая аудитория сайта это женщины от 30-40 лет. Поставь себя на их место, уверен ты по-другому взглянешь на дизайн. Это обычная ситуация, когда заказывают не фэшн а какой-то утилитарный сайт, нужно быть к ней готовым)
@@UPROCK сложно поставить себя на место 40 летней женщины) хоть этого и требуют от дизайнеров) я почему-то думал, что в данной сфере важно показать "товар лицом", что основным контентом должны быть сочные изображения моего будущего сада, малость приправленные остроумным текстом, но никак не ожидал увидеть иллюстрации в стиле 2010-х, которые вообще не понятно зачем там. А этот ядовито лаймовый текст на грязно-сером фоне...в общем, мне не ясно, с учётом ваших работ на бехансе, с чего вдруг вышло "такое"...
Лайк, очень здорово !🖤 Uprock- это по любви!!!
У меня возник такой вопросик: а такое сочетание цветов будет удобно для возрастных 50+? Ведь не такой контрастный шрифт по отношению к беграунду .
Спасибо🙏
Цвета нестандартные, но у меня и была задача показать на практике, как логично и аккуратно внедрять самые нестандартные решения. Не обязательно копировать их, в своих работах Вы можете использовать более традиционные цветовые схемы)
Все классно. Только в блоке отзывов кнопку "Оставить заявку" я бы расположила Под отзывами. А сейчас она к заголовку больше относится, как будто пользователь заявку на отзывы оставить должен. А смысл то в том, чтоб почитать отзывы -> принять решение -> оставить заявку. Логический порядок нарушен.
Привет! Смотри: на своём дизайне ты можешь делать как видишь, моя задача только дать рекомендации. По логике, что так правильно - я с тобой соглашусь, тоже об этом думал. Но с точки зрения удобства, человек дошёл до отзывов, возможно, он ниже скроллить даже не будет. Мы показываем ему кнопку, в последний раз напоминаем о том, что можно оставить заявку. Даже если он проскроллит ниже, эта кнопка попадёт в рамку экрана, поэтому я решил не прятать её глубоко
Супер!
Спасибо🙏
вау! никогда бы не подумала, что круглую кнопку нужно изменить для мобильной версии. но если в дизайне все кнопки имеют такую необычную форму, то будет ли уместно для мобильного изменить их на простую прямоугольную кнопку?
Привет! да, мобилки всегда существенно проще десктопа, поэтому вау-эффект в них достигается меньшими средствами. Плюс на маленьком экране мобильных устройств у нас меньше пространства и меньше время взаимодействия, чтобы задать какую-то новую визуальную логику. Поэтому, даже если все кнопки необычные в полноэкранной версии, в адаптиве часто имеет смысл отойти от них в сторону более привычного пользователю решения
У меня возник вопрос на блоке преимуществ - нет ощущения, что как будто не дают нам рассмотреть эти иллюстрации, которые в масштабе таких небольших кругов некомфортно глазу разобрать, так как там есть прям мелкие элементы? Ну то есть если мы их размещаем - то либо в том размере чтобы их можно было рассмотреть не сильно напрягаясь, либо уж менять на какие-то упрощенные их версии или иконки какие-то стилистически перекликающиеся с иллюстрациями.
Привет! На экране телефона эти иллюстрации будут восприниматься иначе, в формате адаптива они станут достаточно крупными объектами и легко считаются.
💥💥💯
😉⚡️☺️
Извиняюсь, может быть я чего то не понимаю, но все же, почему в меню(которое поп ап) решили расположить все слева а не по центру или справа?)
Просто мне кажется пользователю на телефоне было бы проще дотянуться рукой до правой части экрана, учитывая тот факт что мало людей держат телефон в левой руке)
Буду очень рад если объясните почему, спасибо)
Привет! В первую очередь, ты должен это прочитать, а читаем мы слева направо и весь текст выровнен по левой границе. Только прочитав, ты начинаешь думать о том, как это нажать
@@UPROCK Спасибо, понял/принял/записал))
Не лучше ли применять прием Mobile First, чтобы потом не приходилось изобретать в мобилке дизайн заново, все таки 90 процентов сидят с телефонов
Во-1х я не слыщал ещё про такой внезапный скачок по статистике мобильного трафика в вебе) Во-2х, десктопная версия существенно сложнее в проектировании и гораздо логичнее сначала сделать её и упростить во время работы с адаптивом, чем масштабировать эту историю в обратном направлении.
@@UPROCK Благодарю за ответ)
@@UPROCK Очень хотелось бы посмотреть видео о том какие разрешения нужно использовать в 2023 для адаптива и посмотреть примеры работ учеников со всеми адаптивами)
Не извиняйся, инфа и так годная ещё и задаром.
Спасибо за понимание, очень рад, что видео тебе полезно)