BlogmyQuery – BMQ

If you want to design websites or modify your existing website design, then you need to have at least a basic knowledge of Cascading Style Sheets (CSS). Thankfully, CSS is a very easy language to get to a grip on, however you may find it takes a little more time to master it.

Today we would like to share with you 40 resources that will help you on your CSS journey. We have listed great CSS references and CSS blogs for learning more about the language; not to mention compatibility tables to help you remember how certain browsers handle certain CSS elements. We have also included services that help you generate code and cheat sheets for easy reference of selectors, properties and pseudo-classes. So let’s get to it, shall we?

CSS Reference

1. W3C CSS3 Basic User Interface Module

It’s perhaps not the most user friendly reference available, however the official CSS3 specifications from the World Wide Web Consortium lists everything you ever need to know about CSS.

2. Dochub

A user friendly list of every CSS property you can think of. Simply click on the property on the left hand column to load a summary and example in the main content area.

3. SitePoint CSS Reference

As one of the largest webmaster communities on the web, Sitepoint doesn’t disappoint with a great reference for learning CSS. Each property has details of the version it was introduced in, the browser versions it is compatible with and useful examples of how the properties can be applied.

Where the resource really comes into it’s own is the unique play area that each property has. A unique example is given for each property and you can change the HTML and CSS code and see what the outcome will be in real time. It really makes understanding a property you have little experience with that much easier.

4. CSS Dog

A dedicated CSS website that has useful reference pages for CSS properties, CSS shorthand properties and CSS3 selectors.

5. HTML5 CSS Properties

A list of all valid properties of CSS 2.1. Short descriptions, possible values, examples and related properties of each property are all given.

6. Mozilla CSS Reference

An alphabetical list of all CSS properties, pseudo-classes and elements, @-rules, and selectors. The CSS version of each property is listed along with its browser compatibility. It’s well presented and very easy to use.

7. CSS Easy

Finding it difficult to understand how CSS layouts work? You may find CSS Easy useful. Instead of simply listing CSS properties and selectors, CSS Easy encourages you to view code of each layout and examine the HTML and CSS in more detail to help understand how the layout was created.

8. CSS Properties and Values

A one-page reference that lists CSS properties and values with further information about the property on the right hand side of the page.

9. CSS3 Click Chart

Learn dozens of CSS3 tricks by clicking on the property you want to reproduce and viewing the code at the bottom of the page. The browser support for each property, description and link to the World Wide Web Consortium information page are referenced too.

9. Meiert CSS Properties

A CSS property table that is updated regularly. Properties are listed alphabetically and linked to the corresponding W3 information page. The table also details what CSS version the property works with and its initial value.

10. CSS3 Previews

Whilst the preview only lists around a dozen or so properties, each property has a long detailed explanation, examples of how it works and browser compatibility details.

11. CSS Reference

A list of CSS properties from W3 divided into categories. Valid values, short examples and details of whether the property is inherited are all noted.

12. CSS3 Color Names

A list of the 147 colour names that are defined in the CSS3 colour specification. Colours are listed in alphabetical order and an example is shown for reference.

13. CSS 3 Selectors Explained

A long detailed article of CSS3 selectors. The article was written around 5 years ago however you should still find it useful.

Compatibility Tables

14. CSS3 Browser Compatibility Table

A browser compatibility table for CSS3 selectors and properties on Mac and Windows.

15. CSS3 Compatibility table

Shows what version of Internet Explorer, FireFox, Opera, Safari and Google Chrome each CSS3 selector works with.

16. When Can I Use

A fantastic browser compatibility table that shows you what CSS3 elements are supported on desktop and mobile browsers. It includes a large list of filter options such as browser, version, language and more.

CSS Tutorials

17. CSS Basics

A fantastic resource for beginners that will give you a basic understanding of how CSS works. The course is divided into 18 chapters, covering everything from CSS classes to lists and pseudo elements. The whole course can be downloaded in PDF form too.

18. CSS Play

Written by experienced programmer Stuart Nicholls and his wife Fran, CSS Play is a great place to understand how menus, layouts, boxes and other CSS tricks work. You need to view the source of each page to understand how each CSS example works.

19. CSS Tricks

Arguably the best CSS blog online, CSS Tricks is a beautifully designed website from developer Chris Coyier that posts new CSS tricks and techniques every few days.

20. 456 Berea Street

Don’t let the average design full you, 456 Berea Street is a fantastic resource that has close to 400 CSS tutorials.

21. CSS Tutorial

A tutorial website that is geared towards beginners. It walk beginners step by step through the basics of CSS. It also has over 50 video tutorials and several podcasts too.

CSS cheat sheets

22. Veign CSS3 Cheat Sheet

A large CSS3 cheat sheet that organises properties by type. Values for each property are displayed to the right hand side of them. One of the most popular CSS3 cheat sheets available online.

23. Pxleyes Cheat Sheet

Available in landscape (horizontal) and portrait (vertical) mode, this useful cheat sheet shows a selected list of the most useful properties and selectors. It also has a box that displays where content, padding, borders and margins go (very useful for beginners).

24. Sencha CSS3 Cheat Sheet

