Flat Design / Vector Minimalism vs Gothic

フラットデザイン / ベクターミニマリズム / ゴシック

Flat Design / Vector Minimalism comes from UI Expression and Gothic from Historical Styles. Both are read here as style. They are reached for with different intent, which is the fastest way to tell them apart.

Flat Design / Vector Minimalism

Flat Design / Vector Minimalism — Google《マテリアルデザインのUIコンポーネント》2015 — Wikimedia Commons / Public domainFlat Design / Vector Minimalism — Preply《Chemistry Class in School》2021 — Wikimedia Commons / CC BY 2.0Flat Design / Vector Minimalism — CEDEC《学校で自由ソフトウェアを使う7つの理由》インフォグラフィック 2018 — Wikimedia Commons / CC BY-SA 4.0

Reduces information to plain planes and color, portable across screens and media.

Gothic

Gothic — シャルトル大聖堂 北のバラ窓 — Wikimedia Commons / Public domainGothic — シャルトル大聖堂 南のバラ窓 — Wikimedia Commons / CC BY-SA 3.0Gothic — パリ ノートルダム大聖堂 西正面 — Wikimedia Commons / CC BY-SA 3.0

Summons mystery, awe and permanence through verticality and dark ornament.

Flat Design / Vector MinimalismGothic
Era2010s–medieval–modern revivals
FamilyUI ExpressionHistorical Styles
KindStyleStyle
CuesUniform planes / Simple shapes / Few shadows / Clear colorBlackletter / Pointed forms / Black / Minute ornament
Best used forLight, understandable explanation · Large sets of consistent figuresHeavy narrative for fashion and music · A sense of ritual and mystery
TypeA rounded sans-serifBlackletter for headlines only; keep text faces disciplined
CompositionSimple silhouettes and clear hierarchyVertical axis, symmetry, heraldic center
MaterialThree to five colors; shadows only when they mean somethingBlack, dull silver, deep crimson, fine linework
CautionFigures easily become generic. Define your own ratios, lines and color rules.Not a pile of horror symbols. Stay aware of period and religious context.

Put these two together

UI Expression ／ Historical Styles

IndexStyle