E-commerce App Design in Adobe XD (Wireframe/Mockup + Prototype)

[@ninonini79]

This is the best channel for designers I've seen. No talking! Just detailed actions. Thank you so much! Made a big improvement to my portfolio.

[@DesignSense]

We are glad our channels is valuable to you.

[@ahmadullahahmadzai8834]

Thanks bro finally someone who isn't posting malware or fake stuff, you deserve my subscribe!

[@Eren89164]

Just Unbelievable... The elegant👌 looking interface ever. Loved it. Bro. Appreciate the hard work behind ❤️... Thanks for sharing this 👍

[@DesignSense]

Thank you for your appreciations 😊. Stay tuned

[@rajuu2001]

Sir jii hamko ek app bna na hai

[@DesignSense]

@@rajuu2001 ap Facebook page pa ya Instagram pa contact kar sakta han

[@අනුරුද්ධසමරදිවාකර]

You are the greatest UXUI Designer on earth 🌎 no doubt ❤️✅ much love from sri lanka

[@DesignSense]

Thank you for your love and support ☺️

[@donaldcanonoy3312]

IT'S ALWAYS THE UNDERRATED VID THAT'S LEGIT! THANK YOU!

[@makevine7211]

imagine html css worker love this hahah

[@fixthebug2060]

I do and willing to shift as ui designer

[@radenmuhrizanulakbararrosy8251]

Just bought soft soft! So excited to get started!!

[@ทดสอบใช้งาน-ฆ9ล]

It can't get anymore simple than this. Thank you soo much howtobasic!

[@rachitjasoria9041]

this took you 22 minutes and it took me 4 hrs 😂😅😅 as i am a beginner and this was my first project! thanks for the tutorial!!!

[@DesignSense]

Don't worry keep practicing. Thank you 😊

[@cyrilde25]

It's great channel for me keep learning about the UIUX design. Thank you so much, you provide different tutorial and show very detail. It's always make me keep good "design sense" !

[@DesignSense]

Great to hear! Stay tuned for more videos❤❣🥰

[@divone1793]

I subscribed as soon as the video ended. Good job 👏👏

[@DesignSense]

Thanks buddy ❤️

[@phuongnamnguyen4544]

Thanks, this's perfect video👍

[@eugeniuchiritoiu9591]

Thank You so much I have been trying to crack it since 2 days.. Finally it worked.. thanks

[@ShredCut]

Good Work....I appreciate this very much....✔

[@DesignSense]

Thank you for your appreciations 😊

[@chona456]

I learned a lot buy just watching this. Thanks!

[@DesignSense]

That's great!

[@hey.ItsNiki]

Gonna start from here. Thank you for the awesome video.💕

[@DesignSense]

Great!. Keep it up :)

[@Stevenastudillo90]

You got a new subscriber today!! Great job!! You made me smile while watching this.

[@DesignSense]

Wow, awesome. THANKS

[@coloroflove]

You just got a subscriber. This is very cool. You're good.

[@DesignSense]

Thanks. Stay tuned, more are coming 👍

[@Angry_Cat00]

Thank you bro, that what I'm looking for , keep doing 🥰🥰

[@DesignSense]

Welcome bro ♥️

[@saicharansigiri2964]

God of Designs ❤

[@kadirhussain7365]

Bhai buy now wala karo na our app main kaise convert kare wo tuturial banao na bhai please yaar pehli baar main hi fan hogya aapka

[@DesignSense]

Food app ko hm ne android studio me develop keya ha. We tutorial check kar lo.

[@limon665]

what a music.......what a music.......love it...

[@DesignSense]

Just the music 😂

[@yunushyamloglu6601]

Great, I'm lucky, it works great for me without errors

[@sushmitadesai2812]

From your video I got start learning the ui design 👍

[@DesignSense]

We're glad it was helpful 🙌

[@JK_TENEBROAbellana_11]

thank u so much this video has been very helpful for my education

[@DesignSense]

Glad to hear, it was helpful ☺️

[@martafonseca5475]

The finished product looks a lot better than most tutorials here, but you don't talk about the Apple/Androids guidelines, grid system, nothing... It's all just by 'eye' and gut

[@DesignSense]

We will talk about guidelines and grid system etc in the near future.

[@snipe2k18]

That Guy Thanks, I will look into it later.

[@jessanymorais6374]

Thank you for tNice tutorials. SwitcNice tutorialng to soft from setupcraft and MascNice tutorialne is incredibly daunting and I didn't know where to start. I will definitely be

[@chaitrajoshi2743]

Successfully replicated this one as well. Thanks DesignSense

