Рисуем сайт с объяснениями от арт-директора по реальному ТЗ [Re-Design]

[@UPROCK]

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

[@belinskiyweb]

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

[@UPROCK]

Очень рад, что понравилось) Теперь будет по ролику каждую неделю, главное чтобы вы не устали от них!

[@Milena_makeit]

@@UPROCK звучит просто супер!!!

[@maxroshin]

@@UPROCK кайф!

[@UPROCK]

@@maxroshin спасибо)

[@НатальяСтен]

@@UPROCK Никогда в жизни не устанем! Такие ролики очень нужны. ОЧЕНЬ! Спасибо за них!

[@UPROCK]

Салют! Как вам видео? Получается держать планку и делать самые полезные видео о дизайне на KZbin?

[@leraskdn]

Интересный крутой урок! Хотелось бы ссылку на макет, чтобы в живую всё посмотреть

[@Clock_er]

Так просто всё, хоп хоп, а на самом деле сколько надо опыта чтобы всё предусмотреть и сконструировать, хочется так же...)

[@invictusonline2123]

Евгений, добрый день, я являюсь студентом вашей школы, не сочтите за глупый вопрос - Заголовок h1 (Ballet/Studio), после того как его сделали шрифтом который используется в данный момент и увеличили высоту шрифта (слэш сливается с буквой D). Не является ли это ошибкой? Или это вообще является фишкой?) Поскольку по моей логике это немного портит визуал и там в теории нужно или увеличить интерлиньяж или убрать слэш. Спасибо :)

[@AniyaKr98]

Очень компактно и полезно! Особенно сочетание цветов нравится и текстура фона

[@Chihuahua-du5zx]

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

[@July-beauty]

Получился обалденно - уникальный сайт ! Евгений - Вы потрясающий дизайнер !

[@UPROCK]

Спасибо большое, Юлия! 🙏

[@anastasiabezzubova1496]

Евгений, здравствуйте! Как интересно послушать процесс разработки, все по делу. Спасибо! Хочу отметить, как улучшилась у вас дикция и манера рассказа. Браво! Уже учусь в вашей школе и кайфую! Это просто топчик!

[@maryiavaloshka6961]

Ну все, Евгений, я давно смотрю на уровень дизайна студентов Uprock и работ в Ваших видео, иду учиться в Uprock! Если русскоговорящий веб будет выглядеть так, как Вы тому учите, я наконец-то начну спать спокойно. Настолько со вкусом и с умом, что я не нахожу Вам равных! ✨

[@UPROCK]

Салют, Мария! Спасибо Вам за такой позитивный, воодушевляющий коментарий, добро пожаловать к нам в клан) Будем вместе работать над светлым будущим нашего дизайна👍

[@НинаГращенкова-и8к]

мало того, что полезно, так еще и приятно слушать хорошую аргументацию и логику построения проекта:)))) супер!!!

[@UPROCK]

Спасибо) Рад что Вам по душе моя аргументация)

[@stanislavak7778]

Ёмкий и крайне полезный урок. Очень понравилось, что в 13 мин поместились, очень понравился финал - был сайт (слева) и стал сайт (справа): очень наглядно и понятно. Спасибо Uprock) Хочу ещё!!)))😊

[@UPROCK]

Станислав, спасибо! Ждите новое видео на следующей неделе)

[@NoName-wi5jp]

Это самый полезный и информативный канал о дизайне!!! Спасибо большое, Евгений!

[@UPROCK]

Рад, что мои материалы приносят Вам пользу, спасибо!

[@lokumfamily]

Шикарно🙌 Получилось действительно супер стильно! Цвета, типографика, композиция - просто песня🤩 Спасибо Евгений!

[@UPROCK]

Очень рад, что проект понравился) Пожалуйста☺️

[@Clock_er]

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

[@UPROCK]

Привет, Сергей) очень рад, что всё нравится. Буду и дальше развивать и улучшать программу!

[@Milena_makeit]

Полностью согласна

[@Elena_Shipovnik]

Жень супер. Классная подача, коротко не нудно и всё по делу... Давай ещё!!!

[@UPROCK]

Елена, спасибо, непременно) теперь рубрика будет регулярной

[@Freefire-op1hu]

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

[@UPROCK]

Спасибо! классно, что ты с нами)

[@qaigymoon]

С возвращением Евгений, очень крутой проект снял отличная задумка, неповторимый Uprock Ninja

[@UPROCK]

Спасибо! Впереди ещё много крутого контента и новые рубрики)

