It's a Gundam Wiki!

My giant robot is bigger than yours

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.

I love the smell of model robot glue in the morningI think it’s a shame most wiki designs only use black and white with neutral imagery, a-la Wikipedia. If your wiki is run by dedicated enthusiasts, make it exciting!

The creams and greys reminded me of the pulpy paper from my favorite childhood manga comics. If you want to use a minimal color scheme, why not try to give it as much personality as possible?

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.

Old version

Revised version

One of the best pieces of feedback was to switch the direction of the robot.

I've been working on my cropping skills, and this project really gave me a better understanding of how to make my imagery play nice within the layout.

My takeaway was you usually want a visual hook in the top left with the imagery's momentum directing the viewer to the content. Then you crop the rest of the image as elegantly as possible.

Don’t overthink it and use the image as a tool to direct the viewer’s eye, instead of making the image the end-all be-all of the design.

Looks like you’re using Internet Explorer .
Unfortunately, this site uses CSS Grid.

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 patrick@delaney.design or you can check out my
Linkedin, Dribbble, or Instagram.