Posts Tagged ‘Andy Rutledge’

My Uneducated Answers to Andy Rutledge’s “Creativity is Not Design” Test 2

Replying to:

Note that I’m not a web designer…nor a creative person.

Still, I had made a topic in the Temporary StopGap forum or if you prefer a more active community, I posted it in DonationCoder but for the most part the links lead only to an old youtube video of Ms. Shackles answering the test from her opinion. Some of which I disagree with.

Note that I’ve only recently discovered Andy’s site from Mashable and I apologize if the quality of this test has been debunked or it’s really really ancient history according to internet times.

1. In the example below, which pattern appears to be manmade and which appears to be organic? Why?


I pick B because even though Ms. Shackles pointed out how A is disorganized – it’s not disorganized enough.

It tries to be random and pretends to be messy but it’s not even “chaos with a desired intent” as noted by the patterns having no “knocked off spread” – like accidentally bumping a table full of stacked poker chips.

To me that’s not organic. That’s just someone’s bad ability to create an authentic “messy” pattern.

…or it could even be someone’s bad ability that allowed for such a mess.

B is the one that holds the symphony of a meticulously stacked set of round circles.

From a design perspective, you may say it’s too organized but I ask you: When you feel comfortable with pressing the buttons of your NES or PS1 Dual Shock controller or even holding the handle of your commonly bought brand name soda bottles, do you not feel comfortable because every side is in sync?

IF this were a pure set of set by set circles on paper, yes, it’s flat. It captures “genericness”.

…but these have colors and interesting “enough” ones at that.

Left alone, like any incomplete design regardless of quality, it doesn’t feel man-made.

It doesn’t come off like having a purpose.

It’s like a printed sheet of generic side by side images.

…however like one of those bubble wrappers that come with packages, even on their own if you pay attention hard enough, you start enjoying popping them.

…and with each pops, you allow the subject of your design to breathe more “organic” life into the monotony of B compared to the pseudo-chaotic feel of A.

For in the end, I feel the “man-made” adjective is a trick question.

Both can fall under man-made because “someone” has to have made those images in order for it to appear on this test.

The task then is to ask which gives the most “organic” feeling in such a way that especially combined with other parts of a design, becomes something a living being is unconsciously or semi-consciously attracted to – even beyond their sense of creative tastes.

I say this because someone who’s into abstract art might prefer A, but B is the more flexible.

B is artificial like a toolbar button or the shape of the handle of a bottle…but B by it’s artificiality and it’s superior “organic”-ness becomes one that truly becomes man-made.

For like every mass commodity design, it is not limited to what the designer “intends”. It is how every holder “feels”.

Man-made then in the sense of this pattern and in the sense of design is one where every man constantly makes something out of it.

So much so that “design fiction” is created.

Design fiction in the sense that you no longer need to interpret this “fully” because you can get such a wonderful designer feel of this artificial pattern that…more often than not, you no longer realize how “attractive” a plastic bottle feels like when it’s in your hands. (especially if you’re not trying to pay attention to it’s design)

It’s just there. It just exists. It’s just artificially and wonderfully man-made like the modern day switch even if it does not denote “movement in the sense of the living or the wandering eye”.

Still such an analogy fails to work because in the end, web design is just as much “flat” ergonomics.

Anything that can be touched can feel special but that doesn’t change the fact that the two images could be treated as purely patterns.

Pattern can guide such things like toolbar design and placement but pattern cannot also have “bumps” unless it is intentionally designed with that property.

…so from the perspective of web design, why is B still more organic?

Because A messes with the tried and true.

The primary example I can think of is in comparing Google Docs’ simplified set of buttons and Microsoft’s Ribbon.

Now, it’s a flawed feature per feature comparison because Google Docs is less powerful and even different than MS Office. (one is more like a Wiki, the other is a suite of needs trying to “un-hide” it’s features)

