How to optimize your e-commerce web design – Part 2

Apr 03
2013

Comments Off

webstore5

Last week we shared our first 10 tips on how to optimize your e-commerce web design in order to make the shopping process as seamless and easy for your customers as possible. This week we look at things such as support, promotion of popular items as well as money back guarantee and the importance of testing.

#1. Keep content fresh

This might seem trivial, however just like any other website you need to keep your content fresh. There is nothing worse than visiting a web store only to realize that the store hasn’t been updated since 2008. You need to keep a regular schedule of updates otherwise customers will think the store is closed and the website just hasn’t been taken down yet.

#2. Sales support

If you were running a physical store the first thing you would do would be to employ sales personnel, running a web store is no different, don’t expect that just because everything is online customers don’t need support. From the very beginning you need to offer some sort of sales support, and you need to make sure they respond in a reasonable time, I am not saying you need to have a 24/7 live chat however if it takes you 3 weeks to get back to people then they will have moved on and bought the product elsewhere.

#3. Detailed information

Your product details need to be as detailed as possible, yes you might be selling T-Shirts however if your only product detail says “Green T-Shirt” then trust me people are going to be confused. You need to offer as much detail about the product as possible, these

#4. Consistent design

Just like with any other website you need to be consistent in your design, if you are using light colors on your front page then stick with these colors throughout the entire store, don’t all of a sudden have one site with a very different color it is very distracting.

#5. Tell customers if you have a physical store near them

Even though more and more people are starting to complete their shopping online some people still prefer brick & mortar stores, if you have an actual showroom near your customers then let them know about it.

#6. Promote popular items

Do you have a few items that are really popular with some customers? Chances are if you see a product being purchased more frequently than others then this product is of interest to many more than just those who recently purchased it. Tell your customers about your most popular products who knows they might just be looking for exactly that product.

#7. Testing the store

Like with any website there is nothing more important than testing the design, a web store is no different, you really need to test and retest your design before going live. If something isn’t working you want to know about it before your customers start complaining, perhaps you can get a few of your friends to test the site, chances are they will see something you haven’t considered after working months on the project.

#8. Money back guarantee

Let’s face it you just can’t make everyone happy, there is always going to be someone who will complain and want his or her money back. If you want to keep customers coming back then you must offer a money back guarantee.

#9. Keep check out clean

You might have noticed that physical stores always seem to cram a whole bunch of products in the checkout area, the reason for this is that you are much more likely to do spontaneous shopping while waiting in the checkout line. DO NOT do this online, there is nothing more annoying than trying to pay for your purchase only to be bombarded with new offers, keep the checkout area clean!

#10. Remember your target market

As with any website you need to remember who your target market is, for instance if your web store sells toys then the colors you will want to use will be different than if you were selling furniture for a retirement home.

The post How to optimize your e-commerce web design – Part 2 appeared first on Design Reviver - Web Design Blog.

Written by Rios Tam in: Design, Web Design, Website Resources | Tags: Answers, Articles, designer, ecommerce, Inspiration, Tips, tools, web

How to optimize your e-commerce web design – Part 1

Mar 27
2013

Comments Off

messy-website

This week and next week we will share with you how to optimize your e-commerce web design in order to make the shopping process as seamless and easy for your customers as possible. Today we will present 10 tips on how to create a better e-commerce website, next week we will present the remaining 10 suggestions.

The most important thing to remember when creating a web store is that while the design is really important, the main aim of the website should be to make the process from searching for a product to completing the order as easy as possible. If users have to search through the whole site just to find the “buy” button then chances are they will start looking elsewhere.

#1. Make searching easy

There is nothing more important than the search function when you are creating a web store, if your customers have no way of searching through the store then trust me they are not going to stick around. If you can’t find what you are looking for within 30 seconds of entering a website then you are 50% more likely to ignore the site and move on to another site.

Screen Shot 2013-03-27 at 10.44.06 AM

#2. High Quality images

I can not repeat this enough, really this goes for every kind of website not only a web store but all websites, there is absolutely nothing worse than pixilated images. Yes when we were all surfing on dial-up modems then sure images had to be smaller or they would take forever to load, however today most people have faster internet and therefore there is no excuse for using images of a low quality.

