Designing an e-Bike Landing Page UI Design in Figma

No video

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

Рет қаралды 366,949

Күн бұрын

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
► hello@coenjanssen.eu
💬 Contact Customer Service
►support@coenjanssen.eu
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 | 🇳🇱

Пікірлер: 204

@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 6 ай бұрын

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

@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 6 ай бұрын

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

@mrdark601 3 ай бұрын

I wanna reach this level of creativity 💪🏽

@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 6 ай бұрын

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

@devestrella 6 ай бұрын

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

@yaxxee 2 жыл бұрын

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

@Coen 2 жыл бұрын

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

@hanaahmed9000 9 ай бұрын

@@Coenwhy menu in put in center?

@Coen 8 ай бұрын

Just for fun! ✨

@muhamedtahiri2047 Жыл бұрын

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

@Coen Жыл бұрын

That’s cool! 😉

@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 😍

@fishbarbeque8540 Жыл бұрын

SIR!!! you are mad skilled OMG!

@Coen Жыл бұрын

OMG! 🙀

@fishbarbeque8540 Жыл бұрын

@@Coen OMG!

@kani729 Жыл бұрын

that looks super pro lol

@gtxstudio Жыл бұрын

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

@Coen Жыл бұрын

Thanks!

@keen_priya2858 Жыл бұрын

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

@Coen Жыл бұрын

You’re welcome!

@RajaVelforyou 5 ай бұрын

Great tutorial - I really liked it

@user-wt9pj8cw1s 3 ай бұрын

Where do you get such heavenly inspiration for your designs?

@RayanAdelAlJebbawi 7 ай бұрын

😍😍 super cool

@Coen 7 ай бұрын

Thank you, Rayan!

@MohanaKumar-xy5xm 7 ай бұрын

Clean✨

@Coen 7 ай бұрын

Thank you, Mohana!

@fatimarasheed-fj6jl 2 ай бұрын

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

@manon3054 8 ай бұрын

So inspiring! Thanks!

@Coen 8 ай бұрын

You’re welcome, Manon!

@alexandrer054 11 ай бұрын

I like this design

@zapeeosheikh 2 жыл бұрын

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

@Coen 2 жыл бұрын

Thank you, Zapeeo!

@synriser6742 2 жыл бұрын

That's a really nice design.

@Coen 2 жыл бұрын

That’s a very nice comment.

@happyhoppers22 6 ай бұрын

Thanks a ton buddy

@Coen 6 ай бұрын

You're welcome!

@user-qy1dy1ms9m 5 ай бұрын

So good

@s7234 Жыл бұрын

this is great!

@Coen Жыл бұрын

This is a great comment!

@user-ur3cx6eg5w 8 ай бұрын

You make me cry , developers always cry😢

@eloketobe 2 жыл бұрын

Very cool design I love it

@Coen 2 жыл бұрын

Thank you!

@Alikk784 Жыл бұрын

i wish i one day reach your level

@Coen Жыл бұрын

You can, for sure!

@uidesignwithfigma 2 жыл бұрын

Thanks for the lesson! 🔥

@Coen 2 жыл бұрын

You're welcome 😄

@rajat-s-kale1771 Жыл бұрын

Awesome

@Nabhel 3 жыл бұрын

Thanks

@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 Жыл бұрын

Me too please explain the thought process behind it

@Coen Жыл бұрын

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

@gauravthapaliya4389 6 ай бұрын

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

@mrlibes1 11 ай бұрын

You are the best

@Coen 11 ай бұрын

Thank you! 😇

@Faramation 2 жыл бұрын

Which plugin you have used for icon's

@paalzolder 3 жыл бұрын

Nice design! Really like the red hue ;)

@Coen 3 жыл бұрын

Thank you, Polatic!

@Pavan-735 3 ай бұрын

I saw your design in someone's portfolio

@Coen 3 ай бұрын

Where? 😱

@Faramation 2 жыл бұрын

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

@letmesay2035 2 жыл бұрын

you have option to watch 0.25x

@Coen 2 жыл бұрын

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

@reclusiveboy 7 ай бұрын

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 6 ай бұрын

From now on, I will!

@dmansa4035 Жыл бұрын

keren bang

@titanovsky Жыл бұрын

Nice

@Coen Жыл бұрын

Thank you!

@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 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 2 жыл бұрын

U can use linear colour instead of fill. Much simpler

@Coen 2 жыл бұрын

@@joshfernandez8475 We're sorry, Josh.

@keazertan 8 ай бұрын

+ 1 SUBSCRIBER

@Coen 7 ай бұрын

