Archive for the ‘design’ Category

A Non-Designer’s Guide to Typefaces and Layout

Tuesday, April 10th, 2012

A lot of the material about web design and typography that you’ll find on the web is written by and for designers; in other words, it presupposes a certain level of knowledge.  LifeHacker has put together a guide for non-designers that covers the basics of typefaces and layout very well.

Before we jump into the specifics, the most important thing you need to know when making any design choices is why. Ask yourself this: “what is my goal?” All elements of design are able to invoke different emotions in the viewer and affect them in various ways. While adhering to general principals is good when you’re getting started, you want to based your design choices on the impact you want them to have. That requires knowing what that impact will be. Do you want your design to attract attention to specific sections? Do you want certain words or phrases to have more impact than others?

You make these basic choices like these already. When writing a research paper or a resume, you’ve probably bolded a section header to help with identification. If all the text on that page was the same, it would be more difficult for the reader to navigate or skim. The simple decision of emboldening text and making it larger suddenly adds greater context to the design of a document, and it’s one you’re probably making subconsicously. When you’re thinking about design, you want to move those choices out of your subconscious and into the front of your mind. Think about what you hope to accomplish and then apply the principles you learn in this guide to the design tasks you encounter on a regular basis. Thinking a little more creatively and knowing the right techniques is all you’ll need to add a greater visual impact to the design work you’ll encounter on a regular basis.

Toronto map done in type

Tuesday, March 6th, 2012

I’ve always been fascinated with typography. It probably goes back to the days when I was a child and visited my dad who worked in the composing room of the Sault Daily Star, laying out the newspaper in beds of lead type. (Searh the blog on “typogrpahy” if you want to see some of the posts. Type is an almost infinitely medium and it’s amazing what a talented designer can do with it.

Case in point: Ben Brommell’s Typographic Toronto map.

Although the concept is pretty straightforward, it was a labour-intensive process to fashion the final documents, which come in a few variations (in addition to the full map, there’s also a roads only version and a black & white option). Brommell thinks it took anywhere from 50-100 hours to put the map together, much of which was spent plotting out Toronto’s streets (the font is Futura in case you’re wondering). It was a little easier to do the neighbourhoods, he explained, thanks to resources like blogTO’s neighbourhood map and City of Toronto ward maps.

Update: Fixed the link.

Cartographers of Time

Thursday, February 9th, 2012

Here’s a fascinating collection of timelines – historical info graphics, including what may be the most famous one of the decline of Napoleon’s army in Russia (popularized by Edward Tufte). Some of these are especially striking considering they were done hundreds of years ago.

Discus

Good JavaScript, CSS site

Tuesday, February 7th, 2012

I’m not sure where I came across Dynamic Drive but as soon as I saw it, I bookmarked it. The site has an extensive collection of JavaScript scripts, CSS snippets, and other resources for web designers. Many of these will be useful for enhancing online help if you’re producing web-based help.

Greatest map of the U.S.

Thursday, January 5th, 2012

Here’s a great example of information design in action – a superbly executed map of the United States that won the “Best of Show” award from the Cartography and Geographic Information Society. It’s a beautiful piece of work that took the cartographer years to do – read the article to see why.

By contrast, David Imus worked alone on his map seven days a week for two full years. Nearly 6,000 hours in total. It would be prohibitively expensive just to outsource that much work. But Imus—a 35-year veteran of cartography who’s designed every kind of map for every kind of client—did it all by himself. He used a computer (not a pencil and paper), but absolutely nothing was left to computer-assisted happenstance. Imus spent eons tweaking label positions. Slaving over font types, kerning, letter thicknesses. Scrutinizing levels of blackness. It’s the kind of personal cartographic touch you might only find these days on the hand-illustrated ski-trail maps available at posh mountain resorts.

A few of his more significant design decisions: Your standard wall map will often paint the U.S. states different colors so their shapes are easily grasped. But Imus’ map uses thick lines to indicate state borders and reserves the color for more important purposes—green for denser forestation, yellow for population centers. Instead of hypsometric tinting (darker colors for lower elevations, lighter colors for higher altitudes), Imus uses relief shading for a more natural portrait of U.S. terrain.

Adobe CSS Regions to bring fancy layouts to the Web

Wednesday, May 11th, 2011

Adobe has introduced a new layout technology called CSS Regions that will let designers do all the fancy layout tricks that they can get in print layouts (text flow around irregular objects, for example). I’m not sure that this is the direction I’d like to see the Web going in – I’m more interested in the content than the layout – but I suspect I’m in the minority.

While web developers have hacked together grids and other print-style layout tools for years, such tools are essentially hacks and limited in their capabilities. But that will change in the near future. The W3C is currently toying with no less than four new grid-based standards designed to handle multi-column text, wrapping text around images and other fancy layout techniques. We’ve looked at the Flexible Box Model, Template Layout (based on Mozilla’s XUL syntax), and Grid Positioning modules before, but so far none are finalized.

Adobe’s CSS Regions is the new entry in the list of layout schemes under consideration. Adobe submitted its CSS Regions proposal to the W3C early this year and it has subsequently been split into two separate but related drafts, the CSS Regions Module Editor’s Draft and the CSS Exclusions Module Editor’s Draft.

CSS Regions shares some similarities with the other proposals (and from what I can tell would play nice with them if multiple proposals end up becoming finalized specs), but goes a good bit further, by abstracting sections of an HTML page into “regions.”