Even from a statement of criticism, the comparison fails because both have their following and regardless of which one is better, both have enough of a name so that their fanbase would choose whichever they side with.

I refer to these two though because if you try to go beyond the surface depth of analyzing why either is better than the other, Google Docs’ “design” is superior because it didn’t try to ruin the “organization” of what people already “get” and in the sense that’s what makes patterns work.

The Ribbon on the other hand tried to do A and you soon realize the only reason some are saying it’s easier or better is because it’s much easier to teach and show people where the different options are.

This ignores the issue though where the instructors didn’t really have that much higher of a difficulty doing it on the old setup. The Ribbon simply became a “unique” design for the sole virtue that you’re stuck with it and “it’s still not so bad”.

It’s like having the N64 controller. It becomes “tolerable” for the simple reason that it is the “default” and it just “exists” and it’s not “usage breaking”.

Still, this is as irrelevant as saying the design of the spear is better than the design of the axe. The Halberd is still superior in many ways to both and people will still use what they want.

Design in the context of patterns, shouldn’t be in my opinion used to criticize.

It should be used to create.

If you always criticize, you’ll miss the boat on why MySpace gained members or why people use Yahoo – even if your criticism is “valid”.

If you create from the design problems you noticed, you might just end up with a Google or a Facebook.

Of course, that’s vastly over-simplifying things but in the case of these two patterns and in using them as ingredients from a design “starting from scratch” utilization, B is more organic and man-made than A in that there’s a higher chance that following this “tried and true” pattern will result into a more organic and man-made perceived design of your own while A is just asking for your design to be “appreciated creatively” whether that be in justifying the pattern’s “movement implication”, the pattern’s “abstract connotation” or the pattern’s…pattern…I don’t really know. I don’t know the designer terms and I don’t know what’s so special with A to begin with. (but then I don’t “get” many museum arts either)

To me, B is organic, B is man-made, B “can” be man-made into a better A. There’s just no compelling advantage A has over B other than “implying creativity”.

2. Is the energy of this composition horizontal or vertical? Why?


Here I agree with Ms. Shackles that it’s horizontal but maybe not with as much inspective energy as she gathered.

It’s horizontal simply because the rectangle is in the fallen or “lying in bed on one side” state.

The design can be both horizontal or vertical – especially because it’s just a lay-out. There is no underlying feature yet.

I don’t even know what energy of composition means. I can’t “feel” any energy in that. It’s just a husk of something. The lines don’t even generate any idea “unless” you can self-interpret what the line spacing is for.

3. Which of the two compositions evokes visual discomfort? Why?


Neither really. If there was discomfort, I would have turned away my eyes on one side even before I read the question.

Ms. Shackles thinks it’s A because of the cramped out space but sometimes that spacing works especially using placeholder texts.

The more text there is and the more cramped it is, the more comfortable it is for me to read.

Remember the image is not “interrupting” the spacing on the sides. It’s the spacing on the center or the “content” for the most part.

B could even be hard on the eyes depending on what the image or page is about. I would certainly feel very disconnected with B if it’s a profile page. – that mild spacing can generate the sensation that the image of the person is separate if not generically “apart” from who the person says they are.

Still, neither is really wrong.

B works well enough for average blog posts lengths.

There’s really no one or the other in this case. I’d even say the thing that evokes the visual discomfort for me is the actual lay-out.

Just not a fan of it – too small rectangular box for an image, business card level cut off text, driver’s license ID card genericness but with paragraphs…it’s safe to say that if I had at least considered one of this choices to be a visual discomfort in the context of a fashion disaster, I’d consider them both Fs but that’s only if I was visually disgusted by at least one of the choices.

4. Given your answer to the previous question, how else might you imply or evoke discomfort in a composition or layout?

Well, I guess I sort of gave some idea with my previous answer but really it’s much more valid in my opinion to ask how to evoke comfort.

