As is true in typography, as is in music, and other forms of human creative expression, the delicate balance between fill and empty spaces, between sound and silence, or isolation and convergence is the soul of a great piece of art.

The Grid System approach can help you organizing your content by making you look to your drawing from the perspective of shapes and empty spaces that need to be balanced, using hidden lines and simple grids that guides and serves as a hidden (sometimes visible) proportional structure.

This month, Inspiration Charge covers some great stuff about Grid systems on design:

• Design by Grid, showcase of sites
• Grid Systems in Graphic Design, by Josef Muller-Brockmann, Josef Muller - Brockmann
• Modulor - Le Corbusier
• Fibonacci Numbers - Wikipedia
• Designing Grid Systems For Flash, AisleOne - Antonio Carusone
• Grid Systems: Principles of Organizing Type, by Kimberly Elam
• Grid Computing… and Design - Subtraction
• Vitruvian Proportion - Leonardo Da Vinci
• Presentation: Grids are Good - Subtraction
• Canons of page construction, Wikipedia
• Setting Type on the Web to a Baseline Grid, by Wilson Miner
• Five simple steps to designing grid systems - Series, Mark Boulton
• Design and the Divine Proportion
• Grid - Mindplay
• Why use a grid? - Mark Boulton
• Adaptive Grid System based on the Golden Section - Nick Cowie
• Compose to a Vertical Rhythm by Richard Rutter
• Layout Grid Bookmarklet - Andy Budd
• Making and Breaking the Grid: A Graphic Design Layout Workshop, by Timothy Samara
• Syncotype your Baselines, Rob Goodlatte
• Grid and Column Designs, Web Designer Wall
• Columns & Grids, Dave Shea’s Mezzoblue
• Thinking Outside the Grid, Molly E. Holzschlag
• The Golden Ratio, Wikipedia
• YUI Grid Builder

Do you have a particular grid system you use? A great book or website? Ideas? Please, share!

Some solutions I went by:

• Print everything? Carry books? No, definitely no. I love printed books, but I would carry a lot of material, would be hard to organize, to transfer information in and out, and wouldn’t save the rain forest.
• Use my laptop computer? Well, sort of. But wouldn’t be so comfortable reading it while people staring at me. No discretion at all.
• Mobile phone? Sounds interesting. Discrete, tiny, and can be integrated with my development environment. However, so tiny that wouldn’t give me the same agility when browsing with mouse or keyboard.

Developing a mobile cheat sheet

I picked mobile phones and smart phones up for a test. Did some basic mockups, and strived to get something running quickly, something comfortable to use: I still had the agility problem. Selecting and clicking was painfully slow, and I had a huge amount of information to handle on the same tiny little screen. Then I remembered the iPhone / iPod Touch user interface proposal: touchable interfaces. Better because faster than pointing and clicking, it solved the problem of agility instantly.

A few days ago I posted the Inspiration Charge - iPhone SDK. That was my initial reference, where I could find guidelines on producing content for the iPhone / iPod Touch.

The iPhone is great, but the mobile market isn’t only iPhone, so I had to have other sources of information. A great reading is the Mobile Web Design, by Cameron Moll, a must-read book if you plan to deliver standards-based content to mobile devices. I got my copy by just 17 USD, and definitely worth it :).

Basic information heuristics

I think information should be accessible anywhere I go. Should be portable, fast to scan and read. It also must be easy for me to update, easy to transfer in and out to/from my laptop computer, and other development environments I use daily. Finally, it must be easy to use, and add value to the community of designers/developers. Sounds hard to do? Sure it is, but what I have in mind was the KISS approach: Keep it simple, stupid, heavily inspired by the Getting Real book.

Imagine being able to access your handy jQuery cheat sheet, but now anywhere. Just in case… here are some clickable screenshots:

Access now from your iPhone / iPod Touch, desktop browser, or mobile device: http://labs.colorcharge.com/jtouch. “It works like magic” - Steve Jobs.

Like it? Consider Del.icio.us it or Digg it!

“Every once in a while, a revolutionary product comes along. That changes everything.” - Steve Jobs.

That was said one year ago, on the first public announcement of iPhone. No matter how forced that sentence looks; after one year, after using both iPhone and iPod Touch daily, all the market/enterprise changes… that was true, very true. Who wants to be left out of the party?

