Journal

3D Popup book in CSS3

2012-04-18T13:45:02Z

I'm always intrigued by the creation of intricate graphics using only CSS, but I must confess I found this project downright startling. It is a children's 3D pop-up book using transforms along with all The Usual Suspects (CSS3, SVG, JQuery, etc.). If you haven't seen this yet, it is definitely worth taking a look and reading the associated articles on its contruction.

Top 7 Design Trends for 2012

2012-04-07T23:36:11Z

Ordinarily, I'm fairly skeptical when it comes to identifying something as a trend in graphic and web design. My mind almost immediately races to the film, "Josie and the Pussycats," where bands of brainwashed teenage girls gleefully squeal, "Because orange is the new pink!"

That said, it is impossible to deny a trend's existence. The font Trajan was definitely THE staple for movie poster design, used in over 400 movie posters since its release in 1989. However, even the great Trajan has now been summarily dismissed by the upstart Gotham.

A few weeks ago, I began noticing that many graphic design publications and blogs were discussing the same topics and techniques. So here is my list of the top seven graphic and web design trends for 2012. These do not represent any magical insights on my part, but they may kick-start your own investigations and explorations.

Hand-drawn type
In fact, expand that to include hand-drawn anything.
Ultra simplistic designs
Single word. Single shape. Single color. Less is more.
Responsive web sites
I hate to be cruel, but if your personal site isn't responsive by end of 2012, you'll be stripped of your UX Designer Union Card.
Infographics
These will be everywhere, and most will be done very poorly.
Webfonts
See #3.
Circles and other organic shapes
Now that anyone can do rounded corners using CSS3, there has to be a new way to show off.
Overexposed photography
This is very difficult to do well, so it will separate the true Photoshop artists from the Photoshop technicians.

The UX-14 Staffing Model

2011-10-25T02:38:29Z

Anyone who has tried to hire UX professionals within the past two years knows the field is becoming increasingly competitive. Worse, the job description "UX Designer" varies wildly from company to company, ranging from the practice of pure information architecture to hands-on UI coding in Java. So, if you are a UX Director, how do you even begin to find the people you need and cost-effectively staff a department?

Contrary to popular belief, UX Professionals who possess all three major skill sets (effective information architecture, decent visual design, and solid presentation layer code) are not "unicorns.' They are rare, but they do indeed exist. However, it is almost impossible for anyone to be a deep subject matter expert in all those fields.

On the other hand, there are also very few "purists" left. Every visual designer or presentation layer coder with more than a few years experience has filled the role of Information architect, helping define a site's structure, doing usability testing, and writing documentation. Conversely, very few information architects have not created visuals nor written code for prototypes.

Based on these logically overlapping skill sets, I've created a staffing model which defines, what I feel is, the ideal Enterprise UX team. I call it "The UX-14 Staffing Model" as it is based on a team of 14. Of course, the actual number of staff members can go up or down so long as the ratio within each group remains about the same. Here is the breakdown:

1. Three UX "purists" with highly specialized skills: One high-level IA/usability expert, one amazing graphic designer, and one incredible presentation layer coding wizard.

2. Three combination IA/Visual Design Experts: These are designers who can produce award-winning visuals and have logical organizational skills, but who do not write code.

3. Three combination IA/Presentation layer coders: These are experts in site structure and standards, who can not only organize the content but also code all the interchangeable components that keep the site both usable and easy to maintain.

4. Three combination Visual Designers/Presentation Layer Coders: This is the group that thinks up amazing new visual interactions and ways to present data, yet also know how to code the page to bring those innovations to life.

5. Two All-Arounds: This group could build a complete website all by themselves that is logical, beautiful and well-coded.

Let's look at the flexibility a UX-14 team provides: At the beginning of a project, during the conceptual and planning phases, this team can put as many as 9 experienced information architects to work solving problems - permitting the Pure Information Architect to act as lead and solve really difficult issues. During that phase, the 5 visual designers and coders are available to create prototypes and AB test modules. As the project moves into visual design phase, again, 9 people possess the skills necessary to keep work moving ahead, with a Pure Visual Designer taking the creative lead. And finally, when it time for coding, 9 people are standing at the ready to write HTML/CSS -- all of whom are already intimately familiar with the project.

