Archive for October, 2012

On a Whim, I Completely Changed the Site Theme

On Friday, I downloaded Windows 8.  Not long after starting to mess with it, I realized that its simplified display theme could potentially work really well for my guides.  I experimented with some visual changes, and immediately decided, for better or for worse, to dive in and revise the theme.  It’s pretty much all I’ve done all weekend, and I’m very proud of the result.  Of course, I have no ability to remain objective, so hopefully it doesn’t actually suck.

The visual change isn’t really the most significant improvement to the site.  I’ve simplified a few features that were overly complicated and interfering with site development – such as the static table columns and the FFXIII chapter select.  The biggest revision, however, was with cards.

I liked the original card style, but it really just seemed too busy.  Two different textures and colors, plus an arbitrary type icon, will do that.  The new style removes a lot of the unnecessarily complicated distractions.  The card header is now a solid color, which represents the type of the card – weapons are a dark red across all guides, armor is dark blue, and so on.  The actual card color is a standard grey in most cases, though I’ve added colors to the FF (NES) and Golvellius guides, and will be adding more.  These colors should be fairly obvious – for instance, in FF1 they generally call out elemental affinities.  The idea is to give an immediate visual cue to important information.

There’s still plenty more to do, but I wanted to get this up before the hurricane hit.  It’s a cool change, and I just needed to show it off before the world comes to a screeching halt or whatever.

Dipping a Toe Into Card Styling

The whole point of the “card” system is for cards to be nicely designed and full of all the information you could want at a moment’s notice.  Right now, they are… not that.  That still hasn’t changed, but I have taken a few first steps towards that end.  Specifically, I’ve added card styling (in the form of card and header colors and textures) to Final Fantasy for the NES, in addition to images for monsters, weapons, and classes.  This doesn’t actually address the main lack in these cards, which is important information that isn’t on them (in the case of FF1, this means things like who can equip an item, a monster’s elemental vulnerabilities, and so on).  But it’s a first step.

I do hope the coloration is at least vaguely intuitive.  I know the “type icons” in the upper left aren’t – if I had real graphic design skills, I’d create actual icons for those.  As it is, it’s more about consistency than being intuitive – for instance, armor is a blue square across every guide.  Once you notice that, hopefully it becomes a useful reference.

For the actual card and header colors, though, they should be somewhat intuitive.  The big problem is that the color and texture meanings vary by card types.  For spells, the colors represent the spell’s element, and for monsters they represent the opposite of the monster’s weakness (so it’s clear that if you see a red monster, it is vulnerable to ice, even if it isn’t actually a fire creature).  However, the colors of area cards are mostly arbitrary, and have nothing to do with elements.  Headers have similar issues – for many tables, the color represents rarity or uniqueness (so bosses or items that can’t be purchased tend to have gold headers, for instance).  For areas, though, the headers represent area type – black means dungeons, for instance.

It’s certainly confusing to describe, but I hope it makes sense visually.  If you have any suggestions for a way to make all this clearer, I’m all ears.  As it is, I’m going to continue tweaking FF1 as a sort of Guinea pig, then move on to the popular guides like FFXIII.

Version 4.0.0 Launched

Unlike previous primary version number releases, there is no layout redesign for 4.0.0.  However, there have been a huge amount of backend changes, and one very prominent change in how data is presented: cards.

When a friend introduced me to jQuery Masonry a while back, I had the idea for cards.  Basically, a “card” is a single-column, condensed bit of data from a single page.  You can see Masonry in use on the search page, but there will be more to follow later.  Most tables on the site will be displayable as a collection of cards, and some of the simpler ones will be displayed that way by default.

The biggest practical improvement from cards is that virtually every link on the site will load a card preview on hover.  Individual pages have also been redesigned so the entire card is always in view, including the notes that used to have that same behavior.

I think cards will make the site a lot more convenient to use, and I hope you like them.  There are a ton of other improvements in this release, but I’ll talk about those later.  If anyone is into obscure Sega Master System Zelda clones, check out the new Golvellius guide.  Golvellius was the very first game I really mapped out and made a “guide” for, so when I needed something relatively simple to use as a proof of the card concept, it seemed a nice, nostalgic choice.  Of course, the guide’s cards are somewhat incomplete, but you can’t have everything.

Two other quick things: I have rebranded my personal Twitter account into a GC Guides account, which I’ll be using to discuss updates, fun facts, or whatever else occurs to me.  Also, I’ve put the majority of the site code up on Github, if you’re some kind of code voyeur.

Anyway, enjoy 4.0.0!  There will be a lot more to come in the near future.