Shows the new properties that have been added to CSS3. A good resource if you are comfortable with previous versions of CSS and want a cheat sheet for all new additions.

25. CSS Shorthand Cheat Sheet

A user-friendly cheat sheet that is aimed at beginners. 8 topics are covered including margin and padding, backgrounds and fonts.

26. CSS Cheat Sheet (V2)

One of the best CSS cheat sheets available. It displays a box model and lists of the most popular syntax, properties and units by category. Despite cries from a lot of fans, it has not been updated to from CSS2.1 to CSS3.

27. GoSquared CSS2 and CSS3 Cheat Sheets

The CSS2 cheat sheet shows the most popular syntax and properties and a useful box model. Rather than being a replacement, the CSS3 cheat sheet lists all new CSS features so should be used in conjunction with the original.

28. Core CSS (Part 2 & Part 3)

A good series of CSS reference cards. Part 1 covers CSS rationale and use, syntax rules, inheritance and more. Part 2 discusses element selectors, ID selectors, descendent selectors, attribute selectors and combining selectors. Part 3 discusses the CSS visual model, box model, problems with floats and positioning.

Whereas other cheat sheets try and cram everything into one page, the Core CSS series of reference cards aim to explain common problems in more detail.

29. BlueprintCSS Cheat Sheet

A great cheat sheet that users of the BlueprintCSS Framework will find useful. The second page shows a grid for designing layouts, file structures and tools and resources.

30. YUI Library

A cheat sheet for the YUI Library CSS framework. It mainly focuses on grids and fonts.

31. CSS Shorthand Cheat Sheet

Shows properties and example values for margin and padding, borders, backgrounds, fonts, lists and colours.

32. CSS Font Size Reference

The ultimate cheat sheet for styling fonts using CSS. Ems, points and pixels are all shown for easy reference.

33. CSS Shorthand Codes Cheat Sheet

Includes a cheat sheet for shorthand codes, XHTML documents, form tags and an example style.css template. Unfortunately, you need to sign up in order to download the file.

CSS Generators & Testing

34. CSS3 Rule Generator

The Cross-Browser CSS3 Rule Generator that changes the elements on the right hand side as you modify the CSS code on the main page.

35. CSS3 Selectors Test

A test area that runs small tests on CSS selectors to see if they are compatible on your browser.

36. CSS3 Tools

A range of different CSS generator tools that helps you create gradients, transforms, shadows and text strokes.

37. CSS3 Generator

Several different CSS generators in 1. The service allows you to customise text shadows, font faces, columns and more.

38. CSS3 Gradient Generator

The easiest way of creating CSS3 gradients. You can select up to 3 colours in the colour picker. The direction of the gradient and whether the CSS code uses hexadecimal or RGB code can all be altered.

39. CSS Generator

A crude looking CSS generator that gives you the code for the alignment of text and backgrounds, table borders and margins and padding.

40. Ultimate CSS Gradient Generator

A user-friendly CSS gradient generator that has dozens of great looking preset gradients. You can choose the direction of the gradient and there is an option to add IE9 support too.

We hope you’ve enjoyed this list of CSS websites and resources. What’s your favourite useful CSS resource? Please feel free to share it with us in the comments area.

(rb)

We’ve come a long way since the days of the first Macintosh and the introduction of graphical user interfaces, going from monochrome colors to millions, from estranged mice to intuitive touchscreens, from scroll bars to pinch, zoom, flick and pan. But while hardware, software and the people who use technology have all advanced dramatically over the past two decades, our approach to designing interfaces has not. Advanced technology is not just indistinguishable from magic (as Arthur C. Clarke said); it also empowers us and becomes a transparent part of our lives. While our software products have definitely empowered us tremendously, the ways by which we let interfaces integrate with our lives has remained stagnant for all these years.

In the accessibility industry, the word “inclusive� is relatively commonplace; but inclusive design principles should not be reserved for the realm of accessibility alone, because they apply to many more people than “just� the lesser-abled. Interface designers frequently think in binary terms: either all of the interface is in front of you or none of it is. But people are not binary. People aren’t either fully disabled or not at all, just like they aren’t merely old or young, dumb or smart, tall or short. People sit along a vast spectrum of who they are and what they are like; the same is true when they use interfaces, except that this spectrum is of expertise, familiarity, skill, expectations and so on.

So, why do we keep creating interfaces that ignore all of this? It’s time for us to get rid of these binary propositions!

What Is “Inclusive� In The World At Large?

In the world at large — meaning not one particular industry, country or demographic — the term “inclusive� applies to cultures in which, for example, women are as welcome to contribute their opinion as men are; in which a person’s race or sexual orientation has no bearing on their acceptance by a group; in which everyone feels safe and comfortable, and no one feels suppressed, stymied or silenced; in other words, a culture of equal opportunity. But when we apply the term to interfaces, it doesn’t mean that interfaces should be equal for everyone; rather, it means that they should be equally accessible to everyone, and equally empowering no matter what the user’s skill level or familiarity. When these two aspects are combined, the product gets the best of both worlds: it is accessible to more people, without being compromised for advanced users.

Super Mario Bros. was accessible to play for anyone, and fun (and sometimes frustrating) for all.

