Design for the Rest of Us

Two things that I get asked a lot are: “What makes good design?” and “How do I learn good design?”

I spend a lot of my own time thinking about these questions, both personally and professionally. While going through some notes from this year’s SXSW festival (Austin, TX last March) I realized that I had a few good answers tucked away from the “Hi-Fi Design with CSS” panel. If you want to see the full slide shows from the panel (and ignore the rest of my post!) go to:

» Doug Bowman’s presentation
» Dave Shea’s presentation
» Dan Cederholm’s presentation

From Dave Shea’s panel session, I learned about important design concepts to master if you want to learn and practice good design:

Color theory

  • Typography
  • Form and shape
  • Spacing
  • Texture
  • Dimension

But, how to grasp these concepts? Some very good practical tips from Dave Shea:

  • Know your tools
  • Find imagery sources
  • Practice
  • Study inspiring design
  • Keep your eyes open
  • Study typography

From Doug Bowman, more great advice: Spend time looking for beautiful examples of design in nature.

I hope that I can improve my existing design skills and learn more as the year goes on. As far as inspiration, look no farther than the Garden.

Flash versus HTML

There has been a bit of recent talk about the benefits of Flash-based user-centered design versus designing a web application interface with web standards technology such as AJAX or DHTML. One great showdown and discussion-starter was at the 2005 SXSWi conference with the Flash vs HTML Game Show. It was a great panel where popular web apps like Flickr and Gmail were re-engineered in Flash or HTML. The panel even garnered a write-up by the great Zeldman on zeldman.com’s Daily Report.

The best result of the panel and other online discussion is the subsequent questioning of usability of the Flash interface for a web application. In this case it was Flickr that got some attention when they announced they were going to convert parts of their popular online photo gallery application to run with DHTML instead of Flash.

Recently this topic came up with a client here at simpledream web studio who wanted to know the benefits and drawbacks of presenting photos and content with Flash instead of HTML. Since the MO of simpledream web studio is web standards, the discussion was one-sided—it was pretty much a "Flash bash" from my perspective. The most important thing that came out of it, however, was the fact that Flash and HTML/CSS are both tools. How you choose to use them is up to you—I decided to pitch for using standards-based design with CSS because that is the tool I feel the best about on all levels of design and development. If a Flash developer were to have been in the meeting with us, he/she would probably have said the same thing about Flash and would have had the same thoughts as me about their way of doing things.

I think the panel at SWSX proved that for any given application you can use either tool effectively and achieve great results. Of course, in the case of the panel and Flickr's recent change, the comparison is between Flash and either DHTML or AJAX and not just CSS design versus a Flash rendering of content. Regardless, both camps have strengths and weaknesses. Since we have a choice as developers, my recommendation would be to use the tool that fits the project well and will use your skills to their maximum capability. If I have my druthers on every web project from now on then it will always be web standards for me: CSS, (X)HTML, and the DOM. But for the many great Flash developers out there, I say "more power to you." Make me a believer!

New Blue

You will notice that simpledream is coming at you in full blue now! The original site was supposed to be blue, but version 1.0 got changed to “shades of grey” at the last minute due to some time constraints for the launch date. It was actually weird how it happened. I read an article on “grey shadow” method for designing a website and thought is was so neat that I used it on the rough drafts for simpledream.net in Illustrator and Photoshop. Then the time crunch for launch came, and I said: “why not just launch it as it is?” The grey look was cool, and looked sharp with the logo and textmark. The grey look was never intended to last though, sad to say.

Anyway, as of tonight the version 2.0 in blue is officially live. The biggest difference is the blue color palette, but you might also notice the top banner is changed as well to reflect the true simpledream logo. The only other things added were some graphical elements and icons to spice up the design.

Hope you like it!

El Cortez Heights Redesign

This week simpledream web studio launched another standards-based web project: El Cortez Heights Neighborhood Association website. The group, ECHNA for short, is located in Tucson, Arizona. If you can’t wait to see it, then just visit site! If you want to know the why and how of the redesign, keep reading.

Why redesign?

To allow for greater control over the background technology and to streamline content production for the community-based website. The website had outgrown the previous setup and was ready to for change.

