Создаем сайт для серьезных дядек и продвинутой аудитории

[@МаксимШустов-ш3т]

Иконка таинственности ассоциируется с логотипом Снэпчата)

[@UPROCK]

Так и есть) А он все еще работает?

[@МаксимШустов-ш3т]

@@UPROCK на западе вроде до сих пор популярная соц сеть)

[@danilach6332]

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

[@BobPagespb]

Как всегда круто, жаль что так не сразу знал о Вас.

[@UPROCK]

Спасибо🙏 Классно что мы все же встретились)

[@Tozester]

Сайт для серьезных дядек, а выглядит как стартап новой соц сети для подростков....

[@UPROCK]

Салют! Ну вообще услугами ДА пользуются не только серьёзные дядьки)

[@dimlyamin]

Растянутая буква О в слове безопасность, это эпик фэйл🤣 зато модно

[@UPROCK]

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

[@GFeest_]

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

[@UPROCK]

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

[@GFeest_]

@@UPROCK ну кстати да, согласен. При этом такие ребятки не будут что-то изучать и развиваться, соответственно не обретут базовые знания, на которых строится дизайн, и что для его построения нужно. Вот нихрена это не творческая работа) Только от части. А в основном мы инженеры) И по итогу выходит такая картина, что рисовальщиков таких пруд пруди, а профессионалов единицы. Друзья, делайте выводы)

[@UPROCK]

@@GFeest_ Да, согласен, мы инженеры. И мы проектируем на основе паттернов восприятия пользователей

[@Totentanz1524]

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

[@UPROCK]

Салют! На самом деле нет, важнее всё же уметь делать хороший дизайн😉 Но согласен с тобой, навык обоснования своей работы очень важен, поэтому его развитию уделено так много времени в моем курсе) Рад, что видео тоже помогают

[@Totentanz1524]

Краснодар, еее!

[@UPROCK]

✊

[@UPROCK]

🔥 Бесплатный курс по дизайну с бесплатной обратной связью: t.me/freeeducation_uprockbot Разбор адаптивной версии выложу сегодня в моем телеграм канале t.me/evgenyuprock P.S Плейлист, где рисую стильные сетки kzbin.info/aero/PLgP78sMGTxfCsqJYLUw2s1Vp8ksDoaypj

[@max_whoareyou7926]

наконец то)

[@UPROCK]

@@max_whoareyou7926 рад, что угодил)

[@konstantinche102]

Отлично, спасибо, было очень интересно и круто. Очень логично и стильно, слов нет)

[@UPROCK]

Пожалуйста, Максим☺️

[@samsasensei]

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

[@UPROCK]

Очень рад, что контент нравится) Возможно, так и буду делать, спасибо за идею! p.s. Шрифт из этого проекта - Manrope

[@marselgaliullin]

Классно, Женя! Очень кайфовый кейс получился! Классная подача, сайт выглядит свежо 🤟

[@UPROCK]

Супер! Рад что проект зашёл, спасибо)

[@antiswag]

Как же радуется глаз при виде такого дизайна!) Как всегда, на высоте :)

[@UPROCK]

Супер! Спасибо🙏

[@alexandrap.1619]

Вышло круто! Отдельное спасибо за детальный разбор применяемых решений!

[@UPROCK]

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

[@oxanakrylova6535]

Здорово упаковано: консервативный контент в новой современной стилистике! 😊

[@UPROCK]

Класс) очень рад, что проект зашёл)

[@trainingepisode321]

Спасибо что радуешь новыми видео! всегда интересно 😎

[@UPROCK]

Пожалуйста! Следите за обновлениями, скоро будут ещё)

[@elenakulikova927]

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

[@UPROCK]

да, на самом деле отличный, но слегка экстравагантный вариант. Лучше начать с палитры потрадиционнее)

[@dvade.]

Сними, пожалуйста - как это будет адаптироваться. Очень интересно

[@UPROCK]

Заказ принят)

[@ДашаХарина-щ2ж]

Супер!

[@UPROCK]

Спасибо🙏

[@artlev2724]

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

[@UPROCK]

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

[@artlev2724]

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

[@alexandrayankovich-raspopo6066]

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

[@UPROCK]

Всегда пожалуйста! Рад, что контент заходит)