An excellent example of software that has done this well is in the video game genre, going back as far as 1985 with Nintendo’s Super Mario Bros. It was a game that truly anyone could pick up and play, with an invisible interface that taught you everything you needed to know to get started and become good at it. The screen would only scroll right, so you couldn’t walk left. You could jump, but standing on top of special bricks did nothing, so you would try to jump against them from below. Pipes visibly led down, so you’d try your luck with the down arrow on the direction pad. And at the end of the level, the bonus flag was raised high, encouraging competitive players to jump to the very peak for top points. All of the game’s mechanics were explained in one level, without a single instruction, tutorial or guiding word.

Many games since 1985 have not featured this principle to any significant degree. Super Mario Bros. truly was a game whose interface was equally empowering; meaning, the interface and product magnified the results of your efforts based on the (skill) level of your input. Put differently, beginners would see good results from their efforts, while advanced users would see far greater results from theirs. These principles aren’t limited to video game design either; they apply just as much to software applications and productivity tools, even websites! So, let’s start with some simple inclusive design concepts.

Language And Aesthetics

Language has an impact on everything, because it is the primary way we communicate as a species. Its significance is also frequently overlooked; a Duke University study revealed that gendered language in job listings affects a job’s appeal, independent of the type of job. There’s more: while not a single participant in the study picked up on the gendered language, each of them did find the listings more or less appealing as a result. This raises the question: how much of an impact does the language chosen for our designs have on the number of new users who sign up or the number of customers we convince to purchase our products? No good study in this area seems to exist or be readily available, but one study (of a sort) that is available is the W3C’s own resource on people’s names around the world and its effect on form design. Let’s call it a good start and do more research into how language shapes the Web.

But language is just one metric that we don’t take into consideration as often as we should. Aesthetics play a significant role as well, yet there is a lot more to aesthetics than taste and general appeal. The placement of elements, whether shapes are angular or rounded, and our use of color all affect how different genders, demographics and cultures respond to interfaces. Because no one color scheme will please everyone all the world over, the more international our (targeted) audiences are, the more fully designed our localizations will need to be.

Interface Design Legacies

In the world of interface design, being inclusive means being accepting and welcoming of the many different cognitive skills and levels of expertise among users. Historically, we have striven for the perfect middle ground between approachable and empowering. Making interfaces more intuitive plays a significant role in that process, but it often demands that we dumb interfaces down (i.e. remove features), which can be undesirable for the advanced user who wants more functionality or control. With more comprehensive interfaces, a frequent “solution� to this problem is to allow users to customize the interface to their needs. But is this truly empowering? When research shows that less than 5% of people adjust default settings, it is highly questionable whether customization and settings are truly empowering in interfaces.

Earlier, I mentioned how most interfaces offer a binary proposition: either the application is open or it isn’t. When it’s open, the entire user interface (UI) is typically available to you, whether or not you need all of it. This makes sense from a historical perspective—when all we had were physical interfaces—but it makes little sense with our modern software ones, especially since most software interfaces are far more comprehensive than a typical hardware interface.

When Steve Jobs announced the iPhone at MacWorld in 2007, he compared the yet-to-be-revealed iPhone to popular smartphones of the time, noting their main problem as being “the bottom 40%� — i.e. the hardware buttons on all of those devices. The buttons were there “whether you need them or not.� The solution, according to Apple, was a large touchscreen with fully software-based UI controls. That way, each application’s interface could be optimally designed for its particular purpose.

The point Apple made along the way was that sticking to convention is a bad idea if you want to move an industry forward. Hardware buttons used to be all a phone had. Then, they were used to supplement a tiny screen. The iPhone showed that, when it comes to innovation in interfaces, the screen should be the full surface, a blank canvas onto which software could paint any interface. The unparalleled success of the iPhone suggests that Apple has proven their point well.

But as fantastic as the iPhone may have been compared to the smartphones before it, it still suffered from this same binary UI problem. The iPhone merely shifted the problem from being device-wide to being specific to individual applications, and then it masked the remaining issues by removing features or hiding them in drill-down views, until one very elegant, simplified UI remained for each app — one that lacked the ability to become more sophisticated for users who wanted, or needed, more.

To pilots, this is a familiar view. To others, it is a smörgåsbord of buttons. Image Source: Julien Haler

To be clear, removing features is not in itself a negative. Most interfaces get better from the process, because every visible feature, every UI control adds to the overall cognitive load of the user. Think, for instance, of an airplane cockpit and its countless little controls, dials and meters covering every surface. If you are not a pilot, the mere sight of it would overwhelm you. To an experienced pilot, however, it is simply what they need in order to fly the plane. Is this really the best we can do, though? Super Mario Bros. showed us we can do better.

In software, we have a situation that calls for the kind of innovation I’m talking about. As it is, more complicated, advanced and powerful applications feature more complex interfaces, and some can be downright overwhelming to first-time users. But not everyone wants to fly a plane — some of us are just trying to get some simple work done. Application developers try to alleviate this problem with tutorials, guided tours, help screens and overlays that explain each aspect of the UI; a great solution these things are not. What we need are better interfaces, interfaces that understand that we are human beings with different needs. What we need are…

Adaptive Interfaces

