Brand

Visual language

The visual language of NI-APH courses has made a long way since 2017 when it took place for the first time.

APH 2017
APH 2018
APH 2019
APH 2020

In 2017, the design consisted of a simple logo made of APH letters and a striped effect over all images. 2018 brought several changes to the design - slides were readjusted from 4:3 to 16:9 ratio, colors were selected with more care and the striped effect was smoothened. In 2019, all slides were rewritten from PowerPoint into HTML which introduced new opportunities - interactive content, CSS animations and themes. The logo could benefit from a new look, yet it still contained letters from the Czech title "Architektura Počítačových Her", which wasn't very convenient for a symbol. Moreover, slides were wrapped in fancy colored frames and titles were animated with a slight touch of chromatic aberration. Along with tech-like shiny backgrounds, the concept itself looked cool, but it couldn't do much justice the topic as a whole. Furthermore, these eye-candies found themselves distracting when one needed to study the content.

Ultimately, in 2020, a full-fledged brand template was introduced - color palette, a logo that has a good ring to the course itself, and unique visuals, including a grid-like pattern for the slides, suggesting graph paper for architectural sketches. All fancy animations from 2019 have receded in a blaze of simplicity and minimalism.

Logo

The APH logo is a graphic representation of the subject and the primary graphic element of its identity. The symbol is represented by a stylized microchip with joypad buttons on its surface - directional buttons on the left, ABXY buttons on the right, rotated by 90 degrees counter-clockwise, and tiny start and select buttons in the middle. The yellow Y button is cut out from the left, at angle of 90 degrees, which turns the button into a silhouette of Pac-Man, heading into two tiny buttons in the middle, indicating pac-dots.

The logo represents Architecture of Computer Games, where Pac-Man points out that the content is not solely technical.

APH logo design
APH colored logo

Symbol

The symbol is represented by ABXY buttons that appear on the right side of the logo. It is a detachable part of the logo and can be used in specific cases, such as favicons.

APH symbol

Logo Variations

Buttons can have the same color as the joypad (yet Pac-Man must be brighter than the rest), and the cover can be removed. In case of a solid dark background, logo can be used without the cover. If the background has other distracting elements that could interfere with the readability of the logo, the default version should be used instead.

Default
Black and White
Without cover

Colors

APH palette is bright and consists of several colors that helps the course to be unique, modern and cheerful.

Primary colors

  • primary colors are lemon yellow, emerald green, royal blue, and tomato red
  • these colors are to be used mainly for highlighting
  • lemon yellow represents Pac-Man, the first game that introduced a character
  • emerald green represents grass of open worlds worthy exploration from Zelda and Pokémon séries
  • royal blue is a color of sky from the very first Super Mario game
  • tomato red suggests lava from NES games, chambers of hell from Doom and desert plains from the first game of Dune
#E9E56F
Lemon
#47D58A
Emerald
#6F8CE9
Royal
#CF2F25
Tomato

Secondary colors

  • secondary colors extend the pallete by modest manhattan color, distinctive and brightful aqua color, and pleasant matte azure
#F6C9A0
Manhattan
#6F8CE9
Aqua
#CF2F25
Azure

Light and dark shades

  • every primary and secondary color has got their own light and dark variant
#FF867F
Tomato Light
#CF2F25
Tomato
#7D0600
Tomato Dark
#FFF2E6
Manhattan Light
#F6C9A0
Manhattan
#A56B36
Manhattan Dark
#FFD179
Goldenrod Light
#FBB227
Goldenrod
#A96F00
Goldenrod Dark
#FFFDC8
Lemon Light
#E9E56F
Lemon
#A19D22
Lemon Dark
#A0F1C6
Emerald Light
#47D58A
Emerald
#009244
Emerald Dark
#86ECEC
Aqua Light
#30D2D5
Aqua
#00A0A0
Aqua Dark
#7893EA
Azure Light
#2C57DF
Azure
#0A2C9D
Azure Dark
#C9D4FB
Royal Light
#6F8CE9
Royal
#4D6FDC
Royal Dark

Contrasting colors

  • midnight should only be used for backgrounds
  • white color is a text color for labels. Default text color is Rhino 20
#03060C
Midnight dark
#121824
Midnight
#3A414E
Midnight light
#FFFFFF
White

Shades of Grey

  • shades of Rhino color are used to differentiate between layouts and shapes
#1D232D
Rhino-100
#2F3744
Rhino-90
#535E70
Rhino-80
#7B8694
Rhino-60
#A6AEB8
Rhino-40
#D2D6DC
Rhino-20
#E8EAEC
Rhino-10
#F3F4F5
Rhino-5

Typography

Typography is crucial for the content. It must be simple, sleek and easy to read, as the content is intended mainly for education.

Serif font

Primary font is Source Sans Pro. This font is used for written content, as well as some diagrams. Its light version slightly takes after OCR-B font, developed in 1968 for technical documentation.

Monospace Font

Monospace font is Inconsolata and should only be used in code snippets and inside diagrams, in cases where serif font seems to be inappropriate.

IBM VGA Font

PxPlus IBM VGA8 is an old bitmap font for IBM PC. Despite its very good readability, it's only intended for special cases, such as Commander Keen's tooltips and ancient code snippets where it can differentiate the content from other examples.

Diagrams

Diagrams combine UML components and sci-fi HUD elements. Preferred color is emerald. Other colors should only be used to highlight respective parts.

Code Snippets

Source code is parsed by prismJS. Primary colors are emerald, royal and tomato light.

function createIterator(array) {
let currIdx = 0
return {
next() {
return currIdx < array.lenth ? {
value: array[currIdx++], done: false,
} : { done: true }
},
}
}

Slides

All slides are wrapped in a round frame of a grid-like pattern, suggesting architectonical graph paper. The frame is semi-transparent and the background may display any picture that is relevant to the content.