[@christophercoronel471]

How can i make this animation 0:11 to show my projects?

[@DesignSense]

Watch the full video.

[@Laila-Almalki]

It was great, first time using XD. Thanks.

[@DesignSense]

Welcome 😊

[@fakhrioficial8061]

this video helped me. thanks

[@karunsureshkumar4612]

simple but clear teaching. could u do more of these

[@DesignSense]

Sure! stay tuned.

[@styvenpigozzo9628]

Thank you for explaining this thoroughly!

[@narendrameena4737]

hanks lot Sir.. You helping us..

[@News_Shorts-]

Html css and xD loved it!

[@rajudasrudro]

OMG! Very Nice. 😍

[@DesignSense]

Thank you 😊

[@aliastar5616]

please can you tell me how did you get those logos when chrome icon in it?

[@LowBudgetReview]

I really love it....it helps me a lot👍 ...❤️ Thanks dude

[@DesignSense]

You're welcome 😊, stay tuned

[@improperanyhow]

@@DesignSense Please Design This In Figma

[@DesignSense]

@@improperanyhow sure, soon we will upload tutorials about figma. Thanks

[@umarfraz1191]

Superb

[@DesignSense]

Thanks 🤗

[@Rakesh-up8yj]

hey man nice work my question is that can by doing some changes I include it in my portfolio

[@DesignSense]

Depends on how much do you change it.

[@chrisfahie2767]

Still working as of today, ty!

[@tongiedesign9787]

This is a really nice design

[@DesignSense]

Thank you! 😊

[@MTOBRO]

Thanks bro that was really helpful

[@JediHan]

The recommended video at the end blocks the video view. Cannot see clearly what the final live preview looks like.

[@DesignSense]

Ok. We will remove that.

[@justinarchibald138]

very well, I liked everything

[@DesignSense]

😍😊

[@MrIcassio]

Thank you, it works perfect!

[@sale7680]

Bravo

[@aldriansahwisnu4027]

Thank You So Much Bud

[@aimanali9868]

3:36 it does not happen on my pc. The subtract tool gives me a square instead of arrow

[@DesignSense]

Make sure your arrow icon is in svg format, and in front of ellipse.

[@aimanali9868]

Thanks

[@alerivsm]

works perfectly, thank you

[@smahendra6148]

Which take more time & effort Coding app or design ?

[@N4nZeR]

Very nice keep up

[@DesignSense]

Thanks 😊

[@apnadesiranch]

Very Good Really Appreciate... best of luck love and respect from saudi arabia

[@DesignSense]

Thank you for your love and support ❤️.

[@riccoc.6507]

You have talent

[@DesignSense]

Thank you

[@andrzejd.9706]

Thank you so much bro. Sending virtual hugs. Worked like a charm ;-)

[@DesignSense]

🤗

[@kingalech6748]

Wow thank you so much that really helped

[@wesleymacedo9717]

Achei o design bem elegante. Parabéns!

[@empregasetelagoas3317]

Thank you for this informative and educational video!

[@eguchiyuuki]

Great!

[@gamingraptor1765]

But right below in the corner of tNice tutorials blue screen, there's "Program" wNice tutorialch most likely states "Aggressive TE" if you click on that you have a

[@temitopeajayi7613]

Great job! Please utilize the repeat grid feature. Everything seems pretty embarrassing without maximizing it. Great job bruh

[@DesignSense]

Okay, thank you 😊

[@ryleshmeledath8405]

how you are changing the color of icon - the rating icon

[@DesignSense]

Theses or in SVG format, you can charge color, edit easily.

[@huyle3866]

I'm beginner of ui/ux designer. Which program is best in design sir ? .I dunno choose between adobe xD and figma .Thanks

[@DesignSense]

There will always be some tools better than other but most of the time you can achieve the same results. So in my opinion tools doesn't matter, choose the one you are good at.

[@MarkRambotech]

From a developer angle, this design has 2 parts not that reasonable: 1. User won't upload transparent bg product; 2. We can't set the triangle's bg according to the product's main color.

[@DesignSense]

I think it not impractical but yes it needs a better solution. Thanks.

[@OneTamadTV]

You can hide the products that are not in the viewport though...

[@bahadird]

1 - Yes I agree about transparent images, but not that impossible. 2- Administrators should be able to register the product's color (at least) for filtering purposes. Yes, you can't set the triangle colors automatically, but it can be (and should be) done from the cms manually. Looks like Audiozic won't have user-generated content (like Amazon has).

[@nurlytan_berikbol]

Now it's left to write some code Most difficult part is over - designing😄

[@mranjuc3406]

