Рисуем сайт для садоводов и разбираем композицию [Re-Design]

[@UPROCK]

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

[@UPROCK]

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

[@nikei7717]

А как же !!!

[@katedesign60]

Урааааааа 😍😍

[@UPROCK]

@@katedesign60 ☺

[@UPROCK]

@@nikei7717 🤗

[@Tevion3]

Да!

[@valeriy8665]

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

[@UPROCK]

Для этого отдельную рубрику заведу. Суть текущего видео в том, что во всем должна быть логика.

[@plumebum2512]

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

[@UPROCK]

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

[@coach_konstantin]

Мне понравилось. И правда, захотелось поработать с такими темами для сайтов. Не думал, что можно так хорошо и главное логично все сделать. Спасибо!

[@UPROCK]

Да это не просто, но интересно. Главное поставить цель!

[@YanKirri]

это постирония?

[@UPROCK]

Привет, пришли как ты видел бы варианты сайтов по этой тематике и для такой аудитории.

[@Alfabelle]

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

[@UPROCK]

Всегда пожалуйста) Очень приятно читать такие отзывы☺️

[@АнастасияОрлова-у9ь]

Крутое сочетание цветов получилось, притягательно разглядывать и изучать такой сайт, как пользователю)🔥Надеюсь, научусь делать так же стильно и удобно!)

[@UPROCK]

Спасибо! Обязательно получится!

[@williamwallace7533]

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

[@UPROCK]

А я рад, что ты их регулярно смотришь)

[@anastasiya_n]

обожаю эту рубрику! спасибо, что делитесь!

[@UPROCK]

Пожалуйста, Анастасия)

[@irees4414]

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

[@UPROCK]

Рад, что понравилось, завтра постараюсь выложить процесс создания этого проекта

[@ERNARDD]

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

[@UPROCK]

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

[@АндрейО-л8п]

@@UPROCK Было интересно увидеть цифры после таких переделок. Согласен с Ernard, каким бы красивым не был сайт, он работать. Было неоднократно, что после переделки дизайна сайта в "красивый", конверсия падала сильно, хотя смотришь на новый дизайн и акценты, и ничего лишнего, но нет... А так, работа СУПЕР!

[@UPROCK]

@@АндрейО-л8п ошибка в том чтобы ставить цель делать сайт красивым. Моя задача впервую очередь всегда правильно расставить акценты и сформировать последовательный рассказ

[@katni98]

В целом очень понравился дизайн, начиная сочетанием почти кислотного трендового оттенка зеленого с нейтральным, чуть приглушенным серым, заканчивая композиционными приемами) Единственное, на мой взгляд, пустовато выглядит блок с услугами... Поясню: внизу списка перечисляемых услуг как будто хочется добавить либо кнопку (например, Узнать подробнее), либо какое-то примечание мелким шрифтом; либо же напротив каждой возможной услуги поставить стрелочку равную размерам стрелочки в кружке, чтобы было еще более понятно, что можно навести курсор, чтобы изучить подробности) А так очень круто! Благодарю за контент)

[@UPROCK]

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

[@R2D3u]

Спасибо большое!) Вдохновили)

[@UPROCK]

Очень рад🤗

[@Freefire-op1hu]

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

[@UPROCK]

Да немного видимо торопился)

[@kikobaby8536]

Спасибо, что написали, немного резало глаз

[@Dmitry_Terenin]

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

[@UPROCK]

Не обязательно везде использовать одно и тоже решение.

[@Religion__]

Ну что тут скажешь грамотный дизайнер

[@UPROCK]

Спасибо!

[@katetretyakova4901]

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

[@UPROCK]

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

[@МарияШафран-ч8й]

Классный ролик!

[@UPROCK]

Спасибо, Мария!

[@NordBird]

Обожаю такие ролики с обоснованием) Учусь у вас, скажите пожалуйста, где-то есть возможность заскринить эти страницы из таких видео себе в насмотренность?☺

[@igorleschenko9185]

так в видео ведь есть моменты, где страница целиком

[@UPROCK]

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

[@Crystalspirit628]

