Stylogeny combining Flash Vector Cartoon × Flash-Era Web Design

Try

Style combination · Contrasts

Flash Vector Cartoon × Flash-Era Web Design

Made in the same tool at the same time, but the cartoon is bright, loose and character-led, where the portfolio site is dark, gridded and abstract.

From the research on Flash-Era Web Design (Flash Portfolio Sites)

Mix them and make something Flash Vector Cartoon Flash-Era Web Design

YAY!Flash Vector Cartoon × Flash-Era Web Design
A sample layout drawn from the recipe: shapes from Flash Vector Cartoon, their arrangement from Flash-Era Web Design, the finish from Flash-Era Web Design. Not a real work, and not an image of either style.

01

What each style brings

Each part of the design comes from the style with the stronger say in it, and each style gives at least two.

Flash Vector Cartoon (Newgrounds-Era Web Animation) Flash-Era Web Design (Flash Portfolio Sites)

Type from Flash-Era Web Design
Colour from Flash Vector Cartoon
Form from Flash Vector Cartoon
Composition from Flash-Era Web Design
Surface from Flash-Era Web Design

02

The type

Open fonts standing in for each style’s own type, which is often hand-drawn or commercial.

Display · Flash-Era Web Design

Yay!

Silkscreen, standing in for Silkscreen (Jason Kottke), a free pixel face for 'extremely small graphical display type', meant for nav bars, menus and captions at 8 pt multiples with anti-aliasing off

Text · Flash Vector Cartoon

Short cartoons drawn and animated in Macromedia Flash for the browser and passed around portals such as Newgrounds. Characters are closed vector shapes with flat colour fills and an even stroke, stored as reusable symbols and moved by computer tweening like cut-out puppets, with looping walk cycles and a few mouth shapes. The tone is absurd, ironic or cute-gory, often interactive. By 2002 it was on television (Home Movies, then ¡Mucha Lucha! on US children's TV). Its portal heyday ran to about 2010, and it faded once Flash Player was retired at the end of 2020.

Zen Maru Gothic; Flash Vector Cartoon used Hand-drawn vector title lettering made with Flash's own pen and brush tools and animated with the cartoon, as on title cards and series logos and Embedded TrueType display faces rendered smooth by the Flash Player

03

The colours

The ground and leading colours come from Flash Vector Cartoon, with a counter-accent from Flash-Era Web Design. The ink reads on the ground at 4.5:1 or more.

Flash Vector Cartoon (Newgrounds-Era Web Animation) Flash-Era Web Design (Flash Portfolio Sites)

  • #000000 ground · 36%
  • #ffffff ink · 14%
  • #ff3333 accent · 18%
  • #ff6a00 accent · 14%
  • #66cc33 accent · 10%
  • #9bd31c accent · 8%

As CSS

:root {
  --ground: #000000;
  --ink: #ffffff;
  --accent-1: #ff3333;
  --accent-2: #ff6a00;
  --accent-3: #66cc33;
  --accent-4: #9bd31c;
  --font-display: "Silkscreen", monospace;
  --font-text: "Zen Maru Gothic", sans-serif;
}

04

The two styles

A brightly coloured comic shows a spiky-haired child taking a giant chocolate-chip cookie from a jar and running away while an angry chef chases him. A large final panel shows the child fleeing with a bitten cookie above the words “COOKIE RUN.” 1997–2020 · North America, Western Europe, East Asia, Global / networked Flash Vector Cartoon (Newgrounds-Era Web Animation) Short cartoons drawn and animated in Macromedia Flash for the browser and passed around portals such as Newgrounds. Characters are closed vector shapes with flat colour fills and an even stroke, stored as reusable symbols and moved by computer tweening like cut-out puppets, with looping walk cycles and a few mouth shapes. The tone is absurd, ironic or cute-gory, often interactive. By 2002 it was on television (Home Movies, then ¡Mucha Lucha! on US children's TV). Its portal heyday ran to about 2010, and it faded once Flash Player was retired at the end of 2020. A dark science-fiction poster headed “NEXUS” centers on a towering metallic structure wrapped by a circular track, with glowing orange and lime-green components. Framed technical panels surrounding it show a wireframe globe, orbital diagrams, a futuristic corridor, moons, modular parts, charts, and a cityscape facing an orange sun. 1997–2010 · Global / networked, North America, Western Europe, East Asia Flash-Era Web Design (Flash Portfolio Sites) Websites built as one designed Flash movie (a plug-in in the browser) rather than as HTML pages: a fixed-size stage, often dark, entered through a preloader and an animated intro with sound. Inside, navigation is a console of framed panels on a visible technical grid, with hairline rules, numbered sections and readouts, tiny aliased pixel fonts in tracked capitals, a grey or navy key lit by one hot accent, metallic gradients and 3D renders. Menus zoom, slide and react to the mouse. Its experimental wing, from praystation to yugop.com's white page, made the site a field for code-driven play.

05

More combinations

With Flash Vector Cartoon

With Flash-Era Web Design

Every style combination