Software Used:

• Photoshop
• Coda
• WordPress

Eatz Moxie’s Staff Portal – WordPress

A customized WordPress frontend theme and backend admin control panel for a Eatz Moxie’s Staff Portal. Featuring a user interface and visual style consistent with their website, this staff portal is a great example of the flexibility of WordPress as a content management system.

Gathering inspiration, imagery, and content from their website set a solid standpoint for the visual communication, and overall user interface for the CMS. Complementing the attractive frontend design is a simplified self-administrated backend. This web panel allows for their outlets across the nation to update and create new content without having to worry about the code, as the post options feature a complete WSYIWYG editor.

The overall goal for this project was to create a portal for this company’s Staff all across Canada, and have a flexible design to incorporate multiple ads, as well as being a hub for quarterly produced video newsletters that will be hosted on the site. This was achieved with the customization of WordPress, and met all of the client’s expectations and more.

View Eatz Moxie’s Staff Portal – WordPress

Software Used:

• Illustrator
• Photoshop
• Flash
• Coda

FlyKicks Web Design. An online basketball shoe catalog made with PHP and a MySQL database. Featuring the option to sort by brand and color, as well as an intergrated flash news ticker and image gallery.

Using PHP to dynamically generate content, this online shoe catalog features a fully dynamic image gallery, as well as a highly stylized flash ticker for general news and updates on upcoming products or sales. The site was given a very rich feel, with aspects such as shoe laces and perforated leather used throughout the design.

Content gathering, proofing, as well as image retouching played a large factor in the time taken for this project. Accessibility and SEO were also taken heavily into consideration. The site looks and functions the same in all modern browsers (Firefox, IE6, Safari..etc), and boasts a an excellent print and mobile CSS, allowing the site to be printed or viewed on portable devices (such as phones) at any time.

View FlyKicks Web Design

Software Used:

• Photoshop
• Flash
• Coda

Alliance Tree Care Web Design. A full website complete with custom Flash carousel, Lightbox, and professionally styled contact forms.

Alliance Tree Care came to me to build their online presence, and provide an easy way to supply information about their services, and interact with potential customers on a more personal level. The site infrastructure was based around their needs, and a flash carousel and lightbox were incorporated to increase the visual appeal and quality of their company. An earth tone color scheme matched their corporate color, and tied the entire feel of the website together.

Also, a custom contact form allows their clients to ask topical based questions about their services, at the same time providing Alliance Tree Care with a strong database of contact information. This was a great project to be a part of, and Alliance Tree Care was ecstatic about the end result.

Recently the site has been updated with new HTML5 and CSS3 techniques implemented into the design, making a faster, and more SEO friendly website.

View Alliance Tree Care Web Design

Software Used:

• Acrobat Pro
• Illustrator
• InDesign

Verdyol Product Design. Mulch bag designs for Verdyol Plant Research Inc, featuring four different variations for their entire product line.

This product design had some special considerations that needed to be considering during the design process. A fluid design that would look good when the bags were stacked in alternating orientations on the pallet. Also, it was a necessity to have a similar design with a strong contrast in color to differentiate between the different products.

Including custom vector illustrations and typography, the final result was a fresh take on their products, and really helps build their corporate identity through their products.

View final code

While designing a form for my client, I came across the need to render clickable text beside checkboxes for better usability. I had a difficult time finding an article that did not use Javascript in anyways.

Then in my search, I came across the most obvious answer that lying right under my nose the whole time.

The Label Tag, and the ‘for’ attribute.

Most designers will start with the following:

<fieldset>
	<legend>Your dog's favorite foods:</legend>

	<input type="checkbox" value="kibble" />
	<label>Kibble</label>

	<input type="checkbox" value="chow" />
	<label>Chow</label>

	<input type="checkbox" value="steak" />
	<label>Steak</label>
</fieldset>

Which renders:

Your dog’s favorite foods:

Kibble

Chow

Steak

As you can see, you can click the checkboxes, but the text only serves as well… a label, and is not useful as an interface.

Using the ‘for’ and ‘id’ attributes respectively, we can achieve ‘clickable’ checkbox text.

Now, we add the ‘id’ attributes to the inputs, and the ‘for’ attributes to the labels.

<fieldset>
	<legend>Your dog's favorite foods:</legend>

	<input type="checkbox" value="kibble" id="kibble" />
	<label for="kibble">Kibble</label>

	<input type="checkbox" value="chow" id="chow" />
	<label for="chow">Chow</label>

	<input type="checkbox" value="steak" id="steak" />
	<label for="steak">Steak</label>