Женя, здравствуйте. Пожалуйста, расскажите подробнее о направляющих. На курсе Сайты ПРО этого не хватает. Есть только одно видео, где разбираются типы сеток (как раз новый блок, который недавно добавили, Урок “Направляющие” - видео “Направляющие/Виды сеток). Сложность в том, что когда переходишь к проектам (в моем случае это интернет-магазин) то довольно сложно понять на какие критерии опираться, какие решения, например, считаются интересными. Недавно у Вас были офлайн лекции на эту тему, но студентов много из разных городов, а эту важную мудрость о направляющих и сетках мы не постигли)

[@UPROCK]

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

[@Crystalspirit628]

@@UPROCK Спасибо за ответ. Имею в виду формат видео или лекции. Я общалась с поддержкой и со старшим куратором.

[@UPROCK]

@@Crystalspirit628 они могут записать видео объяснение для вас.

[@leonid_anat]

Спасибо, крутяк))

[@UPROCK]

Пожалуйста, Леонид)

[@dmitriybronov796]

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

[@UPROCK]

Привет Дима, в начале видео озвучил что специально выбираю нестандартные решения

[@keldibekt.5679]

Супер рубрика...

[@UPROCK]

Спасибо!

[@ЯнНоак-ы7с]

Мне нравится Uprock. Их подход к дизайну импонирует, и я регулярно «краду» их идеи и решения. Но вот это решение, к сожалению, «красть» не хочется. Спорная работа. И дело даже не в цене - только студии решать, какой ценник повесить на свой товар. Дело в самом дизайне: 1. Слабый цветовой контраст раздражает глаз. Был бы серый фон чуть темнее, и было бы лучше. 2. Курсив, который не намного читабельнее оригинального решения. Разобрать, что написано, сложно. 3. Неподходящий стиль картинок. Интересно, почему выбрали мультяшек? 4. Непонятно также, в чём выражаются «нестандартные решения», если Евгений всегда использует несколько направляющих вместо колонок, а круглые кнопки - это актуальный мейнстрим. 5. Копирайт - отдельный вопрос. Был ли он? Надеюсь, мой комментарий не воспримут как оскорбление, ведь это одна из оценок, ради которой записывался ролик.

[@UPROCK]

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

[@НикитаГорбачев-ъ2ф]

Здравствуйте Евгений. Спасибо за видео контент, мне интересно смотреть, как работает дизайнер и его мышление! Вопрос такой у меня, есть ли в планах вести короткие новости в сфере дизайна? Что-то вроде разгона, о том что у вас произошло допустим, может планы на интервью или обзоры и в конце новости (коротко, четко, по делу) короче, как вы умеете рассказывать про дизайн, но с дополнением так сказать?

[@UPROCK]

Да потихонечку все сделаю. Завтра выложу процесс создания этого дизайна

[@НикитаГорбачев-ъ2ф]

@@UPROCK желаю успеха

[@ssskymmm]

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

[@UPROCK]

Ок я буду делать это, просто адаптивы обычно однообразные, но раз спрашиваете, то почему бы и нет)

[@lidiiarysich4710]

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

[@UPROCK]

Когда вы видите какой-то контент, то рефлекторно наводите на него и происходит действие. А если не наводите, то все равно увидите список всех услуг и если вас что-то заинтересует, то наведете и получите маленький приз за это красивую картинку этой услуги.

[@AlekseyNaumov_734]

В блоке отзывов, потенциальному заказчику будет не очень интересно знать имя Ольги или Виктории и где она живет. Гораздо важнее разместить краткое резюме отзыва, например: Работой довольна, отлично... А дальше уже имя заказчицы более пелким шрифтом.

[@UPROCK]

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

[@AlekseyNaumov_734]

@@UPROCK Вот как раз таки взрослая аудитория, по стилю написания (я думаю) поймет, настоящий отзыв или нет. Я когда просматриваю отзывы, то потом составляю средне статисическое мнение. Но мне ни разу в голову не пришло почитать кто пишет, Ольга Ивановна или Михаил Потапович, и тем более сколько им лет. Покупатель ищет отрицательные отзывы, чтобы оценить насколько они критичны для покупки и т.п.

[@UPROCK]

@@AlekseyNaumov_734 не думаю, что на своем сайте люди будут размещать отрицательные отзывы)