[@miloyeimya2816]

7:00 В блоке с СТА на фоне фотографии слово Education плохо читается, почему это хорошее решение?

[@UPROCK]

Потому что в этом блоке критически важен именно контент и нет необходимости привлекать больше внимания к заголовку

[@R2D3u]

Мне очень нравится ваша рубрика редизайна. Благодарю вас!

[@UPROCK]

Рад, что угодил Вам. Теперь такие видео будут выходить регулярно)

[@bogdanpavlov2754]

Большое спасибо за труд!Очень нравиться формат, удовольствие для глаз! Хотелось бы посмотреть как в мобильной версии с сеткой работать :)

[@UPROCK]

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

[@matteriya6637]

Супер, хочется видео о том как собирать ui kit на каком этапе и т д ❤

[@UPROCK]

Привет! заказ принят, обязательно расскажу в каком-нибудь из следующих выпусков. Спойлер: по факту это просто много утомительной системной работы)

[@alexeismirnov4483]

Отлично. Понравилось. Всегда интересно смотреть работу Мастера.

[@UPROCK]

Спасибо 🙇

[@КсенияСпесивцева-ы7в]

Женя, это вау! И очень удобный формат, ждем еще!

[@UPROCK]

Спасибо, Ксения! через неделю будет новый выпуск

[@data19101988]

Не очень понимаю приема в блоке Early kids' studies: почему фото перекрывает нумерацию. Первое впечатление, что просто забыли убрать на задний план...

[@UPROCK]

В статике фотографий нет, они появляются там только при наведении на строки: в макете отображено именно это состояние

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

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

[@UPROCK]

Подход это главное, с ним нет невыполнимых задач) Спасибо, Никита!

[@АртёмШвачка-е3ъ]

крутой дизайн. логика происходящего на высоте. спасибо.

[@UPROCK]

Спасибо, Артём! Без логики сделать крутой дизайн не получится, Ваша правда)

[@linali2246]

Спасибо большое, Евгений! Очень ценная информация! ❤

[@UPROCK]

Всегда классно поделиться ценной информацией с друзьями) Спасибо!

[@nataparfyonova]

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

[@UPROCK]

Салют! Как говорил Саша Лагута в интервью, не копировать, а вдохновляться) Я бы посоветовал при необходимости повторять работы из уроков, "набивать руку", смотреть сами уроки, анализировать, находить закономерности. А в портфолио размещать проекты, над которыми Вы поработали таким же образом, как я над проектами в уроках. Такой процесс будет гораздо полезнее и позволит расти быстрее)

[@Милыедомашниепитомцы-ц7ы]

Добрый день, скажите пожалуйста можно делать сайт в тильде на айпаде?

[@UPROCK]

Привет! Не рекомендую, такие устройства плохо подготовлены для подобных задач

[@xeniaartsman]

Отличный формат, спасибо!

[@UPROCK]

Спасибо, Ксения! Будем поддерживать и развивать его дальше)

[@ibramarh]

Добрый день! Возник один вопрос: почему не используете колонки в инструментах справа, а рисуете линейки?

[@UPROCK]

Здравствуйте, Ибрагим! Теоретически, в данном проекте можно было бы использовать колонки. Практически, при работе с нестандартными сетками, пользоваться этим инструментом не выйдет, поэтому лучше привыкать не к нему, а к направляющим. Весь дизайн строится по ним

[@jackProtasow]

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

[@UPROCK]

Привет! Мы всё делаем в Figma)

[@Милыедомашниепитомцы-ц7ы]

Добрый день, скажите пожалуйста, где сайт верстается в тильде?

[@UPROCK]

Здравствуйте! В Тильде есть блок под названием Zero Block, в нём можно "сверстать" собственный дизайн

[@Милыедомашниепитомцы-ц7ы]

@@UPROCK Спасибо большое!

[@edwardgrom2207]

Большое спасибо за такой формат! Очень крутая работа!!! Если не секрет, как называется шрифт в заголовке?))

[@UPROCK]

Привет! Пожалуйста, очень рад, что видео заходит) не секрет, шрифт называется Ogg Roman

[@mairmoss]

офигенная рубрика и сайт😍

[@UPROCK]

Очень рад, что понравилось)

[@aleksandrsolomonov9042]

Интересно. Не могу принять наезд фото на контент в блоке Early Kids studies и всё. Не нравится.

[@UPROCK]

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

[@Milena_makeit]

Большое спасибо! Все четко) подскажите, как сделать такую текстуру фона?

[@UPROCK]