So much things can be added to evoke discomfort in an age where people might get disgusted with a nipple while at the same time un-disgusted by the thought of seeing guro.

I mean… you can paste anything in there or mess anything up and it will evoke something out of anyone. That’s kind of the point of design.

Even poor design that can evoke disgust or desire is better than bland design that can evoke nothing so this question really isn’t a determining factor for someone who can at least create “a design”.

5. Reflecting on what you’ve discovered in the previous 2 questions, what might you assume about crafting a visually comfortable experience? Why?

Damn, I really should have read these questions all in one set. I guess you kind of caught how I didn’t really watch part 2 of Ms. Shackles video. (ok, I watched the first few seconds)

I would assume a comfortable experience would depend on what the recipients’ innate thoughts to be.

If I don’t have that access, I’d try to assume the stereotype of the person and what purpose the item is supposed to achieve.

For example… a bland husk of a lay-out like the above isn’t bad design when used in a quiz like this…or even as a required brainstorming task.

Most everywhere else and it feels like “Huh?”

Especially for someone like me who don’t even know the basics of image editing.

All I can assume is that the image it evokes to any capable designer is “whatever – what I discovered is I’m better off thinking of the actual design I’m working on and thinking on how to visually make that a comfortable experience for those viewing it rather than bothering with the image above.”

6. Why is asymmetry generally more advisable than symmetry in page layout?

I think I caught Ms. Shackles talking about something about this. Something about where the eyes go and stuff like that.

I disagree with this notion though although I don’t reject it.

See for me, asymmetry in design is like insulting the asymmetry in creativity.

In that sense asymmetry in design is just generally more advisable for page lay-outs because it’s pseudo-symmetric as contradictory as that sounds.

Try throwing a true asymmetric design in any page and see how people like the creativity behind the design instead of the design itself.

Say… add your favorite symmetric Transformer as your wallpaper. Many of it still works asymmetrically because people can go “Cool! Transformers.”

The only reason symmetry is worse is because symmetry asks not to be violated by your grubby designer eyes and ideas.

Symmetry is like a pre-painted wall that isn’t allowed to be messed up, re-touched or painted graffiti on.

Of course it’s worse because as a page lay-out designer, you are asked to “move” the lay-out.

Still if you ask all designers to create a tried and true but pretty page, they still rely on symmetry.

…except their symmetry is design that works rather than symmetry as in equal lengths and spaces on both sides.

It’s still symmetric though because if a designer tries to make an un-even box highly un-even to the point of “evoking headaches” for the user, he’s still a poor designer because he broke the pseudo-symmetric need of the user to make sense of the design.

7. Given what you understand about the previous question, what other mechanisms might help to compensate for the problems created by symmetry in an informational page layout?

Moving symmetry. Customizable webpages.

Just a few things off of my head,‘s custom widget, Netvibes/Alltop-like columns, maximization of symmetric properties, hide and unhide sidebars…

The mechanism is not the problem IMO. (well, it’s a problem for people like me who haven’t learned to produce design that we want ourselves)

It’s the problem with defining and sticking to the dictionary term of symmetry.

The more welcoming you are to the idea that symmetry must be re-defined as “design possible”, the more ideas you can develop for beating asymmetric design necessity.

That omits the fact of knowledgeable website programming and it’s limits but design…design doesn’t need to compensate in this case with mechanism but rather with breaking popular tried and true definition or in short, design just needs to make a meme of symmetry for designers and the case of mechanism becomes a case of improving design rather than fixing design.

8. Describe specific communicative reasons you would employ sharp corners instead of rounded corners in your design.

I think this is the last of what I saw of Ms. Shackles’ answers.

Hmm…I don’t think sharp corners are clearer per say.

Round corners just take up space.

Space that for a long time, many designers are biased against and for. Before the popularity of Web 2.0-like AJAX pages, that is.

I say bias because based on my observation, if designers aren’t too conservative in using rounded corners as they fill up their pages with details, they go overboard.

