Experience by Design Talk

Experienceby Design

blimpcreative.co.uk

1

Blimp

@JamesFenton

blimpcreative.co.uk

2

Principles of design

Form and StructureTypography

Colour and ContrastSignposting

blimpcreative.co.uk

Experienceby Design

3

Design Myths

blimpcreative.co.uk

blimpcreative.co.uk

4

Design is art!

5

artist designerblimpcreative.co.uk

6

The difference between design and art is whether or not you proof read it.

Paula ScherDirector of Design at Pentagram

blimpcreative.co.uk

7

Design is decoration

8

decorator designerblimpcreative.co.uk

9

Design is the most immediate and explicit way of defining what a product becomes in people’s minds.

Jony IveDirector of Human Interface (HI) at Apple Computers

blimpcreative.co.uk

10

Design is a magic bullet

blimpcreative.co.uk

11

magician designer

blimpcreative.co.uk

12

Good designis as little as possibleDieter RamsChief Design Officer at Braun 1961- 1995

blimpcreative.co.uk

13

Design is a mix of:

PsychologyMathsCommunication(story telling)

14

Design Goals

15

Functional

16

Functional

Reliable

17

Functional

Reliable

Usable

18

Functional

Reliable

Usable

Memorable

19

Baby Face Bias25

1.6180339887498948482...

1,2,3,5,8,13,21,34,55,89,144...

26

1.6180339887498948482...

1,2,3,5,8,13,21,34,55,89,144...

Golden Ratio

27

1.6180339887498948482...

1,1,2,3,5,8,13,21,34,55,89,144...

Golden Ratio

Fibonacci sequence

28

Brand Font Game

54

Typography is what language looks like.

Ellen Lupton, 200457

Serif

Sans Serif

Scriptmonospaced

Ornamental

58

Serif

Sans Serif

60

Light

Regular

Semi-Bold

Bold

Extra-Bold

61

Oblique

SMALL CAPS

ALL CAPS

62

One of design's most humane functions is in actuality, to help

readers *avoid* reading.

Ellen Lupton, 2004

63

THEREADING PROCESS

64

The circles show points of fixation, on which the eye rests and looks

exactly. Straight lines between the circles indicate the saccades (for-ward

jumps), curves indicate the regression-saccades (backwards jumps).

THEREADING PROCESS

65

I cdn'uolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdanieg: the phaonmneel pweor of the hmuan mnid. Aoccdrnig to a rseearch taem at Cmabrigde Uinervtisy, it deosn't mttaer in waht oredr the ltteers in a wrod are, the olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rghit pclae. The rset can be a taotl mses and you can sitll raed it wouthit a porbelm. Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef, but the wrod as a wlohe. Scuh a cdonition is arppoiatrely cllaed Typoglycemia .

66

READ ME

67

READ ME

68

READ ME

69

read me

70

read me

71

