Yes, I know it’s Wednesday but I didn’t have my laptop with me on Monday and then left the notebook that I recorded interesting stuff in on Monday in the hotel yesterday. So here we go, a day late. I’ll do this as a series as I get them in.

Designing the Next Generation of Web Apps

(Jesse James Garrett and Jeffery Veen)

Jesse and Jeff spent this session dissecting Jesse’s Elements graph from the bottom up and then from the top down again.

Here’s the bullet points that I picked up:

• There are two ways of approaching the web:
  • Web as information - the web as a giant newspaper, or as a collection of hyperlinks
  • Web as application - the web as a giant database with input/output mechanisms

  These approaches are both valid, and should be considered during all steps in designing applications for the web. Becoming too rooted in one mindset or the other can cause problems in the design.

• There is a developing change in perspective for web designers. It used to be that designing a site was all about complete control of the user’s experience, to the level of pixel positioning. Now successful designs treat “Users as Peers”. Users need to have control over their experience within boundaries set by the scope of what the application is intended to do. Users should feel as if they have creative control in organizing how information is presented to them, at some level in themeing, colors and fonts, but also even in site organization. Designers are creating a container for the user to have an experience in.
• Trust: it takes just 1/20^th of a second for a site to have made an impression on us, either positive or negative. From that point, we are biased and all experience with the site is colored by that impression. So aesthetics are important. Even the most well designed informationally architected site may not be successful if it is not appealing visually.

  Jeff refered to this as “Emotional Design”. If a site is displeasing, then people will not be willing to invest the effort to learn how to use it, but in studies, they’ve noticed that people will keep trying at sites they find visually engaging even if they are not getting the results they want.

  Jeff said that there have been studies that show that we tend to anthropomorphize web sites (or anthing that we’re exposed to that has interactivity). It’s a different psychology from designing products or art. Just as you don’t want to spend time with a person that treats you badly, you don’t want to stay in an abusive relationship with a website.

• Jesse gave his modified version of what AJAX is. He said that his original article (where he coined the term) was not intended for a techinical audience that would take it so literally.
  Really, there are only two things that AJAX is, regardless of what language or protocol is used:
  1. An asynchronous interaction model
  2. Using browser-native technologies
• Web 2.0: What’s changed is not that we have new technologies (AJAX, RSS, etc) to work with, but that we are now enabled by those technologies to re-explore interactional design.
• Jesse: “What our job is, fundamentally, is getting into the heads of strangers.”
• Usability is about training users to use your design as quickly as possible because you don’t have their attention for long (1/20th of a second). This means that you have to be conscious of reusing standards, which is difficult as stadards for Web 2.0 are still being defined. When is the cost of innovation (training users to a new paradigm) worth breaking with convention? This is subjective, but the best answer is “when it makes sense!”
• Usability testing should be used for “checking our thinking” verses as a tool for discovering where innovations need to be made.
• Recoverability is extremely important for todays web designs. Users should not be penalized for exploring. People are cautious of clicking a link because the cost of clicking a wrong link (especially on a mobile device) is often very high, resulting in loss of time or data or both. Making users comfortable that they can’t make an unrecoverable error is crucial. Users need to be allowed to “play” without consequences.

Here are the slides, but it’s a big file so be forwarned!

Feeling grey today? Need a little color inspiration for that new web design? Here’s a list of 20 color palette tools and generators that will help you color your world (or at least your web pages) a little brighter.

Well Styled - Color Generator 2

This is one of my favorites to play with. I really like the way it is laid out and organized. Click on a color on the color wheel to have it generate a palette for you. There are controls for four different color relationships to experiment with as well as several different saturations, and even a checkbox to only show “web safe” colors and display the colors as viewed by people with different types of color vision disorders. There’s no way to export the palette but you can grab a permalink to it.

Colr.org

This one wins the award for tool you can lose the most time playing with. Its kind of like a socialware site for colors. A picture is displayed at the top of the page that you can change if you desire. You can grab a random color or a random palette from the image and then tag the color or palette. There’s also a running list of recently added/tagged palettes that you can select and add more tags to. And, of course, you can look up palettes by tags as well. Its total fun for the folksonomy addict.

NetCocktail

More of a place for inspiration than generation… This site looks at popular and “well designed” sites and creates a profile of their color palettes. Some interesting browsing and tangents to follow.

Return of Design - Web Color Schemes

Not as flashy as NetCocktail but also a repository of web schemes from popular and well designed websites. You can click on the palette in the list to get more detail and scheme variations. This page is part of a blog that has some other good design and color information.

Color Blender

This is another one of my favorites that I use a good bit. You enter two hex values and choose a number of stops and it will generate a list of that many the colors in between the original values. This is really invaluable when you have a color you need to make a little lighter or darker, just choose black or white as the second color.

