Design Treats

• I posted to designmeltdown.com

  Some refreshinglingly nice tourism sites

  http://feedproxy.google.com/~r/designmeltdown/uecD/~3/zQDjlZrcfJE/

  Many thanks to the folks at Noupe.com for putting together a fine collection of city tourism sites. This collection is great if only because it proves that even a niche as seemingly mundane as this can be brought to life with quality web work. http://www.noupe.com/showcases/showcase-of-tourism-website-designs.html

  

  • Tags:
  • Travel & Tourism

  March 1 2010, 6:00am | Comments »

• I posted to smashingmagazine.com

  The Future Of CSS Typography

  http://www.smashingmagazine.com/2010/03/01/css-and-the-future-of-text/

    There has been an increasing and sincere interest in typography on the web over the last few years. Most websites rely on text to convey their messages, so it’s not a surprise that text is treated with utmost care. In this article, we’ll look at some useful techniques and clever effects that use the power of style sheets and some features of the upcoming CSS Text Level 3 specification, which should give Web designers finer control over text.Keep in mind that these new properties and techniques are either new or still in the works, and some of the most popular browsers do not yet support them. But we feel it’s important that you, as an informed and curious Web designer, know what’s around the corner and be able to experiment in your projects.[Offtopic: By the way, did you know that Smashing Magazine has a mobile version? Try it out if you have an iPhone, Blackberry or another capable device.]A Glance At The BasicsOne of the most common CSS-related mistakes made by budding Web designers is creating inflexible style sheets that have too many classes and IDs and that are difficult to maintain.Let’s say you want to change the color of the headings in your posts, keeping the other headings on your website in the default color. Rather than add the class big-red to each heading, the sensible approach would be to take advantage of the DIV class that wraps your posts (probably post) and create a selector that targets the heading you wish to modify, like so:.post h2 { font-weight: bold; color: red; }This is just a quick reminder that there is no need to add classes to everything you want to style with CSS, especially text. Think simple.The Font PropertyInstead of specifying each property separately, you can do it all in one go using the font shorthand property. The order of the properties should be as follows: font-style, font-variant, font-weight, font-size, line-height, font-family.When using the font shorthand, any values not specified will be replaced by their parent value. For example, if you define only 12px Helvetica, Arial, sans-serif, then the values for font-style, font-variant and font-weight will be set as normal.The font property can also be used to specify system fonts: caption, icon, menu, message-box, small-caption, status-bar. These values will be based on the system in use, and so will vary according to the user’s preferences.Other Font PropertiesA few font-related properties and values are not as commonly used. For example, instead of using text-transform to turn your text into all caps, you could use font-variant: small-caps for a more elegant effect.You could also be very specific about the weight of your fonts, instead of using the common regular and bold properties. CSS allows you to specify font weight with values from 100 to 900 (i.e. 100, 200, 300, etc.). If you decide to use these, know that the 400 value represents the normal weight, while 700 represents bold. If a font isn’t given a weight, it will default to its parent weight.Another useful property, sadly supported only in Firefox for now, is font-size-adjust, which allows you to specify an aspect ratio for when a fall-back font is called. This way, if the substitute font is smaller than the preferred one, the text’s x-height will be preserved. A good explanation of how font-size-adjust works can be found on the W3C website.Dealing With White Space, Line Breaks And Text WrappingSeveral CSS properties deal with these issues, but the specs are still in the works (at the “Working Draft” stage).White SpaceThe white-space property lets you specify a combination of properties for which it serves as a shorthand: white-space-collapsing and text-wrap. Here’s a breakdown of what each property stands for:normal white-space-collapsing: collapse/text-wrap: normalpre white-space-collapsing: preserve/text-wrap: nonenowrap white-space-collapsing: collapse/text-wrap: nonepre-wrap white-space-collapsing: preserve/text-wrap: normalpre-line white-space-collapsing: preserve-breaks/text-wrap: normalThis property can be useful if you want to, for example, display snippets of code on your website and preserve line breaks and spaces. Setting the container to white-space: pre will preserve the formatting. WordPress uses white-space: nowrap on its dashboard so that the numbers indicating posts and comments don’t wrap if the table cell is too small.Word WrapOne property that is already well used is word-wrap. It supports one of two values: normal and break-word. If you set word-wrap to break-word and a word is so long that it would overflow the container, it is broken at a random point so that it wraps within the container. The International Gorilla Conservation Programme website uses word-wrap for its commenters’ names.In theory, word-wrap: break-word should only be allowed when text-wrap is set to either normal or suppress (which suppresses line breaking). But in practice and for now, it works even when text-wrap is set to something else.Bear in mind that according to the specification, the break-strict value for the word-break property is at risk of being dropped.Word And Letter SpacingTwo other properties that are often used are word-spacing and letter-spacing. You can use them to control—you guessed it—the spacing between words and letters, respectively. Both properties support three different values that represent optimal, minimum and maximum spacing. Show & Tell uses letter-spacing on its navigation links.For word-spacing, setting only one value corresponds to the optimal spacing (and the other two are set to normal). When setting two values, the first one corresponds to the optimal and minimum spacing, and the second to the maximum. Finally, if you set all three values, they correspond to all three mentioned above. With no justification, optimal spacing is used.It works slightly different for letter-spacing. One value only corresponds to all three values. The others work as they do for word-spacing.The specifications contain a few requests for more information and examples on how white-space processing will work and how it can be used and be useful for languages such as Japanese, Chinese, Thai, Korean, etc. So, if you’d like help out, why not give it a read (it’s not that long), and see how you can contribute?Indentation And Hanging PunctuationText indentation and hanging punctuation are two typographical features that are often forgotten on the Web. This is probably due to one of three factors:Setting them is not as straightforward as it could be;There has been a conscious decision not to apply them;Designers simply aren’t aware of them or don’t know how to properly use them. The Sushi & Robots website has hanging punctuation on bulleted lists.Mark Boulton has a good brief explanation of hanging punctuation in his “Five Simple Steps to Better Typography” series, and Richard Rutter mentions indentation on his website, The Elements of Typographic Style Applied to the Web. These are two very good reads for any Web designer.So, the theory is that you should apply a small indentation to every text paragraph after the first one. You can easily do this with an adjacent sibling combinator:p + p { text-indent: 1em; }This selector targets every paragraph (i.e. p) that follows another paragraph; so the first paragraph is not targeted.Another typographic rule of thumb is that bulleted lists and quotes should be “hung.” This is so that the flow of the text is not disrupted by these visual distractions.The CSS Text Level 3 specification has an (incomplete) reference to an upcoming hanging-punctuation property.For now, though, you can use the text-indent property with negative margins to achieve the desired effect:blockquote { text-indent: -0.2em; }For bulleted lists, just make sure that the position of the bullet is set to outside and that the container div is not set to overflow: hidden; otherwise, the bullets will not be visible.Web Fonts And Font Decorationfont-faceMuch talk has been made on the Web about font-face and whether it’s a good thing—especially after the appearance of Typekit (and the still-in-private-beta Fontdeck). The debate is mainly about how much visual clutter this could bring to Web designs. Some people (the argument goes) aren’t sufficiently font-savvy to be able to pull off a design in which they are free to use basically any font they wish. Wouldn’t our sensitive designer eyes be safer if only tested, approved Web-safe fonts were used?On whatever side of the argument you fall, the truth is that the examples of websites that use font-face beautifully are numerous. Jonathan Snook’s recently redesigned website uses the font-face property.The font-face property is fairly straightforward to grasp and use. Upload the font you want to use to your website (make sure the licence permits it), give it a name and set the location of the file.In its basic form, this is what the font-face property looks like:@font-face { font-family: Museo Sans; src: local(“Museo Sans”), url(MuseoSans.ttf) format(“opentype”); }The two required font-face descriptors are font-family and src. In the first, you indicate how the font will be referenced throughout your CSS file. So, if you want to use the font for h2 headings, you could have:h2 { font-family: Museo Sans, sans-serif; }With the second property (src), we are doing two things:If the font is already installed on the user’s system, then the CSS uses the local copy instead of downloading the specified font. We could have skipped this step, but using the local copy saves on bandwidth.If no local copy is available, then the CSS downloads the file linked to in the URI. We also indicate the format of the font, but we could have skipped that step, too.For this property to work in IE, we would also need the EOT version of the font. Some font shops offer multiple font formats, including EOT, but in many cases we will need to convert the TrueType font using Microsoft’s own WEFT, or another tool such as ttf2eot.Some good resources for finding great fonts that can be used with font-face are Font Squirrel and Fontspring.text-shadowThe text-shadow property allows you to add a shadow to text easily and purely via CSS. The shadow is applied to both the text and text decoration if it is present. Also, if the text has text-outline applied to it, then the shadow is created from the outline rather than from the text. Neutron Creations website uses text-shadow.With this property you can set the horizontal and vertical position of the shadow (relative to the text), the color of the shadow and the blur radius. Here is a complete text-shadow property:p { text-shadow: #000000 1px 1px 1px; }Both the color and blur radius (the last value) are optional. You could also use an RGBa color for the shadow, making it transparent:p { text-shadow: rgba(0, 0, 0, 0.5) 1px 1px 1px; }Here we define the R, G and B values of the color, plus an additional alpha transparency value (hence the a, whose value here is 0.5).The specification still has some open questions about text-shadow, like how should the browser behave when the shadow of an element overlaps the text of an adjoining element? Also, be aware that multiple text shadows and the text-outline property may be dropped from the specification.New Text-Decoration PropertiesOne problem with the text-underline property is that it gives us little control. The latest draft of the specification, however, suggests new and improved properties that may give us fine-grained control. You can’t use them yet, but we’ll give you a condensed sneak peek at what may come.text-decoration-line Takes the same values as text-decoration: none, underline, overline and line-through.text-decoration-color Specifies the color of the line of the previous property.text-decoration-style Takes the values of solid, double, dotted, dashed and wavetext-decoration The shorthand for the three preceding properties. If you specify a value of only one of none, underline, overline or line-through, then the property will be backwards-compatible with CSS Level 1 and 2. But if you specify all three values, as in text-decoration: red dashed underline, then it is ignored in browsers that don’t support them.text-decoration-skip Specifies whether the text decoration should skip certain types of elements. The proposed values are none, images, spaces, ink and all.text-underline-position With this property, you can control, for example, whether the underline should cross the text’s descenders or not: auto, before-edge, alphabetic and after-edge.Controlling OverflowThe text-overflow property lets you control what is shown when text overflows its container. For example, if you want all of the items in a list of news to have the same height, regardless of the amount of text, you can use CSS to add ellipses (…) to the overflow to indicate more text. This technique is commonly seen in iPhone apps and websites. The New York Times iPhone app uses an ellipsis for overflowing text.This property works in the latest versions of Safari and Opera and in IE6 (where the overflowing element should have a set width, such as 100%) and IE7. To be able to apply the property to an element, the element has to have overflow set to something other than visible and white-space: nowrap. To make it work in Opera, you need to add the vendor-specific property:li { white-space: nowrap; width: 100%; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; }In the Editor’s draft of the specification, you can see that other properties related to text-overflow are being considered, such as text-overflow-mode and text-overflow-ellipsis, for which text-overflow would be the shorthand.Alignment And HyphenationControlling hyphenation online is tricky. Many factors need to be considered when setting automatic hyphenation, such as the fact that different rules apply to different languages. Take Portuguese, in which you can hyphenate a word only at the end of a syllable; for double consonants, the hyphen must be located right in the middle.The specification is still being developed, but the proposed properties are:hyphenate-dictionary;hyphenate-before and hyphenate-after;hyphenate-lines;hyphenate-character. Proposed specification for hyphenation on the W3C website.This is a good example of how the input of interested Web designers is vital. Thinking about and testing these properties before they are finalized has nothing to do with being “edgy” or with showing off. By proposing changes to the specification and illustrating our comments with examples, we are contributing to a better and stronger spec.Another CSS3 property that hasn’t been implemented in most browsers (only IE supports it, and only partially) is text-align-last. If your text is set to justify, you can define how to align the last line of a paragraph or the line right before a forced break. This property takes the following values: start, end, left, right, center and justify.Unicode Range And LanguageUnicode RangeThe unicode-range property lets you define the range of Unicode characters supported by a given font, rather than providing the complete range. This can be useful to restrict support for a wide variety of languages or mathematical symbols, and thus reduce bandwidth usage.Imagine that you want to include some Japanese characters on your page. Using the font-face rule, you can have multiple declarations for the same font-family, each providing a different font file to download and a different Unicode range (or even overlapping ranges). The browser should only download the ranges needed to render that specific page.To see examples of how unicode-range could work, head over to the spec’s draft page.LanguageUse the :lang pseudo-class to create language-sensitive typography. So, you could have one background color for text set in French (fr) and another for text set in German (de):div:lang(fr) { background-color: blue; }

  div:lang(de) { background-color: yellow; }You might be wondering why we couldn’t simply use an attribute selector and have something like the following:div[lang|=fr] { background-color: blue; }Here, we are targeting all div elements whose lang attribute is or starts with fr, followed by an -. But if we had elements inside that div, they wouldn’t be targeted by this selector because their lang attribute isn’t specified. By using the :lang pseudo-class, the lang attribute is inherited to all children of the elements (the whole body element could even be holding the attribute).The good news is that all latest versions of the major browsers support this pseudo-class.ConclusionIn surveying the examples in this article, you may be wondering why to bother with most of them.True, the specification is far from being approved, and it could change over time, but now is the time for experimentation and to contribute to the final spec.Try out these new properties, and think of how they could be improved or how you could implement them to make your life easier in future. Having examples of implementations is important to the process of adding a property to the spec and, moreover, of implementing it in browsers.You can start with the simple step of subscribing to the CSS Working Group blog to keep up to date on the latest developments.So, do your bit to improve the lot of future generations of Web designers… and your own!Resources and Interesting LinksCSS3 Text (Editor’s Draft), W3CHyphenation, W3CCSS3 Fonts, W3CThe Elements of Typographic Style Applied to the WebFive Simple Steps to Better TypographyType Experiments with HTMLStyling a Poem With Advanced CSS SelectorsCSS3: Examples and Best Practices(al)© Inayaili de Leon for Smashing Magazine, 2010. | Permalink | 3 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: CSS

  

  • Tags:
  • coding
  • CSS

  March 1 2010, 2:20am | Comments »

• I posted to smashingmagazine.com

  Desktop Wallpaper Calendar: March 2010

  http://feedproxy.google.com/~r/SmashingMagazine/~3/VTnDO5-K0bU/

    Desktop wallpapers can serve as an excellent source of inspiration. However, if you use some specific wallpaper for a long period of time, it becomes harder to draw inspiration out of it. That’s why we have decided to supply you with smashing wallpapers over 12 months. And to make them a little bit more distinctive from the usual crowd, we’ve decided to embed calendars for the upcoming month. So if you need to look up some date, isn’t it better to show off a nice wallpaper with a nice calendar instead of launching some default time application?This post features 45 free desktop wallpapers, created by designers across the globe. Both versions with a calendar and without a calendar can be downloaded for free.Please notice:all images can be clicked and lead to the preview of the wallpaper;you can feature your work in our magazine by taking part in our desktop wallpaper calendar series. We are regularly looking for creative designers and artists to be featured on Smashing Magazine. Are you one of them?So what wallpapers have we received for March 2010? [By the way: The network tab (on the top of the page) is updated several times a day. It features manually selected articles from the best web design blogs!]Super Mario bros 1985"My 25th anniversary tribute to Super Mario bros." Designed by Davide Vicariotto from Italy.previewwith calendar: 1024×768, 1280×800, 1280×960, 1280×1024, 1440×900, 1600×1200, 1680×1050, 1920×1200without calendar: 1024×768, 1280×800, 1280×960, 1280×1024, 1440×900, 1600×1200, 1680×1050, 1920×1200Haiku on Hanami"And the wind says swish, swish…" Designed by April Joy E. Jasmin from Philippines.previewwith calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200without calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200Butterfly"The bright colours of March." Designed by Ellen Xue from Canada.previewwith calendar: 1024×640, 1280×800, 1440×900, 1680×1050, 1920×1200without calendar: 1024×640, 1280×800, 1440×900, 1680×1050, 1920×1200Spring TimeDesigned by Indeziner from Romania.previewwith calendar: 320×480, 1024×768, 1280×1024, 1440×900, 1600×1200, 1650×1080without calendar: 320×480, 1024×768, 1280×1024, 1440×900, 1600×1200, 1650×1080Sticks and Stones"Was daydreaming and listening to Sticks and Stones by The Pierces over and over againand came up with this idea for the March Calendar." Designed by Kathlyn Marie Salazar from Philippines.previewwith calendar: 1024×640, 1280×800, 1440×900, 1680×1050, 1920×1200, 2560×1600without calendar: 1024×640, 1280×800, 1440×900, 1680×1050Searching for springDesigned by Andrei Verner from Russia.previewwith calendar: 800×600, 1024×768, 1280×800, 1280×960, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1920×1200without calendar: 800×600, 1024×768, 1280×800, 1280×960, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1920×1200Goes in like a lion and out like a lamb"Just an illustration for march :)" Designed by Jennifer Herd from Canada.previewwith calendar: 800×480, 1024×768, 1280×800, 1440×900, 1680×1050, 1920×1200without calendar: 800×480, 1024×768, 1280×800, 1440×900, 1680×1050, 1920×1200Soom"This is a color-work done 100% with Adobe illustrator CS4, its all about messing with gradients, transparency and a lot of blend tool. “Soom” means breath, this represents the breathing of universal time. the time of the stars." Designed by David Fernandes / Random Spirals from Portugal.previewwith calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200without calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200Up"Fun spring wallpaper." Designed by Anca Varsandan from Romania.previewwith calendar: 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1080, 1920×1200without calendar: 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1080, 1920×1200Even Cupcakes Have Bad DaysDesigned by Valerie Morgan from USA.previewwith calendar: 1024×768, 1280×800, 1440×900, 1600×1200, 1680×1050, 1920×1200, 1920×1440, 2560×1600without calendar: 1024×768, 1280×800, 1440×900, 1600×1200, 1680×1050, 1920×1200, 1920×1440, 2560×1600Ghost Stories"Background picture by Esa Wendelin" Designed by Marta Miazek from Poland.previewwith calendar: 640×480, 800×600, 1024×768, 1152×864, 1280×960, 1400×1050, 1600×1200without calendar: 640×480, 800×600, 1024×768, 1152×864, 1280×960, 1400×1050, 1600×1200Gummy MarchDesigned by Monica Corduneanu from Romania.previewwith calendar: 640×480, 800×600, 1024×768, 1152×864, 1280×800, 1280×960, 1280×1024, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1920×1200, 1920×1440, 2560×1600without calendar: 640×480, 800×600, 1024×768, 1152×864, 1280×800, 1280×960, 1280×1024, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1920×1200, 1920×1440, 2560×1600A New Day"It’s the start of a brand new day." Designed by Stephanie Lam from Australia.previewwith calendar: 1024×768, 1280×800, 1280×1024, 1680×1050, 1920×1200without calendar: 1024×768, 1280×800, 1280×1024, 1680×1050, 1920×1200Lucky Shamrocks"Despite the three-leaved clover being synonymous with St. Patrick’s Day, I decided that a four-leaved clover would bring more luck to all the readers. Despite the three-leaved clover being synonymous with St. Patrick’s Day, I decided that a four-leaved clover would bring more luck to all the readers. Cheers!" Designed by Crystal Ng from Malaysia.previewwith calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1900×1200without calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1900×1200Fractal"Inspired by last months article about Mathematics…" Designed by Zhongde Liu from Germany/China.previewwith calendar: 1024×768, 1280×800, 1280×1024, 1680×1050, 1920×1200, 2560×1600without calendar: 1024×768, 1280×800, 1280×1024, 1680×1050, 1920×1200, 2560×1600Telephones"The telephone has had a bit of an impact over the last century on the way we communicate, so I thought a telephone-themed wallpaper would be appropriate for the month of its patent." Designed by Dan Sweet from USA.previewwith calendar: 320×480, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1920×1200without calendar: 320×480, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1920×1200Midnight Sun"The midnight sun sets on the party in the trees." Designed by Chris Alexander (Yipori) from England.previewwith calendar: 800×600, 1024×768, 1152×864, 1280×800, 1280×960, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1920×1200, 1920×1440without calendar: 800×600, 1024×768, 1152×864, 1280×800, 1280×960, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1920×1200, 1920×1440Romanian Tradition MartisorulDesigned by Alexandra Ipate from Romania.previewwith calendar: 800×600, 1024×640, 1280×800, 1280×960, 1400×1050, 1440×900, 1680×1050, 1920×1200without calendar: 800×600, 1024×640, 1280×800, 1280×960, 1400×1050, 1440×900, 1680×1050, 1920×1200Ladybug"If I would be a ladybug…" Designed by Christine Schirbel from Germany.previewwith calendar: 1024×640, 1024×768, 1280×800, 1440×900, 1680×1050without calendar: 1024×640, 1024×768, 1280×800, 1440×900, 1680×1050DaisyDesigned by Pietje Precies from The Netherlands.previewwith calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200without calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200Popephoenix"This what we do. This is how we live. This is how we evolve. All for the sake of art." Designed by Popephoenix from USA.previewwith calendar: 1024×768, 1280×720, 1900×1200without calendar: 1024×768, 1280×720, 1900×1200No Smoking"Millions of people die every year because of Smoking but yet millions of people still smoke. I Designed this wallpaper just to Celebrate the NO SMOKING Day and raise our voices against this habit that Kills." Designed by Vanshika Wadhwani from Bahrain.previewwith calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050without calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050Women as nature"Women have long been associated with nature – metaphorically, as in ‘mother Earth’,for instance.International Womens Day is celebrated as the first spring holiday in the Northern Hemisphere, March is considered as the month which brings spring season with Nature Dressed in Green, to Greet the season of spring." Designed by Neelam Asrani from India.previewwith calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050without calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050Spring is coming"The vision of spring by m-mstudio. Now the nature is awakening!" Designed by m-mstudio from Italy.previewwith calendar: 1024×768, 1280×800, 1400×1050, 1440×900, 1680×1050, 1920×1200LuminanceDesigned by Jordan Scott from Canada.previewwith calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200without calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200Are you doing all you can?"Are you doing all you can to become the person you want to be?" Designed by Valerie Morgan from USA.previewwith calendar: 1024×768, 1280×800, 1440×900, 1600×1200, 1680×1050, 1920×1200, 1920×1440, 2560×1600Bright Summer"In America, March is the month of American Red Cross. In India people celebrate Holi – the festival of colors in March. And in history it is the month in which Brutus assassinated Julius Caesar. Moreover, it is the starting of summer with the hot air, in southern Asia. In human color psychology, red is associated with bravery, purity, happiness, good luck, heat/fire, energy, and blood, and emotions that “stir the blood”, including anger, passion, love, pain, and sacrifice." Designed by Ramesh V R from India.previewwith calendar: 1024×768, 1280×800, 1440×900, 1440×1050, 1680×1050, 1920×1200, 2560×1600without calendar: 1024×768, 1280×800, 1440×900, 1440×1050, 1680×1050, 1920×1200, 2560×1600Ballerine"The letters with drips represent the cold winter and the ballerine is spring." Designed by Axenis from France.previewwith calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200without calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200Birthday MonthDesigned by Ammar Ceker from Turkey.previewwith calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200March Sentense"Just motivating sentence for March :)" Designed by Temeshi from Poland.previewwith calendar: 1024×768, 1280×800, 1280×960, 1280×1024, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1920×1200without calendar: 1024×768, 1280×800, 1280×960, 1280×1024, 1400×1050, 1440×900, 1600×1200, 1680×1050, 1920×1200Winter’s Almost Over"Winters are long and slushy in Buffalo, NY. March is both the ugliest and most hopeful month, because spring is just around the corner." Designed by Palmer Louise from USA.previewwith calendar: 320×480, 1024×640, 1280×800, 1440×900, 1680×1050without calendar: 320×480, 1024×640, 1280×800, 1440×900, 1680×1050New Beginnings"I graduated college approximately 2 years ago, and since that time have worked as an IT consultant/auditor for a large accounting firm. I realized early on that I had made a mistake and would never be content until I got back into the world of design and development, which is where my passion truly lies. I have been working for the past year building a portfolio in the hopes to do this. This design is a direct byproduct of this and a hope that with Spring comes a new life and a new beginning." Designed by Noah Jablonski from USA.previewwith calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200without calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200Lucky MeDesigned by Valerie Morgan from USA.previewwith calendar: 1280×800, 1440×900, 1600×1200, 1680×1050, 1920×1200, 2560×1600without calendar: 1280×800, 1440×900, 1600×1200, 1680×1050, 1920×1200, 2560×1600Colourfull"I am presenting a colourfull march." Designed by Sandhya Banshal from India.previewwith calendar: 1024×768, 1280×800, 1440×900, 1680×1050, 1920×1200without calendar: 1024×768, 1280×800, 1440×900, 1680×1050, 1920×1200Spring Bloom"March marks the beginning of a new season and is the time of year when plants begin the grow.The beauty of the month is depicted in this wallpaper." Designed by Ellen Xue from Canada.previewwith calendar: 1024×640, 1280×800, 1440×900, 1680×1050, 1920×1200without calendar: 1024×640, 1280×800, 1440×900, 1680×1050, 1920×1200Escaping Winter"I took this photo of Wharariki Beach while on holiday last month in New Zealand. I hope it brings some good weather this side of the world in March." Designed by Adam Foster from England.previewwith calendar: 1024×768, 1280×800, 1280×1024, 1600×1200, 1680×1050without calendar: 1024×768, 1280×800, 1280×1024, 1600×1200, 1680×1050Why March"Nothing like a good ol’ anti-war statement. For the record, I am not against the troops. I am against war. Thanks!" Designed by Kris K. from United States.previewwith calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200without calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200Feeling Sheepish"A visual interpretation of the month that most importantly connects winter with summer, it just sometimes feels a bit sheepish." Designed by Jordan Scott from Canada.previewwith calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200without calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200Chuck misses a tooth"Was kinda bored and looking for some fun. So, came up with Mr. Chuck who just lost a tooth!" Designed by Abdus Salam from Pakistan.previewwith calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1600×1200, 1920×1200without calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1600×1200, 1920×1200Spring Is The Season"Spring is the season of new, young and vibrant colors. My idea behind this creation is to leave behind the darkness of failure, tears, pain and broken hearts. Brighten yourself with new colors, hopes and thoughts like these flowers." Designed by Upasana Jain from India.previewwith calendar: 1024×640, 1280×800, 1440×900, 1680×1050, 1920×1200, 2560×1600without calendar: 1024×640, 1280×800, 1440×900, 1680×1050, 1920×1200, 2560×1600Ultimate Sophistication"I’m keeping the description simple to. The motivation behind this design was reading the Leonardo DaVinci quote online, liking it and wanting to do something to illustrate it." Designed by H??vard Bergersen from Norway.previewwith calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200without calendar: 320×480, 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200Sploosh"Bring in March with a sploosh." Designed by Ryan McLeod from Scotland.previewwith calendar: 800×600, 1024×768, 1280×800, 1280×1024, 1440×900Stripy"Be simple and bold this march :)" Designed by Akash Chandrayan from India.previewwith calendar: 320×480, 1280×800, 1280×1024, 1366×768, 1440×900, 1680×1050, 1920×1200without calendar: 320×480, 1280×800, 1280×1024, 1366×768, 1440×900, 1680×1050, 1920×1200Standing Tall"Like any designer, I derive inspiration from nature. And animals are my favourite. Still I remember the tall, majestic Giraffes that I saw in my school excursion. Have a beautiful month." Designed by Ganesh k Swaminaathan from India.previewwith calendar: 320×480, 800×600, 1024×768, 1280×800, 1280×1024, 1600×1200, 1680×1050without calendar: 320×480, 800×600, 1024×768, 1280×800, 1280×1024, 1600×1200, 1680×1050Olympic Mania"Desktop Wallpaper for March, 2010, Inspired by Vancouver 2010 Olympic Winter games." Designed by Sagar from Bangladesh.previewwith calendar: 1024×768, 1152×864, 1280×720, 1280×800, 1280×1024, 1440×1050, 1600×1200without calendar: 1024×768, 1152×864, 1280×720, 1280×800, 1280×1024, 1440×1050, 1600×1200Join in next month!Please notice that we respect the ideas and motivation behind artists’ work which is why we’ve given artists full freedom to explore their creativity and express emotions and experience through their works. And this is also why the themes of the wallpapers weren’t anyhow influenced by us, but designed from scratch by the artists themselves.Thanks to all designers for participation. Join in next month!What’s your favorite?What’s your favourite theme or wallpaper for this month? Please let us know in the comments! And have a smashing March, folks!© Smashing Editorial for Smashing Magazine, 2010. | Permalink | 10 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: Wallpapers

  

  • Tags:
  • Graphics
  • wallpapers

  February 28 2010, 2:43am | Comments »

• I posted to smashingmagazine.com

  Usability Review of Charity Websites Taking the Lead

  http://feedproxy.google.com/~r/SmashingMagazine/~3/JyflCWoD4zM/

    Over the years designers have pushed themselves to create unique and inspiring designs. Companies have yearned to have websites which are innovative and make them stand out against their competitors. Yet charity websites have not progressed along with trends and expectations — they seem to have been designed for launch and then only updated with minor tweaks to suit the content.It has become a recent trend for charities to look at their online identities and branding; spending money on creating user experiences which suit their user base, and over time getting people involved with their campaigns and messages.Below we look at charity websites which have successfully developed their online brand using modern and creative ideas. We will also discuss how each charity website can be improved because, as we all know, not every website is perfect. There are always improvements to the design or usability that may have been overlooked by management, designers, or developers.[Offtopic: By the way, did you know that Smashing Magazine has a mobile version? Try it out if you have an iPhone, Blackberry or another capable device.]1. Red Nose DayRed Nose Day is a fundraising event dedicated to raising money for Comic Relief.As you can see above, the Red Nose Day website design combines many different techniques to achieve a highly-minimalist and playful design. Throughout the website you can find non-web-based font headings implemented using sIFR, feature panels built in Flash and a striking navigation, built using CSS Sprites.The design uses a simplistic colour scheme of white, black and red. Using red along with black and white has a high impact on the user, and of course reinforces the “Red” in “Red Nose Day”. The red is predominantly used on call-to-action areas since it is effective in drawing the user’s eye.Donate button featured in Red Nose Day’s headerBecause the Red Nose Day campaign reaches such a wide audience, the website design achieves the perfect balance between comical elements and factual information. Satisfying the requirements of such different audiences — the younger generation and more mature users — is a tough job and Comic Relief have managed it effectively and impressively.ImprovementsNowadays, making content accessible should be a routine part of any site’s development. Unfortunately, the Red Nose Day design makes heavy use of light grey text on a white background. This lack of contrast can prove difficult for users with poor eyesight. A way to improve this would be to use a much darker grey or black in order to increase the contrast between the text and background. Alternatively, they could offer this option through user-controlled accessibility website tools.As mentioned above, the purpose of the Red Nose Day event is to raise money for Comic Relief. As a visitor to the site, I would be interested to know the progress of the fundraising efforts. While a counter is included on some of the content pages, it would be more beneficial to the user if it was also displayed on the home page. This demonstrates to the user that the charity is currently active. Of course, they may have their reasons for excluding it from the home page that we’re not aware of.Fund raising total featured on Red Nose Day content pages2. Give Us A LiftThe Give us a lift campaign website, run by WRVS is aimed at raising awareness of how older people struggle to get to the places they need to on a daily basis without the support of community transport.The design makes use of a large background image and cardboard cutouts to portray the theme of hitchhiking. Along with a striking colour scheme of a dark background with contrasting pink, green and blue elements, the design makes a big first impression on the user. These contrasting colours are carried through onto the content pages and, in the sidebar, two main call-to-action links in purple and green ask the user to either donate or volunteer.A speedometer Flash element is positioned to the base of the page counting the number of volunteers. Due to this unique idea and design, the user’s eye is drawn down to the bottom of the page where another two call-to-action links can be found.This campaign website makes heavy use of Flash elements in order to display donation totals, volunteer totals (in the speedometer), and the winners to the campaign’s Twitter competition. It is unusual to see such creative elements within a charity design and it’s refreshing to see a website that understands the content that needs to be communicated — but doesn’t sacrifice engaging creativity.Twitter winners from the Give us a lift campaign websiteThough the high impact design would have a stronger response from a younger audience, the website also caters for the older generation with attention to accessibility. On all content pages, a button can be found to increase the content’s font size using jQuery. Also, a dark font colour is used to add high contrast between the text and background.ImprovementsAs mentioned above, the Give Us A Lift campaign website makes heavy use of JavaScript and Flash to display its contents. These elements could become unusable for the older user base as they may not have Flash installed, or have disabled JavaScript — making the video section impossible to use. The heavy use of Flash elements also increases page-load times. When implementing these elements, it is important to optimise the Flash and cater for circumstances where Flash may not be installed or JavaScript is disabled.While the designer of the website has obviously tried to pay much attention to all of the details, with many elements popping out to the user, the main navigation seems to be lost and this can cause a problem for the user if they cannot instantly recognise the main source of navigation. This may be because the navigation not being featured within the main layout container; also, the lack of background colour makes it blend into the dark background image and the user could find it difficult to read the grey text on black. Brightening these elements and making them stand out more would make this design more polished and create a much happier user experience.The Twitter page on the campaign website features a stripped-down version of Twitter’s feed widget. Though it is great to see this integration of social media into the website, the lack of creativity and separation between tweets creates an element that resembles Google Ads. This would obviously cause problems since the majority would most likely ignore this part of the page.Comparison of Twitter Feed with Google Ads3. ChildLineChildLine is a charity set up to aid children with a variety of problems ranging from helping with sexual and physical abuse to answering questions about concerns for parents and other family members.The target audience of the ChildLine website is of a younger age, therefore the design reflects a very animated theme with cartoon characters repeated in the background, large font sizes and a bright colour scheme. The cartoon characters are also a representation of what the child might be feeling when visiting the website — a subliminal message that ChildLine understands what they are feeling, and can offer help.Throughout the website, a yellow tab is fixed to the left side of the page and acts as a panic button for the user to click if they wish to quickly hide the website by sending the user to the Google home page. This implementation is similar to the “Feedback” button that popular sites use as part of the Get Satisfaction service.Hide page tab from ChildLine websiteChildren are always looking to customise anything they can: desktop backgrounds, icons, Myspace layouts, etc. So ChildLine have made use of the MooTools JavaScript framework in order to allow the user to change the background colour and image of the website. After clicking the ‘Change Wallpaper’ tab at the top of the page, a white panel slides down for the user to customise the wallpaper of the site. These slide-down panels are used on many websites to display hidden forms and content.A question is raised as to whether it is appropriate to allow this level of customisation on this kind of website. From a child’s perspective, however, this can create a fun user experience and a safe environment that they enjoy visiting. This creates trust between the child and the charity, which is an invaluable benefit. This sense of fun and trust will also mean the child is more likely return to the site.Change wallpaper panel from ChildLine websiteImprovementsAn important part of the ChildLine website is to offer help and protection to children in need. The “Hide Page” tab discussed above is an invaluable part of this website, helping children navigate away quickly if the need arises. A similar offering is a footer link labeled “Cover Your Tracks”. This gives the child information on clearing traces of their website visit from their computer.Though the pull-down panel is great for small amounts of content (for example, the wallpaper customisation), large amounts of content can disrupt the page flow. At the top of the ChildLine design, “Accessibility” and “Help” tabs are used to display large amounts of text on the relevant topic. This heavy amount of content pushes the main content of the page down below the fold and can cause confusion. A way to improve the usability of these sections would be to take the user to a new content page where headings, white space and imagery can help break up the lengthy content.Earlier we spoke about the bold repeating background that’s heavily featured in the design. When scrolling down a long content page, this repeating background can disrupt the user’s flow and be quite harsh on the eyes. Making the background image fixed (by simply adding background-attachment: fixed; to the CSS), the user will find reading down the page a lot easier and not be distracted by the moving background when scrolling.The yellow “Hide Page” tab can for some users be easily lost in the bright colour scheme and bold background. Due to the idea of emergency and panic behind this button, perhaps swapping the yellow for a red could provoke an automatic user response. The use of red would also mean that this tab would be harder to lose in the colors.4. WWFWWF is the world leading charity in the conservation of wildlife.The design for the WWF website is very different from the other three charity websites we’ve considered. The layout is very clean, grid-based, and focuses heavily on high-quality imagery to add a polished finish. By using a clean, organised layout and relying on eye-catching photography, the user is drawn to focus on what is important to the charity: its content and purpose. The WWF’s user base would be a more sophisticated and older generation than that of, say, ChildLine, so the user may be less daunted or afraid to read the content.The features panel on the home page uses jQuery to rotate through different stories, latest news, and call-to-action buttons. Though the jQuery was custom written, it is possible to replicate using jQuery plugins or following tutorials such as Creating a Slick Auto-Playing Featured Content Slider on CSS-Tricks.A neutral colour scheme of white, black, and grey is used to make any important call-to-action buttons more visible. These buttons have a striking green or orange background. When the user moves into the donate section of the charity website, the design is cut down to the bare minimum, again allowing the user to focus on the core messages. All navigation and unnecessary buttons are removed.WWF donate now sectionImprovementsIn contrast to the other charity websites, it would seem that the primary objective of the WWF website is to teach users their purpose and goals. A lot of the content and call-to-action links are aimed at making the user read about the charity and what they can achieve. The “What We Do”, “How You can Help” and “Donate Now” buttons in the header vary in size, the former two being larger than the latter. This difference in size reaffirms that the charity feels that an understanding of their goals is important prior to donating. Users rank the importance of elements by their difference in size. If the charity wished to push more donations in the future, it would be effective to swap the sizes between these call-to-action buttons in the header, giving the ‘Donate Now’ call-to-action a higher importance to the user.Varying call-to-action sizes in WWF design headerAs part of the WWF design, a description of what a £10 donation could purchase, or how it could help the charity, is featured within a panel. However, when within the donation section of the website, a £10 radio button is not offered to the user, potentially causing confusion. The user is then left with the options of £5.00, £25.00 or entering their own value. There is quite a large leap between the two default amounts, and the user may be inclined to opt for the £5.00 option. Contradictory to the prior emphasis placed on the importance of £10.00 as a donation value, it would be interesting to know how many users opted for £5.00 but perhaps would’ve been willing to donate £10. Perhaps including this as a middle-ground default donation amount would be a nice addition.5. MacmillanThe Macmillan Cancer Support charity offers help to those living with cancer and their families.When the Macmillan Cancer Support website initially loads, the user may feel overwhelmed by the amount of information and links on the page. However, this portrays to the user that the website and charity have much advice and support to offer. A way in which the design tries to break down the information, is by compartmentalising everything into panels which can be closed and re-opened via jQuery as the user sees fit.An improvement on this, and in effect making the initial page load less daunting for the user, would be to have some the panels already collapsed. Therefore the user can expand only those they wish to read more about.Collapsible panels on Macmillan Cancer Support home pageThese panels on the home page use block headings with strong background colours to make defining sections and sub-sections easier for the user. Dark green headings are used to define a new section, whereas a lighter green heading is used to define a new sub-section. By making these headings so definitive the user can break the content down into more readable chunks.The bright colour scheme used in this design can create an emotional response from the user. The user may be made to feel more light-hearted and hopeful through the use of warm earth colours.ImprovementsThe Macmillan design makes use of a lot of call-to-action buttons with distinct background colours. Unfortunately these links are left as inline elements, meaning that only the text is clickable. It would be more user friendly if these were block-level elements where the click area of the link would include these strong background colours. By increasing the clickable area, the chances of a successful click from the user is heavily increased.The charity’s name and tag-line are displayed in the top left, as is customary. These elements, however, are not clickable, so this could cause brief confusion when the user is looking for a link to the home page.Unclickable Macmillan title and tag-line in headerA large usability error on the Macmillan sign-in form is the lack of labels within or next to the appropriate fields. The user is left confused and must guess what information to put in which field. Though users are used to entering two pieces of information (user name and password), it is not clear whether the site requires a username or email address. As internet users, we have a long list of websites which we hold accounts for, all with varying requirements for a successful login. On the “Online Community” page, the same form uses labels within the fields (JavaScript is used to remove these labels when the user focuses on the field). To improve the consistency of the website and allow for a more user-friendly form, these labels should be applied across the website.Sign-In Form without appropriate labels on Macmillan website6. DogsTrustDogsTrust is a charity that aims at finding homes for stray and abandoned dogs.The DogsTrust design uses a high-impact colour scheme mainly consisting of yellow, black and white. The yellow immediately catches the user’s attention, and can be interpreted as a positive, happy colour.The main site navigation features many commonly-used techniques such as rounded corners, gradients, and a subtle 1px white line across the top. These elements, combined with the black create a visually effective navigation. The navigation only consists of five links, therefore giving users fewer choice, and creating a more focused user journey.DogsTrust website’s main site navigationThe home page design consists of minimal content and uses effective white space to allow everything to appear above the fold without looking cluttered. The users of the DogsTrust website are highly likely to be dog lovers and therefore the use of dog imagery on the four main call-to-action areas would certainly draw the user’s attention. These areas also feature four varying colours which contrast well with the yellow and black.Call-to-action areas with dog imagery and contrasting coloursImprovementsThough we briefly discussed above that the home page uses whitespace effectively to reduce clutter, the header contains many links and words; the user could get easily confused. With login, register, contact, privacy and shopping links, a search form, and two taglines, the user is given too much choice, so this section could be improved.While going through the process of donating, there are certain fields that cause the page to refresh and brings the user back to the top of the page again. The user is then required to scroll back down the page to continue filling out the form. During this process, this page refresh occurs 3 times, which can be rather annoying. It would be beneficial to develop the form using alternatives technologies, such as Ajax, which would remove the need for page refreshes.The imagery on the DogsTrust website features happy, healthy dogs that need re-homing. It is assumed that this use of imagery is successful in receiving donations or re-homing dogs. However, similar charities make use of imagery where the dogs appear unhealthy and unhappy. It could prove useful for the organisers of DogsTrust to try out this type of imagery alongside the current images through A/B testing, therefore seeing which type of image is more effective in converting website users into contributors.7. ShelterShelter is a housing and homelessness charity providing advice, information, and advocacy to people in housing need.The logo featured in Shelter’s design is simple and effective. While being easy to read, the typography of the “h” is suggestive of the charity’s purpose. By using the colour red, the user is given a sense of urgency. The audience of the Shelter website varies a lot from a younger to an older generation, therefore the design is very refrained and simplistic. This allows the message to be portrayed through the content rather than through heavily-designed elements.Throughout the design you will notice use of solid horizontal borders and lines which give a sense of structure and organisation. The lines allow the user to break the content up and be more easily read, but can also be interpreted as a symbol of shelter.The footer features links to social media profiles such as Twitter, Facebook, and YouTube. This suggests to the user that the charity is up to date with the latest trends and advertising techniques. Users may be intrigued to click these icons and discover more content.These social media icons also use jQuery to create a nice rollover effect which highlights and changes the text underneath to a descriptive caption of the icon.Rollover effect on Shelter’s social media iconsImprovementsWhen browsing the Shelter website, the user can find themselves clicking through a lot of links until they find the page they want. This can be due to the large amount of call-to-action buttons and lack of whitespace on certain pages. By increasing the whitespace between elements, an easier user experience can be created and also makes content easier to break down and consume.Example page with large amounts of links where whitespace can be improvedAgain, while browsing the child pages of the Shelter charity website, links to the donate section are easily lost among all the call-to-action areas, pictures, and content. Perhaps by making the background of the “Donate” tab in the top navigation red, utilising the red from the existing colour scheme, this may draw the user’s eye. The user would spend less time trying to locate the donate section.8. Sponsor LeeThough not a charity website, Sponsor Lee is a microsite intended to raise money for Action for Kids charity.Using a cool colour scheme of blue, silver, and white, along with friendly vector illustrations, gives the user a professional impression. This is important because the user wants to believe they are giving money to a good cause and not being ripped off. Lee Munroe, the designer of the site has been clever with his use of the fold as all important information is displayed at the top. Though users are not afraid to scroll, they do not have to look too hard to find the information they need.Included in the header is a progress total and aim for the sponsorship. By including this in the design, the campaign is made to feel more realistic and the user can then identify with how much of a difference they, themselves, can make. Now the campaign has finished, users can see how well Lee has done against his target. By putting this total in yellow, the number stands out and the user can see immediately that Lee beat his target.ImprovementsThe Sponsor Lee website displays a lot of creativity from the colour scheme to illustrations in the header. Unfortunately towards the bottom of the design, it comes across that parts are unfinished or broken, for example the social media links and footer. This can give an impression of lack of commitment or a rushed process.Sponsor Lee website footer9. ShelterBoxShelterBox is a charity that helps communities recover from natural disasters. This includes providing “emergency shelter, warmth and dignity to people affected by disaster”.Like many of the charity websites we have already discussed, the ShelterBox design uses a very neutral base colour scheme of grey and white combined with a high contrast green. Main call-to-action buttons are then given a yellow background to effectively stand out to the user. On the right of the home page, the design depicts to the user exactly what ShelterBox as a charity provide along with a counter-style number showing the number of boxes distributed so far by the charity.By showing the counter and including additional zeroes at the beginning of the total, the user understands that this is an ever-increasing number and therefore, an active campaign.ShelterBox panel featuring box shot and box counter totalAdjacent to this panel, an auto-rotating image gallery is displayed using the jQuery Cycle Plugin. This acts as a call-to-action for the user to find out more, but also shows the user the charity’s work first-hand. This makes the user feel directly involved and may want to do more to help. Overlaying the image, a caption with a slightly transparent background that describes the content of the image is displayed. This method is currently very popular in image galleries.Auto-rotating image gallery on ShelterBox home pageImprovementsImportant elements of the website are lost due to the lack of creative design such as the “Latest Deployments” and “International” sites lists on the home page. The charity should style important elements such as these so that they stand out more. This can be achieved perhaps by adding background colours and making them bigger. By increasing the size of elements, the user will recognize these as more important.Latest Deployments section on home pageThe design lacks a sense of containment — the content of the website seems to bleed into the white background of some pages, making reading content difficult. Perhaps by making the background of the body a light grey and keeping the main container background white, a barrier can be created between the content and the rest of the page.10. Action for ChildrenAction for Children is a children’s charity that offers support to vulnerable children in the UK.The Action for Children website design is similar to that of Red Nose Day, using a very neutral colour scheme consisting of cream, white, and a contrasting red. Elements of the design are constructed of sketch-like lines to resemble a children’s drawing.Elements of high importance are given a light cream background to help them stand out against the other sections that have a white background. The user can therefore easily detect which sections to pay more attention to.Embedded on the home page is a video of British actress Davina McCall. By having a frozen shot of a celebrity on the home page, the user is reassured of the charity’s success and credibility. The effect being potential donations from a user who is feeling confident that the charity is well supported and perhaps inclined to become involved because of celebrity associations.Once the user’s eye is drawn to the celebrity viral, they will notice four call-to-action areas displayed on the right. The wording of these are very snappy and simple to suggest to the user that these actions are easy, but meaningful. Alongside the wording, hand-drawn illustrations are used to add interest and creativity.ImprovementsWhen viewing the sitemap of the Action for Children website, there is a bug in the CSS of the columns. Columns are too wide to fit the intended number in a row, meaning columns are misplaced below others on the right and breaks the flow of the page. This can be fixed by either making the content area wider on this page (as there is no sidebar), or adding a clearing element after each row. Making the columns easier to read allows the user to find the page they’re looking for quicker.Another bug is the functionality of the inline popup windows that appear after clicking the “Send Page”, “Feedback”, and “Share Page” links. The windows are cut off underneath the title, making the forms unusable.Example of inline popup window bug on Action for Children websiteSupport Needed: Stand With HaitiAs many are aware, Haiti recently suffered a major earthquake which devastated the country. Stand With Haiti is a campaign website set up by Partners In Health who, even prior to the earthquake, have been providing medical care in Haiti for over 20 years.The first thing you notice about the Stand With Haiti campaign website is the colour scheme. The blue is both soothing and in keeping with the Partners In Health branding. In contrast with the blue, orange and deep reds are used on call-to-action buttons and on important pieces of information that portray a sense of urgency and high importance.Consistency with the deep red is used so the user can easily recognise buttons and links — meaning an action is required from the user. Through the use of page structure, size, and order, a user visiting the Stand With Haiti website is clearly provided with an order of priority for certain aspects of the website. The first being to Donate using the large red “Donate” button found at the top of the page within the main header. This element is one of the first things the user’s eye is attracted to when landing on the website.Directly underneath this large “Donate” button are two smaller, slightly darker red buttons. The purpose of these is to help users share the site on popular social media websites, with the goal of increasing the number of visitors and donations.Finally, the user is left to browse and read the site’s content at their own leisure. Being a current crisis, it was an obvious choice to give higher importance to donations and spreading the word. By prioritising areas of the website, a simpler and more effective user experience is created.Prioritised buttons featured in Stand With Haiti headerWhile acting as a medium for receiving donations, the home page of the Stand With Haiti website acts as a news hub for the latest pictures and information. This is crucial for users who wish to be kept up to date with the crisis and know how their donations are helping.A jQuery-built image gallery, similar to ShelterBox, is used to display images of the crisis. Underneath there is a list of recent blog posts and instant updates from the charity’s Twitter feed.ImprovementsAs we discussed above, the design features a lot of orange and red buttons. However, none of these buttons have hover or visited states. Adding these to the links and buttons would increase the usability of the website, showing the user clickable areas more prominently and helping them recognize where they’ve already been.Donations being one of the main purposes of the Stand With Haiti website, it is important that the donate form is usable. Unfortunately, at first glance the donate form looks cluttered.Stand With Haiti donate formThe form would be much more usable and readable with better use of whitespace. It could also improve if the form labels were clickable to their appropriate input field. While this provides easy-to-select fields, it also ensures that people with screen readers and auto-fill functions can use the form.After adding effective white space and increasing the usability of the form fields, a button similar to those used on the home page of the site can be used for the “Process Contribution” button. This should also be repositioned as users expect submit buttons of this kind to either be on the left or right. Few forms, especially this wide, place their submit buttons in the middle.Useful ResourcesMany of the methods mentioned above can easily be achieved yourself:Rich Typography On The Web: Techniques and ToolsThe Mystery Of CSS Sprites: Techniques, Tools And TutorialsBackgrounds In Web Design: Examples and Best PracticesMooTools Tutorials and Resources Round-Up45+ New jQuery Techniques For Good User Experience10 Useful Usability Findings and Guidelines© Ben MacGowan for Smashing Magazine, 2010. | Permalink | 4 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: usability

  

  • Tags:
  • design
  • usability

  February 26 2010, 11:16am | Comments »

• I posted to designmeltdown.com

  More creative 404 pages

  http://feedproxy.google.com/~r/designmeltdown/uecD/~3/HXRi1rZzTRw/

  This article features another fresh batch of entertaining 404 pages. And while they might seem to be more entertaining then functional they are actually quite helpful. A little humor is the perfect thing to inject into a situation where your site has failed. These pages admit the mistake and help people along. http://www.themeflash.com/most-creative-and-fantastic-error-404-pages/

  

  • Tags:
  • 404 Pages

  February 26 2010, 6:00am | Comments »

• I posted to smashingmagazine.com

  Finding Inspiration in Uncommon Sources: 12 Places to Look

  http://feedproxy.google.com/~r/SmashingMagazine/~3/UHxOOuIcqb8/

    Inspiration can be a fickle thing. Most designers, when lacking ideas, turn to design galleries to find ideas. But there are a few problems with that approach. The most obvious is that when taking inspiration from similar mediums, there’s a fine line between “inspired by” and “copied”. To some extent, looking at established website designs can also be somewhat limiting, especially if you’re looking for a fresh solution to a problem.There are so many things designers could be turning to for inspiration outside of design galleries. We’ve featured a dozen of those places below, along with where you can find inspiration for each of them. Share any other inspirational sources you might have in the comments.[Offtopic: by the way, did you already get your copy of the brand new Smashing Book?]FashionThe world of fashion has a long and varied artistic history. Trends change on a seasonal basis and often reflect the overall sentiment of culture at any given time. For example, in times of war or turmoil, feminine designs tend to become more popular to counterbalance all the perceived negativity. When there’s international financial trouble, designs tend to be less over-the-top and many designers focus on more realistic designs. By contrast, in economic boom times, designs tend to be very avant-garde and are more art pieces than functional clothing.Taking inspiration from both modern and historical fashion can be a great way to infuse something new and fresh in your website designs. A few ideas on how to adapt fashion designs to your next project:Look at the overall scale of an outfit and mimic it.Color schemes are one of the easiest areas to adapt.Look at the lines of a garment and emulate them in your designs.Fabric textures and patterns are another easy-to-mimic area.Where to Find InspirationMagazines: Take a look at the magazine rack of your local bookstore, grocery store, or drugstore for a wealth of fashion magazine choices. Some of the more popular ones (in the U.S., anyway) are Bazaar, Vogue, Glamour, and Nylon.Style.com: Style.com is the online home of Vogue magazine and has up-to-the-minute coverage of designers, parties, and anything else going on in the world of fashion.Style Blogs: There are a ton of style blogs out there. A few excellent ones to check out include The Cut (New York Magazine’s fashion blog), The Sartorialist, and fashiontoast. For even more, check out Signature9’s list of the 99 Most Influential Style Blogs.The Street: Check out fashion in the city or town in which you live. There are likely plenty of fashion-forward residents in or around your home town.Architecture and Interior DesignThe world of architecture and interior design holds a huge variety of potential sources of inspiration, and there’s likely an aesthetic style out there for every taste and every project. From vernacular architecture to modern minimalism to art deco and everything in between, there’s almost certainly an architectural style out there that can be adapted to your project.The number of architectural styles is really astounding, but here are some of the more prominent and interesting recent ones to get you started:Art Nouveau: A popular style around the turn of the 20th century (roughly 1890 to 1905) that fell out of style as the modernist movement took hold. The style is defined by violent curves (often called “whiplash” motifs), and dynamic, undulating, flowing lines. It was one of the inspirations for the psychedelic art movement of the 1960s. A great example of Art Nouveau architecture is the Museum of Applied Arts in Budapest.American Craftsman: Also known as American Arts & Crafts, it was popular in the late 19th century through the beginning of the 20th century, and still enjoys revivals to the current day. It emphasized locally crafted wood, glass, and metal work, and combined simplicity with elegance. Great examples can be in numerous Craftsman-style bungalows across the United States.Prairie School: Prairie School designs, which were popular in the late 19th and early 20th centuries, generally include a lot of horizontal lines, a desire to blend with the surrounding landscape, and discipline in the use of ornamentation. Frank Lloyd Wright’s Oak Park, Illinois home is a great example, as is the Woodbury County Courthouse in Iowa.Art Deco: A popular design movement between 1925 through the 1940s. It was seen as glamorous, elegant, modern and functional at the time. The City Hall of Buffalo New York and the spire of the Chrysler Building in New York City are both prime examples.International Style: A major style in the 1920s and 1930s, at the beginning of the modernist movement. A strict set of design rules is one of the key components of international style. Villa Savoye by Le Corbusier and The Glass Palace (in Heerlen, The Netherlands) are both great examples.Mid-Century Modern: A design style developed between roughly 1933 and 1965, and is a further development of both Frank Lloyd Wright’s principles and Bauhaus architecture. More organic and less formal than international style. Prominent proponents included Joseph Eichler and Ludwig Mies van der Rohe. The Transamerica Pyramid in San Francisco and the Concourse building in Singapore are both good examples.Postmodern: An international style movement that started in the 1970s (with roots as far back as the 1950s). It’s not as formal as international style and has more ornamentation. The Bank of America Center in Houston, TX is a good example of postmodern architecture.Where to Find InspirationThere are a wealth of places to find inspiration from architecture and interior design, both online and off.The Real World: There are likely a number of architectural gems not too far from where you currently live or work. Look up at the buildings that surround you on a daily basis and take in their forms, shapes, details, and other defining characteristics.Magazines: Magazines like Architectural Digest, House Beautiful, Veranda, and a number of others can be picked up on almost any newsstand in the U.S. Other countries are likely to have either international versions of these or their own variations.Design Blogs: There are tons of design blogs that cover architecture, including Inhabitat (which focuses on green design), A Daily Dose of Architecture, and Eye Candy.Architecture Books: Most major bookstores have tons of architecture books (usually coffee table books) in their bargain section. You can often get excellent volumes with tons of photos for less than $20.PhotographyThere are billions of photos online you can peruse whenever you need a bit of inspiration. Look at composition, color, and balance within an image to get ideas. Also keep in mind what the story behind the image is, and think about how something similar could be applied to your design project.Where to Find InspirationThere are thousands of photo sites online. But that’s not the only place you can find photographic inspiration.Flickr: Flickr has billions of photos. Some are fantastic, and some are far from it. Use groups and pools, as well as galleries and their explore feature to find the best images.DeviantArt: DeviantArt has a fantastic photography section to browse. You’re likely to find a higher proportion of “artsy” images here than on Flickr, which may or may not be a good thing, depending on your particular project.Coffee Table Books: Major bookstores tend to have tons of large-format, “coffee table” books in their discount section. These are often full of images of all kinds, and can be picked up for next to nothing. Used bookstores are another good source of this kind of book.Flea Markets: Check vendors at flea markets for unique, vintage photographs.Packaging DesignPackaging design is far enough removed from web design that it’s often possible to find inspiring pieces you can easily adapt without copying. The change in format can lead to surprising adaptations that extend far beyond the original inspiration. The best part about packaging design is that it’s so accessible. Packaging surrounds us, making it easy to find examples in the real world.Where to Find InspirationYou can find inspiring packaging all over the place, from your own kitchen to the grocery store down the street.Stores: This is the most obvious place to go for packaging design examples. Every store you go into will have some kind of packaging, from boxes and bags to hang tags and labels.TheDieline: TheDieline is one of the best package design blogs out there. Their archives are inspiring and they’re updated daily.Packaged Group on Flickr: The Packaged group on Flickr and their pool has more than 4,000 product packaging images for you to peruse.Board GamesThere are hundreds of board games out there. And the thing about a lot of them is that they have fantastic color schemes and graphic elements. Sometimes the layouts of the games themselves can be used as a source of inspiration.Where to Find InspirationBoard games are sometimes a bit harder to come by, especially if you’re not into them for entertainment purposes. But here are a couple of places to check out if you’d like to try them for inspiration:Flickr Pools: There are a number of Flickr pools and groups dedicated to games, but two of the better ones are Games, Board and Otherwise and Board Games.Flea Markets and Thrift Stores: You can often find used board games for next to nothing at flea markets and thrift stores. Often these are vintage games that either have newer versions out or are no longer in production.The Natural WorldThe inspirational opportunities present in the natural world around us could make an entire post all on their own. There are literally thousands, if not millions, of things to be inspired by around the world and in our own backyards. Birds, trees, animals, bugs, the sky, mountains, valleys, deserts, rivers, lakes, the list could go on forever.When you’re lacking inspiration, try taking a walk through a nearby field, park, forest, or other natural space. Look around at the shape and texture of things, the colors, the patterns, and anything else that catches your eye. You’re almost sure to find something you can apply to your projects if you take the time to look.Where to Find InspirationObviously, the natural world is all around us, even if we live in an urban area (just look at grass growing up through cracks in a sidewalk, birds in a park, etc.). But here are some ideas for finding even more inspiration:Flickr Groups: Again, Flickr Groups are a great source to find inspiring nature photography. A few specific groups to try: Spectacular Nature, #1 Nature and Wildlife Photographers Corner, The Worlds Best Nature, Wildlife, and Macro Photography, and Nature, Wildlife, and the Great Outdoors.National Geographic: Whether you look through new or old issues, National Geographic is filled with amazing nature photos and stories. There’s plenty of inspiration on their website, too.TravelTraveling to new places can be a great way to feel inspired again. Whether you take a day trip, go away for a weekend, or go on a weeks-long exotic vacation, a change of scenery can go a long way toward getting your creative juices flowing again.Try going somewhere you’ve never been before, or somewhere you haven’t been to in a very long while. Take the time to experience the place you’re visiting, and stay away from the tourist traps as much as possible.Your mode of travel may be almost as important as your destination. When so many of us go on vacation, we immediately think of flying somewhere. But why not try taking a train or a bus instead? Or drive, if wherever you’re going isn’t too far away. A change in your travel mode may inspire you, too.MusicListening to music can be a fantastic way to get past a creative block. A lot of us listen to music while we work, but other than finding music that’s “motivational”, I’m sure we usually don’t put a whole lot of thought into what we’re listening to while we’re working on a particular project.But if you tailor your music choices to the project at hand, you may find that you’re even more inspired. For example, let’s say you’re designing a site for a shop that sells maternity clothes. Listening to death metal while designing probably isn’t going to put you in the best frame of mind for designing. Something a bit lighter might work a lot better for you. Or let’s say you’re designing a site for a cutting-edge new web app that’s set to revolutionize some industry or other. Listening to Baroque music probably isn’t going to help you very much. So think through what your project is really about, and then try to tailor your music to the feeling you want to create.Try to create a mental image as you’re listening to particular music, and then translate that into your projects. If you’re listening to the right music, it’s likely you’ll come up with some kind of image that can be applied to your design sooner or later.A word of caution, though: If you hate classical music, or jazz, or country, or any other musical genre, don’t force yourself to listen to it just because it fits your current project best. All you’ll do is annoy yourself. Instead, design in silence or pick a more mellow/energetic/whatever version of the music you normally listen to.Where to Find InspirationThere are a few sources for finding music for your current project if you’re not sure exactly what kind of music fits.Pandora: So, you know that a particular song fits the project you’re working on, but you’re not familiar with that particular genre. Just type in the song or artist name and you’ll be fed a playlist of similar music. You can vote songs up or down while you’re listening, so you won’t hear those songs you hate anymore, and will hear more of the stuff you like.20 Fantastic Ways to Find New Music That You Like: A post from Inspired Magazine that can point you in the right direction for finding new music.Music-Map: Just type in the name of an artist, and Music-Map will give you a mind-map like display of similar artists.CraftsThe world of artisan crafts is filled with some incredibly talented people. The world of crafts is no longer just populated with tea cozies and crocheted toilet paper roll covers. Unique designs abound and are an excellent source of creative inspiration. Plus, because craft designs are far removed from web design, there’s very little chance of being accused of copying someone else’s creation, and there’s plenty of room for your own interpretation.Look at the shapes, textures, and patterns as sources of inspiration. Color is also easily adapted.Where to Find InspirationThe world of handcrafts has exploded online, but not every craft site and blog out there is necessarily going to be a wealth of design inspiration (see previous comment about crocheted toilet paper roll covers). Here are some great sources, though:Etsy: Etsy is the premier online handcrafts shop. It’s populated by hundreds of thousands of artisans from all over the world, and has some truly extraordinary talent. Be sure to browse their showcases, treasuries, and The Storque (their blog) for some of the best picks.Craft and Make: Craft and Make Magazines are both great sources for finding handcrafted items. They’re both filled with tutorials and examples. Craft tends to lean a bit more toward traditional arts and crafts (with a twist) while Make is more technical and scientific-focused.Craftster: Craftster is a great blog and community filled with examples, inspiration, and tutorials. It’s aimed at hipsters and has more edge than most traditional crafts blogs.Local Artisans Guilds and Craft Fairs: Many areas have either an artisans guild where you can view crafts from local artisans, or have annual craft fairs (often associated with the holiday season, though others hold them in the summer). These can be a great place to find inspiration. Taking photos can be a great way to capture whatever inspires you, but make sure you ask before shooting pics of anyone else’s creations (crafters can get very possessive of the things they create).FoodThe sensations that go along with eating can be a fantastic way to unleash your creativity. If you’re feeling uninspired, try going out to your favorite restaurant or cooking your favorite meal. But go beyond just eating and really think about your food. If you’re cooking, consider the ingredients you’re putting into the meal and what each one adds to the finished result. The same goes for eating out; think about the different flavors and how they complement or compete with each other in the finished dish.Don’t overlook the presentation of your food, either. Look at the way the food is placed on the plate, whether there is any garnish, how much empty space there is around the food, etc. All of these things add to the dining experience. Consider how you might be able to apply the same concepts to your own projects.Illustrated Picture BooksChildren’s picture books are often filled with wonderful graphics. The illustrations themselves are one source of inspiration, but also the typography and the page layouts beyond the illustrations can be just as valuable.Look at the colors, the fonts used (and their sizes) and how the type is positioned on the page. Also check out how the text is balanced with the graphic elements, and how the amount of information on each page is limited. All of these are valuable lessons that you can apply to your own designs.Where to Find InspirationYou may have some picture books from your own childhood sitting in a box somewhere (or your parents might still have them). Start with those, but also explore these other sources:Google Books: You can search Google Books for both public domain and newer children’s books. While those not in the public domain will be limited in what you can view, older books are often available in full and can be acquired online.Your Local Library: Local libraries often have a huge selection of picture books available. And the best part is that you can borrow them for free.Used Bookstores: Used bookstores also often have a large selection of children’s books, including older ones you might not see elsewhere.Movies and TelevisionTitle sequences in movies and television are the most obvious places to look for inspiration, but set and costume design can also be useful in finding solutions to design problems. Historical films often have fantastic settings and costumes, as do science fiction and fantasy. Contemporary films can also have a wealth of potential design inspirations.Pay attention to the visual aspects of the next movie or television show you watch and try to think of ways they could be applied to your design projects. Also pay attention to secondary products associated with television and movies, such as commercials and promotional posters. These can be a huge source of inspiration as well.ConclusionStepping away from the places we normally seek inspiration can lead to a whole new world of creative sources. Try keeping a file of potential ideas, images, and other materials garnered from these sources, either on your computer or in physical form. Then you can pull from it even when pressed for time.If you have any other unconventional sources for design inspiration, please share them in the comments! What are you inspired by?(vf)© Cameron Chapman for Smashing Magazine, 2010. | Permalink | One comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: Inspiration

  

  • Tags:
  • inspiration

  February 26 2010, 12:31am | Comments »

• I posted to designmeltdown.com

  30 Illustrated sites

  http://feedproxy.google.com/~r/designmeltdown/uecD/~3/V6YZZFq18UA/

  It’s not hard to understand why sites with custom illustration are so appealing. Imagery brings things to life; and typically illustrations are incredibly unique and bring a totally fresh face to the web. Enjoy this set of beautifully illustrated sites. http://webdesignfan.com/websites-with-illustrations/

  

  • Tags:
  • illustration

  February 25 2010, 10:00am | Comments »

• I posted to designmeltdown.com

  Inspiring ecommerce sites

  http://feedproxy.google.com/~r/designmeltdown/uecD/~3/0Fkpi5j0zw4/

  E-commerce sites are so dynamic that they are often difficult to skin, as such, it is great to see sets like this that push e-commerce to the limits and prove that it can be an inspiring type of site. http://vandelaydesign.com/blog/galleries/creative-ecommerce/

  

  • Tags:
  • e-commerce

  February 25 2010, 6:00am | Comments »

• I posted to smashingmagazine.com

  Designing User Interfaces For Business Web Applications

  http://feedproxy.google.com/~r/SmashingMagazine/~3/bkq7EF9NJsQ/

    Business Web application design is too often neglected. I see a lot of applications that don’t meet the needs of either businesses or users and thus contribute to a loss of profit and poor user experience. It even happens that designers are not involved in the process of creating applications at all, putting all of the responsibility on the shoulders of developers.This is a tough task for developers, who may have plenty of back-end and front-end development experience but limited knowledge of design. This results in unsatisfied customers, frustrated users and failed projects.So, we will cover the basics of user interface design for business Web applications. While one could apply many approaches, techniques and principles to UI design in general, our focus here will be on business Web applications. [By the way: The network tab (on the top of the page) is updated several times a day. It features manually selected articles from the best web design blogs!]Websites vs. Web ApplicationsConfusing Web applications and websites is easy, as is confusing user interface design and website design. But they are different both in essence and in so many other ways, which we’ll explore in this article.A website is a collection of pages consisting mostly of static content, images and video, with limited interactive functionality (i.e. except for the contact form and search functionality). The primary role of a website is to inform. Some websites use content management systems to render dynamic content, but their nature is still informational. CampaignMonitor is powerful email marketing software, while Jeff Sarimento’s website is intended to inform readers about his life and work.Web applications, on the other hand, are dynamic, interactive systems that help businesses perform business critical tasks and that increase and measure their productivity. Thus, the primary role of a Web application is to perform a function that serves the user’s tasks and according to defined business rules.Web applications require a higher level of involvement and knowledge of the system on the part of the user. They don’t just stumble upon the application, do their work and bounce off. They use it as a tool to perform critical business tasks in their daily work. In the end, they cannot easily discontinue using the application and switch to another if they don’t like how it’s working, as is the case with websites.Different Types of Web ApplicationsBusiness applications range in type from invoicing for freelancers to content management systems to document management systems to banking and financial systems.We can distinguish between open and closed applications. Open systems are online applications that are easily accessible to anyone who opens an account. Users can access such applications via the Web and can open an account for free or by paying a fee. Closed systems (or line-of-business applications) are usually not accessible outside the company that uses it, and they can be considered “offline” applications (though many systems expose their functionality to business partners via either services or specialized interfaces). Such systems usually run on the company’s local network and are available only to employees.I don’t know who coined it, but one term I like especially is weblication, which describes what a Web application is in general. This doesn’t mean, though that a Web application is a half-website half-application hybrid. It is far more complex that that.First, Know Your UsersYou’ve probably heard this a thousand times, and for good reason. A successful user interface focuses on users and their tasks. This is key, and too many developers have failed to create a good user experience. As Steve Krug said, “Developers like complexity; they enjoy discovering how something works.”When identifying your users, keep in mind that clients are not users, and you are not a user. Although a client’s management team will usually be interested in the project and try to influence decisions, remember that they won’t be sitting in front of the computer several hours a day (unless the application is specifically for them).How to Identify Users?Identifying users can be done using several techniques, such as user interviews, business stakeholder interviews and and the “shadowing” method of observation. Interviews can give you answers to questions about the users’ knowledge of the system and computers in general, while shadowing can yield more detailed information about how users perform tasks and what errors they make. The method is called shadowing because the observer is like a shadow, watching and noting the steps a user takes.If you don’t have access to real users—either because you don’t have permission or are designing for open application—you can use personas, a tool to help identify users. Personas are a representation of real users, including their habits, goals and motivation. Because certain information about users is often identified through business analysis, you can make use of it to create personas. If you are not familiar with the tool, a comic by Brad Colbow will help.Task analysis helps identify what tasks users perform in their jobs, how they do them, how long they take and what errors they make. Sometimes clients will be using an old version of the application that you are designing to replace. Make use of that old system and watch how users use it. Understanding their tasks and challenges will be easier that way.Regardless of who your users are, one thing is certain: in most cases, you will have to consider both novices and experts. Novice users should be enabled to learn as fast as possible, while expert users should be enabled to perform their tasks extremely efficiently. This may mean creating separate interfaces. But in many cases you will be able to accommodate both types of users in the same interface through various techniques, such as progressive disclosure.Such research is usually done by business analysts. But if no one else is responsible for it, you should do it. Once you have the necessary information, you can begin with design.Design ProcessYou can follow one of any number of processes in designing the user interface. You might already have one. However, I would suggest that you consider the Agile approach. Why, you ask? Well, because for users (and clients), the user interface is the product. The bottom line is that they don’t care about your sketches or about fantastic back ends or powerful servers. All they want to see is the user interface.So, how does Agile help? It helps through its key principle: the iterative approach. Each iteration consists of all of the phases defined by your process. This means that at the end of the first iteration, you will have a product that can be tested, a prototype.SketchingSketching is a powerful way to explore ideas. The goal is to arrive at the solution by sketching out different concepts. Most sketches will be thrown out, but that is okay. As Bill Buxton says in his “Sketching User Experience” book, sketches are fast to create and easy to dispose of, which is why they are so powerful.Are sketches the same as wireframes? Well, the differences can be blurry, but I would say no. Wireframes don’t capture rough ideas but rather develop them. Read a fantastic discussion on IxDA: Sketching Before the Wireframes.Once you get the “right” sketches, or at least the ones that you think are right, you can create more detailed wireframes or go straight to creating interactive prototypes. Sketch by Jason Robb.Interesting reading on sketching and wireframing:35 Excellent Wireframing ResourcesTools for Sketching User Experiences20 Steps to Better WireframingPrototypingThe next step in the process is to create prototypes that will simulate the real application. A prototype can contain one or more features (or all of them), but it actually does nothing. It merely simulates the behavior of a real application, and users will feel that they are actually doing something. Prototypes may contain some functionality if needed (such as complex calculations).Because the nature of a prototype done in HTML is temporary—its purpose, after all, is to test ideas—don’t bother with the code; just make it work with minimal bugs. You will throw it away anyway. You can also use specialized prototyping software such as Axure. Some people even prototype in PowerPoint. An Axure interactive prototype for an e-commerce website, by e-maujean.Further reading and tools for prototyping:5 Useful Online Tools for Web Design Planning and PrototypingA Practitioner’s Guide to Prototyping: A book from Rosenfeld Media16 Design Tools for Prototyping and WireframingTestingPrototypes are useless unless you test them. This is not rocket science. People like Jakob Nielsen and Steve Krug support so-called “discount usability testing,” which is cheap and fast and yields valuable insight into your design decisions. You will use this information as the basis of another iteration of sketching, prototyping and testing. Do this at least until major issues have been fixed. We all know that software projects are tight on time and budget, so to be more efficient, test early and test often.One of the best resources for discount usability testing is a new book by Steve Krug, “Rocket Surgery Made Easy.” Pick up a copy and read it. Snapshot of usability testing for Delicious, by (nz)dave.Further reading:Why You Only Need to Test with 5 UsersUsability Testing DemystifiedThe Myth of Usability TestingDesign PrinciplesThere are many design principles, but there doesn’t seem to be a general consensus on definitive ones. So, we’ll go through design principles more informally, leaving out strict definitions.No One Likes SurprisesProbably the key factors in a good UI are consistency and familiarity. A user interface should be consistent across all parts of the application, from navigation to color to terminology. This is known as internal consistency. But a user interface should also be consistent within its context, such as the operating system or other applications in its group or family. A typical example is the applications in the Microsoft Office family. This is called external consistency.A good approach to consistency is to define user interface guidelines for each project or for a group of projects. These should guide the decisions you make for all of the details. This will not only maintain consistency but also serve as documentation to help team members better understand your decisions. Although a simple example, SprinklePenny achieves consistency and familiarity across the application.Consistent user interfaces have a shorter learning curve, because users will recognize parts of the system and be able to fall back on prior experience. But familiarity is sometimes confused with consistency. Familiar user interfaces draw on concepts from the users’ previous experiences and use appropriate metaphors. Folders, for example, are a well-known metaphor for file organization, and they have replaced “directories,” which were used previously in command-line operating systems. In short, speak the language of your users.A common belief among business owners is that a great user interface should look like a Microsoft Office product, especially Outlook. I won’t go into explaining how pointless this is. Rather, I will offer alternative advice: defend the user-centric approach, and explain why creating an application for employees, clients and partners (i.e. their users) is so important.All the same, most businesses are unique, as are their work processes. For example, two businesses from the same branch could have significantly different processes, forcing you to go beyond what is familiar and start to innovate. This part of the design process can be very interesting, although you have to be careful in how far you go with innovation.Further reading:Designing and Selecting Components for UIsWhy Consistency Is CriticalUsers Should Be Able to Be EfficientWithout a doubt, users should be able to be efficient when using business applications. This is what they are paid for, and this is what managers expects from the application. User interfaces should allow users to be efficient and should focus them on completing tasks in the easiest and fastest way. But this is not always the case. There is an opinion, or at least practice, among developers that says the user interface should be as complex as the back end system. No matter how ridiculous this sounds, the problem is real and might give you a headache. This is one reason why good communication and collaboration between developers is a must.Users are efficient when they focus on a particular task. As mentioned, task analysis can help you identify tasks and determine how users perform them. If tasks are long, accelerate them by breaking them up into smaller units. You can also increase efficiency by providing keyboard support and shortcuts. Think how inefficient it is for a user to have to switch back and forth between mouse and keyboard. In some cases, you will be designing for users who are accustomed to working on command-line operating systems and the applications made for them. They will be keen to have keyboard support. One suggestion: when defining keyboard shortcuts, keep them consistent with those of common applications. For example, Ctrl + S should always be save, and so on. Google Docs Spreadsheet enables users to be efficient by providing keyboard shortcuts and context menus, as well as by taking advantage of users’ familiarity with common desktop applications.Efficiency can also be enhanced through personalization. Users who can personalize an environment will learn it faster and, more importantly, will be more confident using it. Personalization can be done in many ways: choosing widgets for the dashboard; defining shortcut options and favorites; changing the order of elements; etc.Pay attention to accessibility. Although many assume that accessibility doesn’t matter in Web applications, it certainly does. Treat the application as if it were a public website.A Web application also has to be efficient in the speed with which it processes information. So, consider heavy interactions that result from partial renderings and AJAX requests.Help!An interface should provide meaningful feedback that describes the state of the system to users. If an error occurs, users should be notified and informed of ways to recover. If an operation is in progress, users should be notified about the progress.We can go even further and declare that user interfaces should prevent users from making errors. This principle, called forgiveness, can be followed with confirmation dialogs, undo options, forgiving formats and more. Forgiveness makes it safe to explore the interface, decreases the learning curve and increases overall satisfaction.Because of the complexity of business Web applications, you would also need to provide a comprehensive help system. This can be done with inline help, a support database, a knowledge base and guided tours (which mix video, images and text).Further reading:Forgiveness in UI designWeb Form Validation: Best Practices and TutorialsHandling User Error with Care: Getting Users Back on TrackCan’t Get No SatisfactionSatisfaction is a subjective term that refers to how pleasant an interface is to use. Every design principle we have described here affects  satisfaction. And a few more principles are worth mentioning here.Simplicity is a basic principle of UI design. The simpler a user interface, the easier it is to use. But keeping user interfaces for business applications simple is a challenge because the apps often have a lot of functionality. The key is to balance functionality and simplicity. Restraint is one of the most efficient ways to achieve this balance: i.e. finding the simplest way to solve a problem. BuildWith.me has a simple and effective user interface, without sacrificing aesthetics.Aesthetics, though subjective and somewhat arbitrary, play an important role in overall satisfaction. Users respond positively to pleasing user interfaces, sometimes even overlooking missing functionality. But you’re not creating a work of art. One of the best articles that explains aesthetics is In Defense of Eye Candy.In the end, users will be spending a lot of time in front of a business application, and no matter how usable, consistent or forgiving the interface is, satisfaction will be critical in determining how good the user interface is.Further reading:7 Interface Design Techniques to Simplify and De-clutter Your InterfacesRestraint In Defense of Eye CandyOther resources related to UI design:12 Useful Techniques for Good User Interface Design8 Characteristics of Successful User InterfacesPrinciples of User Interface Design (Wikipedia)10 Principles of the UI Design Masters20 Websites to Help You Master User Interface DesignEssential Components Of Web ApplicationsEvery Web application is unique, but many of them contain common features. Although the implementation of any one of these features will vary, let’s look at the basic concept of the three most common ones.Web FormsForms in general are important to Web applications. But as Luke Wroblewski says in his Web Form Design book, “No one likes filing in forms.” That includes sign-up forms, including business applications with dozens of fields.Minimize the frustration of filling in forms. Provide inline validation and good feedback. Use defaults when possible. Don’t forget about novice users. Use wizards to help them complete tasks faster, or use progressive disclosure to hide advanced (or infrequently used) features.Master-Detail ViewsThis is the technique of showing data in two separate but related views. One view shows a list of items, while the other shows details of the selected item. Master-detail views can be implemented across multiple pages or on individual ones.DashboardsMany Web applications have dashboards. A dashboard is a view of the most important information needed to take action and make decisions. It is confined to a single page and is usually the starting point of an application. Dashboards are important because they enable users to access information and take action without having to dig through the application. Xero shows a user’s most important financial information (e.g. bank accounts and credit cards) in its dashboard, making it easy for users to quickly see the status of their financial data.Heavy Use of TablesBecause Web applications typically deal with large quantities of data that are easily accessible and sortable, tables are unavoidable. But this is not a bad thing. In fact, tables were made for this purpose. Don’t confuse this with table-less layouts. Effective tables are easily readable. So, in most cases you will need a meaningful header, an optimal number of columns, pagination, alternating row colors, proper column alignment, sorting and filtering capabilities and much more.Tables can also be interactive, meaning they can generate additional info and even modify the data they contain. PulseApp is a good example of how tables can be used to efficiently present and manipulate complex data.ReportsMost businesses work with some kind of reports. Printed reports are usually required, so pay attention to the design of reports. Printed (or exported) reports are usually simplified versions of online reports, optimized for monochrome printers. FreshBooks has printing, PDF exporting and “Send to email” features. It also shows a print preview.Don’t Forget UI Design PatternsWe’re so used to hearing and talking about UI design patterns that we sometimes forget about them! UI design patterns are helpful for designing user interfaces. The important thing is to consider them early on in the design process, ideally at the sketching stage. Because patterns often solve common problems, the right pattern can facilitate the user’s familiarity with an interface and increase the speed at which they learn it. This screenshot is from the article 12 Standard Screen Patterns, which goes over the most common screen patterns.Further reading:Designing Web Interfaces: Principles and Patterns for Rich Interactions A fantastic book that covers more that 70 Web design patterns.40+ Helpful Resources On User Interface Design PatternsCase Study: Online Banking ApplicationTo take an example from the real world, I will briefly explain the process of designing the user interface for one small bank’s online banking system. The team I worked with was hired to improve the system. The main reason for the redesign was that, according to management, “users complained and many stopped using it.”After only a couple of hours spent with actual users, the main problems were uncovered. Information about accounts and credit cards was buried in poor navigation. Understanding how much money users were spending and the state of their accounts and credit cards was also hard. The application, however, was obvious to bank employees; they were familiar with the terminology and could interpreted the numbers in the application perfectly well.Give the tight deadlines, we followed the process I have described, and we partially succeeded. Despite the short time, the major problems were so obvious that we clearly understood our main task and how to go about it. We created a dashboard that provided clear information on the state of all accounts and credit cards. With this new navigation, finding information became easier. Reports were easier to understand, and several new features were implemented.Although we made only a few changes, the changes affected critical user tasks and resulted in significant improvements to the overall experience.Final ThoughtsDesigning user interfaces for business Web applications is a challenging job that is full of compromises. You have to make compromises between client and user needs; business requirements and users; novice and expert users; functionality and simplicity. It requires a solid understanding of users and their tasks, as well as of UI design principles and patterns. Despite the difficulties, the job is interesting, and you learn many new things on each project that influence the way you design websites.While this article reflects some well-known concepts and things I have learned from designing business applications over the years, I look forward to hearing your experiences and stories.(al)© Janko Jovanovic for Smashing Magazine, 2010. | Permalink | 19 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags:

  

  • Tags:
  • design

  February 25 2010, 5:55am | Comments »

1 2 3 4 5 6 7 8 9 10 ...48 ›

Popular Tags

• inspiration
• design
• downloads
• Freebies
• Graphics
• free
• Developers Toolbox
• How-To
• Design Showcase
• photography
• wordpress
• icons
• photoshop
• coding
• Tutorials
• CSS
• wallpapers
• workflow
• Events
• showcases
• useful
• tools
• smashing
• techniques
• typography
• usability
• best of
• Fonts
• e-commerce
• CMS
• Best of the Month
• php
• retro
• portfolios
• trends
• navigation
• templates
• movies
• javascript
• Forms
• ui
• vector
• brushes
• illustrator
• Business Cards
• vintage
• vectors
• applications
• christmas
• video

Search