SURVEYING THE BIG SCREEN BY MIKE PICK DECEMBER 04, 2013 PUBLISHED IN LAYOUT & GRIDS, MOBILE/MULTIDEVICE, RESPONSIVE DESIGN · 23 COMMENTS WITH OVER THREE YEARS OF RESPONSIVE WEB DESIGN IN OUR COLLECTIVE PORTFOLIOS, WE NOW HAVE A SOLID SET OF DESIGN PATTERNS FOR MAKING WEBSITES WORK ON SMALL DEVICES. BUT WHAT ABOUT LARGER SCREENS? IT’S BECOME COMMON FOR SITES TO EMPLOY A LIQUID DESIGN FOR SMALLER BREAKPOINTS, WHICH ALLOWS THE CONTENT TO EXPAND AND CONTRACT AS NECESSARY TO MAKE THE MOST OF THE AVAILABLE SCREEN WIDTH. AT THE OPPOSITE END OF THE SPECTRUM, HOWEVER, MANY OF THOSE SAME SITES HAVE A MAXIMUM WIDTH OF 960 PIXELS OR SO, WHICH CAN LEAVE A LOT OF UNUSED PIXELS ON A CONTEMPORARY DESKTOP DISPLAY. DESIGNING FOR THE BIG SCREEN CAN BE COMPLICATED—NEGATIVE SPACE, SCALE, DENSITY, AND LAYOUT DEVICES SUCH AS GRIDS, MODULES, AND COLUMNS CAN BE FACTORS IN MANAGING HIERARCHY AND EMPHASIS. LARGE SCREENS ARE ALSO GENERALLY SHAPED IN A WIDE LANDSCAPE ORIENTATION, A POOR FIT FOR THE TRADITIONAL VERTICALLY SCROLLED WEBPAGE. AS WITH SMALLER SCREENS, THERE ARE A WIDE VARIETY OF SCREEN SIZES AND RESOLUTIONS—BUT IN THE CASE OF LARGER SCREENS, THE DIFFERENCES ARE OFTEN MAGNIFIED, RANGING FROM ULTRA-LIGHT 11-INCH LAPTOPS TO 30-INCH DESKTOP MONITORS. CONTENT CHALLENGES AS WITH ANY DESIGN, THE FIRST CONSIDERATION WHEN APPROACHING LARGER BREAKPOINTS IS CONTENT. LONG- AND SHORT-FORM WRITING, PHOTOGRAPHY, ECOMMERCE, VIDEO, OR WEB APPLICATIONS MAY BENEFIT FROM DIFFERENT APPROACHES IN DIFFERENT WAYS. PHOTOGRAPHY, SEARCH RESULTS, AND OTHER CONTENT PRESENTED IN GRID FORMAT ARE EASY CANDIDATES FOR WIDE SCREENS. SHOWING AS MUCH CONTENT AS THE SCREEN CAN ACCOMMODATE ALLOWS A USER TO QUICKLY SCAN AND COMPARE RESULTS. ON THE OTHER HAND, LONG-FORM READING IS A CHALLENGE FOR WIDER BREAKPOINTS. LONG LINE LENGTHS CAN MAKE IT DIFFICULT TO FOLLOW THE TEXT FROM LINE TO LINE, WHILE SHORT LINE LENGTHS CAN INTRODUCE A SENSE OF JUMPINESS OR ACCELERATION, BREAKING A READER’S RHYTHM AND PACING. TO MAKE READING MORE COMFORTABLE, A DESIGNER NEEDS TO BALANCE THE WIDTH OF THE TEXT COLUMN (THE MEASURE) AGAINST THE SIZE AND LINE-HEIGHT (LEADING) OF EACH LINE OF TEXT. CLASSICALLY, AN APPROPRIATE COUNT FOR A SINGLE COLUMN OF TEXT IS SEVEN TO 10 WORDS (JOSEF MULLER-BROCKMANN) OR 45 TO 75 CHARACTERS (ROBERT BRINGHURST). TAKEN ANOTHER WAY, BRINGHURST ALSO NOTES THAT THE MEASURE OF A CONVENTIONAL BOOK COLUMN IS ABOUT 30 TIMES THAT OF THE TYPE SIZE USED, BUT THAT THIS NUMBER MAY ALSO RANGE FROM 20 TO 40 TIMES THE SIZE OF THE TYPE. WIDER COLUMNS CAN USE MORE LINE-HEIGHT TO MAKE IT EASIER TO FOLLOW THE TEXT FROM LINE TO LINE, BUT TOO MUCH LINE-HEIGHT CAN CAUSE LINES TO DRIFT APART, RESEMBLING A COLLEGE RESEARCH PAPER. SIMILARLY, AS THE TEXT SIZE IN A COLUMN GROWS LARGER, THE NUMBER OF LINES THAT CAN BE PRESENTED VERTICALLY ON THE SCREEN GROWS SMALLER, INCREASING THE NEED FOR SCROLLING AND BREAKING THE READER’S IMMERSION. SIMPLY SCALING THE TEXT FOR LARGER BREAKPOINTS IS A LIMITED SOLUTION. WORKING WITH LONG READS THE GREAT DISCONTENT DEMONSTRATES HOW A SITE CAN USE ART DIRECTION TO ADAPT TO LARGER SCREENS WITHOUT NECESSARILY FILLING EVERY SINGLE PIXEL IN THE BROWSER WINDOW. EACH ARTICLE EXPANDS ITS FEATURE ART AT THE TOP TO FILL THE VIEWPORT, RESULTING IN A STRIKING FULL-BLEED EFFECT UPON FIRST VIEWING. THE MAIN CONTENT OF EACH ARTICLE IS SET IN A RELATIVELY NARROW MAIN COLUMN, BUT SIDEBARS, PULL QUOTES, AND INLINE ART EXPAND BEYOND THE CENTRAL COLUMN. BREAKING THE CONTENT OUT OF THE MAIN COLUMN CREATES AN ASYMMETRICAL SHAPE WHICH COMPLEMENTS THE FULL-WIDTH ARTWORK AT THE TOP—CREATING THE ILLUSION OF A FULL-WINDOW EXPERIENCE WITHOUT COMPROMISING LEGIBILITY. LARGE IMAGES LIKE THESE CAN COME AT A COST, THOUGH, AS A BALANCE BETWEEN IMAGE QUALITY AND THE OVERALL PAGE WEIGHT NEEDS TO BE CONSIDERED. CHUNKING CONTENT ON LARGE SCREENS BREAKING CONTENT INTO CHUNKS ALLOWS USERS TO QUICKLY AND EFFICIENTLY PROCESS INFORMATION ON CONTENT-HEAVY PAGES, AND IT’S A NATURAL FIT FOR RESPONSIVE DESIGNS, BECAUSE IT ALLOWS CONTENT TO BE EASILY STACKED HIERARCHICALLY OR ARRANGED IN COLUMNS FOR DIFFERENT BREAKPOINTS. THE ADVANTAGE OF THIS TECHNIQUE FOR LARGE SCREENS IS THAT EACH CHUNK OR BAND OF CONTENT CAN USE A DIFFERENT LAYOUT TO OPTIMIZE FOR LEGIBILITY OR IMPACT. A GOOD EXAMPLE OF THIS APPROACH IS THE MANCHESTER CITY COUNCIL SITE, WHICH USES DIFFERENT GROUPS OF MODULES IN RESTRICTED WIDTHS TOGETHER WITH A FULL-WIDTH PHOTOGRAPHY CHUNK TO CREATE IMPACT AND EMOTION. THE LAYOUT ADAPTS FLUIDLY TO DIFFERENT VIEWPORTS WHILE RETAINING AN APPROPRIATE WIDTH AND LAYOUT FOR THE CONTENT OF EACH CHUNK.FINALLY BY SIMPLY EXTENDING COMMON TECHNIQUES FOR ADAPTING CONTENT TO SMALLER BREAKPOINTS, WE CAN SEE PLENTY OF OPPORTUNITIES FOR LARGER BREAKPOINTS AS WELL. SITES THAT USE A STRONG GRID WILL HAVE AN EASIER TIME OF IT, AS A WELL-STRUCTURED GRID SHOULD HAVE NO PROBLEM EXPANDING INTO A WIDER SPACE. OBVIOUSLY THE MOST IMPORTANT CONSIDERATION IN ANY DESIGN IS THE CONTENT, AND SO THAT MUST BE THE BASIS FOR ANY EFFORT TO EXPAND A DESIGN TO FILL A WIDE SCREEN. FOR LONG READS, IT’S MORE IMPORTANT TO CREATE A GOOD RHYTHM AND FLOW SO THAT THE TEXT CAN BE READ WITHOUT DISTRACTION. FOR PHOTOGRAPHS OR GRAPHICS, SPACE AND SCALE CONTRIBUTE DIRECTLY TO IMPACT. GOVERNMENT AND SERVICE-ORIENTED SITES MUST PROVIDE EASY ACCESS TO TASKS AND INFORMATION. ECOMMERCE SITES NEED TO MAKE IT EASY FOR CONSUMERS TO EVALUATE AND PURCHASE PRODUCTS. A LAYOUT’S DENSITY SHOULD REFLECT THE SITE’S TONE—MORE DENSITY FOR A MORE ACTIVE EXPERIENCE, LESS FOR A SLOWER, MORE THOUGHTFUL TONE. MUCH LIKE FRAMING A PHOTOGRAPH, FILLING OUT THE VIEWPORT CAN MAKE A DESIGN SEEM BIGGER AND BOLDER, JUST AS FRAMING A DESIGN IN GENEROUS WHITESPACE CAN MAKE IT SEEM MORE ELEGANT OR PRECIOUS. IT MAY BE TRUE THAT DESKTOP USERS HAVE THE LUXURY OF RESIZING THE BROWSER WINDOW IF ALL THAT WHITESPACE MAKES THEM UNCOMFORTABLE, UNLIKE USERS OF SMALLER DEVICES. IT MAY BE ALSO BE TRUE THAT NOT ALL DESKTOP USERS BROWSE WITH LARGE OR FULL-SCREEN WINDOWS. BUT AS WITH MOBILE, WE SHOULDN’T MAKE ASSUMPTIONS ABOUT WHICH DEVICES ARE USED TO VIEW OUR CONTENT NOW, AND ESPECIALLY IN THE FUTURE. LARGE SCREENS, IN SOME CASES, CAN PROVIDE BOTH ENHANCED USABILITY FOR USERS AND A RICHER PALETTE FOR DESIGNERS. IT’S UP TO US TO TAKE ADVANTAGE OF THESE EXPANDED BORDERS.

