Borderlines – the iPhone game I’ve been working on for two years – launched on Monday of this week. We are calling this the “soft launch phase.” You can see it on the app store or visit the Borderlines website. We are gathering initial reactions, feedback and bug reports and will roll them in to the first update along with a few other features that didn’t make the first cut. Once this update has been approved by Apple we will start promoting it further.

For now I thought it would be fun to show you a couple of the first drafts juxtaposed to the final versions of the same screens. The difference in caliber is stark and a good reminder that your first idea is almost never your best idea.

I’ve been browsing Offscreen Magazine (which is great by the way, you should get a copy) and something Drew Wilson said in one of the feature interviews resonated so much I thought I’d share. He’s answering why he hasn’t been snatched up by one of the big companies in Silicon Valley.

In the end what I value most about what I do is freedom. No company can offer that, and what they try to supplement it with is nowhere near as good as the real thing.

Andrew Wilkinson of MetaLab – answering more or less the same question – says the same thing in his interview.

I get to wake up every day and build cool things with insanely talented people. Nobody can tell me what do do, I value that more than anything.

There are definitely times in which working at a well-funded startup or larger company seems like a cold glass of water amidst the freelancing desert. I never rule it out completely, and I don’t whatsoever discount the personal and professional benefits from working amongst an insanely talented group of people, but complete professional freedom is a hard thing to trade in once you’ve experienced it.

Mark Boulton just penned the canonical approach to content and design.

Let’s be really clear about this. It is unrealistic to write your content – or ask your client to write the content – before you design it. Most of the time. Content needs to be structured and structuring alters your content, designing alters content. It’s not ‘content then design’, or ‘content or design’. It’s ‘content and design’.

I couldn’t agree more with what Mark says in the article. Creating content from a “blank slate” is akin to a client asking you to design a website with no constraints or input. I’m guilty of telling clients that in a perfect world they would have all of their content and then I would start designing. This is plain wrong. We don’t need to worry about a perfect world anyways, because the best approach is equally beneficial to the designer and the client — content and design.

A friend emailed me a while ago asking how to create a good website. Here’s my response to him, edited and expanded a bit for publication here.

Creating “good” design for a website is a combination of taste, talent, creativity and stamina.

Taste is more inherent than the other three. I don’t think it’s genetic or anything, taste can be developed like any other skill, but I think you’re at an advantage if it’s something that you possess naturally. And by taste I mean the ability to distinguish between quality and kitsch, thoughtful work versus lazy execution, proper proportions and so forth.

Talent is just a factor of time – how much you have to invest in learning CSS, reading about graphic design principles, learning about typography rules and guidelines, etc. Copy work that you admire to develop your own skill set. (Just don’t ever publish this copied work as your own!)

Creativity comes from thinking of something and then being able to produce a tangible real-world item from those thoughts. Creativity is influenced a lot by what you see and experience around you. It’s harder to be creative in a vacuum, surround yourself with things that inspire you.

The major frustration with creative work is the difference between the idea of what something should look like in your head versus what is actually created in the real world.

Stamina is what is required to keep plodding along when the chasm between the ideas in your head and the execution with your hands seems incomprehensible. Over time the gap becomes more and more narrow until you’re fairly efficient at executing the ideas you think of.

Tired of declaring the width of an element and then having to subtract from it as padding and borders are added later?

* { box-sizing:border-box; } is the set it and forget it of box models. Set your desired width and leave it intact as you later add padding and borders; they don’t affect the overall width.

Paul Irish has more of the specifics on his blog.

And in case you were wondering, margins are rendered the same either way.

(via Jeff Croft)

I was fascinated by the ideas presented in this talk from Jonathan Hoefler of Hoefler & Frere-Jones and – naturally – I’m excited about their forthcoming web fonts.

In a 1995 interview, Steve Jobs lays out an eloquent encapsulation of the relationship between ideas and finished products. Quoted at length because there’s no better way to say it:

You know, one of the things that really hurt Apple was after I left John Sculley got a very serious disease. It’s the disease of thinking that a really great idea is 90% of the work. And if you just tell all these other people “here’s this great idea,” then of course they can go off and make it happen.

And the problem with that is that there’s just a tremendous amount of craftsmanship in between a great idea and a great product. And as you evolve that great idea, it changes and grows. It never comes out like it starts because you learn a lot more as you get into the subtleties of it. And you also find there are tremendous tradeoffs that you have to make. There are just certain things you can’t make electrons do. There are certain things you can’t make plastic do. Or glass do. Or factories do. Or robots do.

