• Jay Liu
Visual Essay >
Visual Essay Test Page
Shows every Visual Essay module
  1. This Is Only a Test (Page)
  2. Inline Text Styles
  3. Text Blocks
  4. Headers
  5. Lists
  6. Images
  7. Tables
  8. Figures
  9. Rich Links
  10. Profile Cards
  11. List Section
  12. Gallery Section

Visual Essay Test Page

Shows every Visual Essay module

Associated project: Visual Essay
A description of the article would go here. Yes, this is filler text, and you'll see much more in this test page.

March 26, 2021

Visual Essay Test Page

This Is Only a Test (Page)


In case you’re expecting this to be a page with actual, meaningful content, please know that it is a page that contains all the visual elements you’ll see in what I’m calling the Visual Essay.

Text was generated with the help of Boom’s text generator .

Inline Text Styles

Inline styles such as bold, italics

A regular paragraph with keywords emphasized

In 1950, the first computer-driven display was attached to MIT’s Whirlwind I computer to generate simple pictures. This was followed by MIT’s TX-0 and TX-2, interactive computing which increased interest in computer graphics during the late 1950s. In 1962, Ivan Sutherland invented Sketchpad, an innovative program that influenced alternative forms of interaction with computers.

Text Blocks

Blockquotes, Callouts

Quote

Introduce quote like this: The concept of the design cycle is understood as a circular time structure,

"In 1950, the first computer-driven display was attached to MIT’s Whirlwind I computer to generate simple pictures. This was followed by MIT’s TX-0 and TX-2, interactive computing which increased interest in computer graphics during the late 1950s. In 1962, Ivan Sutherland invented Sketchpad, an innovative program that influenced alternative forms of interaction with computers."

Some really smart person

Callout

Modern web graphics can be made with software such as Adobe Photoshop, the GIMP, or Corel Paint Shop Pro. Users of Microsoft Windows have MS Paint, which many find to be lacking in features. This is because MS Paint is a drawing package and not a graphics package.

Callout with Header

Modern Web Graphics

Modern web graphics can be made with software such as Adobe Photoshop, the GIMP, or Corel Paint Shop Pro. Users of Microsoft Windows have MS Paint, which many find to be lacking in features. This is because MS Paint is a drawing package and not a graphics package.

Headers

Section with headers

(Headers 1 and 2 are already used for the page and sections, respectively.)

Header 3

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Header 4

“Lorem ipsum dolor sit amet”, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Header 5

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Header 6

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Lists


Ordered List Header

  1. Framework-oriented
    • Framework-oriented
    • For assembly
    • For behaviour change
  2. For assembly
    • For manufacturability
  3. For behaviour change
  4. For manufacturability
  5. For Six Sigma

Unordered List Header

  • Framework-oriented
    1. Framework-oriented
    2. For assembly
    3. For behaviour change
  • For assembly
    1. For manufacturability
  • For behaviour change
  • For manufacturability
  • For Six Sigma

Images

Section testing interactions between images and paragraph text.

Smaller Image

Educational animation is an important emerging field of graphics. Animated graphics have obvious advantages over static graphics when explaining subject matter that changes over time.

Caption for a regular image after paragraph
Caption for a regular image after paragraph

Larger Image

Educational animation is an important emerging field of graphics. Animated graphics have obvious advantages over static graphics when explaining subject matter that changes over time.

Caption for a Large Image
Caption for a Large Image

Animated Image

Educational animation is an important emerging field of graphics. Animated graphics have obvious advantages over static graphics when explaining subject matter that changes over time.

CaptioN for an animated image. The styling of this should look exactly the same as above

CaptioN for an animated image. The styling of this should look exactly the same as above

Animated Larger Image

CaPtion for a large animated image. The styling of this should look exactly the same as above

CaPtion for a large animated image. The styling of this should look exactly the same as above

Tables

Section testing the interactions between tables and paragraph text

Big Table

Modern web graphics can be made with software such as Adobe Photoshop, the GIMP, or Corel Paint Shop Pro. Users of Microsoft Windows have MS Paint, which many find to be lacking in features. This is because MS Paint is a drawing package and not a graphics package.

Modern web graphics can be made with software such as Adobe Photoshop, the GIMP, or Corel Paint Shop Pro. Users of Microsoft Windows have MS Paint, which many find to be lacking in features. This is because MS Paint is a drawing package and not a graphics package.

Small Table

Modern web graphics can be made with software such as Adobe Photoshop, the GIMP, or Corel Paint Shop Pro. Users of Microsoft Windows have MS Paint, which many find to be lacking in features. This is because MS Paint is a drawing package and not a graphics package.