Can you imagine how our user interactions paradigms changed and are going to change from now? How this mark a watershed in user experience design? Well, as I heard on the keynote, there’s never been a better time to change the future, and the iPhone wants to help you on that. Here is the (short but handy) monthly list:

• Keynote - iPhone SDK - understand why you are (and will be) hearing so much “hype” (again)
• iPhone Software Development Kit (SDK) Download (2GB download, don’t be in a hurry) - After registering with an Apple Id, iTunes Account, or whatever it takes, you’ll be presented to tons of content and videos to help you developer, build your dream iPhone application.
• Getting Started with iPhone Development - for beginners, who don’t know where to start from.
• iPhone Human Interface Guidelines - change how you understand and think User Experience for mobile plataforms
• Safari Web Content for iPhone Guidelines - helping you to match your content to small screens
• Daring Fireball - iPhone Typography - when you finally want to get your hands dirty, you’ll find this useful
• iPhone Programming Reference Library - yeah, hard-core-coding, for hard-core-developers.

Because you’re probably new to iPhone SDK, I suggest you reading/watching in the order I presented - it gives you all a roadmap to start writing content/apps for the iPhone/iPod Touch (yes, the SDK is both for iPhone AND iPod Touch).

This list will be updated as long as new releases on the SDK comes along.

Update:

• TUAW - Developer rejection letter mass mailing
• Rob Goodlatte - Golden Age for Indie Developers

Remember: “The best way to predict future, is to invent it” - Alan Kay.

One thing you will notice is the linked posts aren’t necessarily from Feb 2008. That’s because every list will have a theme to follow and is really hard to find recent posts covering the same topic. This initial month will cover Typography.

• Jon Tangerine - the incredible em and elastic layouts.
• Barney Carroll - Garamond v Garamong - Physiology of a typeface.
• I Love Typography - Arial vs Helvetica.
• 24 ways - Typesetting tables
• Typophile - Typophile’s List of “Essential” Typefaces.
• Mark Boulton - Five simple steps to better typography
• 24 ways - which fonts are installed with Mac and Windows operating systems by default?

Update 28^th Feb.: I found more interesting links around the web, plus, an incredible book by Robert Bringhurst I bought and I’m actually reading. Here they are:

• I Love Typography - A Guide to Web Typography
• The Elements of Typographic Style Applied to the Web - Richard Butter
• The Elements of Typographic Style - Robert Bringhurst, book at Amazon
• Cascading Style Sheets Level 3: Module - Fonts - W3C Specification
• AisleOne

I have a lot of files - as you do too. Keeping folders, recent files, downloads, to-do items, and other stuff I constantly change every day organized in a way that makes sense usually takes a lot of time - and I haven’t it too much for spare (I bet you too). Another key-question to solve was: how can I find “that file” within a huge context of 280GB ? Oops, I changed its location and I can’t remember the name or any other detail. What now?

A few weeks ago, I started using custom icons over my stacks on Dock (Stacks Overlay). Later that week, I downloaded a full-colored pack of custom overlays (8 colors or so), and started using it. When using iCal’s calendars and Finder’s color labels, I realized I could match the same color pattern I was already using on Stacks, across the entire system, in order to browse files more efficiently - the same color for the same context.

After following these tips, I can browse my +280GB of files in my home network without opening more than 1 Finder window, and keeping the scope of search tightly attached to areas of my life (personal, business, travel, and so on). With a single click, I can have all stuff related to one area in a second, right on a built-in search result. I can drag/drop the files anywhere, and the smart search will find them, doesn’t matter where they are. It’s like visually browsing your system through a particular color. Instead of using labels just to give visual desktop reminders, or group files together and nothing more, I changed the paradigm and choose consistency over context, finally improving my user experience with Leopard after all.

Here’s what I did (and what you’ll learn):

• Choose one particular color for a single area of my life ( personal, business, travel, to-do reading, pending stuff…)
• Create some color-based iCal calendars
• Use Finder’s labels to match these areas
• Create Smart folders in Finder ( personalized searches which you can save for later )
• Stack Dock icons, the same colors above to quickly access a folder belonging to an area

iCal calendars

Start simply creating an iCal calendar and choose a color for it.

As you’re guessing, that color will match all things and files related to this particular ‘department’ of your life. You’ll end up with something like this:

Finder labels

Color Labels are a visual way to simply tag an item within a department. Change the color of some items matching the color of your ‘department’.

