Ben Hoad .net

After the good reaction from the Hartland design I then moved onto another wing at TWC. Cuppaidge wing (pronounced “cup-idge”) proved a bit diffcult in one aspect for the design, Cuppaidge’s synonymous hand gesture… (as the name hints at) cupping of ones… um… chest…

Rather than simply display the final result I thought it might be interesting to show the process to make this graphic as it was a rather time consuming effort.

The inspiration basis image. Unmistakably female and displaying a sense freedom or independance.

Judging spatial relations for the two Ps for the er... um... chest...

Hinting at the final design

Stylised Ps and reduced complexity of the hair of the silhouette.

End result of the basic design. Streamer style caps for the silhouette outline.

The end result - The theme of Cuppaidge wing revolves around a light blue and stars. (Star gaizers will note the Southern Cross on the far right)

To reiterate, yes the design is a little ‘racey’ and in some cases appears misogynistic, you have to remember I was only going by what I was told…

First impressions were excellent, only two changes to the original design. Firstly the primary colour of Cuppaidge is now Yellow and instead of stars the symbolic object is a cup cake.

…so basically if the original design was a little misogynistic, now with the addition of baked goods it makes me look a little more on the chauvinist side.

Extended variations, I prefer the ones to the right.

A friend of mine who is in charge of the Hartland wing at The Womens College asked me if I had any contacts in merchandising, in particular custom glassware, as she was looking at ordering custom items for girls. Every wing at the college has a certain form of merchandise made available every year for the members to symbolise their time living at college.  After a good hours worth of internet surfing and chatting I eventually discovered that hey hadn’t created anything to go on the aforementioned merchandise and I offered to whip up a simple graphic for them.

With in about half an hour of sketches and prototypes this is basically what I put forward.

One condition expressed for the design was a theme centered around a love heart or the concept of "love land"

While working on the backend for the ICC website I realised that a plain formatted form can be the difference between an amatuer and professional website design. First looking at this collection of login designs I also stumbled upon a website that presented a simple implementation for a professional look. Displaying the text in an input box when it is empty is seeminlgy simple but rather difficult to do if it is plain text in a password field.

…and yes, it’s IE friendly!!

My implementation:

Empty

With details

The new look ICC website has an ultra-minimalistic design suited for quick information access and easy implementation on a mobile platform.

Events/Home Page

Expanded

Galleries

Viewing the photos in a selected gallery

Ballistics-grade nylon, the predecessor to Kevlar, can now be seen in Logitech’s latest line of laptop bags/cases.

I purchased the Logitech Kinetik backpack (pictured) at the start of the year to carry my Asus N10J to uni every day. To be honest the design, both inside and out, was the major selling point for me however when comparing to other back packs, for example Targus and HP variants, the hard shell design was a far better choice given the near negligible weight difference. This decision was made apparent to be the right one when one morning I was involved in a road incident when cycling to uni. Long story short I came off my bike at around 50Km/h and skidded and rolled along the bitumen before coming to rest abruptly in a metal fence. Given that the Kinetik had been put through that kind of torture I didn’t hold out hope for my poor netbook. I was overly amazed to find the N10 without so much as a scuff, as well as finding the Kinetik only suffering a few scratches despite skidding on the road with my weight on top.

First Glance

Closer inspection - exposed nylon fibers

Me - not so lucky, still with the scars

Though one thing that didn’t survive was my Citizen watch which left a gash on my wrist from when it got ripped off.

FACT: It still has a bug that’s been known since at least IE6

Recently while working on the ICC website I had an error which as it turns out was no fault of my code but a recurring bug in Internet Explorer that exist within its rendering engine.

Rendering fault causes duplicate 'phantom' text, the second lot of text doesn't exist within the DOM

The issue relates to having multiple consecutive floated divs, which was how I orginally designed the navigation bar.

Given that the only posts on solutions to this bug didn’t relate to divs arranged in this manner I just recreated the navigation using a clean formatted unordered list.

Ironically every page I’d found explaining and providing work-arounds for this bug had a giant banner exclaiming: “This bug has now been rectified in IE7!!!!” … sigh… if it had I wouldn’t have spent hours figuring it out. With that said, the transition from <div> to <ul><li> was relatively easy and largely involved renaming and adding html tags and css classes.

A more realistic alternative to microsofts “IE8 Get the facts” page: http://www.positioniseverything.net/explorer.html

Trawling the internet one night I stumbled upon an ad for Giorgio Armani and thought “huh… i could put my face there…” and so I had a crack at it and here is the end result:

This is the code used to create the map for mmds.benhoad.net.

First things first, if you want gmaps for your website you going to need an API key.
HTML:

<head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
 <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=12345&amp;sensor=false" type="text/javascript"></script>
</head>
<body onload="initialize()" onunload="GUnload()">
 <h3>Our Location</h3>
 <div id="map_canvas" style="width: 100%; height: 300px; display:block"></div>
</body>

Where once you have gotten your API key you would change the “12345″ in the script head tag.

In this case sensor = false because we have no need to relate the map to a mobile device GPS receiver.

JS:

function initialize() {
            if (GBrowserIsCompatible()) {
                //This is for a custom icon to be displayed on the map
                var blueIcon = new GIcon(G_DEFAULT_ICON);
                blueIcon.image = "http://mmds.benhoad.net/gmapicon.png";
                markerOptions = { icon:blueIcon };

                //assigns the google map to the blank div with id "map_canvas"
                var map = new GMap2(document.getElementById("map_canvas"));
                map.setCenter(new GLatLng(-27.302976, 152.978683), 18);
                map.setUIToDefault();
                map.addOverlay(new GMarker(new GLatLng(-27.302976, 152.978683), markerOptions));
            }
        }

key=12345

And so the end result is…

A nice touch to any website that would otherwise display a picture for a map.

In MMDS we were given a client to produce a website for, in my case it was the Pine Rivers Veterinary Surgery.

Two new useful tools I learnt for this project were the Mootools JS framework and the CodeIgniter PHP framework.

Design

Initial Mockup

Early logo designs, though a simpler 2 colour design was used because these were perceived to be too detailed and too "swiss"

First XHTML/CSS mockup

Final design choice with semi-complete content

Examples for Mootools and Google Maps will be added in separate posts for better indexing.

I know it’s been a while since my last post but with uni ramping up I really didn’t have time to write anything new, however, I do come back with more info and ramblings to share.

First up, you can now follow me on twitter.

Secondly, this semester saw me undertake MMDS1400 at UQ which was an intro to web course. The next post will include details on that project.

and lastly, the UQ ICC website is nearing completion for a semester 2 release date. The final choice for the development was influenced by what I had learnt in MMDS. It will involve a PHP MVC framework called Codeigniter and UI enhancement covered by an open-source framework Mootools.

NB: The title is  reference joke from Valve’s physics game “Portal”, though I have being doing science… if you count dumping a tub of frozen CO2 into my parents pools as being science…