Тёмный

Designing an e-Bike Landing Page UI Design in Figma - Speed Art Tutorial 

Coen
Подписаться 15 тыс.
Просмотров 375 тыс.
50% 1

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

 

29 окт 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 201   
@whatsoeverimin
@whatsoeverimin Год назад
I don't know who you are, but you are literally what I was looking for in this period of my life. Even though there are no "millions of views" yet, I want you to know - you are not just sharing your masterpiece - you inspire
@Coen
@Coen Год назад
Hi Ne Boe, Thank you for your compliment, that's what I do it for. It's not about millions of views, subscribers or whatever. The goal is always to inspire and help people where needed.
@markopolo2224
@markopolo2224 Год назад
there are not millions of views
@devestrella
@devestrella Год назад
@@markopolo2224 lol
@Coen
@Coen Год назад
That’s correct.
@believer.1204
@believer.1204 8 месяцев назад
Does figma provide you the code for the design which you created??
@lawdful2154
@lawdful2154 Год назад
saw the comments, looked at the subscribers i didnt even watch the video yet and it warms my heart how supportive they are. hope one day you’ll blow up and reach whats meant for your potential
@believer.1204
@believer.1204 8 месяцев назад
Does figma provide you the code for the design which you created??
@yaxxee
@yaxxee 2 года назад
Thank you so much for the inspiration. Watching these videos is helping me to create more professional designs.
@Coen
@Coen 2 года назад
Thank you Yaxxee, We'll be back soon to continue to inspire you.
@hanaahmed9000
@hanaahmed9000 11 месяцев назад
​@@Coenwhy menu in put in center?
@Coen
@Coen 11 месяцев назад
Just for fun! ✨
@devestrella
@devestrella Год назад
That is my first time watching a Figma tutorial and the first is already really good. thanks for the amazing content man. All the best S2
@Coen
@Coen Год назад
Thank you! Hope to see you back soon.✌🏼
@devestrella
@devestrella Год назад
@@Coen yeah of course I'll be here soon 👏
@believer.1204
@believer.1204 8 месяцев назад
Does figma provide you the code for the design which you created??
@devestrella
@devestrella 8 месяцев назад
@@believer.1204 no, bro, it doesn't provide, but you'll have the final product design and get inspired and oriented by it
@muhamedtahiri2047
@muhamedtahiri2047 2 года назад
the design is so awesome and precise keep it up btw i'm 15 and just started learning figma
@Coen
@Coen 2 года назад
That’s cool! 😉
@fishbarbeque8540
@fishbarbeque8540 Год назад
SIR!!! you are mad skilled OMG!
@Coen
@Coen Год назад
OMG! 🙀
@fishbarbeque8540
@fishbarbeque8540 Год назад
@@Coen OMG!
@RajaVelforyou
@RajaVelforyou 8 месяцев назад
Great tutorial - I really liked it
@gtxstudio
@gtxstudio Год назад
I truly love your channel. Keep doing the best work.
@Coen
@Coen Год назад
Thanks!
@kani729
@kani729 2 года назад
that looks super pro lol
@Coen
@Coen Год назад
*Exciting News! 🔥 The download is now available for this amazing resource! 🚀* coenjanssen.gumroad.com/l/cowbow-ebike
@pavilionhp2896
@pavilionhp2896 Год назад
i tried copying you ...tried much and got some results not as much as yours but I learned a lot about colour grading thank you!
@Coen
@Coen Год назад
Cool! Great job 🤞🏼
@pavilionhp2896
@pavilionhp2896 Год назад
@@Coen 😍
@keen_priya2858
@keen_priya2858 Год назад
I tried to copy you..and got good results. Thank you for this inspiration!!❤️
@Coen
@Coen Год назад
You’re welcome!
@manon3054
@manon3054 11 месяцев назад
So inspiring! Thanks!
@Coen
@Coen 11 месяцев назад
You’re welcome, Manon!
@AbdullahQureshi-s9j
@AbdullahQureshi-s9j 5 месяцев назад
Where do you get such heavenly inspiration for your designs?
@MohanaKumar-xy5xm
@MohanaKumar-xy5xm 9 месяцев назад
Clean✨
@Coen
@Coen 9 месяцев назад
Thank you, Mohana!
@RayanAdelAlJebbawi
@RayanAdelAlJebbawi 10 месяцев назад
😍😍 super cool
@Coen
@Coen 10 месяцев назад
Thank you, Rayan!
@synriser6742
@synriser6742 2 года назад
That's a really nice design.
@Coen
@Coen 2 года назад
That’s a very nice comment.
@fatimarasheed-fj6jl
@fatimarasheed-fj6jl 4 месяца назад
I loved it you r such an amazing designer .Ive 1 question how to get those components ?
@happyhoppers22
@happyhoppers22 8 месяцев назад
Thanks a ton buddy
@Coen
@Coen 8 месяцев назад
You're welcome!
@GelloMello-j9z
@GelloMello-j9z 8 месяцев назад
So good
@FatehAliTeepu-w3y
@FatehAliTeepu-w3y 10 месяцев назад
You make me cry , developers always cry😢
@s7234
@s7234 Год назад
this is great!
@Coen
@Coen Год назад
This is a great comment!
@zapeeosheikh
@zapeeosheikh 3 года назад
❤️❤️❤️❤️ Wow Amazing Work you work is published on telegram UI Group 😀❤️❤️❤️ great Achievement
@Coen
@Coen 3 года назад
Thank you, Zapeeo!
@eloketobe
@eloketobe 2 года назад
Very cool design I love it
@Coen
@Coen 2 года назад
Thank you!
@alexandrer054
@alexandrer054 Год назад
I like this design
@Faramation
@Faramation 2 года назад
Which plugin you have used for icon's
@uidesignwithfigma
@uidesignwithfigma 2 года назад
Thanks for the lesson! 🔥
@Coen
@Coen 2 года назад
You're welcome 😄
@Alikk784
@Alikk784 Год назад
i wish i one day reach your level
@Coen
@Coen Год назад
You can, for sure!
@rajat-s-kale1771
@rajat-s-kale1771 Год назад
Awesome
@mrlibes1
@mrlibes1 Год назад
You are the best
@Coen
@Coen Год назад
Thank you! 😇
@gauravthapaliya4389
@gauravthapaliya4389 8 месяцев назад
I think it's called hero section landing page means it consists the entire page that user will see when the open the website
@helenchinweike8080
@helenchinweike8080 3 года назад
I love your videos am a newbie I still Find it very difficult to understand your tutorials Can u explain in words next Time???🙏🙏🙏
@blackace1996
@blackace1996 2 года назад
Me too please explain the thought process behind it
@Coen
@Coen 2 года назад
Good idea! We’ll be back with ‘words’.
@vikahakobjanyan
@vikahakobjanyan Год назад
Hi, this landing page is really amazing, but I can't understand, like is the overlay considered other page.. I mean u combined two pages?
@Nabhel
@Nabhel 3 года назад
Thanks
@abdennourkoumad6276
@abdennourkoumad6276 3 года назад
Nice design ! Where can i find the 3d product assets , like the bike or nike shoes ... ?
@Coen
@Coen 2 года назад
We get our images from royalty-free websites or in the case of a redesign from the official website.
@bhaskarrau7141
@bhaskarrau7141 8 месяцев назад
can you share the links please ? @@Coen
@believer.1204
@believer.1204 8 месяцев назад
Does figma provide you the code for the design which you created??
@reclusiveboy
@reclusiveboy 9 месяцев назад
good video but it would be nice if u add voice over or captions... couldn"t catchup which options you are going and clicking.
@Coen
@Coen 8 месяцев назад
From now on, I will!
@Pavan-735
@Pavan-735 5 месяцев назад
I saw your design in someone's portfolio
@Coen
@Coen 5 месяцев назад
Where? 😱
@عبدالملك-ي5ه3ي
@عبدالملك-ي5ه3ي Год назад
Quick question, where did you get the bike image?
@Coen
@Coen Год назад
Honestly, just using Google.
@anonymous_squirl
@anonymous_squirl 5 месяцев назад
how to get this cycle or bike any image without background in figma?????anyone
@paalzolder
@paalzolder 3 года назад
Nice design! Really like the red hue ;)
@Coen
@Coen 3 года назад
Thank you, Polatic!
@sassy6085
@sassy6085 Год назад
where i can find the assets? it's showing sold out
@moiserwibutso4899
@moiserwibutso4899 2 года назад
Nice tutorial. By the way, how did you fill that last star in half (red & white)? If anyone else knows please tell me.
@Coen
@Coen 2 года назад
Hi Moise, We duplicated the star, edited it with the pen tool and gave both layers a different color. There are several ways to get to this result, but this is the simplest.
@joshfernandez8475
@joshfernandez8475 2 года назад
U can use linear colour instead of fill. Much simpler
@Coen
@Coen 2 года назад
@@joshfernandez8475 We're sorry, Josh.
@lekoryo5727
@lekoryo5727 2 года назад
Cho em hỏi làm thế nào để có được component chiếc xe đạp như trên, dùng unplash hay plugins vậy ạ? mong được hồi đáp, em cảm ơn nhiều ạ!
@SaranKannan-tp9kl
@SaranKannan-tp9kl Год назад
where did you take this cycle images
@dmansa4035
@dmansa4035 Год назад
keren bang
@olaoluwaadekeye176
@olaoluwaadekeye176 2 года назад
nice design , what do u use to screen record
@techwake360
@techwake360 3 года назад
Nice work
@Coen
@Coen 3 года назад
Thank you, techwake!
@SayanGupta4
@SayanGupta4 Год назад
How do we add functionality to the designs...like the buttons working and all?
@Coen
@Coen Год назад
Hi Sayan, after designing a website, you can make it functional by prototyping it, which is also possible within Figma. If you want an actual working website in your browser, you'll need to code it. For this, you could achieve it using HTML and CSS.
@Faramation
@Faramation 2 года назад
Please don't forget to mention steps in subtitles.it will help to beginner's.
@letmesay2035
@letmesay2035 2 года назад
you have option to watch 0.25x
@Coen
@Coen 2 года назад
We will take that with us, we will be back from September. Thank you!
@bhaskarrau7141
@bhaskarrau7141 8 месяцев назад
Bro, can you please provide me the assets ? if you can't can you atleaset tell me the images whether they are svg's or jpg's ?
@uzairkhan2101
@uzairkhan2101 Год назад
where can I get this design???
@Coen
@Coen Год назад
Download is available here: coenjanssen.gumroad.com/l/cowbow-ebike
@venkeyjakkampudi8054
@venkeyjakkampudi8054 Год назад
how did you create the local components like bicycles
@titanovsky
@titanovsky Год назад
Nice
@Coen
@Coen Год назад
Thank you!
@leylajafarova9000
@leylajafarova9000 2 года назад
0:40 how did you hide circle? Can you please reply?
@rafxn3824
@rafxn3824 2 года назад
Dude bring the circle in Front of the rectangle
@keazertan
@keazertan 10 месяцев назад
+ 1 SUBSCRIBER
@Coen
@Coen 10 месяцев назад
+1 LIKE
@atrocitus9198
@atrocitus9198 Год назад
did you also programme it yourself ?
@Coen
@Coen Год назад
No, although I do have some knowledge of coding websites, I prefer to leave this to my developer friends.
@santoryu4689
@santoryu4689 2 года назад
great design thnk you are you can create a this hero section in flutter or html css js
@swatikumari2722
@swatikumari2722 3 года назад
hey how did u get cycle image in figma asset. ur answer will be appreciated. Thnx
@Coen
@Coen 2 года назад
You have to create a component with '⌥ ⌘ K'. Hopefully this works for you.
@uzmanaeem8888
@uzmanaeem8888 Год назад
Plz tell me how did you get that bike asset and how did you made that center circle
@Coen
@Coen Год назад
You can now download this file - assets included!
@RubabHanif
@RubabHanif 9 месяцев назад
Name of the software?
@Coen
@Coen 8 месяцев назад
We’re using Figma.
@pious007
@pious007 Год назад
what software are u using?
@Coen
@Coen Год назад
Figma it is!
@nswathi4822
@nswathi4822 Год назад
Hi...How did you add those images? I am not able to add them exactly like you do. I am not able to add exactly like you as I am able to paste a whole image with a background.
@mech04tech50
@mech04tech50 Год назад
Are you doing any project in this
@nswathi4822
@nswathi4822 Год назад
@@mech04tech50 just learning
@Coen
@Coen Год назад
What do you mean?
@Coen
@Coen Год назад
You can mask images or fill a rectangle for example, within the right panel.
@abdullahhaider611
@abdullahhaider611 Год назад
Bro amazing work can send link for assists Bike? plz
@Coen
@Coen Год назад
Download is available here: coenjanssen.gumroad.com/l/cowbow-ebike
@abdullahhaider611
@abdullahhaider611 Год назад
I thought Its free to download :)@@Coen
@Coen
@Coen Год назад
It is now!@@abdullahhaider611
@nicolasbaque3335
@nicolasbaque3335 Год назад
Hi, your work is amazing and i want to reproduce it but where can i find your assets ? Thanks !
@Coen
@Coen Год назад
Hi Nicolas, thank you! Downloads including assets will be available later on this year, currently working on it.
@Coen
@Coen Год назад
Download is available here: coenjanssen.gumroad.com/l/cowbow-ebike
@hasseebrajpoot4860
@hasseebrajpoot4860 Год назад
Kindly yh bta dy itni HD pics kesy lae waha,,, Main to Background remove kr rha hu lekin Quality ni thk aa rhi, Kindly bata dy....
@Coen
@Coen Год назад
I couldn’t understand it.
@_the_Scaryfinds
@_the_Scaryfinds Год назад
Please tell me where are you getting resources of those pictures of bicycles
@Coen
@Coen Год назад
You can now download this file - pictures included!
@elhor
@elhor Год назад
Hello, thanks for sharing this. i wanna know what the role of a designer, like you give the design to a front end dev or something else. I wanna know what will come after this and thanks a lot❤
@itsAnos77
@itsAnos77 Год назад
im not pro with ui ux design but yes i think after this you give the design to a coder or web developper and he brings the design to life, i hope this will help😊
@whiteeagle1157
@whiteeagle1157 Год назад
which website used for downloading cycle pictures?
@Coen
@Coen Год назад
Download is available here: coenjanssen.gumroad.com/l/cowbow-ebike
@umarnabiev36
@umarnabiev36 Год назад
how you guys are doing this tutorial? By slowing playback speed?
@Coen
@Coen Год назад
You can slow down the speed, but it is more a video to inspire you instead of a tutorial.
@NikunjGupta-u2b
@NikunjGupta-u2b Год назад
What is the name of the software you used in this video. Please someone help me with it.
@Coen
@Coen Год назад
Hi Nikunj, Figma it is! 🤞🏼
@eliad4135
@eliad4135 Год назад
how to put ellipse inside rectangles
@pavithradesilva6147
@pavithradesilva6147 Год назад
where can i get those icons?
@adebolaadekahunsi611
@adebolaadekahunsi611 2 года назад
What app was used in editing this video? I want to do something like this
@Coen
@Coen 2 года назад
Hi Abebola, For the design we use Figma. We also use various programs to create the videos, including: Adobe Photoshop, Illustrator, Premiere Pro, After Effects and Encoder.
@musasibeko9216
@musasibeko9216 2 года назад
What do you use to export Figma files to html&css
@Coen
@Coen 2 года назад
Hi Musa, There are several ways - from the 'inspect' tab to a plugin to export it. It depends on how you work together in your team or company to build projects from A to Z.
@ОксанаГрицей
@ОксанаГрицей Год назад
Hi, why is one part of the circle visible and the other is not? 0:40
@Coen
@Coen Год назад
What do you mean?
@ОксанаГрицей
@ОксанаГрицей Год назад
@@Coen I don't understand how you put a circle behind a rectangle and then one part of the circle disappears and the other part is on top of the rectangle
@krishnanandjha785
@krishnanandjha785 Год назад
​@@ОксанаГрицей its very easy to understand because if your art is in the frame then only in part seen of the circle and out part not visible . And if you out your circle totally from frame then it should be visible whole.
@ezeanaechechinaemerem1979
@ezeanaechechinaemerem1979 2 года назад
Please where can I get the fonts. Cowboy, bycicle etc
@Coen
@Coen Год назад
Download is available here: coenjanssen.gumroad.com/l/cowbow-ebike
@santoshs6586
@santoshs6586 2 года назад
0:40 sec how to do it?? can anyone know it???
@aravinth4745
@aravinth4745 2 года назад
LAYER BLUR
@Coen
@Coen 2 года назад
Just try and be creative.
@budembergdesign95
@budembergdesign95 2 года назад
The layer blur effect? It's located on the right bottom corner on the effects pannel, just make the blur very exaggerated
@kentaviotiziano4630
@kentaviotiziano4630 2 года назад
@@Coen a simply reply would do man some people are trying to learn 🤦🏽‍♂️
@Coen
@Coen 2 года назад
@@kentaviotiziano4630 You got that absolutely right. We sometimes do not have all the time to respond in detail, we apologize.
@dmansa4035
@dmansa4035 Год назад
backsound title sir ?
@kajaljaiswal9846
@kajaljaiswal9846 Год назад
Can we please get the project file, like the pictures, font, colours. please
@Coen
@Coen Год назад
From the new year we will make any screens available for download. Unfortunately, this does not apply to this one yet, if you are interested, you can always send an email.
@chelfreyucheoma5362
@chelfreyucheoma5362 Год назад
Does anyone know how he made the colour of the circle enter inside the square?
@charlesm.2604
@charlesm.2604 Год назад
The "square" is the actual Figma frame, the circle sits inside the frame but its position is in the minus so only a part of it is in the viewport. To make the color "blend" he used a specific effect called "Layer Blur" which gives off this sort of result if you crank it up.
@chelfreyucheoma5362
@chelfreyucheoma5362 Год назад
@@charlesm.2604 oh thank you. How did he get the minus position?
@hamedyoube2149
@hamedyoube2149 2 года назад
How you get a bik
@FatehAliTeepu-w3y
@FatehAliTeepu-w3y 10 месяцев назад
Im a developer trying to learn ui/ux deisgn , and i will give this service free with development, so i can make things tgat i know😂
@Ashiknepal-jp3ce
@Ashiknepal-jp3ce 6 месяцев назад
bro that cowboy bicycle where to bring
@FatihAlhijri
@FatihAlhijri Год назад
how to get bike? and logos
@Coen
@Coen Год назад
Just create it!
@rxml5
@rxml5 9 месяцев назад
0:39 how you do it :(
@bst_bambie1767
@bst_bambie1767 Год назад
Application ??
@Coen
@Coen 11 месяцев назад
Figma it is!
@isumitd9586
@isumitd9586 2 года назад
Do you do the code to develop web
@Coen
@Coen 2 года назад
Hi Sumit, what do you exactly mean?
@isumitd9586
@isumitd9586 2 года назад
@@Coen do you code using html css
@thefreshprince-t4m
@thefreshprince-t4m Год назад
Laugh out loud, so this software really is just like PowerPoint. Without the slides.
@Coen
@Coen Год назад
I think it’s more than that. Why?
@dos.santos.trader
@dos.santos.trader 2 года назад
share the project link on figma
@Coen
@Coen Год назад
Download is available here: coenjanssen.gumroad.com/l/cowbow-ebike
@sneakie_dhaireya
@sneakie_dhaireya 8 месяцев назад
1:11
@Faramation
@Faramation 2 года назад
Resources?
@Coen
@Coen Год назад
Download is now available!
@souravde2029
@souravde2029 Год назад
so much extra work with the manual spacing and stuff. Why?
@Coen
@Coen Год назад
Because it's a kind of 'Dribbble' shot for inspiration. This is not very realistic, but an experiment looking for new catchy elements.
@devcj8962
@devcj8962 2 года назад
I need this but in html and css lol
@Coen
@Coen 2 года назад
Maybe we should do that soon?
@romickkundu6118
@romickkundu6118 2 года назад
Bro can u pls provide us cycle png.
@Coen
@Coen 2 года назад
Why do you need the exact same image, if I may ask?
@denisturnsek7217
@denisturnsek7217 Год назад
Why is everyone starting to design for desktop and not mobile? Isn't mobile use like 95% these days?
@Coen
@Coen Год назад
Hi Denis, mobile is used more than desktop these days, that's right. The videos are for inspiration and do not show a realistic process. From January new videos will start in which mobile will certainly be discussed a lot, so who knows that will help you!
@erasmus_dickson
@erasmus_dickson 7 месяцев назад
u are to fast
@gokulsmiley7434
@gokulsmiley7434 6 месяцев назад
i am not satisfied
@Coen
@Coen 6 месяцев назад
That’s ok
@Fitnesswithsam0
@Fitnesswithsam0 Год назад
Your design is amazing bro ..❤️ I will also try this
@Coen
@Coen Год назад
Maybe the working file will help you to compare. Thanks for your compliment and good luck!
@jihadal-nefs-4302
@jihadal-nefs-4302 Год назад
Hi this video was awsome. How can i contact you? I have a gig for you.
@Coen
@Coen Год назад
Just send an email!
Далее
world's shortest Figma course
6:54
Просмотров 364 тыс.
Create a UI into a 3D Perspective in Figma
7:17
Просмотров 396 тыс.
Landing Page Design Tutorial | Web Design in Figma
19:32
AI03: Build a Website with Midjourney, Figma & ChatGPT
10:41
Amateur vs Pro UI Design | with examples
20:46
Просмотров 146 тыс.
If I Started UX in 2024, I'd Do This.
13:15
Просмотров 331 тыс.
5 UX/UI Portfolios You SHOULD Copy
15:02
Просмотров 107 тыс.
60-30-10 Color Rule
6:18
Просмотров 1,9 млн
world's shortest UI/UX design course
6:53
Просмотров 1,3 млн