INTRODUCTION In this final stage of the development process, I moved from mid-fidelity layouts to high-fidelity, fully branded user interfaces for both the Rock in Rio website and mobile companion app. This post documents the integration of final UI elements, typography, color palette, visual consistency, and accessibility best practices to ensure that the user experience […]
Low fidelity UI prototypes
The low-fidelity prototype presented below serves as an early-stage wireframe for the Rock in Rio companion mobile app, laying the foundational structure for user flow and interaction design. The purpose of this prototype is to map out essential features and user journeys before applying detailed visuals or branding. This approach allows for rapid testing and […]
UI principles to be applied to the design
A number of fundamental UI design principles are successfully applied by the Rock in Rio festival app to provide a smooth and interesting user experience. Consistency is a fundamental design element that is seen in the navigation arrangement, typographic styles, and recurring usage of dark pink tones. This lessens cognitive strain and enhances usability by […]
Requirements gathering and analysis
To ensure the design of the Rock in Rio website and companion app reflects real user needs, I created three detailed personas using verified age demographic research (Müller, 2020) and user commentary from platforms like Reddit and YouTube. The personas focus on individuals aged 18–35, which is the most dominant audience segment for Rock in […]
Adapting for Tablet and Web Deployment
After successfully prototyping the mobile version, the client requested an adaptation for tablet and web platforms. This required evaluating how UI elements scale across screen sizes and adjusting layouts for wider displays. The tablet version retains the vertical scrolling structure, but increases padding and image sizes to accommodate larger touch targets. The bottom navigation is […]
UI Prototyping for Mobile Application
Introduction After establishing the user flow and wireframes for the “Attack on Titan” companion app, I moved into the UI prototyping phase using Figma. This phase involved translating low-fidelity wireframes into high-fidelity prototypes, adding visual styling, interactive elements, and user interface details. Prototyping is essential to bridge the gap between static designs and functional interfaces, […]
User Flow and UI Wireframing
User Flow and UI Wireframing Introduction In this phase of my design process, I focused on developing the user flow and wireframes for the “Attack on Titan” companion app. This stage was crucial to map out how users would navigate the app and what content they would encounter. According to Garret (2011), effective user flow […]
Design and Research
INTRODUCTION For this project, I chose to develop a mobile companion app based on the globally popular anime series Attack on Titan. Given its expansive storyline, diverse character arcs, and large fanbase, Attack on Titan offers rich potential for a multimedia application that connects fans through streaming content, character data, discussion forums, and collectible elements. […]
Mid-Fidelity Layouts and Responsive Design
introduction With visual identity and layout structures defined, the next stage of the design process focused on developing mid-fidelity prototypes for both the Rock in Rio website and mobile app. This post covers how I created mid-fidelity wireframes in Figma, integrated interactive functionality, and most importantly, gathered and applied user feedback to improve the design […]
Mood Boards, typography and color planing
Introduction Establishing a consistent and effective visual identity was critical for the Rock in Rio website and companion app. This post details the visual research, mood board development, early layout planning, and how these informed the final UI components. Drawing from core UX/UI design principles, this phase laid the foundation for a design system that […]