2DDS - update | Symbiote design document

2dds_postpic.gifAfter many iterations and time spent in Illustrator, I finally managed to pull together a brief design document. Please use this document for personal viewing only.
http://www.mediafire.com/?xhmthmrnemz




Those of you who have been following my progress will notice substantial changes since my last post. The most characteristic being a different approach to the symbolic language. After a great deal of feedback, I decided to simplify the symbols even further and used more filled color regions instead of strokes. The original designs became hard to distinguish between one another when viewed as a group, so I pushed the contrast of the images along with how they're cropped.

Towards the end of the document you'll also see my vector illustrations based on the original pixel sketches I posted long ago.




2DDS - update | symbolism in Symbiote

| 2 Comments
2dds_postpic.gif

One of my major design goals in Symbiote is to streamline the learning and remembering experience. Here are some techniques I'm using to work towards this goal





In order to understand the challenge of reaching this goal, take into consideration these factors...

• Resource management is a core element of the game. It's crucial that players know exactly what item they're looking at, and places it can be used
• There are a lot of these items
• My own research has shown that games similar to Symbiote tend to attract a very diverse audience. This means that not everyone playing may speak English
• The way the game plays is significantly different than how most FPSs and TPSs play. I need to make the transition a comfortable one

One graphical solution that takes all of these points into account, is the use of pictograms. For an excellent explaination of the benefits of using this type of communication, here's a great resource I came across:
Pictograms

Even people who are illiterate can recognize a familiar shape and take meaning out of it. All that's required is to have eyes, and the ability to remember something you've seen before. By symbolically representing every important item and concept in the game world, I can break the language barrier, and in turn create my own language.

I have drawn out a large quantity of symbols, and am at the point where I have to think how to best present them to players. Here are a few examples:
sym_symbolset_1.png







These symbols outside of their natural habitat (the game) aren't as effective as they are when you're in the game seeing what they represent. Here are some elements they all make use of:

• COLOR: The particular shade of blue you see represents what I call "The Team". They are all the real people playing the game. It's present on everything relating to YOU as a member of The Team. We're accustomed to seeing 'team colors' in sports, the military, video games, and in country flags. It units groups of people as one unit

• SHAPE: Circle, Square, Triangle. These basic containing elements tell you what KIND of object is being represented. This ensures that if you miss one 'visual message' that you have another to work from. Circle = Object, Square = Place, Triangle = Warning

• COLOR 2: Once you've learned what kind of object is being talked about, you then look at the contained element to know WHAT is being talked about. This object also has a color. In the primary featured level of Symbiote there are 4 businesses, each with their own symbol and color. By an object being green, players will make the connection that it's associated with the farm. This, of course, requires that players have visited the Farm before hand to witness the plentiful use of green

• SHAPE 2: Finally we get to the most specific symbol. What is it? Is it the farm? Is it a farm worker? Is it the tools at the farm? Is it a machine that requires an item found on the farm?

If you're curious, here's a break down of all the information gained from the symbols from left to right:

1. a member of my team
2. cooking equipment that belongs to the kitchen
3. the farm area
4. something very important involving my stomach! (hunger)
5. a machine that converts a bowl and dough into bread, all of which belongs to the kitchen

news - design | symbolism in signage

blog_exitman.gif


Anyone who's part of the graphic design world (or has suffered through me talking about it to you) knows how seemingly small, unimportant parts of our every day life only exist as a result of extensive research and experimentation. Here's an article I came across discussing one such instance
The Big Red Word vs. The Little Green Man

2DDS - update | Symbiote

2dds_postpic.gif

Here's some of my first visual concepting for my game, Symbiote







A game consists of much more than what can be seen. Symbiote began as a piece of paper littered with nouns and adjectives. A rigorous and analytical process of refining what it is players do when they spend time in this world. This is usually referred to as the "gameplay".

Now that I'm finally nearing the end of that phase, it's time for me to switch to the other side of my brain. I took a look at the original adjectives that defined how the game plays, and translated them into something that can be seen. I also wanted to fight against the grungy monochromatic palette popular in games today.

I settled on a simple, warm, undersaturated palette.
blog_palette.jpg













I then wanted to see these colors used some what in context to how they'd be used in the game:

blog_char_concepts.jpg




























The previous image also shows my first concepts for characters. I prefer to 'sketch' in pixel art so that I focus only on the color and simple outlines, and nothing else. Pixels are the most basic visual unit of digital art, and are helpful in early concepting

2DDS - update | Avatar Project

2dds_postpic.gif

For our first project we were required to create a virtual avatar that represents us, and our own style of art






One of my greatest interests in the art and design world, is video game design. I've taught myself skills needed for just about every position on a typical game developer team. For this avatar project, I choose to represent a profile view of my face in untextured polygons. I decided to keep it "raw" looking in order to give the viewer the idea that don't just associate myself with the 3d modeling world, but create them too

