ฝัง
- เผยแพร่เมื่อ 9 ก.พ. 2020
- В этом видео я покажу, как повторять работы других дизайнеров в 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. ПО...
![[ไฮไลต์] แบดมินตันชาย SHI Yu Qi (จีน) vs วิว กุลวุฒิ (ไทย) รอบ 8 คน | โอลิมปิก 2024](http://i.ytimg.com/vi/f7z7taforOM/mqdefault.jpg)
Очень крутое, динамичное и стильное видео, нескучно) Но всё же немного хотелось бы скорость убавить и более поподробнее детали, спасибо!)
Это сразу подписка,прежде всего нужно учиться увидеть "картину"целиком,детали потом сами "лягут"куда надо,ну и конечно,практика практика и ещё раз практика🙂
СУУПЕР. Спасибо 🙏🏼 ОГРОМНОЕ. ВЫ МОЛОДЕЦ
Спасибо! Поняла, что до этого малоэффективно упражнялась в копировании чужих работ. Классные фишечки💥
Спасибо, что поделился рабочими инструментами!)
Шикарное видео! Так мало людей которые всё так круто и без заморочек делают)
Спасибо, ценная инфа и подача отличная)
Игорь, браво!
Классно, коротко, чётко без всяких лишних пауз!
Снимаю шляпу реально в очень динамично хорошем темпе!
Редкость у Российских авторах!
Спасибо за мастер-класс, очень полезно для начинающих веб-дизайнеров
спасибо что показали полезные фичи!
не останавливайтесь)
Все очень понятно)
Спасибо, надо пробывать :))
Спасибо большое за видео! Пойду повторять. Очень много интересного.
Круто, прям то что нужно, спасибо!)))
Мерси за плагинчики :) Залипла прям на вашем канале)
Харош, спасибо за видео, лайк определенно)
Спасибо за полезное видео. Было интересно увидеть ваш процесс. Подметила для себя отдельные фишечки :)
Хорошее упражнение. Как у художников - копировать великие произведения классиков, дабы набить руку.
Спасибо за труд! Прохожу обучение на курсах по созданию сайтов. Как раз сейчас очередная проектная работа - сделать копию сайта в Figma. Правда все очень быстро происходит, но главное вы донесли идею, теперь я понимаю как подступиться к этой задаче ))).
Круто! спасибо за расширения!
Спасибо большое за крутое и информативное видео! Лайк, подписка однозначно!
Спасибо, очень полезные сайты подсказали, раньше о таких не слышала))
Полный гуд, брателло! За 10 минут легло в голову больше, чем за два дня просмотра разного и всякого...
Подписался и в "колокол" тоже позвонил. 👍
Спасибо за подписку )
Подача шикардос!!!!
Спасибо за такой крутой и понятный туториал! Привет от ТЕЛЕК ТЕЛЕК👋🏻
Большое спасибо, очень познавательное и интересное видео.
Автору спасибо за интересное видео.
очень понравилась идея, сразу прокачка насмотренности и хардов)
интересные штуки нашлись) спасибо
Очень крутое и своевременное видео! Как раз собиралась попробовать копировать лендинги, чтобы руку набивать, и не совсем понимала, с какой стороны подступиться, а тут такой туториал. Спасибо большое!
Рад что помог. Пиши о чем еще было бы интересно узнать. Проблема в том, что многие чуваки, которые ведут каналы начинали фигачить дизайн более 10 лет назад. И о каких-то сложностях просто забыли. Я не исключение. Так что пиши, не стесняйся )
@@DoFurther Каким образом можно накопить опыт фрилансеру в UX исследованиях, кроме знаний стандартных паттернов, когда нет ресурсов для организаций этих самых исследований
@@user-ty1zo8uh1u по сути есть два пути. Первый - устроиться в компанию, где проводят подобные исследованию пусть даже стажером. Второй (более сложный) - начать проводить исследования самому. Просто брать сайты в какой-то теме и проводить тестирования. Если не хватает знаний, то можно посмотреть канал NN Group, там много рекомендаций на эту тему.
Благодарю!
И главное очень полезно!
лукас с ходу от СЕООНЛИ
спасибо вам большое очень было полезно))
Спасибо, супер!
спасибо за видео, класс!
Круто! понятие не имел что так можно было
Дуже корисно. Дякую.
Благодарю! :)
Крутышка😍❤❤❤
Круто, дякую)))
Благодарю :)
Спасибо!
Спасибо!!!!!
видно что реплика получилась ) межстрочное расстояние разное, многих мелких деталей не хватает , а ведь вся эта мелочь выравнивает дизайн
Полезный подход, взял на заметку. Может ещё пригодиться в figma модуль HTML to Figma и после импорта наводить порядок со слоями.
О! Спасибо за рекомендацию. Установил себе плагин, попробовал. Не всегда удачно получается перенести дизайн в фигму. Но штука очень интересная.
лайк подписка колокольчик, очень крутое видео)
Спасибо
Отличное видео! Можете подробней раскрыть про 8pt систему? Как вообще ей пользоваться, какие принципы и тд! Спасибо!
Спасибо. Чтобы не дожидаться пока я сниму видео, можешь глянуть на официальном сайте: material.io
Хороший обучающий материал. Будет полезно. Спасибо!
Можете подсказать какой шрифт используете для текста на обложек ваших видео?
Nazar Kulikov спасибо. По шрифтам подойдет adieu или termina
Лучший
В 2 раза медленнее скорость вклчать и норм)
Самая крутая техника обучения. Я сам по ней обучаю.
Это на основе своего опыта, когда я смотрел на рекламу, видеоролики и воспринимал их не как все, а со «взглядом художника». Ты в голове разбираешь рекламу или видео на элементы и думаешь, смог ли ты бы так и как ты бы сделал еще круче.
Ученики выходят на 1к$ за месяц. Поток первых 5-10 клиентов уже через 2 недели с нуля.
Этим подтверждаю тех, кто так советует. Копируйте, учитесь делать крутые по вашему мнению работы. Дизайн ахуенная и пустая ниша а пол мира еще таргетологами стают, но нам и лучше.
Повторила целиком главную, заодно потренировалась в создании вариантов компонентов пока делала кнопку, и в создании анимированной галереи.
Сейчас у этого сайта зацикленное видео в хедере, жаль пока фигма не умеет вставлять видео, а через плагины коряво и недоработано так что и статика сойдёт.
Захотелось сделать копию сайта целиком, в принципе тк заморочилась созданием компонентов, это не сложно. Спасибо за уроки!
Ты крут
Спасибо за видео. Очень информативно. Только я не поняла как появляется окно при нажатии на F12, где можно скачивать изображения?
Оно появляется, если нажать клавишу F12 в браузере Chrome.
@@DoFurther почему когда я нажимаю кнопку F12 в ноутбуке -выходит режим авиа режим)))))
@@user-so5og8yb1n f-клавиши они же function клавиши в современной раскладке имеют даа режима переключаемые специальной клавишей обычно название ее fn. Можно погуглить об этом и как поменять режим по умолчанию
расширение image screenshort почему делает в разной ширине скрин экрана а не в текущем 1920? не нашел настройку у него такую...
Привіт! Дякую тобі за чудовий урок!
Підкажи, будь ласка, якщо взяти фото або рендери, наприклад з kickstarter або з іншого ресурсу з реальним продуктом. І використати в дизайні макета веб-сайта та викласти в портфоліо, чи я таким чином порушуватиму авторське правило?
зазвичай ліцензійна угода передбачає заборону використання матеріалу з метою продажу, але з самореклами як портфоліо. на навчанні нам розповідали, що це норма взяти скопіювати, але краще підібрати схожий матеріал та використати у своєму проекті. Вирішувати тобі.
@@panfilovlife7037 Дякую, вам за відповідь)
лайкОС
есть вопросы, в awwwords есть сайты с 3D элементами + анимированные при скроле, как дизайнер должен предоставит такие материали?
Отличный вопрос. В ближайшее время буду готовить интервью на эту тему.
@@DoFurther Буду ждать)
Ответ уже есть? Где можно посмотреть
Мне вот интересно как вымеряется отступ 6:17 и он 32px, следовательно, когда в figma именно вставлять текст то отступ будет меньше! И почему-то когда все делают такие видео молчат о том что в figma о пиксель перфект и речи не идет. Я уверен, что если этот скопированный макет сравнить с сайтом то текст поползет весь вниз
Не могу конвертировать шрифт .woff2 в .otf на том сайте. Выходит ошибка. Говорится "Only woff, Woff, WOFF files are supported" :(
Просто загугли еще какон- нибудь сайт по запросу: woff2 to otf
я не понял, а если оставить в формате woff шрифты не будут работать?
woff формат нужен для отображения кастомных шрфитов в вебе.
А как ты вставил картинку в область
можешь таймкод добавить? Не совсем понимаю в чем вопрос.
Как вставить в фигму скриншот веб страницы без потери качества картинки и размеров ?
Паша, я хз если честно ) Я ориентировался на разрешение своего экрна по ширине. А на качество забивал.
Further, я разобрался) максимальный размер изображения в фигме 4096px по любой из сторон. Если изображение больше, то фигма уменьшает пропорции и снижает качество. Поэтому если скриншот веб страницы слишком большой, обрезаем его в фотошопе до 4096px, разбиваем на 2-3 изображения и вставляем поочередно фигму.
О, спасибо, Паша. Буду знать )
Сейчас в Figma есть плагин, который позволяет вставлять большие изображения без потери качества.
@@litvin23как называется где взять этот плагин
почему в фигме пример макета с сайта в гавно качестве? причем до все четкое, текст фотки, как добавляю в фигму в пдф формате то там все в квадратиках
Огонь, про направляющие и не знал
Спасибо за видос, Игорь, продолжай в том же духе!
p.s. Единственное - хотелось бы чуть больше динамики, под конец скучновато смотреть становится
Учту. Я старался сократить по максимуму. Поэтому полтора часа скринкаста превратились в 14 минут.
ссылка на фигму не рабочая :(
Вечерком гляну. Спасибо, что предупредил.
Можно вопрос для совсем начинающего и непонимающего? Вы делаете прототипирование? Этим занимается графический дизайнер, веб-дизайнер или верстальщик? Если есть Figma, то зачем нужна Tilda и Flow?
Проектированием занимается UX дизайнер. Фигма отвечает за графическую составляющую дизайн процесса. Для того чтобы дизайн работал в вебе нужен фронтенд разработчик или использование сервисов таких как тильда или webflow.
@@DoFurther спасибо за ответ!
@@nekochano4ka )
c 8 минуты ничего непонятно
Спасибо!
Спасибо!!!!!