At the beginning of each year, I update my website with new samples of my graphic design and art work. Updating a site that is constructed with tables is a daunting and time-consuming task. CSS has definitely improved since the early days, so I decided this year would be the year for me to learn it and implement it.

Steps I took to learn CSS

1. Use an actual project (my own website) as the learning vehicle. With an actual project, real-life obstacles arise that you have to figure out.
2. Research other websites. Look at sites that share content and goals with the one you are (re)designing. Be inspired by what you find! View the source coding.
3. Get some good reference books. So far, I’ve read 5 books that have been a big help.
   
   -Head First Web Design, Ethan Watrall & Jeff Siarto (This was the first book I used; it helped me figure out the next step, which is the optimum width for your web pages.)

   -HTML, XHTML & CSS : visual quickstart guide, by Elizabeth Castro (I’m a big fan of the visual quickstart guides!)

   -CSS anthology : 101 essential tips, tricks & hacksRachel Andrew (This is a good focus on ways to approach common layout issues).

   - CSS: the missing manual, David Sawyer McFarland (Be prepared for some very dense material; jammed packed with information).

   - Head first HTML with CSS & XHTML, Elisabeth Freeman, Eric Freeman (Since I already knew html, this provided a nice finale. If you are unfamiliar with html, you might actually want to begin with this book).

4. Choose the optimum width for your web pages. My site was originally sized for 800×600 screen resolution. Monitors have improved dramatically in the past few years, and now 1024×768 is pretty standard. In the Head First Web Design book, I discovered ready-made grids via CSS frameworks. One in particular, Blueprint, uses an optimized page width of 950 that fits nicely within a 1024×768 resolution, and that’s the size I chose.
5. Design (or redesign) the website. Pay special attention to the layout and navigation.
6. Use a basic template to begin CSS coding. I wanted my main content to be a fixed width, centered in the browser, so I selected the Dreamweaver html template named “1-column fixed, centered”. Since my site is in transition from tables to CSS, I selected html 4.0 transitional for my DocType.
7. Identify the common specifications. As with any design, there are common elements that share spex like font size & family, leading (line-height in CSS-land), heads, and subheads.
8. Organize the CSS file. There are many approaches to this, of course, so go with what makes the most sense to you. I looked at my WordPress blog’s CSS file for guidance and I used comments to divide the sections. Here’s my approach:
   —Start with the basic elements and put them at the top of the file:
   body, p, td, th, ol, ul, img ({ border: none } will get rid of that default border around images), h1-h6, as well as anchor tags, links, and pseudo classes (active, visited, hover).
   —Next, list the classes for specific styling.
   —The final section deals primarily with layout, containing the ids and navigation system.
9. Ask the experts. Inevitably, you’ll come across something that can’t be solved. There are many great websites out there to learn from. I’ve got 3 favorites:
   http://www.alistapart.com/
   http://www.smashingmagazine.com/
   http://www.thegridsystem.org/
10. Ask your friends. There is no substitute for great friends who are willing to help you out. So much of what I’ve learned as a designer and artist has come through simple sharing over a cup of coffee or a delightful meal. And it definitely is a bonus when a friend also happens to be a web guru!

Keeping it Simple

Part of my overall plan in transitioning to CSS was to keep the design simple. I wanted to be able to implement the CSS without getting caught up in elaborate design schemes that I was unprepared to execute. As my familiarity with CSS increases, I’ll revise and finesse the design.

How did you learn CSS?

Please share your CSS learning curve with us by providing a comment.
Thanks so much!

The Eames husband-and-wife team were two of the most important American designers of the 20th century. They made innovative contributions to furniture, architecture, and industrial design, as well as photographic arts and toys.

Playful, investigative, imaginative, and insightful, they left a legacy of inspiring design that crosses over into other disciplines, including graphic and web design.

This week, I introduced my Graphic Design 1 students to Charles and Ray Eames by watching their film, Powers of Ten. It was fun to revisit the Eames and pay tribute to them. When I was studying graphic design at Mass. College of Art, our publications design teacher showed us this film. For me, it was a memorable lesson on the concepts of macro and micro.

As designers, we explore the world through a variety of lenses, always searching for a unique way to present information. If we zoom out of a scene to encompass a wider perspective, that macro view may provide essential context for understanding the content. If we zoom into a scene to get deeper into the details, that micro view could offer new information previously not considered or known.

Each unique view can be used in an endless number of ways: graphic elements, grids and other organizational tools, image backgrounds, etc. If you are designing a sports catalog, try zooming into the texture of the basketball and see what interesting options develop. If you are designing an annual report, a macro view of the company’s headquarters might provide an insightful context for why the company is so committed to its resident community. Applying macro and micro concepts can enhance your design with patterns, structures, layers, and metaphors, thereby enlivening the page and deepening the understanding of the material.

Further Info:

http://www.eamesoffice.com/
http://designmuseum.org/design/charles-ray-eames
http://www.loc.gov/exhibits/eames
http://www.eamesgallery.com/
http://www.hermanmiller.com/Designers/Eames
http://veerle.duoh.com/blog/comments/design_icons_charles_and_ray_eames

Many thanks to Anne for sharing this article with us.

This post was guest written by crowd member Doug Cloud
Simplicity, if done properly, can be an art form unto itself.

To give you an idea what I’m talking about check out this site for Nesbitt Research. This is an awesome example of simplicity and what’s even more amazing is that Nesbitt is using the Thesis theme.

The reason simplicity works is because of it’s functionality – it’s minimalist nature begs the reader to focus on only what’s vital, as opposed to wandering through a bunch of Flash and images. Nowadays the Web is overrun with visual overload and when it comes to what’s important in the design of web sites content is still king. If you fill your layout with too many distractions then you could very well loose your focal point and any potential customers, too.