Style Phreak - Color Match Redux

Simple, but handy, 9 color palette generator from either an RGB Slider or by entering a hex value. Palettes are exportable to Photoshop, Illustrator or plain text.

ColorCombos.com

This site has a “combo tester” where you can play with colors to come up with a pleasing palette, as well as a tool that will take a url and pull the predominant colors from it to construct a palette and also a library of all the palettes that have been generated or “lifted” on the site. You can also subscribe to the palettes as they are generated by RSS and search by tag.

Spin the Color Wheel

Gamble with your colors… Spin the wheel to select random colors which you can then “hold” or not and spin again. When you’ve found 3 you like, choose what they’d be used for on your web page and then see a preview of your new combination. Fun! Wish you could pick more than 3 though.

Color Wheel

Color Wheel generates sets of colors to use in a color scheme using a number of standard methods: Red/Green/Blue, Angle, and Tint/Shade.

Color Whore

Self proclaimed “Directory of nice colors”. You can browse colors that people have added and classified by main color family and saturation.

Color Blender

Create “blends” with a set of sliders and export them to Photoshop, Illustrator or email it to yourself. There are also tools to do Pantone matches.

Red Alt: I Like Your Colors

Enter a URL and it extracts the colors and their hex codes from the CSS stylesheet that was referenced as well as including a link to the file that it pulled the colors from.

Steel Dolphin Color Scheme Tool

Flash tool that generates a 5-color palette from the “seed” hex code you provide or by adjusting several different sliders.

Color Palette Generator

This tool lets you upload an image and generates a palette for you based on the colors that are predominant in the image. You can’t upload anything larger than 15K. You can also choose from other images/palettes that have already been uploaded. Nice tool.

Color Schemer Online v2

A 16-color palette explorer that I haven’t quite figured out yet. It’s not very clear how the colors relate to each other and 16 of them at about the same intensity is a little too much for a viable scheme, but here it is never-the-less.

Color Schemer Gallery

This site is related to the tool above. It is a gallery of schemes that have been created and uploaded by users of the Color Schemer software. Some nice schemes to browse through here, organized by tags. If you have the software you can download the schemes to use in your projects.

4096 Color Wheel

This site allow you to hover over a color wheel and displays the web-safe, “web-smart” and unsafe hex versions of the color. Clicking on the wheel records the color to the palette on the left which can be saved as an image as export.

Color Selector

This page is a bit confusing but useful once you get the hang of it. Mousing over the numbers on the left side controls the background color. The right side controls the font color. The hex character positions are represented vertically on the page. The page referenced shows web-safe 216 colors, but there is also a page to play with 16 million colors.

VisiBone Webmaster’s Color Lab

Simple tool that lets you click on colors in the wheel to the top left and displays them to the right with all their information such as hex and RGB values. You can keep clicking on items until you’ve got a suitable scheme.

CSS Color Chart

Not so much a tool as a very handy reference. Lists the name, hex value and displays the color for all the “predefined” colors you can use with CSS. Definitely useful.

And as a bonus, here’s a few color web toys that I like to play with. They’re not really useful tools but good inspiration or just fun!

Etsy’s #Goods

A flash site that pulls up pictures of Etsy’s merchandise by color.

Color Quiz

This is a personality quiz where you pick the colors you’re most attracted to. I have taken it at several different points in my life and been amazed at how accurately it assessed my situation and mood. Definitely worth checking out.

Colorstrology

Similar to Astrology (and probably with as much credibility), this site analyzes your personality by your birthdate and the color supposedly associated with it. Maybe silly, but still interesting.

Squared Circle Colr Pickr

A nice Flicker based Flash app that pulls up pictures from the “Squared Circle” group that match the color you pick on the color wheel. A good way to kill some time browsing.

Enjoy!

CSS is “teh awesome”. Being able to control the look and feel of an entire website with one file while simultaneously keeping your markup clean and creating a separation between presentation and code is a wonderful thing. But sometimes, especially for beginners, CSS itself isn’t necessarily used or written in the most efficient way. There’s a powerful feature in CSS that I don’t see a lot of people using or talking about and I thought I’d share it since it’s been useful to me in several projects.

Most people know about grouping: you can write your CSS classes with multiple selectors if they will share the same attributes.

Grouping can be useful and help keep your CSS from getting bulky with duplicate classes, but there’s an opposite approach that can also reduce duplication of code while providing some other benefits.

I don’t know if there’s an actual name for this practice but I call it “aggregation”. You may create CSS classes for specific attributes and apply them simultaneously to your HTML elements. The styles will aggregate and all of them will then display on the element:

You can apply the classes to HTML elements by separating them with spaces in the class attribute.

The above code will result in something like this:

Why is this useful? Because you can separate things like changing the colors of an element from it’s layout information and only apply the styles to the element as needed.

(more…)