Design XD

Daily UI Challenge 8

Challenge number eight was to design a 404 screen. The screen I created could be used for something fun and coder-centric. In software development, I always refer to the black box as anything I want to abstract away. In this case, the black box is the page.

I included some faux messages coming from a log down at the bottom to play up the search for the box and arranged the shapes in relationship to each other to form a screen that is a bit anthropomorphic in nature.



Design XD

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).


Design XD

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. 

Off Topic

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.

Mangu Timur – 77148

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.