Grids, gutters, and colors

by Brian Hoff Pro | August 02, 2010

| in Devin Ross' Blog

4,439 views

33 likes

25 Responses

Pro Brian Hoff

Greyscalin' for hierarchy and griddin' for layout — or as recently termed by Matthew Smith "DesignLite"

1likes
over 1 year ago
Pro Patrick Algrim

Looking fantastic. I love how your playing in the gutters with the pagination. Always a fun thing. We played a whole lot in the Fast Company design, stuff all over the place, but actually still in a grid. Not to harsh Mr. Smith, but going greyscale while designing isn't a new rule. See Jeffrey's recent dribbble here. Let's not contribute to the growing adolescence of the design community by stapling rules already set forth by our founding design fathers. (Love, no disrespect – Intelligence, no disruption)

over 1 year ago
Pro Brian Hoff

Thanks Patrick!
It's always fun to create movement through a grid. As for the term by Matthew, I think that's just what he was calling it personally, not that he was deeming it his own. It's more of a fun term than "designing in greyscale" :)

3likes
over 1 year ago
Pro Patrick Algrim

@Brian: Totally!
Let's publicly brainstorm for a second. How can we introduce a more direct and proper learning ground for the entire design community? I feel like there should be (if not already) a portal in which you can search, lookup, and maybe discover new design rules you may not have known before. Not just a wiki type, but one with actual examples, references, books, etc.

over 1 year ago
Pro Chris Wallace!

Hate to break it to you (and Matthew), but it's called "prototyping." ;)

over 1 year ago
Pro Brian Hoff

@Patrick, We can call it "going to design school" :P hehe... but on a serious note that would be very handy.

@Chris, "Prototyping" sounds so dry... Needs flava! :P

over 1 year ago
Pro Chris Wallace!

Whatever helps you sleep at night Bri.

over 1 year ago
Pro Brian Hoff

@Chris, I never sleep, maybe that's my problem haha :)

over 1 year ago
Pro Chris Wallace!

True story. ;)

over 1 year ago
Pro Matthew Smith

@Chris prototyping is not that, sorry broseph. Prototyping has a MUCH broader range of meaning that what I was doing, or what I think Brian is doing here. It's more about setting the stage, its not just IA, it's not really wireframing, it's not what I'd call design, and it's not as dynamic as prototyping, so DesignLite seemed like a fun term to use to describe something that probably doesn't need a definition.

3likes
over 1 year ago
Pro Chris Wallace!

@Matthew I agree, that's why I include it in a broader term like prototyping.

over 1 year ago
Pro Patrick Algrim

@Matthew
What happens when Ms. Daisy, a young 16 year old enthusiast stumbles upon your discovery, shares the similar discovery, and then starts calling her early stage rounds "DesignLite" rounds. She enters school and gets chuckled upon when she finds out – it's not real.

Moral
You have influence. A lot of us here do. The point is that we should all be very careful every time we share anything (since the Web has given us 85% more tools to communicate than in real life). You might think I sound like a dick, but we'll never go anywhere stable if we don't try to. Every time we share, we give new opportunity for someone else to learn and associate their expertise.

over 1 year ago
Pro Dan Rubin

@Patrick: I'm not sure there's anything wrong with your example, other than assuming Ms. Daisy would be made fun of in the first place.

There isn't an official term for this approach to a particular stage in the design process — some call it "greyboxing" (if anything, that's the most common term I've heard for it), but there's nothing wrong with Matthew coining another term for what is an important (and content-centric) but oft-overlooked part of the design process.

We need terms to help communicate unfamiliar territory. It's the content-focused aspect of this that's most important, not what we call it.

3likes
over 1 year ago
Pro Patrick Algrim

@Dan: Other than the fact that it's Ms. Daisy and we are assuming she's going to art or design school, then sure, she's been "doing it" right but calling it something else.

But if she were an architect, and she told her contractors, "This is the hammery naily lite stage with paper." Would they know what to do? More importantly, would you want to live in the building she constructed? The point of all this is, we can't keep re-stapling old rules to new personal discoveries. We already are doomed by knowing that we'll have constant obtuse situations by the new technology being formed daily. If we don't have a solid ground of our roots we'll always be doing a hobby and not a science.

Lastly, is that what Matthew was doing? No. Matthew didn't steal the Mona Lisa (or do anything really wrong). But once more, we as individuals need better understanding of our personal influence so we can better preserve the proper groundwork laid down by designers. Is the "greyboxing" the prime example, no. But this discussion led deeper into the depths of the ocean than I thought it would. But then again, I am in fact, an asshole.

over 1 year ago
Pro Brian Hoff

@Dan and @Patrick,
I agree with Dan on this one. Sorry Patrick (take no offense though buddy). No matter how you skin a horse as long as the reasoning behind it is for the right reasons or reasons that lead you to a better solution. Matthew could have coined it, "turtle heading." For what matters is that he was performing a crucial and beneficial step in his process that assists in his creative process. Is this the right solution for everyone? Certainly not. But it is a great method in the process for Matthew (and myself). It's great for others to consider as well, no matter how you name it. You call yourself an an "asshole", but we love you anyway :) Great discussion all around guys.

1likes
over 1 year ago
Pro Chad Engle

I think in this context the wording doesn't matter. I'm going to call it the gridda-ma-line-doodad-turkey. So, where I work I call it that. You could call it "filling the pancakes". Now, if we are talking about the baseline of a letter or a "pixel" as a unit and switching the technical jargon for that I think that's where Ms. Daisy would have issues.

