Concept designs for WordPress blog

I am currently working on the design for my cousin's blog. She will be using Wordpress so I will be building a custom template for her. So far I have 2 simple layouts based on her brief and am working on a 3rd one. From there we can then narrow down what will work for her and proceed from there.

Layout idea #1:

Layout idea #1

Layout idea #2:

Layout idea #2

I normally use InDesign for laying out my initial designs as I find it more flexible than Photoshop for moving elements around and playing with text.

Filed under: WordPress, web design

Architecting Happiness UX Conference 2015

At the end of February I flew to Wellington to attend the Architecting Happiness UX Conference for World IA Day 2015. Having travelled up by myself and not knowning anyone else attending I was a bit nervous but once it started I was hooked!

There were 9 speakers throughout the day all talking about the idea of Architecting Happiness in relation to the user experience and although they were all talking about the same topic they came at it from so many different angles.

There was everything from Jesse James Garrett taking us through the emotional rollercoaster of UX and its broader reaches (now very keen to see the documentary Visions of Light about the art of cinematography, as well as to read 'The Elements of User Experience'), to Trent Mankelow from Trade Me taking us through some of the steps for actually creating a happy user experience (as well as some things that aren't so happy!). I came out super inspired to start creating some awesome work!

Filed under: web design

Twilight and Shadow blog

Twilight and Shadow is my own personal blog documenting sporting and other adventures. I migrated it over from blogger to ghost so I could learn some new things and have a bit of fun along the way. Ghost uses node.js and handlebar templating.

{{#foreach posts}}
    <article class="{{post_class}}">
        <header class="post-header">
            <span class="post-meta"><time datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMMM YYYY"}}</time></span>
            <h1><a href="{{url}}">{{{title}}}</a></h1>
        <span class="post-meta">{{tags}}</span><br />
        <a href='{{url absolute="true"}}#discourse-comments'>Comment on this post</a>


I designed my own personal theme, laying out my initial design in Adobe InDesign, then putting together a basic html version before setting up the real template. My next task is to make the template responsive.

Twilight and Shadow

Filed under: my work

Canterbury Rogaine Series

My final project was making a website for a friend who organises rogaines and adventure racing events. This site is live at The Canterbury Rogaine site provides information for coming events, an online entry system for these events, and results/reports from the events when they have completed.

The main challenge in this site has been implementing the entry system, as each event has different courses, grades, and entry fee structures. Additionally, adding in support for adventure races meant that fees would then be per team rather than per person but rogaines were still charged per person. The entry system is a constantly evolving project.

Additionally the CMS/admin side of the website allows the administrator to configure details for a new event, upload results files once events are finished, add event reports and edit the text found on the home page. I am also planning to make some of the other pages have editable sections (for example, the About Us page, allowing the administrator to update content as appropriate). The entries for each event are also editable. If the same name and email address is used again to enter a 2nd event the database will recognise this and use the same person rather than adding a new database entry.

Below is the original table structure for the Canterbury Rogaine Series database. It has since evolved slightly to account for new features required:

Initial table structue for the Canterbury Rogaine Series database

The site is built using ASP.NET web forms. As with my Real Estate ASP.NET assignment, I found the built-in data source controls limiting so mostly used the code-behind pages get the site to do what was required. It also helped my knowledge of using C#.

ASP.Net/C# Assignment: Newbode Real Estate

For my ASP.Net/C# assignment at Vision College the brief was to create a Real Estate website with a custom CMS. From the CMS you are able to add and update and delete regions, districts and suburbs (each property must be placed within one of these suburbs):

Updating the district the suburb belongs to

You are also able to add, edit and delete property listings. Each property requires you to fill out all the details on the form before allowing you to proceed. If there are no pictures for the property it will use a default placeholder image. If you are wanting to find a certain property you wish to edit you can use the region/district/suburb filters to narrow down your options.

Editing a property

The CMS also allows you to add property news items which appear on the left-hand side of the site and to add new office locations (shown on the left-hand side of the site when you are on the Contact Us page). You can also add, edit and delete new admin users.

If you are browsing the site you are able to create an account so you can save properties to a wishlist. If you try to add a property to your wishlist and you are not logged in you will be prompted to do so.

Adding properties to my wishlist

The front-end is built using an overall master page which holds the header, footer and main menu. This allowed me to use the same master page for the entire site (as the home page does not use a sidebar). The left sidebar and main content section are laid out within the child master page. I then set up a user control file that holds all the layout and code for the property search. The code is contained within an UpdatePanel which allows you to refresh specific parts of the page rather than refreshing the entire page with a postback. This was important for me as I didn't want the page to keep having to reload every time you selected a different region for example (as once you select a region it needs to search the database to find the corresponding districts etc).

I quickly discovered the limitations of the built-in data source controls and found it easier to work with the code-behind pages which certainly improved my C#!

I've used several different jQuery plugins on the front-end of this site. The home page slideshow is using jQuery Easy Slides. It's just a basic slider that transitions between various images.

The property listings page use a version of jCarouselLite allowing you to scroll through the photos. The property details page uses a different version of jCarouselLite to scroll through the thumbnail photos and fancybox for the image gallery once you click on a thumbnail.

PHP Assignment: Lido Cinemas

For my PHP/MySQL assignment the brief was to create a website for the Lido Cinema including a functioning backend CMS for adding movies and session times. I had fun putting together the artwork and designing the layout for this site.

Lido Cinemas

The CMS allows you to add, edit and delete cinemas, movies, session times (for the date and time I used the jQuery timepicker), the pricing structure for tickets, and admin users.

Add a new movie

Once I'd finished the site my tutor suggested I try adding the functionality to book tickets to a session. This required a slight reworking of my table structure and some more jQuery but was a good challenge.

Buying tickets

PAPO Uniform

After an initial brainstorming session with many of the younger members of the Peninsula and Plains Orienteering Club I started putting together some designs based on ideas that came out of this. From there I got everyone to provide input as to what they thought worked and what didn't. The idea of a simple black, red and white design based around the traditional Canterbury region colours (but with a more crimson take on the red especially when printed on fabric) came out of this.

PAPO uniform proposal

I then refined the design and presented our proposal to the club committee for final approval before the design was sent off to Trimtex to be made. In the end the club were very happy with the final outcome and it's quite exciting to see members running at events wearing these tops.

At the same time I was also re-designing the club logo. I knew that the committee was quite attached to the old logo so rather than create a completely new look I went with the idea of a modernised version of the current logo using the new colours of red, white and black.

PAPO club logo

Filed under: my work, PAPO

CSS Assignment: New Zealand National Parks

My second major assignment with Vision College was to create a website on New Zealand's National Parks using the CSS skills we had been studying.

I used this site to play around with different techniques I was interested in, including some CSS3 properties. One of the first things I wanted was a transition for the hover in my main menu, with the tab rising up as though you were pulling it out. I also wanted to use a gradient to give the tabs a more rounded, almost 3D feel.

nav ul li a {  
  height: 30px;
  border-radius: 10px 10px 0 0;
  background-color: #405127;
  background-image: -webkit-linear-gradient(top, #687F37, #405127 90%);
  background: linear-gradient(to bottom, #687F37, #405127 90%);
  -webkit-transition:height 500ms, background-color 500ms;
  transition: height 500ms, background-color 500ms;

nav ul li a:hover {  
  background-color: #6A7B45;
  background-image: -webkit-linear-gradient(top, #A9A868, #6A7B45 80%);
  background: linear-gradient(to bottom, #A9A868, #6A7B45 80%);
  color: #302508;
  height: 50px;


The transition property happens on the a tag rather than the hover so that the transition effect occurs in both directions. If it was on the hover instead then you would only get the transition when you hovered over the element and not when you moved away again.

The assignment required a gallery with a lightbox and we were given a jquery plugin we could use but I had found a method just using CSS (based on the CSS3 Lightbox) so was keen to try that out. It took a bit of playing around with to get it to work how I wanted but was pretty exciting once I got it working. I love a challenge!

Tables Assignment: Canterbury Tourism Development

My first assignment at Vision College was to create basic tables website using mostly inline styles instead of an external stylesheet although I ended up using a very basic external css for elements such as the headers and links. The brief revolved around creating a site for Canterbury Tourism. We were provided with some images and graphics but I designed my own header and Canterbury map.

Canterbury Tourism Development header

To get the look I wanted I needed to nest tables within tables, especially for the top navigation.

<!-- Navigation -->
    <td colspan="2" style="text-align:center; padding:0">
        <table style="border-collapse:collapse">
                <td style="width:156px; background-color:#024A68; padding:0; border:2px white solid">
                <td style="width:156px; background-color:#0772A1; padding:5px; border:2px white solid">
                    <a href="index.html">Home</a>


It actually can be pretty handy be able to put together a good tables design as I discovered later on when creating marketing emails for List Sell Trade. Tables with inline styles are still the best way to get a consistent design (or as close to it as possible!) accross all different email clients as div tags are not supported by many email clients.

Design work for Tour de Peninsula

My most recent project was designing a brochure, certificates and the race singlets for Tour de Peninsula, run by my local orienteering club, Peninsula and Plains (aka PAPO). I do a lot of design-type work for the club on a volunteer basis including the current club orienteering top, certificates and promotional material. It's pretty fun as I pretty much get free rein which I wouldn't get elsewhere.

The first design project for Tour de Peninsula was the promotional brochure, a double-sided DL flyer giving out the basic information for the event.

Tour de Peninsula brochure

There were also overall certificates for 1st, 2nd and 3rd. These are printed in advance and are 'general', as in they don't have space for a name. There has been a bit of debate about this in the past within the club but it ends up being the easiest way to go for everyone.

Tour de Peninsula certificate example

The really fun part about this particular project was designing the 4 different singlets required, based around the jerseys in the Tour de France (for both men and women):
Le Maillot Jaune: the yellow jersey is worn by the current leader of the cumulative results of the Tour.
Le Maillot Blanc: the white jersey is worn by the current young leader (under the age of 21 for this competition).
Le Maillot Vert: the green jersey is worn by the current leader of the "Sprint" competition.
Le Maillot a pois Rouge: the red and white spotty jersey is worn by the current leader of the "King of the Mountains" competition.

Tour de Peninsula singlets

I went with a fun, cartoon-type style but firmly cementing it within the Canterbury/Banks Peninsula region. At first the idea of having a control flag in each map location was proving difficult as many were clustered around a small area but it really came to life in the end. I was pretty happy with how they turned out but I find it quite surreal to see clothing you've designed on the computer in real life! Below you can see a couple of the singlets in action during the weekend.

A couple of the singlets in action

Thanks to Mike Harding and Jan Harrison for the singlet photos.

Filed under: my work, design, print, PAPO