For interface designers with an eye on accessibility, most of their efforts have long focused on the technical challenges faced by users. Many commentators have encouraged us to consider cognitive (or learning) disabilities as one part of the broader area of (Web) accessibility, but rarely has anyone explained how to do this. Additionally, when someone sees the term “cognitive disability,� they understandably think of the mentally handicapped. But there is a huge range of cognitively able people, and they exist not on a linear scale: a quantum physicist might have a tough time figuring out how to use a feature phone, whereas the average teenager would have no problem with it.

People invest in an application (and, thus, its interface) in varying degrees, depending on how important the product is to their daily lives. This means that your interface should cater to varying degrees of investment in addition to differing levels of expertise and familiarity.

In an interface, each additional UI element increases complexity and asks for a deeper investment on the user’s part. This is why invisible interfaces (like the one in Super Mario) are so powerful: an interface that appears only when needed reduces the cognitive load, reduces the investment required to understand the product, and makes it easier for the user to focus on the task at hand. A button that is relevant only in certain contexts should be visible only in those contexts.

But we can take this principle to a level even beyond that. An interface that is truly inclusive of all kinds of users is one that begins with only the fundamentals and then evolves and adapts alongside the user. During this process, the interface can both grow and decay, acquiring more features and controls as the user becomes more fluent in using it, and dropping or reducing the prominence of UI controls that the user does not use much, if at all.

Doing this automatically also makes more sense than offering the user a large number of options to customize the UI, for two reasons: first, users shouldn’t be expected to spend a lot of time making an interface usable to them; secondly, people might not always know exactly what they want, but their behavior might make clear what they need. A system that intelligently measures what the user needs in order to deliver the most efficient, effective yet still understandable interface could allow such a thing. A highly effective interface is one that can be changed not to how each user wants it, but to how each user needs it.

Of course, measuring the cognitive skill of a user is difficult, and even then it can only be approximated. Certain aspects of the user’s behavior can be measured, which helps to inform us about how familiar the user is with the interface overall and how fluent they are in using it. The speed with which a user navigates an interface and uses or explores its features is a good metric for how comfortable they are with the interface. The frequency of their use of “Helpâ€� and “Undoâ€� features suggests a certain confidence level. Users of keyboard shortcuts are almost certainly looking for more powerful features, and someone who uses quotes and AND and OR in their search queries is likely technically minded. These and many other measurable aspects of people’s behavior can help shape your application’s interface, which can then be adapted to better suit the needs of users.

The Nest thermostat learns from you.

This is not the end of the story; rather, it is only the beginning. Tony Fadell’s new product, Nest, is a great example of an adaptive interface in the real world. The Nest Thermostat learns from your behavior patterns as you go about your daily and weekly routines, and it becomes predictive, so that you need to adjust the thermostat less frequently the more you use it.

That’s but one example. The possibilities open up even more with inclusive and adaptive interfaces. One type of user might need Feature A very frequently, whereas another might need Feature B instead; a truly inclusive interface would adapt to these needs and be equally powerful for these two different types of users.

Conclusion

We’ve overcome the various technical challenges of interfaces and designs through Web standards, accessibility and ARIA, responsive Web design principles and touchscreen devices. But we have focused so much on these technical challenges that we’ve almost lost sight of innovating the human aspects of interface and design. The next stage of evolution for our industry is to explore how to make our applications and products more inclusive, taking into account the vast spectrum of differences in our audience, and to make our interfaces smarter so that they serve a wider range of people more effectively. Let our exploration of inclusive design begin!

(al) (il)

---

© Faruk Ates for Smashing Magazine, 2012.

As we are always looking for ways to show our appreciation to our readers, and provide you all with exciting and useful web design and development related resources we have a special treat that hits both of those marks. Today we have a brand new exclusive freebie for Noupe and all fans of fresh and sharply designed social media icons. From the creative mind of one of our regular Illustrator experts, Jasmina Stanojevic, comes this handy new set of vector designs.

So feast your eyes on this new exclusive freebie that can add some flair and style to your web design projects, and be sure to download it for your arsenal of resources. We hope that you will all enjoy and get some use out of these awesome icons!

The Icons

This social media icon set was created in Illustrator CS5 and contains 25 scalable vectors complete with semi-transparent shadows for use on various types of backgrounds. The download contains a .zip file with the original .ai file and an .eps version as well. Icons are available for use in personal and commercial projects.

Download

Designer Bio

Jasmina is a self taught vector illustrator from Serbia who has been working as a freelance designer for over five years now. Her biggest passion is in vector illustrations and motion graphic design. In her spare time she likes to read comic books and playing Call of Duty 2. You can check out her portfolio for more and also follow her on Twitter.

(rb)

Nearly every designer loves freshly-made, free Photoshop brushes that can be used in your designs as it is one of the most widely used graphics programs on the market. It is what some would call an incontrovertible truth. This is the reason why designers are constantly browsing the web in search of all the latest brushes to add them to their arsenal.

We have previously posted many collections of high quality Photoshop brush packs, and today we are bringing our readers another fine collection of over 50 fresh Photoshop brush sets that are sure to delight even the most discerning of designers. These high quality brushes are simply out of this world, and are all free to download and use in your projects.

