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

Hello creatives 👋🏼,
Today we will learn to design an e-Bike Landing Page UI Design in Figma / Adobe XD.
#WebDesign #UIDesign #eBike #uiuxdesign
The main goal of these videos is to inspire you within a short time. This way you can use certain elements yourself and incorporate them into your own graphic designs.
Download here
coenjanssen.gu...
--------------------------------------------------------------------------------------------
Follow us:
Helpful design resources for everyone. We provide the resources, you get better insights, and create the best results. Less searching, more designing: www.coenjansse...
📸 Instagram
► / coenjanssen.eu
🐥 Twitter
► / coenjanssen_eu
🛒 Merchandise
► www.coenjansse...
Contact
🎯 Business Inquiries / Advertising
► [e-mail]
💬 Contact Customer Service
►[e-mail]
Contact information
► www.coenjansse...
--------------------------------------------------------------------------------------------
Music Credits:
HaTom - No More (Instrumental Mix) [Bass Rebels]
Download / Stream - www.bassrebels...
KR & Gemmi - Miss You (Instrumental Mix) [Bass Rebels]
Song - • KR & Gemmi - Miss You ... ●Download / Stream - www.bassrebels...
--------------------------------------------------------------------------------------------
That’s all from us. | © 2021 Coen Janssen | 🇳🇱

[@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]

Thank you! Hope to see you back soon.✌🏼

[@devestrella]

@@Coen yeah of course I'll be here soon 👏

[@believer.1204]

Does figma provide you the code for the design which you created??

[@devestrella]

@@believer.1204 no, bro, it doesn't provide, but you'll have the final product design and get inspired and oriented by it

[@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]

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]

there are not millions of views

[@devestrella]

@@markopolo2224 lol

[@Coen]

That’s correct.

[@believer.1204]

Does figma provide you the code for the design which you created??

[@Coen]

*Exciting News! 🔥 The download is now available for this amazing resource! 🚀* coenjanssen.gumroad.com/l/cowbow-ebike

[@AbdullahQureshi-s9j]

Where do you get such heavenly inspiration for your designs?

[@keen_priya2858]

I tried to copy you..and got good results. Thank you for this inspiration!!❤️

[@Coen]

You’re welcome!

[@RajaVelforyou]

Great tutorial - I really liked it

[@happyhoppers22]

Thanks a ton buddy

[@Coen]

You're welcome!

[@synriser6742]

That's a really nice design.

[@Coen]

That’s a very nice comment.

[@GelloMello-j9z]

So good

[@Nabhel]

Thanks

[@helenchinweike8080]

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]

Me too please explain the thought process behind it

[@Coen]

Good idea! We’ll be back with ‘words’.

[@reclusiveboy]

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]

From now on, I will!

[@moiserwibutso4899]

Nice tutorial. By the way, how did you fill that last star in half (red & white)? If anyone else knows please tell me.

[@Coen]

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]

U can use linear colour instead of fill. Much simpler

[@Coen]

@@joshfernandez8475 We're sorry, Josh.

[@SaranKannan-tp9kl]

where did you take this cycle images

[@sassy6085]

where i can find the assets? it's showing sold out

[@Ashiknepal-jp3ce]

bro that cowboy bicycle where to bring

[@uzmanaeem8888]

Plz tell me how did you get that bike asset and how did you made that center circle

[@Coen]

You can now download this file - assets included!

[@pavithradesilva6147]

where can i get those icons?

[@rxml5]

0:39 how you do it :(

[@santoshs6586]

0:40 sec how to do it?? can anyone know it???

[@aravinth4745]

LAYER BLUR

[@Coen]

Just try and be creative.

[@budembergdesign95]

The layer blur effect? It's located on the right bottom corner on the effects pannel, just make the blur very exaggerated

[@kentaviotiziano4630]

@@Coen a simply reply would do man some people are trying to learn 🤦🏽‍♂️

[@Coen]

@@kentaviotiziano4630 You got that absolutely right. We sometimes do not have all the time to respond in detail, we apologize.

[@Fitnesswithsam0]

Your design is amazing bro ..❤️ I will also try this

[@Coen]

Maybe the working file will help you to compare. Thanks for your compliment and good luck!

[@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]

Are you doing any project in this

[@nswathi4822]

@@mech04tech50 just learning

[@Coen]

What do you mean?

[@Coen]

You can mask images or fill a rectangle for example, within the right panel.

[@musasibeko9216]

What do you use to export Figma files to html&css

[@Coen]

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]

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]

