Oct 15

Problems to Be Avoided in Graphic Design

Graphic designing is a kind of visual communication that makes use of a word, symbol, or any visual item and designs it in a way to communicate the underlying message of the design to the public. Graphics designs might be created by grouping together visual images, texts, words, shape of different sizes, color combinations, layouts, lines, and dot patterns.

graphic design

Continue reading

Jan 17

Top 5 Web Design Mistakes

We could produce of a list of 50 top web design mistakes but lets limit this list to 5, to get to the point and help you speed the recovery of your site. As always, please comment on this list in case we’ve missed something you feel is more critical.

1. User doesn’t know what the purpose of your site is within 5-7 seconds.

Most users will give up soon after that quick window vanishes…   You already know what you site is there for, so you take it for granted that the user knows too. But often they don’t, and boy oh boy when it comes to those ‘integration solution’ type businesses that appear to do everything and nothing all at once, it can sure be confusing.

A user should never have to work to figure out what your site does. Take that to the bank.

2. User has to wait for your site to load.

Again, users are impatient. Unless your site is a cult design site that users know will be worth waiting for, it’s an epic fail to make ‘em wait more than 5-7 seconds for the site to load. Many will say “3 seconds max, loser!!”.

Given all the places where latency can slow things down, don’t assume the user has the same lighting fast  fiber connection that you do.

If you are a design house and want to show off, give the potential client (everyone who comes to your site is a potential client) a “work examples” page on your site where they can see your seriously tricky Flash work…but don’t lose the potential client before they see your work. Continue reading

Jan 17

Top 30 Most Important Web Technologies

This all comes from Builtwith.com – which is a really engrossing site full of web trends and analytics that will leave your head spinning as you try to make sense of it all.

See below this chart for an interesting trend in Google Adsense too!

Name Type Websites Usage % Change %
IIS Web Server 28,408,510 22.82 0.03
ASP.NET Frameworks 27,327,098 21.62 0.03
PHP Frameworks 26,056,938 36.65 -0.03
jQuery JavaScript 24,636,038 33.58 0.04
Google Adsense for Domains Advertising 16,040,583 1.84 0.03
Shockwave Flash Embed Frameworks 8,541,143 14.02 -0.08
RSS Feeds 7,784,774 19.98 -0.07
Frontpage Extensions Frameworks 6,867,908 12.33 -0.07
Limiter Modules Server 6,411,848 12.1 -0.08
Auth Passthrough Server 5,770,257 10.57 -0.07
Really Simple Discovery Feeds 4,807,263 12.04 -0.06
IIS 7 Web Server 4,625,688 8.31 0.03
WordPress CMS 4,489,002 11.63 -0.07
Pingback Support Feeds 4,244,904 10.83 -0.07
Live Writer Support Feeds 4,241,365 10.54 -0.06
Atom Feeds 3,173,484 6.22 -0.04
Google Adsense Advertising 2,775,213 10.36 -0.02
WordPress Plugins Widgets 2,771,895 9.28 -0.05
AJAX Libraries API CDN 2,155,279 8.86 0.03
Ubuntu Server 1,775,256 2.41 0.05
Passive Localization JavaScript 1,330,312 4.73 -0.29
Facebook for Websites JavaScript 1,216,712 8.14 0.03
YouTube Media 1,053,488 2.49 -0.04
jQuery UI JavaScript 925,740 5.28 0.03
jQuery Cycle JavaScript 779,449 4.1 0.02
Google Plus One Widgets 304,080 5.31 0.02
Hover Intent JavaScript 291,579 1.67 0.02
jQuery CDN CDN 109,038 0.42 0.02
jPlayer Media 2,724 0.11 0.02
SiteSpect Analytics 628 0.06 0.05

From: http://www.coolhomepages.com/Top-30-Most-Important-Web-Technologies/blog-144.html

Aug 19

Fundamental Guidelines Of E-Commerce Checkout Design

Here is the harsh reality of e-commerce websites: according to recent e-commerce studies, at least 59.8% of potential customers abandon their shopping cart (MarketingSherpa puts it at 59.8%, SeeWhy at 83% and MarketLive at 62.14%). The main question is why do customers abandon their shopping cart so often? Is there some fundamental mistake that designers of e-commerce websites do very often? Are there any common guidelines or rules of thumbs that make it more difficult for our users to purchase products? And is there some meaningful way to improve the conversion rates for our products?

Well, that’s exactly what we wanted to find out. In 2010, we recruited a batch of Web users and conducted a usability study, focusing only on the checkout user experience, from “Cart” to “Completed order.” The study was conducted using the “think aloud” protocol and was documented by recording everything that happened on the computer screen. The behavior of the test subjects was then analyzed by scrutinizing these recordings at a later date.

Credit-card-payment in Fundamental Guidelines Of E-Commerce Checkout Design
The study has shown that it is often difficult to lead customers to the final step in the checkout process when the only thing left is to submit their credit card details.

The 15 e-commerce websites that we tested were: 1-800-Flowers, AllPosters, American Apparel, Amnesty, Apple, HobbyTron, Levi’s, Newegg, Nordstrom, Oakley, Perfume.com, PetSmart, Thomann, Walmart and Zappos.

