✦ STYLISTIC CHOICES ✦

Here, I will explain the concepts and reasons as to why I designed this project in this way. From typeface slection, to color palette, to individiual images, all will be explained below in three categories: text and typeface, color palette and visual choices, and interaction and interface choices.

DESIGN STATEMENT

SOME CONTEXT

Penacony is one of the worlds you travel to in Honkai: Star Rail, an extremely popular RPG made by Hoyoverse (previously known as Mihoyo). Each planet in the game takes on a striking theme, with Penacony inspired by old Hollywood and Las Vegas. Each design choice featured in my webpages are based off of the designs in the game. While my experience and skill is limited, I tried to make the website as sleek and clean as possible like the luxurious themes featured in the game.

Text and Typeface

The typefaces I chose include: Anton SC, Staatliches, and Oxygen. I tried to match the font shown on the various official posters and promotional art from the game, but the one font I could not exactly match was the exact font of the Penacony title or the featured posters since it was custom made and in a different writing language. Thus, I settled on Anton SC and Staatliches to serve as my headers. Other than the fonts being most similar to the fonts from the inspired game, it provided that sleek and clean look that Penacony has. While Anton SC and Staatliches are very similar because they both are bold, thick typefaces, I used Anton SC for main titles because of its letter spacing and thickness then used Staatliches for the minor headings and for navigation because of its bold, but thinner text. For the paragraphs, I chose a simple font like Oxygen so that it is legible rather than distractng. Additionally, I chose to incorporate diamond symbols throughout the titles to match both the themes of Penacony, add a little touch of simplistic elevation to the overall sleek design, and as a reference to the in-game ranking system.

Color Palette and Visual Choices

The colors I chose are of a deep navy blue, a dark almost-black brown, a gold color, and white. I chose these colors to match that of the Penacony signature colors found in every image and promotional art as shown on each webpage. I particularly chose a dark background rather than my usual light-colored backgrounds for the body so that the gold text pops and gives off a night-life feel.

To maintain a sense of consistency, the images I chose are all taken the same way, in which each image chosen is just a screenshot directly taken from the game. Image of objects or characters in-game are all transparent images to maintain a clean look and to not distract the viewer from possible colorful backgrounds that might take away from the item's already colorful unique designs.

Interaction and Interface Choices

I originally wanted the navigation tabs to be white and whichever tab you are on is black like the background of the text. However, the white looked very jarring against the gold. I also tried navy blue, but it was too close in color to the black to show any real contrast. Thus, I settled on the tab you are on to be white but with diamonds next to the title to emphasize the page that you are on.

With the buttons, I wanted to use more blue hues against the already heavy gold and black color themes. Thus, I used a navy blue for the buttons and used a lighter blue for when you hover over the button.

As you may have noticed, the background of the body paragraph is different from that of the webpage background. The footer and the banner background stretch across the entire website rather than have marigins like the body paragraph. This was done intentionally because I feared the dark background may be too much and the blue breaks that effect.

Citations

All information taken from the Honkai: Star Rail WikiFandom and the official Guidebook to Penacony.