Создаем сайт для серьезных дядек и продвинутой аудитории
Вставка
- Опубліковано 30 чер 2024
- 🔥 Бесплатный курс по дизайну с бесплатной обратной связью: 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
Спасибо что радуешь новыми видео! всегда интересно 😎
Пожалуйста! Следите за обновлениями, скоро будут ещё)
Вышло круто! Отдельное спасибо за детальный разбор применяемых решений!
Всегда пожалуйста, рад что видео оказалось полезным)
Женя, спасибо за классный контент. Не перестаешь радовать своим подходом к делу.
Всегда пожалуйста! Рад, что контент заходит)
Как же радуется глаз при виде такого дизайна!)
Как всегда, на высоте :)
Супер! Спасибо🙏
Отлично, спасибо, было очень интересно и круто. Очень логично и стильно, слов нет)
Пожалуйста, Максим☺️
Как всегда, на высоте!
Спасибо за такой контент :)
Кайф, всегда пожалуйста)
Классно, Женя! Очень кайфовый кейс получился! Классная подача, сайт выглядит свежо 🤟
Супер! Рад что проект зашёл, спасибо)
Жень, ну ты прям радуешь такой частотой и качеством контента! Спасибо) Достойный дизайн. Впрочем, как всегда)
Только я одного не пойму, чем дизайнеры думают, когда рисуют сайты подобные исходному. Они же хоть что-то должны понимать, раз делают проекты. Но по итогу у всех очень глупые и банальные ошибки и никакого стиля, всё однотипно. А после этого еще и говорят что в дизайне пипец какая конкуренция)
Большинство руководствуется какими-то личными внутренними мотивами, считают себя творческими личностями. Судя по их проектам они могут руководствоваться чем угодно, но не подготовленной перед рисованием аналитической работой, не логикой и не эмпатией, подсказывающей что будет хорошо и удобно пользователю и клиенту)
@@UPROCK ну кстати да, согласен. При этом такие ребятки не будут что-то изучать и развиваться, соответственно не обретут базовые знания, на которых строится дизайн, и что для его построения нужно. Вот нихрена это не творческая работа) Только от части. А в основном мы инженеры)
И по итогу выходит такая картина, что рисовальщиков таких пруд пруди, а профессионалов единицы. Друзья, делайте выводы)
@@GFeest_ Да, согласен, мы инженеры. И мы проектируем на основе паттернов восприятия пользователей
Все очень здорово! Спасибо за видео!!!
Очень рад) Пожалуйста)
Иконка таинственности ассоциируется с логотипом Снэпчата)
Так и есть) А он все еще работает?
@@UPROCK на западе вроде до сих пор популярная соц сеть)
Я подумал, что это отсылка такая. Если не ошибаюсь, то снэпчат полюбили именно за его фильтры, что искажают реальность и придают некой таинственности. Либо я сошёл с ума :)
🔥 Бесплатный курс по дизайну с бесплатной обратной связью: t.me/freeeducation_uprockbot
Разбор адаптивной версии выложу сегодня в моем телеграм канале t.me/evgenyuprock
P.S Плейлист, где рисую стильные сетки ua-cam.com/play/PLgP78sMGTxfCsqJYLUw2s1Vp8ksDoaypj.html
наконец то)
@@max_whoareyou7926 рад, что угодил)
Здорово упаковано: консервативный контент в новой современной стилистике! 😊
Класс) очень рад, что проект зашёл)
Очень круто, спасибо!
Супер, очень рад🔥
Крутой макет получился 👌 Просто, стильно и со вкусом 👍
Спасибо🙏
Бомбически круто!
Каждый раз придумываешь что-невероятное)) 🎉
Очень стараюсь) Рад, что контент заходит)
Спасибо за такой контент Жень, как всегда на высоте!
Но хотелось бы узнать какими шрифтами ты пользуешься в каждом ролике, можешь оставить ссылку на них в описании
Спасибо
Очень рад, что контент нравится)
Возможно, так и буду делать, спасибо за идею!
p.s. Шрифт из этого проекта - Manrope
Жень, ну как всегда Бомба! :)
Спасибо🙏
Бомба как всегда!
Спасибо)
Серый бэкграунд с зелёным акцентом больше зашёл, выглядит современно, очень технологично, а главное уместно, учитывая тематику контента, просто вау
да, на самом деле отличный, но слегка экстравагантный вариант. Лучше начать с палитры потрадиционнее)
по твоим видосам можно учиться обосновывать свои решения. это сейчас даже важнее скила дизайнера )
"логичный системный последовательный дизайн, который имеет свои яркие индивидуальные особенности"
Салют! На самом деле нет, важнее всё же уметь делать хороший дизайн😉 Но согласен с тобой, навык обоснования своей работы очень важен, поэтому его развитию уделено так много времени в моем курсе) Рад, что видео тоже помогают
Как всегда, глаз радуется, когда смотрю ваши редизайны! Как же стильно и красиво, а главное - без всяких "предподвыпедвертов", сложной графики, анимации и т.д. И без этого результат просто бомба!
Так и есть, потому что красота проекта именно в логичности и аккуратности, и если их нет, то никакие декоративные решения не помогут) Спасибо за отзыв🙏
может быть вы могли бы прикладывать ссылку на фигму к ролику? чтоб посмотреть, как сделан тот или иной элемент. мне стало интересно, как вы в текст запихиваете вот тут широкую «о» ))
такой дизайн для меня непривычен, если честно. и сетки ваши заинтересовали, сейчас пойду искать по каналу урок по сеткам, надеюсь найду ))
а ещё у меня есть вопрос про отступы: у вас есть блоки «безопасность», «айти» и ещё там два, они в рамке, но почему-то отступ от рамки до контента меньше, чем от заголовка до списка. чем продиктовано такое решение?
Это просто нарисованная широкая буква, любые детали можете реализовать любыми средствами, какие Вам нравятся, это совершенно не принципиально. Самое важное это общие принципы логики, композиции и соответствия потребностям пользователя)
Супер!
Спасибо🙏
Благодарю! Давно интересовал вопрос: обложка «комплексная безопасность частных и юридических лиц» в начале сайта будет ведь вставлена фотографией? Просто не представляю, как можно ее сверстать, кроме как экспортировать в пнг и вставить на сайт
Можно разместить их на сайте как тексты и svg-элементы, не думаю что у опытного разработчика это вызовет сложности
привет, спасибо за хороший контент!)
подскажите, что за шрифт на старой версии сайта?
Привет! Всегда пожалуйста)
Шрифт Circe был на старой версии
Лайк!
Благодарю)
Круть, но очень хотелось бы посмотреть на мобильные и планшетные версии дизайн работ
Привет! Уже выложил в своем телеграм-канале t.me/evgenyuprock
Краснодар, еее!
✊
Сними, пожалуйста - как это будет адаптироваться. Очень интересно
Заказ принят)
Женя, а что за шрифт в новом редизайне?)
Привет! Это шрифт Manrope. Он бесплатный и рекомендую качать его с официального сайта, вариант с гугл фонтс по какой-то причине работает с figma некорректно.
Добрый день, очень понравилось ваше оформление сайта) Но подскажите пожалуйста, почему ширина контейнера именно 1440 px, а не 1920px например? Где-то пишут 1200px. От чего зависит выбор ширины контейнера и как выбрать нужную ширину? И как вы рассчитываете высоту экрана, чтобы контент входил в один экран и его не приходилось скролить? Нигде не могу найти грамотный и развернутый ответ на этот вопрос, везде пишут по-разному(
Здравствуйте! Спасибо за отзыв🙏
Раньше мы чаще всего использовали контейнер 1200, сейчас чаще всего используется 1400 как исходный. Выбор ширины контейнера всегда зависит в основном от разрешений наиболее популярных на данный момент устройств. Чаще мы начинаем с 1400, потому что его легче спроектировать и впоследствии сделать дополнительный брейкпойнт на 1920, чем наоборот.
Что касается высоты экрана - здесь мы расчитываем её исходя из соотношения сторон 16:9, а при передаче разработчику просим, чтобы он добавил опцию, когда высота обложки всегда занимает 100% экрана.
@@UPROCK Спасибо большое за такой полный и развернутый ответ!)
Женя здравствуй. Как всегда отличный выпуск! У меня два вопроса: 1) Сейчас такие вертикальные меню - это что-то новомодное? 2) Такое расположение геолокации обосновано направляющей или чем-то другим?
Привет! Благодарю)
1. Нет, я просто умею делать по-разному, здесь это более подходящее решение
2. В рамках меню? Оно обусловлено тем, что у нас весь контент справа, а слева свободное пространство, занять которое не критично, и в то же время есть акцент на городе, который важен, так как от него зависит с каким отделением будет взаимодействие
@@UPROCK спасибо! По поводу 1-ого пункта, такое решение только у вас пока видел, по этому и заинтересовался.
Считается ли ошибкой когда мы используем на одном сайте разного вида кнопки (с закругленными краями и с прямыми)?
Привет! Любое отступление от общепринятых норм в вебе это не ошибка, если оно допущено сознательно, отталкивается от контекста ситуации, опыта дизайнера, логично и аккуратно сделано)
А для чего нужно подбирать ширину контейнера под одно устройство? В чем будет разница макета шириной 1600 и 1440?
Привет! Никакой разницы, кроме того момента, когда рисуешь контейнер на 1200 а холст 1600 ты типа понимаешь как он будет выглядеть и на маленьких мониторах и на больших
Привет!
Можно посмотреть на этот кейс на бехансе?
Ссылка?
К сожалению, это только концепт, там одна страница и, скорее всего, кейса по ней делать не будем
ГЕНИЙ!!!
евГений)) или маэстро)
(это реверанс в сторону Панасенокова)
Женя почти научился адекватно разговаривать, искренне поздравляю!
Благодарю, это плоды лет упорных тренировок
Софистика, ваш верный спутник, при проектировании подобного дизайна.
Как скажете)
Очень грамотно и информативно. Но что на счёт мобильной версии сайта, большенство пользователей переходят на сайт с телефона, как разместить всю красоту в мобильной версии
Спасибо! Для этого дизайна вполне возможно сделать классную адаптивную версию. Само собой, часть красоты, как и в любой другой мобильной версии, уступит место функциональности и удобству. Можете посмотреть другие уроки на этом канале, в некоторых из них я показываю как мы работаем с адаптивами.
@@UPROCKблагодарю за ответ
Женя, подскажи, к тебя в дизайне угловатый стиль, но есть кнопки и где то они скрученные, где то прямоугольные. Это нормально?
В проекте используются 2 вида кнопок. Фиолетовые кнопки на контрасте с угловатыми контентными блоками говорят: "обрати на нас внимание". Дочерние кнопки уже не такие критичные и ближе к стандартным блокам на этом сайте, они с одной стороны уже не настолько важны, поэтому немного прячутся, но всё же они кнопки, поэтому фиолетовые)
@@UPROCK спасибо за ответ, теперь стало понятней)
@@kuptsov_design Всегда пожалуйста, рад помочь)
Я верстальщик и как у меня с твоей растянутой "о" подгорело, это придется создавать дополнительный иконочный шрифт, что бы нормально управлять потом размером текста на адаптиве. Либо делать ее svg, а на адаптиве отдельно менять размер и отступы. Как я рад, что ушёл из вэбстудии уже давно и теперь у меня проектная работа, где дизайнер уважает верстальщиков и не делает решения, которые затратят необоснованное количество времени на свою реализацию) Лучший дизайнер, который знаком с версткой)
Но на самом деле всё реально и возможно, вопрос лишь во времени. Главное что бы заказчик не удивлялся, почему верстальщик столько зарядил за верстку лэндоса)
Здравствуйте! Ну во-1х, это решение взято не с потолка, оно достаточно популярно и встречается на уже реализованных сайтах. Во-2х, поправьте меня, если я не прав, но то что Вы перечислили не звучит как что-то сверхъестественное для квалифицированного специалиста, скорее как просто работа. Ну и в-3х Вы сами сказали что это возможно и Вы понимаете сколько времени потребуется заложить на реализацию🤷♂️
p.s. тоже рад что отказался от разработчиков и такие лендосы теперь безо всяких проблем у меня делают дизайнеры на webflow)
@@UPROCK да, я и сказал, что все реализуемо, у нас, например, дизайнер часто юзает скошенные блоки, и я нашёл быстрое решение для реализации таких блоков. Тут вопрос во времени потраченном на реализацию, заказчику не всегда удобно, когда лэндинг делается неделю в отличии от 2 дней, так как просто есть элементы, которые не очень обязательны, но требуют большего времени на реализацию. Я описал просто неприятный момент для верстальщика, это не критично когда есть задача сделать именно увлекательный и особенный дизайн)
ПС: про webflow сказать нечего не могу, так как не сталкивался, но тильда этот тот ещё кошмар в плане оптимизации работы сайта. В вэбстудии много раз переверстывал сайты с тильды, так как они гораздо медленнее в производительности, чем нативный html и css. Так же есть сложности с добавлением микроразметки и подобных сеошных штук.
@@user-xf1dp5ol8q там из сложных декоративных объектов только заголовки в нескольких блоках, так что думаю несложно будет сверстать весь сайт
По остальному с вами соглашусь, спасибо, что так подробно ответили
А если в дизайне контейнер на 1700 пикселей? Это значит дизайнер сплоховал или могла быть задумка такая первоначально?
Мы используем контейнер 1200, потому что он сразу охватывает большинство самых популярных разрешений. Можно делать контейнер и 1700 и вообще сколько угодно, но это преимущество будет потеряно, это усложнит работу и может качественно сказаться на результате, только и всего.
Как всегда круто, жаль что так не сразу знал о Вас.
Спасибо🙏 Классно что мы все же встретились)
Растянутая буква О в слове безопасность, это эпик фэйл🤣 зато модно
Модно не обязательно плохо) Если элемент не нарушает композицию, не ломает логику сайта, не мешает восприятию контента и выглядит модно - почему бы и не использовать его)
Женя, это допустимо, что кнопки и скругленные, и ровные в одном макете?
Да, кнопки со скруглениями более акцентные, тогда как прямоугольные менее важные, слегка сливаются с монолитными формами этого сайта, но сохраняют цвет, чтобы было понятно что с ними по-прежнему можно взаимодействовать. На старте таких решений лучше избегать, но с опытом и большим количеством реализованных проектов, придёт понимание, какие правила и когда можно обходить с пользой для финального результата)
Все круто, НО ты всегда говорил и кураторы твои учат, что все в дизайне должно быть консистентно. Ты вводишь закругленные кнопки вначале макета, потом они в середине макета становятся квадратными. Насколько это правильно?
Привет! Смотри: на самом деле всё консистентно. По факту у меня всего 2 вида кнопок. На сайте много больших, монолитных блоков, в которых размещён контент. Фиолетовые кнопки на контрасте с ними говорят: "обрати на нас внимание". Дочерние кнопки уже не такие критичные и ближе к стандартным блокам на этом сайте, они с одной стороны уже не настолько важны, поэтому немного прячутся, но всё же они кнопки, поэтому фиолетовые. Если пока нет понимания как удерживать баланс - лучше использовать общую консистенцию, например, все кнопки с округлыми краями. Пойми правильно, у меня большой опыт и я могу немного играться с правилами)
мне показалось это логичным, потому что кнопки круглые, а ссылки квадратные )) ну то есть нажав кнопку мы перейдём к форме, а кликнув по ссылке мы сможем посмотреть больше информации.
@@ElenkaZP Понимаешь, я могу задавать какую угодно логику, и если она считывается сразу - пользователь разрешает мне устанавливать эти правила. В принципе, на мой взгляд всё довольно логично получилось. Но конечно, нужно запустить сайт, посмотреть как пользователи будут кликать по этим кнопкам, поварьировать, возможно, a/b тест сделать.
Спасибо, Евгений! Смотрел, открыв рот. Закрыл - в конце ролика.)))
Класс, очень рад такому интересу) Пожалуйста)
Серый вариант больше понравился. Напоминает газету. Вызывает ассоциацию с США начала XX века. Пинкертон все дела.
Круто) да, есть такие ассоциации, точно
Взял и сериал заспойлерил :)
Да, я такой) Надеюсь, простишь меня
@@UPROCK Ладно, прощаю)
Не понравилось совсем. Эти трендовые заголовки во весь экран с растянутыми буквами вовсе не вяжутся с такой тематикой да и просто натёрли оскомину.
Сколько бы раз автор не произносил мантру "стильно, молодёжно, модно", это не изменит того, что молодёжи услуги охраны/детектива/хакера не сдались, а мужички глядя на такое увидят несерьезность конторки, что тут в игрушки играются и пойдут на более представительный сайт.
Но это конечно же лишь моё мнение, а по хорошему перед созданием проводить исследование с проверкой гипотез.
Напрягает лишь то, что люди в комментариях все в любви распинаются, слепо веря, что это эталон, не ставят под сомнение резонность таких решений.
Здесь стоит учесть, что это нереальный проект. Поэтому нет информации о ЦА компании, нет правок со стороны заказчика, который бы мог понять «детско» ли это для них или нет.
Понимаю, что это сугубо твое мнение. Просто хочу донести, что без понимания позиционирования компании нет смысла что-либо утверждать. А вот предлагать решения (что в видео и происходит) это то, что нужно!
По сути, это концепт, который, вполне, имеет место быть. А еще это Ютуб видео, которое должно быть интересным)
@dsgn_ed Привет! Ты очень правильно всё объяснил, спасибо большое. Это действительно концепт, единственный нюанс, чем сильно отличаются мои концепты от других - я отталкиваюсь от своего реального опыта и комбинирую его: если бы ко мне пришёл реальный клиент, именно так я бы и сделал ему этот дизайн. По поводу правок клиентов, так как я имею сильную аргументационную базу, у меня правок практически не бывает, за исключением случаев, когда клиент сам забывает внести какой-то важный контент. Саму структуру мы никогда не корректируем. А по поводу автора коммента, которому ты ответил - честно говоря не вижу какой-то сухой конкретики в этом, только эмоции 🤷♂️
Сайт для серьезных дядек, а выглядит как стартап новой соц сети для подростков....
Салют! Ну вообще услугами ДА пользуются не только серьёзные дядьки)
Слабые аргументы в пользу нового дизайна - логично, интересно, красиво - такую защиту дизайна может провести тот же фрилансер. Нет никакого реального объяснения почему вы считаете это логичным (ремарка - контент действительно логичный и красивый, моя критика в отсутствии доводов почему это так, со ссылкой на исследования или наблюдения которые подкрепят ваши слова, донеся что это не гипотеза придуманная для защиты редизайна)
Ох, из-за таких как вы, мы и имеем плохой дизайн ((((
@@renatarimov6416 плохой дизайн следствие не самых лучших решений, которые вытекают из сомнительных фактов, озвучиваемых по время защиты обоснованности определенного дизайна.
Еще хуже слепая вера, кто-то может ошибиться или недоработать, а другой и не поправит первого.
Если Вы сами считаете концепт красивым и логичным, какие доводы ещё нужны? Если требуются какие-то дорогие UX-исследования - я Вас огорчу, они проводятся только на очень больших сервисах, обычно дешевле запустить mvp и проверить гипотезы. Мои гипотезы построены на моём 20-летнем стаже дизайнера, руководителя студии из топ-30 и на большом количестве запущенных реальных проектов.
@@UPROCK понял, спасибо
Брутально, но по кайфу! :D
Очень рад) SPRUT тоже доволен😀
Ты че на угаре , мужик?
А что не так?
Почему?
@@user-wb9ji2qv4d сайт трешовый с точки зрения сео, юзабилити и тд
@@vald_lavv еще добавь умных слов, чтобы выглядеть убедительнее)
@@UPROCK ты пытаешься угодить аудитории и устроить фестиваль, вместо сайта. Но скажу честно, я тебе завидую
Хотел подать идею, а что если брать рандомные Ру сайты из разных сфер и редизайнить их (Для студентов) таким образом можно охватить большую часть рынка, после редизайна отпраляется предложение владельцу сайта @uprock
Привет! возможно, так мы и будем делать)