@Matthew @Brian @Patrick I'd still call it design, it's not the fun and star studded design but, it's the guides and grids that make great designs stand out from the rest. It's like tightening bolts on a car... You're not really building anything but without the bolts, the car will fall apart and therefore the transportation or in our case, the message is lost.

If a technical term need be thrown at it I would go with Form Study Prototype. But it applies more to industrial design, architecture or transportation design. (something physical) Then pull out this little tid-bit: "without representing the intended color, finish, or texture".

1likes
over 1 year ago
Pro Patrick Algrim

I think we've all gotten a little misguided by the terminology issue here. But let's run through a fun example. Meet John and Sam. John says to Sam, "Dude, my dad has this new Super-USB83 drive in his computer!" Sam asks, "Woah, what does it do?" John says, "You can plugin USB devices to it, and expand your hardware." Sam stops and says, "So wait, it's a USB drive? Then why do you call it a Super-USB83?" Thus dad will always stay a hobbyist and never work at Apple.

But that's besides the point, the goal here is that we should all understand with each publication of our knowledge (An email, tweet, blog post, or dribbble) we should use them as opportunities to help and guide others. You may not see them learning, or being guided, but they are there. But then again, I am not only an asshole, but also a female cleansing utensil known as a douche.

over 1 year ago
Pro Brian Hoff

@Chad and @Patrick, Both very valid points and both very correct in your own right. However, the confusion all around is that this process is more than just "prototyping, greyscaling or form studying." I think I'm on the same page as Matthew when this technique is a cross between a variety of "terms" as it uses prototyping for layout, greyscaling for lights and darks and visual importance of elements, typographic hierarchy, typeface selection, balance, structure, flow....etc. Even some of the interactive elements are planned for. I think if there was a "correct" term it would be called "process." For things that do have exact meaning, then yes Patrick, you are certainly right. In this case, personally, I feel that it goes beyond that, and cannot be labeled as one politically correct term. It's process work at it's best term. Overall to each their own, but I think we can all agree that this is a great discussion. :)

1likes
over 1 year ago
Pro Matthew Smith

@Brian (I fully endorse that statement, you may now run for design governor and I will vote for you)

I'll add that this is Dribbble, this is not a blog, or a place for articles, but it does have influence. Perhaps the dialog here is actually where any student would walk away realizing that the web design industry itself may be too young, or too fluid and fast-paced to be easily pinned down to even helpful terms like prototyping. Though that doesn't mean we shouldn't aim at those terms, and have great conversations like this one.

Perhaps this would be helpful:

Makeshift Terms: (off the top of my head and in brain dump fashion)
----------------------------------------------

Wireframing
Information architecture focused. Boxes and arrows. Develops a framework for content hierarchy. Can often overlap with a prototype. Wireframes are often static or conceptual.

Prototyping
Focused on information architecture and site flow and function. Boxes and arrows with functionality, dynamic content, use of the behavior layer. Like wireframing, it can develop a framework for content hierarchy.

Grey Box Wireframing
A way of presenting information architecture with a suggested design layout. Boxes and arrows with shape, grid structure, sometimes typography, and sometimes imagery. All in grey-scale. Leans toward wireframing over design.

DesignLite™, or "Process" designing - both made up psuedo terms
A way of designing before adding details that can easily cement a design and make changes difficult. Usually content has already been chosen, perhaps wireframes have already been approved. This is the process of bringing the first design ideas to bear. Includes, shape, form, line, typography, grid-layout, visual elements and imagery, usually static and likely grey-scale. Leans toward designing over wireframing.

Design Stage of web design
For some designers, this stage won't be that different than any of the forms of "layout" above, but for freaks like Brian and I we're trying to cut pixels in half and will someday accidentally make a pixel atom splitting explosion (inadvertently). This stage is where I'll add texture, color, and look for rhythm and cadence in the nuances. I'll start tweaking pixels, and checking every last detail. This is too laborious to do at any earlier stage and risk having to redo basic layout structure. It is a final sanding of the already shaped wood - so to speak.

----------------------------------------------

@Chris I see your point about prototyping now. I almost always think of prototyping as having a dynamic quality rather than a static layout/look

9likes
over 1 year ago
Pro Chris Wallace!

I'm enjoying this discussion. Good points all around. Great food for thought, methinks.

over 1 year ago
Pro Dan Mall

Awesome discussion so far… really a great read.

I don't know that I can get on board with the term DesignLite. I don't really see the difference between that and "Design." What if the final site was going to end up greyscale? With this definition, it's very close to relegating "Design" to more of a skinning phase than anything.

For me, I've simplified my design process into two phases: Planning and Designing. The goal of my planning phase is to get my head around content. Usually, that takes the form of a list or an outline. As soon as I start to take into consideration how that looks or how one piece of content affects another, I'm designing.

1likes
over 1 year ago
Pro Patrick Algrim

At any point, I'm stopping here
If we all share a creative process, then I understand that. If you go for a coffee, if you sketch on some paper, if you watch Jerry Springer, then fine. Sharing that with others is great. You can stand on a stage all day if you'd like. But there's a fine line between a creative process and a design process. A creative process shouldn't have any boundaries. While a design process (in my eyes - reference an architect, doctor, mathematician) needs history, applicable models, results, more than just a few years of experience, and then refinement before it should be taught. Our biggest and infinitive mistake is that we don't make these two differences clear enough.

over 1 year ago
Pro Brian Hoff

(( Discussion closed ))

3likes
over 1 year ago
Ralph!

yup.

over 1 year ago
Pro Sandro Dujmenovic

this dribbble is a breath of fresh air here :)

over 1 year ago