Badge #5: Programming (CSS Frameworks)

After reviewing the material provided on TLearn2 and the badge page describing CSS Frameworks, I decided to select 960 Grid System version of CSS Frameworks. Many sites suggest that the 960 Grid System is the most established form of CSS Frameworks and therefore the most generally applicable. I cannot get enough of programs that make design more straightforward and easy to plan out (see my post about Wireframes), so my experience with CSS Frameworks was enjoyable.

My second CSS frameworks design featuring Pride and Prejudice content. I decided to put both images on the left in this second iteration.

My second CSS frameworks design featuring Pride and Prejudice content. I decided to put both images on the left in this second iteration.

My first Pride and Prejudice infused design

My first Pride and Prejudice infused design.

Thomas Cannon’s 2011 article entitled “Using the 960 grid system as a design framework,” was incredibly helpful while learning how to use the Grid System. Cannon provides the appropriate amount of background information about the CSS Frameworks landscape without overwhelming designers or developers looking for an informative and easy-to-follow guide to frameworks. Jeffrey Way’s 2009 video called “A Detailed Look at the 960 CSS Framework” provided a more in-depth account of the existing status of frameworks in the web design and development industries, and it would be helpful to those who prefer visual learning by following videos to  basic written follow-along directions.

What works really well about frameworks is definitely the cleanness of the templates provided. Because the grid organizes the space on the 960 pixel area, it becomes very easy to understand different ways to approach a design. I also thought it was very helpful to already have selected the items that I wanted to include in my design, so that the process was analogous to filling in a puzzle in which the user gets to determine the ultimate outcome. Using CSS Frameworks definitely seems like it would improve relations and communication between designers and developers, because it is so easy to understand the number of square pixels that each item on the page would take up and where exactly images or content would be located. This also provides a way to show clients what designers are thinking in terms of design before starting all of the necessary coding to complete the web pages. It’s also much easier to mess around and change designs inside of Photoshop with a wireframes grid than in the actual HTML or CSS.

My third Pride and Prejudice infused design. This one is probably my favorite because I like the centered image on top.

My third Pride and Prejudice infused design. This one is probably my favorite because I like the centered image on top.

I only used the 12 grid approach, as opposed to the 16 or 24 because I wanted to keep my design as streamlined and essential as possible (because I have a tendency to over design) but the more grids, the more specific the designs could theoretically be. I would be interested in trying out the different framework templates in more designs sometime.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s