The Gamer Corner
We have a sarcasm tag because we need a sarcasm tag
Lost your password?

GC Guides Visual Design/Fun With Textures

GC Guides Visual Design/Fun With Textures – June 15, 2012 5:29 PM (edited 6/15/12 1:29 PM)
Talraen (2373 posts) Doesn't Play with Others
Rating: Not Rated
For a while now, I've had a number of ideas for different methods of presentation on the Guides site. Foremost among these has been the idea of "cards," basically standard-width versions of individual pages. They would include only directly relevant stats, and little or no cross-referenced data, being approximately equivalent to a table row but with a different presentation.

Since those initial ideas a few things have changed, including me having an actual copy of Photoshop, and I've decided that it's OK to editorialize a bit more. To that end, I resurrected another idea I had a while ago, of color-coding item names to denote rarity and whatnot. That was always a bit iffy (though I may do it anyway in the end), so I decided to look into changing something other than the font - in this case, the nameplate. My first thought was to use metallic nameplates, since bronze-silver-gold is a pretty good starting point. Solid colors don't look metallic, so I went looking for metallic textures. That's when a cool idea (which seems kind of obvious, and maybe it is but whatever) hit me: instead of using a "silver metallic" background and a "gold metallic" background, what if I just created a mostly transparent "metal" background?

It turns out that if I do that, it looks pretty great. Although I think the shininess is still a bit too pronounced (I did all this between Diablo sessions last night, after all). However, I made a second texture, which is sort of stony, and applied that to the rest of the card, and that looks fantastic. I didn't play with multiple colors in the below screenshot, but it looks good pretty much regardless. See the results for yourself:

http://www.gamercorner.net/images/cards.JPG
This image is a jpg, because I didn't want to upload a 1 meg png, but you get the idea. The weapon icons look terrible, and the "FF1" thing looks more terrible than it already was (which was pretty terrible). However, I think the idea is sound in general. My intention is to present as much data as possible in as little area as possible, which means using some visual tricks. It would be difficult if not impossible to have everything be 100% accurate (as you'll see below from my list of ideas), so this will end up being manually controlled, which is probably for the best. Here's my basic design for the cards so far:

• The header row consists of an icon denoting the type and subtype of the card. The type on these cards is "weapon," and is indicated by the red circle. The subtype is the weapon type, which is the icon. Clicking this will bring you to the weapon page. Unlike tables, it will be possible to combine types in a list of cards, so you can see what the different things are at a glance. (This could happen in something like search results, or an item list from a given map page.) The right side is a button indicating what game this is from. These will be all fancy and editorial, and will link to the guide home. I plan to use these cards to reference similar or identical items across games, but mostly these will all be the same, so I'll keep the size to a minimum. I also want to make space for a checkbox on the card, which has the same effect as the checkboxes on tables.
• The middle of the header row is the name of whatever this thing is. The design will be such that if it wraps to two lines, that's supported, although probably not the prettiest thing in the world. I may editorialize the font size to prevent that, depending on how it goes. The nameplate will likely indicate rarity or importance, but could be used for just about anything. For instance, I might give each character their own nameplate color and texture, just because. Nameplates may share a color but have different textures based on some criteria. Alternately, maybe each monster type (dragon, undead, etc.) will have its own nameplate. Monsters of multiple types may have just one, or some weird "multi type" nameplate.
• Normally, the card will also show a stat block below the header. However, it will be possible to show the card as a header only, for quick lists. Hovering over this header will show a larger version of the card. The stats consist of any important numbers, as well as visual representations of anything else that's important (elements, who can use it, or whatever). The idea is for this to be condensed, and they will be customized on a per-type basis.
• There will also be a larger version of the card that includes editorial notes, such as those seen on individual pages. Hovering over a medium-sized card will show this, and this might also be seen when hovering over just the header.
• Hovering over a link to the page will also bring up the full card. This will allow me to remove some less-important info on tables, and make it easier to see things at a glance with less loading.
• Finally, there's the background color of the card. It will have to be dark, because switching font types is lame (though possible), but it can have different colors or textures. I like the idea of having different textures for different types - stone for armor, metal for weapons, something organic for monsters, that sort of thing. I also like using colors to indicate something, such as elemental nature.

So let me know if you have any other ideas, and if you think all this stuff seems cool and useful. I'll try to come up with some more complex examples than the one I have here, too.

--
There is no Mythril Sword in Elfheim
Re: GC Guides Visual Design/Fun With Textures – June 18, 2012 1:46 PM (edited 6/19/12 1:00 PM)
Talraen (2373 posts) Doesn't Play with Others
Rating: Not Rated
I realize I'm kind of doing this backwards, but I thought this was an appropriate place to list the planned features for the next big site update. This one could be a while, though, because it will involve a pretty hefty backend rewrite. Some of the features could be shoehorned in, but others (e.g., by-column table searches) really can't. There are a number of basic code and database changes I wanted to make anyway, so this is a good time to do it. Without further ado, here is a list of planned changes:

