{"id":1222,"date":"2025-08-01T10:52:11","date_gmt":"2025-08-01T08:52:11","guid":{"rendered":"https:\/\/neonhopegame.com\/?p=1222"},"modified":"2026-06-06T11:55:09","modified_gmt":"2026-06-06T09:55:09","slug":"development-diary-5-defining-the-visual-style-of-the-future","status":"publish","type":"post","link":"https:\/\/neonhopegame.com\/de\/development-diary-5-defining-the-visual-style-of-the-future\/","title":{"rendered":"Entwicklertagebuch #5: Ein neuer Style f\u00fcr die Zukunft"},"content":{"rendered":"<p class=\"wp-block-paragraph\">Ich bin Torben, der Art Director und Grafikdesigner von NEON HOPE. Und heute m\u00f6chte ich euch zeigen, wie mein Prozess ausgesehen hat, mit dem ich den Style von NEON HOPE entwickelt habe. Dazu geh\u00f6rt, wie wir unseren ungew\u00f6hnlichen Stil f\u00fcr Illustrationen gefunden haben und wie aktuelle Tech-Trends unsere Zukunftsvision beeinflusst haben.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"646\" src=\"https:\/\/neonhopegame.com\/wp-content\/uploads\/2025\/04\/kickstarter_section_theteam_torbenratzlaff_de.jpg\" alt=\"\" class=\"wp-image-2151\" srcset=\"https:\/\/neonhopegame.com\/wp-content\/uploads\/2025\/04\/kickstarter_section_theteam_torbenratzlaff_de.jpg 1920w, https:\/\/neonhopegame.com\/wp-content\/uploads\/2025\/04\/kickstarter_section_theteam_torbenratzlaff_de-600x202.jpg 600w, https:\/\/neonhopegame.com\/wp-content\/uploads\/2025\/04\/kickstarter_section_theteam_torbenratzlaff_de-768x258.jpg 768w, https:\/\/neonhopegame.com\/wp-content\/uploads\/2025\/04\/kickstarter_section_theteam_torbenratzlaff_de-1536x517.jpg 1536w, https:\/\/neonhopegame.com\/wp-content\/uploads\/2025\/04\/kickstarter_section_theteam_torbenratzlaff_de-1320x444.jpg 1320w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Die Herausforderung<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Im Vergleich zu Dominik und Francesco bin ich erst relativ sp\u00e4t zum Projekt gesto\u00dfen \u2013 im Januar 2024. Aber ich hatte die Entwicklung des Spiels bereits zwei Jahre lang bei lokalen Events f\u00fcr Spieleentwickler*innen beobachtet.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Es gab f\u00fcr mich zwei Herausforderungen bei diesem Projekt:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Ich musste den richtigen Grafik-Stil f\u00fcr das Layout, die Symbole und die Texte finden, der zum Thema und den Mechaniken passt. Er sollte klar und leicht lesbar sein, aber gleichzeitig genug Flexibilit\u00e4t f\u00fcr Erweiterungen bieten.<\/li>\n\n\n\n<li>Ich musste einen Art-Style f\u00fcr die \u00fcber 300 Illustrationen ausw\u00e4hlen und die richtigen K\u00fcnstler*innen finden, die zuverl\u00e4ssig so viele Bilder anfertigen k\u00f6nnen. Nat\u00fcrlich innerhalb eines Budgets das wir uns leisten k\u00f6nnen.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Wichtig war f\u00fcr mich, dass NEON HOPE sich von anderen Spielen des Genres unterscheidet. Wir brauchten also etwas, das frisch wirkt, aber in dem Spieler*innen gleichzeitig auch genug Bekanntes wiederfinden.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Design-Style<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Auch wenn NEON HOPE in der Zukunft spielt, ist es Science-Fiction, die unsere Zeit reflektiert. Wir wollten aktuelle Trends in die Zukunft projizieren, als Kommentar \u00fcber die Gegenwart. Aber mit einem interessanten Twist.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Gleichnzeitig wollten wir ein innovatives Setting erschaffen. Eine Mischung aus dystopischem Cyberpunk und utopischem Soloarpunk. Eine hoffnungsvollere und zug\u00e4nglichere Zukunftsvision. Das war nicht einfach, weil Cyberpunk durch seine vielen Repr\u00e4sentationen mit vielen Genre-Erwartungen und Klischees aufgeladen ist \u2013 vor allem wegen dem Erfolg des Videospiels Cyberpunk 2077 gibt es viele Erwartungen an die \u00c4sthetik des Genres.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Um also unsere eigene Interpretation zu schaffen, haben wir eine neue Perspektive eingenommen. Klassischer Cyberpunk ist in den 80ern verwurzelt. Er zeigt eine d\u00fcstere Zukunft mit riesigen Wolkenkratzern und dunklen Gassen, die von Werbung in Neonlicht geh\u00fcllt werden. Computer und andere Gadgets sind eckig und gl\u00e4nzen in Chrom. Es ist eine Welt, die eindeutig davon inspiriert ist, wie Menschen sich damals eine Dystopie vorgestellt haben, in der Kapitalismus und Gewalt die Alleinherrschaft \u00fcbernommen haben.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Wir haben uns also gefragt: Wie w\u00fcrde Cyberpunk aussehen, der eine Zukunft zeigt, die auf den 2010ern oder 2020ern basiert? Eine \u00c4ra, die vom mobilen Internet, Smartphones und minimalistischer Technologie definiert ist. Eine Gegenwart, in der Konzerne sich hinter bunten Logos und hellen Fassaden verstecken \u2013 und uns eine bessere Welt versprechen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Das Design der Karten im Spiel ist unser Versuch, diese Frage zu beantworten. Wir haben uns von modernen Apps und Websites inspirieren lassen \u2013 mit klaren Formen, minimalistischem Layout und verspielten Symbolen. Ein gro\u00dfer Vorteil davon: Symbole sind leicht zu erkennen und Texte angenehm zu lesen. Ohne kleinteilige Verzierungen wirkt das Spiel besonders modern.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"914\" src=\"https:\/\/neonhopegame.com\/wp-content\/uploads\/2025\/08\/devdiary5-layoutinspiration.jpg\" alt=\"\" class=\"wp-image-1236\" srcset=\"https:\/\/neonhopegame.com\/wp-content\/uploads\/2025\/08\/devdiary5-layoutinspiration.jpg 1920w, https:\/\/neonhopegame.com\/wp-content\/uploads\/2025\/08\/devdiary5-layoutinspiration-600x286.jpg 600w, https:\/\/neonhopegame.com\/wp-content\/uploads\/2025\/08\/devdiary5-layoutinspiration-768x366.jpg 768w, https:\/\/neonhopegame.com\/wp-content\/uploads\/2025\/08\/devdiary5-layoutinspiration-1536x731.jpg 1536w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><figcaption class=\"wp-element-caption\"><em>Wenn man sich viele der Apps und Websites anschaut, die ich bereits designt habe, ist ihr Einfluss auf NEON HOPE offensichtlich.<\/em><\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Dieses Design unterst\u00fctzt au\u00dferdem die Idee, dass die Grafik-Elemente einer Karte eigentlich ein Nutzer-Interface sind. Eines das den Eindruck einer Augmented Reality vermittelt. Wie eine Spieler*in die Welt sieht, ist unvermeidlich durch die Linse gepr\u00e4gt, durch die die Welt betrachtet wird.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Das grundlegende Layout des Spiels war bereits \u00e4u\u00dferst solide, als ich zum Projekt gesto\u00dfen bin. Der limitierte Platz auf einer Karte, ist eine Beschr\u00e4nkung f\u00fcr die Komplexit\u00e4t der Karte: Wenn etwas nicht auf die Karte passt, dann kann es nicht ins Spiel. Meine Aufgabe war es prim\u00e4r, die bereits existierenden Design-Elemente zu \u00fcberarbeiten und ihre Position zu optimieren. Dabei habe ich versucht, den Illustrationen so viel Platz wie m\u00f6glich zu geben.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1060\" src=\"https:\/\/neonhopegame.com\/wp-content\/uploads\/2025\/08\/devdiary5-layoutdevelopment.jpg\" alt=\"\" class=\"wp-image-1237\" srcset=\"https:\/\/neonhopegame.com\/wp-content\/uploads\/2025\/08\/devdiary5-layoutdevelopment.jpg 1920w, https:\/\/neonhopegame.com\/wp-content\/uploads\/2025\/08\/devdiary5-layoutdevelopment-600x331.jpg 600w, https:\/\/neonhopegame.com\/wp-content\/uploads\/2025\/08\/devdiary5-layoutdevelopment-768x424.jpg 768w, https:\/\/neonhopegame.com\/wp-content\/uploads\/2025\/08\/devdiary5-layoutdevelopment-1536x848.jpg 1536w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><figcaption class=\"wp-element-caption\"><em>Das Layout der Karten ging durch viele Iterationen. Der Prozess war nicht unbedingt so gradlinig, wie es oben aussieht, sondern durchlief einige Irrungen und Wirrungen.<\/em><\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">F\u00fcr die Texte und Symbole habe ich mich von Smartphone-Apps inspirieren lassen, die ich in der Vergangenheit entwickelt habe. Dabei wurde mir klar: Was bei Smartphones funktioniert und die Lesbarkeit auf kleinem Raum verbessert, kann auch auf das Layout von Spielkarten \u00fcbertragen werden.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Alle Design-Elemente basieren auf Gegens\u00e4tzen. Harte gerade Linien und Ecken werden mit runden Ecken und Kreisen verbunden. So wird der Gegensatz im Zentrum der Welt visualisiert.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1058\" src=\"https:\/\/neonhopegame.com\/wp-content\/uploads\/2025\/08\/devdiary5-icondevelopment.jpg\" alt=\"\" class=\"wp-image-1235\" srcset=\"https:\/\/neonhopegame.com\/wp-content\/uploads\/2025\/08\/devdiary5-icondevelopment.jpg 1920w, https:\/\/neonhopegame.com\/wp-content\/uploads\/2025\/08\/devdiary5-icondevelopment-600x331.jpg 600w, https:\/\/neonhopegame.com\/wp-content\/uploads\/2025\/08\/devdiary5-icondevelopment-768x423.jpg 768w, https:\/\/neonhopegame.com\/wp-content\/uploads\/2025\/08\/devdiary5-icondevelopment-1536x846.jpg 1536w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><figcaption class=\"wp-element-caption\"><em>Bei einem neuen Projekt designe ich am liebsten die Symbole. Man muss versuchen, alle Details auf kleinstem Platz unterzubringen und gleichzeitig m\u00fcssen sie zusammenpassen und leicht zu lesen sein.<\/em><\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Einen Illustrationsstil ausw\u00e4hlen<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Im Gegensatz zu den Symbolen, die geometrischen Muster und gleichm\u00e4\u00dfigen Farben haben, sind Illustrationen organisch, grob und manchmal sogar chaotisch. Das betont einen Kernkonflikt von Cyberpunk: Technologie gegen Menschlichkeit.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Der Stil, f\u00fcr den wir uns entschieden haben, hat au\u00dferdem einen weiteren Vorteil: Er ist budgetfreundlich und macht es leicht Illustrationen von mehreren K\u00fcnstler*innen zu kombinieren. Weil die Illustrationen so grob sind, erscheinen Bilder von verschiedenen K\u00fcnstler*innen \u00e4hnlicher. Weil die Unterschiede in der Unordnung verschwinden.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Uns wurde fr\u00fch klar, dass die \u00fcber 300 Illustrationen des Spiel unterschiedlich wichtig sind. Angefangen bei den Illustrationen der Spieler*innen-Charaktere, die dich durch die ganze Kampagne begleiten, bis zu einer simplen T\u00fcr in einem B\u00fcro, die man einmal im Spiel f\u00fcr 5 Minuten sieht.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Unterschiedliche Karten im Spiel brauchten also einen verschiedenen Detailgrad. Und der Illustrationsstil musste das abbilden k\u00f6nnen. Es muss m\u00f6glich sein, das Komplexit\u00e4tslevel anzupassen, ohne dass dies als Qualit\u00e4tsverlust auff\u00e4llt. Das ist nat\u00fcrlich leichter mit einem Stil, der gr\u00f6ber ist, als mit einem, der einen sehr hohen Detailgrad hat.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">K\u00fcnstler ausw\u00e4hlen<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Mit einer grundlegenden Idee f\u00fcr den Illustrationsstil und einem Budget im Hinterkopf, fingen wir an das Netz nach K\u00fcnstler*innen zu durchsuchen. Dominik \u00fcbernahm gl\u00fccklicherweise diese Schatzsuche und hat Instagram ArtStation, Online-Foren und Communities durchsucht \u2013 und dabei eine Liste mit \u00fcber 400 K\u00fcnstler*innen erstellt.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ich habe sie dann sortiert und knapp 120 mit passendem Illustrationsstil ausgew\u00e4hlt. Deren Bilder habe ich auf einer gro\u00dfen Leinwand arrangiert. Dabei habe ich sie danach sortiert, wo ihre St\u00e4rken liegen (Charaktere, Umgebungen, Abstraktes, usw.) und wie gut ihr Stil zu uns passt (im Zentrum\/Gr\u00fcn = am besten).<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1403\" src=\"https:\/\/neonhopegame.com\/wp-content\/uploads\/2025\/08\/devdiary5-artistoverview.jpg\" alt=\"\" class=\"wp-image-1238\" srcset=\"https:\/\/neonhopegame.com\/wp-content\/uploads\/2025\/08\/devdiary5-artistoverview.jpg 1920w, https:\/\/neonhopegame.com\/wp-content\/uploads\/2025\/08\/devdiary5-artistoverview-600x438.jpg 600w, https:\/\/neonhopegame.com\/wp-content\/uploads\/2025\/08\/devdiary5-artistoverview-768x561.jpg 768w, https:\/\/neonhopegame.com\/wp-content\/uploads\/2025\/08\/devdiary5-artistoverview-1536x1122.jpg 1536w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><figcaption class=\"wp-element-caption\"><em>Es gibt so viele unglaublich talentierte K\u00fcnstler*innen. Sie alle bringen ihre eigene Perspektive in ein Projekt und sind einer n\u00e4heren Betrachtung wert.<\/em><\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Wir hatten urspr\u00fcnglich geplant, mehrere Illustrator*innen zu engagieren. Aber nachdem wir mit Robert Herzig an den ersten Illustrationen gearbeitet haben, war uns klar: Er ist der richtige f\u00fcr das Projekt. Er hat nahezu alle Illustrationen f\u00fcr den Prototypen und die Kickstarter-Kampagne gezeichnet. Und wir freuen uns sehr, dass er mit an Board ist.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Gl\u00fccklicherweise hat Robert sich bereit erkl\u00e4rt, mit uns das ganze Projekt umzusetzen und wird auch in Zukunft mit uns zusammenarbeiten. Das erm\u00f6glicht eine gleichbleibende Qualit\u00e4t und einen stimmiges Gesamtbild f\u00fcr NEON HOPE.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">That\u2019s it for now. Wishing you all a hopeful future!<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/neonhopegame.com\/wp-content\/uploads\/2025\/08\/devdiary5-outro.jpg\" alt=\"\" class=\"wp-image-1244\" srcset=\"https:\/\/neonhopegame.com\/wp-content\/uploads\/2025\/08\/devdiary5-outro.jpg 1920w, https:\/\/neonhopegame.com\/wp-content\/uploads\/2025\/08\/devdiary5-outro-600x338.jpg 600w, https:\/\/neonhopegame.com\/wp-content\/uploads\/2025\/08\/devdiary5-outro-768x432.jpg 768w, https:\/\/neonhopegame.com\/wp-content\/uploads\/2025\/08\/devdiary5-outro-1536x864.jpg 1536w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><figcaption class=\"wp-element-caption\">Vorausgehen, Illustration einer Aktionskarte f\u00fcr Asim (von Robert Herzig)<\/figcaption><\/figure>","protected":false},"excerpt":{"rendered":"<p>This is Torben, the game\u2019s Art Director and Graphic Designer, and I would like to take you on a journey through the visual design process of NEON HOPE. I will show you how we found our unique art style and how current technology trends informed our vision of the future. The Challenge Compared to Dominik [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":1240,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[31],"tags":[],"class_list":["post-1222","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development-diary"],"_links":{"self":[{"href":"https:\/\/neonhopegame.com\/de\/wp-json\/wp\/v2\/posts\/1222","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/neonhopegame.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/neonhopegame.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/neonhopegame.com\/de\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/neonhopegame.com\/de\/wp-json\/wp\/v2\/comments?post=1222"}],"version-history":[{"count":16,"href":"https:\/\/neonhopegame.com\/de\/wp-json\/wp\/v2\/posts\/1222\/revisions"}],"predecessor-version":[{"id":2178,"href":"https:\/\/neonhopegame.com\/de\/wp-json\/wp\/v2\/posts\/1222\/revisions\/2178"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/neonhopegame.com\/de\/wp-json\/wp\/v2\/media\/1240"}],"wp:attachment":[{"href":"https:\/\/neonhopegame.com\/de\/wp-json\/wp\/v2\/media?parent=1222"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/neonhopegame.com\/de\/wp-json\/wp\/v2\/categories?post=1222"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/neonhopegame.com\/de\/wp-json\/wp\/v2\/tags?post=1222"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}