background preloader

Design and stuff

Facebook Twitter

The designer’s toolbox. Pictos. Responsive Web Design Patterns. Cork grips. Wandawega Souvenir Dispenser Camp Wandawega was clever enough to re-purpose a cigarette machine to dispense small Wisconsin-related souvenirs.

cork grips

More details about each special little item can be found here. PDW City Fenders Nearly a year ago I installed a set of Portland Design Works’ Full Metal Fenders on my Lemond. The original design was optimized to fit road bikes that were never meant to fit a set of proper full-coverage fenders. Also see: Field Test: Portland Design Works Full Metal Fenders Que Pasa “Take-out” editorial content from Que Pasa Shop, more good stuff here. Woolrich White by Emiliano Granado Pictured are some of my favorite shots from the new Woolrich White line photographed by the talented Emiliano Granado. Side note: Emiliano got together with our friends at FairEnds through Yonder Journal to create some handsome wool caps, check em out!

On UI Quality (The Little Things): Client-side Image Resizing. Make it good.

On UI Quality (The Little Things): Client-side Image Resizing

As front-end engineers, our job is ultimately to produce and deliver the front-end “experience.” That is, in addition to the core service (eg., a photo sharing site) which you are providing, you are also responsible for replicating and maintaining the quality of the visual aesthetic, including attention to detail in your UI. Making it really good. It’s “the little things” – small layout changes, single-pixel margin tweaks and color fiddling done as part of this process – that can sometimes seem overly nit-picky and risk being overlooked or sacrificed in order to meet deadlines, but the result of this effort has value: It’s quite obvious when UI polish has been done, and it’s something everyone can appreciate – even if they don’t know it.

Getting the fine details down “just so” can take extra time and effort, but in my experience has always been justified – and whenever your work is under a microscope, attention to detail is a wonderful opportunity to make it shine. Findings. Fluid Images — Unstoppable Robot Ninja. (Hello!

Fluid Images — Unstoppable Robot Ninja

If you think this article’s interesting, you might check out my ALA article on responsive web design.) I’ve always hated publishing. Responsive Web Design. The English architect Christopher Wren once quipped that his chosen field “aims for Eternity,” and there’s something appealing about that formula: Unlike the web, which often feels like aiming for next week, architecture is a discipline very much defined by its permanence.

Responsive Web Design

Article Continues Below A building’s foundation defines its footprint, which defines its frame, which shapes the facade. Each phase of the architectural process is more immutable, more unchanging than the last. Creative decisions quite literally shape a physical space, defining the way in which people move through its confines for decades or even centuries. Working on the web, however, is a wholly different matter. But the landscape is shifting, perhaps more quickly than we might like. In recent years, I’ve been meeting with more companies that request “an iPhone website” as part of their project. A flexible foundation#section1 Let’s consider an example design. Becoming responsive#section2 responsive architecture. Fluid Grids.

Early last year, I worked on the redesign of a rather content-heavy website.

Fluid Grids

Design requirements were fairly light: the client asked us to keep the organization’s existing logo and to improve the dense typography and increase legibility. So, early on in the design process, we spent a sizable amount of time planning a well-defined grid for a library of content modules. Over the past few years, this sort of thinking has become more common. Thanks to the advocacy of Mark Boulton, Khoi Vinh, and others, we’ve seen a resurgence of interest in the typographic grid, and how to use it on the web. And frankly, the idea’s been a smash hit: a million CSS frameworks have bloomed, with sundry tools to complement them, each built to make grid-based design even more accessible to the average designer.

However, our client had one last, heart-stopping requirement: the design had to be fluid and resize with the browser window. Minimum screen resolution: a little white lie#section1. Media Queries. How to fit your website for the Apple iPad « x7 Labs. Important note, updated: Apple has released very limited information about the iPad at the Safari Dev Center.

How to fit your website for the Apple iPad « x7 Labs

This article is written on the assumption that previous guidelines for Safari on iPhone OS apply to version 3.2 and the iPad. Step 0: Design for 980 pixels and do nothing The width of the iPad screen when held in portrait orientation is 768 pixels. Since many pages (like the NYT, which Jobs has demoed) are wider than that, the iPad scales down pages. The NYT website is automatically scaled down to fit on the iPad screen. Dimensions of the iPhone Display. Detect retina displays with javascript. Detect Apple’s Retina display and load specific CSS stylesheet - [ ] HTML5 Please - Use the new and shiny responsibly.

A Design Primer for Engineers. For a word that can so vastly change the fortunes of a company, it’s worth noting that no generally accepted definition of the word design exists.

A Design Primer for Engineers

This means when your boss stands up in front of the team at that all-hands and says, “We’ll have a design-centered culture,” there’s a good chance he’s saying nothing at all. But you keep hearing this word. More importantly, you hear the urgency behind the word. You hear that choosing to design a thing is an important thing to do and the person saying it is also important, so you nod vigorously while silently thinking, “I have no fucking idea what you’re talking about and I’m pretty sure neither do you.”