Premier Communications Group is a leading Sydney Public Relations firm.
Working from mockup images and guidelines provided by Gina at Hollywood Black, I hand-built the structure and style of the fresh new site she’d designed, demonstrated my working prototype, then merged it into WordPress to create a dynamic site.
WordPress required some hefty customisation to achieve the requested style and functionality, which includes a unique menu system with intricate positioning and scripting for compatibility across browsers, custom post types and templates, and several plugins extended with new features.
The final site is clean and easy to read, accessible, conforms to web standards, and can be easily updated by the client using simple editing tools protected by a login system.
Paryn is a marketing, sales support, and process improvement company.
Paryn marks my first time working with Gina Jääskeläinen at Hollywood Black, a digital and print media creative agency in the Blue Mountains.
My task was to take two mockup images — one demonstrating the site when it first loads, and the second after clicking to expand its content — and convert them into a real site with an animated transition between the two states.
“Single page” sites such as this one present a challenge from a design point of view; the ultimate goal is to condense a lot of information into a small space while avoiding visual overload, at the same time guaranteeing that users and search engines can “discover” the hidden content naturally.
Craigdolls is a small family cattery located in the Blue Mountains NSW.
Quite a lot of web work centres on updating sites that use old technology, and Craigdolls is a perfect example; Rhonda’s existing site had been built using Flash, so it didn’t work on phones and tablets, search engines had trouble reading it, and updating the content was a clunky process.
Certain elements of the design were iconic — the pastel colours, the banner photo, the paw prints in the background — so I made sure to integrate them into the new WordPress design prominently even as the layout adapts to different devices such as the iPhone, iPad, and Android mobiles.
As well as being much more accessible and friendly to users and Google, Facebook and social media buttons have been integrated, and updating the site is now easy.
I’ve been a gamer since the Sega Master System and C64 days (and arguably before that with handheld LCD games). These days I have more of an interest in how games work and developing my own than playing them.
Streets of Rage 2, along with Street Fighter 2 and Sonic, were formative games in my childhood. This long-running project is my attempt to bring it to the web using new browser features such as Canvas and Gamepad input, learning tons about game development along the way by building an entire game engine from scratch called “xlib”.
Note that right now the game can only be played with a keyboard or gamepad — no mobile devices yet.
No commercial use is planned for this project, and its code is licensed for free non-commercial use.
I’ve always been fascinated by how simple math can result in intricately beautiful designs… I think owning a spirograph set as a child was the trigger. JSSwirl is inspired by that childhood experience.
This started as an experiment in my idle time and eventually became detailed enough that I wanted other people to be able to fiddle with the settings and create beautiful things. After changing the settings, you can save your effect on your browser, and with a single click get the code to embed your effect on your own personal site.
For commercial use of JSSwirl, please contact me. Licensing is US$10 per site with discounts when purchasing in multiples.
An simple spaceship shoot-‘em-up game intended for a website header or footer.
This was a challenge from a student after they saw a work-in-progress version of the JS Rage game. Over the course of a weekend, I took the core code of JS Rage and turned it into a simple shoot-‘em-up that could be used at the top or bottom of a gaming site to make it fun and memorable.
Note that right now the game can only be played with a keyboard — no gamepad or mobile devices yet.
Two demonstrations of how effective a simple particle swarm can be.
These demos started as rough experiments with making a point on the screen follow the mouse. Given some colour and context, they can be memorable, high-impact features that serve as a mental trigger for users to remember your site amongst a hundred others.
The real bonus with these effects is that they work without interaction but are incredibly easy to discover by accident, delighting the user.
Swoop 1: Lantern would be perfect for a lighting shop, a camping site, or a gothic design.
Swoop 2: Colour cycling would be great for a computer or electronics shop’s top banner, faded out to be only subtly noticeable behind the company logo.
Note that right now these demos only work with the mouse — no mobile devices yet.
A detailed character builder and database for the game Neverwinter Nights 2.
Built as the front-end for a complex programming experiment turned public website, I created this design from scratch with the exception of two background images taken from the source game. The site includes several sections that required adjusted layouts whilst maintaining overall design consistency.
I was responsible for the original graphics work in Photoshop and Illustrator, the structural code to create the distinct elements of the page, and the styling code that defines how the site appears in a range of browsers.
A fresh, clean and inviting redesign with a focus on search and accessibility.
The UWS Library selected (TWEEK!) to redesign their homepage and secondary content pages with a focus on immediate search, ease of use and accessibility. I was contracted by (TWEEK!) to build the mockup images, template web pages and graphic resources required.
After consultation with the Library I finalised the design and delivered the complete package including the site templates, nineteen header images and six high-quality vector icons.
The UWS Library site is standards compliant and conforms to accessibility guidelines except where restricted by external legacy content.
Note that the Library has since transitioned to new technology and replaced their site; the link above shows my work shortly after launch.
3 Gen Creations hand-craft homewares, jewellery and paper products.
A friend and I I developed this site alongside 3 Gen’s business launch. It includes full shopping cart, membership, invoicing, administration and stock-control systems custom-built to requirements. Large parts of the system are re-usable for later projects.
I had full control of the site’s presentation along with some input on the business logo and the text used throughout the site. I took a very user-centric approach to the front page, with a direct purpose statement and immediate eye-catching content.
The 3 Gen site is standards-compliant and conforms to AAA accessibility guidelines.
Note that 3 Gen Creations has ceased business; the link above shows my work shortly after launch.
CRG Australia required a crisp, professional logo suitable for screen, print and embroidery.
Under contract to 3 Gen Creations, my job was to design three of six logos to be presented to the client. I built three distinct logo styles — “aussie”, “corp” and “imagery” — and from those a series of colour, text position and iconography variations using a small set of CMYK colours.
The client chose one of the “corp” versions and we refined the logo using his feedback, adding the Southern Cross. The finished logo was delivered in six file formats with three colour variations.
MDC is a dental clinic serving the Minchinbury area.
This is the 2007 redesign of the original MDC site below.
I redesigned the site to handle the increased amount of content after a year’s worth of additions, simplified the navigation, and added more imagery provided by the clinic to catch the eye. White space was increased, and the content frame was made bolder with less “distraction” elements near the body text.
The feedback/question form was also beefed up, and now allows an image to be uploaded as part of the message.
The MDC site is standards-compliant and conforms to accessibility guidelines.
UMYS is a support service and drop-in centre for youth in the Blue Mountains.
This was a team project involving Penny Haslop, Jesse Fisher and I. UMYS needed something youth-oriented, professional-looking and customisable to replace an aging site. We settled on WordPress for simplicity and portability; Penny worked with content and client liaison, Jesse created the visual design, and I constructed the WordPress template and styling.
The design includes extra shadow styling for Safari 3 and Opera 9, enhancing the design for those browsers without affecting others.
The UMYS site is standards-compliant and conforms to accessibility guidelines.
Note that due to UMYS merging with another youth service their website is long available; the link above shows my work shortly after launch.
SilverswordDVD was involved with DVD production, mastering, and marketing displays in Canberra.
I developed this site in mid-2000 after being contracted by the owner. I’ve rebuilt it here, since the original page contained a horrific number of kludges belonging the last generation of web content: table-reliant structure, <font> everywhere, hacks for Netscape 4, spacer images… the list goes on.
SilverswordDVD shut shop a few months after the website was launched but the design remains one of my favourites.
The SilverswordDVD site is standards-compliant and conforms to accessibility guidelines.
Sadly, due to copyright issues, only the first page of the site is available.
This is the original MDC site, designed in late 2005.
MDC wanted a smallish, “non-scrolling” site to detail their services — something light and friendly with clean presentation. We achieved that while still providing a lot of content and a feedback form built into the design for quick enquiries and comments.
The MDC (original) site is standards-compliant and conforms to accessibility guidelines.
Note that due to copyright restrictions the link above shows a image of the original site.
This is a demo layout built during the holidays between teaching. What started as a rough test of a unique menu turned into a detailed design that used a lot of new graphical techniques.
The aim was to create something fresh and lively without becoming frenetic. The header is specifically styled to give an impression of morning crispness, when — as a friend put it — “the air is new”. There’s subtle shadows and texture everywhere to soften colour transitions and ensure the column layout isn’t dominant.
Many thanks to the photographers of the beautiful Creative Commons Flickr images (credited in the page). I plan to update this demo later with JS features and the unique menu dropdowns originally conceived (updated 2010 01 30).
A Difference of Layout is standards-compliant and conforms to accessibility guidelines.
This is a demonstration page I designed and built while experimenting with Blueprint, a CSS “framework”.
There’s still a couple of additions I’d like to make, such as finding a good image to balance the right hand side (using the same “box-breaking” style as the left). The site works perfectly in all five major browsers, with Webkit & Opera 9.5 receiving extra styling such as shadows.
This is my first public page that uses Creative Commons imagery sourced from Flickr. Many thanks to the photographers credited in the page, and to the Blueprint team for making consistent vertical rhythm so easy. This demo will change over time to include new design elements (updated 2008 06 04).
The Sans & Serif demo site is standards-compliant and conforms to accessibility guidelines.
I was browsing through some ancient mockup designs and tried mixing a few ideas together. This is the result around three hours later.
Re-using a border style was my first aim, then capping the content area with an an unusual footer and using large styled type for major elements. Touches of contrasting colour stand out against a muted background suitable for a corporate homepage or an arty blog with strong content imagery.
The design has extra styling visible in Opera 9.5 and Safari 3, looking best in the latter — beautiful text, a glowing header and subtle shadowing. This demo will probably receive additional polish (updated 2008 06 15).
The Test Design 26 demo site is standards-compliant and conforms to accessibility guidelines.
I created a basic mockup of this design along with a rough prototype about a year ago as part of a course. Another mockup was chosen but this remained my favourite.
The original design needed some serious loving; it’d been put together quickly as one of six mockups and lacked detail. The header bar, backgrounds and imagery were completely rebuilt for a semi-flexible width since the original “infinitely wide” concept didn’t work well visually.
As always, the site looks best in Webkit because of additional styling. I’ll probably add extra detail over time (updated 2008 07 02).
The Café Nueve demo site is standards-compliant and conforms to accessibility guidelines.
This is a demonstration page using several new features of CSS3, including multi-column text, drop shadows and rounded corners.
As at 2008 03 16, Safari 3.1 comes closest to displaying it properly. Firefox 2 displays the page without many of the visual touches, and Firefox 3 without stylish first-lines and text & box shadows. Opera 9.5 shows many of the effects but without column layout. Internet Explorer 6 and 7 don’t support any of the new CSS3 features so while it displays something usable, it’s not very exciting.
See the reference image for how it’s supposed to look (screenshot from Safari 3.1, with one missing element photoshopped in). I plan to keep this demo page evolving as CSS3 support in browsers increases (updated 2008 03 16).
The CSS3 demo site is standards-compliant and conforms to accessibility guidelines.