[@anastsiaslutskyi8165]

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

[@UPROCK]

Привет! Смотри: на самом деле всё консистентно. По факту у меня всего 2 вида кнопок. На сайте много больших, монолитных блоков, в которых размещён контент. Фиолетовые кнопки на контрасте с ними говорят: "обрати на нас внимание". Дочерние кнопки уже не такие критичные и ближе к стандартным блокам на этом сайте, они с одной стороны уже не настолько важны, поэтому немного прячутся, но всё же они кнопки, поэтому фиолетовые. Если пока нет понимания как удерживать баланс - лучше использовать общую консистенцию, например, все кнопки с округлыми краями. Пойми правильно, у меня большой опыт и я могу немного играться с правилами)

[@ElenkaZP]

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

[@UPROCK]

​@@ElenkaZP Понимаешь, я могу задавать какую угодно логику, и если она считывается сразу - пользователь разрешает мне устанавливать эти правила. В принципе, на мой взгляд всё довольно логично получилось. Но конечно, нужно запустить сайт, посмотреть как пользователи будут кликать по этим кнопкам, поварьировать, возможно, a/b тест сделать.

[@mansur_terla]

Привет! Можно посмотреть на этот кейс на бехансе? Ссылка?

[@UPROCK]

К сожалению, это только концепт, там одна страница и, скорее всего, кейса по ней делать не будем

[@slavalifehacker5873]

Благодарю! Давно интересовал вопрос: обложка «комплексная безопасность частных и юридических лиц» в начале сайта будет ведь вставлена фотографией? Просто не представляю, как можно ее сверстать, кроме как экспортировать в пнг и вставить на сайт

[@UPROCK]

Можно разместить их на сайте как тексты и svg-элементы, не думаю что у опытного разработчика это вызовет сложности

[@georgybakharev4645]

Серый вариант больше понравился. Напоминает газету. Вызывает ассоциацию с США начала XX века. Пинкертон все дела.

[@UPROCK]

Круто) да, есть такие ассоциации, точно

[@andrewkowriga]

Считается ли ошибкой когда мы используем на одном сайте разного вида кнопки (с закругленными краями и с прямыми)?

[@UPROCK]

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

[@alexeismirnov4483]

Спасибо, Евгений! Смотрел, открыв рот. Закрыл - в конце ролика.)))

[@UPROCK]

Класс, очень рад такому интересу) Пожалуйста)

[@КамильМиникеев-г5ъ]

А если в дизайне контейнер на 1700 пикселей? Это значит дизайнер сплоховал или могла быть задумка такая первоначально?

[@UPROCK]

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

[@ElenkaZP]

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

[@UPROCK]

Это просто нарисованная широкая буква, любые детали можете реализовать любыми средствами, какие Вам нравятся, это совершенно не принципиально. Самое важное это общие принципы логики, композиции и соответствия потребностям пользователя)

[@alexst2571]

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

[@UPROCK]

Благодарю, это плоды лет упорных тренировок

[@аой-в4ы]

привет, спасибо за хороший контент!) подскажите, что за шрифт на старой версии сайта?

[@UPROCK]

Привет! Всегда пожалуйста) Шрифт Circe был на старой версии

[@МаксимШустов-ш3т]

А для чего нужно подбирать ширину контейнера под одно устройство? В чем будет разница макета шириной 1600 и 1440?

[@UPROCK]

Привет! Никакой разницы, кроме того момента, когда рисуешь контейнер на 1200 а холст 1600 ты типа понимаешь как он будет выглядеть и на маленьких мониторах и на больших

[@АрсланТурдалиев]

Круть, но очень хотелось бы посмотреть на мобильные и планшетные версии дизайн работ

[@UPROCK]

Привет! Уже выложил в своем телеграм-канале t.me/evgenyuprock

[@vidna1825]