In total, the test subjects were given more than 500 usability issues, ranging from being distracted by animated graphics to being thrown off course by an illogical checkout flow. These issues were then analyzed and distilled into 63 checkout usability guidelines in a report titled “E-Commerce Checkout Usability.” In this article, we’ll share 11 fundamental guidelines from that report with you.

1. Your Checkout Process Should Be Completely Linear

Issue: Having steps within steps confuses and intimidates customers as it breaks with their mental model of a linear checkout.

One of the worst usability violations that we discovered in our testing was non-linear checkout processes. Websites with a non-linear checkout process left several of our test subjects confused and intimidated. At the time of testing, both Walmart and Zappos had a non-linear checkout process.

The typical way to “accidentally” end up with a non-linear checkout process is to create steps within steps. This happens, for example, when the customer has to set a “Preferred shipping address” (Walmart’s violation) or “Create an account” (Zappos’ violation) on a separate page, and is then redirected to a previous checkout step upon completion.

Below, you can see Walmart’s checkout flow in thumbnails (click image for larger view). Notice that it’s non-linear because the “Preferred shipping address” sub-step directs the user to a previous step:

Non-linear in Fundamental Guidelines Of E-Commerce Checkout Design Continue reading

Jul 29

Freebie: Professional E-Commerce Icons Set (20 Icons)

Today, we are glad to release a set of 20 high quality E-commerce Icons in 64×64px, available in .png-format. This set was designed by Web Icons Set with the purpose to be used in e-commerce websites and has been exclusively released for Smashing Magazine and its readers. The set includes icons such as Empty Basket, Full Basket, Credit Cards, Delivery, Secure Payment, Checklist, Gifts, Shop Open, Shop Closed, Contact, Wallet and others.

Professional-ecommerce-icons in Freebie: Professional E-Commerce Icons Set (20 Icons)

Download the Icon Set for Free! Continue reading

Jul 15

Picking A Mobile Support Strategy For Your Website

The number of people browsing the Web from a mobile device has more than tripled since 2009, and it is sure to continue growing, with browser platforms such as iOS and Android offering mobile browser support that is almost identical to what we have come to expect from a desktop experience. As the mobile consumer market continues to grow, so will the aspirations of individuals and companies who look to embrace what the mobile Web has to offer.

With this in mind, many website owners have begun to develop a strategy for providing information and services to their mobile visitors. However, mobile strategies can vary massively from website to website, depending on what the company wants to offer visitors. For example, eBay’s strategy will be very different from an individual’s strategy for a portfolio website, which might simply be to improve readability for those viewing on a mobile device.

Pyramid in Picking A Mobile Support Strategy For Your Website Continue reading

Jul 08

Best Practices For Designing Websites For Kids

Designing websites and related media for kids presents plenty of opportunities for Web designers. Openings are available at many businesses and schools, as well as through parents and kids themselves, giving designers many ways to find work on electronic and print projects that appeal to kids. The types of work range from interface designs for video games to websites for birthday parties.

There was a time when kids’ websites were brash and busy, packed with colors and cartoon typography. Fortunately, the scale of the children’s market across most product ranges has resulted in rapid innovation in recent years. Most websites aimed at children (or children and adults) now follow principles that take some account of kids’ perspectives on Web design.

Dna-kids-homepage in Best Practices For Designing Websites For Kids Continue reading

Jun 24

Organizing Website Navigation Structure

Perhaps the most difficult part about navigation on the Web is organizing and designing it. After all, coding it can be relatively easy. In this first section, we’ll go over some methods and best practices for organizing navigation, which can lead to a more intuitive user experience and higher conversion rates.

Primary vs. Secondary

Most websites, especially those with a lot of content or functionality, need navigation menus. But as a website grows in complexity, guiding users to that content and functionality shouldn’t be the job of any one menu. All of that content just doesn’t always fit in one large menu, no matter how organized it may be. While many websites need more than two, all websites have at least two main menus: primary and secondary.

Primarysecondary in Planning And Implementing Website Navigation Continue reading

Jun 24

Following A Web Design Process

Almost every Web designer can attest that much of their work is repetitive. We find ourselves completing the same tasks, even if slightly modified, over and over for every Web project. Following a detailed website design and development process can speed up your work and help your client understand your role in the project. This article tries to show how developing a process for Web design can organize a developer’s thoughts, speed up a project’s timeline and prepare a freelance business for growth.

First of all, what exactly is a ‘process’? A Web development process is a documented outline of the steps needed to be taken from start to finish in order to complete a typical Web design project. It divides and categorizes the work and then breaks these high-level sections into tasks and resources that can be used as a road map for each project.

A Typical Process

Here is a standard process that was put together using examples from around the Web as well as my own experience. (Note: Please see the resource links at the end of each phase.)

1. Planning

The planning stage is arguably the most important, because what’s decided and mapped here sets the stage for the entire project. This is also the stage that requires client interaction and the accompanying attention to detail.

  • Requirements analysis
    This includes client goals, target audience, detailed feature requests and as much relevant information as you can possibly gather. Even if the client has carefully planned his or her website, don’t be afraid to offer useful suggestions from your experience.
  • Project charter
    The project charter (or equivalent document) sums up the information that has been gathered and agreed upon in the previous point. These documents are typically concise and not overly technical, and they serve as a reference throughout the project. Continue reading