I Craft Websites 2011

The 50 Things Every Graphic Design Student Should Know

Fri, 22 Apr 2011 15:36:05 +1200

It is an awesome and fun list with hand-drawings, if you have not checked it before, do it now! View the list.

Back of a Web Page

Mon, 18 Apr 2011 15:56:00 +1200

From Khoi Vinh: this is a small, simple and limited idea, but it’s executed so cleverly that I can’t help but be impressed: hypothetical illustrations of what the back of some iconic Web sites might look like if they did indeed have a back. The first one, an illustration of reverse side of Google is fine, but they get much more clever very quickly.

Mantia for wallpaper

Mon, 18 Apr 2011 15:46:25 +1200

I was browsing couple websites and ended up at here, which I think is a great place for wallpaper lovers. It has an awesome wallpaper collection and each wallpaper has a desktop, ipad and iphone version. Make sure you check it out and download the one you like!

Responsibly responsive

Sat, 16 Apr 2011 13:55:00 +1200

Many CSS Media Queries boilerplates start with a desktop-specific stylesheet, then add queries and styles for progressively smaller viewports. This means that even the small browsers load desktop layout styles and potentially large assets, even when these are set to display:none;.

‘320 and Up’ starts with a tiny screen stylesheet that contains only reset, colour and typography styles. Media Queries then load assets and layout styles progressively and only as they’re needed. Think of this asresponsible responsive design. Read more from 320 and up.

Reversed Logotype by Jon Tan

Sat, 16 Apr 2011 13:42:00 +1200

This image shows a particular optical illusion that confronts us every day. Notice the difference between the black text on a white background and the reverse. With reversed type — light text on a darker background — the strokes seem bolder.

Black text on white is very familiar, so we can be forgiven for thinking it correctly proportioned. For familiarity’s sake we can say it is, but there are two effects happening here: The white background bleeds over the black, making the strokes seem thinner. With reversed type the opposite is true: The white strokes bleed over the black, making it seem bolder.

Punched, backlit letters on a sign outside the Nu Hotel, Brooklyn.

One of the most obvious examples of this is with signs where the letters are punched into the surround then lit from inside. In his article, Designing the ultimate wayfinding typeface, Ralph Herrmann used his own Legibility Text Tool to simulate this effect for road and navigational signs.

One might say that characters are only correctly proportioned with low-contrast. Although objective reality hails that as true, it isn’t a good reason to always set type with low contrast. Type designers have invariably designed around optical illusions and theconstraints of different media for us. Low-contrast text can also create legibility and accessibility problems. Fortunately, kind folks like Gez Lemon have provided us with simple tools to check.

As fascinating as optical illusions are — the disturbing, impossible art of Escher comes to mind — we can design around reversed body type. On the Web, increasing tracking and leading are as simple as increasing the mis-named letter-spacing and line-height in CSS. However, decreasing font weight is a thornier problem. Yes, we will be able to use @font-face to select a variant with a lighter weight, but the core web fonts offer us no options, and there are only a few limited choices with system fonts like Helvetica Neue.

OS X Lion Interface Tweaks by Dmitry Fadeyev

Sat, 16 Apr 2011 10:18:00 +1200

Apple’s latest update to their Mac operating system, OS X Lion, brings with it a few user interface tweaks. Here are 4 methods I’ve noticed that Lion uses to make its interface appear simpler. (If you’re interested, you can find more screenshots here from the developer preview release). Read full article from here.

Typedia

Sat, 16 Apr 2011 10:01:00 +1200

In a nutshell, Typedia is a community website to classify typefaces and educate people about them. Think of it like a mix between IMDb and Wikipedia, but just for type. Anyone can join, add, and edit pages for typefaces or for the people behind the type.

We love type, and we have a burning desire to learn as much as possible about typefaces: where they come from, who made them, and why they look the way they do. We want everyone to be able to share in that rich knowledge and enjoy the art and artists of type design. Over time, we think Typedia could grow into a great educational resource for people to learn about their favorite typefaces and discover new ones.

A Checklist for Content Work

Sat, 16 Apr 2011 09:55:59 +1200

In content strategy, there is no playbook of generic strategies you can pick from to assemble a plan for your client or project. Instead, our discipline rests on a series of core principles about what makes content effective—what makes it work, what makes it good. Content may need to have other qualities to work within a particular project, but this list is limited to qualities shared across all sorts of content.

If this looks like theory, don’t be fooled. It’s really entirely practical: if we consciously refer to principles like these as we go about our work as info-nerds of various kinds, we’ll have an easier time making good, useful content—and explaining our priorities when we’re called to do so.