Добрый день, очень понравилось ваше оформление сайта) Но подскажите пожалуйста, почему ширина контейнера именно 1440 px, а не 1920px например? Где-то пишут 1200px. От чего зависит выбор ширины контейнера и как выбрать нужную ширину? И как вы рассчитываете высоту экрана, чтобы контент входил в один экран и его не приходилось скролить? Нигде не могу найти грамотный и развернутый ответ на этот вопрос, везде пишут по-разному(

[@UPROCK]

Здравствуйте! Спасибо за отзыв🙏 Раньше мы чаще всего использовали контейнер 1200, сейчас чаще всего используется 1400 как исходный. Выбор ширины контейнера всегда зависит в основном от разрешений наиболее популярных на данный момент устройств. Чаще мы начинаем с 1400, потому что его легче спроектировать и впоследствии сделать дополнительный брейкпойнт на 1920, чем наоборот. Что касается высоты экрана - здесь мы расчитываем её исходя из соотношения сторон 16:9, а при передаче разработчику просим, чтобы он добавил опцию, когда высота обложки всегда занимает 100% экрана.

[@vidna1825]

@@UPROCK Спасибо большое за такой полный и развернутый ответ!)

[@ЕвгенияТкаченко-т5й]

Женя, а что за шрифт в новом редизайне?)

[@UPROCK]

Привет! Это шрифт Manrope. Он бесплатный и рекомендую качать его с официального сайта, вариант с гугл фонтс по какой-то причине работает с figma некорректно.

[@ilyanasedkin]

Крутой макет получился 👌 Просто, стильно и со вкусом 👍

[@UPROCK]

Спасибо🙏

[@bagtroll6587]

ГЕНИЙ!!!

[@UPROCK]

евГений)) или маэстро) (это реверанс в сторону Панасенокова)

[@tonynolovebaby]

Как всегда, на высоте! Спасибо за такой контент :)

[@UPROCK]

Кайф, всегда пожалуйста)

[@konstantin_davydov]

Женя здравствуй. Как всегда отличный выпуск! У меня два вопроса: 1) Сейчас такие вертикальные меню - это что-то новомодное? 2) Такое расположение геолокации обосновано направляющей или чем-то другим?

[@UPROCK]

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

[@konstantin_davydov]

@@UPROCK спасибо! По поводу 1-ого пункта, такое решение только у вас пока видел, по этому и заинтересовался.

[@edwardgrom2207]

Все очень здорово! Спасибо за видео!!!

[@UPROCK]

Очень рад) Пожалуйста)

[@user-io5.56]

Жень, ну как всегда Бомба! :)

[@UPROCK]

Спасибо🙏

[@rustamshabanov2192]

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

[@UPROCK]

Супер, очень рад🔥

[@VasiliiTIRELL]

Бомба как всегда!

[@UPROCK]

Спасибо)

[@deemulya]

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

[@dsgn_ed]

Здесь стоит учесть, что это нереальный проект. Поэтому нет информации о ЦА компании, нет правок со стороны заказчика, который бы мог понять «детско» ли это для них или нет. Понимаю, что это сугубо твое мнение. Просто хочу донести, что без понимания позиционирования компании нет смысла что-либо утверждать. А вот предлагать решения (что в видео и происходит) это то, что нужно! По сути, это концепт, который, вполне, имеет место быть. А еще это Ютуб видео, которое должно быть интересным)

[@UPROCK]

@dsgn_ed Привет! Ты очень правильно всё объяснил, спасибо большое. Это действительно концепт, единственный нюанс, чем сильно отличаются мои концепты от других - я отталкиваюсь от своего реального опыта и комбинирую его: если бы ко мне пришёл реальный клиент, именно так я бы и сделал ему этот дизайн. По поводу правок клиентов, так как я имею сильную аргументационную базу, у меня правок практически не бывает, за исключением случаев, когда клиент сам забывает внести какой-то важный контент. Саму структуру мы никогда не корректируем. А по поводу автора коммента, которому ты ответил - честно говоря не вижу какой-то сухой конкретики в этом, только эмоции 🤷‍♂️

[@ГеоргийХабелов]

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

[@UPROCK]

Здравствуйте! Ну во-1х, это решение взято не с потолка, оно достаточно популярно и встречается на уже реализованных сайтах. Во-2х, поправьте меня, если я не прав, но то что Вы перечислили не звучит как что-то сверхъестественное для квалифицированного специалиста, скорее как просто работа. Ну и в-3х Вы сами сказали что это возможно и Вы понимаете сколько времени потребуется заложить на реализацию🤷‍♂️ p.s. тоже рад что отказался от разработчиков и такие лендосы теперь безо всяких проблем у меня делают дизайнеры на webflow)