Then change some files labels with the new color:

Finder Smart Folders

If you use iTunes, you’re already familiar with this concept - they behave exactly the same.

Smart folders, as the name says, are custom saved searches which you tell Leopard some search criteria, and the system will keep the search results updated, every time you click on the link on sidebar. Really useful!

Choose “New Smart Folder” from Finder’s menu:

A window will open, where you’re going to tell some criteria to the search. Click on the plus signal near the Save button to add “File label” criteria. The “File label” is disabled by default, but you’ll find it on a pop up menu when you select the “Other…” option.

Choose the correct label for your custom search:

Click on the Save button. Select a safe location to store this search (which you can share later). Be sure to check “Add to sidebar”. Your search will be available right there. Click on it. If you followed these steps carefully, and changed some file’s labels matching this color, you’ll see a list of them. Magic!

Stack Overlays Icons

This part is really easy but lengthy. If you have any doubt, please leave it in the comments.

Begin downloading an excellent pack of neat Stack Icons. Unpack it anywhere and choose the color of preference.

Open Finder and create a stack, dragging a folder to the stacks location on the dock, on the right, near the Trash bin. Open the icons folder, and copy/paste your icon inside the stack folder. In Terminal, navigate to inside that folder (cd folder0, cd folder1…) and type:

1. touch -mt 202001010101.01 ” Downloads “

Change ” Downloads ” to exactly the same name of your icon (which you can change before dropping it here) - and pay attention to the space between the name. Go back to the Dock, Ctrl-click on the Stack icon and change the sort option to “Date Modified”.

Next, show no mercy and kill the Duck (ops, Dock)!

1. killall Dock

Your dock will magically put that icon on top of everything:

As you did changed the sort order to date modified here’s what happened: the touch terminal command creates a file, and -mt means “modified time”. It created a file, and changed that file modified date to a future date: 2020/jan/1. However, the name you typed between “” was already taken by an existing file name, so it just changed its modified date. Magic again!

In the first business week of 2008 (January 7^th), they released a new brand. If you analyze the previous logos and their business history, you’ll understand better why they don’t want to be recognized as the ‘copier company’, or ‘document company’ anymore. The Xerox brand has evolved during the 20^th century (not all logos included, only the most relevant):

Accordingly to their history, and their vision, Xerox isn’t only a ‘copier company’ because it plays an important, but widely unknown role in personal computers industry. If you unacceptable didn’t know until now, it was Xerox PARC which produced the first concepts and modern computing methods you’re using right now: the mouse and the graphical user interface (GUI). They released the Xerox Star, the first commercial workstation system, mixing window-based GUI, a mouse, networking, file and printing servers, and e-mail. However, there was only a big problem: $16,000 per station - aimed for corporate customers.

These inventions were of such interest that in 1979, several Apple Computer (now Apple Inc.) employees (including Steve Jobs) visited the lab, seeking for ideas for further commercial products. Five years later, the Apple Macintosh was introduced, and the personal computer became widely popular. This movement generated an uncomfortable situation to Xerox, that forced them to sue Apple over their use of GUI, in late 1980s. However, the case was dismissed due Xerox delays, and Xerox lose its mainstream place in personal computers history.

It seems that even after more than 40 years of losing its place, Xerox still wants recognition on those achievements:

The new Xerox logo is now a lowercase treatment of the Xerox name - in a vibrant red - alongside a sphere-shaped symbol sketched with lines that link to form an illustrative “X,” representing Xerox’s connections to its customers, partners, industry and innovation, and designed to be more effectively animated for use in multi-media platforms.

Without any remorse for past achievements, I think Xerox needs to copy more of Kodak’s typography, or buy an inspiring Pokémon Balls.