72

Surveying the Big Screen by Mike Pick December 04, 2013 Published in Layout & Grids, Mobile/Multidevice, Responsive Design · 23 Comments With over three years of responsive web design in our collective portfolios, we now have a solid set of design patterns for making websites work on small devices. But what about larger screens? It’s become common for sites to employ a liquid design for smaller breakpoints, which allows the content to expand and contract as necessary to make the most of the available screen width. At the opposite end of the spectrum, however, many of those same sites have a maximum width of 960 pixels or so, which can leave a lot of unused pixels on a contemporary desktop display. Designing for the big screen can be complicated—negative space, scale, density, and layout devices such as grids, modules, and columns can be factors in managing hierarchy and emphasis. Large screens are also generally shaped in a wide landscape orientation, a poor fit for the traditional vertically scrolled webpage. As with smaller screens, there are a wide variety of screen sizes and resolutions—but in the case of larger screens, the differences are often magnified, ranging from ultra-light 11-inch laptops to 30-inch desktop monitors. Content challenges As with any design, the first consideration when approaching larger breakpoints is content. Long- and short-form writing, photography, ecommerce, video, or web applications may benefit from different approaches in different ways. Photography, search results, and other content presented in grid format are easy candidates for wide screens. Showing as much content as the screen can accommodate allows a user to quickly scan and compare results. On the other hand, long-form reading is a challenge for wider breakpoints. Long line lengths can make it difficult to follow the text from line to line, while short line lengths can introduce a sense of jumpiness or acceleration, breaking a reader’s rhythm and pacing. To make reading more comfortable, a designer needs to balance the width of the text column (the measure) against the size and line-height (leading) of each line of text. Classically, an appropriate count for a single column of text is seven to 10 words (Josef Muller-Brockmann) or 45 to 75 characters (Robert Bringhurst). Taken another way, Bringhurst also notes that the measure of a conventional book column is about 30 times that of the type size used, but that this number may also range from 20 to 40 times the size of the type. Wider columns can use more line-height to make it easier to follow the text from line to line, but too much line-height can cause lines to drift apart, resembling a college research paper. Similarly, as the text size in a column grows larger, the number of lines that can be presented vertically on the screen grows smaller, increasing the need for scrolling and breaking the reader’s immersion. Simply scaling the text for larger breakpoints is a limited solution. Working with long reads The Great Discontent demonstrates how a site can use art direction to adapt to larger screens without necessarily filling every single pixel in the browser window. Each article expands its feature art at the top to fill the viewport, resulting in a striking full-bleed effect upon first viewing. The main content of each article is set in a relatively narrow main column, but sidebars, pull quotes, and inline art expand beyond the central column. Breaking the content out of the main column creates an asymmetrical shape which complements the full-width artwork at the top—creating the illusion of a full-window experience without compromising legibility. Large images like these can come at a cost, though, as a balance between image quality and the overall page weight needs to be considered. Chunking content on large screens Breaking content into chunks allows users to quickly and efficiently process information on content-heavy pages, and it’s a natural fit for responsive designs, because it allows content to be easily stacked hierarchically or arranged in columns for different breakpoints. The advantage of this technique for large screens is that each chunk or band of content can use a different layout to optimize for legibility or impact. A good example of this approach is the Manchester City Council site, which uses different groups of modules in restricted widths together with a full-width photography chunk to create impact and emotion. The layout adapts fluidly to different viewports while retaining an appropriate width and layout for the content of each chunk.Finally By simply extending common techniques for adapting content to smaller breakpoints, we can see plenty of opportunities for larger breakpoints as well. Sites that use a strong grid will have an easier time of it, as a well-structured grid should have no problem expanding into a wider space. Obviously the most important consideration in any design is the content, and so that must be the basis for any effort to expand a design to fill a wide screen. For long reads, it’s more important to create a good rhythm and flow so that the text can be read without distraction. For photographs or graphics, space and scale contribute directly to impact. Government and service-oriented sites must provide easy access to tasks and information. Ecommerce sites need to make it easy for consumers to evaluate and purchase products. A layout’s density should reflect the site’s tone—more density for a more active experience, less for a slower, more thoughtful tone. Much like framing a photograph, filling out the viewport can make a design seem bigger and bolder, just as framing a design in generous whitespace can make it seem more elegant or precious. It may be true that desktop users have the luxury of resizing the browser window if all that whitespace makes them uncomfortable, unlike users of smaller devices. It may be also be true that not all desktop users browse with large or full-screen windows. But as with mobile, we shouldn’t make assumptions about which devices are used to view our content now, and especially in the future. Large screens, in some cases, can provide both enhanced usability for users and a richer palette for designers. It’s up to us to take advantage of these expanded borders.