[@ГеоргийХабелов]

@@UPROCK да, я и сказал, что все реализуемо, у нас, например, дизайнер часто юзает скошенные блоки, и я нашёл быстрое решение для реализации таких блоков. Тут вопрос во времени потраченном на реализацию, заказчику не всегда удобно, когда лэндинг делается неделю в отличии от 2 дней, так как просто есть элементы, которые не очень обязательны, но требуют большего времени на реализацию. Я описал просто неприятный момент для верстальщика, это не критично когда есть задача сделать именно увлекательный и особенный дизайн) ПС: про webflow сказать нечего не могу, так как не сталкивался, но тильда этот тот ещё кошмар в плане оптимизации работы сайта. В вэбстудии много раз переверстывал сайты с тильды, так как они гораздо медленнее в производительности, чем нативный html и css. Так же есть сложности с добавлением микроразметки и подобных сеошных штук.

[@UPROCK]

@@ГеоргийХабелов там из сложных декоративных объектов только заголовки в нескольких блоках, так что думаю несложно будет сверстать весь сайт По остальному с вами соглашусь, спасибо, что так подробно ответили

[@eugennaumov1860]

Лайк!

[@UPROCK]

Благодарю)

[@iNikoweb]

Взял и сериал заспойлерил :)

[@UPROCK]

Да, я такой) Надеюсь, простишь меня

[@iNikoweb]

@@UPROCK Ладно, прощаю)

[@ЮлияХасаншина-п3ы]

Бомбически круто! Каждый раз придумываешь что-невероятное)) 🎉

[@UPROCK]

Очень стараюсь) Рад, что контент заходит)

[@anastasiya_n]

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

[@UPROCK]

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

[@perezalivation6033]

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

[@renatarimov6416]

Ох, из-за таких как вы, мы и имеем плохой дизайн ((((

[@perezalivation6033]

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

[@UPROCK]

Если Вы сами считаете концепт красивым и логичным, какие доводы ещё нужны? Если требуются какие-то дорогие UX-исследования - я Вас огорчу, они проводятся только на очень больших сервисах, обычно дешевле запустить mvp и проверить гипотезы. Мои гипотезы построены на моём 20-летнем стаже дизайнера, руководителя студии из топ-30 и на большом количестве запущенных реальных проектов.

[@perezalivation6033]

@@UPROCK понял, спасибо

[@perfect_evil7961]

Софистика, ваш верный спутник, при проектировании подобного дизайна.

[@UPROCK]

Как скажете)

[@kuptsov_design]

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

[@UPROCK]

В проекте используются 2 вида кнопок. Фиолетовые кнопки на контрасте с угловатыми контентными блоками говорят: "обрати на нас внимание". Дочерние кнопки уже не такие критичные и ближе к стандартным блокам на этом сайте, они с одной стороны уже не настолько важны, поэтому немного прячутся, но всё же они кнопки, поэтому фиолетовые)

[@kuptsov_design]

@@UPROCK спасибо за ответ, теперь стало понятней)

[@UPROCK]

@@kuptsov_design Всегда пожалуйста, рад помочь)

[@Elena-p3x]

Женя, это допустимо, что кнопки и скругленные, и ровные в одном макете?

[@UPROCK]

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

[@modernodj]

Брутально, но по кайфу! :D

[@UPROCK]

Очень рад) SPRUT тоже доволен😀

[@vald_lavv]

Ты че на угаре , мужик?

[@ДамирХайруллин-ж3н]

А что не так?

[@MaBrg1]

Почему?

[@vald_lavv]

@@ДамирХайруллин-ж3н сайт трешовый с точки зрения сео, юзабилити и тд

[@UPROCK]

@@vald_lavv еще добавь умных слов, чтобы выглядеть убедительнее)

[@vald_lavv]

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

[@abdumalikabduvakhidov]

Хотел подать идею, а что если брать рандомные Ру сайты из разных сфер и редизайнить их (Для студентов) таким образом можно охватить большую часть рынка, после редизайна отпраляется предложение владельцу сайта @uprock

[@UPROCK]

Привет! возможно, так мы и будем делать)