​@@ОксанаГрицей 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.

[@gokulsmiley7434]

i am not satisfied

[@Coen]

That’s ok

[@fatimarasheed-fj6jl]

I loved it you r such an amazing designer .Ive 1 question how to get those components ?

[@muhamedtahiri2047]

the design is so awesome and precise keep it up btw i'm 15 and just started learning figma

[@Coen]

That’s cool! 😉

[@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]

Does figma provide you the code for the design which you created??

[@yaxxee]

Thank you so much for the inspiration. Watching these videos is helping me to create more professional designs.

[@Coen]

Thank you Yaxxee, We'll be back soon to continue to inspire you.

[@hanaahmed9000]

​@@Coenwhy menu in put in center?

[@Coen]

Just for fun! ✨

[@anonymous_squirl]

how to get this cycle or bike any image without background in figma?????anyone

[@uzairkhan2101]

where can I get this design???

[@Coen]

Download is available here: coenjanssen.gumroad.com/l/cowbow-ebike

[@Faramation]

Which plugin you have used for icon's

[@erasmus_dickson]

u are to fast

[@abdennourkoumad6276]

Nice design ! Where can i find the 3d product assets , like the bike or nike shoes ... ?

[@Coen]

We get our images from royalty-free websites or in the case of a redesign from the official website.

[@bhaskarrau7141]

can you share the links please ? @@Coen

[@RubabHanif]

Name of the software?

[@Coen]

We’re using Figma.

[@kani729]

that looks super pro lol

[@bhaskarrau7141]

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 ?

[@zapeeosheikh]

❤️❤️❤️❤️ Wow Amazing Work you work is published on telegram UI Group 😀❤️❤️❤️ great Achievement

[@Coen]

Thank you, Zapeeo!

[@gtxstudio]

I truly love your channel. Keep doing the best work.

[@Coen]

Thanks!

