Design for Non-Designers

I presented today at WordCamp Philly on Design for Non-Designers. As promised, here are my slides, which I’ve fleshed out with some extra notes for web:

If anyone wants the abridged version (which is what I presented), you can comment here to let me know.

Along with my slides, I also gave a quick design demo. You can see the images and notes for my demo here:

Some resources for each design principle I talked about:

Thanks again to everyone who attended this morning!

I’m speaking at WordCamp Philly!

I'm Speaking at WordCamp Philly

I’ll be speaking at WordCamp Philly in a few weeks! (October 20-21, 10:15-11:00am in the Power User Track) Here’s what I’ll be presenting on:

Design Basics for Non-Designers

To non-designers, design can seem like a mysterious realm inhabited by natural artists — inscrutable beings whose heads are constantly in the clouds as they hunker down in Photoshop, desperately trying to get every last pixel aligned perfectly (Okay, maybe there’s a *bit* of truth to that). Realistically, design is just a series of informed decisions based on a set of principles guided by best practice. By learning the basics of design, you can make your WordPress sites and applications more usable and compelling. This session is meant for anyone new to design.

Come and check me out if you’re there.

From The Great Discontent, @zeldman on Flash (and asking for help)

I was reading Jeffrey Zeldman’s interview on The Great Discontent and this quote stuck out:

Another thing—don’t be afraid to ask for help. I sucked at Flash and I’m glad web standards won for many reasons, but one selfish reason is because I found Flash unpleasant to use as a creative tool. I simply didn’t understand it well enough, but I was at a professional level where I couldn’t go to a community college and take a Flash course. Someone would say, “There’s Jeffrey Zeldman taking a remedial Flash class.” You have to find a way to keep learning and not get trapped in whatever imaginary status you have.

- Jeffrey Zeldman

I just found this really amusing and wanted to share.

3 Dynamic Web-based Stories

The web is a pretty exciting right now. The significant and unprecedented change and improvement we’ve seen in the past two years is astonishing. There is a new level of interaction that was previously only achievable by using Flash. We’ve been unshackled from relying upon proprietary software to make significant interaction possible, and the web today is much better off because of that change.

A particularly impressive trend I’ve noticed in the past year is how people are starting to approach digital storytelling. As an open and collaborative environment, the web has the potential to change the very way we tell stories. Just think about it — at this point, there are probably millions of people who read almost entirely on their portable wireless devices. I have personally started to pack away my collection of books because I almost exclusively read on my iPad. The ability to have my entire library with me at all times is seductive. It’s never been easier to find, buy, and read books.

Storytelling goes beyond books, though. An interaction-friendly web allows for a new way to experience stories. Here are a few web-based stories I’ve found particularly impressive:

Mega Shark Story

Mega Shark is the story of a shark who finds himself ostracized because, well, he is a gigantic scary shark. The story leads you through Mega Shark’s quest to make a friend. The illustrations are gorgeous. The art style is lush and vibrant, emerging you in a stunning undersea world.

Mega Shark screenshot

The story looks just as good on iPad as it does on a desktop or laptop. The transitions are smooth and natural, evoking the feeling of flipping through a children’s book. It’s easy to imagine sitting down and read this story to your kid (or niece/nephew, in my case).

Mega Shark Screenshot 2

Mega Shark is, as far as I can tell, one of the first stories to be created, not adapted, for screens. And it succeeds — boy, does it succeed. It has proven that maybe there’s a very successful future for children’s books on the web. Not just as ebooks, but as living, breathing, interactive entities in their own right.

However, if you do intend on reading this story to your kids, you might want to read it through all the way first. Just because, you know. No spoilers, but it’s good to know in advance what you’re sharing with your kids.

The next story is definitely not for kids.

Hobo Lobo

Hobo Lobo of Hamelin is an ongoing, slightly risque and overall pretty bizarre take on the Pied Piper by Stevan Živadinović. It’s a parallax style site which responds very beautifully to gestures (though is sometimes a little too sensitive), at least on my Mac. Unfortunately it doesn’t work very well on iOS, but Stevan admits that with some effort it wouldn’t be too hard to make work well on all devices.

One thing this story takes advantage of that Mega Shark didn’t was the ability to play sound and subtle animations to help captivate readers. Which some of the mechanics of the story need a little refining, it’s an interesting take on telling a story using the advantages of the web to enhance user experience.

Hobo Lobo of Hamelin Screenshot

Stevan was kind enough to write up an entire tutorial based around how he created his story, so if you’re intrigued or interested in doing something similar you should give it a read.

The last example today is probably the most impressive case of storytelling on the web I’ve encountered.

Why the Sky is Far Away

Why the Sky is Far Away (Pixel Fable) is the web adaption of a Nigerian Fable about — as it says — why the sky is far away. It tells the tale of how Aondo, the Sky, fell in love with a beautiful woman and how that leads to him fleeing far away from the earth. This story is significant for a few reasons, the first of which is cultural:

