Interactive PDF Portfolio

For our final assignment for our InDesign class, we were tasked with creating an interactive PDF portfolio that we could present to potential employers and clients. For my portfolio I chose to highlight some of my successfully completed projects. These projects not only highlighted my graphic design skills, but my architectural/industrial design background as well as my project management aptitude. The interactive features of InDesign allowed me to add navigation throughout the document, as well as links to social media accounts. Using multi-state objects, I was able to highlight many more examples, images and details from each of the projects presented. I accomplished this by creating a carousel of images for each project with large images that could be cycled through using arrow buttons. This feature really gives the viewer a much better view of all the elements I was trying to present. Until this course I had never used InDesign for anything beyond print and desktop publishing. Even when I was creating presentations they were rather stagnant and lacked animation, transitions and interactivity. These features will really help me create more dynamic presentations that I can not only present myself, but offer as a service to my clients in the future.

click here to view the interactive file

iPad Air Mockup

This slideshow requires JavaScript.

 

Website on Laptop

Composite 2 – CD and Website design

ABOUT:

For this assignment I decided to design both a CD and website for a new musical theatre production called “Rumspringa Break!”. The play is co-written by my brother and some friends. The story is about two Amish twins Hannah and Ruth, who leave the comfort of their strict, sheltered community to explore the outside world for the first time, and things don’t go as planned. Desperate, penniless, and stranded in the big city’s roughest neighbourhood, the naïve sisters must rely on their faith, the outlandish locals, and each other to survive.

 

CD DESIGN CONCEPT:

Rumspringa Break! CD Design

Rumspringa Break! CD Design

The play is full of contrast and I wanted that displayed in the design of the CD. Even the type used in the title of the play uses this contrast. The old English typeface in contrast with the grunge brush lettering. For the design of the CD package I used a desaturated muted grungy image of the twins heading to the city and the derelict home they called home. This is in stark contrast to when you open the CD and have the brightly coloured landscape of the idyllic farm life with open fields and rolling landscapes.

Being that this is a Musical that is currently being workshopped and developed, I wanted to focus more on the creative team than a specific production. Additionally, I decided to go with a more cost-effective approach to the packaging by using a six panelled eco-wallet.

RB apple music

Apple Music MockUP

 

WEBSITE DESIGN:

RB Web-desk

Rumspringa Break! Website Mockup

As mentioned above, this play is still under development so I wanted the focus of the website not to be on a specific production. Thankfully, Rumspringa Break! has been performed on a few occasions, most recently as part of the Toronto Fringe: Next Stage Theatre Festival. This meant that I was able to get some great photos, a video as well as some audio tracks.

I decided that I wanted a one-page scroller so that all the information was easily viewed. Before any I started with any html, I wireframed the basic website layout to make sure all the elements flowed properly. Once I did that, it made it easier to create a full website mock-up in InDesign. For this I used a basic 960-pixel grid to keep all my elements properly aligned. I decided to include a small section about the musical, a section with a video and an audio clip from the musical, images from the most recent production in a lightbox and lastly a section highlighting the creative team involved in creating the Musical.

Once it was all laid out the way I wanted it, that is when I started coding the website. This was the first functional website that I designed and coded from scratch and while it wasn’t easy, I found it very useful and rewarding. When something didn’t work or look the way I wanted it, I enjoyed the challenge of trying to figure out how to resolve the issue. To make the website responsive, I had to make sure that the column system was in percentages that switch to a single column with a media-queries. I also used a slicknav menu (hamburger menu) for mobile users.

RB-FULLSITE

Final Rumspringa Break! Website

Rumspringa Break! Mobile Website

Rumspringa Break! Mobile Website

I found this composite a lot of fun and very challenging at the same time. Carrying many of the design elements in both print and web really kept all the elements cohesive.

Design > Code

Design > Code

As a very visual person, This  project was very useful in taking a design from a concept to an actual website.  Since I a have a good comfort level with Adobe Illustrator, it really helped me see how you can make a design in “design” software and then applying the required code to making it web. The use of the 960px grid really came through in the structure of the website. I found this assignment challenging, but very beneficial in the web design process.

 

Corporate Identity Assignment – Final

FINAL CORPORATE BRANDING FOR EASTBAY SUPPLY COMPANY

EAST BAY ALL

When I was preparing the final design, I selected the imagery I wanted and applied a blue overlay to match the brand colours. Additionally, I selected a spot colour of Pantone 274C. The rest of the colours will be printed 4 colour printer.

After all the design was done, I prepared the files for printing. To do this I created two separate postscript files. In the first postscript files I separated all the colours, CMYK as well as my spot colour. For the second postscript file I made a composite of all the colours. I then brought the postscript files into distilled the postscript files into PDFs. The final composite file is the one I used to print.

The most important thing I learned from this project was the prepress print process. This is something I have wondered about for a while.

 

InDesign Magazine Assignment

mock-2

InDesign Magazine Assignment

For this assignment I made a magazine about Lego for adult Enthusiasts. To differentiate this magazine from other Lego magazines that are often directed to a more juvenile audience, I decided to go for a more art focused publication. I used a very clean simple look with single bold images and light sans-serif text. I tried to add some playfulness back into the document by staggering the positioning of the columns.  Large margins and lots of white space with a simple colour palette of black and white really allows the focus of the page to be about the imagery.  I sourced the articles from various news sources online and are based on adult Lego usage. Additionally  I tried to create new ads that  kept in line with the theme.

 

mock-2Mock-1

 

 

 

Corporate Identity Assignment – Milestone #2

Please select  your preferred option for the Logo.

 

LOGO OPTIONS

 

BRAND TYPE

The Typeface i will be using is  Akkurat Pro. It is a clean modern font with a few weights

BRAND COLOURS

I wanted to keep the colour pallet simple. The navy will be used instead of black and white will be the contrast.

Concept Sketches

Below are concept sketches for the corporate identity material. Using colour and imagery the pieces will all tie into each other and reinforce  the feeling of homegrown  and local.

Business Card Concept

Business card sketch

Business card sketch

letterhead Concept

Letterhead sketch

Letterhead sketch

envelope Concept

Letterhead sketch

Letterhead sketch

 

Website Wireframe Assignment

For this assignment I chose to analyze the Lego website.

Firstly I looked at the break down of the sections of the website. The header is at the top and contains the company logo, site navigation, search feature and account login.

In the first section, there is a full width Image slider.

The section section is comprised of two scrolling blocks, each four columns wide with images and some text below.

The Third section contains Box Models of some of the various themes/ brands with buttons taking you to the online store. These are set up in a three column format.

Lastly, The footer contains a more in-depth site navigation in an unordered list format. it also contains the legal verbiage with the trademark and copyright information.

Wireframe-Lego_site-1

lego.com –  Website

Wireframe-Lego_site-2

lego.com – Wireframe