73

Surveying the Big Screenby Mike Pick December 04, 2013 Published in Layout & Grids, Mobile/Multidevice, Responsive Design · 23 CommentsWith over three years of responsive web design in our collective portfolios, we now have a solid set of design patterns for making websites work on small devices. But what about larger screens?It’s become common for sites to employ a liquid design for smaller breakpoints, which allows the content to expand and contract as necessary to make the most of the available screen width. At the opposite end of the spectrum, however, many of those same sites have a maximum width of 960 pixels or so, which can leave a lot of unused pixels on a contemporary desktop display.Designing for the big screen can be complicated—negative space, scale, density, and layout devices such as grids, modules, and columns can be factors in managing hierarchy and emphasis.Large screens are also generally shaped in a wide landscape orientation, a poor fit for the traditional vertically scrolled webpage. As with smaller screens, there are a wide variety of screen sizes and resolutions—but in the case of larger screens, the differences are often magnified, ranging from ultra-light 11-inch laptops to 30-inch desktop monitors.Content challengesAs with any design, the first consideration when approaching larger breakpoints is content. Long- and short-form writing, photography, ecommerce, video, or web applications may benefit from different approaches in different ways.Photography, search results, and other content presented in grid format are easy candidates for wide screens. Showing as much content as the screen can accommodate allows a user to quickly scan and compare results.On the other hand, long-form reading is a challenge for wider breakpoints. Long line lengths can make it difficult to follow the text from line to line, while short line lengths can introduce a sense of jumpiness or acceleration, breaking a reader’s rhythm and pacing.To make reading more comfortable, a designer needs to balance the width of the text column (the measure) against the size and line-height (leading) of each line of text. Classically, an appropriate count for a single column of text is seven to 10 words (Josef Muller-Brockmann) or 45 to 75 characters (Robert Bringhurst). Taken another way, Bringhurst also notes that the measure of a conventional book column is about 30 times that of the type size used, but that this number may also range from 20 to 40 times the size of the type.Wider columns can use more line-height to make it easier to follow the text from line to line, but too much line-height can cause lines to drift apart, resembling a college research paper. Similarly, as the text size in a column grows larger, the number of lines that can be presented vertically on the screen grows smaller, increasing the need for scrolling and breaking the reader’s immersion. Simply scaling the text for larger breakpoints is a limited solution.Working with long readsThe Great Discontent demonstrates how a site can use art direction to adapt to larger screens without necessarily filling every single pixel in the browser window. Each article expands its feature art at the top to fill the viewport, resulting in a striking full-bleed effect upon first viewing. The main content of each article is set in a relatively narrow main column, but sidebars, pull quotes, and inline art expand beyond the central column. Breaking the content out of the main column creates an asymmetrical shape which complements the full-width artwork at the top—creating the illusion of a full-window experience without compromising legibility. Large images like these can come at a cost, though, as a balance between image quality and the overall page weight needs to be considered.Chunking content on large screensBreaking content into chunks allows users to quickly and efficiently process information on content-heavy pages, and it’s a natural fit for responsive designs, because it allows content to be easily stacked hierarchically or arranged in columns for different breakpoints.The advantage of this technique for large screens is that each chunk or band of content can use a different layout to optimize for legibility or impact. A good example of this approach is the Manchester City Council site, which uses different groups of modules in restricted widths together with a full-width photography chunk to create impact and emotion. The layout adapts fluidly to different viewports while retaining an appropriate width and layout for the content of each chunk.FinallyBy simply extending common techniques for adapting content to smaller breakpoints, we can see plenty of opportunities for larger breakpoints as well. Sites that use a strong grid will have an easier time of it, as a well-structured grid should have no problem expanding into a wider space.Obviously the most important consideration in any design is the content, and so that must be the basis for any effort to expand a design to fill a wide screen. For long reads, it’s more important to create a good rhythm and flow so that the text can be read without distraction. For photographs or graphics, space and scale contribute directly to impact. Government and service-oriented sites must provide easy access to tasks and information. Ecommerce sites need to make it easy for consumers to evaluate and purchase products. A layout’s density should reflect the site’s tone—more density for a more active experience, less for a slower, more thoughtful tone. Much like framing a photograph, filling out the viewport can make a design seem bigger and bolder, just as framing a design in generous whitespace can make it seem more elegant or precious.It may be true that desktop users have the luxury of resizing the browser window if all that whitespace makes them uncomfortable, unlike users of smaller devices. It may be also be true that not all desktop users browse with large or full-screen windows. But as with mobile, we shouldn’t make assumptions about which devices are used to view our content now, and especially in the future. Large screens, in some cases, can provide both enhanced usability for users and a richer palette for designers. It’s up to us to take advantage of these expanded borders.