Designing a product is keeping five thousand things in your brain and fitting them all together in new and different ways to get what you want. And every day you discover something new that is a new problem or a new opportunity to fit these things together a little differently.

And it’s that process that is the magic.

Full article on CNN Money

Via daringfireball.net

The demo site for the Church Plant theme is ready for viewing: Church Plant theme demo

The theme will go on sale next week. I’m not sure exactly what day but I will announce it here, on Twitter, etc. Additionally you can sign up to be notified immediately when it’s released by entering your email below. (Update: The theme is released and available for purchase.)

And to reiterate this is a one-time announcement list that will be deleted after the initial announcement.

The GNU General Public License (GPL) is a software license that promotes software freedom. Free as in speech, not beer, as they say. From the preamble it sets forth its goal:

[T]he GNU General Public License is intended to guarantee your freedom to share and change all versions of a program—to make sure it remains free software for all its users.

It is designed to make sure that:

• “you have the freedom to distribute copies of free software (and charge for them if you wish),”
• “you can change the software or use pieces of it in new free programs” and
• “you know you can do these things.”

Further it expounds:

To protect your rights, we need to prevent others from denying you these rights or asking you to surrender the rights. Therefore, you have certain responsibilities if you distribute copies of the software, or if you modify it: responsibilities to respect the freedom of others.

And to drive the point home in case you’re unsure:

For example, if you distribute copies of such a program, whether gratis or for a fee, you must pass on to the recipients the same freedoms that you received. You must make sure that they, too, receive or can get the source code. And you must show them these terms so they know their rights.

Now contrast the above with this first paragraph I found in a plugin released under the GPL on WordPress.org:

All functions defined in this plugin should be considered private meaning that they are not to be used in any other WordPress extension including plugins and themes. Direct use of functions defined herein constitutes unsupported use and is strongly discouraged. This file contains custom filters have been added which enable extension authors to interact with this plugin in a responsible manner.

Enter the dissonance: use this code however you wish but please don’t use it in any way.

I can use his code in my theme according to the license under which it’s released. But I would feel guilty because he asked me not to use it — and I’m sure he must have felt odd adding restrictive clauses that were in direct contradiction with his GPL-licensed code. You see how messy it is! I can only speculate as to why he would want to restrict his code, but I would guess it had something to do with wanting to retain ownership over his creative domain.

In the end I found a tutorial with code examples that were easier to follow so I didn’t have to bother with the plugin. But the small ordeal illustrates the fragile dance of many who create products for WordPress (especially commercial products) between adhering to the GPL and “please don’t screw me over with your freedoms.”

Your fundamentals as a professional web designer should be perfect.

Your execution should be perfect.

Sometimes you have a mis-directed idea.

Or the market isn’t quite ready for your vision.

You miss the mark.

You’re not perfect.

But one thing should always be perfect: the fundamentals.

Google is adding support for authorship markup; which means “connecting authors with their content on the web.”

For me I latched on to this quote at the end:

We know that great content comes from great authors, and we’re looking closely at ways this markup could help us highlight authors and rank search results.

(via @craigmod)

From @lukew:

Shipping early and incomplete is painful but necessary.

When you ship incomplete you don’t lose time polishing turds you thought were gems.

When you ship incomplete the features you need to work on become obvious as people try to make use of them.

When you ship incomplete you need to swallow your pride for the greater good of faster, more frequent learning.

It’s OK to ship incomplete UX when you are a designer. After all, design is never done.

Cennydd Bowles lays out a heartfelt plea for the UX profession. This is a long article (a transcript of the closing plenary from IA Summit 2011) but I encourage you to read it; especially if you orbit the “UX” profession.

He talks about the mainstream of UX and the pollution that inevitably follows. However he also goes far into a wide-ranging vision for the UX profession that will inspire you with the power of design and its intersection with business, people and successful enterprise.

As a side note I particularly liked this snippet:

The single-minded pursuit of profit has given us economies of fraudulent fiction, in which some companies would rather forge their balance sheets through obscure accounting than make useful things.

I released version four of the design of this site as a theme for Habari. Called Intellect, it represents one of the most popular designs of this site. Though a word of caution from the README:

