Accordin to Wikipedia eCommerce or Electronic commerce, commonly known as e-commerce, ecommerce, eCommerce or e-comm, refers to the buying and selling of products or services over electronic systems such as the Internet and other computer networks.
However, the term may refer to more than just buying and selling products online. It also includes the entire online process of developing, marketing, selling, delivering, servicing and paying for products and services.
Benefits of selling online:
Selling online have numerous advantages and some of them are mentioned below.
- Cost effective and accessiblity to global market.
- Cutting out the middle man and that means more profit.
- 24 hours business. Your ecommerce software keeps your online shop running 24 hours a day, 7 days a week and 365 days a year.
- Automated Order processing and quicker payment processing by directly integrating your ecommerce solutions to your bank payment gateway.
- Greater customer satisfaction. A modern ecommerce website design helps you provide all the customer support that are required.
- Better customer information. Fully automated ecommerce solutions allow exchange of information to customers efficiently and cost effectively.
- Drive traffic and sales. Professional ecommerce website designs are more compatible with search engines and thereby sending you relatively more visitors.
- Simplify sales management
- Make bookkeeping easy
I have chosen two websites which show different ways of being a successful eCommerce. I will point out a few positive or negative aspects of their overall website design.
www.ebuyer.co.uk – electronics retailer.
www.lkbennett.com – women clothing, footwear and accessories retailer.
“Grid systems can facilitate creativity by providing a framework and already answer some designers’ questions such as ‘where should the folios go’, ‘how wide should the measure be?’ etc. A well designed grid system will go some way to answer these questions and more.”
— MARK BOULTON
Grids have been a tool for ordering graphical elements in the works of graphic designers for quite some time now. They have managed to ease the work of a designer by introducing structure and order on the canvas. You might think that this may be constraining to once creativity by putting it under the tyranny of a fixed net of horizontal and vertical lines. However this is far from the truth. Grids are all about mathematical ratios - how big is one column with respect to the other column? May those proportions be formed by whole rational number (1:2, 2:3, 3:4) or may be some irrational ratios such as the Golden Section (1:1.618). What makes them ideal is not that they are mathematically accurate, but their unexpected commonness. Those ratios surround us in our everyday life from the buildings we create to nature itself. People subconsciously are used to seeing those ratios everywhere and whenever something does not fall into the "known" ratios we feel like something is wrong with it without actually knowing what the reason is. The person quickly discards the oddity and gets on with his life. The same principles apply in web design as well, only here you cannot afford to have a user irritated because of the irregularity you might have introduced by not using a grid system. Only recently grids have been introduced to the word of web design and they have changed our workflow for the better. (An simple example of web grid system)
So how are grids used in web design? Let us have an example.
I have managed to do some PHP practice during the Winter break. I have successfully converted my project homepage from being just a few redundant HTML pages to an efficient PHP website.
During the Winter break I have managed to make a few changes to my second Project of the Webpage Design course. In addition to all the previous I have managed to lighten the homepage by replacing the list of all recipes with just the top 10 ones. To make it more interesting and include some randomness to the site I have introduced a random recipe section where by the click of a button you are presented with a random recipe from the website's DB.
In a sub-page I have moved the entire list of biscuit recipes with the addition of an alphabetised modulation which means that the recipes now are devided into pages where each page corresponds to a letter from the alphabet.
All recipes in those first two pages have been given a nice biscuit picture to make it more inviting and colourful.
For the recipe review page I have managed to add a picture of the current recipe in order to make it look appealing.
Check out the changes here.
For this project I have chosen the Biscuit Recipe website to be the target of the makeover. I chose it because the moment I saw it I knew how and what I wanted to change from its original version. Next I will point out the problems which I could detect as a bullet point list.
Analysis of the original website's homepage:
- The logo does not give a biscuity feeling to the page.
- The logo is not also a homepage link.
- Navigation bar is in the wrong place.
- Bad use of tables.
- Footer is not centred as the rest of the page.
- Tagline is not obvious enough.
- Centrally aligned text is not a good idea.
- A lot of in-line styling.
- I have introduced biscuits integrated in the logo of the website
- I have made the logo to act as a homepage link
- Navigation bar is moved to the top of the page, because it has 8 links in it which makes it a really long bar which would otherwise "divide" the page in two parts.
- Instead of table I used an unordered list for the biscuit recipes.
- Footer is centred and styled to resemble the navigation bar in the beginning in order to give the page a framework effect.
- Tagline is right below the logo and in addition I used a different typeface in order to make stand out a bit more.
- No centrally aligned content (apart from the logo and tagline).
- No in-line styling.
- Think carefully about font sizes whenever your webpages - hierarchy is very important in typography.
- Improve readability by keeping your content lines short.
- Improve readability by using fonts with large counters.
- Improve readability by adding a bit more to the default setting of line hight.
http://sourhaze.com/ep1/ - Website for selling music. Typographical elements in this website are used for graphic design - the curly brackets. They help envelop the content of the EP showing that you get all 6 songs whn you decide to buy the EP. The text colours are derived from the front cover of the album. Typographical hierarchy is carefully used to emphasize the importance of each piece of information. For example this is not e complete album it is just and EP (Extended play) which is very well emphasized in the webpage - same goes for the "Buy" option. Additional information is subtly described in a grey and more important information is coloured in a shade of yellow. Contrast is good in general. The only thing that might be improved is the width of the lines - a bit too narrow.
http://lordlikely.com/ - Looking at this website you can immediately tell it has a retro look and feel. This effect does not only come from the colours used or the faded images. It is mainly because of the typefaces used in it. They provide certain strictness from the the old days. Proper hierarchy is also maintained amongst headings, sub-headings and content text. Easily readable (contrasting colour) and stylish website have successfully conveyed the old-fashioned atmosphere of Mr.Fanton's time.
http://www.soasdesign.com/ - Even though this is just a temporary webpage, in my opinion it has proven to have good typography. We can easily notice that the font of the main heading is very carefully chosen to complement the graphic design on the left of the webpage - round shapes in both instances. Meanwhile the wrest of the text has more straight forms, I believe this helps to increase readability. Also gives the sence that the content is more serious even though the pages begins with soft round shapes.
http://www.chunkdigital.com/ - This is a great example of a Web designer who went a little bit too far showing his/her skills. The website looks very professional and colours are very well chosen. The mistake is the use of the colours, font size and line hight in the displayed text. Because of the misuse of those typographical attributes the displayed text is difficult to read. The colours strain the eye, the small line hight overloads the look and the alternating font size confuses you further more.
http://2011.beercamp.com/ - This website probably does not even need commenting - just have a look. It is not enough that the background colour blinds you but the typography here makes it even more unreadable. The typefaces vary from incredibly fat with almost no counter to very thin, almost disappearing off the page. I admit the 3d effect is quite intriguing but her must be another way to prevent the text from cluttering like that.
http://www.davebarnes.com/ - There is to0 big gap between the seize of for example the logo and the main navigation text. And in general apart from the logo the font size everywhere is in my opinion too small. The main navigation font size is insufficient - the navigation should be obvious to the user, but here it does not seem to be.
Good Colour Schemes:
http://www.clinicaoliva.com/ - Because this is a dental clinic and it is usually associated with fear and pain they are trying to create a soothing atmosphere with their colour scheme. The colours used here contradict the usual stereotypical sterile-white. A feel of closeness to nature is created from the pictures and flash animations.
http://www.bbc.co.uk/iplayer/ - At first it might seem that too much is going on in a limited space. In spite of the many different shapes that fill up the space the use of colour makes the content pop up which is the main purpose of a site like this one (easily check the programme) The pin is used for categorizing the content while white is used for headlines/titles and of course grey for textual information.
http://www.vladstudio.com/home/ - The designer of this website I consider to be my personal rival in Design (as we have the same name). He uses very subtle colours in his website design in order to allow his other creations to pop out. The whole site has a very inviting atmosphere - it is a joy to browse in it.
Bad Colour Schemes:
http://www.cineworld.co.uk/ - This is the website of a famous chain of cinemas however the website does not seem well coloured. They have correctly chosen to go with the primary colours from their logo (red, grey) however they have not used those colours appropriately. For example the red background is very strenuous to the eye especially when browsing from a big screen. They might have chosen a more subtle shade of red or even go for grey (is what I would have done). Another issue is the unnecessary use of additional colours such as blue - it is never good to have a combination of blue and red.
http://www.horserentals.com/ - This websites is just horribly wrong in terms of colour. There is absolutely no harmony between the colour used here. A truly chaotic mess of contradictory colours. As in the previous case, here again we have combination of blue and red. This web sites colour scheme consists of about 8 different colours (counting black and white) this is not acceptable for today's standards - about 5 is the accepted average.
http://www.gatesnfences.com/ - Another example of bad colour scheme even though the website is made for gates design practice. Series of blue and red links can make your eyes sore. The use of colour is scattered and without purpose - they completely cover the gate designs showed in the website. A site like this should use some of the images as sources for good colour schemes in order to make these images centre of attention.
- Always use Inheritance in your CSS - I will save you a lot of unnecessary classes
- If you want to place two <div> tags next to each other - use the float attribute for both of them e.g. float: left;
- "Element width does not include padding, border or margin" from lecture slides
This task is a bit unfair. There are so many websites and to only pick 3 good ones is difficult. Here are some of my favourite websites and why I think their design is good:
- http://www.razerzone.com/ - This is the website of a famous manufacturer of gaming oriented peripherals. The website layout and menus are very simple and intuitive, however the graphics are extremely vibrant in order to draw attention. This is because one of the website's main purposes is to sell products and in order to do that you emphasize each item. Every time I visit I feel like I have to buy something - the website is very luring. The other purpose is to announce upcoming releases or competitions, share information and provide customer support.
- http://www.nasa.gov/ - As you all might know this is NASA's website. At first glance nothing special. You might expect it to be just another content oriented website full of valuable information but no actual design in place. In my opinion this is not the case. The design of this website is very subtle. It encapsulates the functionality along with very elegant design. Notice the modulated view of the home page - how each section of it seam to be floating on top of the background image. Only two main colours were used - blue to go with NASA's logo and gray to match the dark background. The main navigation bar drop down menus also brings a sense of elegance - smooth and light.
- http://www.kaldata.com/ - This website should be completely unknown to most of you, because it is in Bulgarian. Like many others of its type this is a news site which focuses on software, hardware and games. The design might looks a bit messy at first, however the content is superbly structured. There are six main news-feed areas which fill up the home page as well as the main navigation menu. Each of those topics resembles a blog which makes is very easy to chronologically follow news - very easy to navigate. In addition you have a like, 1+ , etc. button for every article so you can share with your friends.