• A List Apart - Understanding Web Design
• Web Designer Wall - Vector Polishing Techniques
• Veerle - What Is Graphic Design?
• Mezzoblue - Icon Design Anti-Alising
• 456 Berea Street - Accessible, Expanding/Collapsing Menu
• Garrett Dimon - The Hidden Interface
• A List Apart - White Space
• Snook - What Does Accessibility Mean?
• Subtraction - This Way to Web, Print Designers!
• North X East - The Secret to Getting Other to Talk About You
• Boxes and Arrows - Information Architecture as Change Agent
• A List Apart - Never Use a Warning When You Mean Undo
• Bartelme - Dark Theme for Wordpress
• Digital Web Magazine - Corporate Web Standards
• 24 Ways - Diagnostic CSS Styling
• Luke W - Primary & Secondary Actions in Web Forms
• AIGA - Foolproof Technique for Fooling Around
• Ping Mag - Infosthetics Form Follows Data
• A List Apart - Staying Motivated
• Freelance Switch - 101 Essential Freelancing Resources
• Rob Goodlatte - Syncotype Your Baselines
• Computer Arts - 50 Ways to Become a Better Designer
• Skellie - Five Hard Questions You Should Answer Before Starting a New Project
• Smashing Magazine - 80 Beautiful Typefaces
• Think Vitamin - 7 Surefire Styles that Work
• Jeff Croft - Do We Need the Return of Browser Wars?
• Andy Clarke - CSS Unworking Group
• Daring Fireball - Leopard
• Cameron Moll - Mobile Web Design Book

Tools, tips, extensions, and tweaks of 2007: Firebug, NoScript, jQuery, Quick Look Inside Zip Folders, Hacking Leopard - Terminal Codes, Anxiety Task Manager, Stacks Overlays, Time Machine,… and many more.

Happy new year of 2008!

The technique of this week is very simple and easy to learn. You’re going to learn how to add a zebra-style to your tables, just like iTunes:

Lengthy tables often lead to a boring look-and-feel, and confusing readers when the rows gets too wide and numerous. You can make reading a lot easier by using alternate colored rows.

The logic behind coloring alternate table rows is: use JavaScript (in our case jQuery, but you can do it in your own way) to filter even rows and add a specific CSS class to it, and filter the odd and add the other CSS class. You can do this filtering / sorting with server-side scripting, but today we’re going to use simple client-side to handle that.

Accordingly to best practices and accessibility standards, the HTML markup should be semantic, which means a readable header, body, and optional footer describing the table. There’s an excellent explanation of accessible tables here. Our table is simpler, so we are going to use a shorter, but still accessible markup. That means:

1. <table class=”zebra”>
2. <thead>
3. <tr>
4. <th>Song</th>
5. <th>Length</th>
6. </tr>
7. </thead>
8. <tbody>
9. <tr>
10. <td>Song 01<td>
11. <td>5:57<td>
12. </tr>
13. <tr>
14. <td>Song 02<td>
15. <td>4:31<td>
16. </tr>
17. <tr>
18. <td>Song 03<td>
19. <td>9:12<td>
20. </tr>
21. <tr>
22. <td>Song 04<td>
23. <td>6:40<td>
24. </tr>
25. <tr>
26. <td>Song 05<td>
27. <td>0:57<td>
28. </tr>
29. <tbody>
30. </table>

Easy. The next step is to choose the colors for even and odd rows. In our example, we are going to use the same colors provided in iTunes: #FFF and #F4F7FB. The CSS will be:

