On Your Own 2

Defining (limiting) the problem

Choose a subset of problems for your solution to attack. This solution will also be known as The Big Idea. Don't try to be all things to all people, figure out what's important (the big idea) and work on that. In Marketing you may hear, find a need and fill it or create a need. Many years ago I learned the KISS idea, Keep It Simple Stupid. A good philosophy in many respects.

Vote on what you think needs to be tackled. Each person get's the same number of votes (maybe 8). The items with the most votes are what you will use to create your persona.

I would like to drive home this point on simplicity and building something that does more by doing less.

The history of innovation is filled with examples of products that did less than the competition, but performed better over the long haul. Decades ago, radios were powered by large vacuum tubes. They were huge and, essentially, were furniture in living rooms. But, the sound quality was great. The transistor came along and radios could be made out of them instead. They were small. So small, in fact, that you could carry around one like we do smart phones. However, transistor radios sounded pretty terrible. No family would gather around in the living room and listen to a transistor radio. So, the existing radio manufacturers ignored the technology and kept going with the vacuum tubes. Japanese manufactures saw an opportunity and jumped on it, making small, low power, low cost pocket-sized radios. In America, they were a hit. Not with the previous customers (families), but with teenagers who could listen to music on the go. The transistor radio was a lower quality product. It stunk. But, it solved a new problem for a as-yet un-tapped customer. Over time, the technology improved and the companies who had invested in vacuum tubes went out of business while the ones that invested in transistors flourished (SONY for example).

Today, the iPad is doing the same thing to the laptop/desktop industry that the transistor did. It's a crappier machine than your average PC laptop and desktop. It can do less stuff. However, its simplicity, portability, delightful user interface and form factor solves problems the laptop/desktop was unable to solve and is selling like hot cakes and disrupting the laptop/desktop industry.

Read this article

That's what our problems-to-solve exercise is about. Can we find new problems that potential customers are having that no one else seems to notice? The next few posts will be readings on why less is more in software design. Read the above link. What stood out to you? Do you buy the argument that for most consumers, the PC will be a relic?

Assignment: img/Persona.jpg (due Class 3 on 11-06-2014)

Your persona can be created using whatever tool you like (Photoshop, Illustrator, by hand, etc)
Save your persona as a jpg (to be uploaded to the web on our next class)

Less is more (Grab the low hanging fruit)

37 Signals is a company that exemplifies less is more. Their productivity web-based tools sell extremely well and all do much less than the competition. However, what they do do is just what most customers need done. Because they have a smaller toolkit, their products also make it much easier to get stuff done.

A handful of years ago they published their first book, _Getting Real_. In many ways, it's their manifesto. Read the following sections of it. What stands out to you? Do you agree with them? Should software be (in their words) opinionated? What's an example of software or website that you use that's opinionated? How so?

Read this section: Build Less
Read this section: What's Your Problem?
Read this section: Have an Enemy
Read this section: What's the Big Idea?
Read this section: Hire the Right Customers
Read this section: Make Opinionated Software
Webstock '11: John Gruber - The Gap Theory of UI Design (Apple design) (watch this video)

Why should you wireframe?

Read this article
Illustrator intro (and recap) (watch this video)
Wireframes in Illustrator (watch this video)
Typography 101 - Terms and Keywords (do not do assignment at the end) (watch this video)

Web Style Guide

Read this article
Color (watch this video)

Fonts

Alright, you have the basics of type and color. Next we'll transition to actually using them. Before we do, however, you need to know a couple of technical constraints.

First, for color. All monitors are calibrated slightly different. Each monitor also has a different gamut (the range of available colors it can display; handhelds with high-end screens like iPhones display more colors than handhelds with lower quality screens). Each operating system also adjust colors in a slightly different way (Windows is pretty bad and tends to darken and over saturate colors). So, don't ever get too sold on a given color because almost all of your users will see a slightly different version than do you do. For folks used to designing for print (like graphic designers) this is infuriating. Sorry. Deal with it. There's really no reasonable way around this. Instead, get used to considering your colors relative to one another and get used to the fact that folks on Windows or lower-quality handhelds will not be able to see subtle variations in colors because their OS or hardware makes that impossible. If you've ever heard about "web-safe colors" or see a button in Photoshop or Illustrator to limit to "web-safe colors", you can ignore it. That advice is about 15 years old and is no longer relevant with computers newer than 15 years old. We've moved way beyond that, so ignore it and never turn it on.

Developing a good color palette is tough work. A great trick is to use the tool Kuler to pick a palette someone else has put together. The tool is available here and I encourage you to kick the tires a bit before we move on.

For typography, the limitations are a bit more heavy handed. In order for fonts to display on a computer, they must be installed on that computer. So, if you design with a font that isn't commonly installed on most machines in the world, it won't show up on your end user's machine, even if it looks okay to you. There are newer ways around this constraint, but we won't get to that until later in the course. For now, however, you need to constrain yourself to fonts that are common across most of the computer accessing the web. These are called "websafe fonts". As we start designing our mockups, consider color and typography carefully. Limit the typography you use to websafe fonts.

Good navigation (watch this video)
Mockups in Illustrator (watch this video)
:-)