12 Essential Things To Consider When Designing An Ecommerce Website (now That Ai Is Doing The…

12 Essential Things to Consider When Designing an eCommerce Website (Now That AI Is Doing the Designing)

The Designer’s Guide to Reality, Updated for the Tools That Design for Us Now

Two years ago I wrote a list of twelve things every e-commerce brand needs to put in front of a designer before the pretty mockups start, because mockups always lie a little. They show you the world at its best: short product names, round prices, single-digit cart counts, a header that fits “Hi, Dan” perfectly.

Since then, a lot of that design work moved from a human with a Figma file to an AI tool with a prompt box. You’d think that would close the gap between the mockup and reality. It didn’t. It automated it. Ask any AI design or code tool for an e-commerce product page and you’ll get the same idealized defaults that used to come from a designer chasing a portfolio-worthy screenshot, just faster and at more scale. The list below is the same list. It just got more relevant.

# 1. Color Schemes and Hierarchies (And Now, the Font Too)

In 2024 my complaint here was simple: brand books rarely go past 2–3 hero colors, and nobody thinks past that to define links, secondary buttons, hover states, or error messages. That’s still true. But there’s a louder, newer version of the same problem now, and you’ve seen it even if you didn’t have a name for it yet.

Open three AI-generated e-commerce sites in three tabs. I’d bet on one of two outcomes: a beige or off-white background dressed up with green blocks, or a light blue background carrying blue and purple accents.

There’s a real story behind the blue-purple version, and it’s worth knowing because it makes the point better than I ever could. Tailwind’s own creator, Adam Wathan, admitted in a widely shared 2025 post that he regretted picking a specific indigo shade as Tailwind UI’s default button color years earlier. That one small decision quietly became one of the most common accent colors in the training data every AI design tool learned from, which is exactly why so many AI-generated interfaces now default to some version of blue-purple. The tool isn’t choosing a color. It’s handing you the statistical average of every site it has ever seen.

The font has the same story. Ask five AI tools for a homepage and count how many hand you some version of the same clean, rounded, personality-free sans-serif, Inter or Roboto more often than not. It’s not that the tool loves that font. It’s that the font shows up so often in what it learned from that it reads as the safest, most average choice available. There’s already a name for the whole pattern, color and font and layout together: the Sea of Sameness. Once you’ve heard it, you can’t unsee it.

None of this means avoid AI tools. It means stop accepting the first offer. If your color system and your font come straight out of the default prompt, you don’t have a brand, you have the same beige-and-green or blue-and-purple site as every other store built with the same tool this month. Which brings us back to the actual fix: define the full palette yourself, not just 2–3 hero colors. Link color. Secondary button. Hover state. Error state. Disabled state. And pick a font on purpose, not by default. You want your site to be functional and memorable. Not one more tab in someone’s AI slop lineup.

# 2. Product Names

Still true, word for word. Give your designer, or your prompt, the longest product name you actually sell, like “Samsung 65” SMART 4K UE65NU8000 TV,” not a clean placeholder. Decide what happens after two lines on mobile, and make sure long-press or tap reveals the full name. AI-generated mockups are, if anything, more prone to clean eight-character placeholder text than a human designer ever was, because that’s what looks good in a demo.

# 3. Username

Same note as before. “Hi, Dan” fits beautifully next to a cart icon. “Hi, Alexander” is the real test. Ask to see it, whether a person or a prompt built the screen.

# 4. Prices

Decide your price format before you look at a single screen: decimal point or not, one digit after it or two, how a sale price looks next to the original. Then stress-test it with a real 4-digit number, not the round one that shows up by default in every generated mockup you’ll ever see.

# 5. Number of Items in the Shopping Cart

Ask to see 88 in the cart icon, not 3. Screens look best when everything’s comfortable for whoever built them, human or model. You’re not running a design portfolio, you’re running a business.

# 6. Combination of Languages

This one deserves more space in 2026 than it got in 2024. AI design and code tools are trained mostly on English-first, Latin-script interfaces, and it shows the moment you mix in Hebrew, Arabic, or any RTL layout. Fonts default to something generic, alignment breaks, and nobody catches it because the demo looked fine in English. If you’re building for a market that mixes languages or reads right to left, this isn’t a nice-to-have detail anymore, it’s a separate conversation you need to have explicitly, with a human or a tool, before layout starts.

# 7. Style Guide

This is the point that actually changed the most. In 2024 I told you to get a style guide so your developers wouldn’t have to guess. That’s still true, but it undersells what a style guide is now. Today it’s the literal input layer for AI tools: design tokens, component states, spacing rules, the works. Feed an AI tool a vague or incomplete style guide and it won’t just make one screen inconsistent, it will invent its own defaults across every screen it touches, at the speed it generates them. A sloppy style guide used to slow your developers down. Now it multiplies the sloppiness across your whole site before lunch.

# 8. Empty States

Still the most skipped item on this list, still not your developer’s job to fix. What does the wishlist look like with nothing in it? The cart? A search with zero results? These are brand moments, not edge cases, and no tool, human or otherwise, will surface them for you unless you ask.

# 9. Forms

Ask what a filled-out form looks like. Ask what an error looks like, and where it sits. Nobody designs the unhappy path unless you make them.

# 10. Indications

What happens when something works? Added to cart, saved to wishlist, signed up for the list. Confirmation is half the experience and it’s the half that gets forgotten first.

#11. Ribbons

New, back in stock, sale, gluten-free, whatever your version is. Build the priority table yourself: what shows first when a product qualifies for two ribbons at once. This is exactly the kind of structured logic that translates cleanly into a prompt or a token file now, which is one more reason to actually write it down instead of leaving it as a vibe.

# 12. Borders/Shadows

Everything looks fine floating over a big colorful homepage banner. Ask to see the same dropdown or scrolling cart open over a plain white product page instead. Look at the mega menu on Bloomingdale’s site. Without a clear shadow separating it from the white category page underneath, it would be unusable.

Before you open your AI design tool of choice for the next project, feed it your ugliest real data first: your longest product name, your actual price format, your real cart behavior, your mixed-language content. Not because the tool is smarter than a human designer would have been. Because it makes exactly the same mistakes a rushed designer makes, just faster, and at the scale of your entire site instead of one screen.

If you found this useful, visit Dee2See (dee2see.com), my blog covering DTC websites from a creative and buying experience point of view, to get more inspiration and practical ideas for your ecommerce website.

???? Stay inspired every day with Muzli!

Follow us for a daily stream of design, creativity, and innovation.
LinkedIn | Instagram | Twitter

12 Essential Things to Consider When Designing an eCommerce Website (Now That AI Is Doing the… was originally published in Muzli - Design Inspiration on Medium, where people are continuing the conversation by highlighting and responding to this story.