Increasing numbers of designers are venturing into the world of ecommerce website (opens in new tab) design. Online sales have rocketed this decade and whilst having your own online store used to be the domain of deep-pocketed business owners the rise of SaaS (Software as a Service) products such as Shopify (opens in new tab) have levelled the playing field.
Today anyone from a solo freelancer to a large agency is able to offer ecommerce service to their clients without having to worry about large infrastructure, hosting and security costs. Thanks to a vibrant app ecosystem providing key integrations to third-party system it leaves ecommerce designers able to focus on what they love doing – designing great ecommerce experiences.
To give you some ecommerce web design inspiration (opens in new tab), I have devised a list of resources that I hope you find useful – whether you are working on your first ecommerce design project or your thousandth. Let's kick off by looking at some design resources.
Design
Beautiful Stores (opens in new tab)
A treasure chest full of examples of ecommerce design and a great way to find out what other designers in a particular niche are doing.
Stock Photography (opens in new tab)
A roundup of 10 free stock photography sites that you can browse for product images for your mockups and demos
Sketch (opens in new tab)
If you haven’t jumped on the Sketch bandwagon it's worth a look. It’s especially useful for UI development and wireframes.
UI Templates
The second reason I included Sketch is that there are plenty of UI kits available to aid your design processes. Here are two:
- Free UI Kits for Sketch App (opens in new tab)A large collection of general UI kits for Sketch.
- E-commerce UI Kit (opens in new tab)Part of the Ultimate UI Kit for Sketch created by agency Five.
Sketch and live data (opens in new tab)
Use real online store data via JSON in Sketch mockups.
Sketch App Resources (opens in new tab)
On a final Sketch note, I recommend you add this site to your bookmark list. It’s full of Sketch related resources, templates, mockups, icons and more.
Code My UI (opens in new tab)
Inspiration sites are one thing but this site also gives you the code to implement in your own projects.
Icons
Every site needs good icons. Here are three sites that you can utilise to find the perfect icon for your next store:
- Icons8 (opens in new tab)An icon site featuring over 19,000 flat icons. You can download the PNG format up to 100x100px for free. Paid options are also available from $5.
- The Noun Project (opens in new tab)A site that you can loose yourself in. Featuring thousands of icons with new daily additions you’ll be hard pushed to not find something that works for your project. You can use the icons for free as long as you credit the creator. Alternatively, you can buy royalty free icons for $1.99.
- Credit Card Icons (opens in new tab)A free icon set featuring popular credit cards and currency symbols.
Business
As well as design I’d like to mention a few relevant business resources that will help you build your ecommerce focused web design business.
We Make Websites (opens in new tab)
A London agency specialising in ecommerce who regularly share insights from inside their company as well as their projects via their popular blog.
Ecommerce Bootcamp (opens in new tab)
I mentioned Kurt Elster’s email templates in a previous article (opens in new tab). In addition to that project he recently launched a new 14 part ecommerce series focused on generating traffic, making sales, and growing revenue and profits. It contains great advice for people selling ecommerce services as well as merchants.
Shopify Partner Blog (opens in new tab)
A daily blog featuring stories from designers and developers working in ecommerce, freelancing tips and advice, and free downloadable resources.
Marketing and analytics
Finally, I’d like to mention four resources that will help you help your clients grow their online venture.
Sumo (opens in new tab)
Used by over 290,000 sites Sumo provides free and paid tools, that work on any website, to help grow traffic. From unobtrusive email sign up forms to heat maps to see what your visitors are looking at there are plenty of options.
Unbounce (opens in new tab)
A service which allows you to build fully responsive landing pages quickly. Landing pages can be used to announce an upcoming product and collect email addresses prior to full launch. They also have a dedicated ecommerce landing page (opens in new tab) section.
Optimizely (opens in new tab)
Being able to test your designs is crucial to the success of your online store. As well as offering A/B testing Optimizely also provides personalisation and site analytics tools.
Ecommerce design is a growing niche within the web industry. It provides a fantastic opportunity for designers to specialise and not only help your clients create a great online store experience but also, with your expertise, grow their business. On a final note if you are thinking of specialising in ecommerce I'd recommend this free nine-part video course (opens in new tab) by Paul Boag covering these topics and more.
What did I miss? Let me know in the comments.
Words: Keir Whitaker
Keir Whitaker has been been making a living with web technologies since 2000. Today he works at Shopify (opens in new tab) helping grow the Partner Program and building a community around designers working with the platform.
Like this? Read these!
- Choose a website builder (opens in new tab) with these top tools
- Behold the very best in website templates (opens in new tab)
- We reveal the best web fonts (opens in new tab) for your site
- These free WordPress theme (opens in new tab) are better than beer
- Top Chrome extensions (opens in new tab) for designers and devs
