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.

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

 

 

 

Three Ad Campaign _ Composite Week

For our first composite assignment we had to develop an ad campaign that consisted of three ads to be published in a publication as well as a social media campaign that would run in conjunction with the print ads.

 

CLIENT

I chose to create a fundraising campaign for an organization called Chai Lifeline Canada. Chai Lifeline Canada is a not-for-profit organization that provides support and assistance for children and families of children in the Jewish community who are dealing with severe or terminal illnesses. They have a variety of different services they provide including: Counseling for each member of the family, volunteers who bring an extra measure of adult attention and stability to children’s lives, tutoring for children who must miss school for extended periods of time, family retreats, special sibling programs, information, peer and professional support, and two extraordinary summer camp programs for seriously ill children help families retain a sense of normalcy and hope while fighting even the most dire pediatric diseases. All programs are free of charge.

 

PUBLICATION & TARGET AUDIENCE

Originally I wanted to have the ads published in a magazine called “Lifestyles” that highlighted the world of philanthropy. In the end I felt that the ad campaign would be better suited for “Today’s Parent” Magazine. This demographic that this magazine targets can sympathize with the cause and can relate to the difficulties of trying to care for an ill child. While the average reader of the magazine may not have the largest disposable income, I felt that the amount of readers that could relate and feel compelled to donate would be higher than any other magazine in Canada. This publication has established itself as the leading resource for Canadian families and parents over the last 30 years.

 

CAMPAIGN IDEA AND THEME

Chai Lifelines refers to the ill children they help as “warriors”. The ad campaign plays on this theme by referring to the “battle” they are in the midst of with their illness and the mental toughness they exhibit. Each warrior has their own story, their own personality. The campaign will highlight a different warrior in three separate ads, and with both text and imagery show them as the warriors that they are.
Once the audience reads a bit about the warrior they will be asked to help them to champion their battle by donating to Chai Lifeline so they can help provide the services and help the child and family. The ads will run in three consecutive issues of the magazine while in conjunction with an Facebook ad campaign.

 

PRINT AD CAMPAIGN

MAGAZINE PSD MOCKUP

This slideshow requires JavaScript.

 

FACEBOOK AD CAMPAIGN

AdParlor_Website Clicks_Newsfeed_Preview copy 2

This slideshow requires JavaScript.

Vector Portrait

For my vector portrait I chose to use a photo from my elementary school days.  I was far easier to look at back then. I started the process in Photoshop by adjusting the levels so that there was a bit more contrast and then posterizing the image to create more defined shapes and colours.

Once this was done, I brought the image into illustrator and traced out the different elements of the portrait such as skin, hair, eyes, mouth and shirt. I used the original photo to help sample the colours to get the right tones.

To help define the face a bit more, I added some shadows and highlights using the pen tool to define the area and the blend modes to darken and lighten the areas as required.

Additionally, using a custom-made brush I added some individual darker and lighter hairs to add some texture and eyelashes.

Finally, I added some details like buttons on the shirt, highlights in the eyes and texture on the lips to add realism to the portrait.

For the alternate, I went with the blue monochrome look to add a calm feeling I seem to have in the photo.

 

This slideshow requires JavaScript.

Type Poster

_poster_hsegal.indd

For this assignment I decided to make a poster for my fictitious culinary company Chubby & Kosher. Since the assignment was for a typography class, I really wanted the focus to be on the type. I used a lot contrast to help add depth and hierarchy with in the type. The large, bold narrow letters of League Gothic provide a lot of solid colour in contrast to the thin weight of Helvetica Thin typeface. I used a simple colour palette of just black and white that I have used in much of the Chubby & Kosher branded material I have created and simply applied a smoke image in the background. The result is an eye catching poster with a lot of visual interest mostly created with type.

Trifold Brochure

This slideshow requires JavaScript.

 

For this assignment I wanted to showcase a side hobby of mine, Chubby & Kosher. Chubby & Kosher is an outlet I created for my personal culinary adventures. While I don’t have any plans to monetize the idea, I decided to create a brochure for it.

The trifold brochure contains a dieline cut out on the front. When closed it will reveal the Chubby & Kosher logo.

All the images used are dishes I prepared and photographed and live on my Instagram at www.instagram.com/chubby_n_kosher.

The fonts and colours are all taken from the branding I have developed for Chubby & Kosher. They are bold and simple like many of the dishes I create.

Adobe Illustrator > Animated GIF

Lego

ORIGINAL SKETCH OF BRICK

To create my animated GIF I started with a simple sketch of a Lego brick (a personal favorite). Once sketched, I scanned the sketch and brought it in to Adobe Illustrator where I proceeded to trace the various shapes that make up the brick. I used the rectangle tool to create the front and back of the brick, the pen tool for the for the top and sides and the ellipse tool combined with the pen tool and shape tool to create the bumps on the top of the brick. Once one brick was done I used the gradient tool to make the brick have a sense of depth and the bumps seem curved.  Once the brick was done copied the brick over and adjusted the colours repeating this step until all the bricks were done.

AI-GIF

FINISHED ILLUSTRATOR DRAWING

Once I was happy with the illustrator file, I created a new Adobe Photoshop file. I then copied my background, and all the coloured bricks. I turned off the layer visibility of all the bricks except the first red brick and moved above the canvas. Once this was set up I created a new frame in the timeline and moved the first red brick into its final position then I added 10 tween frames in between the two frames. I repeated this steps for all the bricks until they were all stacked. Finally, I exported the file as a GIF.

AI-GIF

FINAL GIF ANIMATION