Doug's Dimmadice

This website was constructed with the intent to sell custom dice to players of various tabletop games. It is specifically designed to cater to Dungeons & Dragons players. To accomplish this end, similar and familiar colors are used and Doug's characters from the D&D universe. A video is also provided to show to process on how Uncle Doug makes these custom dice from start to finish.

From the D&D Website:

The individual pages are all centered around building rapport or supporting the sales of the dice. The website is designed with tab-style navigation. To keep the user aware of which page they are on, the associated tab changes color to the color of the body of the website. The primary drive behind this functionality is the external CSS sheet referenced in the heading of each page.

Specificaly:
			.nav .active {
				background-color: #041e2b;
			}

(This snippet matches the color of the active tab to the color of the body.)

			.nav {
				list-style: none;
				margin: 0 auto;
				padding: 0;
				overflow: hidden;
				background-color: #39304a;
			}

(This code centers the .nav class applied to the ul element. It also gives us the different color backround for the menu.)

			.nav li {
				float: left;
				margin: 0 auto;
				display: inline;
			}

(Above, the code ensures we stretch horizontaly across the top of the body.)

			.nav a {
				color: #f24333;
				display: block;
				padding: 12px;
				text-shadow: 2px 2px #020100;
				font-family: "Times New Roman", Times, serif;
				font-size: 24px;
				display: inline-block;
				text-decoration: none;
			}

(This code changes formats just the links in the ul element so that their font is red instead of light blue.)

			.nav a:hover:not(.active)  {
				background-color: #041e2b;
			}

(The .nav a:hover:not(.active) customizes what happens to the formatting when the mouse is hovered over it, so long as it isn't the active tab.)

To help emphasize that the die created here are custom, the form on the Order page has a block where potential customers can input whatever instructions they want to. As seen below, the entire context of this box is delivered to the server as a string. Additionally, potential customers can upload their reference sheets for color matching and stylization, making sure each custom set of dice perfectly coincides with their character.

Any D&D (or other tabletop game) player will fit at home on this website. The ease of navigation, with less than three clicks landing the user on the exact page they are looking for, ensures that the page is efficient and to the point, while still feeling personable and relatable.

In the future

In the future, Doug's Dimmadice will need to implement some modern tools to captivate customer further. The first would be an interactive flash element that would generate some preview of their dice based on user input. The User would be able to create their dice virtually and then send the instructions to Uncle Doug, who could reproduce them in physical form based on what the User's created. Similar to the way custom T-shirt company's function: Like this.

Also, moving forward, I would like to round out the border of the body and the tabs. The hard right angles are not as visually appealing to me. Lastly, I would like to expand social media connectivity to the website with links to other social media accounts. Uncle Doug has a twitter account set up for his business, but accounts on Instagram, Facebook, Pinterest, and Discord Server could go a long way in helping Uncle Doug develop a solid customer base. These are all social media outlets where his potential users reside.