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

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

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
Jun 02

The boundaries of pretty design

We all love a well-designed webpage. The days of ugly, drab listings are over. It’s all cool now.

Well, that thought struck me when I saw this UK Government site addressing the issues of student loans.

http://yourfuture.direct.gov.uk/

Initially, I might have cheered this swanky design for a government website. But what bothered me later, is how the design may not at all be in tune with the message, with the subject matter.

Not to go into politics too much, but from what I gather, student loans in the UK have not been very popular. A new law was passed that makes costs and pay-backs heftier for the students, and protests (and even riots) were all over the news. Continue reading

May 26

A picture tells a better story than your site

onkalo

A common theme that has been discussed on this site over the past couple of weeks is how design can tell a story and yet so often websites don’t do a good job of conveying that. I try to do a decent job of showcasing designs here that are more than a pretty design, but it is still hard to tell a great story when you have other stakeholders involved. Continue reading

May 20

55 Inspiring and Clever Online Portfolios

If you’re a designer/creative, you probably already know that having an online portfolio is very important. Not only do you need to have something to show your potential clients, but these days it’s important to be present online for many reasons. If you leave the address of your portfolio when you’re communicating in social media, through blog comments, contests and so on, you’ll see that you can even get work from that alone.

Inspiring and Clever Portfolios

A portfolio can make or break you. It’s important to show your best work, your variety and stand out. In this showcase we’ve put together a collection of 55 portfolios we’ve found online that we think stand out as clever, creative and inspiring. We hope these can inspire you when you’re making your own portfolio, when creating web designs and in other projects. We find these pleasant to look at and invite the visitors to want to learn more about the people behind them.

Marie Bocquet
Marie Bocquet Continue reading

May 20

Web Analytics 101: Definitions: Goals, Metrics, KPIs, Dimensions, Targets

clusterIt is surprising how often these “simple” things come up.

“What is the difference between a metric and a key performance indicator (KPI)?”

“What is a dimension in analytics?”

“What is segmentation?”

“Are goals metrics?”

And many more.

There seems to be genuine confusion about the simplest, most foundational, parts of web metrics / analytics. So in this short post let’s try and see if we can fix this really basic problem.

Definitions and standard perspectives on these terms will be covered in this post:

  1. Business Objectives
  2. Goals
  3. Metrics
  4. Key Performance Indicators
  5. Targets
  6. Dimensions
  7. Segments Continue reading
May 20

Optimizing Emotional Engagement In Web Design Through Metrics

Think about what keeps you coming back to your favorite store, your favorite person or even your favorite website. It’s not just a mindless buy-go, hug-go or click-go relationship. It is a complicated, emotional connection. It is what makes relationships with people and brands intoxicating. User engagement must have an equally complex emotional connection. It must affect the user in mind, body and spirit. Anything less is a 1990s brochure website.

You can create strong storytelling strategies based on user personalities and segmentation. However, it seems almost impossible to measure those efforts, let alone know how to optimize them, without access to a neuroscience laboratory. In fact, emotional engagement can be optimized, and quite effectively, using something already at your disposal: performance metrics.

Emotional-Behavioral Response Relationship

Let’s start with the basics: an emotion is a psychophysiological response in your body to a stimulus. It’s an internal process that in turn triggers an external behavioral response. Behavioral responses help you decipher the emotional responses of others. Things like facial expressions and body language give you clues to whether the chef wielding the knife is angry and going to attack you or happy and going to make you dinner.

Stimuluschart in Optimizing Emotional Engagement In Web Design Through Metrics Continue reading

May 13

50 Free and Exclusive Twitter Icons

Today we bring you a set of 50 free and exclusive Twitter icons that you can use for your websites.

The icons are provided in both raster and vector formats: The transparent PNG versions are 256×256, and we have also included Illustrator files so that you can resize the icons as needed.

The icons are completely free for personal and commercial use and they’re being released exclusively to all our readers.

If you’d like to share these icons, please refer your friends to this page so that they can download their copy from here.

Below you’ll find a full preview of all icons included in this set. The download link appears at the bottom. Enjoy! Continue reading