Selling your product online has never been easier (or harder). With today’s technology, creating a website to show off your wares is super easy (and incredibly complex). Mind = Blown, amiright? Sure, with a few clicks of a button you can create an account on Shopify, slam some photos into a template, then kick back and watch that sweet sweet dinero start rolling in, right? Negative Ghostrider, the pattern is full.
The online landscape is uber-competitive, so you need to have all your ducks in a row if you want to sell one of those ducks. Not only do you need a kick-ass idea with a unique selling proposition, you need to make sure your site and digital ads look and function flawlessly. Selling products online means you need to stand out amongst the sea of competitors — not to mention the cat GIFs, Tik Tok dance videos and Baby Yoda memes all vying for your customers’ attention.
Your site should have tight messaging, punchy visuals, and layouts that lead your customers where you want them to go (i.e., the checkout page). Below you’ll find 11 tips for how to help you on this journey. Why 11? Because it’s 1 more than 10. Obviously.
“Creativity is intelligence having fun.”
– Albert Einstein
1. GOOOOOOAAAAAL!
Just like soccer (or football to the rest of the world) you need a goal to succeed. This isn’t really a design tip but is most definitely a necessity when you begin the design process. In this case your goal will likely be to “sell my stuff” or at the very least get people interested enough to reach out to learn more. When you have a firm goal in mind all other aspects of the design should be in service to that goal.
2. Yeah, But Why Do I Care?
Just because you know how awesome your product is, don’t assume that your customers will know right off the bat.
A common mistake when selling products online is to rattle off a list of features without giving the context of what the product actually does or how it benefits the consumer.
Build your site from the viewpoint of the customer and explain how it will benefit them, not just what it does. Use real world, natural language in your copy to explain how your product’s amazing features will make their lives better. Nothing turns off a potential client faster than a word salad of industry buzzwords. Synergistic scalable solutions!
3. Grid It Up
When it comes to keeping your site looking clean, grids are your friends. Designing in grids will create visual structure and order.
There are many different types of grids for web design, but the basic key here is to keep content aligned horizontally and vertically. Consider the margins and spaces around your content and keep them equal where possible. Employ columns to help users make their way through information (there is a reason why restaurant menus are designed in rows and columns).
You may be thinking of a slick website you’ve seen recently with no grids in sight, but don’t be tempted to try out something too complex or hard to navigate. Remember rule 1: Goals. Focus on building a clean design that will help you sell your products (which means using grids).
4. Too Cool For School
“Make it cool” is a term we’ve all used before, and of course you’ll want your site to be cool, happening, groovy, lit, fire…whatever the kids are saying these days. But if you lean too hard into a hot web trend (I’m looking at you, spinning 3d logos) your site will age quickly (and badly). Unless you are a fashion brand that requires you to be on the cutting edge of visual funkitude, it’s best to make your site classic, clean, and easy to follow (especially if you want people to buy your stuff).
5. Make It Bounce
A few thoughtful micro-animations can go a long way to adding some life to your site. Making an icon shake when you roll over it. The colors of a background subtly changing as you move your mouse. Avoid anything loud or distracting, but including some micro-animations in your design can make your site look polished and memorable.
6. You Can Have Any Color So Long As It’s Black
Was famously said by Henry Ford in 1909 in regards to the Model T. While you have a few more choices than that, it’s still best to keep your color palette to a select few colors and shades/tones of those. Consistent use of color can improve the user’s experience, offering visual cues to direct them around the site and tying everything together. . Consider your design elements and use the same color for each of them (for example, choose one color for all the buttons and one color for all headers of the same size).
7. SEO is Neato
SEO stands for Search Engine Optimization and can be hugely important for generating traffic to your site. Simply put, good SEO implementation helps your website rank higher in search engines (primarily Google, which accounts for 92% of web searches). Since no one goes past the first page of a Google search, appearing higher up will get your page clicked on more often and consequently sell more products. You can get super nerdy with this stuff (and we do) but here are a few golden nuggets of SEO awesomeness:
- Keep that content fresh, yo. Google loves new, current content.
- Use keywords in your content that people are searching for.
- Optimize the title, meta, heading and subheading tags.
- Optimize your URLs. Google wants them to be simple and readable.
- Include links throughout your site (this one is so important that we will cover it in the next section).
- Optimize your images. Include a short description in the alt text box on all images. Also make sure your images are not too large; a slow page load can kill your Google ranking.
8. Links Links Links
Links — into, out of, and in between pages of your site (see what we did there) — will also help increase your SEO.
Deep links take users directly to content instead of a homepage, which is helpful when you want to lead users to where they can buy a specific product. For instance, if you are running an ad on Facebook for an item you are selling, make that link go directly to that item’s page, not just your homepage. Then watch the cash roll in. Hopefully.
9. With Great (Typographic) Power Comes Great Responsibility
Take a lesson from Peter Parker (by way of Uncle Ben) and be sure to choose your fonts wisely. Pretty sure that was the point Ol’ Ben was trying to make…right? Fonts?
Anywaaaaay, gone are the days of only having access to the eight or so “browser safe” fonts of yesteryear. There are now thousands of fonts at the ready. Additionally, higher resolution screens are becoming more commonplace, so gone are some of the old typographic rules concerning readability at small sizes. But like so much we’ve discussed here, restraint is the way forward.
The typical recommendation is to choose just two or three fonts for your site. A general rule of thumb is using a serif and sans serif font for the body and headlines and perhaps a decorative (read: funky/fun) font for large headers or individual words and short headlines where you want to add some personality.
10. Keep That CTA Above The Fold…But Screens Don’t Have Folds…
“Above the fold” is an old newspaper term for where the most important content should go so when it’s sitting at the newsstand folded in a stack, it grabs attention immediately. Now most screens don’t have folds (thanks for ruining that Samsung Galaxy Fold) but the term still holds water.
For your Call To Action (CTA) you’ll want to guide viewers right to the good stuff on your site with a button sending them where you want them to go (“Buy Now”, “Learn More”, “Contact Us” etc.).
Make sure your CTA comfortably fits on the screen when your page first loads without making the viewer scroll down. Don’t make it harder on them than it needs to be.
11. Photography And Video And Illustration, Oh My
Nothing screams “laaaame” more than a generic stock photo of businesspeople shaking hands. Unless you are a stock photography agency specializing in hand shaking…in which case…go for it…I guess? While stock photography can serve its purpose on occasion, you’ll definitely want to have professionally produced, high-quality photography, video, and potentially illustrations specific to your product for your site. Selling products online requires crisp, clear, and effective visuals. Below is a sample product shot list we often use to get our clients started. Some of these may seem obvious, but it’s important to capture everything you may need while you have the photographer, videographer or illustrator at your disposal so you don’t have to set up a second shoot or spend time fixing what you missed:
- Product shot in packaging
- Product shot outside of packaging
- Studio product shots against a seamless background
- Instructional photography of how to use the product
- Lifestyle photos of product in use
- Shots that emphasize the top features
- Photos that prove the product works
- “Behind the scenes” style photos
- Photos of the production/manufacturing process
- Headshots and lifestyle shots of your team
Similarly, to prepare for a video shoot you’ll want to have all the shots, talent, props, and locations planned out to the letter to make sure you get everything you need during the shoot. Video shoots can be…a lot….but hey, we are here to help.
For custom illustrations, you’ll want to find an illustrator who has a style that you like and discuss with them what you are looking for. They should provide you with rough sketches before producing the final piece to make sure the designs are what you want. Also, you can often find stock illustrations that can provide a good base for what you are envisioning and edit them to make them your own.
Welp, that’s it. Simply apply these 11 web design tips when building your website and digital ads and all you’ll need to worry about is how to fit all that sweet sweet cash into your twenty-year-old wallet. Does that Lamborghini come in neon green? It does? Eesh…wow…
All of the topics above could (and often do) have entire industries built around them and experts (ahem…like us…) dedicated to their craft.
We’d love to help you on your journey, so feel free to reach out if you’d like to chat.
