DBM Webcomic
Website Redesign
Client:
(Personal Project)
Role:
UX Designer
Deliverables:
Mock-Ups, High-Fidelity Prototype
Year:
2021
Dragon Ball Multiverse is a fan-made webcomic that I have been a dedicated fan of for over ten years, and while I find the story and artwork of the webcomicto be exceptional, I have often been disappointed by the design of the hosting website.
The layout of the site and out-of-place color scheme have often been noticeably distracting to me throughout my experience visiting the site, so I decided to challenge myself to come up with a design that I felt was more suitable and a worthy refelction of the site's content.
I strove to create a simple but bold look-and-feel to the site that drew inspiration from the minimalistic nature and color scheme of the actual webcomic in order to create a unified visual identity. It was also my intention to use my knowledge and goals as an actual target user to clean up and improve the organization and user flow of the site in order to create the optimal reader experience.
Design Process
To create this redesign, there was a very clear and structured process that I followed in order to create my final designs:
Brainstorm
The first step was to create a mood board in order to brainstorm how I wanted the website to look and feel, through selected text and color scheme. I took inspiration from the actual style choices of the webcomic to inspire my designs.
I then took the selected colors and font and continued to brainstorm by drafting several layout options, ultimately selecting the layout I felt was most effective.
Information Architecture
As one of my goals of the redesign was to improve the organization and navigation of the website, I took the time to reorganize the information architecture of the site so that I could use it to guide future designs.
Wireframe
The next step was to create wireframes for the main pages and actions of the site such as browsing the chapters of the webcomic, reading individual pages, and navigating through the pages.
Polished Design
After completing my wireframes, I expanded upon and refined the wireframes by creating polished designs that reflected the final color choice and layout for each page of the site.