[@AlekseyNaumov_734]

@@UPROCK Вот! Поэтому люди подобные отзывы и не читают.

[@ekaterinarundo9465]

Здравствуйте! Для людей с ограничениями было бы хорошо сделать коэфицент контрастности больше. Сейчас он такой: 2,55 : 1 (зеленый на сером). По требованиям WCAG 2.1 он должен быть 5,0:1. Предлагается вариант: C0D929/515151.

[@UPROCK]

Спасибо, большое за такой дельный комментарий. Обозначили замечание и предложили решение. P.S. Уточню цель видео рассказать общую логику, так как макет не коммерческий то есть ограничение по времени, сколько на него могу заложить. И ваш комментарий является хорошим дополнением к нему.

[@ekaterinarundo9465]

@@UPROCK рада помочь :) Спасибо за уроки, очень нравится смотреть, все по делу и по полочкам разложено👌

[@vassilikotsurovski7281]

Вы как будто услышали меня…я тему для Лендинга ту ещё выбрала

[@UPROCK]

У нас ментальная связь)

[@АлександрМарченко-ф6д]

Красиво и интересно! Спасибо за ваш труд! Очень круто! Скажите, пожалуйста, почему не показываете адаптивы, хотя-бы мобилку, это же 60-80% клиентов?

[@UPROCK]

Сделаю отдельное видео через пару недель, где покажу несколько адаптивов

[@АлександрМарченко-ф6д]

@@UPROCK Спасибо!

[@AlexJazz24]

А где же автолейаут, компоненты и прочее? Разве это не важно?

[@UPROCK]

Для демонстрации логики мышления не важно, для пошаговой инструкции как готовить макет важно.

[@КатеринаПустаход-з5н]

Структура логичная и понятная Заголовки блока меньше, чем текст внутри блока. Низкая контрастность салатового шрифта с серым фоном. Круглая кнопка на первом экране не соответствует всем остальным. Шрифт внутри кнопки мелкий. А чего не показали адаптив?

[@UPROCK]

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

[@КатеринаПустаход-з5н]

@@UPROCK согласна про заголовки , важнее сделать акцент на главном Но вот с контрастностью салатного цвета на сером который светлее, не согласна. На более старых мониторах и телефонах будет не видно, особенно там где мелкий шрифт.

[@UPROCK]

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

[@КатеринаПустаход-з5н]

@@UPROCK Поняла, спасибо за ответ. Почти все понятно) Спасибо) Успехов вам

[@UPROCK]

@@КатеринаПустаход-з5н и вам тоже. Надеюсь, главное в видео мне получилось передать, что визуальный дизайн должен быть обоснованым.

[@yomoyoyuszhiro4883]

первая работа которая не понравилась в вашем исполнении

[@UPROCK]

Видимо вы не садовод) Главное, что основная часть работ вам нравится.

[@Tail_wind]

Жень привет! Отличный лендинг получился. Такой простой, спокойный и в то же время изысканный и лаконичный, у ЦА точно глаза не будут бегать в разные стороны, что уже значит что он отлично выполняет бизнес-задачу, но есть один вопрос: насколько целесообразно размещать блок с Отзывами не оставляя никаких ссылок на клиентов (соц-сети, профиль на сайте или тп) Всегда слышал что нужно как-то доказывать то что отзыв оставляет реальный клиент а не Иван Иванов выдуманный самим дизайнером, копирайтером или тп. Благодарю тебя и школу за все те знания которые получаю на курсе, но очень не хватает индивидуальных разборов работ студентов на курсе.

[@UPROCK]

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

[@nilinlave3746]

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

[@UPROCK]

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

[@AlekseyNaumov_734]

Пользователь изучает сайт по букве F. В хедере вторую строкуи текст под ней логично было бы сместить в право.

[@UPROCK]

Если вы слышали про паттерны F и Z, то должны знать, что пользователь их использует, когда нет заданной четкой иерархии акцентов.

[@AlekseyNaumov_734]

@@UPROCK Ок, спасибо.

[@UPROCK]

@@AlekseyNaumov_734 пожалуйста

[@data19101988]

