Infographics

Infographic and bio about myself

2016-03-22

Project Details:

For this project, I was to combine 3 infographics about myself and a short bio. The infographics were to be about my skills, my interests, and my projects.

Final Product:

These are the components and the final product.

Music App

An iOS app for background music, focusing on the animations.

2016-03-18

Project Details:

For this project, I was to create a music app while focusing on the animations. I decided to make the app be for playing background music. It shows the interface without any connected music.

Final Website:

Click on the thumbnail to open a video fo the app in use.

Parse Images App

An iOS app showing images and info retrieved from the cloud.

2016-02-12

Project Details:

For this project, I was to create an app that retrieved data from the cloud using Xcode and integrating Parse.

Final Website:

Click on the thumbnail to open a video of the app in use.

Personal Branding Campaign

My personal branding campaign document

2016-02-09

Project Details:

For this project, I was to answer the given questions in regards to making a personal brand for myself.

Final Website:

Click on the thumbnail to go to the PDF document.

TSSA

Design an app for the Technical Standards & Safety Authority (TSSA)

2015-12-23

Project Details:

The TSSA came to our class to present a background on who they are and the type of mobile app they required. From that presentation, we determined that the main goals of the app were to help educate users about CO safety in their homes, to help build beneficial habits, to entertain, educate, have sustained engagement with the users, and to drive the users to the COsafety.ca website. Based on these objectives, with a partner, we were to create a design for their mobile application which met their goals.

Wireframes:

These are the wireframes that we created, which were used for usability testing.

Mockups:

After receiving feedback from the usability testing, we modified the design to improve the clarity of navigation. These are the app mockups that we created.

Final Website:

At the end of the project, we presented our design solution to the TSSA. Following are the Invision Mockups which we used to demonstrate how the app would work.

Student Deals

Client practice

2015-12-18

Project Details:

Work in teams to work with a pretend client and design their web app

Wireframes:

These are the wireframes that we created.

Mockups:

These are the mockups that we created.

Extras:

We had to create a persona to try to market our product to.

Final Website:

This is the Invision mockup that we created.

Shopping Cart

PHP Shopping Cart

2015-12-17

Project Details:

Your task is to develop a limited shopping website of your choice or your lecturer could provide with a catalogue. It should include at least a registration page, a log in page, a catalog page, a product description page, and a log out page.

Final Website:

Here is the final website.

Snake Game

Creating the snake game on HTML5 Canvas

2015-12-08

Project Details:

To solely build a HTML5 Game. If you would like to use the snake game we built in class together then please amplify its stylistics.

Final Website:

Codepen final project

Jigsaw Puzzle

HTML5 Jigsaw Canvas

2015-11-10

Project Details:

HTML5 Jigsaw Canvas

CodePen:

CodePen which doesn't work.

Final Website:

The puzzle, which only seems to work in Firefox

Restaurant Design

Restaurant website design

2015-11-03

Project Details:

For this project, I was to research restaurant websites and go through the full process to design a website for a fictitional restaurant.

Sketches:

These are the sketches I drew to show the layout of the website I was designing.

Wireframes:

I created the wireframes in Adobe Illustrator, based on the sketches that I drew.

Mockups:

These are the final mockups that I created for the restaurant.

Flash Site

A Flash site about the greeting cards I've created.

2015-11-03

Project Details:

My flash website will be used inside your working portfolio, the choice is completely yours regarding the presentation of the site. A personal page about myself.

Mockups:

These are the mockups I created for the Flash site.

Final Website:

Here is the final Flash site

Bio Typography

Personal bio with responsive typography

2015-09-29

Project Details:

The objective of this project was to build an HTML document that maintained type relationships while adjusting to viewport sizes. I was to utilize 3 font families and variations and only 2 colours.

CodePen:

This is the finished product.

Architrave Design

Toronto architect website

2015-05-24

Project Details:

I worked closely with my client to plan and redesign his company website. The previous website was not responsive, had unclear navigation, and was not current for today's technology. The new website shows off the project photos and has a modern feel. Once the design was finalized, I built the website using HTML and SCSS.

Mockups:

The following are the mockups that I started creating before we decided to change direction. This was so that the lower quality photos didn't stand out as much while still taking advantage of the higher quality photos.

Final Product:

Once we changed the idea behind the website's layout, these were the mockups that were created.

Final Website:

Click the thumbnail image below to go to the live website.

Journal Design

Responsive Website Design Project

2015-04-22