[@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?

[@believer.1204]

Does figma provide you the code for the design which you created??

[@gauravthapaliya4389]

I think it's called hero section landing page means it consists the entire page that user will see when the open the website

[@Pavan-735]

I saw your design in someone's portfolio

[@Coen]

Where? 😱

[@عبدالملك-ي5ه3ي]

Quick question, where did you get the bike image?

[@Coen]

Honestly, just using Google.

[@Alikk784]

i wish i one day reach your level

[@Coen]

You can, for sure!

[@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]

Cool! Great job 🤞🏼

[@pavilionhp2896]

@@Coen 😍

[@leylajafarova9000]

0:40 how did you hide circle? Can you please reply?

[@rafxn3824]

Dude bring the circle in Front of the rectangle

[@alexandrer054]

I like this design

[@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]

I couldn’t understand it.

[@Faramation]

Please don't forget to mention steps in subtitles.it will help to beginner's.

[@letmesay2035]

you have option to watch 0.25x

[@Coen]

We will take that with us, we will be back from September. Thank you!

[@lekoryo5727]

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 ạ!

[@denisturnsek7217]

Why is everyone starting to design for desktop and not mobile? Isn't mobile use like 95% these days?

[@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!

[@thefreshprince-t4m]

Laugh out loud, so this software really is just like PowerPoint. Without the slides.

[@Coen]

I think it’s more than that. Why?

[@FatehAliTeepu-w3y]

You make me cry , developers always cry😢

[@RayanAdelAlJebbawi]

😍😍 super cool

[@Coen]

Thank you, Rayan!

[@umarnabiev36]

how you guys are doing this tutorial? By slowing playback speed?

[@Coen]

You can slow down the speed, but it is more a video to inspire you instead of a tutorial.

[@souravde2029]

so much extra work with the manual spacing and stuff. Why?

[@Coen]

Because it's a kind of 'Dribbble' shot for inspiration. This is not very realistic, but an experiment looking for new catchy elements.

[@SayanGupta4]

How do we add functionality to the designs...like the buttons working and all?

[@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.

[@eliad4135]

how to put ellipse inside rectangles

[@santoryu4689]

great design thnk you are you can create a this hero section in flutter or html css js

[@fishbarbeque8540]

SIR!!! you are mad skilled OMG!

[@Coen]

OMG! 🙀

[@fishbarbeque8540]

@@Coen OMG!

[@rajat-s-kale1771]

Awesome

[@NikunjGupta-u2b]

What is the name of the software you used in this video. Please someone help me with it.

[@Coen]

Hi Nikunj, Figma it is! 🤞🏼

[@sneakie_dhaireya]

1:11

[@dmansa4035]

backsound title sir ?

[@keazertan]

+ 1 SUBSCRIBER

[@Coen]

+1 LIKE

[@_the_Scaryfinds]

Please tell me where are you getting resources of those pictures of bicycles

[@Coen]

You can now download this file - pictures included!

[@FatehAliTeepu-w3y]

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😂

[@s7234]

this is great!

[@Coen]

This is a great comment!

[@kajaljaiswal9846]

Can we please get the project file, like the pictures, font, colours. please

[@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.

[@bst_bambie1767]

Application ??

[@Coen]

Figma it is!

[@MohanaKumar-xy5xm]

Clean✨

[@Coen]

Thank you, Mohana!

[@eloketobe]

Very cool design I love it

[@Coen]

Thank you!

[@whiteeagle1157]

which website used for downloading cycle pictures?

[@Coen]

Download is available here: coenjanssen.gumroad.com/l/cowbow-ebike

[@venkeyjakkampudi8054]

how did you create the local components like bicycles

[@atrocitus9198]

did you also programme it yourself ?

[@Coen]

No, although I do have some knowledge of coding websites, I prefer to leave this to my developer friends.

[@hamedyoube2149]

How you get a bik

[@dmansa4035]

keren bang

[@swatikumari2722]

hey how did u get cycle image in figma asset. ur answer will be appreciated. Thnx

[@Coen]

You have to create a component with '⌥ ⌘ K'. Hopefully this works for you.

[@nicolasbaque3335]

Hi, your work is amazing and i want to reproduce it but where can i find your assets ? Thanks !

[@Coen]

Hi Nicolas, thank you! Downloads including assets will be available later on this year, currently working on it.

[@Coen]

Download is available here: coenjanssen.gumroad.com/l/cowbow-ebike

[@manon3054]

So inspiring! Thanks!

[@Coen]

You’re welcome, Manon!

[@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]

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😊

[@abdullahhaider611]

Bro amazing work can send link for assists Bike? plz

[@Coen]

Download is available here: coenjanssen.gumroad.com/l/cowbow-ebike

[@abdullahhaider611]

I thought Its free to download :)@@Coen

[@Coen]

It is now!@@abdullahhaider611

[@chelfreyucheoma5362]

Does anyone know how he made the colour of the circle enter inside the square?

[@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]

@@charlesm.2604 oh thank you. How did he get the minus position?

[@tunjioloruntobasam2217]

Good job. Where did you get the bicycle from and how did you fill the last star

[@Coen]

Hi Tunji, thank you! We get our images from royalty-free websites or in the case of a redesign from the official website. There are several ways to make a half star. For example by duplicating and masking it. I think you'll see it if you lower the speed of the video. Good luck!

[@FatihAlhijri]

how to get bike? and logos

[@Coen]

Just create it!

[@ezeanaechechinaemerem1979]

Please where can I get the fonts. Cowboy, bycicle etc

[@Coen]

Download is available here: coenjanssen.gumroad.com/l/cowbow-ebike

[@pious007]

what software are u using?

[@Coen]

Figma it is!

[@adebolaadekahunsi611]

What app was used in editing this video? I want to do something like this

[@Coen]

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.

[@uidesignwithfigma]

Thanks for the lesson! 🔥

[@Coen]

You're welcome 😄

[@onlydollar.trading]

share the project link on figma

[@Coen]

Download is available here: coenjanssen.gumroad.com/l/cowbow-ebike

[@romickkundu6118]

Bro can u pls provide us cycle png.

[@Coen]

Why do you need the exact same image, if I may ask?

[@devcj8962]

I need this but in html and css lol

[@Coen]

Maybe we should do that soon?

[@mrlibes1]

You are the best

[@Coen]

Thank you! 😇

[@olaoluwaadekeye176]

nice design , what do u use to screen record

[@titanovsky]

Nice

[@Coen]

Thank you!

[@isumitd9586]

Do you do the code to develop web

[@Coen]

Hi Sumit, what do you exactly mean?

[@isumitd9586]

@@Coen do you code using html css

[@Faramation]

Resources?

[@Coen]

Download is now available!

[@paalzolder]

Nice design! Really like the red hue ;)

[@Coen]

Thank you, Polatic!

[@techwake360]

Nice work

[@Coen]

Thank you, techwake!