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

No video

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

Рет қаралды 636,336

3 жыл бұрын

Hi guys!
Today we will learn to design an eCommerce app in Adobe XD.
Steps:
1. High fidelity wireframe/Mockup
2. Prototyping
---------------------------------------------------------------------------------------------------------------------
Course:
The complete Java Android App development Bootcamp 2020
Learn Android development fundamentals and start creating your own Android applications.
Get this course (90% off)
bit.ly/3cCWHvK
---------------------------------------------------------------------------------------------------------------------
Source files:
Download App source file:
bit.ly/3rQ4NGi
Download free stock photos & videos:
www.pexels.com/
Download free icons:
www.flaticon.com
Download free cropped stock photos (PNG):
pnghunter.com
---------------------------------------------------------------------------------------------------------------------
Follow us:
Facebook:
Page:
/ designsense2070
bit.ly/3h5Uafm
Group:
Join our Facebook group for curated content, inspiration, design critique, and job postings:
bit.ly/3jw0VbL
Join our Webflow group.
bit.ly/3KZz3Ig
Instagram:
@designsense99
Dribbble:
dribbble.com/D...
---------------------------------------------------------------------------------------------------------------------
Music:
Song: Atch - Echoes
Music provided by Vlog No Copyright Music.
Creative Commons - Attribution 3.0 Unported
Video Link: • Atch - Echoes (Vlog No...
-------------------------------------------------------------------------------
Song: Altero - Crazy
Music provided by Vlog No Copyright Music.
Video Link: • Altero - Crazy (Vlog N...

Пікірлер: 447

@ninonini79 3 жыл бұрын

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

We are glad our channels is valuable to you.

@dickyyy116 3 жыл бұрын

Great work. Used Adobe products for years, looking at creating a basic app for my industry. Week after installing XD and watch a few videos. I finally have an app. Thank you brother. Would love a zoom call to go through haha it’s so fun creating the wiremaps

@DesignSense 3 жыл бұрын

Glad to hear that. Good luck!

@dickyyy116 3 жыл бұрын

@@DesignSense would be great to get feedback/quote/info ready for sales + pitches.(can confirm sales before with prototype as in specific business). What options do I have if we have no money yet to talk to you? 😂

@makevine7211 3 жыл бұрын

imagine html css worker love this hahah

@fixthebug2060 Жыл бұрын

I do and willing to shift as ui designer

@Eren89164 3 жыл бұрын

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

@DesignSense 3 жыл бұрын

Thank you for your appreciations 😊. Stay tuned

@rajuu2001 3 жыл бұрын

Sir jii hamko ek app bna na hai

@DesignSense 3 жыл бұрын

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

@user-ov6ok3nf8c 3 жыл бұрын

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

@DesignSense 3 жыл бұрын

Thank you for your love and support ☺️

@ahmadullahahmadzai8834 Жыл бұрын

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

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

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

@donaldcanonoy3312 Жыл бұрын

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

@radenmuhrizanulakbararrosy8251 Жыл бұрын

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

@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❤❣🥰

@phuongnamnguyen4544 Жыл бұрын

Thanks, this's perfect video👍

@rachitjasoria9041 3 жыл бұрын

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

Don't worry keep practicing. Thank you 😊

@JediHan 3 жыл бұрын

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

@DesignSense 3 жыл бұрын

Ok. We will remove that.

@chona456 3 жыл бұрын

I learned a lot buy just watching this. Thanks!

@DesignSense 3 жыл бұрын

That's great!

@martafonseca5475 3 жыл бұрын

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

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

@MarkRambotech 3 жыл бұрын

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

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

@OneTamadTV 3 жыл бұрын

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

@bahadird 3 жыл бұрын

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

@ShredCut 3 жыл бұрын

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

@DesignSense 3 жыл бұрын

Thank you for your appreciations 😊

@Stevenastudillo90 3 жыл бұрын

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

@DesignSense 3 жыл бұрын

Wow, awesome. THANKS

@Angry_Cat00 3 жыл бұрын

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

@DesignSense 3 жыл бұрын

Welcome bro ♥️

@eugeniuchiritoiu9591 Жыл бұрын

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

@kadirhussain7365 3 жыл бұрын

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

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

@user-cv9ui5ox2q 11 ай бұрын

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

@DesignSense 11 ай бұрын

Glad to hear, it was helpful ☺️

@divone1793 3 жыл бұрын

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

@DesignSense 3 жыл бұрын

Thanks buddy ❤️

@snipe2k18 Жыл бұрын

That Guy Thanks, I will look into it later.

@styvenpigozzo9628 Жыл бұрын

Thank you for explaining this thoroughly!

@hey.ItsNiki Жыл бұрын

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

@DesignSense Жыл бұрын

Great!. Keep it up :)

@wesleymacedo9717 2 жыл бұрын

Achei o design bem elegante. Parabéns!

@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

@coloroflove 3 жыл бұрын

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

@DesignSense 3 жыл бұрын

Thanks. Stay tuned, more are coming 👍

@yuslinandev 2 жыл бұрын

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

@yunushyamloglu6601 Жыл бұрын

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

@chaitrajoshi2743 3 жыл бұрын

Successfully replicated this one as well. Thanks DesignSense

@fakhrioficial8061 Жыл бұрын

this video helped me. thanks

@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

@MrIcassio Жыл бұрын

Thank you, it works perfect!

@karunsureshkumar4612 3 жыл бұрын

simple but clear teaching. could u do more of these

@DesignSense 3 жыл бұрын

Sure! stay tuned.

@skulgamer5442 3 жыл бұрын

Loved this. Thanks for sharing with us.

@empregasetelagoas3317 Жыл бұрын

Thank you for this informative and educational video!

@nurlytan_berikbol 2 жыл бұрын

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

@Diegobram.design 3 жыл бұрын

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

@lailaalmalki5793 2 жыл бұрын

It was great, first time using XD. Thanks.

@DesignSense 2 жыл бұрын

Welcome 😊

@narendrameena4737 Жыл бұрын

hanks lot Sir.. You helping us..

@sushmitadesai2812 3 жыл бұрын

From your video I got start learning the ui design 👍

@DesignSense 3 жыл бұрын

We're glad it was helpful 🙌

@limon665 2 жыл бұрын

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

@DesignSense 2 жыл бұрын

Just the music 😂

@saicharansigiri2964 3 жыл бұрын

God of Designs ❤

@kingalech6748 Жыл бұрын

Wow thank you so much that really helped

@News_Shorts- 3 жыл бұрын

Html css and xD loved it!

@chrisfahie2767 Жыл бұрын

Still working as of today, ty!

@justinarchibald138 Жыл бұрын

very well, I liked everything

@DesignSense Жыл бұрын

😍😊

@MTOBRO Жыл бұрын

Thanks bro that was really helpful

@ErcanKarahan 3 жыл бұрын

Hello, how do you provide the color management of the software? Colors look different when exported from ADOBE XD.

@TheMR-777 3 жыл бұрын

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

@DesignSense 3 жыл бұрын

The links are given in the description. Good luck!

@TheMR-777 3 жыл бұрын

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

@tongiedesign9787 Жыл бұрын

This is a really nice design

@DesignSense Жыл бұрын

Thank you! 😊

@charlesajiboye4421 3 жыл бұрын

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

The link is updated please try again, thank you 😊

@akshayvisweswar9580 3 жыл бұрын

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

@andrzejd.9706 Жыл бұрын

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

@DesignSense Жыл бұрын

🤗

@rajudasrudro 3 жыл бұрын

OMG! Very Nice. 😍

@DesignSense 3 жыл бұрын

Thank you 😊

@LowBudgetReview 3 жыл бұрын

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

@DesignSense 3 жыл бұрын

You're welcome 😊, stay tuned

@improperanyhow 3 жыл бұрын

@@DesignSense Please Design This In Figma

@DesignSense 3 жыл бұрын

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

@dinnnnnnnnnnnn 7 ай бұрын

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

@DesignSense 7 ай бұрын

Watch new vids

@Rakesh-up8yj 2 жыл бұрын

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

@DesignSense 2 жыл бұрын

Depends on how much do you change it.

@just.a.random.comment 3 жыл бұрын

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

@DesignSense 3 жыл бұрын

No, you don't need 😊.

@omardanial7351 2 жыл бұрын

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

@riccoc.6507 2 жыл бұрын

You have talent

@DesignSense 2 жыл бұрын

Thank you

@temitopeajayi7613 2 жыл бұрын

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

@DesignSense 2 жыл бұрын

Okay, thank you 😊

@Rony_life_style 3 жыл бұрын

Parabéns pelo projeto, espero que entenda minha linguagem

@apnadesiranch 3 жыл бұрын

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

@DesignSense 3 жыл бұрын

Thank you for your love and support ❤️.

@systemachic Жыл бұрын

Works good, tnx

@aldriansahwisnu4027 Жыл бұрын

Thank You So Much Bud

@osmanymn3657 2 жыл бұрын

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

@DesignSense 2 жыл бұрын

Thank you 😊

@hugobasili5049 2 жыл бұрын

it is my dream to become UI/UX designer, but I live in Brazil amd I need to be in another job and I go to college after the Work, so I have almost no time for me, and I m so tired that I feel anxious when I have to study by myself UI UX, and I end up doing nothing. Here in Brazil the salary is pretty poor, I gain like 1k, and any mid quality course costs like, R$ 500,00. Hope I breakthrough into it.

@DesignSense 2 жыл бұрын

The hard time will pass, don't give up. One step at a time. We started from 0 too.

@hugobasili5049 2 жыл бұрын

@@DesignSense I hope I can do it

@denisseav8824 Жыл бұрын

Please, Please, Please include "New Quantize Jumps" also in "Edison" and "Slicex".

@aliastar5616 Жыл бұрын

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

@sale7680 Жыл бұрын

Bravo

@umarfraz1191 Жыл бұрын

Superb

@DesignSense Жыл бұрын

Thanks 🤗

@mbhomeatacado3990 Жыл бұрын

Really nice and helpful... Thanks!

@DesignSense Жыл бұрын

Thank you 😊

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

@Indonesia01ian 3 жыл бұрын

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

@DesignSense 3 жыл бұрын

Will try

@Indonesia01ian 3 жыл бұрын

@@DesignSense thank you so much 🙏

@huyle3866 3 жыл бұрын

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

@DesignSense 3 жыл бұрын

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.

@ryleshmeledath8405 2 жыл бұрын

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

@DesignSense 2 жыл бұрын

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

@abinogaming5541 3 жыл бұрын

Excellent work

@DesignSense 3 жыл бұрын

Thank you 😊

@PRIMITIVE2050 3 жыл бұрын

Excellent work!

@DesignSense 3 жыл бұрын

Thank you 😊

@alisoroori1425 Жыл бұрын

thanks man👍

@mranjuc3406 3 жыл бұрын

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

@DesignSense 3 жыл бұрын

Thank you, stay tuned 😊

@aldairsantos7553 3 жыл бұрын

No curso eu aprendo a codificar qualquer aplicativo tornando-o responsivo pra web?

@ivonaak 2 жыл бұрын

Thank you.

@hiyoriiki4591 2 жыл бұрын

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?

@luieescobar4664 Жыл бұрын

But how will out that in website form ? 🤔

@eguchiyuuki Жыл бұрын

Great!

@AbdulHadi-yq7de 3 жыл бұрын

Very nice keep up

@DesignSense 3 жыл бұрын

Thanks 😊

@MRLaboratorypro 3 жыл бұрын

I love it too !!

@DesignSense 3 жыл бұрын

Thank you 😊

@ActressandModels 3 жыл бұрын

You got a new subscriber today!!

@DesignSense 3 жыл бұрын

Thanks 😊

@andinmarley 2 жыл бұрын

This editing is beautiful

@DesignSense 2 жыл бұрын

Thank you 😊

@Arshhhe 3 жыл бұрын

Nicely Done!

@devdude7607 3 жыл бұрын

Eyegasm !

@DesignSense 3 жыл бұрын

Lol

@hi_positivitee3322 3 жыл бұрын

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

@DesignSense 3 жыл бұрын

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

@bakai.ibraimov 2 жыл бұрын

Just tell me, bro. Currently, I'm using XD instead Figma. I love Adobe family products. But my friends and colleagues untiredly repeating 'Figma is better'... Why Adobe doesn't care about it? Why they don't work on improving?

@DesignSense 2 жыл бұрын

Don't worry, use whatever tool your comfortable with, it doesn't matter if yiu use figma or XD.