Outline of lectures in Graphic Design History for students at The University of the Arts in Philadelphia - Fall Semester 2008 :

History Of Graphic Design

On VANDELAYDESIGN :

35 Photoshop Tutorials for Designing Your Own Posters

A nice tool:

Tiled backgrounds designer

“ Logos come in all kinds of shapes and sizes however they typically are one of 5 different classifications. Designing a logo is about much more than an exercise in aesthetic. A logo must be a positive depiction of the product or service it represents. When designing a logo, knowing which type of mark would be the most appropriate for the application will help you achieve a stronger solution.”

LOGO DESIGN BASICS: THE FIVE TYPES OF MARKS

On The Man in Blue:

Circtangles: A JavaScript art installation

For Firefox and Safari only, round corners with CSS border-radius.

One week of the Guardian takes the news from one week of the Guardian newspaper and visually represents it as a series of static images.

One week of the Guardian

“ There are some basic approaches, guidelines and goals to consider when working with type on the Web. Overall, the medium of Web typography involves readability, accessibility, usability, and brandability. On the Web, these aspects function together to accomplish design's goals of communication and user interaction.”

5 Principles And Ideas Of Setting Type On The Web

“ Design is broken up into a number of basic principles that apply to all design from type creation to painting to page layout, both on the web and in print. However, especially on the web, these rules tend to be forgotten and we just go with what feels “right”. This isn't because designers are feeling too loose to abandon these rules, but rather, most people working on the web don't even know they exist - if they do, they don't understand how to use them.”

The Elements of Design Applied to the Web

Another post on Authentic Boredom :

Techniques for designing with type characters

A very beautiful way of using characters.

“ The first step was to create a mobile style sheet. For this I duplicated the CSS file I've already built for large screens, and started stripping out the style that doesn't work so well on a smaller screen. The layout was simplified into a more linear single column, and some elements were re-done to provide a larger target area for a maximum Fitts factor, and background images were dropped wherever possible to cut down on bandwidth demands.”

Mediatyping

Interesting post on Mezzoblue. Lots to read and to learn, still going through the comments.

I finally completed the new layout and published it. I made some radical changes in colors and site structure. Everything is reachable from the home page. While before it was possible to read the latest five posts, now only one post is fully readable, the previous four posts are included only as title , category and tags. There is an archive page for all posts, while before the archives were part of the home page. The photos and studies pages are gone (but external links to photos or studies are not broken), now there is a flickr badge for the photos and all the links to the studies also on the home page. The links page is just not there anymore, that was something needed before Delicious came along...

