How to Design an Ecommerce Store in 2015

Guest Author

Ever since mobile shopping became an Ecommerce trend this 2015, more and more online merchants are adapting to meet the demand for their consumers: simpler, mobile-friendly designs and user-friendly website interfaces to help the website visitors enjoy a better shopping experience.

Last year, internet usage on mobile gadgets exceeded PC usage. With a ground-breaking data like this, as an online shop merchant, you would also want to adapt your website to adapt the style that your target market wants, wouldn’t you?

In this article, I’ll explain you how to adapt your store’s to the current web design trends of 2015.

A Word About Responsive Design

Before I even start talking about the trends to follow this year, I wanted to talk about responsive design.

I chose not to include “responsiveness” as a trend for 2015 simply because it’s been a website trend for a while now. Before you consider following any of the below five website trends, it’s imperative that your mobile-friendly website looks and feels great across all devices.

responsive design

If your visitor has a hard time browsing your website through their mobile device, you can be sure that they wouldn’t like to come back.

As current statistics show, 2014 mobile internet usage has increased by 67%. As more and more people browse the internet through their smartphones, the design mantra “mobile first, but not mobile only” is not a trend – it can already be considered a requirement in any website.

Want to be convinced more? Look no further: here’s a useful infographic about responsive design that you can use so you can get started revamping your online store.

As the focus of web design is becoming more and more user-oriented, the design of your online store should be as friendly, as professional and as timely as possible.

Please keep these in mind as you browse through the five website design trends below:

Trend #1: Customized Web Typography

What it is: Contrary to popular belief, website typography isn’t just limited to fancy font styles – it’s the beautiful art of manipulating typespaces as a medium of communication and improved user experience. Website typography is visual communication.

Gone are the days when all websites exclusively use Arial, Times New Roman, and Helvetica. Nowadays, website designers realize that unique font styles are amazing addition to bring out an online store’s personality, without adding clutter that may slow down the website’s loading speed.

Aside from existing typography elements like “ghost buttons”, letterings, bold fonts, text animation and Google fonts, we may also see more brands creating their own personalized sets of typography.

Take it from the founder and director of Information Architects, Oliver Reichenstein, who said that “Web design is 95% typography”.

In an industry where there is fierce competition (around 51 million websites created per year!), a small change such as personalizing your website’s typography may just create a big difference.

What you can do today: Learn everything you need to learn about typography by reading this ebook: Practical Typography.

Websites you can take inspiration from:

Studio Lovelock

Studio Lovelock

Studio Lovelock, a vibrant collective of designers and animators, made use of a quirky background color to represent the diverse talents present in their company. This website’s typography is bold, readable and obviously distinctive – just like their brand’s personality.

National Geographic Channel’s “Eat – The Story of Food”

national geographic

This tasty typography from National Geographic Channel’s team is a feast for your eyes and your tastebuds. As an informative and refreshing take on how different types of food shaped different types of mankind, the website content manages you stimulate you emotionally and visually.

Trend #2: Scalable Vector Graphics (SVG) For Your Images

What it is: SVG is an XML-based vector image format that’s supported in all browsers except Internet Explorer (version 8 and below) and Android (version 2 and below).

When you use the SVG format for your images, you can ensure that they’re mostly pixel-perfect for any screen resolution or any gadget that your customers will be browsing through your website on.

SVG images do not lose their image quality, even if they are zoomed in or resized. When you’re feeling a little braver, you can also use your SVG images as animation, since every element and attribute in SVG files can be animated.

Also, SVG files can be created and edited with any text editor, so you’re all set.

What’s the best part? Aside from the fact that your images can be presented perfectly whether your visitor is using an Android, PC, iPhone or iPad, SVGs are also smaller in file size than JPEGs or PNGs!

I know SVG looks complicated and mind-boggling, but what you and your web designer really need to concern with is that you do not need to edit the code if you don’t want to. You can simply edit your image in a drawing program like Adobe Illustrator or Inkscape and then just save the code from there.

What you can do today: To make you realize that SVG isn’t that complex, why don’t you open your Illustrator (if you have it installed) and draw a rectangle or two? Save your masterpiece as SVG.

Then, with your text editor, open your SVG file and you can immediately see the SVG HTML elements.

You can check out this comprehensive article for a step-by-step tutorial on how to start.

Websites you can take inspiration from:

Doug Scheper’s “Creepy Mouth”

Doug Scheper

Know the difference between dental and interdental? We didn’t know, too, until we came across this Creepy Mouth experiment which made use of animated SVG images.

