E-commerce web design has become a bit bland with nearly every e-commerce website looking the same. With the recent surge in e-commerce due to the pandemic, it’s more important than ever to differentiate yourself.
I, for one, am getting quite bored of the usual grid-based product catalogue page layout that everyone seems to be utilizing. Shopify is dominating in the world of e-commerce, so it’s no surprise that we’re seeing e-commerce website clones left and right. It’s time to freshen things up:
Ditch the typical yawn-inducing product page layout for something with more flair. Something that had a bit of thought put into it. Customers, albeit not designers, will notice when you’ve put thought into a web page.
Opt for a different layout, be more intentional with your art direction, leverage smooth and satisfying interactions. These make a difference!
I’d love to know your thoughts on the state of e-commerce web design. Let me know in the comments below.
00:00 Intro
0:35 E-commerce is on the rise
1:00 How to stand out
1:44 Example 1: Yolélé
3:00 Example 2: SimpleChocolate
4:15 Takeaways / What you need to know
–
Learn how to build custom websites with Webflow FAST:
https://bit.ly/WebflowWebclass2020
–
Find me on other social media platforms:
Instagram: https://www.instagram.com/ransegall/
Twitter: http://twitter.com/ransegall
LinkedIn: https://www.linkedin.com/in/ran-segal…
–
Gear & Book Recommendations: http://bit.ly/2ohFOuj
#webdesign #ecommerce #ecommercewebdesign
Thanks for watching the video!
source
Stupid Question: Are these websites coded from scratch in html, css, javascript? Or are they build with wordpress for example?
Check out stats on scrolling. People HATE scrolling. Since 1996. Oh and please show us these sites on mobile. That´s where 80% people shop. Noone gives a F about pc/mac.
This is great! There's something to be said about the template given the flow of the page, but I think people don't break out of it enough.
Lmao this would be great to show the product (marketing ie) but for a shop I would go with a regular layout.
Damn look at ebay and amazon…
When it comes to buying UX > UI. Functionality > design all of the time. That doesnt mena design has to be ugly.
who created this?
Great, now explain this to my client.
nice man, thank you!
This is like so beyond my current level of ability. Gotta get better.
Great tips and points!!! Totally agree, looking back at the history of e-commerce, it has not really evolved at all.
Of course, web technologies have gone through some major changes, but as far shifting into something "totally unique", was never a case.
You've brought up very interesting examples of e-commerce stores that combine: story telling (history of the company), great user experience (UX) and a unique, "one of a kind" approach. This strategy makes you feel "welcome", appreciated a potential Client and non "just make a sell" process.
While most of you are talking about dropshipping e-commerce websites, meaning from 50 to 500+ products, Ran is talking about brand e-commerce websites and how much they've risen in these past few years and still do. If you don't know this already, most people should focus on 1 product to sell. Not 50 to 500+ products. And this is just my opinion. I think these are very good examples of brand e-commerce websites. Thank you, Ran!
Any shopify app suggestions for non-web designers that would allow this type of creativity?
"You can't have pictures of items on a white background"
Amazon would like to challenge that
way too generalised
Hey Ran, I love your content and your Flux Academy course/community. I would love if you could show how to build the simplychoclate website in webflow. It's such an effective way of showing products and I would love to know how to achieve it and put my own spin on it 🙂
How did you find these websites? They are awesome!!!!!!
It would be interesting to see what their conversion rate is on those sites. Unfamiliar design patterns have a big impact on conversions, even for niche sites like those.
Yolele is a horrible experience sadly, even if it looks cool. It pretty much break all rules of conversion and it even fail in several basic interaction design principles. Let us not go into WCAG or acessibility in general 🙂 Opening the checkout in a new browser window? Yeah…that is a sure way to loose customers as well.Flashy design does not generate sales sadly. It's for inspiration, not sales.
Would like to have a design of your demand. Let our experts know and they will make one for you. https://xeecreatives.com
Hi there,
Thank you for your tutorials. I’m designing ecommerce website in webflow. And there is a problem that I encountered, there is no customer Login/account integrated. I did some research and I did not find anything for this in particular. What are your thoughts on this?
Best Regards!
So im going to get on treehouse and learn some HTML, CSS and java script basic for 3 months and practice as much as i can before jumping on figma (already know photoshop to a decent level)
I also think learning a bit of UX concepts would help and im coming from a marketing background.
How long would it realistically take to be at a level to make website like the african foods ones.
Like in pure honesty. How long with understanding front end, UX, figma a bit of photoshop and then weblow would it take to say i can ser a website like this and know exactly how to implement all of this??
Thanks in advance.
Do you know how to add an abandoned cart email set up to webflow?
I hate to be an audio nerd and your audio is usually good, but this audio is especially harsh, too much high end. Still gonna enjoy the video!
Can we achieve this type of design and animation in Woocommerce or Shopify? Are these websites built on Webflow ?
Thanks Ran!!!
The SimpleChocolate has like no good way to buy something …. what is horrible bad 🙁 you say add box > then you select the amount .. and then nothing….
love it, Great examples!
Loved it !!!
What is the problem of looking the same?
Anyone know how to achieve this? It’s not a lottie otherwise it would be laggy.
https://www.livspace.com/in/kitchen-price-calculator
Can you pls help with this how we can achieve in Webflow
I agree with you, look really nice but you can't to something like this when you have thousands of products. It's a good solution basically for small company with a limited amount of products. It would be amazing to find "something new" for websites like Amazon that use cards all the time.
You can completely customize Shopify websites to the detail or make them hand-crafted from start, and create an Awwwards or CSS Winner website. The fact that many use the templates, same as many use WordPress because they don't know about web development, is something else. Plus Shopify uses Liquid language, which can be used for a very dynamic website.
(Websites made using liquid, say with Jekyll, are very very similar to Webflow ones, using collections, posts, and a backend like Forestry that can be totally customized and personalized, even adding headlines, notes, and more to each element for the client to use, and make every single text and image in the website dynamic for the client to edit, change, add or remove in the future; they can create events, news, articles, control their pictures, team pages, products, everything).
I have a question here… Would it be posible to create the Yololo website with Webflow E-Commerce? With the product page autamation in orther for the client to easily add new products.
These kind of websites seem pretty trendy, but the web is just not made for it. (depending on device and connection) It's laggy, takes ages to load, and you might come to buy a product, not watch a slideshow.
That is not to say you should stick with a bland website, just that you gotta watch out for not being too excessive