While the simple design is elegant in it’s simplicity it is also very hard to conceptualize. Imagine trying to write a message to someone in just 140 characters. Same thing. In the end simplicity is all about communication. Getting your site’s message across by utilizing the minimalistic approach is akin to speaking to your visitors in under 140 characters.

In his article Occam’s Razor: When Simple is Better, Charles Perez stated that, “Albert Einstein stated a principle in 1933 which is often paraphrased as ‘Theories should be as simple as possible, but no simpler.’ Occam’s Razor is a similar principle of logic that can be summed up as ‘All other things being equal, the simplest solution is the best.’ Then there’s the principle more people are probably familiar with—the KISS principle (Keep It Simple, Stupid).”

The reason a site like Nesbitt works is because it follows the KISS rule. There is no clutter, no crud. There’s nothing to distract the visitor’s attention away from their main content, message, and links. You look and see exactly what they want you to see. Talk about SEO!

These days you can see a lot of graphic elements taking up almost the whole page of a site. Big HUGE headers are in and some people have went nuts with this. As a designer I’m all for graphics, providing they are used within reason, of course. My own site might seem somewhat cluttered, but then this is my personal design business and so using graphics is essential to display my work.

To learn how to apply simple web design techniques to your own sites I suggest reading Save the Pixel – The Art of Simple Web Design, by Ben Hunt. As Ben describes it, “Most web sites lose visitors through the same simple errors – like having just too much stuff on the screen, making it harder for your visitors to engage with your brand, and less likely they’ll find what they want.” So true.

So why should you care about simplicity? Well, to be honest, if you’re reading this then you probably have a site of your own or you’re considering one and if your goal is to sell something (whether it be products or your own abilities), then your main objective should be your content not the design. I can produce the prettiest web layout in the world filled with gorgeous graphics and animated banners, but if this detracts from the site’s purpose then it benefits no one.

When I was first starting out on the Web I would draw out my layout ideas on paper and then I could focus on where my content would go and how I would organize the other pages via the navigation. Doing this on paper first I was able to spot areas where the design needed to be simplified and eliminate any overkill. During this beginning stage I would keep reminding myself that my main purpose wasn’t big flashy graphics (even though I wanted LOTS of them, and badly), but to utilize the design in such a way as to form a bridge of communication between me and my visitors.

Thinking of a site layout in this manner is like imagining a conversation between yourself and someone else. What would you say to this person? How would you describe what you are about? What you are selling? You wouldn’t speak to this person from behind a brick wall or from inside a closet. You’d want to speak to them face-to-face.

The same thing applies to your design. Speak to them simply and they will listen.

The Olympics always excite, intrigue, and inspire me. I’m an athlete who’s competed in organized sports for most of my life. I used to say I was born into this life to play softball, because it was that important to me. These days, my athletics consist mostly of yoga, biking, walking, and dancing. My self-identity now includes graphic designer, artist, and teacher. The Olympics act as a confluence of all my passions and provide an interesting mix of inspirations for me.

The graphic identity of Vancouver 2010 captures the beauty, personality, and spirit of the Canadian region perfectly. There’s a great video “Transmoflection” that explains the graphic team’s process of research, brainstorming, sketching, illustration, and design. I enjoyed sharing this video with my students.

It’s fun to see how the Olympics’ graphic identity has evolved over the years. Here’s a webexpedition18 blog post showing Winter Olympic Games Posters from 1924 to 2010

The website was comprehensive and impressive on several levels: design, interactivity, information technology, and scope. The infrastructure included 800 servers, 6,000 computers, 4,000 printers, and over 100,000 hours of testing!

Many thanks to Anne Katzeff for contributing to blur Designs blog.

As a regular reader of Michael Johnsons blog, I’m always interested to see sneak previews of upcoming Johnson Banks work. Recently he unveiled their latest project for The Pew Center for Arts & Heritage and once again I was pleasantly suprised. Whilst I can’t deny liking the restrained cool of an identity consisting of a nicely kerned Helvetica or Avant Garde logotype and little else, sometimes the less is more approach can leave me a bit cold.

Obviously any identity (or any design) is dependent on the brief and in many instances doing what’s right for the job is far more important than designers showing how clever and forward thinking they can be. However, media attention towards graphic design is growing and in some cases, questioning the value of our profession – a trend arguably started by the animosity towards the newly unveiled Wolff Ollins 2012 Olympics logo.

Government paid £6,000 a digit for NHS 60th anniversary logo

On one hand this is can be a positive thing, allowing the design community a dialogue with both their critics and the audience with whom they’re trying to communicate – the public, but this attention is clearly something designers should be wary of.

As most of us know, we’re in a very lucky position doing this job. It’s not a profession people tend to fall into and a large portion of the job involves

doing things that many if us would be doing in our spare time anyway – i.e. being creative. With this in mind it’s a position we need to work for. At the risk of sounding pompous, the creative freedom of a designer should be earnt. With increasing scrutiny from the media and everyone keeping an eye on their pennies (public spending in particular), we’ve never needed to work harder for our money.

The PCAH identity is a relatively small example and admittedly isn’t radical design thinking, it’s a well thought out solution to a fiddly communication problem. It may not be to everyones tastes but it’s considered, memorable and most importantly it works (although time will tell how it fares in the long-term). Design that ticks each of these boxes and strikes the balance between something we haven’t seen before and something that doesn’t send the client running is by no means uncommon, but it’s certainly not everywhere I look, and the more I see of it, the better.

Mat