ฝัง
- เผยแพร่เมื่อ 26 ก.ย. 2024
- Сегодня я подробно покажу вам как с нуля новичку в веб-дизайне сделать свой первый экран сайта в минимализме. Также расскажу о фишках в Figma, которые будут вам полезны.
ЕСЛИ ИНТЕРЕСУЕТ ОБУЧЕНИЕ - пиши в телеграм (@nytellina) ❤️
Привет, меня зовут Нюта, я более 3 лет занимаюсь разработкой сайтов и приложений под ключ.
🔥 Добавляйся ко мне в социальные сети:
Второй TH-cam канал: www.youtube.co...
Instagram: / nytellina
Telegram-канал: t.me/nytellinaa
TikTok: / nytellina
Behance: www.behance.ne...
#Фотошоп, #Уроки фотошоп, #Фриланс, #Дизайн в фотошопе, #Веб дизайн, #Как научиться фотошопу, #Уроки дизайна, #Фигма, #Figma, #логотипы #Adobeillustrator
t.me/nytellinaa - Мой telegram-канал полезный для дизайнеров
Ссылка на скачивание шрифта из видео - bestfonts.pro/font/gilroy
ЧТОБЫ ПОЛУЧИТЬ ИСХОДНИК ИЗ ВИДЕО:
- напиши комментарий под этим видео
- сделай репост любого рилса с моего инстаграма (nytellina)
Скорость точно для новичков😁
Твои минусы ,ты снимаешь после снятия записи где ты работала в фигме. Ты указала то что это для новичков ,но ты не рассказываешь о том как создавать группы, как дублировать текст и тд. Тоесть все очень быстро и непонятно
Создать группу: Ctrl + G на Windows и ⌘ + G на Mac
Скопировать: Ctrl + С на Windows и ⌘ + С на Mac
Вставить: Ctrl + V на Windows и ⌘ + V на Mac
А если возникнут конкретные вопросы по видео, можете со мной связаться в тг
А как же CTRL + D или с зажатом ALT?
@@html_css_it можете и так. Если сами знаете, то зачем спрашиваете в комментариях?)
@@nytellina он говорит что для тех кто это не знает - это не очевидно, а из видео так вообще про это 0 инфы
Приятно смотреть и слушать. Легко получается донести информацию. И видео не затянутое.
Спасибо!
Успехов и отличного настроения!
Спасибо за такой приятный комментарий ❤
Спасибо, за урок, было чётко, быстро, понятно, позитивно. Ценю вашу энергию, на которой вы записываете видосы.
Спасибо за такие приятные слова. Они заряжают ❤️
блин, оч круто показала всё, я сидела повторяла за тобой в фигме)))
чувствую себя уже дизайнером ахахха
@@Martina-mg2jj ну в какой-то мере действительно уже дизайнер )
Спасибо большущее за полезный ролик)) подача супер и тамада хороший)
Хороший тамада и конкурсы интересные 😂
Слоган моего канала
Классный контент! Доступно, весело, обаятельно! Продолжай в том же стиле😘
Спасибо ☺️
Очень нравится твоя подача :) Всегда интересно смотреть
Спасибочки
Ты очень крутая 👍🏻👍🏻👍🏻
Просто лучшая👍🏻👍🏻👍🏻
@@КираУшкина спасибо огромное ❤️
спасибо за ролик.Ждем новых.Продолжайте.У вас хорошо получается
Спасибо большое ☺️
От всей души благодарю за помощь в изучении графического и веб-дизайна! Лайк однозначно! Создал макет в Figma по подобию ролику!
Спасибо за комментарий) мне приятно читать такие слова ❤️
Каждую среду выходят ролики, завтра среда, так что ставьте уведомления, завтрашний видос будет круче этого в несколько раз ) тоже будем в фигме работать
Огромная благодарность за видео. 🎉🔥❤
Огромная благодарность за то, что написали комментарий ❤️
Видео топ зделал 1 работу очень нравится тематика сёмак 😊
я рада, что нравится )
Быстро,понятно,доступно и интересно 💜
Спасибо большое за приятные слова ❤
@@nytellina 💜
Ааа, кайф, харизматичная девушка с классной подачей)
Наконец-то не захлебываюсь водой во время просмотра на тему веб-дизайна.
В общем, круто, что наткнулся на тебя)
Круто, что наткнулась на твой комментарий) + к настроению ☺️
Благодарим.❤ А возможно ещё где-то в углу, вывести сочетание клавиш которые ты нажимаешь? Заливку в обводку например, как сделать клавишами быстро - интересно. 🙂
В фигме есть снизу справа знак вопроса. Кликаешь на него, а дальше в меню которое откроется выбираешь пункт горячие клавиши. Там есть все что нужно
Класс! Послушал,как мёдик в ушки залили)) Спасибо!
Хахаха, такого мне ещё не писали под дизайн роликами) Спасибо за комментарий
Добрый день! Подскажите, пожалуйста, при группировки слов "Study" & "Like" и при уменьшении размеров у меня уменьшается только frame, но не сам текст. Извините за столь детский вопрос:)
Нажмите на клавиатуре Английскую букву К
Откроется функция масштабирование и все уменьшится. Только когда воспользуетесь этой функцией, подправьте дробные значения у текста, если они появятся
@@nytellina Спасибо
Умница ❤ такого контента не хватало 👏🏼
Спасибо. Теперь будет хватать)❤️🔥
Лучшая из лучших , спасибо большое ❤
Спасибочки 🥰🥰🥰
привет)
а как сделать, чтоб нажимая на кнопочки(главная,контакты и тд) переносило на другую страничку? да и вообще как макет сайта преобразовать в сайт?😁😁
@@nopesin нужно проект сверстать. Для этого придумали море платформ.
WebFlow, Tilda, Wix, Wordpress и другие. Выбираешь какой-то конструктор и проект можно использовать полноценно
@@nytellina а можно в фигме создать а в этих приложениях доделать?
@@nopesin ну в фигме ты создаешь дизайн, а с помощью других платформ ты этот дизайн, который подготовлен просто переносишь, чтобы теперь кнопки работали и тд
@@nytellina а хорошо спасибо
Спасибо! Было интересно
Хорошее видео, а главное получилось понятно и красиво
Спасибо большое ☺️
Да, все классно, мне понравилось.
Это чудесно)
Успехов и отличного настроения!
Спасибо большое. И тебе хорошего дня 🥰
Тарахтишь, Тарахтишь - ничего непонятно, стрелка бегает по экрану как ненормальная, ты по сути покажи куда жмёшь и что в итоге получается....
Вы по-моему забываетесь. Это бесплатный контент, который я делаю по своему личному желанию и как именно его делать решать только мне. А ваши претензии в данном случае не уместны. Так что если вас данный канал и данное пояснение не устраивает - вы можете найти другой, который вам подходит.
@@nytellina на другом и занимаюсь, ваш - так.... Как сквозняк, посмотрел и забыл... Мозгу зацепиться не за что, информативно эти - - 0.000000001%
@@ИгорьГорбаненко-ь2ш я искренне рада тому, что вас не будет на этом канале)
Видео не для новичков а чисто для тех кто подзабыл некоторые детали
классно, а зачем вы делаете первый экран в высоту 1000 пикселей? так ведь не делают, не поместится в монитор, почему сразу нормальные размеры не сделали? я тут просто пришла на юютуб с размерами в высоту разобраться вот и возникает вопрос
Делайте 890-960 по высоте
@@nytellina Благодарю за ответ)
Очень круто!) Спасибо за урок. ❤ Подскажите, пожалуйста, как вы сделали такое видео в кружочке?
Спасибо за комментарий 💕
Отдельно снято видео экрано и отдельно снято видео, где я комментирую. А потом в программе для монтажа (Premiere Pro) соединила и там как раз и сделала видео в кружке
@@nytellina Ааа понятно, теперь) Спасибо за ответ!) 😘🤗
0.5 скорость это што то но повторил шаг за шагом опьянел немного в конце от тебя
Спасибо все четко и понятно 🙂
Спасибо за комментарий 🤩
УМНИЧКА)😜
Спасибо большое 🥰
А вот, допустим дизайн сделан, и надо сделать теперь сайт, как все сделать в точь в точь на тильде? Там же нет каких то элементов. Это нужно куда то вставлять? Или есть такой ролик? Подскажите пожалуйста 🙏🏻 буду благодарна!❤️
Ну так и переносишь на тильду. Картинки отдельно сохраняешь и выгружаешь, текст и кнопки уже на тильде создаёшь
отличное видео, не подскажите, как скаченный файл шрифта "gilroy" установить в фигму?
Заходишь по ссылке, скачиваешь. Потом заходишь в загрузки и кликаешь на то, что скачал. Дальше нажимаешь на кнопку «Установить». Следующий шаг это закрыть фигму и открыть потом заново после установки шрифта. И он автоматически появится у вас в фигме
Все слишком быстро для "детального видео", хотя это лишь основы и в принципе всё понятно получилось)
Если будет что-то не понятно, вы можете написать мне в личку в тг и я подскажу)
Видео мне понравилось , все понравилось !
Спасибо)😊
Nytellina, здравствуй. Скажи, пожалуйста: - Если есть айпад Apple Pro со слитусом.... Можно ли там рисовать полноценно макеты для сайтов, в тех программах, которые доступны в эпл-стор?
Или, все же, это не полноценная замена ПК/Ноутбуку?
Это не полноценная замена ноуту/пк,
@@nytellina , спасибки! А то, я уже губу раскатала)
@@НадеждаМурашко-н6й 😂 Но лучше действительно подкопить на какой то обычный даже не очень дорогой ноут)
Сказала подробно объяснишь для новичков, в итоге протароторила в самом начале и нифига не поймёшь
Ну раз всем понятно, а вам нет, то что я могу сделать) поставьте на замедленное и повторяйте, элементарная работа
А какой шрифт в итоге будет я так и не услышала нормально
@@anneta-j5t Gilroy
Спасибо за видосики. А какая сетка здесь у тебя? У меня все скомкано получается. (gutter 20 видимо маловато). Вообще не понял, если сетки помогут верстальщикам собрать эти нарезки, то почему все рисуют свои сетки как им хочется( Я с этими сетками и адаптивами еду кукухой
У меня ширина рабочей области 1170. Ширина всего макета (фрейма ) 1920
Вообще всегда в реальных проектах, если верстаешь не ты сам, то обязательно нужно согласовывать сетку с верстальщиком перед началом работы, чтобы не было потом проблем
@@nytellina спасибо за такой подробный ответ
Я вообще ниче не понял, я новичок, тараторит че-то нажимает блин, извини но это точно не для новичка)
Посмотри последний ролик, я уже не знаю как подробнее показывать, чтобы это не превращалось в что-то нудное
@@nytellina хорошо, извини уж меня я просто в фигме совсем 0
@@michaelm9art547 последнее видео, я там на 9 минут записала, может тебе понятнее будет. Если сложно будет, можно замедлить видео. Но в последнем я старалась показать куда нажимаю, там такой оранжевый сайт получился
@@michaelm9art547 плюс если ты что-то поверяешь по моим урокам ты можешь мне в тг присылать и я подскажу какие-то детали
@@nytellina спасибо тебе большое, хороший ты человек)
я новичок, открыла и долго пыталась понять как создавать фрейм.. мда, для новичков прям видео, ага(
А как ви колони настроили в фигме ?
Справа "layout grid" нажимаете на плюсик и настраиваете сетку, которая вам нужна
Скажите, а где можно выставлять свои работы, что бы видели заказчики ?
Беханс, дрибл можете для начала попробовать)
Что делать если нет такого шрифта? Спасибо за полезную информацию
Ну в закреплённых мой комментарий висит с ссылкой, где можно его скачать …
Первый шаг и уже ничего непонятно - Как ты создала фрейм? Как ты вызвала заливку? Офигенная пошаговая инструкция
О, тот самый вечно недовольный 🫶
А это типа сайт? Чот мне кажется это всё таки картинка, которую можно с таким же успехом нарисовать в фотошопе...
Это ДИЗАЙН сайта, который потом верстают или передают верстальщику
благодарю !
💕
Толи я пропустил (хз конечно как), толи не делался акцент на сетке-этот момент не очень понятен, а в целом всё замечательно!)
У меня сетка 1170 (ширина), а ширина всего фрейма 1920
@@nytellina ага, теперя ясно! ☺И ещё вопрос по сетке: она произвольно выставляется, т.е. под нужды дизайна сайта?
@@Alekseev_Oleg выставляется в зависимости от того под какое устройство ты делаешь сайт. Если ты адаптируешь дизайн под телефон, то там будет другая ширина, соответственно и сетка уже. Если делаешь под супер широкий монитор, то сетка будет больше. Но я рисую под эту, так как у большинства пользователей именно такие ноуты
@@nytellina я планирую делать адаптивный дизайн под два-три самых часто используемых разрешения, т.е.для двух-трех разрешений(если я правильно понимаю адаптиный дизайн) А в целом всё понятно, благодарю за помощь!😊 👍
Спасибо большое
Спасибо за комментарий ❤️
Супер круть! Спасибо, реально полезно для новичка👍👍
Рада, если было полезно 🤩
в целом показала что как ноооо очень многое не обьяснила , пришлось рыскать самой или же смотреть у других...жаль)
Это настолько элементарный экран, что достаточно просто поставить замедление и повторять 1 в 1. Основные моменты я комментирую. Но моя задача сделать так, чтобы это ещё кто-то смотрел и не умер от скуки)
ЭТО НЕ ПОШАГОВО!!! ОБМАН. И МИНУТЫ НЕ ПРОШЛО. ОНА ПОКАЗАЛА КАК СОЗДАЛА, ПОМЕНЯЛА ЦВЕТ, А ПОТОМ СРАЗУ ЦЖЕ У НЕЕ ПОЛОСЫ И ТЕКСТ СИДИТ ПИШЕТ ДОВОЛЬНАЯ
Напишите заявление в полицию, что вас обманули, а то уж слишком вы эмоциональны
У кого училась веб дизайну? а то сейчас много кто курси продает по єтой теме.
Я училась на личном наставничестве у человека, который сейчас преподаёт вместе со мной) Мы решили сделать совместное личное обучение спустя столько лет
@@nytellina зарабатываешь на обучении или еще и под заказ создаешь сайты? Какая стоимость обучения?
@@ПомогиДругому-р5ж я три года зарабатывала только с сайтов и приложений. Только недавно у нас ещё и личное наставничество появилось как доп доход. Но так как это не массовый продукт, то я все равно зарабатываю больше денег с проектов
Все детали обучения ты можешь узнать в личке в телеграме (nytellina)
Огонь, так лего и просто и оч круто, умница ☺🤩возьмешь на учебу?
На какую учебу 😂
😂😂😂Вот если сравнить ваше обучение с тренировками по боксу ,😂😂😂 с момента входа в фигму и до момента замены градиента прошло пару слов,вот что б так учили боксу то былоб так ,зашел в зал ,оп уже открывает глаза лежа на полу,а тренер такой мол ,вот это был накаут. Если для новечков то расказывать нужно где что как и для чего а не просто озвучить свою роботу.За роботу 5 за обучение 2 .!!!
когда мне понадобиться ваша оценка по 5 бальной системе, то я обязательно вам напишу!
@@nytellina ну поскольку это была цитата из фильма , то вряд-ли ее перепишут 😂🤗
Во ща как то по-другому ,то что синего добавили ,?
Да, темно синий
@@nytellina сочетание топ
Оправдываю твои надежды пишу комент
Спасибо за комментарий🥰
Для новичков ты не подходишь.
@@Nerpa66 в новых видео я более подробно объясняю и меньше ускоряю, так что подхожу)
На моих глазах произошло искусство. Всё так легко, непринуждённо и профессионально
Спасибо за комментарий ❤️
Носик 😀
спасибо за комментарий
Одна болтовня и ничего не понятно!
Таким как ты всегда не понятно)
А в какие форматы компилировать готовый дизайн? SVG?
Когда дизайн готов, то вы просто присылаете ссылку на фигму верстальщику и на этом ваша работа как дизайнера заканчивается
@@nytellina понял, спасибо. Можешь пожалуйста как нибудь заснять туториал как подготовить и выложить макет заказчику? Думаю это будет полезно для остальных людей.
@@Lidkvas если ты делаешь под ключ (то есть дизайн + вёрстка), то ты берёшь ссылку на фигму с дизайном и присылаешь верстальщику.
Если делаешь исключительно дизайн для заказчика, то тоже самое. Просто сделала макет, получила деньги и потом прислала ссылку. Если крупный проект, то ui kit ещё размещаешь рядом с макетом. А как он выглядит в гугле можешь глянуть. Написать «ui kit»
@@nytellina нужно ли давать доступ заказчику к редактированию макета?
@@Lidkvas я могу рассказать как работаю я. Пока за проект не заплатили, я присылаю клиенту ссылку с макетами в jpg. Где нет слоев и клиент может оставить по фигме комментарии. Когда работа оплачена, я просто присылаю ссылку с макетом (там где есть слои) и человек может просто сделать дубликат себе, одной кнопкой и теперь этот макет будет у него в drafts.