С помощью плагина noise

[@Janna_Fatum]

После дизайна сайта работу передаете программистам сайтов ?

[@UPROCK]

Такой дизайн вполне можно сверстать и самому в webflow)

[@howisyourcat8316]

очень нравятся такие видео! только почему то именно на этом качество выше 360 не ставится((

[@UPROCK]

пару минут и видеодорендерится, тогда будет доступно HD

[@kasdekjh]

Мне кажется не выгрузилось до конца видео)

[@UPROCK]

Теперь все хорошо)

[@howisyourcat8316]

@@UPROCK супер!

[@youVolos]

Вдохновляет! Отлично!!!

[@UPROCK]

Спасибо🙏

[@4ernomor]

Круто, оч понравилось!)

[@UPROCK]

Спасибо, Анатолий!

[@СвятославКазаковцев]

Гениально!)

[@UPROCK]

Спасибо🙏

[@anastasiya_n]

очень круто получилось! Подскажите, пожалуйста, а как сделать такую текстуру у фона? Специальный плагин?

[@UPROCK]

Спасибо! да, при помощи плагина noise

[@DaniilFrank]

Интересно было бы и остальные страницы глянуть)

[@UPROCK]

Подождите немного, проект будет опубликован)

[@helgaryzhenkova760]

Очень красиво получилось

[@UPROCK]

И красиво и функционально - всё как мы любим)

[@maybeeva1]

Обожаю!! Единственное, не поняла, почему часть текста (нумерация списка, например или в блоке Art/Education) перекрывается фотографией. Как делаются отступы по фотографиям - на глаз?

[@UPROCK]

Спасибо) В блоке со списком фотографии отображаются только при наведении на один из пунктов

[@ВикторияЧернякова-п8ф]

Круто получилось 🖤

[@UPROCK]

Спасибо🙏

[@Totentanz1524]

где автолейауты?

[@UPROCK]

Сокращены, чтобы быстрее записывать скринкасты) Об использовании автолейаутов можно узнать из нашего бесплатного курса по фигме kzbin.info/aero/PLgP78sMGTxfBnHmM4UE1KM8R7MdzFdLox

[@nicktsy]

Формат крутой 👍 Мне кажется, в текстовых блоках также неплохо бы смотрелся темно-серый цвет шрифта вместо красного, чтобы заголовки и СТА получали дополнительный контраст.

[@UPROCK]

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

[@Prima_filiip_]

Спасибо за видео!🌻

[@UPROCK]

Теперь будем радовать такими регулярно)

[@ludmila_lm7076]

Евгений, большой респект и спасибо!) Только задам пару вопросов: 1) Заголовки. Это приём в вебе, что заголовки на данном сайте либо крупные, либо мельче? 2) На розовом фоне слово education как вы считаете достаточно видно? (мне просто показалось, что верх фотографии темный, и надпись темная). Или такой вариант вполне допускается? Благодарю Вас, если ответите :)

[@UPROCK]

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

[@narekaghavelyan7246]

Супер

[@UPROCK]

Спасибо🙏

[@ЮлияБирюкова-н9ж]

Очень очень круто!!!

[@UPROCK]

Юлия, очень очень рад))

[@khrustalev_creative]

Получилось супер! Благодарю за полезный контент. Жень, можно уточнить про переключение языка? Далеко не у всех гарнитур есть широкая языковая поддержка, особенно это касается декоративных. Следовательно при автоматическом определении языка операционной системы, может быть такое, что символы на сайте не будут отображаться или будут отображаться некорректно. А если мы делаем ручной выбор языка (универсальный английский и несколько предполагаемых целевых языков) мы избегаем данной проблемы с отображением символов. Плюс разработчики сайта могут сами настроить перевод, например декоративные заголовки оставлять на английском, если гарнитура не поддерживает языки, а для наборных сделать перевод. Поправь, пожалуйста, если я заблуждаюсь. Мне очень важно разобраться в этом вопросе. Спасибо.

[@UPROCK]

Привет! Нет, не заблуждаешься, ты всё верно написал)

[@PINpiter]

Классный редизайн!

[@UPROCK]

Сам доволен этим результатом) Спасибо, Натали!

[@alex_pivko]

Шик 🎉

[@UPROCK]

Спасибо🙏

[@sergeis4287]

Шик! Непонятно только как контейнер 1400 верстать - у большинства старых ноутбуков 1280 и 1300+ разрешение.

[@UPROCK]

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

[@olgapastukhova2017]

Очень круто. Можно ли учиться с 0?

