In this project, I designed a responsive website experience that promotes my capstone project mobile application to the target audience.
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.
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.
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.
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.
My wireframes for the mobile and desktop website showcase a clear image on the initial landing page to grab attention immediately and entice users to continue exploring. This is followed by the principal functionality of the app which is to virtually meet and connect with players. Using image placeholders helped me establish ideas on how I could lay out different elements.
.gif)
.gif)
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.
To visualize my desktop and mobile sites, click on the prototype links below. The iMac version has a couple of animations that I intend to update to improve the look and feel. Also, I will to add more features and improve the animations in the future.
By Enrique Magno
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.
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.
I'm Enrique Magno — a designer who works pushing creative boundaries.
uxemagno@gmail.com
.gif)