There are a also number of important secondary benefits to the UX-14 Team composition. First, the staff ends up cross-training one another as projects move through the shop, eliminating risks associated with centralizing critical project knowledge among only two or three employees. Second, this organization naturally lends itself to creative brainstorming, effective peer reviews, and Agile development environments. And finally, it is good for morale, as it utilizes the full skill set of each of your employees, permitting them to grow and expand their skills and gain respect among their colleagues.

So, if you are looking to build a new UX practice within your organization, or reorganize your existing team, hopefully you will find this staffing model helpful. Please feel free to write with with comments, improvement suggestions, or other feedback.

Is the Amazon Kindle Fire too good to be true?

2011-09-28T18:12:09Z

Maybe. But I've already placed my order. See the new Kindle Fire, with a color touch display and wi-fi.

Here's a rundown of what you get for $199: 1024x600 full olor touchscreen using the same technology as the iPad2, dual core processor, ultra-fast web browsing, free Cloud storage, 8gb storage, email, .pdf and Flash compatibility, PLUS all the content you've come to expect from Amazon (magazines, books, movies, television shows, etc.).

If you pre-order now, you'll have it in your hands on November 17th. At this price for these features, the only thing that stops this from being the perfect holiday gift is keeping your intended recipient from buying their own unit own ahead of time.

SXSW Interactive 2012: How much larger can it get?

2011-09-24T13:12:50Z

Yesterday was the deadline for early-bird registrations for SXSW Interactive, held each March in Austin. This will be my third year attending, and it is, by far, my favorite interactive conference. Yes, I know that after 6:00pm it's more like "Geeks Gone Wild," but that doesn't offset the value and depth of information presented during each day's sessions.

The SXSW organization reserves nearly every hotel within a 15-mile radius of Austin, so unless you want to stay in Round Rock and drive in, you must buy your badge and go through their office to secure a hotel room. Last year, I booked about this time and stayed at the Residence Inn just across from the Convention Center and was looking forward to doing so again. To my dismay, I discovered that not only was that property sold out (evidently by the second week in August), EVERY hotel near the event is unavailable. So, even 6 months ahead, the closest room I could secure was miles away on the shuttle route.

I'm not unhappy with that situation, just surprised. This leads to the question, "How much larger can the SXSW Interactive Conference get?" It is already to the point one has to run between seminars to hear the most popular topics, frequently to find a long waiting line. Getting a mobile connection is spotty (although it was much better in 2011 than in 2010). Don't even think about eating during "normal" meal times, as every bar and restaurant is packed, often with 6-7 people crowded around a table for 4. And I've completely given up on any party or event that is "free" - life is just too short and I can afford to buy my own beer, thank you very much.

At some point, maybe even in 2012, one of two things is going to happen. Either people like me will say, "This is nuts - whatever the info, its not worth fighting the crowds. I'm not doing this next year." Or, the Austin Fire Marshall will come to the Convention Center one day, look around and say, "Seriously?"

But one thing is probably certain: SXSW 2013 will cost more than 2012. Badge prices will go up, hotels rates will go up and sell out faster, and the number of restaurants who use "special" menus that week will increase. So, if you've ever wanted to go to SXSW, cowboy up this year and just do it. Buy your badge right now, get a hotel room, and join us for the show - just in case this is the last time its worth it.

Want to be Creative? Guard Your Happiness

2011-09-14T22:44:11Z

I was reading a discussion with designer Allison House (www.carsonified.com), on her methods for staying up-to-date when designing for rapidly evolving technologies. At one point she made the simple comment, “guard your happiness carefully.”

I must confess that, historically, my very best work always seemed to require the least effort to produce. Even when these projects took a great deal of physical time, they did not feel like “work” while I was doing them. Ideas flowed quickly, time seemed to evaporate, and my productivity soared. Now I realize why those projects seemed so easy: My motivation was fueled by happiness and self-efficacy.

I’ll openly admit that I’m addicted to the emotional rush of a project coming together just as I envisioned. At those moments, I have to suppress a Victor-Frankenstein-like desire to shout out, “It’s Alive!” (I’ve been told that type of behavior is generally frowned upon at the office.) So why does one project make me feel as if I am ten-feet-tall-and-bulletproof, while others seem so tedious I can barely bring myself to look at the files?

