School project S6 – The graduates website

In this project, each student created a portfolio website that featured all graduating graphic design student for 2012. While a lot of students build their website around the same theme as the graduates exhibition, I decided to go in a completely different direction… a periodic table of graduating students. I must admit that my idea would have been more fitting for chemistry graduates, but since each student has its strenghts and weaknesses, certain elements mixed together could create a reactive design. This is the basic chemistry of teamwork. My website wasn’t chosen as the official website, but was a finalist. The official 2012 Graphic Design graduates website will be accessible here at the end of the semester.

The live version of my website can be accessed here. The animated introduction was made in Adobe After Effects. Note that only my student page is available on this website.

 copyright Dany Pepin 2012

School project S5 – corporate website

For this project we had to design and code a corporate website for a small to medium enterprise (real or not). We had 20 pages of content to create and each of them needed to be adaptable for smartphones and tablets via media queries CSS stylesheets. The teacher also wanted three flash banners inserted in the website.

I contacted my cousin to know if I could redesign the website of her casting agency for kids and teenagers and she gladly agreed. Now the work began. We had three weeks to create three maquettes, a prototype and the final 20 pages cross-platform website. In my case, I also needed to create a logo because the agency didn’t have one. Surprising since the agency is successful.

Here are the two logos I designed for this project.

Even if this project was focusing on corporate websites, I had to design one that would reflect the casting company I was working for. In this case, a business that is targeting kids, teenagers and parents and shows how fun acting for TV and movies can be at a young age. It needed a younger look. Below are the three maquettes.

The client gave me her preferences and I adapted the second maquette. Most of the hard work was from this point on. The prototype was fairly easy to do but doing different stylesheet for the smartphones and tablets was a bit harder. Hiding flash banners, showing new divs, moving divs and content around without screwing up of the other platform was frustrating at time. Below are the three version of the website. I still have some problem with IE8 and earlier versions which don’t support media queries. I’ll try and fix this problem and other fine details at the end of the semester.

 copyright 2011

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

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.

 copyright 2011

School project S3 – Cité Femmes : applications

For the remainder of this project, we must develop various applications including stationary and business card using visual elements that emerge from the new identity created for “Cité Femmes”.

As for the logo, pastel color overlays and curved elements were reused for all applications. To strengthen the visual image, we added a female model wearing the colors of “Cité Femme” to give a human personality to the committee. Moreover, adding the slogan “Women’s safety on campus … we’re watching out for! “adds a sense of security and solidarity for women on campus.

 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. 🙂

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

New Homepage

Finally my old webpage, which hadn’t been updated since 2006, has been replaced. I needed to design a simple portal to link my domain name (danypepin.com) to this portfolio blog. My previous website had a good look but was badly designed, making updates quite a difficult task. For those who know me, the new concept is simple. Since the early 90’s, I’m known in different online circles under the nickname “Lunatic” (see also the title of this blog). This gave me the idea to create some sort of old psychiatric ward look with a patient profile sheet that would be visible near my cell door. I’m not really crazy, I just have crazy ideas. This website is temporary and will be replaced with a real portfolio website when I’m done with college. I’m just having fun here.

 copyright 2010