As you might imagine, since the majority of the markup and CSS are circa 2009 there are some aspects of it that may cause cringing. Specifically this period was when I was first learning about HTML5. As such, there may be misused section tags among others. You will also run across things such as form#message in the CSS for example. Don’t worry, I’m embarrassed for myself.

You can view a screen shot of an example single post and download/fork it on GitHub.

If you happen to use it on your blog I’d love to see it. Shoot me a link!

Fast Company’s Co.Design talks to Apple and Ikea on user-lead innovation.

Apple on user-centeric design:

“It’s all bullshit and hot air created to sell consulting projects and to give insecure managers a false sense of security. At Apple, we don’t waste our time asking users, we build our brand through creating great products we believe people will love.”

IKEA on the same topic:

“We show people the way.” IKEA designers don’t use user studies or user insights to create their products. When I asked them why, they said “We tried and it didn’t work.”

Further down the article, the headlines beneath why it’s harmful to listen to users paints a telling picture:

• Users insights can’t predict future demand
• User-centered processes stifles creativity
• User focus makes companies miss out on disruptive innovations
• User-led design leads to sameness

The Gestalt principles offer a vocabulary to describe why good design is good and bad design is not good. I am reacquainting myself with these principles and thought I’d share a few links. For web designers, Andy Rutledge’s five-part series is a must-read.

1. Gestalt Principles of Perception: 1 – Figure Ground Relationships
2. Gestalt Principles of Perception 2 – Similarity
3. Gestalt Principles of Perception - 3: Proximity, Uniform Connectedness, and Good Continuation
4. Gestalt Principles of Perception - 4: Common Fate
5. Gestalt Principles of Perception - 5: Closure

And from the second article, a good life rule to follow:

It is the purpose of fundamentals to open wide doors to conceptual depths, and to the subtleties that lay beyond. Without a keen understanding of the (many) fundamentals, designers will be forever barred from those depths. Study hard.

Spokane Falls Community College’s graphic design department has a succinct summary of the Gestalt principles.

And of course there’s a Wikipedia article on the subject.

The Universal Principles of Design is a book referenced in Andy’s articles and one that I own as well. I would recommend getting that book for further study not just of the Gestalt principles but in the discipline of graphic and information design as a whole.

Websites don’t need to look the same in every browser. In my current contracts I explain it to my clients this way:

The website will not look exactly the same in every browser on every computer. We will be using the latest browser technologies to enhance the website for users of those browsers. This means that people with more modern browsers will get more enhancements than those who visit the site on older browsers. However it’s very important to note that the overall look and feel of the site will be absolutely the same no matter where it’s viewed. The browser variations have more to do with minor visuals such as rounded corners, text shadows and things of that nature.

I place it at the beginning of the cost estimate under an “Assumptions” heading. The reactions so far have been positive.

Rosenfeld Media is publishing a book on service design. What is service design?

One of the goals of service design is to … design services that have the same appeal and experience as the products we love, whether it is buying insurance, going on holiday, filling in a tax return, or having a heart transplant.

I would gladly welcome a redesign of the W2 tax form, or the entire tax law for that matter. And service design aspires to do more than just redesign the process of buying insurance.

Another important aspect of service design is its potential for design innovation and intervention in the big issues facing us, such as transport, sustainability, government, finance, communications and healthcare.

This is an emerging practice to watch for sure, not only will the challenges be great but so will the budgets!

Last week I had a very poor user experience with a website I won’t mention. There was a very key piece of information that was briefly mentioned before I added a product to my cart and was never mentioned again… Until I went to claim my purchased item. (It was so brief that I didn’t even see it, I had to go back and recreate what I did prior to see it.)

I was extremely frustrated afterwards and fired off a few tweets about UI & UX. I thought they were solid enough to post on this blog for longevity’s sake:

1. Pro design tip: It’s not clever or business-savvy to trick users with UI. It’s unethical. (tweet)
2. A user interface (UI) is there to serve people. All decisions should be made on the premise of what makes this better for the end user. (tweet)
3. Any time something is “conveniently” left out – benefiting the company and not the end user – it’s a direct violation of the purpose of a UI. (tweet)

Perhaps I was the last person in the world to discover this, but did you know there are shortcuts to create common characters and symbols that aren’t on the keyboard? I find them most helpful when I’m creating design mockups and need to use en dashes, copyright symbols, bullets, etc.

In the book Content Strategy for the Web, Kristina Halvorson summarizes the need for content strategy.