images

#3. Narrow down content

You need to allow your customers to narrow down their content, in other words give them different options, if you are selling clothing then allow your customer to search by their size, or the color they are looking for. If you offer clothes in different styles then allow your customer to select these, let’s say you are selling casual and formal clothing then offer the option of browsing either section. Of course you need to make sure that your customers can change their mind without having to restart everything.

Screen Shot 2013-03-27 at 11.29.29 AM

#4. Call to action buttons

Please make sure your call to action buttons are not tiny or hidden somewhere in a corner. Since the goal of your website is to sell a product then you need to make sure your call to action buttons are as visible as possible. Also remember that more and more visitors are using tablets to surf the web and therefore your Call to Action buttons need to be large enough that people can press them with their fingers without running the risk of pressing a whole bunch of other buttons in the process.

#5. Don’t hide additional costs

You need to be upfront with your customers, tell them exactly how much something is going to cost, make sure you let your customers know how much shipping costs, also don’t just add a service charge at the end of the purchase process without letting your customers know from the beginning that a service charge is added to all purchases.

hidden

#6. Keep it clean

There is nothing worse than a messy, over crowed store, this applies both to brick and mortar stores as well as web stores. You need to keep it clean, you can do this through several techniques, one of the most popular is spacing things out, make sure you are not jamming everything on-top of each other, leave some space around the different elements.

messy-website

#7. Customer reviews

If you are not collecting customer reviews then NOW is the time to start, really a website without customer reviews is useless, we like to hear what other people thought about a product before we decide whether to purchase it or not. Don’t trust me? Then simply open YouTube and search for product reviews and you get more than 3,160,000 videos.

Customer-Reviews

#8. Trust signals

As humans we want to trust others however too many times have we been cheated in the past, and therefore people feel uncomfortable with giving out their details to sites they haven’t used before. If you can offer some form of reassurance that your website is trustworthy then you are much more likely to have more customers. If you can add trust signals somewhere on your site then do so, of course only if you can actually offer this trust, otherwise don’t be a fool and simply add it to look cool.

trust-sign

#9. Don’t hide the shopping cart

This is really important, you need to make it easy for your customers to see what is currently in their shopping cart, don’t be cute and hide it somewhere at the bottom of the website where your customers can’t find it, make sure it is visible and present so that your customers know exactly how much is in their shopping cart and how to checkout.

Screen Shot 2013-03-27 at 11.01.25 AM

#10. Stock availability

Make sure your customers know if you have available stock of something before they start the purchasing process, honestly there is nothing worse than searching through hundreds of items and finding the one you love only to find out that they are already sold out or worse yet not being produced anymore. If something is out of stock then make sure you tell your customers immediately.

Out-of-Stock-300x300

The post How to optimize your e-commerce web design – Part 1 appeared first on Design Reviver - Web Design Blog.

Written by Rios Tam in: Design, Web Design, Website Resources | Tags: Answers, Articles, designer, ecommerce, Inspiration, Tips, tools, web

20 inspiring uses of white space

Mar 26
2013

Comments Off

Screen Shot 2013-03-25 at 2.12.22 PM

Over the past few years white space has become immensely popular. Many people use white space whether it is in their headers, footers or simply to create space between elements, as a way to give their website a more simplistic and cleaner look. We have compiled a list of 20 great examples of white space in web design.

Apple

Ultra 16

Google

Theme Jug

Jamie Gregory

Session M

Frieze

Dropbox

VolksWagen

Box

Cult Of Mac

Nintendo

Roundhouse

The Old Fashioned

37 Signals

WebKnit

Hey Designer

Checkout

Tiffany & C0.

Smart Car

The post 20 inspiring uses of white space appeared first on Design Reviver - Web Design Blog.

Written by Rios Tam in: Design, Web Design, Website Resources | Tags: Apple, Articles, design news, dropbox, google, Inspiration, Tips, web, white space

20 Great fonts you should have in your collection.

Mar 20
2013

Comments Off

Screen Shot 2013-03-20 at 10.43.28 AM

Every good web designer knows that if there is one thing you can never have enough of then it’s Fonts! As some of you might know we are great fans of different wonky fonts, therefore we have collected 20 of the most interesting fonts currerntly available on the internet. Most of these fonts are free, however a few of them are for personal use only, with the option of purchase for professional use.