1. table.zebra tr.even td, table.zebra tr.even th { background-color:#FFF; }
2. table.zebra tr.odd td { background-color:#F4F7FB; }

The final step is to filter even and odd rows using jQuery selector filters:

1. $( function(){
2. $(”table.zebra tr:even”).addClass(”even”);
3. $(”table.zebra tr:odd”).addClass(”odd”);
4. });

In this fragment, we said to jQuery to do the magic of filtering “:even” rows - beginning with the zero index and add the .even CSS class. Then we said it also to filter the “:odd” rows ( the remaining ones ) and add the .odd. I also used a CSS class to tell jQuery which table it is going to filter: .zebra, because I didn’t want all tables on the page to be styled.

That’s it. Alternating CSS styled tables is easy this way. Instead of “zebra”, se your imagination to give better names to your classes

I’d like to share with you the creative process of this site. Describe the ideas behind the name, how did I get into this (hopefully) amazing user interface, and show some facts about my profession.

The planning/briefing/designing of this site started over one year ago, and the first version was released on December 2006. Here are the previous incarnations of Color Charge:

UNTITLED ( December 2006 - January 2007 ) - Temporary design (about 20 days), just to present some work.

EVENT HORIZON ( January 2007 - March 2007 ) - Vertical layout, Prototype JavaScript based navigation, scrolling tabs. Experimentalistic, almost surreal.
Highly inspired on Sci-fi movies, such as Aeon Flux, Alien vs Predator, and Star Wars.

PULSE ( April 2007 - November 2007 ) - Plain and simple text, very descriptive. I took a step back on experimentalist and put the layout inside a boxy frame.
Changed from dark blue to orange and redesigned the logo, previously inspired by the Tesla Coil. The first widely successful design, being listed in several CSS Galleries world widely.

The design process of CHROMA

On early September 2007, I restarted the design of my site with a brainstorm of concepts I would like my work to be and transmit (in no particular order):

• colorful appeal
• energetic sensation
• young and creative
• high-tech related

Another listing I did was the goals of this web site, such as I do with my clients ( the formal 1-page briefing ):

• Why do I want a web site?
• Who is it going to attend?
• What can I sell through it?
• … and other questions.

These simple questions are the hardest to answer, because its pure essence: giving reasons to an effort and building expectations. Over one year before I decided about the business goals of this web site, it may sound like natural to you, but I can garantee that it is really hard, but rewarding answer those questions.

The next step was to choose the name. Let’s take a breath and remember why the name Color Charge.

Naming the child ( September 2006 )

This was the hardest part of the whole process: find a suitable name, and an available domain.

The four concepts I described above where always clear in my mind. I searched on several wiki, forum, design galleries,… and found an interesting name: color charge. The name comes from particle physics, a complex scientic field which investigates subatomic particles, and its related nuclear interaction - quantum chromodynamics, gauge theory, hadrons, quarks, and gluons. Nerdy stuff? Too much abstract? Anyway, that was a perfect name for my concept.

Warning: the following quote contains nerdy stuff.

In particle physics, color charge is a property of quarks and gluons which are related to their strong interactions in the context of quantum chromodynamics (QCD). This has analogies with the notion of electric charge of particles, but because of the mathematical complications of QCD, there are many technical differences. The "color" of quarks and gluons has nothing to do with the visual perception of color; rather, it is a whimsical name for a property which has almost no manifestation at distances above the size of an atomic nucleus. The term "color" itself is simply derived from the fact that the property it describes has three aspects (analogous to the three primary colors), as opposed to the single "aspect" of electromagnetic charge.

Uh? Seriously, do you think I extracted all this concepts from this abstract name? Sure I did.

Chroma ( September 2007 )

Putting all those ideas together was easier than you thought. Actually, I’m kidding - I spent over a month of research (just research and no design, no coding, no-nothing-nada, almost got crazy… some friends and designers says that is almost impossible to design for yourself). Concepts: interaction, flow, chromodynamics, particles, space and time, energy, field… that produced the first Visual Guidelines and Elements you see below:

Chroma - inspired on chromodynamics, and particle physics. It should be the synergy of all four concepts.

Blurry Transparency - because the overall appearance must be high-tech, and somewhat blurred

Bold typography, big buttons - to express youth, energy, and dynamism.

< High-tech appearance buttons and clean typography - many of them inspired on iPod Touch’s look-and-feel interface.

Unnusual text alignment - to express… something I don’t know the name? lol

Some wireframes, designing and coding ( October - November 2007 )

An interesting approach to validate the navigation was drawing rough paper prototypes of the interface. No scale, no details; just the overall structure, trying to simulate the experience of using the site, and the labels and sections arrangement. This is a cheaper (made with recicled paper, pen/pencil) and quicker than designing directly on Photoshop - I could even evaluate the site’s usability with other users.

The front page interaction idea.

The blog home, listing posts, giving the RSS feed an extreme attention (aligned with one of my business goals: sindicate my content, and having returning readers).

The business goals, vision, concepts, visual guideline and elements, and wireframes / prototypes were put together. After everything is approved, documented, and designed… hands on coding (which I will in a near future write some good tutorials about).

Did some Wordpress Template Tags code, well structured, and all camelCasedFromCore. Choosing back Wordpress was aligned with another business goal: having a portfolio integrated with the blog, and future tools.

…and the lovable jQuery JavaScript library code.

Thank you

Special thanks to folks at my current job (who are delaying to release their portfolios……..) for giving directions on the design process. To all my clients and employers: thank you for trusting on my work. Most importantly, special big thanks for my wife, who understood my endless hours complaining about "that perfect color, and 1 pixel alignment".

I hope you enjoy this fourth version of Color Charge. I can say this was the hardest creative effort I ever did - mostly because I am my own client, when I design for myself - so, everything must be (walking to) perfect (ion state).