You get a new subscriber.. Keep it up. ✅

[@DesignSense]

Thank you, stay tuned 😊

[@alisoroori1425]

thanks man👍

[@yuslinandev]

Muy bonito. Me sirve de inspiración 😊 . Buen contenido!!!

[@arunsarkar5573]

After creating this can we use dynamic

[@DesignSense]

You need to code it

[@dinnnnnnnnnnnn]

Adobe XD, RIP! 😭 spent ages on it... testing out Lunacy now - not bad so far

[@DesignSense]

Watch new vids

[@pedahzur3663]

you are so good. have you design any app?

[@DesignSense]

Thanks, you can watch our other videos of app design.

[@osmanymn3657]

That's really good tutorial... Easy and enjoyful

[@DesignSense]

Thank you 😊

[@behappy2529]

can you please tell me how can I share this file with client. I mean should I share the jpeg format

[@DesignSense]

Share your source file or the link with your client.

[@behappy2529]

@@DesignSense thank you😇

[@gigefour]

AMAZING 😍😍😍😍😍😍😍

[@DesignSense]

Thanks 😊

[@mbhomeatacado3990]

Really nice and helpful... Thanks!

[@DesignSense]

Thank you 😊

[@andinmarley]

This editing is beautiful

[@DesignSense]

Thank you 😊

[@khansaarshad8878]

Please speak while u design.. Great work

[@DesignSense]

Sure soon. Thanks♥️

[@systemachic]

Works good, tnx

[@hi_positivitee3322]

Hi, how did you bring that layout as a phone shape...I am looking for a solution...please help...

[@DesignSense]

This is called mock up. We have a video on this topic. Please watch that video.

[@luieescobar4664]

But how will out that in website form ? 🤔

[@Manwhoreads]

Sir can you say where did you toom those brand logos like JBL akg

[@DesignSense]

Search in google..☺️

[@Ohcomeonbruv]

Too good 👌

[@DesignSense]

Thank you 😊

[@vitorpaulosouzasantos6917]

It's just awesome

[@lilssal]

why is it when i drag it just fade to the next artboard without the animation

[@DesignSense]

"Make sure your trigger is set to 'drag' and 'Auto animation.' If nothing is happening, ensure that the names of your elements are the same in both artboards."

[@ActressandModels]

You got a new subscriber today!!

[@DesignSense]

Thanks 😊

[@Diegobram.design]

Que massaaa!! A muito tempo que queria encontrar um canal assim

[@siddharthkm6586]

The software you are using is figma right?

[@DesignSense]

No, Adobe XD

[@ivonaak]

Thank you.

[@skulgamer5442]

Loved this. Thanks for sharing with us.

[@hiyoriiki4591]

im a super beginner and need help! How do i make my "add to cart" button such that when i click on "add to cart" for a particular product and go to the cart, ONLY that one product is there?

[@pratheekshetty.m5784]

Super bro keep going

[@DesignSense]

Thank you👍

[@charlesajiboye4421]

Great job, i like this..The Source file you posted is different from what you designed in the video. I will like to have this source file so as to practice. Thanks

[@DesignSense]

The link is updated please try again, thank you 😊

[@akshayvisweswar9580]

@@DesignSense Great job, I like this. in the source file icon are not available.

[@KamranKhan-s8h3b]

Over all presentation is nice but in the last the price of Maroon color Headphone????

[@DesignSense]

Hahaha those are just a dummy price's

[@ak56867]

awesome, can you please share with me how to record the prototype like in your video's intro.

[@DesignSense]

You can record this in OBS or windows games recorder.

[@Indonesia01ian]

Hi, would you like to make a tutorial for design a high-tech (iron man-like) screen? it would be awesome

[@DesignSense]

Will try

[@Indonesia01ian]

@@DesignSense thank you so much 🙏

[@massengoconstelvy858]

Hello i would like to know after finish to design , how to get the real application?

[@DesignSense]

You need to code it.

[@just.a.random.comment]

Great tutorial. I have a question on mind, do I need to know coding in order to become a ui/ux designer?

[@DesignSense]

No, you don't need 😊.

[@omardanial7351]

no... you need to have design sense ... colour science .. and aesthetics

[@TheMR-777]

These are so wonderful ideas! and... Can I know which Music is playing in the background? It's way Great!

[@DesignSense]

The links are given in the description. Good luck!

[@TheMR-777]

@@DesignSense Wow Great, I found that! Thank you very much for both :), (Design + Background Music Link)

[@nemesiszz]

how did you make the logo? plz help fast 😥

[@DesignSense]

It is just a dummy logo. 🙄