This round up includes 50+ packs containing more than 500 brushes of various styles and for a range of effects. With some grunge, light effects, ornamental, abstract, paint strokes, paper, and splatter type brushes, there is a little something for everyone. Enjoy!

Note: Licenses of every brush set varies, so be sure to check that information before using them.

Photoshop Brush Packs

Glowing Swirl Brushes ( Download )
This high quality set contains 8 high resolution brushes to add glowing swirl effects.

Free Faded Splatters
This free brush set contains 10 faded ink splatters. Download and enjoy!

Grass and Plant SET 3 PS ( Download )
This set contains 10 top quality grass and plant based brushes.

Sujune Diablo
Download this set of 9 brushes to give your designs a bit of a grunge and abstract look.

Stone Brushes ( Download )
This set contains 11 high resolution stone brushes for adding some natural grit and stone patterns.

Celestica Brushes
This set contains 9 brushes that you can use to add crystalline patterns to your design.

Blow Brush PS
If you are looking for some awesome blow brushes then this set of 4 unique brushes is simply a must have.

Ink Smear Brushes ( Download )
This set contains 5 brushes that were made by dipping a Q-Tip in red food coloring then simply “drawing� on a piece of paper with it. Each brush is 2500px wide. Enjoy!

Rough Background ( Download )
Incredibly useful grunge brushes that will fill up your backgrounds with a coarse texture.

Grunge Border PS Brush Set ( Download )
This set contains 11 free high resolution grunge borders. The grunge lines were created by rubbing a graphite stick over straight edges of different objects.

Bokeh Brushes ( Download )
With this set, you will get 8 high quality bokeh brushes.

Ornamental Butterflies 2
This is an awesome set of Photoshop brushes that contains 35 excellent and high resolution brushes that you can use to add beautiful butterflies to your designs.

PS Cloud Brushes ( Download )
This set that contains 12 brushes, you can use to create clouds in your designs with ease.

Antique Postcard Brushes ( Download )
This set contains 6 hi-res(2500px) antique postcard Photoshop Brushes. This can act as templates for your design or as a way to add some age and texture to your work.

Number of Water ( Download )
If you want to create numbers out of water, this set of brushes was made for you.

KaRTaL Butterfly Brushes ( Download )
Here you will find 3 brushes for CS5 that you can use to add beautiful butterflies to your works.

APs Brushes: Scar Face
These 12 brushes will help you create scarred faces quite easily and in no time.

Abstract Brushes ( Download )
Fifteen medium to large scaled abstract brushes designed especially to add energy and interest to your artwork. A great tool for any abstract piece.

Plaztique’s Lace Brushes ( Download )
This set contains 5 pixel brushes perfect for creating lace trimmings or fancy borders.

Ink Splatter Brush Set
In this brush set, you will find 20x Photoshop splatter brushes to create flawless splatter effects.

Fractal brushes ( Download )
This set contains 12 large fractal brushes that can be used for all kinds of web projects.

Swoosh Brush Pack v.1 ( Download )
We all know how hard it can be to create print worthy swooshes, well now with this set you can simply click and colorize.

Different By Design Abstract Brush Pack ( Download )
This set contains 6 simple and hi-res brushes. This is a freeware brush pack.

Love Birds Brushes ( Download )
This set contains 30 love birds brushes, they were created in Adobe Photoshop CS4 & Inkscape. They are free for personal & commercial use.

Snowflake Brushes ( Download )
This set contains twenty-four individual snowflakes, with four variations to each.

River Side Brushes ( Download )
This exclusive brush has been designed to be used in CS5 in order to add a beautiful river side effect.

Shoujo Wonderland Brushes
This excellent set contains 24 Photoshop brushes that you can use wherever you want.

Subtle Wood Brushes ( Download )
This set contains five subtle woodgrain Photoshop brushes that can add some quick surface and texture to your designs. They offer some great attributes like knotholes and some different grain patterns. Each brush is 2500×2000.

Ink Splatter Brushes ( Download )
This set contains 5 hi res ink splatter brushes, each brush is 2500×2000.

Abstract Brush Set ( Download )
This set contains 2 exceptional abstract brushes that every designer must have.

Trend Element ( Download )
This awesome set contains 4 brushes to make your designs trendier and stylish.

Scratches Photoshop Brushes ( Download )
This set of Photoshop brushes contains 14 scratch patterns that you may prove to be just what you are looking for.

Crane Brushes ( Download )
These 2 brushes are perfect for adding some visually alluring effects to your designs and make them look more appealing.

Bokeh Brushes ( Download )
These 5 versatile and re-usable bokeh brushes will be a valued addition to your toolbox. Each brush is 2500px wide.

Melting Texture Border Brush ( Download )
This is a collection of 9 melting effects texture borders created in Photoshop CS3.

Thin Smoke Brushes ( Download )
Download this useful set of Photoshop brushes if you need some high quality thin smoke brushes.

Brick Photoshop Brushes ( Download )
This set contains 6 diverse and hi-res brick wall brushes. Each brush is 2500×2000.

Industrial Zone Grunge Brushes ( Download )
The set includes various industrial type brushes, from grunge/floor textures to gears, and from machines to industrial buildings.