Redwood Creek

Simple Print

Chopin Script

Angry Birds

Optimus Princeps

Waltograph

Champagne & Limousines

Pacifico

Frankentype

Flesh Wound

Intaglio

Prism

CF I want to believe

Abracadabrahocusspokuz

Tartlers End

Warpai

Coburn

Stripes

CF Jack Story

Crash Crash

The post 20 Great fonts you should have in your collection. appeared first on Design Reviver - Web Design Blog.

Written by Rios Tam in: Web Design, Website Resources, graphic design | Tags: Articles, Fonts, Freebies, Inspiration, News, tools, Typography, web

Things to remember when designing websites for gaming consoles

Mar 13
2013

Comments Off

consoles

Surfing the net from a dedicated gaming console is not something new, in fact the ability to connect your gaming device to the internet was first introduced back in 1997 with the Game.com which allowed user to connect a dial-up modem and then check their email and browse the internet. However still to this day many designers ignore or pay very little attention to game console browsers when designing a new site. However there are some things that you need to remember when you are designing for a gaming console, added here are some of the most important things to remember, feel free to let us know if you think we forgot something.

Perhaps the biggest reason why so little importance has been given to the gaming consoles is that even though many households own either a Wii U, Wii, Xbox or Playstation, there is still a relatively small number that uses these devices to surf the web. The biggest problem is that these devices were not built for internet browsing and therefore they simply feel clunky when used to navigate the web.

According to StatCounter, the Sony PS3 accounts for just 0.1% of all web activity. Wii and Xbox browsers don’t even appear in the chart, although that’s possibly because they’re intermingled with Opera and IE9 statistics.

What consoles should be tested?

So the first thing you should decide when making your website more console friendly is what consoles will you test your site on, of course we know that you will not be able to test your site on every gaming device on the market, however it is recommended that you test on at least two major platforms so you can create as user friendly a website as possible.

Consoles that plug into a TV screen, such as the Nintendo Wii, Sony PS3, and Microsoft Xbox 360.
Handheld consoles such as Sony’s PSP, PS Vita and Nintendo’s DS and 3DS.

Different Consoles, different Challenges

Each different console brings with it different challenges, the biggest challenge is that even though the resolution is often higher than normal screens gamers sit much further away from their consoles, furthermore since they are not using a mouse to control the browser their clicks might not be as precise, another problem is that many game console browsers don’t support flash or CSS features.

What can designers do about it?

As more and more users will visit your website from a gaming console you can use different progressive enhancements that make it possible for people to access your site’s content even on a device that doesn’t support certain features. Another thing you can do is make sure your website loads as fast as possible. Even though some users will visit your website from a TV capable of showing HD quality you need to remember that not everyone has a Smart TV and therefore you should make sure your site also looks good on older screens.

console.maban.co.uk is really a great resource for information on how browsers function on different gaming systems, UK developer Anna Debenham created the site that provides descriptions, controller details, screen resolutions, user agents, JavaScript support, Flash versions, HTML5 test scores and a wealth of other information.

The post Things to remember when designing websites for gaming consoles appeared first on Design Reviver - Web Design Blog.

Written by Rios Tam in: Design, Web Design, Website Resources | Tags: browser, designer, General, News, Tips, tools, Usability, User Interface, web

5 ways to keep your web design simple

Feb 25
2013

Comments Off

It used to be that the more information you could cram onto your main site the better, however today all of that has changed, today websites need to be as simple and sleep looking as possible. However often designers are wondering just how to simplify their design, therefore here is a post with five ways to keep your web design simple.

There is no reason why creating a simple website design should become an impossible task, if you follow the simple suggestions below then your website will look much cleaner, if you think we forgot something feel free to leave a comment and enlighten us.

1. Focus Only On Essential Elements

Yes this might seem really obvious, however you would be surprised at how many designers ignore this simple tip. The problem with many designs is that there is a large mess of important and unimportant elements stuffed together on the site making it impossible for visitors to know what they need to focus on and what they should just ignore.

