theJANG.net
Bamidele O. Shangobunmi
Self Portrait in 3D

Self-portrait in 3D, 1997

Design history

In 2009 I took advantage of a pause in my hectic daily schedule to look back at some of the random things I've been involved in over the years. Though user interface & visual design for the Web had dominated my life through more than a decade of full-time employment in the field, I realized that my interest in design extended back literally as far as I could remember. As I dug through boxes of dusty files, great old memories popped out, and I decided to spend the time finally digitize & document some of the highlights of my design journey.

This whole thing only makes sense to view in linear fashion, so I won't bother with any formalities like a persistent nav menu, collapsable sections, or deep breadcrumb trails. Just dive right in!

The early days

To be a kid again...

It seems to have all started with a crayon. This is the earliest surviving drawing from my childhood:

Bamidele's earliest drawing

I clearly remember making many, many of these portraits. Yes, I said portraits. I'm pretty sure this one was supposed to be my mom. Isn't it fascinating how the undeveloped brain perceives and echoes back reality? I feel like I remember being really proud that I had figured out how to accurately depict fingers or toes. Too bad I missed the whole arms, legs, and body thing, huh? The drawing isn't signed & dated, so I have no way of knowing how young I was, but suffice to say, once I grasped the concept of taking a thought and making it into something others could see, there was no turning back. In addition to sporadic & random drawing sprees, I engaged in a whole slew of creative endeavors including:

  • LEGO building (ages ~5 to ~9)
  • A respectable attempt to build (from scratch) a clone of my favorite arcade video game, Spy Hunter, using Simons' Basic on the Commodore 64. I drew up a bunch of sprites and programmed up the vertical scrolling, dual-player joystick control, the ability to shoot, and the first stage of collision detection before I lost interest (age ~8)
  • Numerous designs for an electric car, focusing on aerodynamics & overall chassis layout (around age 10)
  • Upon discovering the power of ANSI.SYS on my 4mhz 8088 PC, a period of intense focus on creating colorful pseudo-graphical DOS prompts and simplified menu systems using batch files (age ~11)
  • A phase of interest in fighter jets, when I worked on designs inspired by the YF-22 and YF-23 (age 11-12)
  • Getting colored pencil art published in three issues of Spark! Magazine for kids (age 12-13)
  • Entirely too many intricate Windows 3.11 desktop re-skins & custom designs (age ~14) eventually including usable 3D rendered workspace metaphors designed in Caligari trueSpace (age ~17)

I've put together a small gallery of childhood work on Flickr:

Sometime between the middle of 1992 & 93, I did what I believe was my first proper paid design work, a full-page print ad for a local independent computer shop. I designed it using the wonderful brick of 3 1/2" floppy disks that was CorelDRAW, and it ran in Computer Currents Magazine. I hope to one day find my one surviving letter-sized proof of that old ad. I used a Windows 3.1 Program Manager metaphor for the ad, with specials called out in little program groups complete with title bars and little minimize/maximize buttons.

Getting GUI with DOS

Around late 1993, my father commissioned me to build him a stock options analysis program to aid his trading activities. To accomplish this, he set me up with a 5-year-old copy of Borland Turbo C version 1.5 for DOS and a couple late-80's books to learn about the language. Before you knew it, I had a text-based prototype working that could load & convert the raw Equis quote data files (with the help of a MBF to IEEE conversion library I found on a BBS) and had the Black-Scholes model and a handful of the Greeks being calculated & displayed in color-coded tables. When I started trying to put some graphics behind this, I found myself quickly underwhelmed by the BGI (Borland Graphics Interface) and started searching around, both online & off, for a decent GUI library. With a very limited budget, I didn't have many good options. I tried out something called the TEGL Windows Toolkit, which included mouse support, icon primitives, and a window management system. Unfortunately, the only free version I could find was extremely buggy, and after a few months of wrestling with it, I had no choice but to give up, pull all of the integration out of my code, and start from scratch.

