Darryl de Wet

Welcome

<trumpet-blowing>I am both a creative and a propeller-head and have been in the industry for over 15 years—having been afforded opportunities to be part of extremely talented teams—always expanding my limits, contributing to award-winning projects and doing work for clients such as the ANC, BMW, eTravel, MINI, MTN, Nissan, Rennies Travel, Samsung and South African Tourism.
I began as a developer and to today my skill set has broadened to include client liaison, creative direction, 3D design, IA, UX design and UI design.</trumpet-blowing>

My fascination with psychology has drawn me closer to the consumer-facing aspects of projects. Psychology is in everything we do and our products have purpose - we need to design on purpose, build on purpose, deliver on purpose.
Beautiful imagery draws the eye - but good design leads it & encourages action and together they should create a memorable experience - effortlessly answering the brief.

Below you'll find some of the work I've been involved in.
View me on LinkedIn

Work Experience

2015Griffiths & Griffiths www.griffithsandgriffiths.co.za

  • UX and UI design
  • Native javascript (no jQuery)
  • Animation using Greensock TweenLite
  • PHP and MySQL back-end

2015Straight Twisted

  • Partial UX and UI design
  • Native javascript (no jQuery)
  • Animation using Greensock TweenLite
  • PHP and MySQL back-end

2014Oriental Royale www.orientalroyale.co.za

  • Scrolling website
  • Asynchronous form posting using Ajax
  • Animation using Greensock TweenLite

2014Castle 1895 Re-Brand

  • HTML5 web application for consumer data-capturing via tablet
  • UX and UI design
  • Custom form controls
  • Custom video solution
  • PHP and MySQL back-end

2014Apex on Smuts www.apexonsmuts.co.za

  • Single page website
  • UX and UI design
  • 3D design for apartment floor plans

2014Eyeworx Group

  • Custom CMS built from the ground up with PHP and MySQL
  • UX and UI design
  • Automatic product image processing on upload for spectacles frame detection, auto-levels & contrast and cropping
  • Geocoding for address lookup of optometrists

2013Bruma Nissan

  • Custom CMS built with PHP and MySQL
  • UX and UI design
  • Live WYSIWYG inline content editing
  • Automatic vehicle information updating and caching from the Nissan core website

Into the Matrix

Click an item to view its function. Click the function to copy it to the clipboard.

jQuery-esque Helper Functions

  • $(cssSelector, [context])
    window.$ = function(selector, parent) {
    	if ( selector === 'bulk' )
    		return [];
    	else if ( typeof parent === 'undefined' ) {
    		if ( typeof selector !== 'string' )
    			selector = selector.nodeName;
    		
    		return Array.prototype.slice.call(document.querySelectorAll(selector));
    	} else
    		if ( parent instanceof Array ) {
    			var response = [],
    				a, temp, i, l = parent.length, al;
    			for ( i = l; i--; ) {
    				temp = Array.prototype.slice.call(parent[i].querySelectorAll(selector));
    				al = temp.length;
    				for ( a = al; a--; ) {
    					response.push(temp[a]);
    				}
    			}
    			return response;
    		} else
    			return Array.prototype.slice.call(parent.querySelectorAll(selector));
    }
    
  • .each(someFunction)
    Array.prototype.each = function(someFunction) {
    	var i, l = this.length;
    	for ( i = l; i--; )
    		someFunction.apply(this[i]);
    	
    	return this;
    }
    
  • .addClass(className)
    Array.prototype.addClass =
    HTMLElement.prototype.addClass = function(className) {
    	if ( this instanceof Array === true ) {
    		var me, i, l = this.length;
    		for ( i = l; i--; ) {
    			me = this[i];
    			if ( me.className.indexOf(className) === -1 )
    				me.className += ' ' + className;
    		}
    	} else
    		if ( this.className.indexOf(className) === -1 )
    			this.className += ' ' + className;
    	
    	return this;
    }
    
  • .removeClass(className)
    Array.prototype.removeClass =
    HTMLElement.prototype.removeClass = function(className) {
    	if ( this instanceof Array === true ) {
    		var me, i, l = this.length;
    		for ( i = l; i--; ) {
    			me = this[i];
    			me.className = me.className.replace(className, '');
    		}
    	} else
    		this.className = this.className.replace(className, '');
    	
    	return this;
    }
    
  • .hasClass(className)
    Array.prototype.hasClass = 
    HTMLElement.prototype.hasClass = function(className) {
    	if ( this instanceof Array === true )
    		if ( this[0].className.indexOf(className) === -1 )
    			return false;
    		else
    			return true;
    	else
    		if ( this.className.indexOf(className) === -1 )
    			return false;
    		else
    			return true;
    }
    
  • .css(props)
    Array.prototype.css =
    HTMLElement.prototype.css = function(props) {
    	var stylesheet = document.styleSheets[0],
    		rules = '',
    		className = 'css' + new Date().getTime(),
    		i, l = this.length;
    	
    	for ( var prop in props ) {
    		// Convert camelCase to dashes
    		rules += prop.replace(/([A-Z])/g, function($1){return '-'+$1.toLowerCase();}) + ':' + props[prop] + ' !important;';
    	}
    	
    	stylesheet.insertRule('.' + className + '{' + rules + '}', stylesheet.cssRules.length);
    	
    	for ( i = l; i--; ) {
    		this[i].className += ' ' + className;
    	}
    }
    
  • .on(type, listener)
    Array.prototype.on = 
    HTMLElement.prototype.on = function(type, listener) {
    	if ( this instanceof Array === true ) {
    		var i, l = this.length;
    		for ( i = l; i--; )
    			this[i].addEventListener(type, listener);
    	} else
    		this.addEventListener(type, listener);
    	
    	return this;
    }
    
  • .off(type, listener)
    Array.prototype.off = 
    HTMLElement.prototype.off = function(type, listener) {
    	if ( this instanceof Array === true ) {
    		var i, l = this.length;
    		for ( i = l; i--; )
    			this[i].removeEventListener(type, listener);
    	} else
    		this.removeEventListener(type, listener);
    	
    	return this;
    }
    
Top