The first thing you need to do when trying to make your website simpler is to focus on what really needs to be on the site, focus only on the essential elements and ignore the others. Remember as visitors we are always looking for excuses for leaving a website, and chances are if we don’t find what we are looking for within the first 20 seconds we will hit the back button.

2. Get Rid Of All Unnecessary Elements

Yes Yes like above you might be tempted to stuff everything on your site, however our suggestion is getting rid of everything that isn’t needed. If your main goal behind the website is to get visitors to sign up then why don’t you create a big signup area and have that be the main focus of your site, instead of having paragraphs of text only to at the bottom say “Oh by the way please sign up”

3. Reduce The Number Of Pages

The truth is there is nothing worse than visiting a website with a gazillion subpages, therefore it comes as no surprise that a large part of simplifying your design is to have fewer subpages, this can be done either through getting rid of pages that don’t add anything to the website, and you know are not really needed, if you absolutely must have this information on your site then you can fuse a few sites together.

You can do this by sitting down with someone and explain to them what your main goal is, and then ask them if they can find the information quickly and without having to search through too many sites to find it. Don’t forget that when you have fewer sub-sites navigating through your site also becomes much easier.

Once again remember if a visitor feels overwhelmed they are much more likely to hit that little button on the top left corner, you know which one I mean, the BACK BUTTON!

4. Get More Content Above The Fold

While this might come as a surprise to some, truth is Studies have shown that a most visitors tend to spend most time above the fold on web pages in other words they don’t like having to scroll down a website. Therefore if you want your website to become more effective, you need to have the most important information and call-to-action elements above the fold.

5. Limit Your Color Scheme

In a previous post we told you about the mistakes that many web designers make when planing their site and one of the points we focused on was the color choice, we all know it is easy it is to get carried away and use several different and sometimes harsh colors, but you need to remember that not only will these colors look different on different screens, but the harsh colors are not good on the eyes, making your site a chore to view.

When you are trying to simplify your website however remember that fewer colors are better, you should really try to stick with 2 or 3 different colors, and try to stay away from the really harsh colors, you might want to try staying with the same color but using different shades.

Even if you have simplified everything else but have crazy colors glaring of the screen distracting from your message then everything was useless.

Summarizing:

We hope that the tips above have given you a better idea of what you need to do in order to simplify your website design. If you follow these steps then chances are your website will become more successful.

So here are our five suggestions to simplify your website design:

Put the focus only on the essential elements
Get rid of all unnecessary elements
Reduce the number of pages
Get more content above the fold
Limit your color palette

The post 5 ways to keep your web design simple appeared first on Design Reviver - Web Design Blog.

Written by Rios Tam in: Design, Web Design, Website Resources | Tags: Articles, design news, designer, developer, Inspiration, navigation, News, Tips, tools, User Interface, web

Weekly News Roundup – 22 February 2013

Feb 22
2013

Comments Off

The week is coming to an end and that means it is time for us to look back on the week that passed, the best design news, resources and other goodies. This week we look at different ways to improve your Google ranking, how SEO differs between mobile and desktop devices, what can you do to improve the load speed of your site, as well as why wire-framing is so important.

How to speed up your website load times

Do you want your website to load blazing fast? This article will teach you how to make your website load faster than you ever thought possible. In order to understand why having a fast website is important, check out these statistics: the average smartphone user will leave a website if it does not load within 3 seconds; Google now considers page speed a major consideration for search engine rankings; 75% of internet users agreed that they would not return to a website if it did not load within 4 seconds.

15 Great Twitter Bootstrap Resources

Twitter Bootstrap is a great front-end framework that lets you quickly prototype new web projects. Here is a list of great resources that gives even more power to the Bootstrap framework.

Three Ways a Mobile Responsive Website Beats Using a Separate Mobile Site

Mashable has called 2013 “The Year of Responsive Web Design.” Yet, for all its accolades — and despite the backing of industry heavyweights — there are some who remain unconvinced that mobile responsive design is the way to go. These folks argue that your website should have a completely separate mobile presence. I think differently. I want you to believe in mobile responsive design. I want you to embrace it like the internet has embraced funny cats. I want to give to you three reasons why you should choose a mobile responsive website design over a separate mobile site.

Google Makes Its Own High-End Laptop, the Chromebook Pixel

