Simon.

Hi, I'm Simon.

I enjoy building ideas.

Check out some of the stuff I've designed.

Portfolio

Concept Illumination

Details

Concept Illumination is a Montreal-based LED lighting distributor. They needed a website to showcase their capacities, provide information on their products, and demonstrate how past projects benefitted their customers.

For ConceptIllumination.com I wanted the users to see large visuals that established an atmosphere of the effects of LED lighting. On the front page, I accomplished this by using the foreground as a means of showing the immediate content/product and the background to demonstate its capacities. Whenever a user switches between product types they are shown a new, pertinent background.

For the products, all similar products are on the same page so the user doesn't have to constantly click around to find what they're looking for. If the customer is curious about a product, each product type has a "Download Specifications" button that gives them in-depth information and a "Request a quote" button that allows for them to quickly, and easily provide Concept Illumination what they're looking.

Launch site

I feel like my greatest challenge for developing the Concept Illumination website was making sure the products were highly visible while also making sure their content was easily accessible.

Project Type

  • Website

Technologies

  • WordPress
  • XHTML
  • CSS3
  • jQuery
  • PHP
Concept Illumination website screenshot 1
Concept Illumination website screenshot 2
Concept Illumination website screenshot 3

Arts and Science Federation of Associations

Details

The Arts and Science Federation of Associations is one of Concordia University's largest faculty association. They wanted to create a new website for their faculty.

This Concordia student body needed a website to manage its vast array of content. My role for the most part was to code the design and provide input on best practices. A few of the requirements was a page that contained all the information,a parallax effect, so when the user scrolls the page different elements moved at different speeds, as well as content management system. With that in mind I used jQuery to help with the javascript side of things and modified a Wordpress installation to be ASFA content-friendly.

Several sections had similar designs to them, however a few sections (such as events, videos, follow, photo album, and contacts) had unique styles and each one presented its own obstacles.

Launch site

The challenge I faced was mainly uncertainty—would I be able to build everything with my current experience? The research I did for this project helped a lot and provided me with plenty of guidance. In the end I learned a lot because I really had to push myself.

Project Type

  • Website

Technologies

  • WordPress
  • XHTML
  • CSS3
  • jQuery
  • PHP
Arts and Science Federation of Associations website screenshot 1
Arts and Science Federation of Associations website screenshot 2
Arts and Science Federation of Associations website screenshot 3
Arts and Science Federation of Associations website screenshot 4

AlexisSuzuki.com

Details

Alexis Suzuki asked me to help her with her Concordia election website. She's a great person; I couldn't say no.

Alexis needed a website to promote her candidacy in a student body election. She wanted something that was simple, yet effective. I created a horizontal-scrolling website that lists off her main campaign points. This project allowed me to experiment with some fun CSS3 properties that I haven't had an opportunity to try out.

Launch site

Sometimes a friend needs a website, and sometimes the challenge they offer is hard to refuse.

Project Type

  • Website

Technologies

  • XHTML
  • CSS
  • jQuery
Alexis Suzuki website screenshot 1
Alexis Suzuki website screenshot 2

Application Brochure Portal Mock-up

Details

This Application Brochure Portal was build to create an easy means for employees to add/review/and download relevant information to a specific field of lighting.

I approached this project with ease-of-use in mind. Instead of using simple text links, I went for a hybrid of images and text so that the user locate their application faster. This approach also meant I could create larger and easier-to-click links. In addition, there's a filter bar that would further eliminate unnecessary options. Once the user has made a choice they are brought to a sub-page where they then can locate the appropriate content which was broken down by content type.

I was really hoping to find a balance between content and interface. I've seen a lot of cases where one over-powers the other, and it becomes frustrating for the user.

Project Type

  • Mock-up

Technologies

  • Photoshop
Application Brochure Portal screenshot 1
Application Brochure Portal screenshot 2
Application Brochure Portal screenshot 3
Application Brochure Portal screenshot 4

Radialpoint Email Blasts

Details

Radialpoint needed a couple of HTML emails made for company-related events.

Coding HTML and CSS for a website is different than for emails. The limitations email clients pose on markup is fairly strict, and they don't all play by the same rules. Knowing that, it's valuable to have a few resources to refer to, such as Campaign Monitor's. The main email client that Radialpoint uses is Outlook so I kept that in mind when putting these emails together.

Figuring out how to code emails is interesting.
On the one hand you can take all the HTML and CSS experience you have and then take notches out of what you expect it to do, and on the other you have to accept that emails just aren't websites.

Project Type

  • Email

Technologies

  • HTML
  • CSS
Radialpoint Iron Man 2 email screenshot 1
Radialpoint Iron Man 2 email screenshot
Radialpoint Summer Splash email screenshot
Radialpoint Summer Splash email screenshot 2

Future Lighting Solutions Email Blast

Details

Future Lighting Solutions wanted to send out a holiday greetings email to its customers.

This project, similar to Radialpoint's email blast, was dependent on Outlook as its main email client. I took a simpler, faster approach which relies on images to visualize content.

I took a simpler approach on this project, I went for an easy full-image solution. Considering the result, well, hey, I think it worked out nicely.

Project Type

  • Email

Technologies

  • HTML
  • CSS
Future Lighting Solutions Happy Holidays email screenshot 1
Future Lighting Solutions Happy Holidays email screenshot 2

Tool Icons

Details

A series of icons built for web-based tools. Unfortunately, they were never approved.

This project was challenging. I had to take very abstract lighting concepts and attempt to make them into something familiar and visually pleasing. I wanted to stay away from using lighting schematic symbols since they appeal very strongly to engineers and I would have cornered myself into an overly specific niche. By using familiar tools, like a magnifying glass or a wrench the user could better associate to the ideas the icons are portraying.

I loved making these icons. And you know what? I'm proud of them, too. Even if they were never used.

Project Type

  • Icons

Technologies

  • Illustration
Chromaticity tool icon
Solid State Lighting tool icon
Usable Light Tool tool icon

Brochure Icons

Details

A series of icons built for brochures. Each icon represents an aspect or quality of the application it belongs to.

These icons, similar to the Tool Icons, are abstract ideas made into visuals. I went for a simpler, fun, shiny style to give the brochures (which were mainly full of dry tabular data) a bit more life and visual up-beat.

It's fun conceptualizing abstract ideas and building visuals out of them.

Project Type

  • Icons

Technologies

  • Illustrator
Icons for lighting brochures

About

Photo of me

A little about me

This all began for me as a teenager. Growing up I was a bit of nerd, and I would spend my weekends looking up Photoshop tutorials and teaching myself the ropes. And in high school, I took a computer class that involved learning HTML. At the time it blew my mind: What I did in the code editor, showed up immediately on the screen. I realized soon after I could mix both my interest in Photoshop and my interest for coding.

After graduating from high-school, I jumped into a technical design program where I was formally taught design and the use of Adobe Creative Suite: Photohop, Illustrator, InDesign, Dreamweaver, and Flash. From there I pursued a University degree in a program called Computation Arts—a program dedicated to conceptually realizing computer-related projects. This brings my journey to today, I have just graduated and am actively seeking a position at a company with a good culture and some like-minded people.

Skill sets

Photoshop

Illustrator

InDesign

XHTML / HTML5

CSS / CSS3

Optimization

JavaScript

jQuery

PHP

WordPress

Creativity

Relentlessness

Contact me

This field is required. This field is required. This field is required. Send