1 of 123

Web Design

Lecture & Discussion

Pagination (Single-Page Scroll)

2 of 123

Discussion

Pagination vs. Multi-page

Persistent (Fixed) Navigation

Skeuomorphic vs. Flat Interfaces

3 of 123

Discussion

Pagination vs. Multi-page

Persistent (Fixed) Navigation

Skeuomorphic vs. Flat Interfaces

4 of 123

Discussion

Pagination vs. Multi-page

Persistent (Fixed) Navigation

Skeuomorphic vs. Flat Interfaces

5 of 123

Pagination

6 of 123

Pagination

Pagination is a basic interface design technique in which we choose how to organize and make navigable the content on our site.

7 of 123

Pagination

Pagination is a basic interface design technique in which we choose how to organize and make navigable the content on our site.

For instance, we might choose to hold all of our site content on multiple different pages and subpages, �like we would if it was a physical bound book…

8 of 123

Pagination

https://upload.wikimedia.org/wikipedia/commons/3/3d/Book_Collage.png

9 of 123

Pagination

root

html

index.html

10 of 123

Pagination

root

pages

html

index.html

11 of 123

Pagination

html

root

pages

html

index.html

about.html

12 of 123

Pagination

html

root

pages

html

index.html

about.html

contact.html

13 of 123

Pagination

html

root

pages

html

index.html

about.html

contact.html

art.html

14 of 123

Pagination

html

root

pages

html

index.html

about.html

contact.html

art.html

design.html

15 of 123

Pagination

html

root

pages

html

index.html

about.html

contact.html

art.html

design.html

videos.html

16 of 123

Pagination

Pagination is a basic interface design technique in which we choose how to organize and make navigable the content on our site.

For instance, we might choose to hold all of our site content on multiple different pages and subpages, �like we would if it was a physical bound book…

17 of 123

Pagination

Pagination is a basic interface design technique in which we choose how to organize and make navigable the content on our site.

For instance, we might choose to hold all of our site content on multiple different pages and subpages, �like we would if it was a physical bound book… Or we might choose to hold all of our site content on a single page, like we would if it was a physical, paper scroll…

18 of 123

Pagination

https://s-media-cache-ak0.pinimg.com/originals/5f/4f/9a/5f4f9a808f88e54d45b54e6a4cfc92f2.jpg

19 of 123

Pagination

root

html

index.html

20 of 123

Pagination

root

html

index.html

21 of 123

Pagination

root

html

index.html

22 of 123

Pagination

root

html

index.html

23 of 123

Pagination

root

html

index.html

24 of 123

Pagination

root

html

index.html

25 of 123

Pagination

Pagination is a basic interface design technique in which we choose how to organize and make navigable the content on our site.

For instance, we might choose to hold all of our site content on multiple different pages and subpages, �like we would if it was a physical bound book… Or we might choose to hold all of our site content on a single page, like we would if it was a physical, paper scroll…

26 of 123

Pagination

27 of 123

Pagination

Typically we call this pagination technique single page scroll…

28 of 123

Pagination

Typically we call this pagination technique single page scroll, or one page scrollers…

29 of 123

Pagination

Typically we call this pagination technique single page scroll, or one page scrollers. These sites often make use of functional scroll animations…

30 of 123

Pagination

Typically we call this pagination technique single page scroll, or one page scrollers. These sites often make use of functional scroll animations and parallax visual scroll effects…

31 of 123

Pagination

Typically we call this pagination technique single page scroll, or one page scrollers. These sites often make use of functional scroll animations and parallax visual scroll effects

But single page scroll not the same as infinite scroll or endless scroll…

32 of 123

Pagination

Typically we call this pagination technique single page scroll, or one page scrollers. These sites often make use of functional scroll animations and parallax visual scroll effects

But single page scroll not the same as infinite scroll or endless scroll, which requires populating content on and on as the user scrolls down the page

33 of 123

Single Page Scroll - Research

JUMP TO THE IN-CLASS RESEARCH DECK!

34 of 123

Single Page Scroll - Observations

Pros

Unifying
Hierarchy
Less loading, quicker load times
Smoothness
Satisfying
Context of the application (maybe not all sites should be treated the same way)
Visual control, controlling the voice, tone, mood, etc.

Cons