+1 LIKE

@vikahakobjanyan 11 ай бұрын

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?

@techwake360 3 жыл бұрын

Nice work

@Coen 3 жыл бұрын

Thank you, techwake!

@abdennourkoumad6276 3 жыл бұрын

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

@Coen 2 жыл бұрын

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

@bhaskarrau7141 6 ай бұрын

can you share the links please ? @@Coen

@santoryu4689 2 жыл бұрын

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

@leylajafarova9000 2 жыл бұрын

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

@rafxn3824 2 жыл бұрын

Dude bring the circle in Front of the rectangle

@user-qo5wy5hk7v Жыл бұрын

Quick question, where did you get the bike image?

@Coen Жыл бұрын

Honestly, just using Google.

@Coen Жыл бұрын

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

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

@olaoluwaadekeye176 2 жыл бұрын

nice design , what do u use to screen record

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

@anonymous_squirl 3 ай бұрын

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

@venkeyjakkampudi8054 Жыл бұрын

how did you create the local components like bicycles

@eliad4135 Жыл бұрын

how to put ellipse inside rectangles

@Ashiknepal-jp3ce 3 ай бұрын

bro that cowboy bicycle where to bring

@tunjioloruntobasam2217 2 жыл бұрын

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

@Coen 2 жыл бұрын

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!

@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😊

@santoshs6586 2 жыл бұрын

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

@aravinth4745 2 жыл бұрын

LAYER BLUR

@Coen 2 жыл бұрын

Just try and be creative.

@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 2 жыл бұрын

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

@Coen 2 жыл бұрын

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

@SaranKannan-tp9kl 9 ай бұрын

where did you take this cycle images

@sassy6085 10 ай бұрын

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

@believer.1204 6 ай бұрын

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

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

@sneakie_dhaireya 6 ай бұрын

1:11

@dmansa4035 Жыл бұрын

backsound title sir ?

@_the_Scaryfinds Жыл бұрын

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

@Coen Жыл бұрын

You can now download this file - pictures included!

@user-ur3cx6eg5w 8 ай бұрын

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😂

@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

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

@swatikumari2722 2 жыл бұрын

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

@Coen 2 жыл бұрын

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

@whiteeagle1157 Жыл бұрын

which website used for downloading cycle pictures?

@Coen Жыл бұрын

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

@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

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

@RubabHanif 6 ай бұрын

Name of the software?

@Coen 6 ай бұрын

We’re using Figma.

@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

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

@bhaskarrau7141 6 ай бұрын

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 ?

@musasibeko9216 2 жыл бұрын

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

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

@user-zp1wb7jf7t Жыл бұрын

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

@Coen Жыл бұрын

Hi Nikunj, Figma it is! 🤞🏼

@rxml5 6 ай бұрын

0:39 how you do it :(

@uzairkhan2101 Жыл бұрын

where can I get this design???

@Coen Жыл бұрын

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

@ezeanaechechinaemerem1979 Жыл бұрын

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

@Coen Жыл бұрын

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

@adebolaadekahunsi611 2 жыл бұрын

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

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

@devcj8962 2 жыл бұрын

I need this but in html and css lol

@Coen 2 жыл бұрын

Maybe we should do that soon?

@user-gu6hw7mp3y Жыл бұрын

Hi, why is one part of the circle visible and the other is not? 0:40

@Coen Жыл бұрын

What do you mean?

@user-gu6hw7mp3y Жыл бұрын

@@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 Жыл бұрын

@@user-gu6hw7mp3y 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.

@pious007 Жыл бұрын

what software are u using?

@Coen Жыл бұрын

Figma it is!

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

@user-hq7kb8vb6x Жыл бұрын

how to get bike? and logos

@Coen Жыл бұрын

Just create it!

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

@onlydollar.trading 2 жыл бұрын

share the project link on figma

@Coen Жыл бұрын

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

@isumitd9586 2 жыл бұрын

Do you do the code to develop web

@Coen 2 жыл бұрын

Hi Sumit, what do you exactly mean?

@isumitd9586 2 жыл бұрын

@@Coen do you code using html css

@bst_bambie1767 9 ай бұрын

Application ??

@Coen 8 ай бұрын

Figma it is!

@romickkundu6118 2 жыл бұрын

Bro can u pls provide us cycle png.

@Coen 2 жыл бұрын

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

@Faramation 2 жыл бұрын

Resources?

@Coen Жыл бұрын

Download is now available!

@user-jk8kn3ij8o Жыл бұрын

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

@Coen Жыл бұрын

I think it’s more than that. Why?

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