Smashing Magazine ~ we smash you with the information that will make your life easier. really.
Smashing Magazine we smash you with the information that will make your life easier. really.

  • Useful Glossaries For Web Designers and Developers

    By Daved Brosche, May 29th, 2009 in Developer's Toolbox | 64 Comments

    In a day in age where there are just as many freelancers as there are university educated designers, developers, and all around web gurus, it is amazing to me how much many of us don’t know or have forgot about our trade. As a self-taught designer, I will admit to you upfront that there is a lot I don’t know when it comes to official jargon or certain aspects of things like typography and graphic design. It is these reasons that I call upon glossaries from time to time.

    glossary

    But glossaries aren’t just for brushing up on old terms or for calling upon while you learn new things. They can also make a great reference point for your customers. I am sure we have all had clients who thought they knew what they were talking about when it came to SEO or web design. When you try to explain to these clients that they don’t know what they are talking about, the end result can sometimes turn ugly or at least bring on an unwanted headache. In these situations it is handy to have a glossary at hand to point your clients to. This way they can see that they were mistaken and you get the satisfaction of your own personal “I told you so.”

    Last week we presented Web Design Industry Jargon: Glossary and Resources, a general guide to industry terms that should get you well on your way to understanding what web designers are talking about. In this post we go into detail in each single area of web design such as typography, usability, marketing, Photoshop, wordpress, graphic design, CSS, XHTML, DOM, JavaScript, print design, SEO, social media, software development, Twitter and further areas.

    Read more...

  • 12 Tips For Designing an Excellent Checkout Process

    By Dmitry Fadeyev, May 28th, 2009 in How-To | 76 Comments

    Shopping online can be a great experience. You don't have to leave the comfort of your home and you can quickly compare and read about all the competing products in order to pick the best one for you. But it can also be a little frustrating if the process isn't designed correctly.

    Screenshot

    Looking around for that checkout link, having to fill out registration forms and then being told the product is out of stock isn't going to make your day. Spend a little bit of time fine tuning your checkout process and polishing off the user experience and you'll be rewarded with happier customers and more sales. Here are 12 useful tips to help you do just that.

    Read more...

  • 8 Layout Solutions To Improve Your Designs

    By Matt Cronin, May 19th, 2009 in How-To | 136 Comments

    The organization of content is probably one of the most important and influential aspects of any good web design. Organizing information into a well-built layout is the basis of a website, and should always come before styling concerns. Without a good layout, the website doesn't seem to flow correctly, and nothing connects the way it should.

    Screenshot

    In this article, we'll discuss 8 useful layout solutions and techniques that will help you create a clean and organized content layout. The 8 techniques include sliders, tabs, progressive layouts, structured grids, modal windows, rollover elements, accordions and mega drop-down-menus.

    You may also be interested in the following related posts:

    Read more...

  • Optimizing Conversion Rates: It’s All About Usability

    By Frank Puscher, May 15th, 2009 in How-To | 56 Comments

    In eCommerce usability improvements usually have a huge impact on conversion rates. However, usability doesn't only mean better visual guide or better site hierarchy. It also means a better communication with potential customers using a professional, trustworthy design, delivering the right information at the right time and communicating with users instead of throwing ad-slogans at them.

    Scribbles

    In this article you'll learn what to consider when preparing a perfect landing page for your product, how to focus user's attention on the most important parts of your sites and also how you can use videos and user ratings to improve your conversion rates.

    Read more...

  • 15 Essential Checks Before Launching Your Website

    By Lee Munroe, April 7th, 2009 in How-To | 241 Comments

    Your website is designed, the CMS works, content has been added and the client is happy. It’s time to take the website live. Or is it? When launching a website, you can often forget a number of things in your eagerness to make it live, so it’s useful to have a checklist to look through as you make your final touches and before you announce your website to the world.

    Javascript

    This article reviews some important and necessary checks that web-sites should be checked against before the official launch — little details are often forgotten or ignored, but – if done in time – may sum up to an overall greater user experience and avoid unnecessary costs after the official site release.

    A favicon brands the tab or window in which your website is open in the user’s browser. It is also saved with the bookmark so that users can easily identify pages from your website. Some browsers pick up the favicon if you save it in your root directory as favicon.ico, but to be sure it’s picked up all the time, include the following in your head.

    Read more...

  • Design To Sell: 8 Useful Tips To Help Your Website Convert

    By Dmitry Fadeyev, April 6th, 2009 in How-To | 170 Comments

    As we see more and more businesses move their services online, and even more that begin their life on the Web, a greater need arises for websites that are designed and built to sell. A great-looking website may achieve the goal of shaping and delivering a strong brand, but its good looks alone aren't enough to sell the products or services on offer. For that, you need to introduce the element of marketing.

    LegacyLocker

    Research shows that objects and images you see around you can prime you for certain behaviors. For example, a study on children showed that after being shown a Santa Claus cap, they were more likely to share candy with others. The cap embodied the concept of sharing and giving in their minds, and exposure to it primed them for regarding sharing more positively. The same study also exposed kids to a “Toys ‘R’ Us” logo, which had the opposite effect of the Santa Claus cap, making them less likely to share their candy.

    You may want to take a look at the following related articles:

    Read more...

  • Redesigning Craigslist With Focus On Usability

    By Steven Snell, March 11th, 2009 in How-To | 200 Comments

    Craigslist is obviously one of the most popular websites in the world, and each month it serves millions of users who post and view classified ads on the website. At the time this article was written, Craigslist was ranked as the 28th most-visited English-language website in the world by Alexa. Despite the fact that Craigslist receives such a huge amount of traffic each month, it is also criticized for its design, which seems to be at least 10 years out-of-date.

    Craigslist Homepage

    This very basic design has also become a huge part of Craigslist's branding, and it helps make the website memorable and instantly recognizable. As a result, the company has benefited in some ways from a design that many people consider to be very subpar. Over the years, as various design trends have come and gone, Craigslist has bucked the trends and stubbornly maintained it's bare-boned approach.

    However, despite the fact that Craigslist has been able to benefit in some ways from its ultra-basic design, there are plenty of reasons to consider making some changes. A simple approach to design and layout that cuts excess and eliminates anything that is less than critical is typically assumed to improve usability.

    Read more...

  • 9 Common Usability Mistakes In Web Design

    By Dmitry Fadeyev, February 18th, 2009 in How-To | 223 Comments

    By now, all good designers and developers realize the importance of usability for their work. Usable websites offer great user experiences, and great user experiences lead to happy customers. Delight and satisfy your visitors, rather than frustrate and annoy them, with smart design decisions. Here are 9 usability problems that websites commonly face, and some recommended solutions for each of them.

    Basecamp

    Hyperlinks are designed to be clicked, so to make them usable, it makes sense to ensure that they’re easy to click. Why would we want a larger clickable area? Simple. Because our hand movement with the mouse isn’t very precise. A large clickable area makes it easier to hover the mouse cursor over the link. To ensure we get a large clickable area, we could either make the whole link bigger or increase the padding around the link using the CSS “padding” property.

    You may also be interested in the following related posts:

    Read more...

  • Whitehouse.gov Redesign: The Change Has Come

    By Katie Kelly, February 1st, 2009 in Design Showcase | 111 Comments

    The US government is a brand, one often overlooked in favor of the obvious companies and celebrities. The United States of America is arguably a brand in dire need of refreshing. While this is certainly a larger task than simply restyling a logo or adding a smattering of Web 2.0 cliches to its Web and print material, a significant step has been taken in the full overhaul of the White House website.

    White House Website Showing New Branding

    Millions across the world focused on the United States' inauguration of Barack Obama, waiting for the change they were promised in the election campaign. While only time will tell if that happens, a dramatic change can be seen on the new White House website.

    In this installment, we'll take a tour of the updated Whitehouse website, as well as quickly compare it to the old website under the George W. Bush administration. The many changes within the government are reflected in the website's new direction: the design, the content and the technology.

    Read more...

  • 10 Useful Web Application Interface Techniques

    By Dmitry Fadeyev, January 12th, 2009 in How-To | 171 Comments

    More and more applications these days are migrating to the Web. Without platform constraints or installation requirements, the software-as-a-service model looks very attractive. Web application interface design is, at its core, Web design; however, its focus is mainly on function. To compete with desktop applications, Web apps must offer simple, intuitive and responsive user interfaces that let their users get things done with less effort and time.

    Kontain search

    In the past we didn't cover web applications the way we should and now it's time to take a closer look at some useful techniques and design solutions that make web-applications more user-friendly and more beautiful. This article presents the first part of our extensive research on design patterns and useful design solutions in modern web applications. Below you'll find a collection of 10 useful interface design techniques and best practices used in many successful web-applications.

    Please feel free to suggest further ideas, approaches and coding solutions in the comments to this post. The second part of our research will be published soon: stay tuned via RSS and Twitter.

    You may want to take a look at the following related articles:

    Read more...

  • A Short Story About “Back To Top” Links

    By Smashing Editorial, November 27th, 2008 in Design Showcase | 65 Comments

    Often it is the close attention to small details that makes a design outstanding. During the development of a website, designers tend to quickly forget about small details and focus on major design elements, such as navigation, typography and layout. If done properly, the result is usually a solid, impressive and highly professional design that communicates information. However, it is not memorable. The reason is that such designs often do not have a memorable voice: they may look visually appealing, but they don't provide a vivid anchor for users to remember a website after leaving it.

    Screenshot - Top Link

    In this post, we showcase the design of "Back to top" links, a forgotten and rarely used link that helps users jump to the top of a given page. A visitor can achieve this effect by pressing the "Home" button on his or her keyboard; however, not every user is aware of that shortcut, and most probably use the vertical scroll bar in the browser for that purpose. As designers, we can help our users out by adding a stand-alone "top" link to our designs.

    Read more...

  • Strategic Design: 6 Steps For Building Successful Websites

    By Dmitry Fadeyev, November 5th, 2008 in How-To | 128 Comments

    Web design isn’t art. It involves a whole collection of different skills — from copywriting and typography to layout and art — all fused together to create an interface that not only features a pleasant aesthetic but that communicates function and facilitates easy access to its content.

    The jQuery website redesign

    But in order to combine all these elements of Web design together and achieve successful results you must have a clear direction, a direction that will guide each and every aspect of your design towards common goals. You must think strategically.

    Read more...

  • Top 10 Usability Highs Of Mac OS

    By Smashing Editorial, August 12th, 2008 in Events | 258 Comments

    Although I've been a Windows power user for years, the transition to Mac couldn't have been easier and more pleasant. I don't want to turn this article into some endless rambling about how great Mac is, but as the user of both systems I can speak from my own experience quite objectively. Let's take a look at some of the spots where Apple really has done it better in terms of user interface and usability.

    Top 10 Usability High Of Mac OS

    Consistency. The whole OS and almost every application looks and feels the same, as if a single team developed the whole thing, thanks to Apple HI Guidelines. Official guidelines for user interface design made it possible for users to actually use most Mac-applications in a very same way, creating a seamless and comfortable experience in the end. Users are able to anticipate how system behaves and what to expect from its applications. In fact, consistency dramatically improves learnability and usability of interacting with the system.

    Read more...

  • Web Form Design Patterns: Sign-Up Forms

    By Smashing Editorial, July 4th, 2008 in How-To | 204 Comments

    If you want to maximize the revenue of your service you need to maximize completion rates of your web forms. Unless you have some revolutionary ideas to impress your visitors at first glance, it is not enough to simply enable users to sign up on your site. To make it possible for the service to reach a maximal exposure we, designers, need to provide users with a good user experience. We need to invite them, describe to them how the service works, explain to them why they should fill in the form and suggests the benefits they'll get in return. And, of course, we should also make it extremely easy for them to participate.

    However, designing effective web forms isn't easy. And it has one simple reason: nobody likes to fill in forms — neither offline nor online. Therefore, as designers, we need to figure out sound design decisions to make the form completion easy, intuitive and painless.

    Web Form Design Patterns

    But how exactly can we figure out these decisions? Where should the link to the form be placed in the layout? How should we design it? How should we highlight the labels and how should we align them? How do web form design patterns look like in modern web-sites? These were exactly the questions we've asked ourselves. And to get the answers we've conducted a survey.

    Below we present findings of our survey of current web form design patterns — the results of an analysis of 100 popular web-sites where web-forms (should) matter. We have decided to start with sign-up forms first. We present the first part of our findings below; the second part of the survey results will be published next week.

    Update: the second part of the survey results is now also published: Web Form Design Patterns: Sign-Up Forms Part 2.

    Read more...

  • Should Links Open In New Windows?

    By Smashing Editorial, July 1st, 2008 in How-To | 278 Comments

    No, they shouldn't. At first glance the decision to open links in new windows or not depends on the given site and the preferences of its visitors. Visitors of the sites with heavy linking are more willing to have links opened in new windows than open dozens of links in new windows manually. Visitors of less-heavy-linkage-sites are more likely to open some specific link in new window to remain on the site and continue to browse through it afterwards. However, this is not true.

    Open links in new tabs

    Users also don't like to deal with dozens of opened tabs and some visitors tend to quickly become angry with the disabled back-button. Furthermore, some visitors may not even realize that a new window was opened and hit the back-button mercilessly — without any result. That's not user-friendly and that's not a good user experience we, web designers, strive for.

    Read more...

  • Five More Principles Of Effective Web Design

    By Smashing Editorial, April 24th, 2008 in How-To | 109 Comments

    Web design has significantly improved over the last years. It's more user-friendly and more appealing today — and there is a good reason behind it: over the years we've found out that design with focus on usability and user experience is just more effective. Modern cut-edge design isn't filled with loud happy talk and blinking advertisements. We've learnt to initiate the dialogue with visitors, involve them into discussions and gain their trust by addressing their needs and speaking with them honestly and directly.

    Signalfeuer

    Few weeks ago we've presented 10 Principles Of Effective Web Design — a comprehensive article about effective web design and provided you with insights about how users actually think as well as with some examples of how effective designs can be achieved.

    This article highlights 5 further principles, heuristics and approaches for effective web design — approaches which, used properly, can lead to more sophisticated design decisions and simplify the process of perceiving presented information.

    Please notice that you might be interested in the following usability-related articles:

    • 10 Usability Nightmares showcases usability nightmares you should avoid when designing functional and usable web-sites,
    • 30 Usability Issues explains important usability issues, terms, rules and principles which are usually forgotten, ignored or misunderstood.

    Read more...

  • Mac OS X Leopard: Designer’s Guide to Icons

    By Smashing Editorial, April 4th, 2008 in How-To | 57 Comments

    In 2000 Apple released the visual theme Aqua, a stunning leap forward in graphical user interface design. At the same time Apple published the Human Interface Guidelines (HIG), a tool for developers and designers that gives a detailed breakdown of the design philosophy behind Aqua. Apple recently updated their Human Interface Guidelines (HIG) to include the way the visual theme Aqua has evolved in Apple's latest operating system, OS X 10.5 Leopard. This is the first update since 2006.

    Leopard HGI Guidelines

    Let's take a look at how this affects icon designers.

    To get really beautiful icons, Apple recommends that you let a professional designer create your icons. Despite all the eye candy and realism that is possible to apply to icons, less is more. Strive for a simple solution using one easily recognisable object. The basic shape or silhouette of your icon can help users to quickly identify it.

    Read more...

  • Shopping Carts Gallery: Examples and Good Practices

    By Smashing Editorial, February 7th, 2008 in Design Showcase | 125 Comments

    Imagine that you are designing an online-store. Since stakeholders are only interested in the number of sells, the success of your work directly depends on how well you manage to drive users to the "Checkout"-button. In this case you might want to consider some design approaches which will set you apart from your competitors. After all, the probability that they've done it wrongly is extremely high.

    One of the simplest examples of flawed design decisions is the incorrect use of the shopping cart icon — a traditional icon which stands for the virtual holding place for any products of the store. Used properly, this little yet powerful element can help users to buy a product as quickly and painless as possible. As such, it is essential for the purchasing procedure and therefore deserves to be considered carefully during the design process.

    Screenshot Shopping Cart

    Screenshot Shopping Cart

    Screenshot Shopping Cart

    Screenshot Shopping Cart

    In this post we present attractive, creative and user-friendly shopping carts, bags, trolleys, buckets and baskets — any kind of carts as they are used in the online-stores. Besides, we also cover related creative ideas, design approaches and usability guidelines.

    Read more...

  • 10 Principles Of Effective Web Design

    By Smashing Editorial, January 31st, 2008 in How-To | 486 Comments

    Usability and the utility, not the visual design, determine the success or failure of a web-site. Since the visitor of the page is the only person who clicks the mouse and therefore decides everything, user-centric design has established as a standard approach for successful and profit-oriented web design. After all, if users can't use a feature, it might as well not exist.

    We aren't going to discuss the implementation details (e.g. where the search box should be placed) as it has already been done in a number of articles; instead we focus on the main principles, heuristics and approaches for effective web design — approaches which, used properly, can lead to more sophisticated design decisions and simplify the process of perceiving presented information.

    Screenshot

    Please notice that

    In order to use the principles properly we first need to understand how users interact with web-sites, how they think and what are the basic patterns of users' behavior.

    Read more...

  • Usability and Interface Design Books

    By Smashing Editorial, January 24th, 2008 in How-To | 90 Comments

    Usability and interaction design are fields that are becoming important for every website design. They consider the interactions between the user and every system, nowadays most commonly applied to websites. A product has more chances to be successful if it’s design makes emphasis on usability. Making a website easy to use and easy to understand has direct economical impact as, for example, it guides the users across the sites, helps user to successfully sign up for a service or to complete a checkout process.

    About Face 3. The Essentials of Interaction Design

    We have selected excellent books about usability and interaction design, some provide the theory of user interface design, others have a number of precise examples of how the theory can be used in practice. All these books are prestigious, well-known and recommended by experts. They include the origins of user-friendly products, creation of personas, goal-directed design, information on how to conduct usability tests and much more.

    Images are, as always, clickable and lead to the sites which have more information about the books.

    Read more...


Page 1 of 212Next »

Advertisement
 

All Posts

Follow us on Twitter!
Subscribe to our RSS-feed!

Advertisement

Fresh Bookmarks

22 Free Seamless Vector Pattern Resources Perfect For Web Design
A collection of resources and articles related to vector patterns.

10 New PHP Content Management Systems
All based on PHP.

25 Beautiful Logos with Sequential Concept
Sequential logos maybe is a new trend among logo designers.

Designing a blog with HTML5
Much of HTML 5’s feature set involves JavaScript APIs that make it easier to develop interactive web pages.

20+ CSS Data Visualization Techniques
Get inspired.

CSS3 – a big storm is coming
With CSS3 media queries and multi-column layouts it will be a whole new ballgame.

Woodgrain: A Free Social Media Icon Set
With 18 social networks represented alongside astandard RSS icon in PNG format,

Webdesign: Five Minute Upgrade
Making Your Design Pop.

45 Stylish Typographical Desktop Wallpapers
These beautifully designed wallpapers are not solely about typography.

The Light CMS Trend
A new trend in CMSs I’m calling “light” CMSs.

  • 9Rules Logo
  • Quicksprout Logo