Формы большие, но текст 14px (отзывы, текстовый блок о нас) для аудитории взрослых тётенек маловат кажется.

[@UPROCK]

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

[@asaya6335]

Читая недовольные комментарии, захотелось оставить свой, я прохожу обучение в данной школе. Имею опыт дизайна около 5 лет как хобби + около 4 лет работаю в этой сфере. Мои дизайны стоили всегда не больше 10-20к за каждый проект. После того, как начал придерживаться принципов данной школы мы с командой смогли за пол года закрыть проектов на миллион, и сейчас ещё подписываем проект на 2.5 млн, учитывая что я ещё даже не закончил обучение. Может этот комментарий и звучит как фейк ради защиты имиджа школы. Но я доказывать никому ничего не собираюсь лишь хочу подтвердить слова Евгения, что данные принципы и стиль мышления позволяют зарабатывать очень хорошие деньги!

[@UPROCK]

Спасибо большое за слова поддержки. Мне это ценно🤗. А насчет недовольных, это интернет здесь бывает так.

[@Crystalspirit628]

Ого, вот это у вас команда продуктивная

[@ФедорЕфимец-ч7й]

Очень круто, аккуратно, стильно и главное понятно!

[@UPROCK]

Спасибо, все так и есть)

[@dennyour]

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

[@UPROCK]

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

[@dennyour]

@@UPROCK Убидительно, спасибо! У нас бизнес в этой сфере, и это аудитория премиум сегмента, которые все-таки ценят искусство. А если это тетеньки 50+ лет, так им нужнен больше корпоративно-новостной сайт который приведет к продаже через статьи про цветочки. 😅 Женя, ни в коем случае не хейчу тебя, просто чуть удивился.

[@UPROCK]

​@@dennyour Привет! Конечно, я увидел что ты меня не хейтишь) Ты имеешь право сомневаться, главное доносить свое мнение деликатно, это моя позиция. По поводу женщин, скорее даже не 50+, а ~35+, и ценят скорее не искусство, а декоративные формы, и я попытался как раз эти формы передать.

[@yevheniiyevtushenko2689]

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

[@yevheniiyevtushenko2689]

Не досмотрел до конца, уже увидел что ты про это сказал)

[@UPROCK]

Рад, что решился вопрос)

[@ed8340]

Лайк, но последние 3 сайта из данной рубрики похожи между собой. Хотелось бы увидеть более разнообразные решения в работе с сеткой, шрифтами, контентом

[@UPROCK]

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

[@antdrag4754]

Откуда такой бюджет 200? Это надо полагать суммарный бюджет с дизайном с кучей правок от клиента, версткой, фронт и бэк эндом?

[@UPROCK]

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

[@eugennaumov1860]

Лайк!

[@UPROCK]

и тебе тоже!

[@СветланаЛ-в7ы]

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

[@UPROCK]

Я люблю курсив, он мне напоминает школьные годы

[@helenarara8873]

очень вдохновляет

[@UPROCK]

🤗

[@katedesign60]

Судя по комментариям, у Евгения вышло сделать через чур гиперспорные решения 😂 Ребят, будьте проще, добрее и смотрите шире

[@UPROCK]

Я думаю двух трех человек просто триггернула надпись "сайт за 200 тыс рублей" и включилось такое мышление "Ведь как такое может быть, что у меня он стоит 20 тысяч, у него в 10 раз больше."

[@serghiokomolov2339]

ну не знаю.... на вкус и цвет. мне не зашло

[@UPROCK]

Бывает так, возможно, потому что вы не женщина 30-50 лет) Надеюсь, другие дизайны вам зайдут.

[@takoytotakoyto3577]

Супер!

[@vald_lavv]

Мужик это провальный сайт с грязным фоном

[@UPROCK]

Хорошо, мужик

[@kote2120]

Добрый вечер! Спасибо за интересные разборы)) У меня вопрос. Почему 1440, а не 1600, как нас учат на курсе?

[@UPROCK]

1600 в ситуации, когда вы рисуете контейнер и под ноутбуки и под широкоформатные. То есть если холст на 1440 то надо еще отдельное разрешение и под широкоформатные рисовать

[@kote2120]

@@UPROCK Благодарю)