Writing
I used AI to write the descriptions of each game. I had compiled research for each game that I plugged into chat to get a concise, clearer, and informative summary for each game.
01
Project Concept
For this project, I designed and developed a microsite for Riot Games and its larger world of games, characters, and competitive culture. My goal was to create a website that felt immersive and visually aligned with Riot’s brand, while also allowing users to get the information about games and characters in a way that was easy to follow.
I needed to do research on multiple game titles, recognizable characters, esports culture, and future expansion, especially as I had little to no experience in this topic.
02
Understanding the Topic
Prior familiarity
I was not at all familiar with Riot Games before starting the project. I had only ever heard of specially through major titles like League of Legends and VALORANT. However, I didn't know what the games entailed, the characters, the culture, or anything beyond the name. Nor did I understand the breadth of Riot’s brand or any of its other games.
What I learned
Through research, I came to understand Riot Games as a brand built around strong visual identity, worldbuilding, competitive energy, and distinct character design. That broader understanding shaped the site. I also learned about the world of esports, with its highly intense competition and lifestyle.
03
Creative Direction
The input from my creative director was important in helping define both the visual direction and the structure of the site. He made me see the feeling of the Riot site he wanted. He also gave lots of clarity of what information a user interested in Riot Games would want to see and how it should be presented as someone who would use this site. Listening to that insight truly helped the website. For example, a "How to Play" section was something gamers would want to see.
04
Design Process
1
Defined content goals
I began by identifying what users should understand after viewing the site. My goal was for users to clearly grasp what Riot Games is, what titles it is known for, what makes those games unique, and how the brand extends into esports and future development.
2
Built information architecture
I structured the site so that it progresses from broad to specific. Users are first introduced to Riot as a brand, then guided into individual games, followed by deeper supporting sections such as esports and future expansion.
3
Established visual direction
I aimed for a dramatic, sleek, and game-centered design. The final visual direction uses a dark interface, bold hero sections, strong contrast, and card-based layouts to create a more cinematic and immersive experience.
4
Refined hierarchy and layout
Because the content is dense, I focused on clarity and usability. I used consistent spacing, repeated card structures, and clear section breaks to make the information easy to scan and navigate for users.
05
Development Process
1
Built the page structure
I first created the HTML structure and css code for the site, including the header, hero, section layout, and content groupings.
2
Added and organized content
After that, I developed the written content and placed it into sections that supported the narrative flow of the page. I did use AI to generate the game descriptions. I also compiled all of the images needed for the characters, each game banner, etc. I also toyed around with different layouts for the site: navigation tabs for each game, dropdown menus, no dropdown and just all information laid out, etc.
3
Styled and refined the interface
I used CSS to establish the visual identity, including the first Figma Mockup (Mockup A), which had a dark theme with accent colors.
4
Revised after testing
I revised the site repeatedly after each submission, whether it be making the shapes of the image clearer or trying out different spacing.
06
Tools Used
Core tools
- Visual Studio Code (VS Code) for writing HTML and CSS
- GitHub Pages for testing the site
- ChatGPT for specific layout items I strived for but haven't learned out to code
- Figma or planning sketches for layout thinking and visual planning
07
Challenges + Successes
Challenges
- Not being familiar already with the feeling of Riot that I was trying to encapsulate
- Deciding how much content each game needed
- Keeping repeated sections consistent without making them feel repetitive
Successes
- Creating a strong visual identity that matched Riot Games
- Organizing the site into a layout that I was proud of: easy to navigate, responsive, etc.
- Learning hohw to more efficiently build repeatable systems across sections
08
Where + How I Used AI
New Features
AI helped me directly when I was trying to code something I hadn't learned before, like the home button, a floating navigation bar, dropdown menu, etc.
Code support
I used AI for suggestions related to HTML/CSS structure and troubleshooting during the development process.
09
Final Reflection
This project showed me how important it is to create and follow a visual and style guide especially, when building something for someone else. This project also taught me the power and necessity of communication: of making sure you don't build something for someone else, investing time, energy, and effort into, that they do not love. Making sure there was always communication with the creative director definitely allowed for the best result!
Outside of learning the imporantance of communication and continuously iterating based off of what your "client" or whoever you're building for wants, I learned the power of design in creating a mood. I saw this not only in my own project, where the vibes of dark backgrounds and distinct, bright, electric colors were conducive to the feeling of Riot Games, but looking at all the other microsites from my peers truly showed how powerful fonts, colors, layouts, etc. can be in facilitating the overall feeling for the user to be immersed into not only the site, but also, the topic it's on. It was such a helpful and fun project!