Создаем сайт для серьезных дядек и продвинутой аудитории
🔥 Бесплатный курс по дизайну с бесплатной обратной связью: t.me/freeeducation_uprockbot
Создаем сайт для серьезных дядек и продвинутой аудитории
Евгений Кузьмин (CEO & Art-director студии UPROCK) делится своим опытом, рисует актуальный дизайн, и разбирает главные ошибки в UX/UI.
0:00 Вступление
0:34 Анализ исходного сайта
0:58 Контейнер
1:37 Навигация
2:34 направляющие
3:07 Обложка
4:16 Текстовый блок
5:30 Блок "Направление деятельности"
6:29 Блок с манифестом
7:24 Сравнение с исходным сайтом
7:54 Блок с клиентами
8:38 Блок с кейсами
9:05 Блок с формой
9:32 Блоки с документами и отзывами
10:12 Блок с новостями и статьями
10:31 Блок с FAQ и подвал
10:49 Сравнение с исходным сайтом
11:50 Альтернативная цветовая схема
12:20 Заключение
🚀 Ждём вас в школе 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
Пікірлер: 135
Спасибо что радуешь новыми видео! всегда интересно 😎
@UPROCK
Жыл бұрын
Пожалуйста! Следите за обновлениями, скоро будут ещё)
Вышло круто! Отдельное спасибо за детальный разбор применяемых решений!
@UPROCK
Жыл бұрын
Всегда пожалуйста, рад что видео оказалось полезным)
Женя, спасибо за классный контент. Не перестаешь радовать своим подходом к делу.
@UPROCK
Жыл бұрын
Всегда пожалуйста! Рад, что контент заходит)
Как же радуется глаз при виде такого дизайна!) Как всегда, на высоте :)
@UPROCK
Жыл бұрын
Супер! Спасибо🙏
Отлично, спасибо, было очень интересно и круто. Очень логично и стильно, слов нет)
@UPROCK
3 ай бұрын
Пожалуйста, Максим☺️
Как всегда, на высоте! Спасибо за такой контент :)
@UPROCK
Жыл бұрын
Кайф, всегда пожалуйста)
Классно, Женя! Очень кайфовый кейс получился! Классная подача, сайт выглядит свежо 🤟
@UPROCK
Жыл бұрын
Супер! Рад что проект зашёл, спасибо)
Жень, ну ты прям радуешь такой частотой и качеством контента! Спасибо) Достойный дизайн. Впрочем, как всегда) Только я одного не пойму, чем дизайнеры думают, когда рисуют сайты подобные исходному. Они же хоть что-то должны понимать, раз делают проекты. Но по итогу у всех очень глупые и банальные ошибки и никакого стиля, всё однотипно. А после этого еще и говорят что в дизайне пипец какая конкуренция)
@UPROCK
Жыл бұрын
Большинство руководствуется какими-то личными внутренними мотивами, считают себя творческими личностями. Судя по их проектам они могут руководствоваться чем угодно, но не подготовленной перед рисованием аналитической работой, не логикой и не эмпатией, подсказывающей что будет хорошо и удобно пользователю и клиенту)
@GFeest_
Жыл бұрын
@@UPROCK ну кстати да, согласен. При этом такие ребятки не будут что-то изучать и развиваться, соответственно не обретут базовые знания, на которых строится дизайн, и что для его построения нужно. Вот нихрена это не творческая работа) Только от части. А в основном мы инженеры) И по итогу выходит такая картина, что рисовальщиков таких пруд пруди, а профессионалов единицы. Друзья, делайте выводы)
@UPROCK
Жыл бұрын
@@GFeest_ Да, согласен, мы инженеры. И мы проектируем на основе паттернов восприятия пользователей
Все очень здорово! Спасибо за видео!!!
@UPROCK
Жыл бұрын
Очень рад) Пожалуйста)
Иконка таинственности ассоциируется с логотипом Снэпчата)
@UPROCK
Жыл бұрын
Так и есть) А он все еще работает?
@user-vw2wt1od3p
Жыл бұрын
@@UPROCK на западе вроде до сих пор популярная соц сеть)
@danilach6332
Жыл бұрын
Я подумал, что это отсылка такая. Если не ошибаюсь, то снэпчат полюбили именно за его фильтры, что искажают реальность и придают некой таинственности. Либо я сошёл с ума :)
🔥 Бесплатный курс по дизайну с бесплатной обратной связью: t.me/freeeducation_uprockbot Разбор адаптивной версии выложу сегодня в моем телеграм канале t.me/evgenyuprock P.S Плейлист, где рисую стильные сетки kzread.info/head/PLgP78sMGTxfCsqJYLUw2s1Vp8ksDoaypj
@max_whoareyou7926
Жыл бұрын
наконец то)
@UPROCK
Жыл бұрын
@@max_whoareyou7926 рад, что угодил)
Здорово упаковано: консервативный контент в новой современной стилистике! 😊
@UPROCK
Жыл бұрын
Класс) очень рад, что проект зашёл)
Очень круто, спасибо!
@UPROCK
Жыл бұрын
Супер, очень рад🔥
Крутой макет получился 👌 Просто, стильно и со вкусом 👍
@UPROCK
Жыл бұрын
Спасибо🙏
Бомбически круто! Каждый раз придумываешь что-невероятное)) 🎉
@UPROCK
Жыл бұрын
Очень стараюсь) Рад, что контент заходит)
Спасибо за такой контент Жень, как всегда на высоте! Но хотелось бы узнать какими шрифтами ты пользуешься в каждом ролике, можешь оставить ссылку на них в описании Спасибо
@UPROCK
Жыл бұрын
Очень рад, что контент нравится) Возможно, так и буду делать, спасибо за идею! p.s. Шрифт из этого проекта - Manrope
Жень, ну как всегда Бомба! :)
@UPROCK
Жыл бұрын
Спасибо🙏
Бомба как всегда!
@UPROCK
Жыл бұрын
Спасибо)
Серый бэкграунд с зелёным акцентом больше зашёл, выглядит современно, очень технологично, а главное уместно, учитывая тематику контента, просто вау
@UPROCK
Жыл бұрын
да, на самом деле отличный, но слегка экстравагантный вариант. Лучше начать с палитры потрадиционнее)
по твоим видосам можно учиться обосновывать свои решения. это сейчас даже важнее скила дизайнера ) "логичный системный последовательный дизайн, который имеет свои яркие индивидуальные особенности"
@UPROCK
11 ай бұрын
Салют! На самом деле нет, важнее всё же уметь делать хороший дизайн😉 Но согласен с тобой, навык обоснования своей работы очень важен, поэтому его развитию уделено так много времени в моем курсе) Рад, что видео тоже помогают
Как всегда, глаз радуется, когда смотрю ваши редизайны! Как же стильно и красиво, а главное - без всяких "предподвыпедвертов", сложной графики, анимации и т.д. И без этого результат просто бомба!
@UPROCK
Жыл бұрын
Так и есть, потому что красота проекта именно в логичности и аккуратности, и если их нет, то никакие декоративные решения не помогут) Спасибо за отзыв🙏
может быть вы могли бы прикладывать ссылку на фигму к ролику? чтоб посмотреть, как сделан тот или иной элемент. мне стало интересно, как вы в текст запихиваете вот тут широкую «о» )) такой дизайн для меня непривычен, если честно. и сетки ваши заинтересовали, сейчас пойду искать по каналу урок по сеткам, надеюсь найду )) а ещё у меня есть вопрос про отступы: у вас есть блоки «безопасность», «айти» и ещё там два, они в рамке, но почему-то отступ от рамки до контента меньше, чем от заголовка до списка. чем продиктовано такое решение?
@UPROCK
Жыл бұрын
Это просто нарисованная широкая буква, любые детали можете реализовать любыми средствами, какие Вам нравятся, это совершенно не принципиально. Самое важное это общие принципы логики, композиции и соответствия потребностям пользователя)
Супер!
@UPROCK
Жыл бұрын
Спасибо🙏
Благодарю! Давно интересовал вопрос: обложка «комплексная безопасность частных и юридических лиц» в начале сайта будет ведь вставлена фотографией? Просто не представляю, как можно ее сверстать, кроме как экспортировать в пнг и вставить на сайт
@UPROCK
Жыл бұрын
Можно разместить их на сайте как тексты и svg-элементы, не думаю что у опытного разработчика это вызовет сложности
привет, спасибо за хороший контент!) подскажите, что за шрифт на старой версии сайта?
@UPROCK
Жыл бұрын
Привет! Всегда пожалуйста) Шрифт Circe был на старой версии
Лайк!
@UPROCK
Жыл бұрын
Благодарю)
Круть, но очень хотелось бы посмотреть на мобильные и планшетные версии дизайн работ
@UPROCK
Жыл бұрын
Привет! Уже выложил в своем телеграм-канале t.me/evgenyuprock
Краснодар, еее!
@UPROCK
11 ай бұрын
✊
Сними, пожалуйста - как это будет адаптироваться. Очень интересно
@UPROCK
Жыл бұрын
Заказ принят)
Женя, а что за шрифт в новом редизайне?)
@UPROCK
Жыл бұрын
Привет! Это шрифт Manrope. Он бесплатный и рекомендую качать его с официального сайта, вариант с гугл фонтс по какой-то причине работает с figma некорректно.
Добрый день, очень понравилось ваше оформление сайта) Но подскажите пожалуйста, почему ширина контейнера именно 1440 px, а не 1920px например? Где-то пишут 1200px. От чего зависит выбор ширины контейнера и как выбрать нужную ширину? И как вы рассчитываете высоту экрана, чтобы контент входил в один экран и его не приходилось скролить? Нигде не могу найти грамотный и развернутый ответ на этот вопрос, везде пишут по-разному(
@UPROCK
Жыл бұрын
Здравствуйте! Спасибо за отзыв🙏 Раньше мы чаще всего использовали контейнер 1200, сейчас чаще всего используется 1400 как исходный. Выбор ширины контейнера всегда зависит в основном от разрешений наиболее популярных на данный момент устройств. Чаще мы начинаем с 1400, потому что его легче спроектировать и впоследствии сделать дополнительный брейкпойнт на 1920, чем наоборот. Что касается высоты экрана - здесь мы расчитываем её исходя из соотношения сторон 16:9, а при передаче разработчику просим, чтобы он добавил опцию, когда высота обложки всегда занимает 100% экрана.
@vidna1825
Жыл бұрын
@@UPROCK Спасибо большое за такой полный и развернутый ответ!)
Женя здравствуй. Как всегда отличный выпуск! У меня два вопроса: 1) Сейчас такие вертикальные меню - это что-то новомодное? 2) Такое расположение геолокации обосновано направляющей или чем-то другим?
@UPROCK
Жыл бұрын
Привет! Благодарю) 1. Нет, я просто умею делать по-разному, здесь это более подходящее решение 2. В рамках меню? Оно обусловлено тем, что у нас весь контент справа, а слева свободное пространство, занять которое не критично, и в то же время есть акцент на городе, который важен, так как от него зависит с каким отделением будет взаимодействие
@konstantin_davydov
Жыл бұрын
@@UPROCK спасибо! По поводу 1-ого пункта, такое решение только у вас пока видел, по этому и заинтересовался.
Считается ли ошибкой когда мы используем на одном сайте разного вида кнопки (с закругленными краями и с прямыми)?
@UPROCK
Жыл бұрын
Привет! Любое отступление от общепринятых норм в вебе это не ошибка, если оно допущено сознательно, отталкивается от контекста ситуации, опыта дизайнера, логично и аккуратно сделано)
А для чего нужно подбирать ширину контейнера под одно устройство? В чем будет разница макета шириной 1600 и 1440?
@UPROCK
Жыл бұрын
Привет! Никакой разницы, кроме того момента, когда рисуешь контейнер на 1200 а холст 1600 ты типа понимаешь как он будет выглядеть и на маленьких мониторах и на больших
Привет! Можно посмотреть на этот кейс на бехансе? Ссылка?
@UPROCK
Жыл бұрын
К сожалению, это только концепт, там одна страница и, скорее всего, кейса по ней делать не будем
ГЕНИЙ!!!
@UPROCK
Жыл бұрын
евГений)) или маэстро) (это реверанс в сторону Панасенокова)
Женя почти научился адекватно разговаривать, искренне поздравляю!
@UPROCK
Жыл бұрын
Благодарю, это плоды лет упорных тренировок
Софистика, ваш верный спутник, при проектировании подобного дизайна.
@UPROCK
Жыл бұрын
Как скажете)
Очень грамотно и информативно. Но что на счёт мобильной версии сайта, большенство пользователей переходят на сайт с телефона, как разместить всю красоту в мобильной версии
@UPROCK
Жыл бұрын
Спасибо! Для этого дизайна вполне возможно сделать классную адаптивную версию. Само собой, часть красоты, как и в любой другой мобильной версии, уступит место функциональности и удобству. Можете посмотреть другие уроки на этом канале, в некоторых из них я показываю как мы работаем с адаптивами.
@artlev2724
Жыл бұрын
@@UPROCKблагодарю за ответ
Женя, подскажи, к тебя в дизайне угловатый стиль, но есть кнопки и где то они скрученные, где то прямоугольные. Это нормально?
@UPROCK
Жыл бұрын
В проекте используются 2 вида кнопок. Фиолетовые кнопки на контрасте с угловатыми контентными блоками говорят: "обрати на нас внимание". Дочерние кнопки уже не такие критичные и ближе к стандартным блокам на этом сайте, они с одной стороны уже не настолько важны, поэтому немного прячутся, но всё же они кнопки, поэтому фиолетовые)
@kuptsov_design
Жыл бұрын
@@UPROCK спасибо за ответ, теперь стало понятней)
@UPROCK
Жыл бұрын
@@kuptsov_design Всегда пожалуйста, рад помочь)
Я верстальщик и как у меня с твоей растянутой "о" подгорело, это придется создавать дополнительный иконочный шрифт, что бы нормально управлять потом размером текста на адаптиве. Либо делать ее svg, а на адаптиве отдельно менять размер и отступы. Как я рад, что ушёл из вэбстудии уже давно и теперь у меня проектная работа, где дизайнер уважает верстальщиков и не делает решения, которые затратят необоснованное количество времени на свою реализацию) Лучший дизайнер, который знаком с версткой) Но на самом деле всё реально и возможно, вопрос лишь во времени. Главное что бы заказчик не удивлялся, почему верстальщик столько зарядил за верстку лэндоса)
@UPROCK
Жыл бұрын
Здравствуйте! Ну во-1х, это решение взято не с потолка, оно достаточно популярно и встречается на уже реализованных сайтах. Во-2х, поправьте меня, если я не прав, но то что Вы перечислили не звучит как что-то сверхъестественное для квалифицированного специалиста, скорее как просто работа. Ну и в-3х Вы сами сказали что это возможно и Вы понимаете сколько времени потребуется заложить на реализацию🤷♂️ p.s. тоже рад что отказался от разработчиков и такие лендосы теперь безо всяких проблем у меня делают дизайнеры на webflow)
@user-xf1dp5ol8q
Жыл бұрын
@@UPROCK да, я и сказал, что все реализуемо, у нас, например, дизайнер часто юзает скошенные блоки, и я нашёл быстрое решение для реализации таких блоков. Тут вопрос во времени потраченном на реализацию, заказчику не всегда удобно, когда лэндинг делается неделю в отличии от 2 дней, так как просто есть элементы, которые не очень обязательны, но требуют большего времени на реализацию. Я описал просто неприятный момент для верстальщика, это не критично когда есть задача сделать именно увлекательный и особенный дизайн) ПС: про webflow сказать нечего не могу, так как не сталкивался, но тильда этот тот ещё кошмар в плане оптимизации работы сайта. В вэбстудии много раз переверстывал сайты с тильды, так как они гораздо медленнее в производительности, чем нативный html и css. Так же есть сложности с добавлением микроразметки и подобных сеошных штук.
@UPROCK
Жыл бұрын
@@user-xf1dp5ol8q там из сложных декоративных объектов только заголовки в нескольких блоках, так что думаю несложно будет сверстать весь сайт По остальному с вами соглашусь, спасибо, что так подробно ответили
А если в дизайне контейнер на 1700 пикселей? Это значит дизайнер сплоховал или могла быть задумка такая первоначально?
@UPROCK
Жыл бұрын
Мы используем контейнер 1200, потому что он сразу охватывает большинство самых популярных разрешений. Можно делать контейнер и 1700 и вообще сколько угодно, но это преимущество будет потеряно, это усложнит работу и может качественно сказаться на результате, только и всего.
Как всегда круто, жаль что так не сразу знал о Вас.
@UPROCK
Жыл бұрын
Спасибо🙏 Классно что мы все же встретились)
Растянутая буква О в слове безопасность, это эпик фэйл🤣 зато модно
@UPROCK
Жыл бұрын
Модно не обязательно плохо) Если элемент не нарушает композицию, не ломает логику сайта, не мешает восприятию контента и выглядит модно - почему бы и не использовать его)
Женя, это допустимо, что кнопки и скругленные, и ровные в одном макете?
@UPROCK
Жыл бұрын
Да, кнопки со скруглениями более акцентные, тогда как прямоугольные менее важные, слегка сливаются с монолитными формами этого сайта, но сохраняют цвет, чтобы было понятно что с ними по-прежнему можно взаимодействовать. На старте таких решений лучше избегать, но с опытом и большим количеством реализованных проектов, придёт понимание, какие правила и когда можно обходить с пользой для финального результата)
Все круто, НО ты всегда говорил и кураторы твои учат, что все в дизайне должно быть консистентно. Ты вводишь закругленные кнопки вначале макета, потом они в середине макета становятся квадратными. Насколько это правильно?
@UPROCK
Жыл бұрын
Привет! Смотри: на самом деле всё консистентно. По факту у меня всего 2 вида кнопок. На сайте много больших, монолитных блоков, в которых размещён контент. Фиолетовые кнопки на контрасте с ними говорят: "обрати на нас внимание". Дочерние кнопки уже не такие критичные и ближе к стандартным блокам на этом сайте, они с одной стороны уже не настолько важны, поэтому немного прячутся, но всё же они кнопки, поэтому фиолетовые. Если пока нет понимания как удерживать баланс - лучше использовать общую консистенцию, например, все кнопки с округлыми краями. Пойми правильно, у меня большой опыт и я могу немного играться с правилами)
@ElenkaZP
Жыл бұрын
мне показалось это логичным, потому что кнопки круглые, а ссылки квадратные )) ну то есть нажав кнопку мы перейдём к форме, а кликнув по ссылке мы сможем посмотреть больше информации.
@UPROCK
Жыл бұрын
@@ElenkaZP Понимаешь, я могу задавать какую угодно логику, и если она считывается сразу - пользователь разрешает мне устанавливать эти правила. В принципе, на мой взгляд всё довольно логично получилось. Но конечно, нужно запустить сайт, посмотреть как пользователи будут кликать по этим кнопкам, поварьировать, возможно, a/b тест сделать.
Спасибо, Евгений! Смотрел, открыв рот. Закрыл - в конце ролика.)))
@UPROCK
Жыл бұрын
Класс, очень рад такому интересу) Пожалуйста)
Серый вариант больше понравился. Напоминает газету. Вызывает ассоциацию с США начала XX века. Пинкертон все дела.
@UPROCK
Жыл бұрын
Круто) да, есть такие ассоциации, точно
Взял и сериал заспойлерил :)
@UPROCK
Жыл бұрын
Да, я такой) Надеюсь, простишь меня
@iNikoweb
Жыл бұрын
@@UPROCK Ладно, прощаю)
Не понравилось совсем. Эти трендовые заголовки во весь экран с растянутыми буквами вовсе не вяжутся с такой тематикой да и просто натёрли оскомину. Сколько бы раз автор не произносил мантру "стильно, молодёжно, модно", это не изменит того, что молодёжи услуги охраны/детектива/хакера не сдались, а мужички глядя на такое увидят несерьезность конторки, что тут в игрушки играются и пойдут на более представительный сайт. Но это конечно же лишь моё мнение, а по хорошему перед созданием проводить исследование с проверкой гипотез. Напрягает лишь то, что люди в комментариях все в любви распинаются, слепо веря, что это эталон, не ставят под сомнение резонность таких решений.
@dsgn_ed
Жыл бұрын
Здесь стоит учесть, что это нереальный проект. Поэтому нет информации о ЦА компании, нет правок со стороны заказчика, который бы мог понять «детско» ли это для них или нет. Понимаю, что это сугубо твое мнение. Просто хочу донести, что без понимания позиционирования компании нет смысла что-либо утверждать. А вот предлагать решения (что в видео и происходит) это то, что нужно! По сути, это концепт, который, вполне, имеет место быть. А еще это Ютуб видео, которое должно быть интересным)
@UPROCK
Жыл бұрын
@dsgn_ed Привет! Ты очень правильно всё объяснил, спасибо большое. Это действительно концепт, единственный нюанс, чем сильно отличаются мои концепты от других - я отталкиваюсь от своего реального опыта и комбинирую его: если бы ко мне пришёл реальный клиент, именно так я бы и сделал ему этот дизайн. По поводу правок клиентов, так как я имею сильную аргументационную базу, у меня правок практически не бывает, за исключением случаев, когда клиент сам забывает внести какой-то важный контент. Саму структуру мы никогда не корректируем. А по поводу автора коммента, которому ты ответил - честно говоря не вижу какой-то сухой конкретики в этом, только эмоции 🤷♂️
Сайт для серьезных дядек, а выглядит как стартап новой соц сети для подростков....
@UPROCK
Жыл бұрын
Салют! Ну вообще услугами ДА пользуются не только серьёзные дядьки)
Слабые аргументы в пользу нового дизайна - логично, интересно, красиво - такую защиту дизайна может провести тот же фрилансер. Нет никакого реального объяснения почему вы считаете это логичным (ремарка - контент действительно логичный и красивый, моя критика в отсутствии доводов почему это так, со ссылкой на исследования или наблюдения которые подкрепят ваши слова, донеся что это не гипотеза придуманная для защиты редизайна)
@renatarimov6416
Жыл бұрын
Ох, из-за таких как вы, мы и имеем плохой дизайн ((((
@perezalivation6033
Жыл бұрын
@@renatarimov6416 плохой дизайн следствие не самых лучших решений, которые вытекают из сомнительных фактов, озвучиваемых по время защиты обоснованности определенного дизайна. Еще хуже слепая вера, кто-то может ошибиться или недоработать, а другой и не поправит первого.
@UPROCK
Жыл бұрын
Если Вы сами считаете концепт красивым и логичным, какие доводы ещё нужны? Если требуются какие-то дорогие UX-исследования - я Вас огорчу, они проводятся только на очень больших сервисах, обычно дешевле запустить mvp и проверить гипотезы. Мои гипотезы построены на моём 20-летнем стаже дизайнера, руководителя студии из топ-30 и на большом количестве запущенных реальных проектов.
@perezalivation6033
Жыл бұрын
@@UPROCK понял, спасибо
Брутально, но по кайфу! :D
@UPROCK
Жыл бұрын
Очень рад) SPRUT тоже доволен😀
Ты че на угаре , мужик?
@user-wb9ji2qv4d
Жыл бұрын
А что не так?
@MaBrg1
Жыл бұрын
Почему?
@vald_lavv
Жыл бұрын
@@user-wb9ji2qv4d сайт трешовый с точки зрения сео, юзабилити и тд
@UPROCK
Жыл бұрын
@@vald_lavv еще добавь умных слов, чтобы выглядеть убедительнее)
@vald_lavv
Жыл бұрын
@@UPROCK ты пытаешься угодить аудитории и устроить фестиваль, вместо сайта. Но скажу честно, я тебе завидую
Хотел подать идею, а что если брать рандомные Ру сайты из разных сфер и редизайнить их (Для студентов) таким образом можно охватить большую часть рынка, после редизайна отпраляется предложение владельцу сайта @uprock
@UPROCK
Жыл бұрын
Привет! возможно, так мы и будем делать)