experience by design talk
DESCRIPTION
TRANSCRIPT
![Page 1: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/1.jpg)
Experienceby Design
blimpcreative.co.uk
1
![Page 2: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/2.jpg)
Blimp
@JamesFenton
blimpcreative.co.uk
2
![Page 3: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/3.jpg)
Principles of design
Form and StructureTypography
Colour and ContrastSignposting
blimpcreative.co.uk
Experienceby Design
3
![Page 4: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/4.jpg)
Design Myths
blimpcreative.co.uk
blimpcreative.co.uk
4
![Page 5: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/5.jpg)
Design is art!
5
![Page 6: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/6.jpg)
artist designerblimpcreative.co.uk
6
![Page 7: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/7.jpg)
The difference between design and art is whether or not you proof read it.
Paula ScherDirector of Design at Pentagram
blimpcreative.co.uk
7
![Page 8: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/8.jpg)
Design is decoration
8
![Page 9: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/9.jpg)
decorator designerblimpcreative.co.uk
9
![Page 10: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/10.jpg)
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
![Page 11: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/11.jpg)
Design is a magic bullet
blimpcreative.co.uk
11
![Page 12: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/12.jpg)
magician designer
blimpcreative.co.uk
12
![Page 13: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/13.jpg)
Good designis as little as possibleDieter RamsChief Design Officer at Braun 1961- 1995
blimpcreative.co.uk
13
![Page 14: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/14.jpg)
Design is a mix of:
PsychologyMathsCommunication(story telling)
14
![Page 15: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/15.jpg)
Design Goals
15
![Page 16: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/16.jpg)
Functional
16
![Page 17: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/17.jpg)
Functional
Reliable
17
![Page 18: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/18.jpg)
Functional
Reliable
Usable
18
![Page 19: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/19.jpg)
Functional
Reliable
Usable
Memorable
19
![Page 20: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/20.jpg)
20
![Page 21: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/21.jpg)
21
![Page 22: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/22.jpg)
22
![Page 23: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/23.jpg)
23
![Page 24: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/24.jpg)
24
![Page 25: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/25.jpg)
Baby Face Bias25
![Page 26: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/26.jpg)
1.6180339887498948482...
1,2,3,5,8,13,21,34,55,89,144...
26
![Page 27: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/27.jpg)
1.6180339887498948482...
1,2,3,5,8,13,21,34,55,89,144...
Golden Ratio
27
![Page 28: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/28.jpg)
1.6180339887498948482...
1,1,2,3,5,8,13,21,34,55,89,144...
Golden Ratio
Fibonacci sequence
28
![Page 29: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/29.jpg)
29
![Page 30: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/30.jpg)
30
![Page 31: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/31.jpg)
31
![Page 32: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/32.jpg)
32
![Page 33: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/33.jpg)
33
![Page 34: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/34.jpg)
34
![Page 35: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/35.jpg)
35
![Page 36: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/36.jpg)
36
![Page 37: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/37.jpg)
37
![Page 38: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/38.jpg)
38
![Page 39: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/39.jpg)
39
![Page 40: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/40.jpg)
40
![Page 41: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/41.jpg)
41
![Page 42: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/42.jpg)
42
![Page 43: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/43.jpg)
43
![Page 44: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/44.jpg)
44
![Page 45: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/45.jpg)
45
![Page 46: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/46.jpg)
46
![Page 47: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/47.jpg)
47
![Page 48: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/48.jpg)
48
![Page 49: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/49.jpg)
49
![Page 50: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/50.jpg)
50
![Page 51: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/51.jpg)
51
![Page 52: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/52.jpg)
52
![Page 53: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/53.jpg)
53
![Page 54: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/54.jpg)
Brand Font Game
54
![Page 55: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/55.jpg)
55
![Page 56: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/56.jpg)
56
![Page 57: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/57.jpg)
Typography is what language looks like.
Ellen Lupton, 200457
![Page 58: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/58.jpg)
Serif
Sans Serif
Scriptmonospaced
Ornamental
58
![Page 59: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/59.jpg)
59
![Page 60: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/60.jpg)
Serif
Sans Serif
60
![Page 61: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/61.jpg)
Light
Regular
Semi-Bold
Bold
Extra-Bold
61
![Page 62: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/62.jpg)
Oblique
SMALL CAPS
ALL CAPS
62
![Page 63: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/63.jpg)
One of design's most humane functions is in actuality, to help
readers *avoid* reading.
Ellen Lupton, 2004
63
![Page 64: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/64.jpg)
THEREADING PROCESS
64
![Page 65: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/65.jpg)
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
![Page 66: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/66.jpg)
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
![Page 67: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/67.jpg)
READ ME
67
![Page 68: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/68.jpg)
READ ME
68
![Page 69: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/69.jpg)
READ ME
69
![Page 70: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/70.jpg)
read me
70
![Page 71: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/71.jpg)
read me
71
![Page 72: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/72.jpg)
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
![Page 73: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/73.jpg)
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
![Page 74: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/74.jpg)
74
![Page 75: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/75.jpg)
75
![Page 76: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/76.jpg)
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
![Page 77: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/77.jpg)
Hierarchy
77
![Page 78: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/78.jpg)
Hierarchy
78
![Page 79: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/79.jpg)
Hierarchy
79
![Page 80: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/80.jpg)
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
![Page 81: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/81.jpg)
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 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 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.
81
![Page 82: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/82.jpg)
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.
82
![Page 83: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/83.jpg)
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 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 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.
83
![Page 84: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/84.jpg)
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 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 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.
84
![Page 85: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/85.jpg)
85
![Page 86: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/86.jpg)
86
![Page 87: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/87.jpg)
87
![Page 88: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/88.jpg)
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
![Page 89: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/89.jpg)
89
![Page 90: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/90.jpg)
90
![Page 91: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/91.jpg)
91
![Page 92: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/92.jpg)
92
![Page 93: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/93.jpg)
93
![Page 94: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/94.jpg)
94
![Page 95: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/95.jpg)
95
![Page 96: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/96.jpg)
96
![Page 97: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/97.jpg)
97
![Page 98: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/98.jpg)
98
![Page 99: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/99.jpg)
99
![Page 100: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/100.jpg)
Colour
100
![Page 101: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/101.jpg)
101
![Page 102: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/102.jpg)
Complementary Colours102
![Page 103: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/103.jpg)
Complementary Colours103
![Page 104: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/104.jpg)
Triad Colours104
![Page 105: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/105.jpg)
105
![Page 106: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/106.jpg)
106
![Page 107: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/107.jpg)
107
![Page 108: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/108.jpg)
108
![Page 109: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/109.jpg)
109
![Page 110: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/110.jpg)
110
![Page 111: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/111.jpg)
111
![Page 112: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/112.jpg)
112
![Page 113: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/113.jpg)
113
![Page 114: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/114.jpg)
114
![Page 115: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/115.jpg)
115
![Page 116: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/116.jpg)
116
![Page 117: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/117.jpg)
117
![Page 118: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/118.jpg)
118
![Page 119: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/119.jpg)
119
![Page 120: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/120.jpg)
120
![Page 121: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/121.jpg)
121
![Page 122: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/122.jpg)
122
![Page 123: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/123.jpg)
123
![Page 124: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/124.jpg)
124
![Page 125: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/125.jpg)
125
![Page 126: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/126.jpg)
126
![Page 127: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/127.jpg)
Contrastand Noise
127
![Page 128: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/128.jpg)
128
![Page 129: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/129.jpg)
129
![Page 130: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/130.jpg)
Read me Read me
130
![Page 131: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/131.jpg)
131
![Page 132: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/132.jpg)
132
![Page 133: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/133.jpg)
133
![Page 134: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/134.jpg)
134
![Page 135: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/135.jpg)
135
![Page 136: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/136.jpg)
136
![Page 137: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/137.jpg)
137
![Page 138: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/138.jpg)
138
![Page 139: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/139.jpg)
139
![Page 140: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/140.jpg)
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
![Page 141: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/141.jpg)
This is poor contrast for readability
Whilst this is much clearer
141
![Page 142: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/142.jpg)
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
![Page 143: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/143.jpg)
143
![Page 144: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/144.jpg)
144
![Page 145: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/145.jpg)
145
![Page 146: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/146.jpg)
146
![Page 147: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/147.jpg)
147
![Page 148: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/148.jpg)
148
![Page 149: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/149.jpg)
149
![Page 150: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/150.jpg)
150
![Page 151: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/151.jpg)
151
![Page 152: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/152.jpg)
152
![Page 153: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/153.jpg)
153
![Page 154: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/154.jpg)
154
![Page 155: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/155.jpg)
Web users don’t like to read... They want to
keep moving and clicking.
Jakob Nielsen, 2000
155
![Page 156: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/156.jpg)
156
![Page 157: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/157.jpg)
157
![Page 158: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/158.jpg)
158
![Page 159: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/159.jpg)
159
![Page 160: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/160.jpg)
160
![Page 161: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/161.jpg)
161
![Page 162: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/162.jpg)
162
![Page 163: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/163.jpg)
163
![Page 164: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/164.jpg)
164
![Page 165: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/165.jpg)
165
![Page 166: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/166.jpg)
166
![Page 167: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/167.jpg)
167
![Page 168: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/168.jpg)
168
![Page 169: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/169.jpg)
169
![Page 170: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/170.jpg)
170
![Page 171: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/171.jpg)
171
![Page 172: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/172.jpg)
172
![Page 173: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/173.jpg)
173
![Page 174: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/174.jpg)
174
![Page 175: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/175.jpg)
175
![Page 176: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/176.jpg)
176
![Page 177: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/177.jpg)
177
![Page 178: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/178.jpg)
178
![Page 179: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/179.jpg)
179
![Page 180: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/180.jpg)
180
![Page 181: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/181.jpg)
181
![Page 182: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/182.jpg)
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
![Page 183: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/183.jpg)
Design for the end-user
183
![Page 184: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/184.jpg)
Build upon existing
structures
184
![Page 185: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/185.jpg)
Use proportion, scale and contrast
185
![Page 186: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/186.jpg)
Cut your content into managable
chunks
186
![Page 187: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/187.jpg)
Limit your font and colour
choices
187
![Page 188: Experience by Design Talk](https://reader038.vdocument.in/reader038/viewer/2022110302/545703b6af7959a8128b7159/html5/thumbnails/188.jpg)
Think Creatively
188