Around this same time, we got a hookup on a used copy of Turbo C++ 3.0 for DOS, which introduced an opportunity to read yet another book and learn yet another new-ish language. "C++ Primer for C Programmers" by Jay Ranade & Saba Zamir was the text of choice this time and though it ended up being a buggy book, it got me started using the basic concepts of object-oriented programming, which allowed me to then go in & vastly improve the organization of my code. Meanwhile, I still had to figure out the graphics situation. BGI allowed me to draw individual pixels, straight lines, rectangles, circles, and text in brilliant 16-color, 640x480 VGA mode. Fortunately this was more than enough to power to draw some stock charts, and I was able to get the important stuff on the screen pretty readily. As can be expected of any customer or company exec, my father rather quickly tired if seeing canned demonstrations driven by text-based configuration files, so it was time for me to delve into the fun stuff -- "chrome."

The CUA still seemed somewhat young yet and was only in use with one truly popular device configuration, Windows on a PC desktop, so I decided to use some basic established conventions for my GUI, but not to try to clone a Windows or OS/2 interface. There was something in my DNA that insisted that originality was a good thing. The only one thing I shamelessly stole was a tiny block of assembler code from a book to allow me to access interrupt 0x33 (mouse events). I had to decide upon:

  • A general motif or visual style
  • A light source for graphic elements
  • Color contrast considerations to limit eyestrain with constant use
  • Keyboard and mouse interactions for every element
  • Functionality distribution between menus, dialogs, and contextual elements
  • Menu IA

I'll just fast forward and show you how it all worked out. I'm using photographs of screens because I don't know how to take a screen grab of a graphical DOS program running under Windows XP. Here's the first screen a regular user would see (after a splash screen).

Options Evaluator screen

Hey what do you know! It actually loads! Let's see what we have here, starting from the top:

  1. This is actually the menu bar, which turns into a "QuickTip" bar when you mouse over certain things. The idea is that this real estate is wasted if you're clearly not focusing on the menu, so I allow it to be repurposed for something more useful. More on the specific use case these tips refer to when we get to E & F.
  2. Obviously this is just a dialog box. I built a little reusable framework for dialog boxes with an optional title bar (shown here inheriting the "active window" style), default position & layout, and space for buttons. A dialog box could contain .WGT objects -- widgets.
  3. Speak of the devil, here's a widget now, a ListBox. This supported scrolling, columns, single selection, and custom mouse click actions. Data could be from any source that could be converted to an array of strings.
  4. The ListBox's scroller was a custom design that drew inspiration from several UI systems. I chose the Apple style of stacking the up & down buttons close together so the user wouldn't have to move their mouse a lot to scan quickly. Left clicking either button would execute a fast scroll to allow rapid navigation of long lists. Right-clicking (as a QuickTip would hint) would execute a slow scroll for more careful scanning. The buttons themselves? I mentioned that everything about this program was build from scratch. Here are the sources for the up and down states of the button, respectively. Squint your eyes -- do you see it? Each character is a hex code for the color index to display in a specific pixel location.

    FFFFFFFFFFFFFF8
    FFFFFFFFFFFF888
    FFFFF7777788888
    FFFFF7777788888
    FFFF777F7778888
    FFFF77F78778888
    FFFF77F78778888
    FFF77F777877888
    FFF77F777877888
    FFF7F7777787888
    FFF7F8888887888
    FF7777777777788
    FF7777777777788
    F88888888888888
    FFFFFFFFFFFFF88
    FFFF77777778888
    FFFF77777778888
    FFFF777F7778888
    FFFF77F78778888
    FFF777F78777888
    FFF77F777877888
    FFF77F777877888
    FFF7F7777787888
    FF77F8888887788
    FF7777777777788
    FF7777777777788
    FF7777777777788
    F88888888888888

  5. These things are spin boxes. As a QuickTip explains, clicking with one mouse button incremented the selection, while the other would decrement it.
  6. The yellow highlight around this spin box indicates focus. Note the custom single-finger-touching-something cursor when hovering over an interactive element.
  7. I called this the "PowerBar." It shows all of the quote data and calculated technical indicator values for a selected day on a chart. It becomes useful when there's actually a chart open.

Speaking of which, here's a chart now. Two of them, even:

Options Evaluator screen

The top chart covers a little more than 2 years of OEX (S&P 100) data with OHLC bars and automatic color-coding based on daily net movement. The bottom chart covers a specific option contract. The two are automatically linked behind the scenes based on file metadata, to enable load-time calculation of all of the technical indicators. Charts could be placed on either the top or bottom half of the screen, or viewed full-screen. I didn't allow custom dragging or resizing because a) I was only working in a standard 640kb memory space and buffers to handle overlap without flickery full refreshes wouldn't have been practical, b) 640x480 didn't allow many pixels for the user to play around in, c) most of the time there was no reason to look at anything more than a single underlying asset (OEX above) chart and a single option contract, or so I thought, and d) flexible window management is a lot more complicated and I didn't want to learn how to do it, only to be stifled by problem 'a'.

Options Evaluator screen

Now we're cooking. Here's the same option contract from above, but with four technical indicators plotted against it. Overlaid on top of the chart in white is the Black-Scholes model value (which I, as a user, mistakenly forgot to configure to use a common y-axis scale in this instance). Below are Gamma, Theta, and implied volatility. You could also choose to split the lower area into just two sections, or leave it as one. Each section could support up to two vertical scales (one displayed on each side) and you could pick & choose what to line up where. The five gray dots (supposed to be little pointer/markers) indicate the day you've selected with either the mouse or the arrow keys. The PowerBar here shows all of the relevant data from that day. Values of indicators & overlays appear in the status bar strip attached to the bottom of the chart window (just above the PowerBar in this screenshot). I failed to leave a clear on-screen reminder of what each indicator was. A rookie UI mistake. I assumed that a user would look at the color & style of a line, match it to the sample preview in the status bar, look at the number displayed, and correlate that with the matching value and label on the PowerBar. It felt simple enough to me, the self-taught 16-year-old with zero user experience training. Oops.

Here are some more 'caps for kicks, including the all-important splash screen:

Options Evaluator screen Options Evaluator screen Options Evaluator screen Options Evaluator screen

Online before the 'Web

The bulletin board days

It always brings me a quiet chuckle to think that a sizeable (and growing) portion of the population never knew of a time when there was no Internet. Heck, for many, it's always been omnipresent -- kids get often get their own mobile phone with Internet connectivity at a very early age. Me, I remember when "mobile" phones were exclusive toys of the rich & super-rich. Nobody carried them around and nobody called them mobile, either. They used them from their Mercedes E-class convertibles, and they were called car phones.

I have fonder memories of a plugging a home phone line into a thing called a modem, and in turn connecting that to an RS-232 serial port on a desktop PC. From a DOS prompt we'd load up Qmodem or Procomm Plus (I forget which we used first), and type "ATDT" followed by a phone number. The modem would very loudly sound out the number in regular touch-tone style, and if you were lucky, there'd be a ringing on the other end and not a busy sound. The mood would turn downright celebratory if the next sounds were a couple of muted clicks followed by an extremely loud and angry-sounding "EEE-arrr EEE-arrrrhr," then some muted static, followed by silence. That was the sound of a successful 300-baud connection being made to another modem, connected to another computer somewhere in the country, usually sitting in someone else's bedroom or garage. Characters would stream onto the screen at a whopping 2.4 kilobits per second (compare to the 13,000 kbit/sec. connection I'm on as I write this), welcoming you to the most awesome bulletin board system (BBS) in the region, according to its owner. You could read messages authored by previous dialers, post your own, and even download small files. When you signed off, someone else could connect and do the same thing. Most BBSes had one modem and could thus only support one caller at a time. A handful had 2 to 4 modems, while a select few charged for login rights to cover the high cost of phone line service to a whole rack of modems. Multi-line systems actually allowed simultaneous callers to send messages back & forth almost in real time, or to participate in popular group chat rooms. Of course, if you were looking for really big numbers of people, there was always CompuServe or Prodigy, but they were expensive & evil.

By 1993 I was a very regular BBS user and even had my own personal phone line so I could connect at any time without synchronizing with my parents' telephone call schedules. I had a 14.4 kbit/sec. internal modem transferring bytes in & out of my screaming fast 486DX50 system via the V32.bis protocol. My favorite BBS had been The Hungry I in San Jose, but the area code difference meant I could only affordably call late at night, and I slowly started giving preference to a smaller, but local system called Kanontech. It featured the usual messaging system, a modest shareware file exchange, and most importantly, a gaming section. My favorite game was The PIT, a turn-based gladiator arena simulator where your character (literally, a single ASCII character) would fight for fame & fortune. Logging into Kanontech almost every day, a creative bit flipped on in my mind and I decided to try designing a new set of menu screens. Everything was coded in regular & extended ASCII with ANSI color codes, both of which I was already quite familiar with from experimenting with DOS prompt customizations. Sadly I no longer have the source files, just a couple of really tiny screen grabs, which I've blown up to 200% here so you can almost see what you're looking at.

Kanontech BBS file menu

Kanontech BBS message menu

Near the lower right corner of each you can barely make out "ANSI by Bosman." That was my original online alias. For this obviously cutting-edge and professional work (I jest), the owner actually offered to pay me, making it my very first little online design job. Instead of accepting money for the screens, though, I got something that was far more valuable to me at the time -- an account upgrade that raised my daily time & download limits.

My very own BBS

I became ever more involved in the local BBS scene over the following year, discovering a number of good boards and even joining the helper staff of a couple of 'em. By the middle of 1994, I decided to take a huge leap and try my hand at running my own BBS. I got a second modem and phone line and set myself up with Renegade BBS server software. With my own board, of course, I finally had the opportunity to go wild with design and do whatever I pleased, wherever I pleased. The first time a user logged in with a brand new account, a huge 24kb full-screen ANSI animation would play, with curtains opening, colors cycling, and finally ending with this frame. It's too bad I no longer have the original file to try to recreate the animation for old time's sake, as it was actually pretty cool, for an amateur using text. So as not to drive people away, a much faster-loading splash screen would appear for subsequent logins:

BOS Station One BBS

Here's the main menu. Some characters didn't render properly when it was converted to a GIF, but oh well:

BOS Station One BBS

Obviously I was a big fan of science fiction, and tried to make it feel like you were visiting a network of space-based facilities. Mine was the only BBS I had personally seen that eschewed the typical practice of rendering screens from top to bottom and leaving the cursor at the very end. With some simple ANSI cursor movement commands, I'd always put the prompt in the command bar. My favorite screen to this day is the Messages menu.

BOS Station One BBS BOS Station One BBS BOS Station One BBS BOS Station One BBS
BOS Station One BBS BOS Station One BBS BOS Station One BBS BOS Station One BBS

Running this board also gave me the opportunity to make my very first banner ad, which would be posted in the advertisements section on other boards to drum up traffic. Yes, the direct phone number to call my computer was posted with this. That's how it worked. Step about 10 feet back from your computer to see the image properly.

BOS Station One BBS ad

Good times, good times, but they passed...

Early Internet days

Station One reborn

In 1995, public access to this amazing new concoction called World Wide Web was on the rise, and by golly, I was gonna rise with it. With a $30/month dial-up account from a service provider called AIMnet and a copy of NCSA Mosaic, I ventured into the unknown with little purpose or direction. I didn't get very far, though, before everybody started telling me I needed to get Netscape Navigator 1.2, and I blindly complied. One day that November I fired up Notepad and an online tutorial and wrote my first three HTML pages (later integrated here), covering a quick fictional story inspired by the closure of my BBS and a planned future re-opening on the Web. Bouyed by newfound confidence in my technical abilities, I went ahead & built out a whole site in my first semester of college, still keeping the spacey theme and Station One name going (but dropping the 'BOS' part). It launched in May '96.

Station One

Yes, I took myself too seriously back then, but I was really proud of what I had created. A lot of the graphics were rendered in 3D using a program called Caligari trueSpace. Later in the year I added an option to view it with frames if you had Netscape 2.0. See for yourself:

Launch Station One in a new window

Not everything still works, but most of it does, including even the configurable background music, at least in MS Internet Explorer. Try it! It's good for a chuckle. The music files are all in the old popular MIDI format. If you're not familiar with MIDI, it's completely different from, say, an MP3. There's no actual sound data in the file, just instructions telling your your computer's sound chip to generate sounds using synthesized digital "instruments."

Back then there were a lot of little sites handing out "awards" to what their owners thought were cool sites, and I managed to rack up a handful of 'em, though I don't think I ever asked for one. The one I got at the beginning of October '96 really tickled me, though. The Microsoft Network, MSN, chose just the Texture Station background image archive section as their "Pick of the Week." It was mentioned on their TV show and everything. Incidentally, Texture Station was the only part of the site with any lasting value to the rest of the world, and incidentally, I still have it running as a live site here today, and it still gets a decent amount of daily traffic. Check out my original banner ad for the site. You can click on it to replay the animation:

Old Texture Station ad

Speaking of backgrounds, the starry background behind the Station One homepage was originally made for my first HTML pages the year before, and I continue to use it here & there to this day as well.

You mean there's money in this?

I found the whole "web design" thing, as it came to be called, to be a fun escape and simple creative outlet, but I didn't think I could take it too seriously. My college major, after all, was Plant Biology, and I was going to become a bioinformaticist after getting my degree. Well, fate had different plans. In the Spring of 1997, a friend from my BBS days got in touch with me on behalf of another old BBSer, who was in turn helping a staff member at California State University Hayward to find a web guy to make a front page for a new outreach site called OnRamps for Oakland. After a shaky interview (I was nervous as hell), I somehow got the contract, launching my career in design and dramatically altering the course of my life.

sketch sketchsketchsketch

Onramps for Oakland

As you can see, the whole thing ended up being more of an illustration job than web work, but I happily collected $320 for my troubles. I'd later do a redesign for them that made it into a proper integrated site with two levels of navigation.

Homepage #2

As if my 2nd year of school and launching my career wasn't enough, in 1997 I also began working on the second incarnation of my personal Internet presense. Station One was a nice first attempt & all, but the Web was maturing quickly and I wanted to not only keep up, but take a leap out to the forefront of online design. Now, what I definitely didn't want to do was abandon the sci-fi theme, so I went to work conceptualizing a brand new interface to a brand new "space station."

Nepthys One sketch

Nepthys One sketch

Again I'd make use of Caligari trueSpace to render the interface in 3D for depth & spark, and make heavy use of frames for creative & unconventional layouts of navigational elements.

Nepthys One

Nepthys One sketch

This "NaviPad" element would allow the user to scroll up & down on any page without accessing the actual browser scroll bar. It would also allow me to use even more frames to position long content in different areas of the browser viewport without forcing the user to chase after a moving target to scroll. The left & right buttons provided forward & back navigation. The music button would just open a slicker version of my original background music selector. What would a site be without background music?

You may wonder what this "Nepthys" word is. The domain "stationone.com" was already taken, as were many variants, so I had desperately searched for for a scifi-sounding name with an available .com name to match. Domain name squatting seemed to be the fastest-growing profession in the world at the time, so it was exceedingly difficult to find something good. Ancient Egyptian mythology provided a good namespace, and I honed in on the name "Nepthys," the less popular sister of Isis. Nepthys.com it was.

By the time the first version of Nepthys One was completed, Netscape Communicator was making the beta rounds and DHTML was a reality, but fortunately I had enough foresight to not subject my visitors to the severe (but relatively new) annoyance of upgrading to the very latest browser to view a specific site. By using up to 23 borderless frames on the screen at once and caching all interface elements with a slick preloader that had a real-time preview & progress meter, users of both Navigator 3 and the far less-used MSIE 3 could experience rich interactivity through my experimental interface, without downloading a single plugin. The site launched itself in a chromeless window that would work at the then-standard 640x480 pixel screen resolution.

Nepthys One

