Research/new digital reading experiences - Revision history

Maytals: /* CONTENT */

2026-04-02T14:49:55Z

CONTENT

← Older revision		Revision as of 14:49, 2 April 2026
Line 287:		Line 287:
	Eventually, we decided to challenge the new format, by trying to juxtapose a classic novel with "TikTok” visualisation. The chosen text for this part of the research was ‘[https://msyou596211022.wordpress.com/wp-content/uploads/2017/12/ocr-100-years-of-solitude-1-101.pdf 100 Years of Solitude]’, a 1967 Nobel Prize winner novel by Gabriel García Márquez. For our prototype, we used the opening paragraph.		Eventually, we decided to challenge the new format, by trying to juxtapose a classic novel with "TikTok” visualisation. The chosen text for this part of the research was ‘[https://msyou596211022.wordpress.com/wp-content/uploads/2017/12/ocr-100-years-of-solitude-1-101.pdf 100 Years of Solitude]’, a 1967 Nobel Prize winner novel by Gabriel García Márquez. For our prototype, we used the opening paragraph.

	[[File:HundreadYearsBookCover.jpg\|~~350px~~]]		[[File:HundreadYearsBookCover.jpg\|250px]]

	<span id="design-behaviour-typography"></span>		<span id="design-behaviour-typography"></span>

Maytals: /* CONTENT */

2026-04-02T14:48:58Z

CONTENT

← Older revision		Revision as of 14:48, 2 April 2026
Line 286:		Line 286:

	Eventually, we decided to challenge the new format, by trying to juxtapose a classic novel with "TikTok” visualisation. The chosen text for this part of the research was ‘[https://msyou596211022.wordpress.com/wp-content/uploads/2017/12/ocr-100-years-of-solitude-1-101.pdf 100 Years of Solitude]’, a 1967 Nobel Prize winner novel by Gabriel García Márquez. For our prototype, we used the opening paragraph.		Eventually, we decided to challenge the new format, by trying to juxtapose a classic novel with "TikTok” visualisation. The chosen text for this part of the research was ‘[https://msyou596211022.wordpress.com/wp-content/uploads/2017/12/ocr-100-years-of-solitude-1-101.pdf 100 Years of Solitude]’, a 1967 Nobel Prize winner novel by Gabriel García Márquez. For our prototype, we used the opening paragraph.

			[[File:HundreadYearsBookCover.jpg\|350px]]

	<span id="design-behaviour-typography"></span>		<span id="design-behaviour-typography"></span>

Maytals: /* The Assignment */

2026-04-02T14:46:06Z

The Assignment

← Older revision		Revision as of 14:46, 2 April 2026
Line 237:		Line 237:
	The students were investigating, experimenting and prototyping for a week, guided by us throughout the whole process.		The students were investigating, experimenting and prototyping for a week, guided by us throughout the whole process.

	Results<br />		'''Results'''<br />
	The outcomes were wonderfully diverse. Some focused on clarity and readability, others on tone and personality. Every interpretation highlighted a new way of thinking about text on a small screen. We laughed and learned, and so did the students.<br />		The outcomes were wonderfully diverse. Some focused on clarity and readability, others on tone and personality. Every interpretation highlighted a new way of thinking about text on a small screen. We laughed and learned, and so did the students.<br />
	<br />		<br />
	Looking back, we were struck by what resonated most, for the students and for us. Their reading habits and creative choices were surprising and inspiring, showing us how Gen Z interacts with text. This Elective workshop became the starting point for the next year of our research, setting the stage for deeper exploration into digital reading, and how text can truly adapt to the ways people consume it today.		Looking back, we were struck by what resonated most, for the students and for us. Their reading habits and creative choices were surprising and inspiring, showing us how Gen Z interacts with text. This Elective workshop became the starting point for the next year of our research, setting the stage for deeper exploration into digital reading, and how text can truly adapt to the ways people consume it today.<br /><br />

			''click on the images to see students' work from the first Elective''

	[[File:Daniela_Hmelnicka_Prototype_video.gif\|250px\|link=https://hrnl.sharepoint.com/sites/WdK-ElectiveDigitalTypography/_layouts/15/stream.aspx?id=%2Fsites%2FWdK%2DElectiveDigitalTypography%2FShared%20Documents%2FGeneral%2FFINAL%20PRESENTATION%2FDaniela%5FHmelnicka%5FPrototype%5Fvideo%2Emp4&referrer=StreamWebApp%2EWeb&referrerScenario=AddressBarCopied%2Eview%2E5c85fe32%2D845e%2D4e3d%2Da5fd%2Db7780318149a]] [[File:OmidNemalhabib_Salt1.jpg\|250px\|link=https://hrnl.sharepoint.com/sites/WdK-ElectiveDigitalTypography/_layouts/15/stream.aspx?id=%2Fsites%2FWdK%2DElectiveDigitalTypography%2FShared%20Documents%2FGeneral%2FFINAL%20PRESENTATION%2FOmid%2FScreen%20Recording%202024%2D04%2D08%20at%2019%2E00%2E46%2Emov&referrer=StreamWebApp%2EWeb&referrerScenario=AddressBarCopied%2Eview%2Ed005a4a2%2D919c%2D45c7%2D89c1%2D53b8a6cf4ba3]] [[File:RenskeElectiveRec.gif\|250px\|link=https://www.figma.com/proto/anlIJ2RnDIl5oVLYFPVZBe/The-man?node-id=1-102&t=vE67edgwbfSN2r36-0&scaling=scale-down&page-id=0%3A1&starting-point-node-id=1%3A102&show-proto-sidebar=1]] [[File:Anastasia_Trishankova_screen recording_figma.gif\|400px\|https://hrnl.sharepoint.com/sites/WdK-ElectiveDigitalTypography/_layouts/15/stream.aspx?id=%2Fsites%2FWdK%2DElectiveDigitalTypography%2FShared%20Documents%2FGeneral%2FFINAL%20PRESENTATION%2FAnastasia%20Trishankova%2FAnastasia%5FTrishankova%5Fscreen%20recording%5Ffigma%2Emov&referrer=StreamWebApp%2EWeb&referrerScenario=AddressBarCopied%2Eview%2Ed31adcc1%2D69c7%2D4b54%2Db94a%2Da0a48339d184]]		[[File:Daniela_Hmelnicka_Prototype_video.gif\|250px\|link=https://hrnl.sharepoint.com/sites/WdK-ElectiveDigitalTypography/_layouts/15/stream.aspx?id=%2Fsites%2FWdK%2DElectiveDigitalTypography%2FShared%20Documents%2FGeneral%2FFINAL%20PRESENTATION%2FDaniela%5FHmelnicka%5FPrototype%5Fvideo%2Emp4&referrer=StreamWebApp%2EWeb&referrerScenario=AddressBarCopied%2Eview%2E5c85fe32%2D845e%2D4e3d%2Da5fd%2Db7780318149a]] [[File:OmidNemalhabib_Salt1.jpg\|250px\|link=https://hrnl.sharepoint.com/sites/WdK-ElectiveDigitalTypography/_layouts/15/stream.aspx?id=%2Fsites%2FWdK%2DElectiveDigitalTypography%2FShared%20Documents%2FGeneral%2FFINAL%20PRESENTATION%2FOmid%2FScreen%20Recording%202024%2D04%2D08%20at%2019%2E00%2E46%2Emov&referrer=StreamWebApp%2EWeb&referrerScenario=AddressBarCopied%2Eview%2Ed005a4a2%2D919c%2D45c7%2D89c1%2D53b8a6cf4ba3]] [[File:RenskeElectiveRec.gif\|250px\|link=https://www.figma.com/proto/anlIJ2RnDIl5oVLYFPVZBe/The-man?node-id=1-102&t=vE67edgwbfSN2r36-0&scaling=scale-down&page-id=0%3A1&starting-point-node-id=1%3A102&show-proto-sidebar=1]] [[File:Anastasia_Trishankova_screen recording_figma.gif\|400px\|https://hrnl.sharepoint.com/sites/WdK-ElectiveDigitalTypography/_layouts/15/stream.aspx?id=%2Fsites%2FWdK%2DElectiveDigitalTypography%2FShared%20Documents%2FGeneral%2FFINAL%20PRESENTATION%2FAnastasia%20Trishankova%2FAnastasia%5FTrishankova%5Fscreen%20recording%5Ffigma%2Emov&referrer=StreamWebApp%2EWeb&referrerScenario=AddressBarCopied%2Eview%2Ed31adcc1%2D69c7%2D4b54%2Db94a%2Da0a48339d184]]

Maytals: /* The Assignment */

2026-04-02T14:45:07Z

The Assignment

← Older revision		Revision as of 14:45, 2 April 2026
Line 242:		Line 242:
	Looking back, we were struck by what resonated most, for the students and for us. Their reading habits and creative choices were surprising and inspiring, showing us how Gen Z interacts with text. This Elective workshop became the starting point for the next year of our research, setting the stage for deeper exploration into digital reading, and how text can truly adapt to the ways people consume it today.		Looking back, we were struck by what resonated most, for the students and for us. Their reading habits and creative choices were surprising and inspiring, showing us how Gen Z interacts with text. This Elective workshop became the starting point for the next year of our research, setting the stage for deeper exploration into digital reading, and how text can truly adapt to the ways people consume it today.

	[[File:Daniela_Hmelnicka_Prototype_video.gif\|250px]] [[File:OmidNemalhabib_Salt1.jpg\|250px]] [[File:RenskeElectiveRec.gif\|250px]] [[File:Anastasia_Trishankova_screen recording_figma.gif\|400px]]		[[File:Daniela_Hmelnicka_Prototype_video.gif\|250px\|link=https://hrnl.sharepoint.com/sites/WdK-ElectiveDigitalTypography/_layouts/15/stream.aspx?id=%2Fsites%2FWdK%2DElectiveDigitalTypography%2FShared%20Documents%2FGeneral%2FFINAL%20PRESENTATION%2FDaniela%5FHmelnicka%5FPrototype%5Fvideo%2Emp4&referrer=StreamWebApp%2EWeb&referrerScenario=AddressBarCopied%2Eview%2E5c85fe32%2D845e%2D4e3d%2Da5fd%2Db7780318149a]] [[File:OmidNemalhabib_Salt1.jpg\|250px\|link=https://hrnl.sharepoint.com/sites/WdK-ElectiveDigitalTypography/_layouts/15/stream.aspx?id=%2Fsites%2FWdK%2DElectiveDigitalTypography%2FShared%20Documents%2FGeneral%2FFINAL%20PRESENTATION%2FOmid%2FScreen%20Recording%202024%2D04%2D08%20at%2019%2E00%2E46%2Emov&referrer=StreamWebApp%2EWeb&referrerScenario=AddressBarCopied%2Eview%2Ed005a4a2%2D919c%2D45c7%2D89c1%2D53b8a6cf4ba3]] [[File:RenskeElectiveRec.gif\|250px\|link=https://www.figma.com/proto/anlIJ2RnDIl5oVLYFPVZBe/The-man?node-id=1-102&t=vE67edgwbfSN2r36-0&scaling=scale-down&page-id=0%3A1&starting-point-node-id=1%3A102&show-proto-sidebar=1]] [[File:Anastasia_Trishankova_screen recording_figma.gif\|400px\|https://hrnl.sharepoint.com/sites/WdK-ElectiveDigitalTypography/_layouts/15/stream.aspx?id=%2Fsites%2FWdK%2DElectiveDigitalTypography%2FShared%20Documents%2FGeneral%2FFINAL%20PRESENTATION%2FAnastasia%20Trishankova%2FAnastasia%5FTrishankova%5Fscreen%20recording%5Ffigma%2Emov&referrer=StreamWebApp%2EWeb&referrerScenario=AddressBarCopied%2Eview%2Ed31adcc1%2D69c7%2D4b54%2Db94a%2Da0a48339d184]]

	<span id="conclusions"></span>		<span id="conclusions"></span>

Maytals: /* The Assignment */

2026-04-02T14:39:22Z

The Assignment

← Older revision		Revision as of 14:39, 2 April 2026
Line 242:		Line 242:
	Looking back, we were struck by what resonated most, for the students and for us. Their reading habits and creative choices were surprising and inspiring, showing us how Gen Z interacts with text. This Elective workshop became the starting point for the next year of our research, setting the stage for deeper exploration into digital reading, and how text can truly adapt to the ways people consume it today.		Looking back, we were struck by what resonated most, for the students and for us. Their reading habits and creative choices were surprising and inspiring, showing us how Gen Z interacts with text. This Elective workshop became the starting point for the next year of our research, setting the stage for deeper exploration into digital reading, and how text can truly adapt to the ways people consume it today.

	[[File:Daniela_Hmelnicka_Prototype_video.gif\|250px]] [[File:OmidNemalhabib_Salt1.~~png~~\|250px]] [[File:RenskeElectiveRec.gif\|250px]] [[File:Anastasia_Trishankova_screen recording_figma.gif\|400px]]		[[File:Daniela_Hmelnicka_Prototype_video.gif\|250px]] [[File:OmidNemalhabib_Salt1.jpg\|250px]] [[File:RenskeElectiveRec.gif\|250px]] [[File:Anastasia_Trishankova_screen recording_figma.gif\|400px]]

	<span id="conclusions"></span>		<span id="conclusions"></span>

Maytals: /* The Assignment */

2026-04-02T14:37:16Z

The Assignment

← Older revision		Revision as of 14:37, 2 April 2026
Line 242:		Line 242:
	Looking back, we were struck by what resonated most, for the students and for us. Their reading habits and creative choices were surprising and inspiring, showing us how Gen Z interacts with text. This Elective workshop became the starting point for the next year of our research, setting the stage for deeper exploration into digital reading, and how text can truly adapt to the ways people consume it today.		Looking back, we were struck by what resonated most, for the students and for us. Their reading habits and creative choices were surprising and inspiring, showing us how Gen Z interacts with text. This Elective workshop became the starting point for the next year of our research, setting the stage for deeper exploration into digital reading, and how text can truly adapt to the ways people consume it today.

	[[File:Daniela_Hmelnicka_Prototype_video.gif\|250px]] [[File:~~OmidNemalhabib_Salt~~.png\|250px]] [[File:RenskeElectiveRec.gif\|250px]] [[File:Anastasia_Trishankova_screen recording_figma.gif\|400px]]		[[File:Daniela_Hmelnicka_Prototype_video.gif\|250px]] [[File:OmidNemalhabib_Salt1.png\|250px]] [[File:RenskeElectiveRec.gif\|250px]] [[File:Anastasia_Trishankova_screen recording_figma.gif\|400px]]

	<span id="conclusions"></span>		<span id="conclusions"></span>

Maytals: /* The Assignment */

2026-04-02T14:34:48Z

The Assignment

← Older revision		Revision as of 14:34, 2 April 2026
Line 242:		Line 242:
	Looking back, we were struck by what resonated most, for the students and for us. Their reading habits and creative choices were surprising and inspiring, showing us how Gen Z interacts with text. This Elective workshop became the starting point for the next year of our research, setting the stage for deeper exploration into digital reading, and how text can truly adapt to the ways people consume it today.		Looking back, we were struck by what resonated most, for the students and for us. Their reading habits and creative choices were surprising and inspiring, showing us how Gen Z interacts with text. This Elective workshop became the starting point for the next year of our research, setting the stage for deeper exploration into digital reading, and how text can truly adapt to the ways people consume it today.

	[[File:Daniela_Hmelnicka_Prototype_video.gif\|250px]] [[File:OmidNemalhabib_Salt.~~gif~~\|250px]] [[File:RenskeElectiveRec.gif\|250px]] [[File:Anastasia_Trishankova_screen recording_figma.gif\|400px]]		[[File:Daniela_Hmelnicka_Prototype_video.gif\|250px]] [[File:OmidNemalhabib_Salt.png\|250px]] [[File:RenskeElectiveRec.gif\|250px]] [[File:Anastasia_Trishankova_screen recording_figma.gif\|400px]]

	<span id="conclusions"></span>		<span id="conclusions"></span>

Maytals: /* */

2026-04-02T14:29:11Z

← Older revision		Revision as of 14:29, 2 April 2026
Line 151:		Line 151:
	=== ===		=== ===

	''Exploring variable fonts''<br />		'''Exploring variable fonts'''<br />
	We started experimenting with variable fonts. A '''variable font''' is a single font file that can behave like many fonts at once. Instead of having separate files for “bold,” “italic,” “light,” etc., a variable font contains '''continuous axes''' (like weight, width, slant, or optical size) that can be adjusted dynamically. This means you can smoothly tweak the font’s appearance anywhere along these axes.		We started experimenting with variable fonts. A '''variable font''' is a single font file that can behave like many fonts at once. Instead of having separate files for “bold,” “italic,” “light,” etc., a variable font contains '''continuous axes''' (like weight, width, slant, or optical size) that can be adjusted dynamically. This means you can smoothly tweak the font’s appearance anywhere along these axes.

Maytals: /* Visualizing text functions */

2026-04-02T14:28:43Z

Visualizing text functions

← Older revision		Revision as of 14:28, 2 April 2026
Line 140:		Line 140:
	To make these interactions intuitive, familiar visual conventions are used to signal possible actions. Clickable elements are often indicated through underlining, background highlights, frames, or subtle animations such as blinking. Links commonly adopt the recognisable blue hyperlink style, while scroll-based interactions may be suggested through arrows or content emerging into view. Closing actions are typically communicated through universally recognised symbols such as an “X” or by allowing users to tap or click outside a layered interface element.		To make these interactions intuitive, familiar visual conventions are used to signal possible actions. Clickable elements are often indicated through underlining, background highlights, frames, or subtle animations such as blinking. Links commonly adopt the recognisable blue hyperlink style, while scroll-based interactions may be suggested through arrows or content emerging into view. Closing actions are typically communicated through universally recognised symbols such as an “X” or by allowing users to tap or click outside a layered interface element.

	[[File:codepen_marcus_hover.gif\|250px]]		[[File:codepen_marcus_hover.gif\|250px\|thumb\|Hover as a visual guide for interaction]]

	<span id="typography"></span>		<span id="typography"></span>

Maytals: /* Visualizing text functions */

2026-04-02T14:27:18Z

Visualizing text functions

← Older revision		Revision as of 14:27, 2 April 2026
Line 135:		Line 135:
	The way a text is visualised is closely connected to how it behaves and how readers interact with it. Interactive behaviours can be triggered through actions such as clicking, scrolling, hovering, or timing-based events. A click may open content in a new window or tab, reveal a new layer, expand an accordion, or cause elements to appear or change. Scrolling can be used to progressively reveal additional information or, conversely, to reduce or hide content, while timed interactions allow elements to appear or transform automatically. Hover interactions, while not applicable to mobile devices, can further support changes in appearance and provide additional cues on desktop interfaces.		The way a text is visualised is closely connected to how it behaves and how readers interact with it. Interactive behaviours can be triggered through actions such as clicking, scrolling, hovering, or timing-based events. A click may open content in a new window or tab, reveal a new layer, expand an accordion, or cause elements to appear or change. Scrolling can be used to progressively reveal additional information or, conversely, to reduce or hide content, while timed interactions allow elements to appear or transform automatically. Hover interactions, while not applicable to mobile devices, can further support changes in appearance and provide additional cues on desktop interfaces.

	[[File:opzet_Research_design.jpg\|~~230px~~]] [[File:opzet_Research_design2.jpg\|~~230px~~]][[File:opzet_Research_design4.jpg\|~~230px~~]]		[[File:opzet_Research_design.jpg\|250px]] [[File:opzet_Research_design2.jpg\|250px]][[File:opzet_Research_design4.jpg\|250px]]
	[[File:opzet_Research_design7.jpg\|~~230px~~]] [[File:opzet_Research_design12.jpg\|~~230px~~]] [[File:opzet_Research_design14.jpg\|~~230px~~]]		[[File:opzet_Research_design7.jpg\|250px]] [[File:opzet_Research_design12.jpg\|250px]] [[File:opzet_Research_design14.jpg\|250px]]

	To make these interactions intuitive, familiar visual conventions are used to signal possible actions. Clickable elements are often indicated through underlining, background highlights, frames, or subtle animations such as blinking. Links commonly adopt the recognisable blue hyperlink style, while scroll-based interactions may be suggested through arrows or content emerging into view. Closing actions are typically communicated through universally recognised symbols such as an “X” or by allowing users to tap or click outside a layered interface element.		To make these interactions intuitive, familiar visual conventions are used to signal possible actions. Clickable elements are often indicated through underlining, background highlights, frames, or subtle animations such as blinking. Links commonly adopt the recognisable blue hyperlink style, while scroll-based interactions may be suggested through arrows or content emerging into view. Closing actions are typically communicated through universally recognised symbols such as an “X” or by allowing users to tap or click outside a layered interface element.