Копируем лендинг в Figma. Учимся веб дизайну на чужих работах.

В этом видео я покажу, как повторять работы других дизайнеров в Figma. Мы будем копировать лендинг для того, чтобы понять, как подходят к работе над макетом опытные веб дизайнеры.
Таймкоды:
0:20 - Где брать интересные работы
0:38 - Готовим необходимые плагины для браузера
1:34 - Выбираем сайт, который будем копировать в фигма
1:46 - Делаем скриншот
2:13 - Копируем изображения
3:31 - Конвертируем шрифты и изображения
4:45 - Работаем с направляющими в Figma
5:46 - Приводим сетку в порядок
7:27 - Рекомендации по началу работы в Figma
7:47 - Делаем первый экран лендинга
11:32 - Второй экран
12:51 - Копируйте только то, что интересно
Ссылка на проект в Figma:
www.figma.com/...
Все права на дизайн, тексты и изображения принадлежат Aesop. Работа сделана исключительно в образовательных целях.
Где бесплатно учиться веб-дизайну:
• Веб дизайн с нуля. Как...
Подробный разбор иллюстрации в Photoshop:
• Коллаж в photoshop. ПО...

[@АндрейСтепаненко-о5х]

Это сразу подписка,прежде всего нужно учиться увидеть "картину"целиком,детали потом сами "лягут"куда надо,ну и конечно,практика практика и ещё раз практика🙂

[@urhorattel]

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

[@tatyanamoiseenko6568]

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

[@DoFurther]

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

[@ЛевБерезянский-п4ш]

@@DoFurther Каким образом можно накопить опыт фрилансеру в UX исследованиях, кроме знаний стандартных паттернов, когда нет ресурсов для организаций этих самых исследований

[@DoFurther]

@@ЛевБерезянский-п4ш по сути есть два пути. Первый - устроиться в компанию, где проводят подобные исследованию пусть даже стажером. Второй (более сложный) - начать проводить исследования самому. Просто брать сайты в какой-то теме и проводить тестирования. Если не хватает знаний, то можно посмотреть канал NN Group, там много рекомендаций на эту тему.

[@AnklaveRif]

Спасибо, что поделился рабочими инструментами!)

[@DanilKorostin]

Шикарное видео! Так мало людей которые всё так круто и без заморочек делают)

[@ЖанМурзин-х4щ]

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

[@katenaumova2914]

Спасибо за полезное видео. Было интересно увидеть ваш процесс. Подметила для себя отдельные фишечки :) Хорошее упражнение. Как у художников - копировать великие произведения классиков, дабы набить руку.

[@Nikisha_H]

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

[@DoFurther]

Спасибо за подписку )

[@irinlio]

СУУПЕР. Спасибо 🙏🏼 ОГРОМНОЕ. ВЫ МОЛОДЕЦ

[@maxvol950]

спасибо что показали полезные фичи! не останавливайтесь)

[@MaxSaveskul]

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

[@dariashmelevod1286]

Спасибо, ценная инфа и подача отличная)

[@anniepaliivets]

Спасибо большое за крутое и информативное видео! Лайк, подписка однозначно!

[@ИванКлименко-й3ч]

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

[@Foxpoxcrox]

Спасибо, очень полезные сайты подсказали, раньше о таких не слышала))

[@kseniiaskripel1386]

Все очень понятно) Спасибо, надо пробывать :))

[@annlarionova4153]

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

[@Чернаямамба-д4г]

Спасибо за такой крутой и понятный туториал! Привет от ТЕЛЕК ТЕЛЕК👋🏻

[@СергейКондулуков-з9ч]

Автору спасибо за интересное видео.

[@Фил-ч7ч]

Круто! спасибо за расширения!

[@margoritasorokina]

интересные штуки нашлись) спасибо

[@oksanavictorivna7809]

Круто, прям то что нужно, спасибо!)))

[@TheSadownikChannel]

