jQuery

Portfolio Image

Sid Dickens

Collectable Tiles

Sid Dickens was one of the largest projects I have taken on (solo) to date, and employs a huge amount of custom code and modules. One of the biggest and most rewarding sections of the site for me to build was the social Tile Gallery tool. It allows users to select products from the site, and arrange them on a virtual wall. Dragging and dropping the user can position the products, and upon dropping, it stores the location in the database. Once the user has finished positioning all their tiles, they can name the gallery, give it a description, and publish it for the world to see. The galleries are then listed in the community section where other users can view, and add all the tiles on the wall to their cart in 1 click. Perfect for when someone does not know what they want until they see it. Another social aspect of the site is the Tales & Tributes, which is an custom advanced commenting system, allowing users to add their own stories and memories about a specific tile. Other sections include a blog, a retailer search, and a retailer only section of the site, to name a few.

Designer
Lift Studios
Programming
Ryan Ilg
Time Window
2010.10 - 2011.03
Tools
Link
siddickens.com

Portfolio Image

Adam Blasberg Photography

Vancouver Photographer

Simplicity is key on the Adam Blasberg Photography site. Showing no more than some simple branding, and some amazing photography. The user is first presented with scaled photos, upon click, the collection expands to reveal other images in the set, as well as a larger view of the initial photo. When a collection is opened, it changes it's z-index and appears over top of the other collection in the same row. From here the user can either close the collection, or view more detail shots of the collection. The site is running on a modified version of my project framework, and uses jQuery for it's collection animations.

Designer
Free Agency Creative
Programming
Ryan Ilg
Time Window
2010.05 - 2010.05
Tools
Link
adamblasberg.com

Portfolio Image

Native Shoes

Vancouver Shoe Startup

Taking inspiration from quite a few flash sites, Mark created a simple, yet functional design to emphasize the new Native Shoes. With usability, and web standards in mind, I created the base using XHTML + CSS, running on Drupal for content management. Using a combination of Taxonomy, CCK, Views, and a boat load of custom code, I created an easy to manage product catalogue, with built in Ubercart integration, to allow purchasing of shoes online (coming soon).

Upon first arriving at the site, you are presented with large photos, linked to various sections around the site. The site includes many special rollover states, adding large photos and text on hover. Clicking an individual product brings the user to a horizontally scrolling view of product colours, and allows the user to see all the colours that product is offered in. After choosing a colour, the user is presented with a 360˚ rotation of the shoes, which works with a hover interaction.

Designer
Mark Gainor
Programming
Ryan Ilg
Time Window
2009.11 - 2010.03
Tools
Link
nativeshoes.com

Portfolio Image

Home for the Games

2010 Vancouver Olympics house sharing project.

Using Drupal at its core, Home For The Games is one of the most customized Drupal sites I have ever built. With more than 30 different contributed modules, and a purchasing/property creation module built from scratch integrated with Paypal. The use of jQuery, and a customized jQuery date picker, allows for quick and easy tagging of available dates. Home For The Games allows hosts/homeowners to create a profile, and allows a visitor to book individual days to stay.

Designer
Seven25. Design & Typography Inc.
Programming
Ryan Ilg
Time Window
2009.05 - 2009.08
Tools
Link
homeforthegames.com

Portfolio Image

Seven25. Design & Typography Inc.

Vancouver Designer, Isabelle Swiderski

Using Drupal 6 with a handful of modules. It's standards compliant as well as backwards compatible. Project images are dynamically loaded via jQuery (Javascript) and displayed to the user without reloading an entire page. If the user happens to have Javascript turned off, the site still functions as properly by loading images with a fresh server call.

Designer
Seven25. Design & Typography Inc.
Programming
Ryan Ilg
Time Window
2008.12 - 2009.01
Tools
Link
seven25.com

Portfolio Image

Plenty

Plenty Boutique Clothing Stores in Vancouver

I had the pleasure of working with Sonja Schneider again on yet another Drupal project. Using an already existing install of Drupal, I was in charge of building a new skin, adding new sections, and providing additional functionality. Using a mix of XHTML, CSS & jQuery(Javascript). The new Plenty site adds a slew of new features, all of which built on standards based code. The site degrades on older browsers, but provides a slick interface for the users that keep up to date.

Designer
Sonja Schneider
Programming
Ryan Ilg
Time Window
2008.10 - 2008.11
Tools
Link
getplenty.com

Portfolio Image

Dace

Vancouver based Fashion Designer.

Dace (d a c e) is a local fashion designer. I used XHTML with CSS and Javascript (Lightbox, SWFObject and sIFR) to build the templates, which run on the Shopify CMS system. Shopify is a great online sales system which allows you to create you own templates from scratch, so there are no restrictions when it comes to implementing a great design over organized, standards based code. The online store allows users to purchase items online, and provides an easy way for Dace to add new products every season.

Designer
Matt Penner
Programming
Ryan Ilg
Time Window
2008.06 - 2008.09
Tools
Link
dace.ca

Portfolio Image

Morgan Crossing

Real Estate Development in South Surrey, BC

Drupal was once again used for this large site of floor plans, flash modules, and all around real estate goodness. Using jQuery and Javascript onto of XHTML base, allowed us to give the user a more fluid experience, while still allowing it to degrade gracefully (so it still works for people without js). Animations and on the fly loading allows users to view photo galleries on any page, in a large format. Giving the user a great experience into buying at Morgan Crossing.

Designer
Free Agency Creative
Programming
Ryan Ilg
Time Window
2008.07 - 2008.08
Tools
Link
Archived Version

Portfolio Image

Frontier Dental

High-end North American Dental Company

Using a mixture of XHTML, Javascript, and Flash, I pulled together TBWA Vancouver's designs into a total functioning package. Upon loading up the site for the first time, you are confronted with an intro, which is actually loaded on top of the XHTML structure. When the two second intro is finished, it disappears and gives access to the XHTML site below. Using Flash, before and after photos can be easily browsed, and blown up with the click of a button. If the Flash plugin is not available, the same tools are provided in an XHTML + CSS version, but just lack the animations.

Designer
TBWA Vancouver
Programming
Ryan Ilg
Time Window
2008.03 - 2008.06
Tools
Link
frontierdentallab.com


© 2011 Ryan Ilg Creative Design.

@ryanilg | +778.228.9562

Built on Drupal with valid HTML, CSS, XML using Textmate.
Hosted by Dreamhost.

RI

Feeds

Delicious Links

No links to display :(