Halftone Brushes Pack 2 ( Download )
Pack of 17 halftone Photoshop brushes free to download.

Psycho Grunge ( Download )
It contains 99 vector Photoshop brushes of 2500px resolution. Download for free.

Floral Fireworks ( Download )
In this set, you will find 2 brushes for PS to create stunning fireworks effects in your designs.

Grungy Arrow Brushes ( Download )
This pack contains 25 grungy arrow brushes made with Photoshop CS4. There are different types of arrow symbols so you can easily integrate them in your designs.

Free Falling Sparks Brush Set ( Download )
This free Photoshop brush set contains 10 falling sparks brushes. This set is great for creating abstract lighting.

Line Art ( Download )
This set contains 5 line art Photoshop brushes for adding artistic lines in your projects.

Concrete Wall Brushes ( Download )
This set contains 7 hi-res concrete brushes. Each brush is 2500×1800 and will add some instant grunge, texture, and atmosphere to your designs.

Star ( Download )
Download this brush set and start creating astonishing stars in no time.

Watercolor and Salt Photoshop Brush Set ( Download )
This brush set contains 10 watercolor splatters over salt. The salt soaks up the watercolor giving it an interesting texture.

Noise and Dust A Free Photoshop Brush Set ( Download )
An awesome brush set for adding a bit of dust and noise to your designs.

Ribbon Brushes ( Download )
Download 14 large ribbon brushes to add to your designing tools.

Lightning Brushes Photoshop ( Download )
Create awesome lightning effects in your designs with this outstanding set of Photoshop brushes that contains 19 variations.

Moon Brushes ( Download )
This set of brushes will allow you to create the different phases of the moon using the 10 different brushes it includes.

Cloud Brushes ( Download )
This set contains 10 high-resolution cloud brushes for Photoshop. Brush sizes range from 879px to 2295px.

Scratchy Grunge Brushes ( Download )
This set contains 7 scratchy grunge brushes, these brushes come from an interesting source, microscopic photos of some hand-scratched 35mm film.

(rb)

Product pages for e-commerce websites are often rife with ambitions: recreate the brick-and-mortar shopping experience, provide users with every last drop of product information, build a brand persona, establish a seamless check-out process.

As the “strong link in any conversion,� product pages have so much potential. We can create user-centric descriptions and layouts that are downright appropriate in their effectiveness: as Erin Kissane says, “offering [users] precisely what they need, exactly when they need it, and in just the right form.�

Beyond that, a user-centered creation process for product pages can help brand the information as well as reduce the content clutter that so often bogs down retail websites.

User-centric product copy garners positive results because it anticipates the user’s immediate reaction. As Dr. Timo Saari and Dr. Marko Turpeinen, authors of “Towards Psychological Customization of Information for Individuals and Social Groupsâ€� suggest, individual differences in processing information implicates dramatic variances in type and/or intensity of psychological effects, such as positive emotion, persuasion, and depth of learning (2).

We can describe products in various ways. Highlighting certain aspects of a product will elicit different reactions from various users. Gearing product descriptions to a particular audience encourages those users to effectively process the information, heightens persuasion, and increases the potential to predict what the users want (but didn’t know they needed). The effort required of user-centric product descriptions demands that we understand how certain descriptors, contexts and inclusions of details affect the target user, and that we then put our discoveries into action.

This article offers a user-centric guide to producing product pages and provides examples of successful e-commerce websites that present user-centric approaches to product page descriptions and layouts.

Get To Know Your User

Approaching product page description and layout from a user-centric perspective demands that we have a rich understanding of the target user. As Saari and Turpeinen suggest, Web customization starts with some type of model, be it individual, group or community. With your user models in place, you can best assess what they need and how to write for them.

In her book Letting Go of the Words, Web usability expert Janice Redish suggests these strategies for getting to know your target user:

• Scope the email responses that come through the website’s “Contact Us” form and other feedback links. Consider the profiles of the senders. You can discover commonalities in lifestyle, technological capability, education level and communication preference through these channels.
• Talk to the customer service or marketing employees at your company. Don’t approach them with a broad demand to describe the typical client. Rather, ask questions about their interactions with clients. Who is calling in? Who is stopping by the office? What queries and complaints are common?
• Offer short questionnaires to visitors to the website. Redish suggests asking people “a few questions about themselves, why they came to the site, and whether they were successful in finding what they came for.”
• If possible, acquire a sense of the client simply by observing the people who walk through the front doors of the business. This is a great way to pick up on key phrases, jargon, emotional behavior and demographics.

Once you’re able to confidently brainstorm the major characteristics of your target user or group, then developing the models to guide the writing process comes next.

Keep in mind that gathering and compiling this information can take as little or as big an investment of time and money as you (or the client) can afford and still be effective. As Leonard Souza recently noted, even stopping in a nearby coffee shop to engage five to ten people in your target demographic can yield useful insight. With a bit of flexibility, you can find learning opportunities that are convenient and on the cheap.

The models created from your user research can be fashioned into personas, which Souza describes as “tools for creating empathy among everyone in the project.” Use personas to guide user-centric copywriting by establishing very specific user goals and preferences.

