Interface Design Recap

Here is a quick overview of my five-week-long online course on Interface Design:
Week 1
       Learning to use Illustrator. Create a scene with three buildings on a street corner using proper perspective. I used vanishing points and lines on a construction layer for the brick and concrete building outlines. For the brick pattern, I used the perspective tool in CS5. For the house in the distance, I used the pen tool to traced portions of a photograph I found online, with some modifications and omissions. Other than that, it's just a lot of gradients and simple shapes using the pen tool.

Unit 1 - Individual Project - 27 March 2011

Week 2
       More advanced practice with Illustrator. We were asked to trace a somewhat pixelated black & white image of a Japanese pagoda-style bridge. It was mostly about using the pen tool properly and experimenting with various effects. I used multiple layers of transparency for the shrub on the left. The water was made using around seven copies of the same shape, set to low opacity, with the same radial gradient in a different position on each. I was trying to simulate the interplay of multiple ripples in water and I think it ended up being an effective technique.

Unit 2 - Individual Project - 3 April 2011

Week 3
       Interface design for a role-playing game. We had a lot of freedom on this one. It was just a matter of creating an effective on-screen interface for a hypothetical RPG. The concept I came up with was a wizard focused RPG where, instead of choosing a class, you choose a school of magic to focus on. I started with the wizard, staff, and lightning before starting the background.
       My initial idea was some sort of dungeon or castle interior but my wife suggested some mountains. I figured I'd give it a shot. The mountains looked alright but it wasn't a very good background, so I knew I needed a mid-ground filler. The dark forest really helped out. My teacher made a good observation that the perspective and detail of the trees is lacking. It could definitely use a bit of work.
       The interface itself is pretty straightforward. The health bar is green and additional lives are represented by potion bottles, with spots for two more as your character gains power. Mana works in a similar way. I used a red bar around the character portrait to track progress toward the next level. Since it is a half circle, it could be a simple object rotation in the code to fill the bar. A spell book as the menu system, inventory, and quest journal is a bit of an obvious choice, if a little cliche.

Unit 3 - Individual Project -10 April 2011

Week 4
       Discussion board assignment to make a flow chart of the main menu interface for your favorite game. It was just a matter of documenting how the menus link together and adding a little color to keep it interesting. I left out some of the 'minor' or repetitive menus for the sake of space. I think the intent of the assignment was to get students to think about the planning involved in the menu system for AAA titles.

Unit 4 - Discussion Board - Elder Scrolls IV: Oblivion

       The Individual Project for week 4 was to create a flow chart for our casual game concept. The intent, for students who take most courses online instead of on campus, is to design the interface for a game that will be created over a series of classes. I got a bit ahead of myself on the graphics, since this was just supposed to be a simple flow chart concept.
       I created a custom font for the logo. I started by choosing 2-3 fonts I liked, converted them to outlines, and began to mix and match (or simply overlap) elements into something I liked. Then I froze them on a layer and traced over top, adding the curves and points to my liking. I made sure to have a few guidelines in the background while working but I probably could have used a few more.

Unit 4 - Individual Project -17 April 2011

Week 5
     The discussion board was to post your logo and Unit 4 flow chart for discussion. I received several nice compliments but no constructive criticism. I do like how it turned out but I know it's not perfect. Any critiques would be appreciated. Perhaps the interface is too simplistic? I could call it sleek and easy to read but I could also call it plain and boring.

Unit 5 - Discussion Board - OrcRaft Logo - 17 April 2011

Unit 5 - Discussion Board - OrcRaft game play - 17 April 2011

       The individual project was to create a poster for the game (80s style) using finished versions of the screens depicted in our flow chart. Since I went overboard on the graphics during the 'flow chart', there wasn't a whole lot to change before adding it to the poster layout. This might have resulted in a more detailed composition than the assignment technically called for... but who's to say I wouldn't have done this much with it anyway?

Unit 5 - Individual Project - OrcRaft Poster - 23 April 2011

       I definitely learned a lot about Illustrator in this course, since I haven't opened the program in over a decade. I think I was introduced to it back in my freshman year of high school, circa 1997, though I may have used it a few times for basic layout & printing at Lawrence Tech. I think I learned a few things about interface design during the past 5 weeks. One would hope so. You always learn a lot by doing but I would have liked to go a little more in-depth into psychological and usability issues involved in good design. The class barely scratched the surface, really, but that's not unexpected given the nature of this program.

.....and I just posted another extremely long post. Oh well, it was worth it.

Term 5 Midterm

It sure didn't take long to completely destroy my intended schedule. Part of my problem so far seems to have been that I like to make long, intricately composed posts. I've also had the intention of working through my backlog of completed projects in order to keep things somewhat 'in order'. So, I'll need to worry a lot less about those things and with posting exactly once a week, rather than just posting whenever I have time. Eventually, I'll run out of past projects and have to post exclusively about current projects. I might as well get straight into it.

This term I'm taking an on-campus 10 week Scripting 2 class, I just finished a 5 week online class for Interface Design, and, in a few more minutes, I'm starting a 5 week online class for Storyboarding and Storytelling.

The first few weeks of Scripting 2 was a general recap of Scripting 1 but we quickly bypassed the old material and got into more challenging work. We're using Flash CS5 this term. In Scripting 1 we coded everything on the time line but now we're learning to do it properly and trying to wrap our heads around the hierarchy of classes, public & private functions, and separate Action Script files, among other things. Our current project, the last one before our final project begins, is a bit of animation and character movement functions. Here is the character I came up with and animated, called Centasaurus Rex:

Once the final project kicks in, I'll follow the process week to week, as much as possible.

I think I'll make a separate post about Interface design later on.

Edit: I had to fix the date. It was set to 17 April, when I first saved a draft related to my tardy posts.