76

Hierarchy

77

Hierarchy

78

Hierarchy

79

Surveying the Big Screenby Mike Pick December 04, 2013 Published in Layout & Grids, Mobile/Multidevice, Responsive Design · 23 Comments

With over three years of responsive web design in our collective portfolios, we now have a solid set of design patterns for making websites work on small devices. But what about larger screens?It’s become common for sites to employ a liquid design for smaller breakpoints, which allows the content to expand and contract as necessary to make the most of the available screen width. At the opposite end of the spectrum, however, many of those same sites have a maximum width of 960 pixels or so, which can leave a lot of unused pixels on a contemporary desktop display.Designing for the big screen can be complicated—negative space, scale, density, and layout devices such as grids, modules, and columns can be factors in managing hierarchy and emphasis.Large screens are also generally shaped in a wide landscape orientation, a poor fit for the traditional vertically scrolled webpage. As with smaller screens, there are a wide variety of screen sizes and resolutions—but in the case of larger screens, the differences are often magnified, ranging from ultra-light 11-inch laptops to 30-inch desktop monitors.

Content challengesAs with any design, the first consideration when approaching larger breakpoints is content. Long- and short-form writing, photography, ecommerce, video, or web applications may benefit from different approaches in different ways.Photography, search results, and other content presented in grid format are easy candidates for wide screens. Showing as much content as the screen can accommodate allows a user to quickly scan and compare results.On the other hand, long-form reading is a challenge for wider breakpoints. Long line lengths can make it difficult to follow the text from line to line, while short line lengths can introduce a sense of jumpiness or acceleration, breaking a reader’s rhythm and pacing.To make reading more comfortable, a designer needs to balance the width of the text column (the measure) against the size and line-height (leading) of each line of text. Classically, an appropriate count for a single column of text is seven to 10 words (Josef Muller-Brockmann) or 45 to 75 characters (Robert Bringhurst). Taken another way, Bringhurst also notes that the measure of a conventional book column is about 30 times that of the type size used, but that this number may also range from 20 to 40 times the size of the type.Wider columns can use more line-height to make it easier to follow the text from line to line, but too much line-height can cause lines to drift apart, resembling a college research paper. Similarly, as the text size in a column grows larger, the number of lines that can be presented vertically on the screen grows smaller, increasing the need for scrolling and breaking the reader’s immersion. Simply scaling the text for larger breakpoints is a limited solution.