[@UPROCK]

Да у нас все почти с 0

[@alex_pivko]

Ооо, 5 колонок)

[@UPROCK]

Фишка не в колонках, а в их группировке и принципах расположения контента)

[@Totentanz1524]

Как ты хитро сетку сделал )

[@UPROCK]

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

[@daryashkatimka7814]

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

[@UPROCK]

Здравствуйте, Дарья! Всегда рад, когда эксперты Вашего уровня не обходят вниманием мой скромный блог

[@MasconeUSER]

Объясните мне почему он колонки делает гридами?)0

[@UPROCK]

Потому что я пользуюсь только направляющими, здесь нарисовал колонки для таких староверов, как вы)

[@vvv_vvv_vvvj]

А зачем все эти танцы с бубнами в начале, не проще ли в автоматическом режиме настроить колонки и строки, чем делать несколько ненужных манипуляций?

[@Tafratov]

Проще) тоже заметил, что Женя любит использовать направляющие, вместо grid инструмента, думаю выработалась привычка со времён дизайна в Фотошопе, там были эти направляющие

[@vvv_vvv_vvvj]

@@Tafratov кайф, так и поняла, что у каждого дизайнера есть свои фишки, которые другим кажутся чем-то необычным:)

[@v1c5L3-n5c]

Могу ошибаться, но стандартный инструмент фигмы никадывает только равномерные и симметричные колонки. Вот сейчас делаю нестандартную сетку, и соотношение у ней такое: 25 пкс от края контейнера, первая колонка 275пкс (под заголовки-дивайдеры) вторая 580пкс, затем гаттер на 30 пкс и за ним еще две колонки на 540 и 135пкс. Такое можно повернуть стандартным Лайаут-гридом, но это нужно будет кидать 2, а тои три слоя...всё высчитывать...жуть. Легче прямоугольниками накидать напрявляйки.

[@UPROCK]

@@v1c5L3-n5c так и есть, направляющие это большая свобода, тем более дизайн в интерфейсах выстраивается по ним, а не по колонкам. Вообще весь этот дизайн можно было сделать только по направляющим. Но я постарался это объяснить с более привычной концепции для многих.

[@v1c5L3-n5c]

Кто не узнал, в этот раз на аватарке в конце видео был Карл из сериала "Ходячие мертвецы". Карл из того мема, Карл!))

[@UPROCK]

Действительно, недавно пересматривал этот сериал) На очереди Губернатор)

[@lllarsenalex]

Бомба))

[@UPROCK]

Класс) Рад, что понравилось!

[@RoosMoos88]

Что было - так НЕ выглядит и даже 0,1% интернета. 99,8% всех сайтов всего интернета это лютейший и унылый ад из 1996 года. Было хорошо и стала хорошо - по сути дизайн на дизайн в версии web 3.0

[@UPROCK]

Ну если делать хорошо - то по-максимуму) Спасибо!

[@galina_sosnovskaya]

🔥🔥🔥🔥🔥

[@UPROCK]

Спасибо, Галина!

[@eugennaumov1860]

Лайк!

[@UPROCK]

Ура! Больше лайков богу лайков👍

[@yuliiakochurovski5891]

❤❤❤

[@UPROCK]

Юлия, спасибо!

[@anastasiak.3606]

Дизайн отличный, спасибо большое за видео. Только одна вещь портит общее впечатление - неправильный английский. Куча лексических и грамматических ошибок. Это очень удешевляет работу.

[@UPROCK]

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

[@serrgibio]

Amazing

[@UPROCK]

Спасибо, Сергей!

[@markfalcon9372]

85% заходят с мобильника, и вся ваша красота нах никому не нужна

[@UPROCK]

То есть у тебя нет компьютера дома и ты все с телефона смотришь?

[@alexanders.1966]

было лучше, и да, в фигме можно настроить сетку в 2 клика

[@UPROCK]

Спасибо за ваше мнение! Про сетки можете посмотреть чуть ниже ветку комментариев)

[@АртемАнуфриев-щ9у]

Как по мне старый дизайн был лучше. Автор сам себя перезванивает, за то как у него удачно блоки получается.

[@UPROCK]

Ну тебе, как девственнику виднее)

[@АртемАнуфриев-щ9у]

@@UPROCK ещё и агрится на критику.

[@UPROCK]

@@АртемАнуфриев-щ9у не душни, пожалуйста, я по доброму шучу) Пришли лучше свое портфолио и беграунд, надо же понять от чего ты отталкиваешься)