Read the article and buy the awesome book form A list Apart.

Photographer Irina Werning re-stages old photographs with the...

Sat, 16 Apr 2011 09:51:13 +1200

Photographer Irina Werning re-stages old photographs with the original subjects many years later, making for some entertaining contrasts in time and age. View more from here.

Designer’s Poison by Frank Chimero

Sat, 16 Apr 2011 09:37:00 +1200

Earlier this week AIGA sponsored a round-table discussion with every designer on Twitter called One Day for Design. As expected, it was a cacophony of noise with the occasional delightful or insightful nugget. It was less discussion and more a match of wits battling in profundity (with a bit of jest directed at the whole thing too). The event wound up, to my eyes, not so much a dialogue, but more a sequence of soundbites trying to be strung together into a dialogue. I feel for the moderators who were given the impossible task of trying to make sense of the mess and herd cats. They are smart, capable people that were put in a weird spot with a tough job.

Part of this has to do with the format. It’s very difficult to have a “listening state” on Twitter, and great conversations seem to be built more on listening than speaking. On top of that, Twitter is a difficult mechanism to corral into a conversation because it doesn’t let you curate tweets into a linear sequence of events. Twitter handles back and forth between 2 and 3 people relatively well, but breaks once more people involved. Twitter seemed like the wrong place for the discussion, because it presented a conversation on design that required holistic thinking in a fragmented manner.

In spite of this, I perceive there still to be value to the event. Even though Twitter does not seem to be an ideal mechanism in the search for answers to complex questions, it can be an important tool for raising the appropriate questions on the minds of the masses. Encouraging designers to speak their thoughts on design is an excellent way to get the pulse of the industry. And, in response, I saw some questions and points that delighted me and others that fatigued or even saddened me.

I feel compelled to present a few designers’ poisons. In my opinion, these are the dispositions and mistakes of the field that I saw both addressed as problems and manifested in behavior in One Day for Design’s live stream. These are the things that hurt all of us. I am not above or excluded from any of these points. In fact, I’m more guilty than most in some of these.

This list is an incomplete one, but I presume a partial list is better than not collecting them at all. I present these as my contribution to the discussion about creating a way forward for the profession. There are a few proposed answers in here, but they are given in the spirit of discussion rather than authority. We’re all part of the same profession, and the AIGA is correct in recognizing there are important issues that need to be addressed that have a great influence on the future of our profession.

Read more from Frank Chimero’s awesome blog.

Hello world

Tue, 05 Apr 2011 14:26:00 +1200

My first paragraph for the year of 2011. The dummy text will be replaced eventually, however I will keep them for now to let the design stay in her own shape. Coupe things about the site: first it is using html5 and css3 for the super semantic presentation and awesome layout; second, the use of micro-format through out the site (vCard, hAtom and WAI-ARIA); last but not the least, the site design adapts to the the different screen resolution for better user experience by using the media queries - responsive web design.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam....

Tue, 05 Apr 2011 14:11:23 +1200

Getting ready for the launch

Tue, 05 Apr 2011 14:11:09 +1200

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam....

Tue, 05 Apr 2011 14:10:48 +1200

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis...

Tue, 05 Apr 2011 14:08:41 +1200

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum. Donec sed odio dui. Praesent commodo cursus magna.

Pagination

Tue, 05 Apr 2011 14:07:35 +1200

Pagination is the process of dividing information (content) into discrete pages, either electronic pages or printed pages. Today the latter are usually simply instances of the former that have been outputted to a printing device, such as a desktop printer or a modern printing press. For example, printed books and magazines are created first as electronic files (for example, PDF or QXD files) and then printed. Pagination encompasses rules and algorithms for deciding where page breaks will fall, which depends on semantic or cultural senses of which content belongs on the same page with related content and thus should not fall to another (e.g., widows and orphans). Pagination is sometimes a part of page layout, and other times is merely a process of arbitrary fragmentation. The difference is in the degree of intelligence that is required to produce an output that the users deem acceptable or desirable. Before the rise of information technology (IT), pagination was a manual process, and print output was its sole purpose. Every instance of a pagination decision was made by a human. Today, most instances are made by machines, although humans often override particular decisions. As years go by, software developers continually refine the programs to increase the quality of the machine-made decisions (make them “smarter”) so that the need for manual overrides becomes ever rarer.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam....

Tue, 05 Apr 2011 14:04:20 +1200

Layout

Tue, 05 Apr 2011 14:04:11 +1200

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam....

Tue, 05 Apr 2011 14:02:54 +1200

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam....

Tue, 05 Apr 2011 14:02:42 +1200