Responsive Marketing Website

Project Overview

In this project, I designed a responsive website experience that promotes my capstone project mobile application to the target audience.


- Design a single-page product marketing website for both desktop and mobile viewports.
- Explore responsive website design patterns and product marketing trends.
- Develop a marketing site concept that establishes my brand and conveys my product value proposition.


UI Inspiration Board

To start look at the Inspiration boards that I organized using InVision. This is where I brainstormed a variety of ideas I wanted to try out when designing my wireframes and high fidelity prototype.

UI Inspiration Board

I collected visual components, elements, and other attributes to inspire my digital product. Referencing my UI inspiration board, I generated some core pages by sketching elements that will help me piece together the first round of ideas.

View Complete UI board

Mood Board

In order to capture my brand’s identity and highlighted the feelings and sensory reactions that I wanted to evoke in my users, I had to refer back to my capstone mood board.

The mood board helped me pull in inspiration and create a clear design concept for my website.

View Mood Board

Design Concept

The website needed to reflect the connections that are made in the Yu-Gi-Oh! world. The dark background used with the blues and purples gives a similar feeling to the game itself. The strokes used to connect the content through the website strengthen the concept of connections. It also alludes to the idea of that connections are made between players which is a function of the application. All this makes the user feel immersed in the YuGiOh! community, feeling engaged and part of something bigger.


Referencing my UI Inspiration Board, I began sketching multiple screens and variations of how my web and mobile sites could look, which helped me develop better ideas of how to integrate features and layouts into the design to create my marketing website.

Prototype & Refine

Content Flow Diagram

Categorizing and labeling web elements into their appropriate positions helped me understand the content flow for my website. I wanted to ensure the transitions between both mobile and desktop websites would be smooth and adjust properly according to size.

Key Learnings & Final Thoughts

By Enrique Magno

Key Learnings

I learned how to use color injection from my capstone mood board to bring a new atmosphere that catches the attention of my target audience.
I also learned how to tell an effective story throughout the website journey showcasing the app's best features.

Final Thought

I will improve the website with better animation and finalize any last-minute details of my prototype before the launch.

Final designs should clearly communicate what the application is and how it will deliver value to my customers through the creative use of storytelling, copywriting, and visual design.

I demonstrate my design process, structured approach to developing my marketing site designs, and awareness of responsive design principles.

Next Project

Have projects in mind?

Let’s work together

I'm Enrique Magno — a designer who works pushing creative boundaries.