The answer probably has nothing to do with the project itself, but with my state of mind at that moment. Am I overwhelmed from weeks of juggling multiple jobs? Is there a poisonous co-worker bringing down the team? Am I afraid to start because I’m still uncertain what I’m supposed to be building? In all these instances, I now realize that my lack of motivation can be traced straight back to one thing: unhappiness.

Therefore, thanks to Ms. House, the next time it seems as if laboring through a project, I’m going to recognize that feeling as a valuable signal. Simply being aware of the need to “guard my happiness” may help me control my reaction to negative influences in my life, increasing my motivation and creativity.

Sketchnote Junkie

2011-08-30T00:54:44Z

Ever since I was in elementary school, I have doodled. But unlike the swirls, circles and cartoons that filled the binders and book margins of my friends, my doodles almost always incorporated words. I was studying for a High School American History exam when I suddenly realized I could remember many more details from a particular class lecture when that day's notes were filled with small pictures and illustrated words. Looking back, I recognize that was the moment I became a Sketchnote Junkie.

Sketchnotes, or visual note taking, lets you combine images and words to better comprehend and recall complex, frequently non-linear, concepts and ideas. I find that taking Sketchnotes during seminars and meetings actually improves my focus and attention, and I am frequently able to recall details from specific presentations months later.

Recently, I was asked to create Sketchnotes for the BigDesign Conference in Dallas, Texas. During the event, I noticed that many people sitting nearby were watching me intently as I drew, and many actually asked to see my notes during breaks. My particular technique is to fit all the notes from a single meeting or seminar onto a single page, within a perfect rectangle. Here is a shot of my notes for Josh Clark's presentation.

If you want to learn more about SketchNotes, there are many resources at your disposal. Mike Rohde's Sketchnote Army (www.sketchnotearmy.com) is a site dedicated to showcasing sketchnotes from around the world. There are hundreds of styles, and the variety displayed on his site is amazing. In addition, simply running a quick Google search on the term "sketchnotes" will uncover a wealth of information.

And don't forget to evangelize Sketchnotes when you are in the office. That way, your boss won't view your constant doodling as a sign you forgot your ADD meds that morning. Instead, they will recognize your activity as a "cutting-edge, cognitive exercise to improve retention of complex ideas."

Changing Fonts. Again.

2011-08-06T18:37:19Z

No matter what font I select, if I look at one of my own designs long enough, I'll convince myself it would look better in a new typeface. At the moment, I am trapped here at home, waiting on the Gods of Air Conditioning Repair to show up. So what better time to disable all my current webfonts and install new ones? After all, its not as if I'm going to be interrupted by 2 or 3 repairmen stomping around in my attic and probably cutting the power a few times.

I must say that I'm quite happy with the new installation of "PT Sans." It is available from Google Web Fonts, and is completely free. While I will need to run around and adjust some sizes, overall I am impressed with its screen legibility and the ease of installation. You simply add a section of code to your header file (I used javascript) then start updating your CSS.

You can find a huge selection of free web fonts, and easy installation instructions, at http://www.google.com/webfonts#HomePlace:home

What is Pentagram up to?

2011-07-24T21:45:33Z

I was exploring the web and found an excellent page showing all Pentagram's latest interactive work. There is a wide range of clients and design styles presented, so you are sure to find something that inspires you.

This blog is now broken, but its in Garamond.

2011-03-05T17:15:52Z

One of the things that has always bewildered me about the web is the continuing lack of control over typography. I understood it in the beginning, but now I'm to the point I want to grab the geeks over at W3C and say: "Really? This is still the best you can come up with?"

That said, I felt compelled to take advantage of WebFonts on my blog, even if the development team in my own shop does require "coding to the lowest common denominator" for safety reasons.

So, I took a few minutes, invested $55, and installed Garamond on this site. Which, like any sitewide CSS change, resulted in all kinds of unexpected (and amusing) results.

It was somewhat humbling to get instant feedback on how many times I had overridden font family inheritance without thinking. Theoretically, most of this site should have updated cleanly when I reset the base font. Not so much. The second shocker was the huge difference in the font size. I simply made the switch to Garamond, and suddenly I needed a microscope to read anything.

So, today I will go back into all the CSS and see if I can get this site rearranged and legible. So, if you are reading and things suddenly start flying around, changing colors and sizes, etc..., don't worry. Its just me.