Большое спасибо, очень познавательное и интересное видео.

[@tapok1991]

Подача шикардос!!!!

[@samfe1800]

Харош, спасибо за видео, лайк определенно)

[@lanka77779]

Благодарю!

[@OksanaTsyganii]

Спасибо!

[@Midi25]

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

[@meirbekanuarbek2265]

Круто! понятие не имел что так можно было

[@AchtungBaby_87]

расширение image screenshort почему делает в разной ширине скрин экрана а не в текущем 1920? не нашел настройку у него такую...

[@yulialeonova8546]

В 2 раза медленнее скорость вклчать и норм)

[@amhlaoibhoheideain2721]

Отличное видео! Можете подробней раскрыть про 8pt систему? Как вообще ей пользоваться, какие принципы и тд! Спасибо!

[@DoFurther]

Спасибо. Чтобы не дожидаться пока я сниму видео, можешь глянуть на официальном сайте: material.io

[@DanilKorostin]

И главное очень полезно!

[@ThroughWild]

Крутышка😍❤❤❤

[@FernandoVegasChannel]

Самая крутая техника обучения. Я сам по ней обучаю. Это на основе своего опыта, когда я смотрел на рекламу, видеоролики и воспринимал их не как все, а со «взглядом художника». Ты в голове разбираешь рекламу или видео на элементы и думаешь, смог ли ты бы так и как ты бы сделал еще круче. Ученики выходят на 1к$ за месяц. Поток первых 5-10 клиентов уже через 2 недели с нуля. Этим подтверждаю тех, кто так советует. Копируйте, учитесь делать крутые по вашему мнению работы. Дизайн ахуенная и пустая ниша а пол мира еще таргетологами стают, но нам и лучше.

[@bogdanbarna2949]

Дуже корисно. Дякую.

[@НаташаЛагодзя]

Спасибо!!!!!

[@grgol6084]

спасибо за видео, класс!

[@cremecorp]

Хороший обучающий материал. Будет полезно. Спасибо! Можете подсказать какой шрифт используете для текста на обложек ваших видео?

[@DoFurther]

Nazar Kulikov спасибо. По шрифтам подойдет adieu или termina

[@Oleksandr_Nitsenko]

Привіт! Дякую тобі за чудовий урок! Підкажи, будь ласка, якщо взяти фото або рендери, наприклад з kickstarter або з іншого ресурсу з реальним продуктом. І використати в дизайні макета веб-сайта та викласти в портфоліо, чи я таким чином порушуватиму авторське правило?

[@panfilovlife7037]

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

[@Oleksandr_Nitsenko]

@@panfilovlife7037 Дякую, вам за відповідь)

[@Natalia-vk1qf]

Спасибо за видео. Очень информативно. Только я не поняла как появляется окно при нажатии на F12, где можно скачивать изображения?

[@DoFurther]

Оно появляется, если нажать клавишу F12 в браузере Chrome.

[@маринаиванова-г8м]

@@DoFurther почему когда я нажимаю кнопку F12 в ноутбуке -выходит режим авиа режим)))))

[@eklerrr]

@@маринаиванова-г8м f-клавиши они же function клавиши в современной раскладке имеют даа режима переключаемые специальной клавишей обычно название ее fn. Можно погуглить об этом и как поменять режим по умолчанию

[@narangel100]

почему в фигме пример макета с сайта в гавно качестве? причем до все четкое, текст фотки, как добавляю в фигму в пдф формате то там все в квадратиках

[@milena6411]

Не могу конвертировать шрифт .woff2 в .otf на том сайте. Выходит ошибка. Говорится "Only woff, Woff, WOFF files are supported" :(

[@DoFurther]

Просто загугли еще какон- нибудь сайт по запросу: woff2 to otf

[@roadster8674]

Лучший

[@kotnewman1537]

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

[@ui.jahongirov]

есть вопросы, в awwwords есть сайты с 3D элементами + анимированные при скроле, как дизайнер должен предоставит такие материали?

[@DoFurther]

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

[@ui.jahongirov]

@@DoFurther Буду ждать)

