Designing for Breakpoints

By Stephen Hay from AListApart.com:

A note from the editors: We’re pleased to present an excerpt from Chapter 7 of Responsive Design Workflow, Stephen Hay’s new book, available now from New Riders.

Figure 7.6
Figure 7.6: Most websites need very few major breakpoints.

Jeremy Keith notes that what happens between the breakpoints is just as important as the breakpoints themselves—perhaps even more so. While I agree with this, we do have to start somewhere. In a way, this part of the process reminds me of storyboarding, or creating animation keyframes, with the in-between frames being developed later. We’re going to do that here.

Major breakpoints are conditions that, when met, trigger major changes in your design. A major breakpoint might be, for example, where your entire layout must change from two columns to four.

Let’s say you’ve chosen three basic design directions from your thumbnails. Think about what your major breakpoints will look like (Figure 7.6). And here’s the key: try to come up with as few major breakpoints as possible. That might sound crazy, since we’re talking about responsive design. After all, we have media queries, so let’s use about 12 of them, right? No! If a linear layout works for every screen and is appropriate for your particular concept, then there’s no need for different layouts. In that case, simply describe what will happen when the screen gets larger. Will everything generally stay the same, with changes only to font size, line height and margins? If so, sketch those. For these variations, make thumbnails first, explore some options, and then move on to larger, more detailed sketches. Use your breakpoint graph as a guide at first and make sketches according to the breakpoints you’ve estimated on your graph.

When thinking about major breakpoints, remember to think about device classes. If you’re thinking about smartphones, tablets, laptops/desktops, TVs, and game consoles, for example, you’re heading in the right direction. If you’re thinking in terms of brand names and specific operating systems, you’re on the wrong track. The idea is to think in terms of general device classifications and, sometimes, device capabilities. Capabilities are more important when designing web applications, since you should be thinking about what screens will look like both with and without any particular capability.

Rough sketches of major breakpoints can help you determine:

  • Whether or not more major breakpoints are needed
  • Which design choice will be the most labor intensive; you might opt for a design that will better fit within time and budget constraints
  • Whether or not a particular device class has been neglected or needs further consideration
  • What technologies you’ll need to develop the design responsively

Rough sketches are more detailed than thumbnails, but they shouldn’t take a long time to create. In a short period, you should have a sketch of each major breakpoint for each of your chosen designs. This should be enough to decide on one of the designs.

[Full article]

Very useful: Corporate Identity Photoshop Layout Mockups

Layout with corporate identity collateral

Layout with corporate identity collateral

From BluGraphic.com:

BluGraphic’s free PSD file for today is a corporate or brand identity mock up for designers to present their identity design in a modern and pretty way for their clients or for presentation in their portfolios.

Every designer should have designed a corporate identity at some point in his career. In fact brand identity building is an essential part of design. Every company, agency, firm, TV channel, soccer team and even freelancers need a logo and a corporate identity. These identities usually consist of letterheads, business cards, envelopes, CD cover, CD box, bag, pen, pencil, calendar and more.

This mockup is totally made with Photoshop and not based on any real photo. This provide many advantages over photo mockups. For example, since this is vector based and build with vector shapes, this makes it resizable without quality loss. Where on the contrary it is impossible to scale a photo without losing quality. Moreover, since these shapes are vector shapes, you can change the proportions of the elements to fit your designed identity. For instance, if your business card is taller and thinner, you can easily edit the business card in the mockup to make it the same size.

To apply your design on this mockup template, simply grab your file as a jpeg image, place it over the corresponding item then change the blend mode to multiply instead of normal. That’s it !

[Full article]