[U]ntil we commit to treating content as a critical asset worthy of strategic planning and meaningful spend[ing], we’ll continue to churn out worthless content in reaction to unmeasured requests. We’ll keep signing up for online content initiatives without pausing to ask why. Our customers still won’t find what they’re looking for. And we’ll keep failing to deliver useful, usable content that people actually care about.

— p. 42

Earlier in the book — under the heading There Are No Shortcuts — it reads:

Creating useful, usable content requires user research, strategic planning, meaningful metadata, web writing skills, and editorial oversight. It requires people. With experience. And insights. And judgment. It requires planning. And input. And time. And money.

It will not happen automatically.

— p. 22

It’s easy to get excited about content strategy; it’s not as easy to follow through with the hard work and resources required to implement it.

I can’t remember when, but at some point I stopped putting credit links on sites I create for clients. You know, the small text links in the footer that read “Site by Design Intellection” or something similar.

The reason for me is twofold:

(1) If a person truly wants to know who built the site it will be discovered. Most likely he or she will contact the website owner or organization and ask them. And unless they are a web design company who had their site built by another agency, most people are happy to pass along the web designer’s contact information.

(2) The client is paying you for your services. You are delivering a specialized product that is a very valuable asset to them. To stamp your name — even inconspicuously — on every page is tacky.

What about SEO?

Some people use credit links as a way to build more in-bound links for themselves. This shouldn’t be part of your SEO strategy. Your client’s websites aren’t tools to boost your position in search results. Instead start a blog, contribute something to the design and development community, do something that makes people link to your site out of their own will. This ultimately will be better for everyone.

The print-specific styles from HTML5 Boilerplate are brilliant. Here’s a snippet:

• a:after { content: " (" attr(href) ")"; }
• abbr:after { content: " (" attr(title) ")"; }

The Ames City Council approved a contract to redesign their website. From the news article in the Ames Tribune.

The 12 companies that submitted proposals ranged in cost between $18,600 and $106,418.

A great, unintended commentary on the state of web design today. (via @mheerema)

Today is one of those days where every mouse click takes conscience effort. I have worked non-stop this week, and will continue to do so for the next couple months. And when I’m not working I have a hard time turning off the “work mind” that is constantly thinking about all the things I have to do.

However, I wouldn’t want to be doing anything else.

I wrote a post earlier this year –- Start Smart -– which contains a small bit on being passionate that is worth repeating:

Don’t start a web design business unless you absolutely love working on the web. Because I can tell you some days you’re going to hate the internet, and you’re going to hate building websites, and it’s going to be the last thing you want to do that day but you’re going to have to do it.

That’s the difference between a job and a hobby. When you start a web design business it ceases to be a hobby and turns into a job. Make sure you love it before you do it or you’ll hate it quicker than you started it.

This is pretty much the best article I’ve read regarding search.

How to Save the News from the Atlantic offers a comprehensive peek into Google’s ideas for the future of news.

The Pipeline is a podcast hosted by Dan Benjamin that bills itself as “an interview show with innovators, designers, geeks, newsmakers, and people who create things.” I have listened to several of the shows and each one is full of great content.

Episode 7 with Merlin Mann was particularly engaging. I enjoyed listening to him talk about making things and the experiences and thoughts related to that realm.

Here are a couple quotes from the show:

Every time you agree to do something you tacitly agree not to do 10,000 other things.

— Merlin Mann

Regarding email (among other things):

If you have this one place that you cant walk away from, because you don’t have a tolerance for the unknown, you’ll never do anything good. … And if you cant tolerate the incomplete, well you’re never really going to be able to make anything good. Because the patterns show that anybody who’s a great artist, or a great thinker or a great anybody, learns to tolerate a huge amount of uncertainty in that process.

— Merlin Mann

Design was just a part of the process. And the process we made was not about changing the look, it was about improving the product completely. —Jacek Utko

From TED: Jacek Utko is an extraordinary Polish newspaper designer whose redesigns for papers in Eastern Europe not only win awards, but increase circulation by up to 100%. Can good design save the newspaper? It just might.

If you’re interested in viewing more “well-designed” newspapers, Google will likely lead you to Newsdesigner.com or Smashing Magazine’ post, Award-Winning Newspaper Designs. Also the Society for News Designers publishes a series of books titled The Best Newspaper Designs (here’s the latest edition).

I had originally titled my Refresh Louisville presentation, “How to be a hip, new web designer.” Though afterwards I changed it to “One Source to Rule Them All” which I thought was a more descriptive and appropriate presentation title.

