Amazing Ecommerce Website ui Design in figma | Online Shop Website Design

แชร์
ฝัง
  • เผยแพร่เมื่อ 22 พ.ย. 2022
  • Ecommerce web design, In this figma design tutorial you are going to learn how to design a modern e-commerce Website using Figma. Also, this design is a product-selling website. ecommerce website is a perfect opportunity to attract a significant amount of customers and increase sales. eCommerce websites make it easy for consumers to purchase their favorite products with just a few clicks.
    Use FigJam AI to brainstorm your design ideas-Try it now!
    👉 psxid.figma.com/zj0gos3g3prm-...
    Use Figma to design this amazing website (+ free files 🎁)
    👉 psxid.figma.com/dkbklpwripx3
    The ui is vitally important for an ecommerce website for the reason that the user's first impression is related to web design. So Figma is a free design tool used to create website UI and UX.
    Remember to like, share, comment, and subscribe. Also, hit the bell icon to get notified when we upload a video.
    Subscribe to our channel - / dscodetech yt
    Say hi on social:
    🔵 Facebook - bit.ly/36KsK8X
    🟢 Instagram - bit.ly/3xGDbXR
    #ecommerce #webdesign #figma
  • แนวปฏิบัติและการใช้ชีวิต

ความคิดเห็น • 71

  • @DSCodetech
    @DSCodetech  ปีที่แล้ว +26

    Download Source File: bit.ly/3IpbcCY
    What would you think about this design? If you like rate my design ❤👇

    • @dimitrideag5377
      @dimitrideag5377 ปีที่แล้ว +6

      I tried myself. This video was a lifesaver for me as a ui designer with no design background!

    • @emmanuellekan9851
      @emmanuellekan9851 หลายเดือนก่อน

      Bro
      I could not have access to the file

  • @sbsoftware5209
    @sbsoftware5209 ปีที่แล้ว +8

    Ui looks very nice. This looks so easy. But the behind the scene, it has great effort. congrats on the hard work.

    • @DSCodetech
      @DSCodetech  ปีที่แล้ว +2

      Great comment. thanks 👍

  • @educationclub2246
    @educationclub2246 ปีที่แล้ว +7

    I'm new to UI design. Thanks for uploading the whole process of the design.

    • @DSCodetech
      @DSCodetech  ปีที่แล้ว +3

      I'm happy to share the whole process!

  • @danyzmusic
    @danyzmusic 9 หลายเดือนก่อน +2

    That's amazing, thanks for the hard work.
    I'm gonna create a website for our marketing agency but I don't think I can pull that off, I'll still have all the other tabs to design and implement so I'm gonna get the inspiration and the basis of the website from your work and create a simpler website for now, but that's amazing :D
    U deserve way more subscribers!

    • @DSCodetech
      @DSCodetech  9 หลายเดือนก่อน +2

      Thank you for your kind words and support! Best of luck with your agency's website :)

  • @internetjobs3188
    @internetjobs3188 ปีที่แล้ว +3

    Your examples of the best practices for website ui design were really helpful. I'll definitely be incorporating some of your suggestions into my own design work.

    • @DSCodetech
      @DSCodetech  ปีที่แล้ว +2

      Thank you so much for your kind words! I'm glad you found the examples of best practices for website UI Design helpful. keep incorporating these techniques into your design work, and I'm sure it will pay off in the long run. Thanks again for watching and for the great feedback.

  • @jaydenbridges635
    @jaydenbridges635 4 หลายเดือนก่อน +1

    Thank you very much
    You have gained a subscriber for adding the source file.

    • @DSCodetech
      @DSCodetech  4 หลายเดือนก่อน +1

      You're welcome, Thanks for the sub!

  • @englishman4407
    @englishman4407 ปีที่แล้ว +5

    Choosing colors has always been super confusing to me, I really enjoy your tutorial videos. Thank you so much!

  • @buddhika_bro
    @buddhika_bro ปีที่แล้ว +2

    superb

  • @prajjwal3127
    @prajjwal3127 ปีที่แล้ว +1

    thanks man. it helped

  • @user-hk1qi4en3t
    @user-hk1qi4en3t ปีที่แล้ว +5

    Sorry but it appears as a dashboard. The real customer would be disappointed at this site because they are trying to use a previous experience from the typical e-commerce scanning

  • @AsilbekXojanazarov4005
    @AsilbekXojanazarov4005 3 หลายเดือนก่อน +1

    perfect

    • @DSCodetech
      @DSCodetech  2 หลายเดือนก่อน +1

      Always

  • @adebayoal-ameen639
    @adebayoal-ameen639 ปีที่แล้ว +3

    Can you share the design link? Would love to program this as a task

    • @DSCodetech
      @DSCodetech  ปีที่แล้ว +2

      Great! link in the pinned comment

  • @abubakrsaydakhmedov1242
    @abubakrsaydakhmedov1242 ปีที่แล้ว +2

    very good, i did it too. it was hard!

  • @md.minhajkobirmilon3376
    @md.minhajkobirmilon3376 ปีที่แล้ว +2

    Superb. Can I get the figma file Sir

    • @DSCodetech
      @DSCodetech  ปีที่แล้ว

      The source file link in the pinned comment check out!

  • @tnguyen7304
    @tnguyen7304 3 หลายเดือนก่อน

    is there anyone who have done it with html and CSS , please give me sourcode , thank kou

  • @habeebullahabdulyekeen6212
    @habeebullahabdulyekeen6212 10 วันที่ผ่านมา +1

    where can we get high quality images from

    • @DSCodetech
      @DSCodetech  5 วันที่ผ่านมา +1

      You can get them from the free file that we provided

  • @CristianGutierrez-bp2yp
    @CristianGutierrez-bp2yp ปีที่แล้ว +1

    Hello! Is there any way to use this with my shopify website?

    • @DSCodetech
      @DSCodetech  ปีที่แล้ว +1

      Yes you can! You have to code this design

    • @shahidqureshi7366
      @shahidqureshi7366 ปีที่แล้ว +1

      @@DSCodetech i have same question bro, how can i code this design ? can you please guide me how can i use this design in shopify from beginning . the answer would be appreciated

    • @DSCodetech
      @DSCodetech  ปีที่แล้ว +1

      I'll make a tutorial for that in the future!

  • @adityakshetry6997
    @adityakshetry6997 ปีที่แล้ว +1

    where do css and html part of this get generated and store ??

    • @DSCodetech
      @DSCodetech  ปีที่แล้ว +1

      this is only ui ux design of the website. I'll bring a video that design using html and css.

    • @adityakshetry6997
      @adityakshetry6997 ปีที่แล้ว +1

      @@DSCodetech i heard thata figma will Automatically generate the code while designing

    • @DSCodetech
      @DSCodetech  ปีที่แล้ว +1

      yes, you can select the element and go to the Inspect tab at the right top of the corner, you can copy the CSS code at the bottom. Also, you can select the element and right-click, select Copy/Paste, and then, Copy as CSS.

  • @xhantimtwesi3848
    @xhantimtwesi3848 6 หลายเดือนก่อน +1

    struggling to open these, any advice

    • @DSCodetech
      @DSCodetech  6 หลายเดือนก่อน +1

      Get the file and open the file with figma-import the file to the figma

  • @yashdoshi1258
    @yashdoshi1258 11 หลายเดือนก่อน +1

    the source file is not opening pls tell me how can i do it

    • @DSCodetech
      @DSCodetech  11 หลายเดือนก่อน +1

      You have to have the Figma app to open the file. Please download it and then open the file

  • @devilhari.
    @devilhari. 9 หลายเดือนก่อน +1

    pls one dout 51 52 rectangular 52 duplicate 53 or what

    • @DSCodetech
      @DSCodetech  9 หลายเดือนก่อน +1

      Please can you mention the timestamp

  • @visakhps4071
    @visakhps4071 2 หลายเดือนก่อน +1

    Bro how covert it to html and css

    • @Riteshwar_lal
      @Riteshwar_lal 2 หลายเดือนก่อน +1

      code it

    • @DSCodetech
      @DSCodetech  2 หลายเดือนก่อน +2

      You can use a figma to html plugin or you can code it

  • @najathmohamed538
    @najathmohamed538 ปีที่แล้ว +1

    How can we download this transparent images?

    • @DSCodetech
      @DSCodetech  ปีที่แล้ว +1

      you can download the source file. link in the pinned comment

  • @aimamobiles
    @aimamobiles ปีที่แล้ว +1

    i want to need this type website buy

    • @DSCodetech
      @DSCodetech  ปีที่แล้ว +1

      Good idea. Let us know if you need this type of website to build.

  • @sunhailshajib9695
    @sunhailshajib9695 ปีที่แล้ว +1

    Can you give me this template please..

    • @DSCodetech
      @DSCodetech  ปีที่แล้ว +2

      Download link in the pinned comment

  • @pritomchakraborty2001
    @pritomchakraborty2001 ปีที่แล้ว +1

    Can you share the png files?

    • @DSCodetech
      @DSCodetech  ปีที่แล้ว +1

      Check the pinned comment

  • @wisamart4216
    @wisamart4216 ปีที่แล้ว +1

    where is the protatapy

    • @DSCodetech
      @DSCodetech  ปีที่แล้ว +1

      Download link in the pinned comment

  • @anonymous4383
    @anonymous4383 ปีที่แล้ว +1

    Where is Css file?

    • @DSCodetech
      @DSCodetech  ปีที่แล้ว +1

      It is only a ui design.

  • @ryughvilgefortz7538
    @ryughvilgefortz7538 9 หลายเดือนก่อน

    no prototype??? why not just do it on photoshop or illustrator instead of figma?

    • @DSCodetech
      @DSCodetech  9 หลายเดือนก่อน

      Figma is a best app for design UI/UX

  • @gucitube
    @gucitube 11 หลายเดือนก่อน +1

    figma file link?

    • @DSCodetech
      @DSCodetech  11 หลายเดือนก่อน +1

      Link in the description

  • @visakhps4071
    @visakhps4071 2 หลายเดือนก่อน

    Its responsive?

    • @DSCodetech
      @DSCodetech  2 หลายเดือนก่อน

      We can make it responsive

    • @Danixboi
      @Danixboi หลายเดือนก่อน

      @@DSCodetech how

  • @user-gs8cp8eu9l
    @user-gs8cp8eu9l 10 หลายเดือนก่อน +1

    Video very fast

    • @DSCodetech
      @DSCodetech  9 หลายเดือนก่อน

      Slow down the playback speed!

  • @Andrew-eb2qt
    @Andrew-eb2qt ปีที่แล้ว +1

    This was golden. #1 subs provider -> 'Promo SM'!!