They…make it as if everyone is into Apple/Windows and Gnome.

Rarely do users luck out with Twitter and Google.

I mean Plurk is a great example.

It’s superior than Twitter for holding conversations. It’s better at monitoring replies. It’s even the only horizontal scrolling timeline thingy I know that has achieved the goal of simple yet useful design as adapted by mass users of Web 2.0 services especially when many moved to Plurk temporarily after Twitter’s downtime.

However Plurk goes overboard with what menus eat up space and what doesn’t. Rounded corners make it feel like a “toy” rather than a reputable social network.

Yet…Plurk also goes down when it goes mobile. Even the Plurk desktop client don’t match up to the Plurk main design and it loses all sense of symmetry and it’s a clear example of why asymmetric is not favorable. Functional is.

Asymmetry only gives the designer the confidence to not settle for symmetry and channel a different but still tried and true uneven symmetric design.

Rounded corners is just another designer idea that hasn’t gone out of the dark ages yet until recently but not because sharper edges has a clear superior quality. It’s just bias in my opinion.

No different from some Westerners laughing at bug-eyed Anime characters. Can’t be helped and over-praising of them is bad either as with the case of many Anime characters nowadays that are exceedingly and over-exaggeratedly Moe and lacking what I consider the soul of older animes.

9. Describe the communicative differences between these two structures.


Oh wait! This is definitely the last answer I heard from Ms. Shackles.

She said something about the eyes going one way or the other.

To me it’s just A being more annoying at trying to draw how my eyes sees things but even B is the same with the way it tries to make my eyes go downwards or upwards.

So to simply regurgitate what Ms. Shackles said in my own words:

A is for English and B is for Chinese and C is for culture and culture is the communicative difference.

10. Following the logic you employed in the previous question, why might you employ a gradient as a visual texture or a gradation as a layout mechanism in a design?

I won’t. I’m biased against gradients.

Not that they’re horrible because they can fit in anything but that’s kind of the point IMO.

They fit in anything.

It’s like designing a bra and asking what size it should be. Sure, it’s important but once you get past the fitting stage, the guy and maybe even the woman would just like the size that gets them the most attention or the most flesh without looking slutty.

Gradient IMO is for the realm of the creative. In this case, the creative designer.

The one that cares for the finished product to the point of an artistic obsession.

However the problem with separating that from the product is that as I implied, you can mess with the wrong gradient and it still works.

Gradiant employment should be delegated to the whole of the designer’s capability, personality and design.

It’s a sum of a whole and not an aspect that works if it’s taken out of it’s element.

Following the logic of my previous answer, it’s about the designer’s culture and personality meeting the target receiver’s culture and personality.

Before you can answer why, you have to first have the who and this who in terms of design is numerous.

You have the visitors, the employees, your own individuality, your other teammates be it the writer or the marketer or the logo maker vs. your page designer pride and prejudice…it’s easily unanswerable by being all answerable.

If there is a simple why for adopting a certain gradient over another, it could be summed up in the simple sentence: “Designers…make it work.” -emphasis on the “make”

11. What is the purpose of the grid in a layout?

I would say symmetry in an asymmetric biased plate.

For the most part though, a grid is there to keep everyone disciplined even when they get lazy.

12. Since the relationship between the individual objects remains constant in both figures, what has changed in figure B?


B became more organic. It created the illusion of being held, touched or wanted.

It’s like the difference between an action figure in a mint package and the first time you unwrapped said action figure as a kid.

Sure A might be nice but B makes you want to actually “use” it.

13. Describe the difference(s) in the primary visual message between figure A and Figure B. What fundamental principle(s) account for the difference(s) in the communicated message?


I don’t know. I’ve heard the terms of foreshadowing and vanishing point in basic art instructions but I never understood them from a design perspective.

I would think it’s the activity of B but you could throw in the Japanese Sun in there and it’s back to being static if not less organic compared to the primary visual message of A.