The change in structure has simplified the use of the site, giving access to all the posts, pictures and studies from one place. I also decided on a major color change. During the testing of the new layout I found,as I knew I would, some things that needed to be fixed and others that could be made nicer. I moved the comments link from the bottom of the post to the top and substituted the text with an icon (still courtesy of http://famfamfam.com), for example.

I had some problems with the flickr badge because it comes with a Javascript call incapsulated between <table> and <tr> tags which does not validate since a row (<tr>) is supposed to have cells (<td>) inside. The Javascript does that but it's unreadable by the validator. Apparently, though, if the Javascript call is just inside <div> tags it produces a series of images (<img>) wrapped in anchors (<a>) that link to the photo on flickr, no <td>s. It's then possible to apply CSS to the div and img. It's not the best solution but it validates.

All in all I'm pretty happy with the result, I felt that a change in appearance was long overdue and that, after using the site as it was for more then two years, the structure could be improved.

An article on A List Apart:

“ Stop worrying about how good a designer you are, and start worrying about the myriad tiny details that can elevate your work from passable to near-perfect.”

Design is in the Details

“ This site contains a lot of best practices in Interaction Design. Over the years I have collected examples and insight on their applicability that I share with you here on this site. So there is really no original design to be found here, sorry. It has all been done before...See it as a reference or basic toolkit you can use when designing user experiences. It is no substitute for creative design, it simply seeks to describe what we know and have learned about solutions you will find abundantly on the web and even beyond.”

welie.com

Two articles on WebDesignerWall:

Typographic Contrast and Flow

Vector Polishing Techniques

Via Veerle's blog:

Design By Grid on designing grid based websites

This is E Logo Design's list of best logo design tutorials on the internet:

Top 50 Logo Design Tutorials

Design Online is electronic library containing a digitised record of Design journal for the years 1965 to 1974:

DESIGN online

On the beautiful mezzoblue web site an article on icon design:

Icon Design: Anti-Aliasing

On Sitepoint :

The Principles of Beautiful Web Design

On Digital Web Magazine :

Coding for Content

“ If you’re a designer, you work to communicate and convey meaning. So it’s important that you understand the mechanisms by which things and ideas acquire meaning; more than any other factor, your grasp of these fundamentals determines your ability to communicate effectively. Without fundamentals, you will flounder when faced with complex design challenges or constraints.”

Contrast and Meaning

“ If the canard that Adolf Hitler was a superb art director is meant to glorify the art directorial profession, think again. Although historians say he was the art dictator of Germany because he spent an inordinate amount of time overseeing the art and design of the Third Reich, he nonetheless had thousands of willing executioners, like Hugo Boss, designer and manufacturer of Wehrmacht and SS uniforms, doing the everyday work. Yet like art directors today, as Führer (leader) he received credit for everything under his domain, even those things he knew nothing about and had no hand in creating.”

The Nazi Triangle

“ Design is, in essence, communication but the vehicle for communication is the design. One of the key components in the vehicle of communication is composition, and in design schooling it is something that is taught as something you should feel rather than create logically.”

Design and the Divine Proportion

The Guardian brand advertising campaign (via AceJet170):

• New-look marketing for Guardian
• new Guardian campaign

Via mmm,pretty...:

Jen Stark

Beautiful..

Third post of the Uncommon knowledge series by AceJet170 :
003
and a comment post on it:
uncommon knowlege

More on grid layout:

Five simple steps to designing grid systems

Khoi Vinh has put online his presentation at SXSW on techniques to create a grid-based layout:

Oh Yeeaahh!

On Digital Web Magazine :

Redesigning the ExpressionEngine Site

“ ..every know and then I get the urge to impart knowledge that I've accumulated on others, usually younger designers. OK, sometimes it's reminisciences about PMT cameras and Rotring pens, but sometimes, very occasionally, it's something that might actually prove useful. Usually, it's stuff that I wish I'd known when I was at their stage of life/career.”

Uncommon knowledge

I, for one, find the first two ( 001 , 002 ) “tips” interesting and hope to read many more..

On icon design:

• Icon Design: Bitmap vs Vector
• Icon Design: Sizing

A collection of Web 2.0 logos:

The complete Web 2.0 directory

A collection of tips about HTML, CSS, JavaScript, and other Web development and design issues:

Web Building Tips

A post by Mark Boulton about design and art:

One Principle to Design By

On Bokardo:

Five Principles to Design By

A post of the Five Simple Steps series by Mark Boulton:

Colour combinations

The book: Five Simple Steps: Designing for the Web

Via NoisyDecentGraphics:

• The BBC's Fifteen Web Principles
• renourish

Via Ace Jet 170:

NY City Transit Authority Graphics Standards

A post on NoisyDecentGraphics has become this:

The Design Disease

Simple and nice.

A sum up of the current state-of-the-art in graphic design for web pages on webdesignfromscratch:

current web style

“ This series of articles is about merging ideas and inspiration in different and unexpected ways. Inspired by the pop artists of the 50’s and 60’s, I will take an inspirational item and transform it for the web, starting with what inspired me, working through the various design stages, and creating the final result.”

Creating Inspired Design Part 1: I Am The Walrus

A post on Noisy Decent Graphics:

Two brilliant pieces of graphic design

An interesting article on Digital Web:

“ Though hundreds of years of packaging design history and best practices may have influenced your offline shopping behaviors and decisions, the lessons learned in this enduring discipline didn't have much of an influence on early web designs.”

Packaging Design for Web-based Products

On Authentic Boredom:

summarize a project in one sentence

Interesting comments.

On Digital Web Magazine:

Color: an investigation

Andy Budd on freelance web design:
7 habits of a highly successful freelance web designer

Eric Meyer on becoming a web designer:
stand up for your rights

A post On Decent Noisy Graphics asking readers to leave design questions in the comments that will be answered as single posts:

Design Questions

“ In objects typical of the domestic or personal sphere, such as lamps, refrigerators, mobile phones, energy is often left either to the user's own devices (in the choice, for instance, of a light bulb or brand) or it is an invisible aspect of ongoing product experience that shows up in periodic electricity bills, when power runs out or is shut off. Electricity, as a product, is easily reduced to an abstract, invisible phenomenon whose only concrete representations are two holes in the wall. In a series of design examples, we explore how everyday products might be designed to better express - and thus stimulate reflection on - daily or long-term patterns of energy use.”

Static

A nice idea. In my opinion, anything that helps people to understand how much waste goes on daily is welcome.

“ Early in the 19th century, the need for speed, simplicity, and economy in book production led to the introduction of cloth as a binding material and casing as a binding process. This exhibit chronicles the growth of English and American publishers' binding from its infancy in the 1830s to its decline in the early 20th century.”

Publishers' Bindings 1830 - 1910
via India,Ink.

Two very interesting articles on Boxes and Arrows:

• The Elements of Style for Designers
  translating writing reminders into design reminders
• Icon Analysis
  an icon search task that lasts longer than anticipated can result in user annoyance

Three interesting posts on Noisy Decent Graphics:

• overdue kerning homework
• 10 things they never taught me in design school
• 30 things about printing, ideas and stuff

On Noisy Decent Graphics:
always do it for real

Nice advice on including some reality into the virtual world of web design.

Designing the new layout of my site, I also decided to soften the colors a bit. I'm still using just Blue, Red and a touch of Grey, plus the White background and the Black of text. This were the colors used in the previous version:

And this are the new ones:

Basically, I softened the blue (from #0000ff to #3366ff) and substituted the black(#000) with a grey-black(#333).

Andy Rutledge: logo misapplication

“ I believe that the logo is the most abused, misapplied, misconceived, wrongfully distracting element of design and business today. I encounter too many people in business who believe that their logo should define them. The reality is that they should define their logo. For some reason it seems that this business fundamental is lost on most business owners.”

This is the first post about the new layout.

At the beginning I wanted to have the latest post bigger and the previous four in a column below, with two more columns beside it, one for the categories and fragments, the other for the archives:

I like it, it's compact and easy to grasp. No fancy positioning and not too much clutter but..the problem, for me, is that there is only an excerpt of the previous posts, to read them it's necessary to click and go to the respective permanent link. I think it's better to read at least the first five posts without having to go to another page. So, I decided against it and went for the layout as it is now. The size of the text is bigger on the latest post and for posts seen singularly (permanent link), a bit smaller on the previous ones when seen on the home page. The column on the right holds all the site navigation, except for the four main pages, which I left in the masthead.

Amnesty International ad campaign

"It's not happening here but it's happening now"

Simple and effective. Hopefully it will raise people's awareness a bit..

On Computer Arts:
50 ways to become a better designer

Garrett Dimon

"will be using a newly created flickr account to store and document the reviews (of web sites design details) in sets"

A very interesting idea.

On DigitalWeb: Principles and Elements of Design

On Vitamin: How C.R.A.P is Your Site Design?

Jason Santa Maria: visual thinking

On Authentic Boredom a nice logo design article by Cameron Moll.

On Be A Design Group: five steps to font freedom

On FontShop: The Logos of Web 2.0

Picture Cloud free 360 degrees images.

On UX Magazine:
The Layers of Design: the style layer

Metroblogging is the largest and fastest growing network of city-specific blogs on the Web.

Joel on Software:

"Over the next weeks and months, if all goes well, I'm going to write a series of articles right here, on this website, on UI design for the modern age. The whole series will be, tentatively, named Great Design."

On A List Apart:

• Home page goals
• Use cases

Simple points that need to be remembered because it's easy to underestimate their importance.

Design Melt Down on the use of Blue on the web.

Agreeing with the interpretations or not is irrelevant, what I like is the idea:

World flags

On the Guardian an article about cultural richness in the UK today:

All together now

I wanted a logo that conveyed the meaning of this web site and this is what I came up with:

The O becoming a broken circle with an arrow pointing out symbolizes the communication between people, an opening of the mind that brings change and that's why the color is different. The name itself (seven colors on a spinning wheel become white, white light passing through a prism splits into seven colors) stands for multiplicity that becomes unity, the capacity of different entities to coexist and actually learn from each other. The circles and arrows also symbolize the World Wide Web and its huge potential for connecting people and circulating ideas freely.

Some of the things in this article I didn't know, some I wasn't sure about: CSS specificity

• XMLHTTP notes: readyState and the events
• How to Search the Invisible Web very useful, plenty of links from there
• Worn brushes

Design in-flight:

" Design In-Flight (DiF) is an online magazine devoted to art and design, be it graphic design, web design, illustration or architecture. Our mission is to entertain and inform, while encouraging dialogue with our readers and the design community. "

Also, check out Glen Murphy and Jeff Han.

Even if I have visited Jon Hicks 's portfolio many times, it is always a pleasure to look at his work and Denis Radenkovic 's.

I haven't been able to watch it because I have a poor-man dial-up connection but , if you have a high speed machine, go ahead and then let me know: the unseen video

I'm back. I have covered a lot of kilometers, seen family and friends. In a few days I have more kilometers in front of me..

..in the meanwhile, a nice article on logo design.

Interesting post: Desire lines