Site Launch: Snowberry Beauty

by Markos on January 7, 2010

Snowberry Beauty is a fantastic looking site and it’s made all the more impressive by adding animation to key components with jQuery.

Snowberry Beauty originally had their website designed and built entirely in flash. The only problem was that it was horrendously difficult to manage and their original flash developer was no longer available.

They were in a bit of a bind so I suggested that they rebuild their website with HTML, that way any web developer worth his salt should be able to maintain it. It would also be more searchable and quite simple to develop an administration interface so that they could add new items and articles as required.

They were very particular about the look of the site, and rightfully so as I am guessing they paid a fair amount for it originally, so what about all the gorgeous animation that was done in flash? Well … We can do that in HTML these days. Enter jQuery.

I was the sole developer on this project it presented a number of challenges. I like challenges and two of them I will mention here were the animation and the custom typeface. Read more

Most businesses could really benefit from a solid email marketing solution. It’s an extremely handy tool to have in your arsenal and its so effective and affordable that you just can’t ignore it.

I’ve talked to a lot of people who agree that email marketing should be really beneficial to their business. Many of them have given it a go by trying to use Outlook to handle their email marketing. While you can technically send a stack load of email to people with Outlook let me tell you why it’s a very bad idea and complete waste of time and money. Read more

Site Relaunch: Accommodation Te Puna

by Markos on December 23, 2009

Accommodation Tepuna website developed in wordpress with thesis

About two years ago I designed and built a nice looking web site for a local motel and holiday park, Accommodation Te Puna. It was Pauline’s (owner) first foray into the internet and the site served her well over that time. But times change and with some more exposure to the internet, Pauline wanted to start putting a bit more time into her website and use it to generate more leads.

Pauline contacted me a couple of weeks ago to make some changes. She’d just been talking to a chap all about search engine optimisation and marketing as well as social media and networks and she wanted to make some changes to her website so she could be a bit more proactive in these areas. Read how redeveloping Pauline’s website helps to generate more leads.

Smashing book arrives

by Markos on December 16, 2009

Smashing Book arrives

Smashing Book arrives

I’ve been a long time reader of the smashing magazine website and ordered the Smashing Book (www.smashingbook.com) the day it was released.

Anyone that’s familiar with smashing magazine knows that it’s packed full with some really useful articles in the web and design industries.

I’ll find some time over the next couple of weeks to get through the bulk of it and let you know what I think. I’ve managed a quick skim through today and so far it’s looking quite promising.

3D animated clouds in Flash CS4 from a photo

by Markos on December 16, 2009

I’ve recently been putting together an opening sequence for a website I’m developing for a local architect. While I was putting this together it got me thinking that it would be quite nice to animate the clouds moving slowly through the scene. I wanted the effect to look convincing but I don’t want to have to render a 20 second video sequence because it would make the file size too large. Enter Flash.

I remembered a video tutorial I watched over at Aharon Rabinowitz’s web site, www.allbetsareoff.com.
The tutorial is “Creating 3D Cloud Motion From a Still Image“. Aharon’s tutorial is designed for Adobe After Effects and the end result is very effective so I thought I’d try something similar in Adobe Flash CS4.

You can view the final effect here (the animation is quite subtle) then follow on for a step by step breakdown of how the effect was achieved.

3d animated sky in flash cs4

View 3d sky animation

Read more about how this effect was achieved

Motion graphics logo reveal for Sentinel

by Markos on December 6, 2009

As well as operating my bread & butter freelance web design business I have recently been devoting more time to learning motion graphics techniques and finding some practical applications.

I developed the logo reveal piece that you can see below for an upcoming server and website monitoring product called ‘Sentinel’.

Sentinel is primarily a web based service that scans your website or server to check if specific services are running.

I wanted to visualize the scanning process and imagined a futuristic robotic style eye that scanned objects with a beam of orange light (yes I possibly have watched too many sci-fi movies).

This was created using Adobe After Effects with Fractal noise, CC Sphere, and a little bit of Trapcode Form. It was also created by lots of learning and the great resources from Andrew Kramer’s www.videocopilot.net and John Dickinson’s www.motionworks.com.au. If you are at all interested in motion graphics then I highly recommend checking out their sites.

I also made another version of the scanning effect and used it as the background animation for the current sentinelmonitoring.com beta website. It takes a few seconds to load as it’s about 150KB.

To do this I rendered out an FLV from After Effects, used it as the basis for a Flash movieclip and then overlayed the text that I wanted to appear. I changed the blend mode on the text so that it would only appear during the brightest parts of the underlying animation and then rendered out a .swf movie. From there I inserted the swf into a web page, set the wmode to ‘opaque’ and then stacked the html elements over the top. Pretty straightforward but very effective.

You can check out the sentinel monitoring beta website here.

Web design qualifications. Do they matter?

by Markos on December 2, 2009

Not so long ago I had a prospective client ask me what my web design qualifications were. I thought about it for a moment and replied “Err none actually”.

I rattled off all the years of experience I had. How I got into the internet in 1996 and went on to work with some of the big names in New Zealand’s internet industry. I explained how myself and a couple of friends revolutionized the web hosting model in New Zealand with the launch of iSERVE limited back in 2001 and how I ended up doing a stint of teaching at a tertiary institution and, more recently, was involved in starting a small web and interactive design company.

All of this accounted for absolutely nothing in the eyes of this prospective client. He wanted to see a piece of paper that said “Mark Shingleton has completed web design 101 and now knows how to build web sites”.

Read more

Though I’m primarily a web designer I have recently become interested in motion graphics … and I have to admit it sure is a lot of fun.

One of the web sites that I frequent is www.motionworks.com.au. Motionworks is run by John Dickinson and one of the many resources that he has is a great interview series called ‘Unplugged’.

John decided to get the community involved in submitting concepts for a new opener for the series and has issued a challenge.

Motionworks needs a hot new opening title sequence for Unplugged, our popular motion graphics interview series. We have a cool music track composed by Selcuk Can Guven, and are looking for some cool graphics to match. All entries will be showcased right here on Motionworks and the best of the best will become the new title sequence for Unplugged with a credit and web link at the end of each interview.

Well I thought that sounded like fun so I have put together a piece and submitted it for consideration.

I must say that I learned a heck of a lot putting this together and it has really whet my appetite for delving deeper into the motion graphics industry. Thanks John for issuing the challenge and thanks also to Aharon Rabinowitz for a snippet of advice; “Shy people get nothing”.

Here’s my entry below.

Cross browser testing with Adobe Browser Lab

by Markos on November 28, 2009

Cross browser testing is one the realities of creating web sites & web applications and it’s one of those things that can be a bit of a headache from time to time.

My setup here is pretty standard. I have a newish iMac for my day to day work as well as a Windows laptop. On the mac I run Firefox and Safari while on the laptop I have IE6, IE7 & IE8. That covers me pretty well for the majority of browsers but sometimes I’m working off site, my laptop is playing up or I need to show a client how something looks in IE6 vs Firefox 3 … enter Adobe Browser Lab. Read more

Time tracking & billing with Harvest

by Markos on November 24, 2009

harvestRecently I was looking for a solution to handle my invoicing, a job which we all no doubt both love and loath .

Most invoicing systems that I have encountered are smaller parts of large accounting systems and designed with accounts people in mind. But for someone like myself, who is most definitely not an accounts person, they can leave me somewhat confused and cold. I just want it to be simple. Read more