How was this accomplished?

By making a few big changes to the hosting, file management, and domain name as well as several smaller, much-needed changes to the visual design.

Here are the big changes:

  • Move to new host, Dreamhost. ECHNA was very tired of the Geocities ads that cluttered up the sidebar and the source code.
  • New domain name now: elcortezheights.org. Easier to remember and tell people.
  • The move to WordPress for site management allows a lot more control over the production and behind-the-scenes programming now. This is a huge improvement for site maintenance, stat monitoring, error pages, etc.

Now for some small changes:

  • Some basic improvements to the site were made, including ease of use and navigation. We tried to leave the look and feel the same, but update the design to be more professional and engaging. Still very simple and easy to use, though, and not complicated for someone to get around and find interesting and useful content.
  • Graphic elements were polished and updated.

You can view the old site (which is still up) for comparison. Also, compare it with a view of the original design from 2002. Needless to say, ECHNA has come a long way.

Making Simpler Web Sites Makes Sense

Tim Berners-Lee said in a recent Reuters article:

“A mass market exists for the mobile Internet, but it will remain untapped until designers make simpler Web pages that can be viewed properly on handsets…”

This is exactly what we need! In a time where broadband users are well over the 50% mark in America, web designers are eschewing the light and fast-loading sites of the dial-up modem days. We are loading up our sites with huge images, animations, and behaviors that do not necessarily help a typical website’s goals. Certainly this bloating effect does not help the other half of the population that is on a slow connection or the people who use an alternate device to access the site.

Do not get me wrong, I think there is a time and a place for Flash, lots of DOM scripting, and animations. It seems, however, like these things are being built and published just because we can, and we know so-and-so client can view it on their huge monitor and nice T1 connection. My philosophy is: do not use technology, images, or other web paraphernalia unless it directly enhances your site’s goals.
Otherwise you are wasting time and energy, and you are also frustrating a lot of potential customers and site visitors.

The Berners-Lee quote above and the rest of his comments in the Reuters piece bring up an important question: is the handheld era going to be another bottleneck that forces web designers to design light and fast pages? My answer is a hopeful “yes”.

That future notwithstanding, I wish more web designers and developers would build simpler and lighter web sites and applications. Then the device limitation or end users’ connection speed will be of little importance, and the site’s message will be broadcast swiftly to all.
Article and quotes via Slashdot.

BodyBasics Goes Live

Simpledream is proud to announce the launch of a new website today!

BodyBasics Health and Fitness is a private, professional and friendly wellness studio offering personal training services that emphasize lifestyle improvement, posture, body mechanics and making exercise fun. Located in Tucson, Arizona, the studio is led by certified personal trainer and LifeCoach Christopher Litten. BodyBasics approached simpledream web studio in late 2004 for this project, and after a lot of hard work it is up and ready to go.

Work simpledream performed for BodyBasics Health and Fitness includes content development, graphic design, web branding and identity, and web design and development.

Visit this project at bodybasics.biz.

SXSW Redux

Austin was great, and a good choice for a conference/festival like South by Southwest. The music part of the festival was just getting started when Aaron and I left on Tuesday evening. Even though I’ve had a day or two at home, I am still trying really hard to process all the information and ideas that are in my head and in my notebook.

The biggest thing I wanted to take away from SXSW was a bigger picture of the web community, culture, and technology—which certainly happened. Though some topics were discussed were exactly relevant to my everyday life and work, almost everything could be taken and applied to what the work here at simpledream web studio.

Here are a few simple ideas that I learned:

  • Balance and moderation are the keys to success
  • Bigger is not always better (act your size)
  • Do a few things well, and the rest will come later
  • Web standards are alive and well

In case you were wondering: my two favorite panels were Design Eye for the Idea Guy and Making Big Things Happen with Small Teams. Both were great in terms of real-life examples of design and development principles.

Pictures, ideas, and more blog entries to come later as I process and review my notes and thoughts. In the meantime, James Archer posted some great shots already on his blog.

By the way, my favorite after-hours event was “Vox Nox”, where New Riders authors gave us their “B-sides”. It was great! Check out some photos of the event on Flickr.

SXSW Preparation

Only three days left until the start of 2005 SXSW Interactive Festival in Austin. Tomorrow I hit the road with Aaron in “Scout”, the trusty Subaru Forester that will take us all the way to the Texas capitol and back. I’m severely excited!

This is my first time at “South By”, so it should be not only an eye-opener in terms of learning but also a good chance to share ideas, tips, and gripes with like-minded web design and interactive media professionals. The man who helped inspire me to get into the web as a hobby (then) and a career (now), Jeffrey Zeldman, will be opening the Interactive conference this Saturday with a keynote speech. From there it will be panels, award ceremonies, film viewings, get-togethers, and lots more.

I had a pretty hard time deciding between some of the panel choices, since there were superb topics and panelists at several coinciding times during the 4 days of the conference. Here’s my tentative schedule for the panels:

 Saturday, March 12th
 3:30 pm: How to Hot-Wire the Creative Process
 5:00 pm: How to Make Big Things Happen With Small Teams


 Sunday, March 13th
 10:00 am: DIY Now, or Someone Else Will
 11:30 am: How to be Beautiful: More Hi-Fi Design With CSS
 3:30 pm: The Elements of Meaningful XHTML
 5:00 pm: How to Build Your Brand with Blogs

 Monday, March 14th
 10:00 am: Does Design Matter?
 11:30 am: How to Inform Design: How to Set Your Pants on Fire
 3:30 pm: Startupland: A How-to Guide to Starting Your Own Company
 5:00 pm: Design Eye for the Idea Guy

 Tuesday, March 15th
 10:00 am: Typography for the Screen
 11:30 am: Low-Resource Rich-Application Development: Flash, .Net & CSS
 3:30 pm: Spam, Trolls, Stalkers: The Pandora’s Box of Community

Of note are 3 fellow Arizona (at least!) residents besides Aaron who will be attending SXSW 2005 in Austin. James Archer, Paul Nixon, and Molly Holzschlag. The latter two I know are on panels—go AZ pride! James posted his tentative schedule last week, and Aaron posted about it today.

If there are any other Arizona South Byers out there, let me know—I’d love to talk to you and meet you at the conference. Also, for SXSW veterans, I know it’s late notice but any tips on what to bring and what not to bring? It should be a great time!

Move to WordPress 1.5

Just upgraded the simpledream.net/blog install to WordPress 1.5 —> it’s very worth it!

First of all, you can have pages now that are controlled through the main template. Very powerful, could be a solution to the Ward III Neighbors problem of using “entries” as sub-category pages. Instead of various templates to load and change when updating, you can control the look, links, and feel of all your “pages” as if they were posts.

One cool new feature is the Themes section, which allows you to skin one or more pages on your blog, more control over . A new Dashboard was added as the default landing page to your blog admin, so that you can see latest stats on your site and posts from the WordPress Dev blog. It is a bit cluttered visually, though, so it might have to be cleaned up a bit.

The mod_rewrite and comment spam features are very much improved too.

Simpledream Blog up and Running

http://www.simpledream.net is up and ready to go!

As of tonight, the new look and feel is good to go; it’s a sort of white and black theme. Very simple, just like the name.

The main feature that is essential to this site is the weblog, blog for short. The blog will consist of web design, web standards, and web development and programming commentary, news, and tidbits. The official tagline for the simpledream blog is: “Talking about design, web standards, css, and other goodies.”

The blog page will also include simpledream’s del.icio.us links, links to related sites, what I am reading now, and a very brief but important list of web design resources. Further down the line these link lists will be revamped I am sure, but it seems like a good place to start. And don’t forget the “Get Involved” links, which are organizations, festivals, and groups that simpledream is a part of and believes in.

The main reason for simpledream as a whole is to replace design.fautrever.com, which is Lance’s former web design site. The blog is a huge advancement, as well as the setup of the site in with PHP and MySQL to manage content and updates. The plan for simpledream in the long-term is to be a resource for non-web folks to learn web basics, see what goes into a web design project, and make good decisions as web site owners. For now, it is just a web studio portfolio, contact, and information site.

So there you have it. simpledream is online.