Tables
• Each column will have its own search box. These can be general text searches, term searches (matching full text, e.g. for which classes/characters can use a piece of equipment), or numeric range searches, depending on the column. The general column search will still be available on a case-by-case basis, but will only search on text-based fields.
• Columns will be able to be toggled on or off. Default views may hide less useful columns. Your column preferences will be saved in cookies. I'd also like to make columns re-orderable, but I'm not sure how feasible that will be.
• Data may all be available on a single page (e.g., with scrolling). This is still very much in the planning stages, however.

Cards
• Most if not all tables will have card views, as described above
• Cards will be used in several contexts: in editorial pages (like a walkthrough), referenced in the sidebar of item pages (e.g., related monsters or the same weapon in other games), and for certain cross-referenced tables of item pages that are sufficiently short
• There will also be an option to change any table's output to a card view
• Cards may also be used in a new game-wide search that isn't google based (e.g., you could search for "mythril" and it would return mythril weapons, armor, and anything else with mythril in its name or description)
• All links will show cards when you hover over them

Item Pages
• Cards will be used here, but supplemented with any data not shown on the card, as well as cross-referenced data
• Notes will be presented more prominently here and in a larger font, rather than on the card
• The side bar will be used to reference related cards rather than for notes

Added 6/19
• Facebook comments on most if not all pages, as well as a Facebook login

--
There is no Mythril Sword in Elfheim
Re: GC Guides Visual Design/Fun With Textures – June 19, 2012 8:10 PM (edited 6/19/12 4:10 PM)
Cuzzdog (1522 posts) Head of Gamer Corner R&D
Rating: Not Rated
Here's an idea for your cards: let users create some kind of scratch worksheet where you can drag and drop cards onto it and re-arrange the cards in any order the user wants. That would let them find the data they need, and create an easily accessible work space for them to work off of or print out.

For example, when I was going through FF13-2 and going for the "fight every monster" fragment, I would check my list of monsters against your master list, and then fork open different windows for each monster I had to track down. And I was only able to do that for 5 or 6 monsters at a time let it get too unwieldy. If I was able to create a custom list of monsters that I could have seen all their relevant information at a glance, it would have been much easier to cross off getting all monsters.

Re: GC Guides Visual Design/Fun With Textures – June 19, 2012 8:20 PM (edited 6/19/12 4:20 PM)
Talraen (2373 posts) Doesn't Play with Others
Rating: Not Rated
I like the idea, but I'm not really sure how to set up a UI for it. However, I do have two similar ideas which are a bit more straightforward both to create and use, so let me run those by you.

The first is to allow filtering on table checkboxes. Since every column will have a search, a simple Y/N search on the checkbox column will let you see only things you've checked, or only things you have left. You will be able to output any table data as a collection of cards, which lets you easily create just the situation you've described.

However, that is pretty limited. For one thing, you can only have one type of card, which is probably fine 99% of the time, but isn't as cool as I might want. Also, you can only have one set of checkboxes per table. I'm not really sure what situation would make you want different ones, but the point is you can't easily create some kind of grouping. I could add saved searches (like the ones you can make on the game list on this site), which would let you create groups provided there's some specific criteria that work.

The other idea is basically a card comparison tool. The idea here is largely based on Diablo 3 - that game makes it super easy to compare items, and it is great. A number of ideas I've had, such as very large representations of the most important numbers (e.g., attack and accuracy on a weapon), relative graphs of stats, or even a combined "effectiveness" score (which would be somewhat arbitrary but should serve as a good baseline comparison), all come from the same concept.

The UI is, again, the hard part, so here's what I have in mind: one column of the page is dedicated to a stack of cards. All but one of these is limited to just the header, with the card you're hovering over expanded. Basically I picture it like sort of a rolodex. From there, there are really two ways to go (and I could do both). My initial idea was that you choose a card, and it goes to the other side of the page, and then the page also displays comparison data between it and whatever you are hovering over. So it would say "Weapon 1 has 15% more attack than weapon 2" or whatnot, for each relevant stat.

The other way is to do what you've suggested, pretty much straight up - you have the collection of cards on one side, and you can just pull out as many as you want into a collection. I could even have it so you can switch which type is in the "rolodex" so you can pull out weapons, armor, monsters, or whatever else at the same time. Basic table controls (a search and a checkbox filter at the very least) could make this cool. Of course, what to do with these collections, and how to store them, is an unknown. But these are all cool ideas.

--
There is no Mythril Sword in Elfheim
Re: GC Guides Visual Design/Fun With Textures – June 20, 2012 11:53 AM (edited 6/20/12 7:53 AM)
Cuzzdog (1522 posts) Head of Gamer Corner R&D
Rating: Not Rated
I think I like the last idea, about the custom rolodex, the best. In my head I was seeing some kind of small container off to the side that you could just drag and drop cards you wanted to save into. One thing about the rolodex though, you should have the ability to flatten the whole rolodex so the user can see all the full cards at the same time.

Active Users: (guests only)
1 user viewing | Refresh