A persona is a fictional person amalgamated from the characteristics of your target user. You can get creative here with the persona’s name and image, but not too creative. The persona must be mindfully constructed according to the age, education, family status and other personal details culled from your research.

Now that you have a persona to please as you construct a product description and layout hierarchy, staying user-centric is that much easier. Take a look at the product description from Lululemon, a British Columbia-based yoga-wear retailer:

Product description from Shop.lululemon.com

The product description assumes that the reader knows a specific set of jargon: How many non-yoga participants would know what downward-dog means? Or “pipes�, as the “Key Features� section refers to arms? This content drives right to the needs and preferences of a very specific user. She wants warmth (four of the “Key Features� note the thermal quality of the product), convenience (pre-shrunk fabric, easy layering), and motivation for an active lifestyle (she recognizes the yoga jargon and enjoys giving her “pipes some air time�).

A rich understanding of the user has made this product page effective and delightfully specific to both the user and the brand.

Master S.M.A.R.T. Content and Layout

Without specific, measurable, actionable, relevant and trackable user goals driving the copy on the product page, the information will sag. I draw here from Dickson Fong’s enlightening article “The S.M.A.R.T. User Experience Strategy“ to suggest that care should be taken to develop user goals that guide the writing process for product pages.

The S.M.A.R.T. formula will keep you on track as you plot out product details and decide what descriptive angle to use.

Fong provides an excellent user goal for a product page: “I want to learn more about this product’s design, features and specifications to determine whether it fits my budget, needs and preferences.�

This will help you create a checklist when assessing what to present first and what to offer as optional information when structuring the layout of the page (more about that in the “Create Information Hierarchies� section below). It provides direction when you’re writing content and helps you focus on the benefits to the user. And as Darlene Maciuba-Koppel suggests in The Web Writer’s Guide, “In copywriting, your end goal is to sell benefits, not products, in your copy.�

For users, benefits and accomplished goals go hand in hand. A product that doesn’t fit their budget, needs or preferences offers them little benefit. So, in order for S.M.A.R.T. goal-driven product pages to serve user-centric purposes, the text must follow suit. Fong suggests presenting relevant content details that are specific to the consumer of that product type.

Let’s take Fong’s S.M.A.R.T. user goal for product pages and assess the specifications at play on the following two pages from Dell:

Product page for Alienware on Dell.com

Featured on Alienware, Dell’s computer subsidiary for high-performance gaming, the description for this desktop computer has been tailored to the primary browsing goal of a very specific user. The needs and preferences of the user have already been predicted in the bullet-point outline, highlighting optimum graphics and top-notch liquid-cooling capabilities, thus harmonizing the checklist of features with a checklist of benefits for the user. A number of the product’s features could have been highlighted, but for optimal ease, the specifics most likely to help the user accomplish their goals are featured.

With the next Dell desktop computer, another goal of the target user is covered in the description:

Product page description for Inspiron 570 on Dell.com

With a noticeable absence of technical details and a heavy emphasis on product personalization, this description plays to a user with very different needs than the Alienware shopper’s. Even the tabs have been re-arranged to best meet the user’s goals. The Inspiron 570 page shows “Customer ratings� as the first tab, while the Alienware page offers “Design� first and then “Tech specs.�

These decisions are all geared to accomplishing very specific user goals: find the required information and assess the benefits.

Use Personal Pronouns

Consider again Dell’s description of its Inspiron 570:

Make It Yours

The Inspiron 570 desktop is everything you want and nothing you don’t. Available in vibrant colors, so you can complement your style or stand out from the crowd. Plus, you can build your desktop according to your needs with a choice of multiple AMD processors and NVIDIA ATI graphics cards as well as other customizable features. So whether you are surfing the Web, emailing friends and family, downloading music and photos or blogging about it all, the Inspiron 570 desktop can handle it.

Your wants, your style, your needs, your friends and your Internet past-times. Including the title, eight instances of “you� or “your� turn up in this 86-word segment!

Personal pronouns in product descriptions are perfectly appropriate and quite effective at engaging users, because, as Redish states, “People are much more likely to take in [messages] if you write with ‘you’ because they can see themselves in the text.â€�

With Dell’s content, the personal pronouns target a specific user (one who is savvy enough to download music and email and who is interested in customization and feeling unique), while also managing a broad gender appeal.

Outdoor equipment retailer REI employs personal pronouns in its online product descriptions, creating dynamic scenarios aimed at a specific user:

Product description for REI.com

The description asserts that this canoe will help you navigate a waterway that “you’ve recently noticed,� anticipating a specific user reality (or dream).

The product showcase is devoted to the user’s needs and showing how the user will benefit from purchasing the canoe. Using “you� is the clearest and most direct way for this retailer to grab the user’s attention and to convince them, at any time of the year, that this canoe is the right buy.

Angie King backs this up in her article “Personal Pronouns: It’s Okay to Own Your Web Copy.� She suggests that using first- and second-person pronouns helps users connect with the content, and “reflect[s] the way real people write and speak,� fostering an immediate connection.

For a product description to speak directly to a specific user or group, the “you’s� should flow freely.

Use Information Hierarchies

