Daily UI Challenge 6

Daily UI Challenge 6

Initially, I felt a bit bored by Challenge 6. Once I started thinking about what I wanted to design, though, I remembered that I have a DND 5th Edition Campaign full of characters. Each character could have their own “user” profile. For those who are unfamiliar, characters in DND have all kinds of information you can track, including background information, stats for their capabilities, items they are holding, and more. This information is typically captured in a character sheet (example below).


This sheet is then used during play. I decided that it would be nice to this information on my phone. I used inspiration from DND Beyond to come up with what I should display.


I typed all of the components into the prototype and rearranged them into sections that I thought could be useful. In my imagination, I could use the menu options to turn on-and-off different sections as well as rearrange them. I used Pexels to find the character image. Interact with the prototype through Creative Cloud.


20-Sided Die Design

The die in the profile represents the inspiration for the character. When a character is “inspired”, they are able to use that inspiration for advantage (rolling two 20-sided dice and taking the higher value). I originally created the 20-sided die in Illustrator and copied the paths over, but it is easy to re-create in XD once you understand how to decouple the parts. I used an image online to understand the perspective of a 20-sided die. The first two steps are the hardest because XD doesn’t provide shapes beyond circle and rectangle.

Step 1:

First, you need to create a hexagon. Draw a rectangle that is a little taller than wide. Segment into three parts vertically with more space in the center (I used a line for this). Edit the path and add new points along the sides corresponding to those points. Now, add two additional points in the center on the top and bottom. Now remove the original four corners. Use the same technique to accomplish the creation of the triangle.

Step 2:

Position the triangle above the half-point and a little off to one side. Then, use lines to connect the triangle corners to the corners of the hexagon.

Step 3:

Finally, add the number.


Daily UI Challenge 1-5

Daily UI Challenge 1-5

I have spent most of 2017 building my sketching skills. Recently, I have been wondering how far my designs could go if I started making higher-fidelity prototypes. Unfortunately, skill building can be hard on the go, so I signed up for the 100-day Daily UI challenge.

I will be detailing the designs that I put together through my blog in bunches or as individuals depending on how much text I want to write with each one. I may exclude some of the 100.

So far, in Days 1-5, I have been able to action the challenge using Adobe XD. Rather than following my usual approach of sketching and then creating higher fidelity, I am jumping straight into XD. I have been using Pexels for stock photos in my prototypes.  Continue reading

The Plate Armor Knight – Completed

The Plate Armor Knight – Completed

This plate armor knight came in a learn to paint kit from Reaper. Total paint time was somewhere in the 6-8 hour range.

Here is a picture of the unpainted model from the Reaper website. This model is from their Bones series of miniatures which are ready for painting.

Reaper has a few photos of different color schemes, but I followed the instructions in the box, which dictated a silvery-metal armor and blue accents.


Here are a few up-close details using a macro-lens attachment for my phone.

This slideshow requires JavaScript.

Learning: Angular Material + ChartJS Quickstart

I have been learning Angular Material. I also wanted to play with some charts, so I’m using ng2-charts which is back-ended by chart.js. Since I have been designing more at work I can feel some of my programming experience getting rusty. Also, since I sometimes design using Angular Material components, I find it handy to understand how they all work together.

My primary goals for this experiment were to put together an Angular Material webpage that displayed some data on a few charts. Both charts use a service to supply the data, which right now is faked out in the service. The first is a simple static calculation of compound interest. The second is a randomly updating series which changes every five seconds.


See the examples live. *Note, these may not stay, because I will surely overwrite them at some point.

Once I got these examples running locally I decided I would like to share them. I found a straightforward article about publishing to Google’s Firebase. Within fifteen minutes my examples were published. The other day, I did three releases.


UpLabs Craigslist Redesign Part 1: Analysis

UpLabs Craigslist Redesign Part 1: Analysis

I decided to participate in the Uplabs Craigslist challenge. In short, they are looking for Craigslist redesigns as if Craigslist were released today. I find this particular challenge interesting because I think the design is simple and straightforward like old-timey newspaper postings. Doing anything that gets in the way of the ease of operation is a failure case. Another challenge that Craigslist has is that none of the content is managed by Craigslist, leaving the content unedited by a professional. This post will be a 3-part series leading to the final result.

Continue reading