Working with long readsThe Great Discontent demonstrates how a site can use art direction to adapt to larger screens without necessarily filling every single pixel in the browser window. Each article expands its feature art at the top to fill the viewport, resulting in a striking full-bleed effect upon first viewing. The main content of each article is set in a relatively narrow main column, but sidebars, pull quotes, and inline art expand beyond the central column. Breaking the content out of the main column creates an asymmetrical shape which complements the full-width artwork at the top—creating the illusion of a full-window experience without compromising legibility. Large images like these can come at a cost, though, as a balance between image quality and the overall page weight needs to be considered.

Chunking content on large screensBreaking content into chunks allows users to quickly and efficiently process information on content-heavy pages, and it’s a natural fit for responsive designs, because it allows content to be easily stacked hierarchically or arranged in columns for different breakpoints.The advantage of this technique for large screens is that each chunk or band of content can use a different layout to optimize for legibility or impact. A good example of this approach is the Manchester City Council site, which uses different groups of modules in restricted widths together with a full-width photography chunk to create impact and emotion. The layout adapts fluidly to different viewports while retaining an appropriate width and layout for the content of each chunk.

FinallyBy simply extending common techniques for adapting content to smaller breakpoints, we can see plenty of opportunities for larger breakpoints as well. Sites that use a strong grid will have an easier time of it, as a well-structured grid should have no problem expanding into a wider space.Obviously the most important consideration in any design is the content, and so that must be the basis for any effort to expand a design to fill a wide screen. For long reads, it’s more important to create a good rhythm and flow so that the text can be read without distraction. For photographs or graphics, space and scale contribute directly to impact. Government and service-oriented sites must provide easy access to tasks and information. Ecommerce sites need to make it easy for consumers to evaluate and purchase products. A layout’s density should reflect the site’s tone—more density for a more active experience, less for a slower, more thoughtful tone. Much like framing a photograph, filling out the viewport can make a design seem bigger and bolder, just as framing a design in generous whitespace can make it seem more elegant or precious.It may be true that desktop users have the luxury of resizing the browser window if all that whitespace makes them uncomfortable, unlike users of smaller devices. It may be also be true that not all desktop users browse with large or full-screen windows. But as with mobile, we shouldn’t make assumptions about which devices are used to view our content now, and especially in the future. Large screens, in some cases, can provide both enhanced usability for users and a richer palette for designers. It’s up to us to take advantage of these expanded borders.