Think about mobile responsiveness
Confusion, legibility, usability of interface – swiping/scrolling confusion
Loading, lagging, lots of content to load
Very demanding for user experience – user orientation
Lots of scrolling
Animation/time expectations
Sense of place – sitemap, basically it can be tough to know where you are in the site
Maybe not great for information/data heavy (like a newspaper) – complicated information/details get lost

35 of 123

Single Page Scroll - Observations

Pros

Easier to navigate, easy to get a sense of scope, find interesting or unexpected content
Demands strong imagery
More opportunities for creativity, expressiveness

Cons

Hierarchy/scale can be difficult
Forces everything onto one single frame/screen
Bandwidth heavy because of loading entire page

36 of 123

Single Page Scroll - Observations

Pros

Infinite scrolling

Keeps users engaged
Keeps users on the site

Clarity, simplicity, giving the user what they want
Flexibility of information density
Well-suited for mobile

Good for touch interactions
Simplicity of interactions, navigation, usability

Scrolling on both axis

Cons

Bandwidth demands for large imagery/video
Predictable
Too linear
Difficulty getting a sense of place
Sharing/statistics/analytics
Lose focus with product, distraction
Categorization, information architecture

37 of 123

Single Page Scroll - Observations

Pros

Usability, links, clarity of navigation
Hierarchy
Large fonts
Large imagery
Good sense of context, position
Balance of information (no need to fill-in low density pages)
Clarity

Cons

New conventions become oversaturated
Thoughtless application when a style becomes conventional

38 of 123

Single Page Scroll - Observations

Pros

Billboard or magazine cover approach – communicate as much as possible in as little time as possible
Assumes low attention
Uses imagery to gain attention
Narrative/game/immersion
Time-based, story-telling
Punctuation, curiosity, information visualization
Experimentation, personalization, modularity

Cons

Bandwidth demands for large imagery/video

39 of 123

Single Page Scroll - Observations

Pros

Modern, up-to-date, clean,
Novel, unconventional interaction opportunities
Forces users into linear path, good for sense of emphasis/direction
Visual interest, splash page
Movement, dynamic
Heavy use of imagery (Beyonce)
Simplicity

Cons

Bandwidth demands for large imagery/video

40 of 123

Discussion

Pagination vs. Multi-page

Persistent (Fixed) Navigation

Skeuomorphic vs. Flat Interfaces

41 of 123

Discussion

Pagination vs. Multi-page

Persistent (Fixed) Navigation

Skeuomorphic vs. Flat Interfaces

42 of 123

Navigation Interface

43 of 123

Navigation Interface

Pagination forces us to reconsider navigation interface.

44 of 123

Navigation Interface

Pagination forces us to reconsider navigation interface. It might make more sense on a single page scroll to use persistent navigation

45 of 123

Navigation Interface

Pagination forces us to reconsider navigation interface. It might make more sense on a single page scroll to use persistent navigation, or fixed navigation

46 of 123

Navigation Interface

Pagination forces us to reconsider navigation interface. It might make more sense on a single page scroll to use persistent navigation, or fixed navigation, which doesn’t scroll with the rest of the content on the page.

47 of 123

Static (Default) Positioning

48 of 123

Static (Default) Positioning

Off-Screen

DIV

User Viewport

49 of 123

Static (Default) Positioning

Off-Screen

DIV

User Viewport

50 of 123

Static (Default) Positioning

Off-Screen

DIV

User Viewport

51 of 123

Fixed Positioning

52 of 123

Fixed Positioning

Off-Screen

DIV

User Viewport

53 of 123

Fixed Positioning

Off-Screen

DIV

User Viewport

54 of 123

Fixed Positioning

Off-Screen

DIV

User Viewport

55 of 123

Discussion

Pagination vs. Multi-page

Persistent (Fixed) Navigation

Skeuomorphic vs. Flat Interfaces

56 of 123

Discussion

Pagination vs. Multi-page

Persistent (Fixed) Navigation

Skeuomorphic vs. Flat Interfaces

57 of 123

Skeuomorphic vs. Flat Interfaces

58 of 123

Skeuomorphic vs. Flat Interfaces

Keep in mind that the field of Interaction Design (IxD) �is relatively new…

59 of 123

Skeuomorphic vs. Flat Interfaces

Keep in mind that the field of Interaction Design (IxD) �is relatively new particularly when compared to more established design disciplines, such as industrial design, graphic design, or architectural design.

60 of 123

Skeuomorphic vs. Flat Interfaces

This means that many design solutions for basic interaction problems…

61 of 123

