Brand
Název
Původně, APH znamenal "Architektura Počítačových Her, což byl název předmětu na FIT ČVUT. V roce 2021 bylo potřeba brand rozšířit mimo fakultu i do soukromé sféry, přičemž pro zahraniční trh bylo potřeba najít nový význam zkratky. Brand byl tedy pojmenován jako "APHGames", kde APH zkratka znamená "Architecture, Powerups, and Hitboxes in Games". Pro předmět NI-APH je však stále platný původní název.
Grafický manuál
Grafický manuál ušel od roku 2017, kdy byl předmět založen, dlouhou cestu.
APH 2017
APH 2018
APH 2019
APH 2020
APH 2021
APH 2022+V roce 2017 se design skládal z jednoduchého APH loga a pruhového filtru pro obrázky. V roce 2018 došlo k několika změnám - přednáškové slidy byly předělány z 4:3 do praktičtějšího 16:9 poměru a došlo ke změně barevné palety z výrazných akcentů na konzervativnější odstíny. V roce 2019 došlo k přepsání všech slidů z PowerPointu do HTML, což přineslo mnoho výhod - interaktivní obsah, CSS animace a jednoduché stylování. Bylo předěláno i logo předmětu, nicméně stále se jednalo o nastylovanou zkratku "APH". Dále zde přibyly SVG animace pro ilustrace přednášek. Chromatická aberace sice působila spolu s ostatními efekty velmi netradičně, pro účely samostudia a pročítání slidů se ukázala jako nevhodná. Konečně, v roce 2020 došlo ke kompletnímu rebrandingu - nová paleta barev, unikátní vizuály, nové logo a minimalistický design slidů. V roce 2021 došlo k několika menším změnám - logo bylo mírně poupraveno a stejně tak některé barvy, nicméně se jednalo o drobné doladění předchozího rebrandingu. V roce 2022 byly dovršeny finální úpravy, které představily černobílou variantu jako hlavní.
Logo
APH logo je grafická reprezentace brandu APHGames a primární grafický prvek jeho identity. Symbol je reprezentován jako stylizovaný mikročip s tlačítky herního ovladače na povrchu - směrová tlačítka nalevo a ovládací tlačítka napravo. Levé ovládací tlačítko je vyříznuto pod úhlem 90 stupňů.
Celé logo představuje ucelenou reprezentaci mise a poslání APH Games brandu.
APH logo - okótovaný nákres
APH logo v barváchSymbol
Symbol je reprezentován ovládacími tlačítky z pravé části loga. Jedná se o odnímatelnou část a může být použito ve specifických případech.
APH symbol
APH symbol (černobílá)Varianty loga
Ovládací tlačítka můžou mít stejnou barvu jako tlačítka směrová, nicméně levé ovládací tlačítko musí být vždy akcentováno výraznějším odstínem. Obal mikročipu může být odstraněn, pokud budou ponechány piny na stranách. V případě tmavého pozadí může být použito logo bez obalu mikročipu, pokud nebudou obtékající prvky či pozadí plochy, kde je logo umístěno, narušovat jeho čitelnost.
Barvy
APH paleta je světlá a obsahuje několik primárních barev a mnoho sekundárních barev, které poskytují dostatečnou variabilitu k designování obsahu.
Primární barvy
- primární barvy jsou lemon yellow, emerald green, royal blue, a tomato red
- tyto barvy by se měly používat především pro akcentaci
- lemon yellow reprezentuje Pac-Mana, první hru s herní postavou
- emerald green reprezentuje vegetaci prvních open-world her ze série Zelda
- royal blue je barva oblohy ze série Super Mario
- tomato red reprezentuje lávu z prvních platformerů
Sekundární barvy
- sekundární barvy rozšiřují paletu o konzervativní manhattan barvu, svěží aqua barvu a komfortní matte azure
Světlé a tmavé odstíny
- každá primární a sekundární barva má svou světou a tmavou variantu
Kontrastní barvy
- midnight by se měla použít pouze pro pozadí
- bílá barva je barva textu pro nadpisy. Defaultní barva textu je Rhino 20
Odstíny šedi
- odstíny barvy Rhino se použijí pro odlišení tvarů a vrstev
Přechody
- přechody by se měly používat s rozvahou a jen ve výjimečných případech
Typografie
Typografie hraje významnou roli pro obsah. Musí být jednoduchá, elegantní a dobře čitelná, neb obsah je určen primárně pro vzdělávání.
Bezpatkový font
Primární font je Source Sans Pro, který je určen pro psaný obsah a některé diagramy. Jeho tenká varianta, která ne náhodou připomíná OCR-B font pro technickou dokumentaci (kolmé písmo typu B), akcentuje architektonické aspekty předmětu.
Neproporcionální Font
Neproporcionálním fontem je Inconsolata a měl by se používat pouze pro ukázky kódu a uvnitř diagramů, kde se použití bezpatkového fontu jeví jako nepříliš vhodné.
IBM VGA Font
PxPlus IBM VGA8 je starý bitmapový font pro IBM PC. Je určen pro specifické případy (např. v případě potřeba akcentace retro-gamingu).
Diagramy
Diagramy v sobě kombinují UML principy a design tzv. FakeUI používané v kinematografii. Preferovanou barvou je royal. Ostatní barvy by se měly použít pouze pro akcentaci.
Zdrojový Kód
Pro zdrojový kód jsou primární barvy emerald, royal a tomato light.
function createIterator(array) {
let currIdx = 0
return {
next() {
return currIdx < array.lenth ? {
value: array[currIdx++], done: false,
} : { done: true }
},
}
}
Slidy
Všechny slidy jsou umístěné v obdélníkovém rámci s mřížkovým vzorem, připomínajícím papír pro technické výkresy. Celý rám je polo-průhledný a má zaoblené okraje.