[@К.Большой]

Ответ уже есть? Где можно посмотреть

[@alexkep8129]

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

[@DoFurther]

woff формат нужен для отображения кастомных шрфитов в вебе.

[@MrKnifeGuy1000]

А как ты вставил картинку в область

[@DoFurther]

можешь таймкод добавить? Не совсем понимаю в чем вопрос.

[@ДмитрийСергеевич-о1м]

лайкОС

[@antonioificationful]

c 8 минуты ничего непонятно

[@TheGreg474]

ссылка на фигму не рабочая :(

[@DoFurther]

Вечерком гляну. Спасибо, что предупредил.

[@seoonlyRU]

лукас с ходу от СЕООНЛИ

[@ОксанаРеу]

Спасибо!

[@ДмитрийМалинин-в4о]

Спасибо!!!!!

[@ОльгаСаранова-й3у]

Спасибо! Поняла, что до этого малоэффективно упражнялась в копировании чужих работ. Классные фишечки💥

[@TashaDi]

Круто, дякую)))

[@SinwiseAM]

Мерси за плагинчики :) Залипла прям на вашем канале)

[@yurakryvyzkiy3308]

Полезный подход, взял на заметку. Может ещё пригодиться в figma модуль HTML to Figma и после импорта наводить порядок со слоями.

[@DoFurther]

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

[@nekochano4ka]

Можно вопрос для совсем начинающего и непонимающего? Вы делаете прототипирование? Этим занимается графический дизайнер, веб-дизайнер или верстальщик? Если есть Figma, то зачем нужна Tilda и Flow?

[@DoFurther]

Проектированием занимается UX дизайнер. Фигма отвечает за графическую составляющую дизайн процесса. Для того чтобы дизайн работал в вебе нужен фронтенд разработчик или использование сервисов таких как тильда или webflow.

[@nekochano4ka]

@@DoFurther спасибо за ответ!

[@DoFurther]

@@nekochano4ka )

[@natanata2516]

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

[@максимогуенко]

Мне вот интересно как вымеряется отступ 6:17 и он 32px, следовательно, когда в figma именно вставлять текст то отступ будет меньше! И почему-то когда все делают такие видео молчат о том что в figma о пиксель перфект и речи не идет. Я уверен, что если этот скопированный макет сравнить с сайтом то текст поползет весь вниз

[@mdesign8409]

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

[@ЮлияКоломеец-д3ш]

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

[@thetextpesen]

спасибо вам большое очень было полезно))

[@АлександрЧкан-ч6и]

Благодарю! :)

[@alexanderchkan9068]

Благодарю :)

[@RMN885]

Ты крут

[@googlegoogle2111]

Как вставить в фигму скриншот веб страницы без потери качества картинки и размеров ?

[@DoFurther]

Паша, я хз если честно ) Я ориентировался на разрешение своего экрна по ширине. А на качество забивал.

[@googlegoogle2111]

Further, я разобрался) максимальный размер изображения в фигме 4096px по любой из сторон. Если изображение больше, то фигма уменьшает пропорции и снижает качество. Поэтому если скриншот веб страницы слишком большой, обрезаем его в фотошопе до 4096px, разбиваем на 2-3 изображения и вставляем поочередно фигму.

[@DoFurther]

О, спасибо, Паша. Буду знать )

[@litvin23]

Сейчас в Figma есть плагин, который позволяет вставлять большие изображения без потери качества.

[@К.Большой]

@@litvin23как называется где взять этот плагин

[@ПапасАлиной]

Спасибо

[@Wobchik]

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

[@DoFurther]

Учту. Я старался сократить по максимуму. Поэтому полтора часа скринкаста превратились в 14 минут.