Skeuomorphic vs. Flat Interfaces

This means that many design solutions for basic interaction problems, like how to design intuitive and visually engaging navigation interfaces…

62 of 123

Skeuomorphic vs. Flat Interfaces

This means that many design solutions for basic interaction problems, like how to design intuitive and visually engaging navigation interfaces, are still highly contested…

63 of 123

Skeuomorphic vs. Flat Interfaces

This means that many design solutions for basic interaction problems, like how to design intuitive and visually engaging navigation interfaces, are still highly contested: the solutions are a matter of debate and experimentation.

64 of 123

Skeuomorphic vs. Flat Interfaces

65 of 123

Skeuomorphic vs. Flat Interfaces

One major topic of debate in contemporary IxD is:

66 of 123

Skeuomorphic vs. Flat Interfaces

One major topic of debate in contemporary IxD is: Skeuomorphic Design

67 of 123

Skeuomorphic vs. Flat Interfaces

One major topic of debate in contemporary IxD is: Skeuomorphic Design vs.

68 of 123

Skeuomorphic vs. Flat Interfaces

One major topic of debate in contemporary IxD is: Skeuomorphic Design vs. Flat Design

69 of 123

Skeuomorphic vs. Flat Interfaces

70 of 123

Skeuomorphic

Skeuomorphic Design is an approach to interface design that uses existing visual or material references to help the user intuitively understand the functional possibilities that an interface offers �(the “affordances”).

71 of 123

Skeuomorphic

https://www.efaucets.com/detail.asp?product_id=lvx-4151-04

72 of 123

Skeuomorphic

For example, many early designs for electric light bulbs and lamps were made to visually resemble candles and candle holders…

https://www.efaucets.com/detail.asp?product_id=lvx-4151-04

73 of 123

Skeuomorphic

For example, many early designs for electric light bulbs and lamps were made to visually resemble candles and candle holders…to help people intuitively understand what these new objects were for: interior lighting, just like candles had been.

https://www.efaucets.com/detail.asp?product_id=lvx-4151-04

74 of 123

Skeuomorphic

75 of 123

Skeuomorphic

In digital interfaces, skeuomorphism has been a predominant design approach…

76 of 123

Skeuomorphic