80


With over three years of responsive web design in our collective portfolios, we now have a solid set of design patterns for making websites work on small devices. But what about larger screens?

It’s become common for sites to employ a liquid design for smaller breakpoints, which allows the content to expand and contract as necessary to make the most of the available screen width. At the opposite end of the spectrum, however, many of those same sites have a maximum width of 960 pixels or so, which can leave a lot of unused pixels on a contemporary desktop display.

Designing for the big screen can be complicated—negative space, scale, density, and layout devices such as grids, modules, and columns can be factors in managing hierarchy and emphasis.

Large screens are also generally shaped in a wide landscape orientation, a poor fit for the traditional vertically scrolled webpage. As with smaller screens, there are a wide variety of screen sizes and resolutions—but in the case of larger screens, the differences are often magnified, ranging from ultra-light 11-inch laptops to 30-inch desktop monitors.

Content challenges

As with any design, the first consideration when approaching larger breakpoints is content. Long- and short-form writing, photography, ecommerce, video, or web applications may benefit from different approaches in different ways.

Photography, search results, and other content presented in grid format are easy candidates for wide screens. Showing as much content as the screen can accommodate allows a user to quickly scan and compare results.

On the other hand, long-form reading is a challenge for wider breakpoints. Long line lengths can make it difficult to follow the text from line to line, while short line lengths can introduce a sense of jumpiness or acceleration, breaking a reader’s rhythm and pacing.

