When someone hires me for my work, they’re not paying me for what I give them. They’re paying for what I don’t give them: the iteration, the obvious ideas, the sub-optimal solutions, the years of experience, the learning I do. They’re paying me to make mistakes, to produce work that isn’t quite right so I can get to right. I rarely get to right first time. I may produce more quantity of work this way, but the end result is always less than when I started. More simple, elegant, efficient.
Start designing from the content out, rather than the canvas in.
I’d like to see more balance again. More short, scrappy blog posts (like this one), written off the cuff and in the moment. Sometimes, I’d like to read the author’s actual voice, instead of a homogenised edited one. There has to be a space between 140 characters and 3000 word feature.
Grid system design should begin with a constraint. Something that is knowable and unchangeable. This constraint is used to build the modules of your grid. In book design, that constraint is defined by the page through subdivision. Book designers take the page, divide it up into a modular grid of spaces. These spaces (called modules) are then combined to create rows and columns. These are then... filled with content (images and text). The text feels like it belongs because the columns are related to the physical object: the page. How should we do it on the web? Remember the goal is connectedness and this feeling of belonging. We do that by defining the constraint from your content. The constraint could be derived from an advertising unit, or from a thumbnail image from tons of legacy content. Whatever it is, start there. Don’t start from an imaginary page.
Legibility is a baseline requirement for typesetting anything. It’s like edible food.
prototyping working code, iterating based on priorities, increasing the fidelity of your design work in the browser instead of comps.
Iterate. Have a project structure that embraces change. That means a focus on priorities.
there has to be a structure of project flexibility to accommodate the inherent fluid nature of RWD.
I think Responsive Web Design will grow into a practice of changing an experience because of the environment. That means: content, layout, behaviour, perception, brand, feel. All of those things are open for change if we have a good set of sensors, and the right actuators to to create them.
Remember the goal is connectedness and this feeling of belonging. We do that by defining the constraint from your content. The constraint could be derived from an advertising unit, or from a thumbnail image from tons of legacy content. Whatever it is, start there. Don’t start from an imaginary page.
Grid system design should begin with a constraint. Something that is knowable and unchangeable. This constraint is used to build the modules of your grid.
Creating layouts on the web has to be different because there are no edges. There are no ‘pages’. We’ve made them up.
Content-out design means defining your underpinning design structure from your content, and then focusing on what happens in between ‘layouts’.
On the web – especially the responsive web – we don’t have edges, so it’s best to define your layout from your content.
A breakpoint should not necessarily be a point at which we wholesale swap out to another layout.
I find this period of change we’re in right now fascinating. Not only is centuries old design theory being rewritten, but the process of how design happens is changing too. It’s becoming more collaborative, more fluid, lower fidelity. Less about being squirrelled away in a dark corner crafting a beautiful thing, and more about scribbling away in public and repeatedly throwing our work in a big trash can. And the more we’re doing that, the better we’re getting.
It’s my belief that in order to embrace designing native layouts for the web – whatever the device – we need to shed the notion that we create layouts from a canvas in. We need to flip it on its head, and create layouts from the content out.
understanding, talking to and observing your audience is a fundamental part of graphic design research. In fact, it’s the first thing they teach you about communication theory: what are you trying to say, and who are you trying to say it to.
Firstly, it means defining your grids (your big macro break-points, and the columns and what-not) from actual content and not from devices or screen widths. This could be the size of an image, or an ad-unit, or the typographic measure. Just some ‘fixed’ constraint. This will give you your grids. As you’re building out your responsive design, you should be focussed on watching how the content... adapts as the viewport changes. Somethings I look out for: Type size and leading. Does it need to change? White space (macro and micro). Do you need to adjust margins and padding? Vertical space. Do you need to reduce it and make the content more or less dense? Flow. How is the readers eye movement going to change as you change these elements? Words. Are there now too many on one line? Or too few? Source order. Are the right things in the right place?
Jared Spool said in his recent article strategy for responsive design A responsive design can have multiple breakpoints, say for a small-screen phone, then a large-screen phone, then a tablet, then a laptop/desktop. Many teams try to decide on breakpoints using average screen sizes. However, it’s better to look at what the content and navigation wants to be. By letting the content and navigation... drive the breakpoints, teams find they can often get away with fewer screen configurations. For example, a high-resolution Retina iPad might easily share the same configuration as a well-constructed laptop display, while lower resolution tablets might just need a little adjustment to that same configuration.