YearJS FrameworkCSSBuild
2013Angular 1SCSSGrunt
2014
2015SASSBroccoli
2016
2017ReactJSSCreate React App (Because I’m too scared/lazy to learn Webpack)
2018
2019
2020SvelteSCSS for Svelte, ThemeUI/Emotion for ReactRollup (Meh, I still don’t actually know Webpack)

Modern web graphics can be made with software such as Adobe Photoshop, the GIMP, or Corel Paint Shop Pro. Users of Microsoft Windows have MS Paint, which many find to be lacking in features. This is because MS Paint is a drawing package and not a graphics package.

Comparison Table

Modern web graphics can be made with software such as Adobe Photoshop, the GIMP, or Corel Paint Shop Pro. Users of Microsoft Windows have MS Paint, which many find to be lacking in features. This is because MS Paint is a drawing package and not a graphics package.

An “Engineering Interface” …A Humane Interface …
InputsLists out all inputs on the screen.Realizes some will be used far more than others (Pareto Principle), leverages smart defaults, templates, and other aids.
OutputsPuts it all out there.Imposes information hierarchy, starting with most salient, then progressively disclosing detail.
Carefully manages user attention, as not to dilute it.

Modern web graphics can be made with software such as Adobe Photoshop, the GIMP, or Corel Paint Shop Pro. Users of Microsoft Windows have MS Paint, which many find to be lacking in features. This is because MS Paint is a drawing package and not a graphics package.

Figures

Section testing out Figures

Graphics are heavily used in textbooks, especially those concerning subjects such as geography, science, and mathematics

Table Inside Figure

Graphics are heavily used in textbooks, especially those concerning subjects such as geography, science, and mathematics

Table Inside Figure

Graphics are heavily used in textbooks, especially those concerning subjects such as geography, science, and mathematics

Image Inside Figure

Image Inside Figure
Shows links more visually

Call to action to check out related content. Title is auto-populated based on metadata.

Iteration 4

Previous iterations and design process

Iteration 4

Call to action to check out related external content.

External Link: Folio Forge App (Beta) 

Folio Forge is currently in open beta.

Profile Cards

Display profiles with more emphasis and salience

Emmeline, Experienced Notebook Maker
Emmeline, Experienced Notebook Maker
Persona

Emmeline

Expert Notebook Maker
  1. Heavy user of notebooks and sketchbooks: She writes and draws constantly and prefers paper over digital.
  2. DIY-er: She likes making notebooks rather than buying them, using home equipment and materials.
  3. Customizer: She is pretty particular about the notebooks she uses and is willing to make any tweaks necessary.
  4. Familiar with bookbinding terminology, having done this as a hobby for nearly a year.

List Section

Contains a collection of sequential, smaller items

    In the reflection-in-action paradigm, designers alternate between “framing”, “making moves”, and “evaluating moves”. “Framing” refers to conceptualizing the problem, i.e., defining goals and objectives. A “move” is a tentative design decision. The evaluation process may lead to further moves in the design.

  1. Service Design

    The rational model is based on a rationalist philosophy According to the rationalist philosophy, design is informed by research and knowledge in a predictable and controlled manner.

  2. Editorial Cartoon

    Educational animation is an important emerging field of graphics. Animated graphics have obvious advantages over static graphics when explaining subject matter that changes over time.

  3. Making a Reader Laugh or Smile

    The Oxford Illustrated Dictionary uses graphics and technical illustrations to make reading material more interesting and easier to understand. In an encyclopedia, graphics are used to illustrate concepts and show examples of the particular topic being discussed.

Contains a collection of items that have a visual attached to them

    In order for a graphic to function effectively as an educational aid, the learner must be able to interpret it successfully. This interpretative capacity is one aspect of graphicacy.

  • Visualization (graphics)


    Later in 2019, Valve released the Valve Index.

    Computer graphics are often used in the majority of new feature films, especially those with a large budget. Films that heavily use computer graphics include The Lord of the Rings film trilogy, the Harry Potter films, Spider-Man and War of the Worlds.

  • Stage/set Lighting Design


    Some new features include a sharper screen, reduced price, and increased performance.

    Computer graphics are often used in the majority of new feature films, especially those with a large budget.

  • Algorithm Design


    Films that heavily use computer graphics include The Lord of the Rings film trilogy, the Harry Potter films, Spider-Man and War of the Worlds.

    Computer graphics are often used in the majority of new feature films, especially those with a large budget. Films that heavily use computer graphics include The Lord of the Rings film trilogy, the Harry Potter films, Spider-Man and War of the Worlds.


Jay Liu
Written by Jay Liu, experience designer.
https://jayliu.design
© 2022, Jay Liu