To make reading more comfortable, a designer needs to balance the width of the text column (the measure) against the size and line-height (leading) of each line of text. Classically, an appropriate count for a single column of text is seven to 10 words (Josef Muller-Brockmann) or 45 to 75 characters (Robert Bringhurst). Taken another way, Bringhurst also notes that the measure of a conventional book column is about 30 times that of the type size used, but that this number may also range from 20 to 40 times the size of the type.

Wider columns can use more line-height to make it easier to follow the text from line to line, but too much line-height can cause lines to drift apart, resembling a college research paper. Similarly, as the text size in a column grows larger, the number of lines that can be presented vertically on the screen grows smaller, increasing the need for scrolling and breaking the reader’s immersion. Simply scaling the text for larger breakpoints is a limited solution.

Working with long reads

The Great Discontent demonstrates how a site can use art direction to adapt to larger screens without necessarily filling every single pixel in the browser window. Each article expands its feature art at the top to fill the viewport, resulting in a striking full-bleed effect upon first viewing. The main content of each article is set in a relatively narrow main column, but sidebars, pull quotes, and inline art expand beyond the central column. Breaking the content out of the main column creates an asymmetrical shape which complements the full-width artwork at the top—creating the illusion of a full-window experience without compromising legibility. Large images like these can come at a cost, though, as a balance between image quality and the overall page weight needs to be considered.



81


82






Content challenges










83






Content challenges










84

Cut your content down into manageable chunks

Create a clear and consistent hierarchy to aid reading

Don’t use more than two type-faces in your designs

88

Colour

100

Complementary Colours102

Complementary Colours103

Triad Colours104

Contrastand Noise

127

Read me Read me

130

This text is very difficult to readThis text is almost impossible to read

This text is much easier to readand so is this line.

140

This is poor contrast for readability

Whilst this is much clearer

141

Limit your your palette to two or three colours, with additional

shades of black and white.

Use colours which reflect your content

Ensure contrast between your copy and background

142

Web users don’t like to read... They want to

keep moving and clicking.

Jakob Nielsen, 2000

155

Use consistent iconography

Direct users with clear signposting

Stick to design conventions that users are familar with

Test ideas with wire-frames and prototypes first

De-clutter your interface

182

Design for the end-user

183

Build upon existing

structures

184

Use proportion, scale and contrast

185

Cut your content into managable

chunks

186

Limit your font and colour

choices

187

Think Creatively

188

Experience by Design Talk

Technology

Transcript of Experience by Design Talk