</fieldset>

Which renders:

Your dog’s favorite foods:

Kibble

Chow

Steak

Great! Now we can click either the checkbox or the label, and they both check or uncheck the box! But.. we’re not done.

The problem with the current setup is that the cursor does not change at all, and does not alert the user that ‘You can click me!’

If we add some simple CSS, we can then create a enriched user interface.

First, lets give a class to this fieldset so we do not affect other inputs or labels.

<fieldset class="checkbox">
	<legend>Your dog's favorite foods:</legend>

	<input type="checkbox" value="kibble" id="kibble" />
	<label for="kibble">Kibble</label>

	<input type="checkbox" value="chow" id="chow" />
	<label for="chow">Chow</label>

	<input type="checkbox" value="steak" id="steak" />
	<label for="steak">Steak</label>
</fieldset>

Now we can add some CSS.

.checkbox input { cursor:pointer;  }
.checkbox label:hover { cursor:pointer; color:#ffffcc; }

What this declaration is doing is; When we hover or any inputs or labels within the fieldset with the class of ‘checkbox’, it changes the cursor to a pointer, and creates a roll-over color for the label.

*NOTE* Since you are using the :hover pseudo class, you can not use ‘inline-css’ to style these elements.

Which renders:

Your dog’s favorite foods:

Kibble

Chow

Steak

Success! We now have a clean, usable, and attractive interface. Plus, we’ve created valid xHTML and CSS without having to use any Javascript or other methods.

Like the article? Leave a comment!

Since March, Internet Explorer Lost 11.4 Percent Share To Firefox, Safari, And Chrome

Quoted from TechCrunch

The new browser wars on on. More than a decade after Microsoft killed off Netscape with Internet Explorer, competition in the browser market has never been stronger. Just last week, Mozilla released Firefox 3.5, which has now been downloaded nearly 14 million times. Earlier in June, Apple released Safari 4. In March, Microsoft introduced Internet Explorer 8, and Google came out with a speedier beta of its Chrome browser.

Some early data is coming in showing relative market share and how fast people are upgrading. If you look at the chart above from Statcounter, it indicates that since March Internet Explorer has lost 11.4 percent market share to other browsers. That is the combined market share of IE8, IE7, and IE6. Certainly IE8 (the light blue line) has been growing strong since its release last March, capturing 16.7 percent of the market as of July 4. Those strong gains make up for most of the drop in IE7’s market share from 49.1 percent in March to 30.1 percent yesterday, indicating that Microsoft is doing a good job of getting existing IE7 users to upgrade at a steady pace. And in mid-June, IE8 finally surpassed IE6, which still stubbornly holds a 7.6 percent share. Add those three up, (IE6+IE7+IE8), however, and IE all together holds only a 54.4 percent market share versus the 65.8 percent combined share in March, 2009.

In just over three months, Internet Explorer has seen its overall market share erode by 11.4 percent. Where did that go? It went to Firefox, Safari, and Chrome. Nearly 5 percent of that, or about half, went to Firefox 3.0, which currently has 27.6 percent market share. That doesn’t count last week’s upgrade. See the dotted line just below the light blue IE8 line? That is a combined set of “other” browsers and appears to include Firefox 3.5, Safari 4, and Chrome 2.0.

If you look at a 30-day version of that same chart, it shows Safari 4 with 4 percent market share and Chrome with 3 percent market share. It doesn’t yet break out Firefox 3.5, but if you assume that makes up the bulk of the remaining dotted line which jumped to nearly pass IE6 in the past week, you can figure out more or less which browsers are taking share from Microsoft. (I’ve used data from the most recent daily chart in this post, but embedded the monthly chart below which has data as of June 30).

As I said, this is early data from one source. Net Applications, another commonly cited source for browser market share, is currently reviewing its June numbers, but I have a feeling they will show similar trends. (This Wikipedia page shows other browser market share sources, most of them haven’t been updated since March). It is difficult to make any firm conclusions at this point, since market share is shifting so rapidly as every major (and minor) browser tries to convince users to upgrade.

But we are in the midst of a major upgrade cycle simultaneously across IE, FireFox, and Safari (with the Chrome wild card thrown in). When all is said and done, we might see a major shake-up in market share and almost definitely will see leadership pass from IE7 to another browser. The question is will that be IE8 or Firefox? Whichever one wins, the good news is that IE6 is finally dying.

Personally, I believe once the more modern technology becomes more commercially available for businesses, we will finally be able to attend the funeral of IE6.

Software Used:

• Photoshop
• Flash
• Coda

MLG Flash Utility. A flash utility and website created for a professional MLG team.

A professional team in MLG approached me to build them a custom web application in flash. Built with Action Script 2 in Flash CS4, this utility assists the team in timing important events during the match, and has been created to suit their playing style. The website was built on the Blueprint CSS Framework and dtCSS.

This was quick and interesting project that had some very positive results. With the help of this utility, they have improved as a team, and improved their overall standings in their ladder.

View MLG Flash Utility

I came across this interesting article written by Derek Sivers, explaining and giving some interesting facts on the subject of presenting choices to both customers and clients alike.

It’s quite a good read, and you can view the article here: http://sivers.org/jam

Quoted from Derk Sivers:

For 10 years, Columbia professor Sheena Iyengar has been studying choice. For her research paper, “When Choice is Demotivating”, they ran a great test:

They set up a free tasting booth in a grocery store, with six different jams. 40% of the customers stopped to taste. 30% of those bought some.

A week later, they set up the same booth in the same store, but this time with twenty-four different jams. 60% of the customers stopped to taste. But only 3% bought some!

Both groups actually tasted an average of 1.5 jams. So the huge difference in buying can’t be blamed on the 24-jam customers being full.

Lessons learned:

1. Having many choices seems appealing (40% vs 60% stopped to taste)
2. Having many choices makes them 10 times less likely to buy (30% vs 3% actually bought)

Surgeon Atul Gawande found that 65% of people surveyed said if they were to get cancer, they’d want to choose their own treatment. Among people surveyed who really do have cancer, only 12% of patients want to choose their own treatment.

So, if you ask your customers if they want extensive choice, they will say they do – but they really don’t.

I recommend the book “The Paradox of Choice” if you’re interested in this.

Where does this NOT apply?

In “preference matching” contexts, where people come looking for something they already know and prefer, extensive selection increases the likelihood they’ll be successful in their search. (For example: a menu at a Chinese restaurant.)

Many tests have shown that when people are given some choice versus none (choosing between six possible activities versus being assigned an activity), having some choice increases motivation and enhances performance.

How do we use this info?

Online stores often offer too many choices on their front page. Lists of dozens of new arrivals, top sellers, sale items, and categories.

Artists showcasing their art (music, essays, photos) often present a giant list of everything they’ve done.

But all of us could come to these conclusions:

• Only present 3 to 6 choices at a time. (No less than 3. No more than 6.)
• Only show your deep selection when people are searching for something specific.

My favorite example of this is Firefox’s about:config feature. Those hundreds of intimidating options are hidden from most people, but there for the few who need them.

I found that these basic rules apply to almost any situation, whether it be prototyping, branding, product design, or even options for stages of web design.

Software Used:

• Acrobat
• Photoshop /li>
• Illustrator
• InDesign

ESCN Media Kit. An eight page media kit, highlighting their integrated marketing solutions. The printed media kit also has a companion video explanation and overview that integrates graphics and type from the printed media kit.

Initial designs were composed in InDesign, and then transferred for final graphic touch ups and styling in Photoshop. This was so the work flow between the print and video production remained seamless, and did not run into any errors by trying to gather images and content through InDesign into Final Cut Pro.

Proofing and editing played major roles in this project, and the challenge was to simplify the complex concepts into easy to follow, easy to understand visual graphs and charts. This was achieve through labeling screen shots of the solutions, and having brief overviews of each depicted service.

View ESCN Media Kit (PDF, 2.4 MB )

Software Used:

• Acrobat Pro
• Illustrator
• InDesign

Verdyol Branding. A logo and branding redesign for Verdyol Plant Research. A new, fresh outlook was applied to create a sleek, flexible logo.

The Verdyol Logo was created with a clean, flexible, and memorable design in mind. Simplicity is a clear feature in this logo. The leaf incorporates grass blades in a shape of a ‘V’ to accent the Verdyol typography. Futura was the base font for the text. Negative kerning and ‘removed’ sections on ‘E’ and ‘D’ visually represent how Verdyol is to be pronounced.

Verdyol’s logo design is compact, making it adaptable to all types of media. Either the text or the leaf can be used separately of each other, yet they still create a solid base for Verdyol’s corporate identity.

View Verdyol Branding (PDF, 48k)