Daily UI Challenge 8

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.

404

 

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

erdh-capture

Continue reading

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

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.

Capture

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.