Тёмный

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

Further
Подписаться 29 тыс.
Просмотров 48 тыс.
50% 1

В этом видео я покажу, как повторять работы других дизайнеров в 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/file/9AwQNUX8xG...
Все права на дизайн, тексты и изображения принадлежат Aesop. Работа сделана исключительно в образовательных целях.
Где бесплатно учиться веб-дизайну:
• Веб дизайн с нуля. Как...
Подробный разбор иллюстрации в Photoshop:
• Коллаж в photoshop. ПО...

Опубликовано:

 

9 фев 2020

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 103   
@urhorattel
@urhorattel 3 года назад
Игорь, браво! Классно, коротко, чётко без всяких лишних пауз! Снимаю шляпу реально в очень динамично хорошем темпе! Редкость у Российских авторах!
@AnklaveRif
@AnklaveRif 4 года назад
Спасибо, что поделился рабочими инструментами!)
@DanilKorostin
@DanilKorostin 4 года назад
Шикарное видео! Так мало людей которые всё так круто и без заморочек делают)
@user-sl4ce1rg2p
@user-sl4ce1rg2p 2 года назад
Спасибо! Поняла, что до этого малоэффективно упражнялась в копировании чужих работ. Классные фишечки💥
@dariashmelevod1286
@dariashmelevod1286 4 года назад
Спасибо, ценная инфа и подача отличная)
@MaxSaveskul
@MaxSaveskul 4 года назад
Очень крутое, динамичное и стильное видео, нескучно) Но всё же немного хотелось бы скорость убавить и более поподробнее детали, спасибо!)
@user-fe8er1vu6w
@user-fe8er1vu6w Год назад
Это сразу подписка,прежде всего нужно учиться увидеть "картину"целиком,детали потом сами "лягут"куда надо,ну и конечно,практика практика и ещё раз практика🙂
@maxvol950
@maxvol950 2 года назад
спасибо что показали полезные фичи! не останавливайтесь)
@annlarionova4153
@annlarionova4153 4 года назад
Спасибо за мастер-класс, очень полезно для начинающих веб-дизайнеров
@user-my4od1zk1b
@user-my4od1zk1b 3 года назад
Спасибо большое за видео! Пойду повторять. Очень много интересного.
@kseniiaskripel1386
@kseniiaskripel1386 3 года назад
Все очень понятно) Спасибо, надо пробывать :))
@alinamatiushyna4883
@alinamatiushyna4883 3 года назад
Мерси за плагинчики :) Залипла прям на вашем канале)
@katenaumova2914
@katenaumova2914 3 года назад
Спасибо за полезное видео. Было интересно увидеть ваш процесс. Подметила для себя отдельные фишечки :) Хорошее упражнение. Как у художников - копировать великие произведения классиков, дабы набить руку.
@oksanavictorivna7809
@oksanavictorivna7809 3 года назад
Круто, прям то что нужно, спасибо!)))
@irinlio
@irinlio 7 месяцев назад
СУУПЕР. Спасибо 🙏🏼 ОГРОМНОЕ. ВЫ МОЛОДЕЦ
@samfe1800
@samfe1800 3 года назад
Харош, спасибо за видео, лайк определенно)
@anniepaliivets
@anniepaliivets 3 года назад
Спасибо большое за крутое и информативное видео! Лайк, подписка однозначно!
@tatyanamoiseenko6568
@tatyanamoiseenko6568 4 года назад
Очень крутое и своевременное видео! Как раз собиралась попробовать копировать лендинги, чтобы руку набивать, и не совсем понимала, с какой стороны подступиться, а тут такой туториал. Спасибо большое!
@DoFurther
@DoFurther 4 года назад
Рад что помог. Пиши о чем еще было бы интересно узнать. Проблема в том, что многие чуваки, которые ведут каналы начинали фигачить дизайн более 10 лет назад. И о каких-то сложностях просто забыли. Я не исключение. Так что пиши, не стесняйся )
@user-ty1zo8uh1u
@user-ty1zo8uh1u 4 года назад
@@DoFurther Каким образом можно накопить опыт фрилансеру в UX исследованиях, кроме знаний стандартных паттернов, когда нет ресурсов для организаций этих самых исследований
@DoFurther
@DoFurther 4 года назад
@@user-ty1zo8uh1u по сути есть два пути. Первый - устроиться в компанию, где проводят подобные исследованию пусть даже стажером. Второй (более сложный) - начать проводить исследования самому. Просто брать сайты в какой-то теме и проводить тестирования. Если не хватает знаний, то можно посмотреть канал NN Group, там много рекомендаций на эту тему.
@user-uz3lp4cp1n
@user-uz3lp4cp1n Год назад
Спасибо за труд! Прохожу обучение на курсах по созданию сайтов. Как раз сейчас очередная проектная работа - сделать копию сайта в Figma. Правда все очень быстро происходит, но главное вы донесли идею, теперь я понимаю как подступиться к этой задаче ))).
@Foxpoxcrox
@Foxpoxcrox 3 года назад
Спасибо, очень полезные сайты подсказали, раньше о таких не слышала))
@Nikisha_H
@Nikisha_H 4 года назад
Полный гуд, брателло! За 10 минут легло в голову больше, чем за два дня просмотра разного и всякого... Подписался и в "колокол" тоже позвонил. 👍
@DoFurther
@DoFurther 4 года назад
Спасибо за подписку )
@user-ug5gj1kz8x
@user-ug5gj1kz8x 2 года назад
Круто! спасибо за расширения!
@user-bi9ql8qc2n
@user-bi9ql8qc2n 3 года назад
Спасибо за такой крутой и понятный туториал! Привет от ТЕЛЕК ТЕЛЕК👋🏻
@user-ld7yk4no6z
@user-ld7yk4no6z 2 года назад
очень понравилась идея, сразу прокачка насмотренности и хардов)
@user-qh5fr3yo1w
@user-qh5fr3yo1w Год назад
Автору спасибо за интересное видео.
@TheSadownikChannel
@TheSadownikChannel Год назад
Большое спасибо, очень познавательное и интересное видео.
@tapok1991
@tapok1991 2 года назад
Подача шикардос!!!!
@margaritasorokina9995
@margaritasorokina9995 2 года назад
интересные штуки нашлись) спасибо
@thetextpesen
@thetextpesen 2 года назад
спасибо вам большое очень было полезно))
@lanka77779
@lanka77779 4 года назад
Благодарю!
@meirbekanuarbek2265
@meirbekanuarbek2265 4 года назад
Круто! понятие не имел что так можно было
@DanilKorostin
@DanilKorostin 4 года назад
И главное очень полезно!
@natanata2516
@natanata2516 3 года назад
Спасибо, супер!
@grgol6084
@grgol6084 3 года назад
спасибо за видео, класс!
@ThroughWild
@ThroughWild 3 года назад
Крутышка😍❤❤❤
@user-sf9jc2cl9g
@user-sf9jc2cl9g 2 года назад
Благодарю! :)
@TashaDi
@TashaDi 4 года назад
Круто, дякую)))
@user-fr2zl7wh6i
@user-fr2zl7wh6i 2 года назад
Спасибо!
@alexanderchkan9068
@alexanderchkan9068 2 года назад
Благодарю :)
@mdesign8409
@mdesign8409 4 года назад
видно что реплика получилась ) межстрочное расстояние разное, многих мелких деталей не хватает , а ведь вся эта мелочь выравнивает дизайн
@cremecorp
@cremecorp 4 года назад
Хороший обучающий материал. Будет полезно. Спасибо! Можете подсказать какой шрифт используете для текста на обложек ваших видео?
@DoFurther
@DoFurther 4 года назад
Nazar Kulikov спасибо. По шрифтам подойдет adieu или termina
@bogdanbarna2949
@bogdanbarna2949 4 года назад
Дуже корисно. Дякую.
@yurakryvyzkiy3308
@yurakryvyzkiy3308 3 года назад
Полезный подход, взял на заметку. Может ещё пригодиться в figma модуль HTML to Figma и после импорта наводить порядок со слоями.
@DoFurther
@DoFurther 3 года назад
О! Спасибо за рекомендацию. Установил себе плагин, попробовал. Не всегда удачно получается перенести дизайн в фигму. Но штука очень интересная.
@user-me6rg9ss8h
@user-me6rg9ss8h 4 года назад
Спасибо!!!!!
@AchtungBaby-io7zl
@AchtungBaby-io7zl Год назад
расширение image screenshort почему делает в разной ширине скрин экрана а не в текущем 1920? не нашел настройку у него такую...
@amhlaoibhoheideain2721
@amhlaoibhoheideain2721 4 года назад
Отличное видео! Можете подробней раскрыть про 8pt систему? Как вообще ей пользоваться, какие принципы и тд! Спасибо!
@DoFurther
@DoFurther 4 года назад
Спасибо. Чтобы не дожидаться пока я сниму видео, можешь глянуть на официальном сайте: material.io
@kotnewman1537
@kotnewman1537 4 года назад
лайк подписка колокольчик, очень крутое видео)
@seoonlyRU
@seoonlyRU 2 года назад
лукас с ходу от СЕООНЛИ
@user-lu4rn4tm3v
@user-lu4rn4tm3v 4 года назад
Спасибо
@Natalia-vk1qf
@Natalia-vk1qf 4 года назад
Спасибо за видео. Очень информативно. Только я не поняла как появляется окно при нажатии на F12, где можно скачивать изображения?
@DoFurther
@DoFurther 4 года назад
Оно появляется, если нажать клавишу F12 в браузере Chrome.
@user-so5og8yb1n
@user-so5og8yb1n 4 года назад
@@DoFurther почему когда я нажимаю кнопку F12 в ноутбуке -выходит режим авиа режим)))))
@eklerrr
@eklerrr 4 года назад
@@user-so5og8yb1n f-клавиши они же function клавиши в современной раскладке имеют даа режима переключаемые специальной клавишей обычно название ее fn. Можно погуглить об этом и как поменять режим по умолчанию
@Midi25
@Midi25 2 года назад
Повторила целиком главную, заодно потренировалась в создании вариантов компонентов пока делала кнопку, и в создании анимированной галереи. Сейчас у этого сайта зацикленное видео в хедере, жаль пока фигма не умеет вставлять видео, а через плагины коряво и недоработано так что и статика сойдёт. Захотелось сделать копию сайта целиком, в принципе тк заморочилась созданием компонентов, это не сложно. Спасибо за уроки!
@roadster8674
@roadster8674 2 года назад
Лучший
@Oleksandr_Nitsenko
@Oleksandr_Nitsenko Год назад
Привіт! Дякую тобі за чудовий урок! Підкажи, будь ласка, якщо взяти фото або рендери, наприклад з kickstarter або з іншого ресурсу з реальним продуктом. І використати в дизайні макета веб-сайта та викласти в портфоліо, чи я таким чином порушуватиму авторське правило?
@panfilovlife7037
@panfilovlife7037 Год назад
зазвичай ліцензійна угода передбачає заборону використання матеріалу з метою продажу, але з самореклами як портфоліо. на навчанні нам розповідали, що це норма взяти скопіювати, але краще підібрати схожий матеріал та використати у своєму проекті. Вирішувати тобі.
@Oleksandr_Nitsenko
@Oleksandr_Nitsenko Год назад
@@panfilovlife7037 Дякую, вам за відповідь)
@milena6411
@milena6411 3 года назад
Не могу конвертировать шрифт .woff2 в .otf на том сайте. Выходит ошибка. Говорится "Only woff, Woff, WOFF files are supported" :(
@DoFurther
@DoFurther 3 года назад
Просто загугли еще какон- нибудь сайт по запросу: woff2 to otf
@ui.jahongirov
@ui.jahongirov 3 года назад
есть вопросы, в awwwords есть сайты с 3D элементами + анимированные при скроле, как дизайнер должен предоставит такие материали?
@DoFurther
@DoFurther 3 года назад
Отличный вопрос. В ближайшее время буду готовить интервью на эту тему.
@ui.jahongirov
@ui.jahongirov 3 года назад
@@DoFurther Буду ждать)
@user-bd6dp6uz6w
@user-bd6dp6uz6w 2 года назад
Ответ уже есть? Где можно посмотреть
@user-pr5nw6vc9q
@user-pr5nw6vc9q 3 года назад
Ты крут
@user-zk4bz8jb8r
@user-zk4bz8jb8r 2 года назад
Мне вот интересно как вымеряется отступ 6:17 и он 32px, следовательно, когда в figma именно вставлять текст то отступ будет меньше! И почему-то когда все делают такие видео молчат о том что в figma о пиксель перфект и речи не идет. Я уверен, что если этот скопированный макет сравнить с сайтом то текст поползет весь вниз
@alexkep8129
@alexkep8129 3 года назад
я не понял, а если оставить в формате woff шрифты не будут работать?
@DoFurther
@DoFurther 3 года назад
woff формат нужен для отображения кастомных шрфитов в вебе.
@yulialeonova8546
@yulialeonova8546 3 года назад
В 2 раза медленнее скорость вклчать и норм)
@MrKnifeGuy1000
@MrKnifeGuy1000 3 года назад
А как ты вставил картинку в область
@DoFurther
@DoFurther 3 года назад
можешь таймкод добавить? Не совсем понимаю в чем вопрос.
@nekochano4ka
@nekochano4ka Год назад
Можно вопрос для совсем начинающего и непонимающего? Вы делаете прототипирование? Этим занимается графический дизайнер, веб-дизайнер или верстальщик? Если есть Figma, то зачем нужна Tilda и Flow?
@DoFurther
@DoFurther Год назад
Проектированием занимается UX дизайнер. Фигма отвечает за графическую составляющую дизайн процесса. Для того чтобы дизайн работал в вебе нужен фронтенд разработчик или использование сервисов таких как тильда или webflow.
@nekochano4ka
@nekochano4ka Год назад
@@DoFurther спасибо за ответ!
@DoFurther
@DoFurther Год назад
@@nekochano4ka )
@googlegoogle2111
@googlegoogle2111 4 года назад
Как вставить в фигму скриншот веб страницы без потери качества картинки и размеров ?
@DoFurther
@DoFurther 4 года назад
Паша, я хз если честно ) Я ориентировался на разрешение своего экрна по ширине. А на качество забивал.
@googlegoogle2111
@googlegoogle2111 4 года назад
Further, я разобрался) максимальный размер изображения в фигме 4096px по любой из сторон. Если изображение больше, то фигма уменьшает пропорции и снижает качество. Поэтому если скриншот веб страницы слишком большой, обрезаем его в фотошопе до 4096px, разбиваем на 2-3 изображения и вставляем поочередно фигму.
@DoFurther
@DoFurther 4 года назад
О, спасибо, Паша. Буду знать )
@litvin23
@litvin23 4 года назад
Сейчас в Figma есть плагин, который позволяет вставлять большие изображения без потери качества.
@user-bd6dp6uz6w
@user-bd6dp6uz6w 2 года назад
@@litvin23как называется где взять этот плагин
@user-dl7om1hw7l
@user-dl7om1hw7l 7 месяцев назад
лайкОС
@FernandoVegasChannel
@FernandoVegasChannel 2 года назад
Самая крутая техника обучения. Я сам по ней обучаю. Это на основе своего опыта, когда я смотрел на рекламу, видеоролики и воспринимал их не как все, а со «взглядом художника». Ты в голове разбираешь рекламу или видео на элементы и думаешь, смог ли ты бы так и как ты бы сделал еще круче. Ученики выходят на 1к$ за месяц. Поток первых 5-10 клиентов уже через 2 недели с нуля. Этим подтверждаю тех, кто так советует. Копируйте, учитесь делать крутые по вашему мнению работы. Дизайн ахуенная и пустая ниша а пол мира еще таргетологами стают, но нам и лучше.
@narangel100
@narangel100 2 года назад
почему в фигме пример макета с сайта в гавно качестве? причем до все четкое, текст фотки, как добавляю в фигму в пдф формате то там все в квадратиках
@TheGreg474
@TheGreg474 3 года назад
ссылка на фигму не рабочая :(
@DoFurther
@DoFurther 3 года назад
Вечерком гляну. Спасибо, что предупредил.
@Wobchik
@Wobchik 4 года назад
Огонь, про направляющие и не знал Спасибо за видос, Игорь, продолжай в том же духе! p.s. Единственное - хотелось бы чуть больше динамики, под конец скучновато смотреть становится
@DoFurther
@DoFurther 4 года назад
Учту. Я старался сократить по максимуму. Поэтому полтора часа скринкаста превратились в 14 минут.
@antonioificationful
@antonioificationful 3 года назад
c 8 минуты ничего непонятно
@user-es4pz6mp1i
@user-es4pz6mp1i 3 года назад
Спасибо!
@user-ts7fj8yd2j
@user-ts7fj8yd2j 4 года назад
Спасибо!!!!!
Далее
Дизайн Landing Page в Figma Часть №1
25:10
Меня кинули на Авито
4:02
Просмотров 3 тыс.
Нейросеть создает сайты
6:59
Просмотров 4,9 тыс.
Free Figma UX Design UI Essentials Course
2:57:40
Просмотров 1,8 млн