I used 3D Studio Max 9 to do all the actual modeling, then Illustrator to vectorize the image for printing.

The final image:
avatar_final1.jpg
















These pictures of my face were used as reference within the software. For these kinds of images, it's extremely important that the two angles are exactly proportional to one another. Professionals typically have a system of mirrors set up around their actor to ensure perfect accuracy. I'm not fortunate enough to have this set up, so I had to wing it
avatar_refpic1.jpg










My original concept for this project included my body as well, but I decided not to use it, and to focus on modeling the profile of my face instead. Because I focused on only the profile view of my face, it does not look accurate from the front. Here are two screen captures:
avatar_3ddscap1.JPGavatar_3ddscap2.JPG

2DDS | Introduction

2dds_postpic.gif

As part of one of my university courses titled 2D Digital Studio 2, we are to update our classmates on our progress through blog posts. All posts regarding this class with be titled with 2DDS, use the 2D Digital Studio 2 image, and contain the tags "2dds" and "digital studio"

preview - general | Google Wave!

| 3 Comments
blog_googlewave.png

I recently received my invite to the Google Wave preview! It's better than I thought!
Google Wave Website






After watching the hour long demo video that Google gave at some conference, I was worried that this application would be cluttered with so many features that you would struggle to do basic every-day tasks like sending a message to somebody. Having finally tried it for myself, I now know that I was completely wrong!

Nothing needs to be downloaded to use this application. That fact alone is enough to make me prefer this over all other messaging and collaboration apps. Now that I'm registered with it, I simply go to wave.google.com, and I'm instantly there.

A "Wave" is an online object that can consist of any kind of media you can image. Some examples are: text, images, links, videos, google maps, a voting box, and any other 'gadgets' that developers will create in the future.

Any one of your contacts that you add to a wave can participate in it, meaning they can view, contribute, and comment on anything there. Think of it like an informal wikipedia article within a small circle of people.

The design of this program is clearly influenced by Facebook and AOL Instant Messager. Users have an avatar/buddy icon that represents them. You can set your away message/status. Any media added to a wave can be 'commented' on. You are informed which of your contacts are online and offline. You can organize contacts and waves into 'folders'. Waves can be 'tagged' so that you can easily search and categorize them. Clearly Google took popular internet communication conventions and put them all together in one application

If enough people start using this instead of other messaging apps, Google Wave could easily replace them all



news - general | Customer Wooing

| 1 Comment
blog_wooingimage.gif

This clever comic shows six major ways that customers are 'woo'ed.
Customer Wooing Styles





I originally discovered this on The Donut Project blog that I posted last week, which still stands as a great resource for all things 'designery'.

news - general | great designer blog

blog_donutpic.png

I came across a fantastic blog created by a group of graphic design students from Kent State University's Visual Communication Design program.
The Donut Project




Not only is the content of the blog close to the kinds of things I love to read about, but the layout is nice an minimal as well. They even use Vimeo, which I've always believed has a video player superior to YouTube's.

news - web design | Horizontal Scrolling Layout

| 2 Comments
blog_essentialpic.png

Here's an unusual approach to content layout of a website.
Essential Design's Website





We're all accustomed to scrolling up and down to view content of webpages. This company decided to take a massive design risk and design their page from left to right. Once you start clicking on links, and using the navigation at the top of the page, you soon realize that you never leave the page. You're guided to another part of this huge 'timeline'. Links within pages of this timeline load right in the page itself.

I'm a big fan of experimentation, and I am happy to see this. However, I personally can't see this catching on. I've viewed this page numerous times while writing this blog post, and still I don't feel like sitting down and reading it all. Not because of laziness, but because it's breaking the way I've been conditioned to view web content. Vertical layouts almost force you to read as you scroll, but horizontal layouts let you keep on scrolling.

Find recent content on the main index or look in the archives to find all content.

Recent Comments

  • Nick: Hi David, I was looking at your blog and I read more
  • Skyblu: It is very cool to finally see this come to read more
  • elmiranancy: write this great post. I am still new to web read more
  • Facebook Layouts: Web 2.0 include web-based communities, hosted services, web applications, social-networking read more
  • David: I have 23 invites. If you email me with an read more
  • jemiro: so lucky have a invitation, i dont have invite :( read more
  • Facebook Layouts: You can legally look at the site to get ideas read more
  • hanum: I've just got 20 Google Wave invitations again :D read more
  • Anonymous: HA! Great example. Looks like a good read. Thanks for read more

Recent Assets

  • sym_symbolset_1.png
  • blog_exitman.gif
  • blog_char_concepts.jpg
  • blog_palette.jpg
  • avatar_3ddscap2.JPG
  • avatar_3ddscap1.JPG
  • avatar_refpic1.jpg
  • avatar_final1.jpg
  • 2dds_postpic.gif
  • blog_wooingimage.gif

Categories

Pages

Powered by Movable Type 4.31-en