My CSS Starter Kit: Final Thoughts
Making and Breaking the Grid and The Elements of Typographic Style are two of my favorite books on design and, for the longest time, I thought about them only in their applications to books. Sitting at a full-day workshop with Jen Simmons about grids it has opened mind and reminded me of what can we do to expand the reach of the web. I will discuss some of them as a way to wrap this up.
What is exclusive to the web
We need to research and discover what is it that makes the web unique and different from other media. The web is not print (don’t agree with this) has been a mantra from web designers and developers for as long as I remember. But I don’t think that I’ve ever heard any of these people articulate why?
New layouts and technologies make the web look and work closer to print but it’s different and interactive enough that we can turn these layouts into fully interactive experiences.
How do we leverage the viewport
Regardless of how long a web page is, users only see a small section of the site at a given time. The size of the screen dictates how much of our content we can view at any given time.
How do we leverage this viewport for our content? I’m still trying to figure it out but wanted to throw it out there
Are we story boarding? Why not? Story boards work particularly well with some of the technologies we discuss here. Animators have always done in a storyboard first, storyboards work particularly way to layout position of content in a grid and how elements interact with each other.
Framing the content (film) / Blocking and working on interactions (theatre) Both film and theater frame the content, block the movements of actors and cameras and how the characters interact with each other.
Because we are we looking at our content through a viewport we need to be careful how different areas of the page show and interacts with the user.
Find your sources of inspiration Because we are no longer limited to the 3-column holy grail layout it’s OK to look at other sources of inspiration. There is no reason why we can’t look at print and see how closely we can match their designs with our technlogies.
Sure we may not be able to match print designs 100% on a feature by feature basis but we are much closer now than we’ve ever been. Let’s experiment and play and discover all the possibilities that we have.
Everything is CRAP
One of the things I learned at An Event Apart is how much of the graphic design cannon we can leverage on our (web) designs. I was in Grad School for Instructional Technology when I first heard about CRAP and it has guided my design and my work outside design ever since.
The four components of CRAP:
Contrast If the elements (type, color, size, line thickness, shape, space, etc.) are not the same, then make them very different. Contrast is often the most important visual attraction on a page.
- Can you see the difference between your content, ads, headings, body copy and comments?
Repetition Repeat visual elements of the design throughout the piece. You can repeat color, shape, texture, spatial relationships, line thicknesses, sizes, etc.
- Do you have a consistent theme or brand throughout your site? Do you reuse the same color, shapes, blockquotes, formatting for all of your articles?
Alignment Nothing should be placed on the page arbitrarily. Every element should have some visual connection with another element on the page. This creates a clean, sophisticated, fresh took,
- Does everything line up or have you got things centered, left aligned or out of place? If you don't have everything lined up, is it deliberate?
Proximity Items relating to each other should be grouped close together. When several items are in close proximity to each other, they become one visual unit rather than several separate units. This helps organize information and reduces clutter.
- Can you find everything you need on your page easily? What is it that your visitors are looking for?
CRAP definition taken from http://www.dailyblogtips.com/crapthe-four-principles-of-sound-design/