To me these images are like stuff you think from a design perspective after you created a draft or an idea on where this is going to contribute.

From the perspective of two images being compared, there’s no primary visual message because the primary message being sent is that this is a quiz on how good you can differentiate between design and creativity.

I could say the fundamental principle is the word “difference” itself but then that’s like dodging the question so I don’t know.

14. Describe at least 3 different ways to lead the viewer’s eye into and through a layout/composition along a specific path. What mechanisms could be employed to accomplish this?

Trusted and passionate conversations from 3 different designers explaining their work.

A designer by design should have a bare understanding of what separates him from the peons who aren’t designers.

The lines and grafts and shapes needed to lead a viewer’s eye does not need to “lead” most non-designers because they don’t care most of the time. They just want to be drawn and if what you draw them in for is nice/cool/useful… no matter how poor the overall execution of the mechanism is, they’re hooked for the most part.

When you go into building block view mode though, the important part is for the inferior to witness what the superior is viewing without losing their own taste.

The important part the mechanism has to address is how the viewer can feel a correct distaste of your design because they understood where you were coming from.

For that, conversations are the only sure mechanism especially trusted and passionate conversations.

Everything else is just a supplement on how the designer can improve his way of talking to you be it lines, 3d models, templates, backgrounds, etc. etc.

15. In the image below, which object is influencing another object?


As cheap as this may sound, the rectangle is influencing the square and the circle.

Maybe that border should be exempted but I feel a pool of water influences whatever object is in it.

You can play with the circle and the square all day but it’s the water in the pool that influences them both. In this case the rectangle rules them all. If the rectangle becomes a circle – then the circle and square inside changes each other’s role regardless of which choice you feel is primarily influencing the other.

16. Does the influence you perceive in the example above imply motion or a static state?

Both. Is the picture of a tear static or active?

Should it imply crying or should it imply etching it forever into your memory?

The answer is creative and sure if you just look at the placement and size of the items the easy answer is motion but let’s not forget it’s still an image. A still image that isn’t a blatant animation with reasons for why a motion has to act and react to another motion.

At some point, those in authority should reserve a special spot for the meaning and relevance of an optical illusion IMO. They’re cool but they don’t really push design enough for many people to think beyond the trick.

17. In light of your answer for the previous question, to what effect(s) might you employ the influence of graphic objects or structural elements upon one another in a composition/layout?

If I understood optical illusion perfectly I think there would be no reason to try to learn design.

It would be like in subliminal advertising. If you can make that form of advertising work perfectly then you wouldn’t need to think or learn about viral marketing, focus groups and pretty pictures that all fall within graphic objects and structural elements.

I think the cheap scapegoat-ey answer would be to the effect of maximizing functionality.

My biggest wonder up to this date is how many people are still wowed by Apple’s design when what they mostly do is understand aestheticism’s role in maximizing functionality.

If they wanted to mimic that, sure let’s wonder at the wow.

They don’t however. Many of them and maybe I’m included there, just want to air either our awe or our disappointments.

You can’t maximize functionality like that.

At the heart of every commodity consumer/power user appealled design is the simple analogical tale of the guy who decided to build a bridge, gain fame just so he can finally bang that pretty lady.

The myth that programmers are poor designers because some engineer can utilize a complicated system is only true in the sense that the programmer has no desire to maximize functionality.

After all, why maximize functionality when you can aim to maximize productivity by making something more secure or faster or snappier or more destruction proof or feature rich.

That’s not a hallmark of a poor designer. That’s a hallmark of someone who’s already gotten the design and doesn’t want to rattle his brain designing for others.

Maybe I will learn that my opinion is wrong if I ever actually learned how to design and am actually working on a project but to me if you maximize your design for functionality and your heart and mind is really in the passionate place, you will eventually discover ergonomics near the base, aesthetics closer to the peak and introduction of functionality at the very peak of maximizing functionality.

