It's Baby AniMozilliacs!

I remember when Firefox was a young pup

I was one of the 78,441 Kiwis1 who downloaded Firefox 3 as part of  Download Day 2008 2.
(Look, here’s a certificate.).
As of late, I’m impressed with how Mozilla Labs is attempting to help cross the digital divide and find ways to encourage digital creators. As someone who only made it into the web thanks to a good university library with Friends of Ed books and later MAMP3, I’m keenly aware of the real barriers to entry in digital creation.

  1. Statistics from Download Day 2008.
  2. Download Day 2008. Archived from archive.org
  3. Anyone who managed to figure out how to set up and use WAMP on Windows XP, you’re a better programmer than I was in my early 20s
Open Source

I <3 Open Source

I’ve been using open-source since 2008, and try to be involved with a number of communities such as Drupal1 and Wikipedia2.
I’ve also been a coder, designer and editor for an online interaction design magazine3 (which has even been involved with Mozilla initatives!).
As a community minded designer, developer and overall nerd, I see working in open-source as a way of best harnessing my skills and interests.

  1. drupal.org/user/Vickytnz
  2. http://en.wikipedia.org/user/Vickytnz
  3. johnnyholland.org

Selected Work

Full portfolio available at vickyteinaki.com/portfolio.

Starters/Aesthetics of Touch (PhD Research, 2010-present)

starters.cc (in development)
Research, interaction design, Drupal development, Mediawiki development

My PhD at Northumbria began with investigating the language of touch (as documented on the Aesthetics of Touch blog and later morphed into investigating the language that designers use to talk about their work. I am currently investigating how to use crowdsourcing as a means of communicating design work.

Wireframes and development in Drupal

Wireframes and development in Drupal

Other work has included using wikis to share design information (using Mediawiki) and experiments to show apparent density of objects.

Get Sorted (2008)

getsortedstorage.com
Information Architecture, wireframes, prototyping /testing, CSS/HTML/JS, Drupal development.

Get Sorted Catalogue Page

Get Sorted Catalogue Page

The first Drupal project that I did all information architecture and development (running on Drupal 6) for. The furniture system is highly interconnected and the site shows these connections.

My thoughts on making it were summed up in a presentation I gave at Drupal North East on designing Drupal sites (which also was featured on the Slideshare homepage in November 2011).

Carried out as part of Locus Research. Design by Zoe Sizemore. The site has since been expanded to cover different regions.

Johnny Holland (2011)

johnnyholland.org
CSS/HTML/JS, WordPress development, Mercurial versioning

Design by Jeroen van Geel, development with Dennis Koks and Bob Karreman1

Johnny Holland featured post and edit page

Johnny Holland featured post and edit page

Johnny Holland is an online magazine focused on interaction design. The site was launched in 2008 and by 2011 was beginning to outgrow its basic WordPress theme. The second version of the site was to better accommodate the different types of content (post, podcast, video, events) hosted on the site and make the process of inputting content less manual (the rolling post system meant that editors often had little time to theme pages).

I worked from Jeroen van Geel’s design to create a development solution that (I felt) pushed WordPress to its limits. My additions included custom coding to allow featured articles to be ‘art directed from the editing panel’ by specifying post-specific colour schemes, featured images and image position without having to code. The formerly tedious process of adding podcast or video information was reduced to a simple editing box, and a custom calendar system showed UX events and allowed visitors to submit upcoming events.2

This was just one aspect of my involvement with the magazine. I started writing for Johnny Holland in early 2009 and was an editor from 2010-12.

Praxis and Poetics sub-sites (2012)

praxisandpoetics.org/researchthroughdesign, praxisandpoetics.org/dppi/
Prototyping/testing, CSS/HTML/JS, WordPress development

Praxis and Poetics

Praxis and Poetics

The Praxis and Poetics site holds two related but separate conferences being held at Northumbria University in 2013. While the sites share a commmon theme, they are organised (and thus content managed) by different teams. The key for this development was to maintain visual consistency across the two sites while allowing each team to work on their sub-site independently.

This was achieved by setting up a multi-site WordPress network and a single theme (allowing for bulk changes) with targeted alterations for each of the two sites. The sites use a highly customised child theme of Twenty Twelve3 to be responsive—useful for conference attendees checking programme details on devices—and to allow for security updates to WordPress in the near future.

Singing Stones (2006)

Design, Flash/Actionscript programming

Singing Stone Demo

Singing Stone Demo

I consider my thesis project from my product design degree as my gateway drug to coding. After being taught a few weeks of Flash, I hit the books and internet to make an interactive demo in Actionscript4 for a concept that allowed people to make music based on the do-re-mi scale. It was a Bronze Winner in the Student Product section of the 2005 New Zealand Best Awards5.


While I’m proud of getting it working in Actionscript all those years ago, I’m interested in recoding it using the new HTML5 audio capabilities.

Other selections

I’ve also done some side projects for the fun of it, such as:

For more of my design work, see my portfolio 11.

  1. johnnyholland.org/humans.txt
  2. Of course, I look at it now and think, “oh, I wish we’d made it responsive”
  3. wordpress.org/extend/themes/twentytwelve
  4. vickyteinaki.com/portfolio/singing-stones-demo
  5. 2006 archive available at archived.bestawards.co.nz/2006 
  6. designresources.cc/design-deck 
  7. fauxcodesign.com is based on the numerous Fast Co Design “what X can teach you about Y” posts
  8. lawandorderuk.vickyteinki.com. Yes, I really am that much of a nerd.
  9. thedesigndoctor.eu
  10. blog.vickyteinaki.com/back-basics-kinda-hardcoding-one-page-responsive-site/
  11. http://vickyteinaki.com/portfolio
T Shape

Skills

As a trained product designer who has moved into the web, I’m your good ol’ T-shaped designer1 2.

Though I’m now making coding the arch of the T, I’m also confident in making a great-looking presentation in Indesign or Keynote and then presenting it. Having worked as an interaction designer I’m well versed in wireframes and information architecture.

As a developer, I’ve done theming and module development for WordPress, Drupal, Joomla and Mediawiki, but can also happily work with plain PHP or HTML5/CSS/JS.

Table of Skills
Design Development Other
Adobe Creative Suite (Indesign, Photoshop, Illustrator)
Video (Premiere, After Effects, Final Cut Pro) and audio editing
XHTML, HTML5, CSS
Javascript, jQuery
PHP, theming/plugin development for Drupal, WordPress, Joomla, Mediawiki
Development using Bootstrap
Experience with LESS (preferred) and SASS, Experience with CVS systems (Mercurial)
good written and oral communication skills

Education

  • Northumbria University PhD in Design: 2010–present
  • Unitec New Zealand
    • Master of Design: 2007-8
    • Bachelor of Product Design: 2003-5

For a full work history, see my Linkedin profile.