Google’s Santa Selfie

google

Last year’s Google’s Santa Tracker makes it possible for you to cut and color his hair, trim his beard and give him a magical tonic to make his long hair grow back – through the use of animated SVG images!

Just Design

just design

Branding agency Just Design shows of their online portfolio in such an interactive presentation that their website makes you feel as if you’re communicating with them personally.

Trend #3: Card Design

What it is: Consider breaking up your content into bite-sized components called “cards” or “tiles” so you can present them individually.

Arranging your content in cards is an efficient way for you to get organized and it’s also a convenient way for your viewers to take in vital information without being overloaded.

If you put in exactly the right content in different cards, you can be sure that your visitors will access your other cards so that they can learn more. Remember that in learning, we learn one step at a time. And so with presenting, you should not bombard your customer with all your data – present them digestible cards that they can process first before clicking on the others.

Big names in the industry such as Pinterest, Google and Twitter are using card design to intuitively present information: so don’t you think it’s time you follow suit?

What you can do today: Card design can be displayed in a variety of ways, so don’t limit yourself to just one option. Look at these fifteen examples of card-based website design today and choose a display that best represents your brand’s personality.

Websites you can take inspiration from:

Watb

watb

Surrey-based creative agency Watb presents their portfolio using the card-based design. This way, interested clients can choose which company information they want to learn more about and they can click on a separate card at their discretion.

coca cola

Coke’s digital “Ahh” campaign contains several elements in one webpage, so it makes sense for them to use a card-based design. This way, individual components all have a chance to shine – plus there’s a bonus animation of each card being turned over to create an intuitive user experience.

Trend #4: Minimalism

What it is: As experts have pointed out, minimalism isn’t the lack of something – it’s just the right amount of everything.

In this year of mobile, the year 2015, we expect more and more websites adapting to the minimalism style. Because mobile devices have smaller screens that website designers need to work with, designers make use of minimalism to decrease the clutter and really focus on what matters.

This means that we’ll also get to see more “ghost buttons”, simplified icons, and slide-out or hidden navigation menus, among others.

What you can do today: Short on cash? Here are thirty high-quality and free minimalist templates for your WordPress website.

Websites you can take inspiration from:

The Distance

the distance

Creative agency The Distance used a minimalist theme to make it clear from the get-go that they offer help with your Ecommerce, mobile apps and marketing needs.

Pablo & Rusty’s Coffee Roasters

pablo & rusy coffee roaster

This coffee shop’s minimalist design makes use of a hidden menu – you can only access the menu if you click the menu button. This way, the website is free from clutter. Its clean look is visually appealing and optimized for mobile devices.

Trend #5: More Videos and Images, Less Text

What it is: Your customers don’t like to read anciently long and boring novel-style paragraphs in your website anymore.

Let me show you what I mean:

No items found.

(http://www.demandgenreport.com/industry-topics/content-strategies/2746-b2b-content-preferences-survey-buyers-want-short-visual-mobile-optimized-content.html#.VNGhnDGUfKM) from 8% to 58%!

Let’s all be honest here: in today’s fast-paced world, you’d rather watch a clear, crisp and high-quality 40-second video than read about a company’s profile, wouldn’t you?

This year, more focus will be on large background images and publishing interactive videos.

What you can do today: Remember how you can develop your brand’s story? Brainstorm on how you can connect with your audience by producing a short story outline.

Websites you can take inspiration from:

Airbnb

Airbnb

Airbnb makes it possible for you to have a rich and dynamic background while publishing content at the same time. Through their homepage, they show different ways on how different people travel the world and eventually, arrive to their home; thus, their video background is also a beautiful representation of their tagline, “Welcome Home”.

MyProvence Festival

MyProvence Festival

The official website of MyProvence festival was true to its promise of presenting the festival in the eyes of the artists – the background music and the different video shots complement each other well enough to bring out the desired festive mood.

Conclusion

In the digital world, innovation is key.

And if your online store was created a few years ago, it’s probably looking pretty outdated right now. Come on, visit your homepage and take a peek – if you were your customer visiting your website for the first time, can you honestly say that you’d be impressed?

This is why you don’t just need to keep up with the current website design trends, you also need to be able to predict these trends and stay on top of them so you can ensure a successful Ecommerce business in such a dynamic industry landscape.

You’ve got the information to start – but do you have the entrepreneurial spirit to continue?


Which of these website design trends are you seriously going to apply to your online store’s design? Let us know in the comments below!