Microsoft, Windows 98, 1998 [https://en.wikipedia.org/wiki/Windows_98]

In digital interfaces, skeuomorphism has been a predominant design approach, particularly starting in the 1990s, when many people were using computers for the very first time…

77 of 123

Skeuomorphic

Microsoft, Windows 98, 1998 [https://en.wikipedia.org/wiki/Windows_98]

Digital folders and files were designed to look like physical folders and pieces of paper…

78 of 123

Skeuomorphic

Microsoft, Windows 98, 1998 [https://en.wikipedia.org/wiki/Windows_98]

The system icon looks like the computer, keyboard, and display screen itself…

79 of 123

Skeuomorphic

Microsoft, Windows 98, 1998 [https://en.wikipedia.org/wiki/Windows_98]

And the place to delete folders and files (the recycle bin or trash) �looks like an actual �basket or trash can.

80 of 123

Skeuomorphic

Apple, Inc., iPhone OS1, 2007 [https://en.wikipedia.org/wiki/IPhone_OS_1]

81 of 123

Skeuomorphic

Skeuomorphism remained a dominant design approach into the 2000s…

Apple, Inc., iPhone OS1, 2007 [https://en.wikipedia.org/wiki/IPhone_OS_1]

82 of 123

Skeuomorphic

Skeuomorphism remained a dominant design approach into the 2000s… when many people were learning to use mobile �and touch interfaces �for the first time.

Apple, Inc., iPhone OS1, 2007 [https://en.wikipedia.org/wiki/IPhone_OS_1]

83 of 123

Skeuomorphic

Apple, Inc., iPhone OS1, 2007 [https://en.wikipedia.org/wiki/IPhone_OS_1]

84 of 123

Skeuomorphic

Specifically, let’s look at the “Notes” icon in iOS1…

Apple, Inc., iPhone OS1, 2007 [https://en.wikipedia.org/wiki/IPhone_OS_1]

85 of 123

Skeuomorphic

Specifically, let’s look at the “Notes” icon in iOS1…

Apple, Inc., iPhone OS1, 2007 [https://en.wikipedia.org/wiki/IPhone_OS_1]

86 of 123

Skeuomorphic

Apple, Inc., iPhone OS1 Notes icon, 2007 [https://s4827.pcdn.co/wp-content/uploads/2012/02/Notes.png]

87 of 123

Skeuomorphic

This icon is designed to look like a pad of paper…

Apple, Inc., iPhone OS1 Notes icon, 2007 [https://s4827.pcdn.co/wp-content/uploads/2012/02/Notes.png]

88 of 123

Skeuomorphic

This icon is designed to look like a pad of paper… �It has a brown portion at the top (meant to look like paper binding), a yellow background color beneath, cyan and red rule guides, and even some torn edges, like a real notepad.

Apple, Inc., iPhone OS1 Notes icon, 2007 [https://s4827.pcdn.co/wp-content/uploads/2012/02/Notes.png]

89 of 123

Skeuomorphic

Apple, Inc., iPhone OS1 Notes icon, 2007 [https://s4827.pcdn.co/wp-content/uploads/2012/02/Notes.png]

90 of 123

Skeuomorphic

Many designers in the late-2000s thought that this visual language (making digital icons that tried to look almost exactly like physical things)…

Apple, Inc., iPhone OS1 Notes icon, 2007 [https://s4827.pcdn.co/wp-content/uploads/2012/02/Notes.png]

91 of 123

Skeuomorphic

Many designers in the late-2000s thought that this visual language (making digital icons that tried to look almost exactly like physical things) was needlessly complicated, and that a more clean and simple approach would be better.

Apple, Inc., iPhone OS1 Notes icon, 2007 [https://s4827.pcdn.co/wp-content/uploads/2012/02/Notes.png]

92 of 123

Skeuomorphic vs. Flat Interfaces

93 of 123

Skeuomorphic vs. Flat Interfaces

94 of 123

Flat Design

Flat Design is an approach to interface design that has developed in opposition to skeuomorphic design…

95 of 123

Flat Design

Flat Design is an approach to interface design that has developed in opposition to skeuomorphic design. Flat design intentionally avoids using preexisting material or formal associations to communicate affordances.

96 of 123

Flat Design

97 of 123

Flat Design

Apple, Inc., iPhone iOS7 Notes icon, 2013 [https://support.apple.com/library/content/dam/edam/applecare/images/en_US/ios/ios11-notes-app-icon.png]

98 of 123

Flat Design

Apple, Inc., iPhone iOS7 Notes icon, 2013 [https://support.apple.com/library/content/dam/edam/applecare/images/en_US/ios/ios11-notes-app-icon.png]

Notice that the visual metaphor of the notepad �is still being used…

99 of 123

Flat Design

Apple, Inc., iPhone iOS7 Notes icon, 2013 [https://support.apple.com/library/content/dam/edam/applecare/images/en_US/ios/ios11-notes-app-icon.png]

Notice that the visual metaphor of the notepad �is still being used. But the graphic association to physical material is slightly less explicit…

100 of 123

Flat Design

Apple, Inc., iPhone iOS7 Notes icon, 2013 [https://support.apple.com/library/content/dam/edam/applecare/images/en_US/ios/ios11-notes-app-icon.png]

Notice that the visual metaphor of the notepad �is still being used. But the graphic association to physical material is slightly less explicit. �The iOS7 “Notes” icon communicates more as an abstract symbol, rather than as a literal object.

101 of 123

Flat Design

Apple, Inc., iPhone iOS7 Notes icon, 2013 [https://support.apple.com/library/content/dam/edam/applecare/images/en_US/ios/ios11-notes-app-icon.png]

102 of 123

Flat Design vs.

Apple, Inc., iPhone iOS7 Notes icon, 2013 [https://support.apple.com/library/content/dam/edam/applecare/images/en_US/ios/ios11-notes-app-icon.png]

103 of 123

Flat Design vs. Skeuomorphic

Apple, Inc., iPhone iOS7 Notes icon, 2013 [https://support.apple.com/library/content/dam/edam/applecare/images/en_US/ios/ios11-notes-app-icon.png]

Apple, Inc., iPhone OS1 Notes icon, 2007 [https://s4827.pcdn.co/wp-content/uploads/2012/02/Notes.png]

104 of 123

Flat Design vs. Skeuomorphic

Apple, Inc., iPhone iOS7 Notes icon, 2013 [https://support.apple.com/library/content/dam/edam/applecare/images/en_US/ios/ios11-notes-app-icon.png]

Apple, Inc., iPhone OS1 Notes icon, 2007 [https://s4827.pcdn.co/wp-content/uploads/2012/02/Notes.png]

While it’s perfectly reasonable for you, as a designer, to feel a preference for one of these two visual communication strategies…

105 of 123

Flat Design vs. Skeuomorphic

Apple, Inc., iPhone iOS7 Notes icon, 2013 [https://support.apple.com/library/content/dam/edam/applecare/images/en_US/ios/ios11-notes-app-icon.png]

Apple, Inc., iPhone OS1 Notes icon, 2007 [https://s4827.pcdn.co/wp-content/uploads/2012/02/Notes.png]

While it’s perfectly reasonable for you, as a designer, to feel a preference for one of these two visual communication strategies… Keep in mind that both Flat Design and Skeuomorphic Design are important approaches to consider…

106 of 123

Flat Design vs. Skeuomorphic

Apple, Inc., iPhone iOS7 Notes icon, 2013 [https://support.apple.com/library/content/dam/edam/applecare/images/en_US/ios/ios11-notes-app-icon.png]

Apple, Inc., iPhone OS1 Notes icon, 2007 [https://s4827.pcdn.co/wp-content/uploads/2012/02/Notes.png]

While it’s perfectly reasonable for you, as a designer, to feel a preference for one of these two visual communication strategies… Keep in mind that both Flat Design and Skeuomorphic Design are important approaches to consider… It would be overly simplistic to say that one is “right” and one is “wrong.”

107 of 123

Flat Design

108 of 123

Flat Design

Ironically, many of the principles of flat design have existed since the Graphical User Interface (GUI, pronounced “gooey”) was first developed.

109 of 123

Flat Design

Susan Kare, Apple Icons, 1984 [http://kare.com/apple-icons/]

Ironically, many of the principles of flat design have existed since the Graphical User Interface (GUI, pronounced “gooey”) was first developed.

110 of 123

Flat Design

Susan Kare, Apple Icons, 1984 [http://kare.com/apple-icons/]

111 of 123

Flat Design

Susan Kare, Apple Icons, 1984 [http://kare.com/apple-icons/]

Flat Design uses a simple visual language to clearly communicate interface affordances…

112 of 123

Flat Design

Flat Design uses a simple visual language to clearly communicate interface affordances. It avoids the use of texture patterns, gradients, or drop shadows.

Apple, Inc., iPhone iOS7, 2013 [https://en.wikipedia.org/wiki/IOS_7]

113 of 123

Flat Design

More often, it uses basic icons, color fields, and positive/negative space, rather than physical, material or formal associations…

Microsoft, Windows 8, 2012 [https://www.garnavillo.lib.ia.us/images/startscreen/image]

114 of 123

Flat Design

More often, it uses basic icons, color fields, and positive/negative space, rather than physical, material or formal associations, to suggest the uses and meanings that each button or display is presenting for the user.

Microsoft, Windows 8, 2012 [https://www.garnavillo.lib.ia.us/images/startscreen/image]

115 of 123

Skeuomorphic vs. Flat Interfaces

116 of 123

Skeuomorphic vs. Flat Interfaces

Remember that neither approach will necessarily �be suited for all projects.

117 of 123

Skeuomorphic vs. Flat Interfaces

Remember that neither approach will necessarily �be suited for all projects.

Some projects may call for a Skeuomorphic Design approach, and some projects may call for a Flat Design approach.

118 of 123

Skeuomorphic vs. Flat Interfaces

As you develop your design portfolio, think about these different philosophies and don’t be afraid to experiment!

119 of 123

Skeuomorphic vs. Flat Interfaces

As you develop your design portfolio, think about these different philosophies and don’t be afraid to experiment!

Remember that it’s boring to simply choose one design ideology and to apply it for every single project!

120 of 123

Skeuomorphic vs. Flat Interfaces

Taking risks and exploring different approaches is how design continues to evolve as a discipline, so make sure to question and critique these philosophies at each stage of your design process.

121 of 123

Discussion

Pagination vs. Multi-page

Persistent (Fixed) Navigation

Skeuomorphic vs. Flat Interfaces

122 of 123

Discussion

Pagination vs. Multi-page

Persistent (Fixed) Navigation

Skeuomorphic vs. Flat Interfaces

123 of 123

Web Design is an open-source learning resource.

Class material developed by Ian Besler.�

Licensed under a Creative Commons�Attribution-NonCommercial-ShareAlike�4.0 International License.