Adopting a user-centric approach to the layout and copy of product pages helps you tackle the challenge articulated by Kean Richmond: “How do you cram so much information into a single Web page?�

In addition to technical specifications, shipping information, item details and preference options (and don’t forget that compelling product description), product pages must also list every describable service that the product performs for its user, including customer benefits (as Darlene Maciuba-Koppel explains, too).

By all means, provide the user with every last detail possible. Answer every conceivable question, or make the answer visible for discovery. Do so with information hierarchies that are based on a rich understanding of targeted users. This will keep each page tidy and drive users to complete your business goals.

In a structure in which, as Kean Richmond states, “all the important information is at the top and [the rest] flows naturally down the page,� details that might not be a top priority for the target user can be tucked into optional tabs or presented at the bottom of the page. The key is to gauge the structure of the page with the sensibilities of the targeted user in mind.

Look At User Context

Here’s where you become a mind-reader of sorts. Erin Kissane points to the approach of content strategist Daniel Eizan in understanding what specific users need to see on the page in order to be drawn into the information. Eizan looks at the user’s context to gauge their Web-browsing behaviors. Eizan asks, What are they doing? How are they feeling? What are they capable of?

Establishing user context aids in planning an information hierarchy, and it is demonstrated by small and large e-retailers. On the big-box side, we have Walmart:

By making the price and product name (including the unit number per order) immediately visible, Walmart has anticipated a possible user context. A Walmart visitor searching for granola bars has perhaps purchased the product before. With the unit price made visible, perhaps the anticipated user is judging the product based on whether this box size will suffice.

Details such as “Item description� and “Specifications� are options that are convenient to the user who is making a large order of a familiar product.

The user’s context shapes the hierarchy: the user seeks a quick calculation of units per product versus price. The targeted user does not immediately need an ingredients list, allergy information or a description of the flavor. But if they do, they are available in a neat options-based format.

Walmart has built its reputation on “Everyday low prices,� and the brick-and-mortar philosophy has crossed over to its website. Walmart anticipates users who have some familiarity with its products and who have expectations of certain price points. These factors play into the information hierarchy across the website.

Now look at the product page of a different kind of retailer, nutrition bar manufacturer Larabar:

Cashew Cookie product page from Larabar.com

Here is an online presentation of a retail product that is similar to Walmart’s Nature Valley granola bar (though some might argue otherwise). However, the information hierarchy clearly speaks to a different user — a specific user, one who might be looking for gluten-free snack foods or a vegan protein solution. The Larabar user’s context is much less urgent than the Walmart user’s. The product page does not reveal pricing or unit number. Ingredients are visible here, with simple images that (when scrolled over) provide additional nutritional information.

The anticipated user has more time to peruse, to browse several varieties of product, and to read the delightful descriptions that help them imagine the tastes and textures of the bars.

This user might be very much like the targeted Walmart user but is likely visiting the Larabar website in a different context. This product page offers more immediate information on nutrition and taste, selling to a user who is perhaps hunting for a solution to a dietary restriction or for a healthy snack alternative.

However, the red-boxed “Buy Now� is positioned in a memorable, convenient spot on the page, leaving no guessing for the user, who, after reading a description of this healthy bar full of “rich and creamy flavor,� will likely click it to find out the purchasing options.

With these two pages for (arguably) similar products, we see two completely different ways to structure product details.

Both are effective — for their targeted users. A person seeking gluten-free snacks for a camping trip might be frustrated having to search through the hundreds of granola bar options on Walmart’s website. But they wouldn’t be going there in the first place; they would use a search engine and would find Larabar.

Information hierarchy solves the content-overload challenge that can overshadow the process of constructing a product page, and it is an opportunity to bolster user-centric copy and layout. As mentioned, the key is to gauge the user’s context.

Conclusion

While a user-centric consideration of product pages is not the only way to go, it does provide a focused approach that has appeared to be effective for some pretty successful e-commerce players. Consistency in product pages is key, especially when building a brand’s presence; a reliable guide can ease the writing process. The user-centric method does require some primary research, but this lays a sturdy foundation by which to gauge every bit of content on the page according to how it benefits the user.

As Maciuba-Koppel says, as a content writer or designer, your goal should not be to sell products, but to sell benefits.

Now watch the conversions multiply.

(al) (fi)

References

• Writing for the Web: Creating Compelling Web Content Using Words, Pictures And Sound Lynda Felder (New Riders: 2011)
• “The S.M.A.R.T. User Experience Strategyâ€� Dickson Fong (Smashing Magazine)
• “Personal pronouns: It’s okay to own your Web copyâ€� Angie King (Brain Traffic)
• “A Checklist for Content Workâ€� Erin Kissane (A List Apart)
• “Writing Copy that Works for a Livingâ€� Erin Kissane (A List Apart)
• The web-writer’s guideDarlene Maciuba-Koppel (FocaPress: 2004)
• “Letting Go Of The Wordsâ€�: Writing Web Content that Works. Janice Redish (Morgan Kaufman Publishers)
• “Anatomy of an Effective Product Page Designâ€� Kean Richmond (Six Revisions)

---

© Sarah Bauer for Smashing Magazine, 2012.