Tag Archive | Web Design

Web Site : Octave Communications

Next on my list was the website. Even if they didn’t have all the content needed too fill the website pages, Octave wanted an online presence as soon as possible. Following the content structure they desired, I quickly designed a simple static website (ie non-responsive) that would also express their identity and branding. The website can be found at octavecom.ca

 Copyright  Dany Pépin 2013

The Making of «Encore une Fois»

As mentioned in a previous blog entry, I was chosen to design Paul Demers new music album «Encore une Fois». It was an interesting summer project I was looking forward to, but I didn’t expect the album to be redone from scratch. A monstrous task since I was working full time as a support web designer at La Cité collégiale at the same time. So after the meeting with Paul and his producer Jean-Michel Ouimet, we had an idea of the new direction: Paul’s return. I submitted the idea of having a logotype for Paul’s name which he could use later on for different applications including his album. With his blessing, I started to work on different word marks.

Logotype/wordmark sketches


Surface test with the word mark chosen by Paul

logowoodlogo rust

logo vintage

Paul really really REALLY liked the wordmark on the vintage wallpaper and he wanted THAT for the cover. I tried several alternate covers to keep the same look as my original cover, but since Paul and Jean-Michel were the artistic directors, I didn’t had any weight in the final decision. Even if you don’t agree all the time, the important thing is that you please the client.

Some of the alternate covers

Website that was never used.


 copyright 2011

I know what you did last summer (part 2)

One of the things I designed while working for the IT department, was their website portal. It was just awful (white page with blue hyperlinks) and needed a revamp. I created over a dozen maquettes and one of them was chosen by the employees after two rounds of votes. I was surprised to see that the IT employees had chosen a really dark background since the college identity is dominated by a light color palette, but hey… that’s democracy for ya! I have no clue as to when the page will be implemented within the college website. NOTE: All these designs were created with Adobe Illustrator.


Discarded (some of my designs left out of the vote)


First round (my designs included in the vote)


Variations of the chosen design


Final choice

 copyright 2011

School project S4 – Flash Website

For this project we had to create a flash website that would include different notions learned in class. The subject was to our choosing. I decided to design a movie website and I was hesitating between The Matrix, Aliens and Back to the Future. The choice was made randomly as the teacher picked The Matrix out of a hat. The result is the website below. There is a light version (fixed background) and a heavier version (animated background). My biggest problem in creating this website was the embedded fonts for dynamic text which didn’t work. I’ve spent a week trying to fix the problem and even the teacher is dumbstruck. Apparently having to many fonts on a Mac can cause problems of that nature. Oh well.

The information included in this school project was collected from these websites: Matrix 101, Matrix Mythology and the Matrix Wiki








 copyright 2011

School project S4 – playing with divs

For this project we picked a celebrity out of a hat, and we had to design his/her homepage with relative <div>. I picked Jessica Szohl who plays Vanessa on the TV show Gossip Girl, which I knew nothing about. I designed something fun and girly for the background which seemed to fit her background and added a more sophisticated typo for her name.

Jessica Szohl

 copyright 2011

School project S3 – D-Day website

For this final web project, we had to design a 12 page website made out of CSS and divs that would also include a flash animation. We had to pick our subject early on and since we were in the midst of Remembrance day in Canada, I decided to go with D-Day. Click on the image below to see the working website.

D-Day website

 copyright 2010

School project S3 – Flash animation : La liberté

For this flash project we had carte blanche. The only restriction was a minimum length of 30 seconds. It took me a while to find an idea for this animation, but after seeing “Storming Juno” a “Band of Brothers” type TV movie focusing on the D-Day Canadian landing on Juno beach, I was inspired to write this poem (translated from French).


It’s walking on the beach and forgeting your worries
It’s feeling the wind’s caress on your skin, carrying the smell of the sea
It’s hearing the sound of seagulls and waves crashing on the shore
It’s watching and listening to children laughing and playing.
Youth, innocence … ignorance
Free as birds they run without knowing the story … the story of this place.
A story of courage and sacrifice
The history of liberty
I hear the ghosts of the past
. . .
Children will learn this story
But us, do we take our freedom for granted?
Freedom has a price.
Thank you to all the soldiers who have walked these places
We will remember them.

I then decided to make that personal project my next flash animation. After the planning process, I recorded myself reading the poem and added music and sound effects, then, I took the elaborate task to animate the poem in flash. The picture quality I had of Juno beach was average at best, so I decided to give a painting effect to the whole production. Unfortunately, it didn’t came out as good as I wanted (sound and visual) but it did translate the poem adequately. Click on the image below to see the 2 min flash animation (in French).

la liberte flash animation

 copyright 2010

School project S3 – Flash ad

For our first flash project we had to pick a subject submited by classmates out of a hat and create a 728 x 90 px flash ad without sound. I was fortunate enough to pick the Avatar movie release on Blu-Ray. Click on the image below to see the animation.

avatar flash ad

 copyright 2010

School project S3 – Zombie Survival Guide website

This is our first big website project. With the teacher’s approval, we could design a website about pretty much everything we liked but it needed to have at least 6 pages, a lots of information and made out of tables (believe it or not). This will be the only website designed with tables in all 4 website courses of our design program. So, I decided to design a website based on Max Brooks book, “The Zombie Survival Guide : Complete Protection from the Living Dead“. If you are a fan of zombies you’ll love this scientific and practical approach to zombie survival. This is one of my best project of the semester if not THE best. I had a lot of fun reading the book and designing the website. Hope you enjoy it also. 🙂

Zombie Survival Guide

All written information contained in this website is the property of Max Brooks. This is a non-profit school project and no infringing claims are intended.

 copyright 2010

School project S3 – SuckerPunch movie homepage

For this exercise, we had to create a homepage of our choosing and incorporate some informations. The trailer for the upcoming movie “Suckerpunch” directed by Zack Snyder had just came out and I was impressed by the special effects and the unusual storyline. I decided too dig out some information about the movie and designed this simple homepage.


 copyright 2010

%d bloggers like this: