DRViD.ca » Design

By: Drvid  09-12-2011

  1. Initially I sketched out the GUI, including icon ideas on graph paper.
  2. I mocked up a basic layout in Fireworks to find a basic look and feel including colours.
  3. Then I translated the rough design in to a basic stylesheet. This was a quick and dirty process so far.
  4. As the application grew I used Smarty templates for developing any new UIs that needed to be implemented.
  5. Designing and coding these “as needed” closely with the backend team really made our workflow extremely flexible.

Then onward with the slightly more “artistic” side…

  1. Next was completing vector versions of each approved icon. In total we needed about 15 unique icons.
  2. Finally extra polish was given to the theme using background textures and gradients.
  3. After completing the base theme I went on to make a few other colour-scheme variations of it.
  4. The nature of this complex intranet app makes it difficult to showcase, but expect screenshots to be posted soon.

Most of the icons were modelled in Maya and vector rendered, but the last few I’ve been faking the 3D look directly in Illustrator. The new 3D effect in Illustrator CS is actually pretty fun, although it really wasn’t very useful for many of these. I’ve also had to retrace much of the line art since the Maya Vector Renderer didn’t really give me the cleanest lines. Another solution could have been using Mental Ray’s PostScript output.

Sorry for the delays, but samples of the icons and GUI will be reposted soon…

Other products and services from Drvid


DRViD.ca » Reviews

I’ve finally decided to cancel my MobileMe account because, these days Apple doesn’t really need another hundred bucks from me every year. As my renewal term is coming in the next week I’ve been thinking, researching and testing free alternatives to most of these services. Replace all your MobileMe services for free, and terminate your billing renewal because Apple shouldn’t be charging money for this.


DRViD.ca » Code

This will make copies of your resized images next to the originals in that same folder (Windows users may have problems using the * for batch file manipulations however). If you had images in a different format, and/or wanted to convert them to smaller, lossy versions, you could try something like this. This really is the quickest and easiest way to resample a whole bunch of images. This makes commands like convert and mogrify available.


DRViD.ca » Audio

For anyone that doesn’t know, the CNIB runs a huge library of braille, e-text and digital talking books for it’s clients. Simply decodes DAISY books from MP3 to WAV and updates references in SMIL/HTML files accordingly. Copies all markup and moves all audio files into 'withSectionsAddded' subfolders. Runs 'insert notice' XSLT transformations on a folder of valid DAISY 2.02 books. Spawn saxon java transformer process. Print ' ->\t\t' + wave.


DRViD.ca » Animation

It’s a few years old I know, but watching it again and the layers of detail in the plots are still astounding me. Dramatic characters in a grim metropolis and did I mention the amazing designs, voice acting and animation. Full of existentialist themes, information warfare, cyber-crime, robotic empathy, trans-humanism….