Not that reaching the peak guarantees tapping the answer and unlocking great designs like no one ever thought of but I think it’s still a realization and it’s still “the” primary amount needed to answer how much object splattering and tweaking is optimal for your design.

18. Which of these two line examples communicates speed?


I’d go with B but it’s just cause it reminds me of a race track.

Personally I don’t know what speed means in design. First pic gives me the feeling of hasty while the second pic gives me the feeling of curvy but I guess it’s still B because (I apologize but I don’t know cars) if I’m correct, speed is different from acceleration so B is maintaining speed while going around curves and A is gaining speed from accelerating, reversing/drifting and then re-accelerating.

19. Draw a masculine geometric form …and a feminine one. What distinguishes the gender message between these two forms?

The extent of their curves I guess.

In design where the mere shift of colors could come off as being for males or females, I don’t really give much respect to the power of geometric gender in determining design messages.

20. Compare figure A with figure B. What function(s) is/are served by the structural elements in figure A? Are they necessary? Why or why not? Are there other ways of accomplishing a similar effect? If so, how might this be accomplished?



Each of the elements in A symbolize a message to the viewer.

It’s like a cryptic SMS message by the designer to the viewer to treat whatever item is in the element with a certain notability and role.

Are they necessary? No.

For so long I hated how newspapers are designed compared to tabloids but people ate them up.

Even with websites, I hated how I had to squint to read someone’s message in FriendFeed but in it’s heyday, people ate it up as if it was a SMF-powered forum.

As for accomplishing the different types of roles… yeah. Turn it around. Twist and turn. View it on the laptop instead of the I-pad.

Switch to a LCD monitor instead of a CRT… the lay-out doesn’t change but it’s just a clue of how many different things that can be done with it from the slight glare of color to the contrast when you dim your monitor…imagine what more a designer can suggest through the simple allowance of having the capability to re-design those lay-outs.

21. Compare the layouts below. Which one possesses a clear hierarchy of information? How is this accomplished? In what other ways could the same effect be accomplished?


Neither IMO.

To me these may be tried and true designs like my comment above with the newspaper but man… that’s like saying 24 hour news channel represents the true intent and purpose of journalism.

Those things are still holding articles and not books.

None of that stuff is clear!

That’s just some fake hoo doo where the left side image throws out information desire in favor of the shiny large image and the right side image throws out information desire in favor of the globs and globs of mini-articles you might want to invade your brain with so that you won’t feel like digging deep for more information “on a specific subject”

Other ways to achieve that is to use a scrolling ticker bar, Google’s recent Reader Fun box where it just loads up the images plus the title, notification pop-ups like the one on Instant Messengers and Twitter clients, Twitter’s RT button News Sharing set up…stumbleupon’s random one button discovery…even just designing a colored button besides any article to denote it’s quality…

There’s tons of designer tricks to confuse the hierarchy of information but clear? Man…that’s tough.

Maybe if E-book readers spread and there’s an easier way to actually read books recommending one after another then design lay-out can get back to work but right now, the mere fact that tons of text is seen as bad design while the addition of the simplest of generic images is seen a plus in design means it hasn’t been accomplished from a design perspective. At least not one I’ve encountered where it’s a true unanimously accepted idea like with Twitter.

I have seen concepts and ideas though but the full enchileda doesn’t exist yet.

22. In which of these examples is the logo larger? And yes, this is a trick question. Discuss.



The latter and that’s just assuming you consider a “banner” as the “logo” though.

I don’t think size should be a factor in a logo though.

Like with the Ribbon example, people will eat up whatever is there already except for whatever they hate.

Everytime else and the common time they may hate it is if they’re invested in making the site more appealing and from that perspective: a designer should design something that would inspire his viewers to design and suggest things to him. His actual design doesn’t matter in the sense of quality. It just needs to get people talking one way or the other for it, including the size.