At the upper right, recent updates would scroll by all by themselves. Only the section of the screen between the silver bars at the top & bottom would load from the server from page to page. The page title in the upper left was updated via JavaScript. The area in the screenshot above that says "Welcome to Nepthys One" was a more discoverable equivalent of a browser status bar and would give feedback when you hovered over different things. The links at the very bottom of the screen provided persistent global navigation. Here's an example of an inside content page, with still more frames employed to provide a persistent left menu within the section:

Nepthys One

My favorite section was the new Music Station, which could actually extend the navigation console on pages with deeper IA.

Nepthys OneNepthys One

Though I avoided new browser technology in the main site, I did alow myself one very small sandbox to play with the latest & greatest powers of DHTML, "CSS-P," and even "push" technology.

Nepthys One Netcast channelNepthys One Netcast channel

The Nepthys One Remote Access Channel, one of the world's very first third-party Netcaster-enabled pages (Netscape gave me a couple t-shirts for the effort), honestly didn't serve much of a use to anyone, but it was a ton of fun to build. The bar with slanted blue dashes at the top rotated like a barber pole and looked like heavy animated GIF with a lot of frames to make it smooth, but it was actually a single small static image, carefully tiled with an offset, and moved with JavaScript & CSS. As the orange text in the first screenshot indicates, users could scroll up & down just by mousing over the top of bottom of the inner viewport, and scrolling speed was proportional to mouse position. The working rounded inner corners of the widget made me especially happy. The two trapezoidal buttons at the bottom allowed pagination within a section, and when you'd click one, the next page would pan in from the side, pushing the previous one off the other end, all clipped behind the silvery rendered frame.

Looking back at these old sketches & screens, I miss being able to experiment and try things just to try them. Working exclusively in product design as I did once I started working full-time, the critical concerns became usability, adherence to established conventions, technical feasibility, and most important of all, compromising to meet deadlines. Back when I was designing Nepthys One, I could just have fun.

Aside from some minor content updates, the site would remain mostly unchanged for four years. In 2001, I conceded that the theme was too "out there" and replaced it with a very flat, conventional, temporary site while I spent time figuring out a worthy replacement. I never got the time to create such a replacement, and the interim pages lived for another 8 years before I again succumbed to shame and revamped it to a form of what you see today -- another temporary fix destined to live for years.

Independent contracting

Between 1997 and 2000 (and very sporadic thereafter), I did web design work on an independent contract basis to build up an early portfolio. My client list included:

  • Cal State University, Hayward (CSUH) - OnRamps for Oakland (two engagements)
  • CSUH - Nursing & Health Sciences Department
  • CSUH - Office of the President
  • Refund Specialists, LLC.
  • Marvin Bobes, Ph.D.
  • Contra Costa College - Center for Science Excellence
  • Autograph Design
  • Mamma.com (then Canada's leading search engine)
  • Home Mortgage USA
  • y3K, Inc.
  • Email-It Australia
  • pineapplexpress (niche clothing line)

Going Pro

In the middle of Spring 1999, I was a full-time Plant Biology student at UC Berkeley, and a full-time contract web designer at the same time. I wasn't getting enough sleep, my quality of life was deteriorating, and I needed to make a choice. I chose to follow the money and put my education on hold. Later that year, a referral from a friend led to my first full-time, permanent job, working at Emeryville, California-based natural language search pioneer Ask Jeeves, Inc. (Ask.com). I was initially brought in as a junior contractor, but the creative director liked what he saw and bumped me up to Senior Graphic Designer when I was converted to regular employment.

After Jeeves, I worked at a couple of startups, an acquisition, and eBay's PayPal, and you can learn a bit more about these on my resume and my work samples page. On the non-work front, I re-kindled some of my childhood interests in physical design by delving into radio controlled car design & building, and even started fooling around with LEGO again. What's next?

< Back to the hub

Copyright © 1993-2012 Bamidele O. Shangobunmi, all rights reserved. Contact me

theJANG.net | Ultimate RC | RC Forums | LEGO Hero Factory Blog | LEGOJANG videos