Google today unveiled a laptop it designed and built itself, the Chromebook Pixel. Unlike prior Chromebooks, whose main dreaw their value, this one is built to compete with the top end of the market. The three biggest appeals of the Pixel will likely be its touchscreen and high density display, its elegant design, and the fact that it’s a web-based device.

Wireframing and Sketching for Web Designers: Tools, Utilities and Reasons

A website wireframe is a visual guide, or a skeletal framework that will help you define your future website’s characteristics. By wireframing you are basically defining the primary steps and the shape your website or product is going to have. One of the main purposes of wireframing is to set the main priorities and describe the functionality of your future creation.

Improving and Refining Your WordPress Theme Development Process

There is so much to learn about WordPress theme development. The Internet is home to hundreds of articles about building WordPress themes, to countless theme frameworks that will help you get started, and to endless WordPress themes, some of which are beautiful and professional but not a few of which are (to be honest) a bit crappy.

Magazine design principles applied to web design

Here I’ve covered some of my favorite lessons from magazine design, and how they can apply to web design. But the most important thing I hope you can take away from this article is that you can take design ideas and conventions from one form of media and apply it to others.

Helpful Code Paradigms for Frontend Web Developers

Coding a website takes a lot more time than just a simple design. You have to consider how each HTML element will be placed in the document and how you need to style them using CSS. Not to mention there are at least 4 browsers you should test plus the possibility for mobile users. There is such a demand for web development that coding takes on a life of its own. In this guide I want to share a few tips and ideas I’ve come across when working on the frontend.

Top tips for designing a business website

How important are design trends when it comes to websites?There are two sides to web design: functionality and impact.With functionality, it’s key that people know how to use your site. On a desktop site people are used to seeing navigation at the top, or on the left. Putting it somewhere else would be like putting the contents page of the book randomly in the middle. With these sorts of things it’s important to adhere to what people are used to seeing.

8 Strategies to Get Multiple First Page Rankings on Google

While some users may lament the more cluttered search pages, the “new normal” does offer more opportunities to achieve multiple first page rankings. Controlling multiple first page rankings allows marketers to exert greater control over their brand, reach more searchers, and present a stronger brand to searchers.

How do mobile and desktop SEO differ, and how can you improve rankings?

The proportion of search traffic from mobile devices grew ever larger during 2012, peaking at 46% on Christmas Day for some retailers. And Google probably isn’t alone in predicting that mobile search queries will soon surpass those made on desktop.

The post Weekly News Roundup – 22 February 2013 appeared first on Design Reviver - Web Design Blog.

Written by Rios Tam in: Design, Web Design, Website Resources | Tags: css, design news, designer, developer, framework, HTML, HTML5, News Roundup, Tips, tools, web

10 Can’t Miss HTML5 and CSS3 Tutorials – Part 2

Feb 13
2013

Comments Off

In part ONE we presented the first 10 in a collection of 20 great HTML5 and CSS3 tutorials. Everyone agrees that tutorials are the best way to learn something new and stay up to date with the latest changes in the industry, so we have compiled a list of can’t miss tutorials. Let us know if you think we forgot a cool tutorial!

How to Create an Upload Form using jQuery, CSS3 and HTML5

An HTML5 Slideshow w/ Canvas & jQuery

Learn CreateJS by Building an HTML5 Pong Game

How To Create a Pure CSS Dropdown Menu

What You Need To Know About The HTML5 Slider Element

HTML5 Tutorial: How to Build a Single Product Page

Create HTML5 audio visualizations

Full CSS3 HTML5 Contact Form with No Images

Create Your Portfolio Gallery Using HTML5 Canvas

Create an HTML5 Canvas Tile Swapping Puzzle

The post 10 Can’t Miss HTML5 and CSS3 Tutorials – Part 2 appeared first on Design Reviver - Web Design Blog.

Written by Rios Tam in: Design, Web Design, Website Resources | Tags: Articles, css, CSS3, designer, HTML, HTML5, Inspiration, Tips, Tutorial, Tutorials, web

Weekly News Roundup – 8 February 2013

Feb 08
2013

Comments Off