I’ve embedded the presentation above. You can view it on SlideShare and download the PDF files of the presentation too. Also, I was very honored to have the presentation featured on Note and Point.

I have a couple videos to post — based on the presentation slides — that explain how the iPhone animations are executed. Look for those in the coming week.

To add to the small series of Questions to Ask A Web Designer and Questions to Ask An Employer, the following are questions to ask a Creative Director.

1. What’s your typical process when approaching a project?
2. What’s the most important part of the process?
3. What’s your favorite part of the process?
4. What’s your favorite part about the creative field today?
5. How do you keep up with peers in the industry?
6. What’s your philosophy of marketing?
7. What are your top three areas of expertise?
8. How do you manage other creatives?
9. How would you direct a project that you think is veering off track to get it back on the right path?
10. How do you praise those below you when they do great work?
11. How do you encourage creative excellence?
12. What do you think is more important? Creativity or technical skill?
13. How do you identify talent in someone?
14. What are a couple (or more) good design principles?
15. In the context of creative work, and money aside, what would be your dream job?

A while ago I jotted down three things that make a good content management system (CMS). I recently rediscovered them, re-read them and found I still agreed with them.

1. Simple. There is absolutely no reason a CMS should be complicated and hard to use. A CMS that has lost simplicity has lost focus. But to reference 37signals, there’s a dirty little secret about simplicity: it’s hard to do.

2. Solid. Every interaction between the user and the CMS should be made with confidence. There should be no inclination that you are about to break something, or that that’s even possible to do. (And if you’re the one building the CMS make sure there’s no way a user can break anything.) When the user can’t trust the CMS you have birth pangs of a larger, systemic problem.

3. Elegant. A CMS should be a beautiful piece of software both aesthetically and functionally. It is used constantly so the experience should be fulfilling. If you’re not inspired to use your CMS then that will be reflected in the end product — your site

When it comes to creating design mockups for websites I’ve always been a fan of creating one mockup and revising as necessary. Of course this only works when it’s part of a larger process. Recently I tallied a few working reasons why I think the single approach is better than the multiple, and I thought I would share them here.

• If you create multiple mockups almost always there is going to be one that you like the most. Inherently — maybe even subconsciously — you’re going to give the most attention and your best work to that one mockup. If the client picks a different one is that ethical?
• We are craftsmen who hone our work based on specific needs of the client, the context of the situation and many other tangible and intangible items. If we spread these out over multiple designs does it weaken the final result?
• Perhaps you may save one approach for a specific mockup just so that it maintains its uniqueness, when really that approach needs to apply to all of the mockups.
• If you are working towards a specific solution shouldn’t they all look more or less the same?
• Many times showing multiple mockups is to mask insecurity in either the agency’s ability to deliver or the client’s ability to trust the agency’s expertise.

It took years to get to this point. Not this design necessarily, but having a presence on the internet for the purpose of business. There is no telling how many hours I’ve logged sketching, designing, thinking, writing, sketching, coding and sketching (I made a lot of sketches). You’re viewing the result.

The inspiration for this final design came in the layout of a Table of Contents of a magazine. However, there were many different iterations and sketches in the design process; and at many points the design would begin to head in an entirely different direction. These side trips would lead to a dead end and I’d then go back to more what you see here now.

The Name

Coming up with a name was a complicated process also, which involved a name change about half-way through this multi-year process. The first name I had was 86 Designs, but for various reasons it just wasn’t working, so I left it in favor of this one, the Design Canopy.

Logo

The logo proved to be especially difficult and frustrating. There was much lost in translation from the picture in my mind to the sketch on paper to the actual design on the computer. (Although, that particular journey has proved quite difficult in many a creative process.)

The final logo is comprised of the studio name set in Rage Italic and the spiral thing that represents a tree. I’ll go into more detail on the logo choice in another post. There is, of course, the issue of it being the same form that BP uses. So I’m not sure where to draw the line, I may just end up scrapping it altogether… Maybe some people could give me their opinion on the matter?

Putting It Together

There is still much work to do; the first order of business being to clean up the copy writing and make it flow smoother throughout the site. I also want to add a few more graphical elements and present the search option differently.

It is exciting though to finally have a space where I can write about web design and interact with the community. I’ve waited a very long time.

Let me know what you think of the design, criticisms and praises, and if you see anything that looks out of place please let me know too. Thanks for stopping by!