Marvel
Also created as part of the Mobile App Design course, this second project involves the UI/UX design of a comprehensive mobile encyclopaedia covering the Marvel universe. The main objective was to successfully organise and prioritise a vast amount of information (films, characters, timelines) to provide a smooth, enjoyable and highly immersive browsing experience for both enthusiasts and newcomers alike.
My steps
- Moodboard and Visual Identity: The first phase involved analysing the visual identity of the Marvel brand. Using a moodboard, I brought together the iconic elements of the comics and the MCU (Marvel Cinematic Universe): the prominence of character visuals, the heroic aesthetic, and the use of stark contrasts to highlight the action.
- Wireframes and Data Architecture: The biggest challenge of this project lay in organising the content. I developed wireframes focused on the usability of infinite lists and detailed profiles. The aim was to design an effective filtering system and character/film profiles where the user does not feel overwhelmed by text.
- Visual Design (High-Fidelity): The move to high-fidelity allowed for the integration of all official imagery. I implemented strict grids to harmoniously align film posters and superhero portraits, whilst ensuring the text remained perfectly legible against a dark background.
- Prototyping: Finally, I linked the screens to simulate a real search journey, allowing users to move instantly from a comprehensive list of films to a detailed profile of a hero or actor.
My design
- Colour palette: The interface features a distinctly dark theme (Dark Mode), which allows the vibrant colours of the film posters and character illustrations to really pop. Marvel’s iconic red is used sparingly for call-to-action buttons, the logo and key selection elements.
- Immersion through imagery: Visuals and photographs take centre stage in the design, instantly immersing the user in the world of film and comics.
Key features
- Authentication and Profile: Branded welcome screens, login/registration forms, and a profile area for managing favourites.
- Exploration and Lists (Feeds): A vast catalogue allowing users to browse the entire range of Marvel productions (from Captain America to The Avengers), organised by category, as well as sections dedicated to teams and characters.
- Detailed Profiles: Extremely comprehensive content pages for each title, including a synopsis, cast list (with photos of the actors), trivia, and the relationships between characters (family ties, allies, enemies).
Conclusion
This encyclopaedia project was an excellent exercise in user interface (UI) database management. It enabled me to develop my skills in designing complex lists, implementing dark mode, and visually organising dense content.
Gallery
