I’ve jokingly been complaining about being pixel pushed by design-minded people around me. But of course, even I can’t deny the power of aesthetics. There seems to lack a sense of professionalism if you can’t even get the basics of design. So, I embarked on the journey to redesign my pet project, Yoga in the City, after taking @thoughtbot’s course, Design for Developers.
Yoga in the City Design Brief
The first step was to articulate our goals for the redesign. I equate this exercise to setting your intention in yoga class. Like the lessons taught in Bhagadvad Gita, one of the premiere philosophical books on yoga, your intention determines the outcome. Borrowed from a yoga teacher: if you saw a tree that you wanted to go to. Would you aim for it or would you wander and hope to find it?
A brief summary of the business / site goals. An aggregate schedule of yoga classes, curated by a yoga snob. The app solves the problem of finding fantastic teachers at different studios. It should also encourage me to discover more yoga teachers to add to the list.
The key users. Yogis that are trying to fit their 1.5 hours of refuge into their busy schedules. They are generally young professionals, both male and female, but predominantly female and peeople that are health conscious.
Scenarios in which your app or site will be used. They should be able to get to the site quickly, process the class information easily and add class details to their calendars.
Design style guidelines to follow. Calming, connected to the world.
My friend’s wife is an art scientist. She studies why certain pieces of art are more appealing to others, why some become famous. It turns out there are some basic guidelines anyone can follow. Let’s critique my old design on these.
Alignment The only thing that is aligned on the left side of the design is the word “Yoga” from “Yoga in the City” and the beige schedule block. Everything else is entirely random. Although I had put a lot of thought in the original design to make things easier to read, I mistakenly thought that just meant bigger font size.
Emphasis This one I understood, although it wasn’t executed that well. I chose to emphasize the day of week “Wednesday.” Why? I’m not so sure.
Hierarchy There is an order of importance, that the eye should discern quickly. Given the font-size and colors used, “Wednesday”,the times and the title seem to compete with each other.
Consistency Patterns can be found in art, dance and music. This provides continuity, which people like. Thankully, I had used a template partial for the individual classes, and programmatically created the divs for them. What I wasn’t consistent with is colors and font sizes. They were randomly picked by me.
White Space Not by design, everything is jammed to the left, leaving lots of white space on the right. White space usually gives a feeling of airy quality, but everything still feels squished in my case. I could have used some white space between the elements.
Balance Another principal that we see in dance and music, as well as visual art. My original website is weighted heavily to the left.
Unity Lastly, everything needs to be tied together somehow. This is, perhaps, more of a feeling than a hard rule.
According to @kylefieldler, if the question comes up, when should a grid system be used, the answer is always. This immediately reconciles any problems with alignment. There are also a lot of great frameworks to leverage off of. At work, we’re big believers of Zurb’s Foundation. For my project, I wanted something lightweight, and went with Neat. Twelve column layouts are the most popular because they can easily be converted to three or four column sub layouts. With this in mind, I sketched out a few ideas.
One of my concerns was being able to view the site on a phone and quickly digest the information, which is why I threw out the traditional calendar grid out the window. I also wanted to play around with a big hero image that would also fit into the grid layout. Although uncommon, I went with a two column layout, that would collapse into one on mobile.
Oliver Reichenstein wrote Web Design is 95% Typography and I think most design nerds would agree. Who would have known so much personality can be expressed through a typeface? In this part of the course we looked at the effects of line-height, line length, letter-spacing, and even the components of the font. Usually there is more than one typeface on a page, a serif and a sans serif. It’s important to find something that complements and contrasts with each other. You can try the typography dating game.
Color can have different meanings in different culture. Case in point: red is considered bad luck on a trading floor. However, for Chinese people, red represents luck. So knowing the viewers and how they’ll interpret color is important. In America, blue is considered stable and professional. Red is considered dynamic, but sometimes dangerous. In my current redesign, I’m letting the backgound image do most of the color deciding for me.
The readability of the class details still needs work. I’ll most likely choose a different typeface and also darken the transparent, black overlay. A friend pointed out to me that she didn’t really understand what the site was about. I probably need more information there. Still a long ways to go. Hopefully, my next blog post will be about how I built the scraper that’s pulling updated schedules and how to deploy a Rails app on Heroku that uses PhantomJS. Stay tuned!