The week is coming to an end and that means it is time for us to look back on the week that passed, the best design news, resources and other goodies. This week we look at great examples of Flat Web design, the 10 commandments of Modern web design, and introduction to creating sliders, as well as an interview with the guys behind the Pixel Perfect Precision Handbook.

Flat Design: 17 Examples Of Flat Web & App UI Designs

Early 2013 has seen a rise in some pretty interesting discussions on the use of ‘flat web design’. Flat design seems to be causing a slight stir amongst the design community right now, arguments for and against the flat design trend are often lively and heated. Flat Web Design? Firstly, flat design in the case of this article is referring to either app or UI web design – NOT housing or apartment decoration. Flat design rather simply means your web or app design contains minimal use of heavy gradients, bevels, drop shadows or any form of element that would provide considerable depth to the user interface.

10 Tools for Creating Infographics and Visualizations

asel.ly is another free web-based tool for creating infographics. You cannot create graphs using real data with this tool, but its really good for conceptual visualizations and storytelling. It has a beautiful user interface and the themes you can start with are gorgeous.

10 Commandments of Modern Web Design

Any intelligent fool can make things bigger, more complex, and more violent. It takes a touch of genius — and a lot of courage — to move in the opposite direction. Albert Einstein I would argue that a huge part of that genius Einstein refers to can be found in clarity of purpose and principles.

7 Rules for Creating Effective Slides

The key to a great presentation design is to create visually stunning yet simple slides that your audience can quickly comprehend. Most people can’t effectively read and listen at the same time. The presentations that really stand out allow viewers to avoid reading lots of text by communicating information visually. The following presentation by Alex Rister takes a look 7 fundamental rules in creating slides: Introduction to Slide Design.

5 innovative examples of user interface design

In these days of intuitive touchscreens and intelligent apps, your audience is not going to put any work into using your product, app or operating system – they’ll expect it to be obvious. No one is going to read a lengthy, detailed instruction manual; instead, the user interface should guide your customer through to achieving their goals – doing all the hard work so the user doesn’t have to.

Tools and Tips on how to Optimize Images for the Web

The time a page takes to load is something every designer worries about, or at least is something that every designer should worry about. It doesn’t matter if the layout is nice and beautiful if it doesn’t function properly. Since images can be pretty heavy, this is certainly an issue to keep an eye on. And this is why today we gathered a few links here to show you some tools and articles that will help you with this issue.

10 PowerPoint Alternatives That Make Meetings Fun

This article presents 10 ways to make your meetings go by a little faster, everyone is tired of seeing the same boring PowerPoint template and it is time for something new.

50+ Clean, Simple and Minimalistic Website Design Examples

One of the fastest ways to set up minimalistic websites is to build it on top of WordPress and one of the many great simple templates available for this popular publishing platform. In this article, I have collected more than 50 Minimalistic website design examples you can use as inspiration.

MIHTool, the iOS web debugger

If you are a web developer, the strangely named MIHTool (MIH for “make it happen”) will make you happy. If you mostly work on mobile web applications, this will change your life. It’s the missing developer tool you wanted for so long, and Apple didn’t give you.

Sketch VS Fireworks

In response to many who have suggested in my blog Sketch VS Photoshop that Fireworks is a great alternative to Sketch, I decided to download it again after many years.

Pixel Perfection Precision handbook interview

Last week we had a chance to interview the guys from ustwo, to discuss their latest book “Pixel Perfect Precision Handbook” You can download it here, And of course be sure to follow @pppustwo on Twitter for all the latest pixel news and advice!

The post Weekly News Roundup – 8 February 2013 appeared first on Design Reviver - Web Design Blog.

Written by Rios Tam in: Design, Web Design, Website Resources | Tags: Articles, css, design news, designer, developer, HTML, illustrator, Inspiration, News, News Roundup, photoshop, Tips, tools, Tutorials, web

10 Can’t Miss HTML5 and CSS3 Tutorials – Part 1

Feb 06
2013

Comments Off

Today and next Wednesday we will be presenting a collection of 20 great HTML5 and CSS3 tutorials, 10 each week. Everyone agrees that tutorials are the best way to learn something new and stay up to date with the latest changes in the industry, so we have compiled a list of can’t miss tutorials. Let us know if you think we forgot a cool tutorial!