D&D Begins: E-Commerce Design
Provided you’ve been keeping up with my previous posts, you’ll likely be familiar with my student project: a fictional E-commerce site by the name of D&D Begins, which sells primarily D&D dice, and uses a quiz feature in order to draw in new customers. Here I will be going into details of the whys and hows behind its semi-final design.
Aesthetic Design
The main objective of D&D Begins was to create a site that would welcome new and inexperienced players without alienating those more familiar with the game, so, from the get-go the overall design of the site was made to be beginner-friendly: welcoming and simple, without being underwhelming.
Color
This particular color palette was chosen for several reasons, including examination of similar sites. The most prevalent D&D focused website I am currently aware of is DnD Beyond, which uses almost exclusively white, black, and red for its color scheme.
In the case of D&D Begins, although the red, black, and white stayed, I wanted to include a light brown shade to evoke the feeling of an old map, as many adventure novels and many D&D campaigns include the use of maps to assist in bringing fictional worlds to life.
Typography
The headline typeface needed to be attention grabbing but not overwhelming, and it needed to immediately evoke the feeling of Dungeons and Dragons, which eventually led me to Brothers OT. The typeface bears a fair resemblance to the typeface used in the official D&D logo, and should result in some connection between the two.
The body typeface, on the other hand, needed to be something rounded, welcoming, and nonthreatening. After a fair bit of searching, I discovered a typeface that fit the bill perfectly, and had the added bonus of being a bit of a pun: Campaign.
Dropdowns
A gigantic list of information presented all at once can be extremely overwhelming and unpleasant to deal with, even if it is expected. Therefore I have chosen to implement dropdown menus as a filtering method in order to segment and automatically minimize information until it is actually needed.
Illustrative Icons
Dungeons and Dragons has a long history of using illustrative artwork to depict its extensive library of fictional creations. As a result, I’ve decided to use illustrations throughout the site’s design in order to create further connection to the Dungeons and Dragons aesthetic, in addition to supplying iconography that can assist in defining the character classes from one another.
Rounded Corners
As you may have noticed in the previous images of the site, one of the most subtle, yet heavily utilized design choices I made was the implementation of rounded corners. Historically, and even psychologically, round or curved things are seen as non-threatening to the human mind, as we are less likely to hurt ourselves on a rounded surface than a jagged one.
Concluding
Although the design of the site will likely require further tweaks in the future, the current design is now in a place where user testing is possible. With data gathered from the testing, I will be able to further improve my design, and create an experience that will be welcoming for all kinds of users.