Project Details:

The objective of this project was to create the design for a responsive website. The website could be for any topic, but had to be at least 3 pages long. I decided to make the design for a journal web app.

Moodboard:

I created two Moodboards, and chose to use the first one because it fit my image of the journal.

Wireframes:

I created responsive wireframes for 3 pages to help show how the website would look at various sizes (desktop, tablet, and mobile).

Mockups:

The following are the mockups I created based on the wireframes and moodboard.

Final Product:

After feedback on the mockups, a few minor changes were made for the final design.

Gesture Based Video

Creating a website from a given design

2015-04-08

Project Details:

For this assignment, I was to create a gesture based mobile animation. It was to use masking in Adobe After Effects while using some pre-exsisting matte footage to create a gesture UI animation. \n I was given some PSDs that I could select some to use as source material.

Provided Resources:

These are the PSDs that I was provided with as a starting point for creating the animation.

Mockups:

This is a PSD that I created to go in the animation.

Final Website:

Click on the thumbnail beside this section to see the final video that I created.

Master Website

Creating a website from a given design

2015-04-02

Project Details:

For this assignment, I was provided a PSD for a site, which I was to build as a fluid website. I was not provided a design for the responsive version, so I had to decide what it looked like when it got smaller.

Provided Resources:

This is the site design that I was provided with that I had to reproduce.

Final Website:

Click on the thumbnail beside this section to see the final website that I developed.

Journal Website

Creating a journal site using live data

2015-02-12

Project Details:

Using cloud services, the objective was to save data to the cloud, query (search) it, and connect multiple databases with pointers and relations. With this, my site would rely on live data. I chose to make a journal site where users could register, log in, create multiple journals, entries for those journals, and edit the entries.

Final Website:

Click on the thumbnail image below to see the website that I developed. Register an account to access your journals.

Further Work:

I decided to enhance the journal by adding more features. Although this remains a work in progress, I am able to use it for my own purposes.

Products Page Website

Creating a products page with JavaScript

2015-02-12

Project Details:

The assignment was to create a Products Page for an ecommerce site. The project requirements were to use Object Oriented structure for your products information, have the products HTML generated via JavaScript, and keep track of the number of the item in stock. \n The second part to this project is to use live data with Parse.com for storing the product information.

Final Website:

Click on the thumbnail beside this section to see the version of the website that uses live data.

Weather Icon Set

Creating and designing a set of icons

2015-02-10

Project Details:

My task for this assignment was to design and create a set of 6 icons that could be used on a website. The focus was to be on simplicity, adapting to scaling, and not over-designing.

Sketches:

These sketches were used to brainstorm how I wanted my icons to be designed.

Final Product:

Click on the thumbnails beside this section to see the final icons that I designed.

Cuda Website

Creating a website from a given design

2014-11-25

Project Details:

For this assignment, I was to choose one of the 2 site designs provided. I chose to do the Cuda website design. From the site design, I had to code the website using HTML and CSS, while using semantic markup and proper CSS. I was to have the website be as close to the design as I could make it, and add motion and related effects to it. At this point, I was not concerned with making the website responsive.

Provided Resources:

This is the site design that I was provided with that I had to reproduce.

Final Website:

Click on the thumbnail beside this section to see the final website that I developed.

Architrave Design Website

Integrative Week Project

2014-11-05

Project Details:

This is the integrative week assignment. It was an opportunity to take all the various skills from the classes and put them together into a cohesive project, seeing how HTML, JavaScript, design, motion and process interrelate into a finished product. Within a team of three to four (randomly assigned) we selected a client. We then went through a whole project process from research, ideation, sketching, prototyping and creation. \n The client we were designing a site for is an architecture firm called Architrave Design, owned by my dad. His old website was simplistic and not responsive. \n As a group, we split up the roles on designer and developer. For this project, I took on the role of the designer.

Moodboard:

One of the requirements was to keep the logo the same, which meant working with the colours already on it. He also wanted a more modern and clean site, while keeping the fact that he designs traditional homes in mind. Based off of these requirements, I put together this mood board.

Site Map:

This site map outlined the pages of the website and the sections to be included on each page.

Mockups:

When keeping to the project requirement of using the 960 grid system, I created this layout to help showcase the projects he has worked on.

Extras:

A part of the project was to create 3 business card designs. This is what I came up with.

Final Website:

My group members worked off of my layouts to code the website. I had only a little input into the code. Click on the thumbnail beside this section to see the final website that was developed.