|
I'm a freelance 2d artist; My portfolio can be seen here.
Feel free to contact me if you have any questions.
|
  Dredmor UI, AO graphics/digital painting | 
Posted - 6/23/2009 1:49:33 AM | Dungeons of Dredmor
DD Title screen and main menu:
Once again I'm re-doing the whole UI for Dredmor, having come back to it after a few weeks in California and due to recent thoughts on UI design.
My original revised titlescreen (middle image) was a pretty straightforward riff on the Doom cover, though I never did invest the time in the "DREDMOR" text that would have made it really worthwhile. The real problem is that the composition focused attention on the center of the image while the (programmer art) Doom-style text mainmenu was overlayed on top. That's some busy text on a busy image so what it ends up with is too much going on; the text is difficult to read and there's no flow to the design at all. A user doesn't know where to look or how to interact with the buttons
The new titlescreen takes the original picture with it's reference to Doom and moves the focus to the left to allow for a large and tactile UI (to match the in-game gameplay UI) on the right. I do very much want to revise the font, touch up the background art, and remove that awful bright-green text from behind the menu-scroll, but it feels much more sensible layout this way: The users tends to 'read' a screen from left to right, so they see the main character blowing up weird bad guys then go to the menu that allows them to jump into the game to do just that.
  
DD Dredmor skill selection screen:
The left shot of the old revised skill selection screen is an example of my tendency to over-design. You've got here a scrolling list of skills to choose from in the left panel. When clicked on, the skill then appears in the "Your Hero" box (and I forget if you can remove it by clicking on it there). When one mouseovers a skill, its description appears in the lower-right panel.
Though at some point I thought to maintain a left-to-right attention flow, it's not at all clear what is supposed to go where and what the player is able to click on and what they are not able to click on -- the copper arrows between the skill list and the "your hero" box, for example, are not buttons but look like they could be. And with the skill mouseover-description, the skill name being described is not shown anywhere, nor is the skill name mouseovered even highlighted; the only way to make a connection between what is going on in the description box and the user input is by seeing the text change as the mouse moves around. Not good.
On the right is the new system of skill selection following what I believe I described in my last post as "the simplest possible UI design": That is, show everything at the same time. Every skill is in the grid and is represented by an icon (which will be used elsewhere, in the in-game character skill info panel). When selected, a skill is set to remain highlighted (as opposed to it's default shadowed state) so that the player knows that it is active. While a player mouseovers each icon, both the skill's name and its description appear in the bottom box. The un-used skill points remaining to be used appear at the top and, when used up, the "done" button will light up, inviting the player to continue on to the game.
This revised approach makes skill selection more concrete and imminent. The player interacts with tangible skill-icon-objects rather than pushing around abstracted elements in visually disconnected lists. It is straightforward and tactile, just like (what ought to be) the underlying principle of UI interaction throughout the entire game.
 
Aragon Online
Graphics for Aragon Online; Feel quite free to check out the game because, well, it's free.
AO Development Icons:
Some icons for the various resources and corresponding resource-harvesting structures that one can build:
Well. I haven't done the mines yet, so you've just got two types of mineral there, metal and gems, without the corresponding levels of mines for them. I really do quite enjoy the little progressions of quality and details that need to be managed to express all of these. ('Guess that's why I draw little meticulous sprites for everyone, 'eh?)
AO Digital Painting:
Yes, the fun stuff comes last: Fantasy character portraits!
Now part of the deal with these is that they're aimed to appear at 80x80 pixels and they're priced in a manner that demands, ah, artistic brevity on my part. It'd be great to spend 16 hours on every picture, but when you have to do tons and tons of assets and pay rent, you've got to get things down with some consideration for time. So in this sense these portraits I've been doing are a bit like a speed exercise for digital painting (though, admittedly, I usually spend too long on the ones I end up having more fun with). It's good practice.
1. 2. 3. 4. 5. 6.
Thoughts on the images:
1: I just hate the hammer and the hand holding it. I figured that a visual element with extreme perspective distortion was necessary to show the scale of the guy (a Titan warrior), but it just looks weird. I'd have to redo it (for the fourth time) -- with reference -- to be happy.
2: It's probably pretty obvious that I like drawing evil more than good. Just so here. I admit, I totally cheesed the skull and hand on this one. The skull and smaller eyes are to show scale, as Trolls in this fiction are a good bit larger than humans.
3: A little secret: I'm terrible at drawing horses. The only way I can manage is through reference images, so I don't know if there's any way I could possibly be happy with drawing a centaur. I did what I could, but I still can't stand it.
4: Again, evil is more fun that good. And again, skulls for size reference -- I was thinking of an evil nordic-style Giant here.
5: Human mage. Note dramatic underlighting; I seem to always draw mages holding something glowy near their face because it makes pictures look so cool. Also: to come up with this image I asked a friend what she thought would make a hot guy, as she's been complaining about a lack of available hot guys. What it boiled down to, I think, is that she wants Johnny Depp dressed like a wizard. (Hear that guys? Go get your robe and wizard hat, 'cause that's what the ladies are all about.) Had to add facial hair so he didn't look like an elf.
6: Now I had way too much fun with this and spent far more time than I should have. Dramatic underlighting is always a winner, as said. And I'm not going to point out the many flaws in it this time because I just want to enjoy it for a moment. (But a hint -- if you want to see how screwed up a picture of a face or figure you've drawn looks, take the image and mirror it; You'll see a bunch of huge flaws in the shapes, volume, balance, perspective, and everything. If you ever want to make something look really good, flip it back and forth a few times while correcting errors.)
Here's a shot of that last one in photoshop (at half size), as I was drawing the background. I use the default brush to do nearly all of my painting, though this likely isn't very kosher and I am probably missing out on a lot of cool effects. To use asymmetrically shaped brushes I'd really like that 6d pen. By the way. If anyone is feeling generous.
And here's an image showing the progression of the portrait. I usually don't document things so well, but this time I started a new layer every time I sat down to draw so the history of the drawing is saved in the layers. Neat.
| |
| new portfolio thoughts on design | |
Posted - 6/10/2009 5:57:48 PM | New Portfolio
Or: A few thoughts on the web design of my portfolio page
I finally sat down for a few hours and completely redid my portfolio and cv/resume like I've been meaning to do for quite some time. The problem, you see, is that my old portfolio showed who I was as an artist a year ago -- I need a portfolio that shows who I am as an artist today. Or, um, yesterday, because I don't update my portfolio every single day, obviously. Moving on.
Looking over my old portfolio, I'm amazed at the broken links and typos I found, to say nothing of unnecessarily baroque design that is, in hindsight, much more confusing than impressive. And the constrained size! -- I mean, seriously, anyone who is viewing a webpage on an 800x600 screen has bigger problems than deciding who to hire to do their artwork.
So: images are links, the new portfolio is on the left and the old on the right.
 
I'd like to elaborate on a few points of portfolio and web design that came to mind as I went through this process.
Layout
My old page had two separate panels of buttons, one for four main links, one for three different galleries. That's seven links in total grouped into two different places in the layout.
During redesign I noticed a number of areas that could be simplified; refactored, if you will. For instance, the "contact" and "freelance work" sections were saying the same thought in two parts in different places: "contact me to talk about work". So I put all of that into one section called "contact" that has both a paragraph selling myself and the email contact. Done.
As for the three different galleries, "game art" was the one that contained everything important, and while there were a few images in "digital painting" there was nothing at all in the "other art" section. The obvious move was to rolled them all into one link called "gallery".
The whole business with two sets of links in different places was an awful idea, I now realize. (Of course I can justify to myself that when I made my portfolio a year and a half ago, I didn't know nearly as much as I do now.) I think I made the two separate link panels because I love to make things complex for their own sake, I love baroque aesthetics. The layout design was made more for the idea of having a horizontal panel below the title and one on the side so it looked like a cool sci-fi control panel than for usability.
In my new portfolio page there is just one bar with four links under the title. The viewer needs to remember only one place on the page to find links to navigate the site -- and they're pretty obvious. Much better.
Navigation
When making games one must consider the number of dimensions the player has to conceptualize while navigating the game-world. In a one-screen game like Tetris, everything is right in front of the viewer. In Mario, the world scrolls in two dimensions. In Quake, the world is three dimensional -- important things can happen anywhere, and the player has to do that much more mental work to conceptualize what is going on.
The same applies to UI design: The simplest UI puts everything the user needs in front of them. But this is not always possible because a balance must be struck between usability and showing content, especially in an application that is as content-driven as a portfolio.
To apply this point to what I'm getting at: In my portfolio I've tried to limit the number of dimensions that need to be conceptualized as much as possible. The only way to move is to scroll up and down (and, possibly, to click on a thumbnail of an image to view a larger version) -- and all of the links are always at the top of the screen. Further, all interaction takes place within the bounds of common html -- no Flash or Ajax or whatever fancy stuff that introduces new, possibly unfamiliar procedures for navigation.
(I must admit, I rather loathe Flash-based webpages. People should consider themselves lucky that I even have Flash installed. )
Graphical Elements
I committed the same error of valuing complexity for its own sake with regard to the graphical elements of my old portfolio. I indulged in some extremely thick and complex pixel art borders around the whole content panel along with a fancy background effect. This is cool for showing off my skills, yes, (and may have been necessary when I had very little content with which to fill my portfolio), but the graphics get in the way of presenting the content of the portfolio itself, which should be the point of the exercise in the first place.
The old graphics are cumbersome and distracting, basically, and would do better as an entry in the portfolio itself than surrounding the portfolio. In short: My desire to show off through the design made the design cumbersome. This is an important point, people! All the time I see people (and myself) trying to show off their ability by making the interface for their portfolio what, to them, appears to be "fancy" (especially with incomprehensible Flash elements, as said). Or those thumbnails that don't show anything at all about the picture they link to in an attempt to appear artistic. Like this:
Never do that, please!
Or, to get back to confessing my sins, I shouldn't go using all sorts of unnecessary sections and links that I never fill with content anyway hidden in meticulous, opaque pixel work. One must resist the urge to over-design -- stay on message.
The new portfolio graphic (just one!) is far lighter weight but still, I think, pretty cool-looking. And it shows off some of my ability, sure, but also some restraint; Heh! Kinda. I more-or-less stuck to one color, one simple movement (horizontal), and some nice texture with interesting things happening to the color within a small range. For whatever it is, it is far more elegant than my old layout, that's for sure.
Coding
I won't go on about it because no one comes to be for coding advice, but in my old portfolio I tried some crazy stuff with css and did some rather poor php. It was, to follow my theme here, more complex than necessary and a poorly executed attempt to show off. At some point last year a friendly hacker emailed me to point out that my rather poor php opened my website up to an exploit, which is why I hastily converted the whole thing to pure html. Thus with the broken links and an unprofessional index page.
And my css file was a complete mess. Still is; I need to clean it up.
So yeah, it's fun to overshoot one's knowledge to learn how to do something new, but it's probably best to just do it correctly in an application you need to be functional.
Content
Content is the area I still have to really clean up.
I've somewhat taken a documentary approach of showing everything rather than showing a (best) selection of my work. This is not only a matter of my love for overly-complex aesthetics; I also need to quash my deeply help value of being fully honest through full disclosure and, instead, put my best foot forward so that I look better than I am -- or, to put it politically: I want to show how good of an artist I can be for you.
That said, I need to go over all of the old images (half of which I just ripped from my journal) and replace them with high quality files, add (informative) thumbnails in place of larger images, and cut down the amount of content to show only the best pieces ... which will also make navigation simpler.
And that's how it's done
Right; I still have to add a printable version of my cv/resume, make the contact section friendlier with a clickable email link, and clean up a few things -- for instance, making the artscum.net text into a link to the base domain, and my css file still needs that spring cleaning. But in all I'm much happier with how the page looks and glad to finally have my portfolio updated.
[And I'll update my head on this journal page to match the style of my new portfolio ...]
Back to game graphics posting next week, let's say.
| |
|
| S | M | T | W | T | F | S | | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | | 24 | 25 | 26 | 27 | 28 | 29 | 30 | | | | |
OPTIONS
Track this Journal
ARCHIVES
October, 2009
July, 2009
June, 2009
May, 2009
April, 2009
March, 2009
January, 2009
December, 2008
November, 2008
October, 2008
September, 2008
August, 2008
July, 2008
June, 2008
May, 2008
April, 2008
March, 2008
February, 2008
January, 2008
December, 2007
November, 2007
|
