I was inspired by Bethany Heck’s excellent gundam-themed type exercise, and really appreciated that she took the time to detail her process and explain her rationale. Since she’s more of a print designer and my bread and butter is basically user interfaces, I drew upon my childhood love of Gunpla figurines to create a hypothetical redesign of the real life Gundam wiki.
My main rules were that I had to use content from the live wiki and other real-life sources, I could only use imagery that made sense in the structure of an (aesthetically pleasing) wiki, and had to arrange the content like it would actually work in a real-life website.
Working through several different versions with some excellent feedback from the Dribbble community, I came up with a design that felt like something I would want to use myself. I’ve included the first draft and revised version to show the creative process I went through.
Freight Text Pro and Avenir proved to be surprisingly good companions. Both have light but sturdy strokes and a focus on readability. Their construction nicely echoed the flamboyant, serif-heavy designs on old Gunpla packaging. Using Geogrotesque for the weapon schematics set them apart while reinforcing a mathematical, military theme.
Some vector icons I designed for an early design draft. I liked them, but they were too chunky and clashed with the thin typefaces and gentler color pallete.
One of the best pieces of feedback was to switch the direction of the robot.
When I made this site, I decided it was the perfect time to learn CSS Grid. At the time of me writing this, 0ctober 2nd, 2018, CSS Grid only has partial support in IE 11.
Since I intend for this site to be an example of what I can do, and not a comprehensive commercial product, I’m ok with that sacrifice in usability, especially since signs point to IE11 eventually adopting full CSS Grid support.
So with that said, I’d recommend using a different browser, such as Microsoft Edge. If you got cursed by a witch or something and have to use IE, you can contact me at firstname.lastname@example.org or you can check out my
Linkedin, Dribbble, or Instagram.