This project comes from the concept of Afro-Futurism. As a topic, Afro-Futurism is rooted in history and African cosmologies, using pieces of the past, both technological and analog, to build the future. It is concerned with African consciousness, especially in the Diaspora, and it explores the methodology of liberation.

Pixel Fable Screenshot

But Pixel Fable isn’t just culturally significant, it’s also technologically significant. The project is a hybrid solution of many different available web technologies. Like Hobo Lobo, it also uses parallax to help enhance and control the flow of the story. It has a bright, enchanting illustrative style that blends texture, geometry and photography. Pieces of illustration blend together, hide and appear as you progress through the story.

The most remarkable aspect of the story, however, is what’s called augmented reality. At the beginning of the story, you’re prompted to print out augmented reality markers. At specific parts in the story, you’re instructed to hold up each marker to your webcam.

Pixel Fable Screenshot 2

When you hold up the markers and play the augmented reality segment, the marker you’re holding gets transformed on camera into a part of the story, effectively bringing you into the story itself. (If you aren’t using the markers, there’s a video you can watch of someone demonstrating.)

With this fable, storytelling has transcended beyond written and spoken word into something integrative and immersive. It’s a beautiful example of the incredible capabilities of the web as a platform for storytelling, and it’s only the beginning. Just think of what might be possible for future stories on the web.

Have any other good examples of digital storytelling? Feel free to share.

Preview of 3 in-progress WordPress restaurant themes

This gallery contains 12 photos.

For the past couple of months, I’ve been working on a series of restaurant style WordPress themes. I’m planning on releasing them for free in the next couple of months. Here’s a quick preview of what’s to come: Diner Menu     Diner Menu is a one-page responsive theme. It should be released within the next [...]

Soft-launched: redesigned choycedesign.com!

If you’ve stopped by in the past week or so, you might have noticed a few (well, many) changes. I’ve redesigned my site!

First, some quick insight into why. I’d been thinking about redesigning for a few months, but couldn’t decide on whether or not I wanted to completely redesign, or just refresh. My old site was static — it started out just html, then got a small upgrade when I learned a little php. That worked okay, but it made updating my portfolio kind of a pain. I eventually wanted to move my design-oriented tumblr directly onto my site, so I ended up setting up WordPress on a subdomain. However, this meant that even though I was keeping my blog on-site, there was a visual change between my main site and my blog (since I decided to use twentyeleven and keep it mostly unchanged).

Well, with WordPress comes bliss and ease and all of those wonderful things. It was inevitable that I would move my whole site onto WordPress. Once I realized this, I debating whether or not to just convert what I had to a WP theme and call it a day, or make some changes. My old site was feeling a little monotonous, so I tried some simple refreshes in Photoshop. Nothing looked right. I got frustrated. I tried something new. It didn’t look right. I got frustrated.

Finally, I managed to design something I liked. Then I sat on it for a few weeks. The more I looked at it, the more I wanted to simplify it. I tried an interior, scrapped it. Tried another interior, scrapped that one as well. I looked back at the homepage, and realized, did I really need that much text? I’m not much of a text-person. I don’t really blog all that often. Are my tweets even relevant?

So, I decided to cut it down. I cut it down so much, I ended up with just a catchphrase. There was something really simple about it that really pleased me, so I ran with it. It was around that point that I realized I wasn’t going to get much further in Photoshop, so I decided to jump head-first into designing it in-browser as I went along.

It worked out okay for me. I started with the _s WordPress theme, but ended up getting a little lost (I’m not much of a developer). I’m pretty comfortable and familiar with Toolbox, so I switched over to that and really got rolling. Interiors came pretty naturally from there. Things probably aren’t as cohesive as they would have been had I done it all in Photoshop, but I really need to just do it, or else I wasn’t going to do it at all. I had some fun trying out new things, such as Isotope and Lettering.js. Lettering.js was especially nice, since Chaparral had some pretty horrendous default kerning.

Overall, I’m pretty pleased with my results. I wanted something simple and clean, and I think that I’ve mostly managed to achieve that. It’s still a work-in-progress, of course. A few things I have left on my list to complete:

  • Responsiveness. I know in my head how it will respond to difference browser sizes, just need to get it down in code.
  • Decreasing FOUT
  • Fixing some colorbox/isotope compatibility issues on my portfolio page… colorbox shows all images in a gallery by default, even if they’re hidden, so I need to fix that so it only cycles through filtered results.

Thanks are also in order for a specific awesome person who helped me out. Thanks, Kelly Dwan, for being my dev support and helping me integrate Isotope with WordPress. You’re a champ. Seriously.

Anyway, if anyone sees anything odd or things something I’ve done is awkward/looks bad/can be improve, let me know. Iteration is a healthy thing.

It’s the little things.

When I came by the Creative Market launch page, the first thing that struck me was the fantastic attention to detail:

Screenshot of the Creative Market Launch Page

I love the logo. The small cuts/indentations along the edges blend perfectly with the wood theme — instead of looking just like it’s on top of the background, it complements the background. It really does evoke “handcrafted.” I also really love the kerning between the “t” and the “i.” Also, those staples? Those are some nice staples.

It’s all about the little details.