Month: May 2017

Legacy

Legacy

 

Final project on Behance: https://www.behance.net/gallery/52505853/Legacy-Magazine-Interview-Andr-Parra

 

FORMULATION

The process for developing an idea for this project was begun with the process of IBM’s Design Thinking. A post on this process can be found here. The steps of Find the Gap and Big Idea were also carried out and you can find the resulting documents here.

The final project however came from an idea not found in the steps above, though those steps were applied to it. It originated from a personal project idea that morphed into a project for this module. The details of the brief for this project are below.

 

Design Brief
This project has 3 primary goals.
  • To highlight the work of students as they prepare to enter industry.
  • To highlight the work that Coláiste Dhúlaigh does to help prepare students for industry.
  • To encourage increased focus on the college through links to industry professionals and alumni.
It is proposed to create a publication for both internal and external distribution that showcases the work of students and the college and increase the amount of industry attention, thereby giving students both a link to the college and a route to industry.
This publication should use as many media channels as possible to reach the maximum audience possible. It will do this by being available in multiple formats, Print, Digital, Video and Web.
It is intended that a sampling of all courses from all campus’ that are preparing to enter industry should be taken. However, as this is at present just a proof of concept, it is unlikely that all courses will be sampled. A sample however should be taken from all 3 campus’.
Interviews will where possible be conducted with a sampling of students, lecturers, alumni and industry experts to provide a large cross section of information for readers.
______________________________________________________________________________
Client / Brand: Coláiste Dhúlaigh
______________________________________________________________________________
Project Name: Legacy
______________________________________________________________________________
Project Owner: Creative Lead: Hugh Shelley – Grá Design
______________________________________________________________________________
Due Dates: crits, deadlines): 1st crit: end of Jan 2017. Print deadline:April 25th 2017, Due date May 5th 2017.
______________________________________________________________________________
BACKGROUND Through the use of the Design Thinking method as presented by IBM Labs in October it was reasoned that the main client should be the office of the college principal. With the main purpose of aiding the attraction of new students and an increase in industry attention. This project is also intended to build a lasting link between the college and its alumni.
Mission Statement. What will your Legacy be.?
This is a call to action for all people in the college to look further than their own experience and create something lasting for those coming after.
________________________________________________________________
  1. OVERVIEW This is a multi-media publication designed to showcase the talent of students, the hard work of the college, present industry experience and provide a link to college alumni. It is hoped that this project will be passed on to the following years graphic design students to build upon and create a tradition of reaching out and connecting in this world of collaboration. There is no publication like this as yet and it is a project that just should be done.
_______________________________________________________________
  1. AUDIENCE The intended audience for this publication is the student body, who can use it as a way to highlight their work to industry, and industry itself, to increase links with the college and provide a window onto the talent being produced by the college.
________________________________________________________________
  1. COMPETITORS There are no direct competitors for this project internally. External competitors could be other colleges with well developed social media presence. Other colleges also have magazines being produced by their student union or student body.
________________________________________________________________
  1. TONE/FEELING The tone of this publication should be one of connection and collaboration. Most of the interviews will be carried out in person and will have a general Q&A feel. The general look of the publication should be light, with good use of white space, colourful imagery and a light hearted tone.
________________________________________________________________
  1. MESSAGE Look what being Dhúlaigh means. This is who we are, and what we have to offer you. Let’s collaborate.
________________________________________________________________
  1. VISUALS There should be a good mix of imagery from photographic and illustration, to drawings both hand and technical. As much as possible, the use of stock imagery should be avoided. This is an opportunity for people to showcase their creative works.
________________________________________________________________
  1. PEOPLE Hugh Shelley – Grá Design, Concept & creative lead. Callum Harrison, Concept.
________________________________________________________________
  1. Presentation:  The final product will be presented in printed format with an online and digital version available. It will also be showcased in the end of year exhibition in the Gallery of Photography.
__________________________________________________

This project came through a desire to work on a magazine. I was eager to combine my love of photography and design on something where I could use and learn multiple skills. Having expressed this interest with a classmate we began to form the idea of a magazine for the college.

I drew up a proposal to present to the college detailing the idea. This was presented to the department heads in October / November 2016. The proposal is here.

Legacy Proposal to Department Heads

The meeting I had with the department heads went really well with the idea being given overwhelming support, however a concern was raised that it seemed a lot of work to be done.

The project was also presented at a meeting of the Art & Design dept. and again the idea was very well received.

These were the steps laid out in the proposal that were needed to progress the project.

  • Gain approval from the college.
  • Agree with department heads a method of reaching out to students. Either through mailshot to all students or recommending a select number of students with high quality work.
  • Request content from final year students across the college either through submission or through direct interview.
  • Collate submissions & begin design.
  • Design layout, format & identity will solidify as the project progresses.

I sent out a mail to all department heads looking for proposed names for interview. Unfortunately the response was somewhat limited.

It was suggested that we meet with Dave Curran on the Media dept and some of his journalism students. This was a good meeting with a few of the guys willing to offer their help. Dave also suggested we look at video interviews as a way of generating content for online use. This idea was adopted and a number of video interviews were subsequently conducted.

From this point I found it difficult getting people to either propose students for interview, or have students agree to one and it got very close to the Christmas break so it was left until after the Christmas to begin interviews.

IBM Design Thinking.

The importance of design thinking on this project was huge. It forced me to look at many paths and final outcomes, be they print or digital, and allowed me a greater understanding of the people involved, my client, the students, the reader and industry etc. The post on design thinking can be found here.

IMPLEMENTATION

A list of questions was drawn up and presented to students, this gave them a bit of time to order their thoughts as well as giving me a similar template of questions from which to work. So from 1st to last interview across all campus’ the format of the interviews remained pretty similar. This list of questions is here. InterviewQuestions

As I had little previous experience conducting interviews I wanted to get 1 carried out as a test, then work out the bugs from that one and apply lessons learned to the following interviews. That first interview was with classmate André Parra and can be found HERE

I then proceeded to arrange interviews with people across the college. These were recorded either by video or audio only. The transcripts of those interviews can be found here. Legacy Transcripts

 

Early Gant chart & Content management spreadsheets.

Legacy Content Management – Sheet1 GD03_Proj_imp_.gantt_chart – Hugh Shelley.xlsx – Blank Sheet

RESEARCH

I had a look at a number of other colleges that provide magazines to promote the college & the work that they do. Probably the best of them was the one from the national college of art & design. Two of the editions are here and here. These however are simply a list of upcoming events, alumni achievements and other notices. While they do a good job of keeping the college in the public eye they don’t really go too far in promoting the work.

When considering the layout of the publication I had been collecting interesting examples of layouts from a broad range of sources. A magazine promoting business from north eastern UK, a mag for Offset, Time magazine and anything else that really caught my eye. From these I was able to look at how pages were laid out, what kind of white space, imagery and how blocks of colour were all used to create a consistent look and feel.

Some of the examples are below.

Table of Contents

 

I did a thorough analysis of one of the publications that I really liked the look of, to get an idea of the kind of spacing used, the fonts, margins etc. I was getting a little annoyed that I had to measure the font size in millimeters and convert in to points, so I went looking and found a template online for a point ruler. I printed this out and stuck it to the back of my ruler. This ruler and the page I analysed are below.

Page analysis and point ruler.

 

Page Layout

To achieve a consistent look throughout the publication I introduced a number of recurring elements. I chose the font family Futura PT which has a range of Light, Book (or regular) Heavy & Extra Bold. This is a very readable sans serif font that has a nice character.

I placed a category holder at the top of each page and a contact box at the end of each article. I used my brand colours in a number of areas through the project such as here. The category holder is cyan and the contact box orange.

I also placed pull quotes in each article and created a paragraph style to make this orange also, as well as giving a border line on top & bottom to help it stand out.

 

I began to put down a few ideas of how I thought the page sequence should look, purely to have something physical in front of me. It was getting hard to visualise how it was going to look, so simply by putting the page title on some card and maybe some place holding info I was able to see it come to shape a lot easier.

Early pagination.

 

 

 

 

 

 

 

 

Here are some other bits of useful information I found on page layouts and paragraph styling etc.

How to make the page numbering to start on a page other than the first one, allowing you to insert a cover. https://philippaberrysmith.wordpress.com/2011/09/09/how-to-get-page-numbering-to-start-where-you-want-it-in-indesign-cs5/

Measuring point size. http://www.peatah.org/measuring.html

http://www.magazinedesigning.com/magazine-page-elements/

Text box spacing. http://graphicdesign.stackexchange.com/questions/31819/padding-between-border-and-text-in-textframe-indesign

Flare tool for back cover illustration. https://design.tutsplus.com/tutorials/quick-tip-how-to-use-the-flare-tool-in-adobe-illustrator–vector-4136

Handy info on paper weights for popular products. http://printbrain.webmartuk.com/print-formats/papers-for-printing-most-popular-paper-weights-for-6-printed-products/

Here I had a look at what goes in to a successful cover design and other cover ideas.

Anatomy of a magazine cover.

Time

  • Title.
  • Top – Issue, Date.
  • Bottom – Website
  • Main headline.
  • List of articles.

The New Yorker

Top – L. Date, R. Price

Title

Image

Computer Arts

Illustration

Title

Subtitles

Sub Headding

Promo box

Info box

This slideshow requires JavaScript.

When designing my cover I wanted to keep it close to my own style which is quite minimalist, and also, as I discovered through exposure to design and art history, very much like the Swiss International style. I started to put down some ideas, very basic sketches (below) and from this the idea developed. The concept is of the title braced to meet the future but aware that it casts a shadow. The unspoken thought is a question to following years asking “What shadow, or Legacy, will you leave”. Some images from students and myself are used within the title, it would be a nice thought if future cover are followed a similar idea of playing with the title in some form to create the cover image.

 

EVALUATION

Once I began to populate the pages with interviews and other content I started to look at how it looked on the page, looking at things like colour and font size. The images below show the first article, I started off with a font size of about 14pt, then brought it down to `11 or 12pt because that was just far too large & looked like a childrens book. The next size was still a little large so the final size I settled on was 9pt for the body text. here are the 2 pages where I found some early issues.

12pt font, still too large. Also needs space change and highlight for info box.

 

Making changes to things like the font size was made really easy as we had discussed setting up and using paragraph styles in class. I’d found some more info on Paragraph styles here. This allowed me to set up a number of styles for things like the body text, headings and pull quotes and whenever I had a block of text I could just apply a style to it, or, I could change the preset, and where ever it had been applied through the document the changes would be applied instantly too. It only meant I had to re-position elements but that was easy enough.

It also meant I was able to just pull a quote out of the body text, apply the pull quote style to it and it would change the colour of the text, the size and put 2 lines above & below. This made it really easy to work with text throughout the document design process.

Having uploaded the publication to ISSUE, I have been able to link it to this blog, embed it on my Behance page and even embed it on a page on the website.

ISSUU is a great site and it allows you to track the performance of views etc. After only a few days these are the stats for Legacy.

Legacy stats on Issuu.

 

PRESENTATION

The final product of this project is an interactive PDF as it has the highest impact with lowest cost as found on my feasibility chart. However, it would be designed as a print ready A4 magazine so if a budget was to be found for a print run then it would be ready to go. The document will also be hosted online with ISSUU which enables people to either read it on a mobile device or download it at to read at a later stage. ISSUU is something new to me but it’s very easy to see the huge benifits of it.

The link to ISSUU is Here.

The video interviews are being hosted on Vimeo and will also hopefully be posted on youtube. The Vimeo link is Here.

The final project will also be presented on Behance Here.

PRINTING

I have found a printer that can produce a magazine at a very reasonable cost. The quote I have is for A4 36 pages inc. 4 covers. Pages at 115gsm, cover at 200gsm gloss. 5 copies @ €23, 100 copies  €271.

WEB

I have used a template to create a website as a central online presence. This is on a free hosting platform but there is no reason why it can’t be moved to either a paid platform or as a sub-domain of the college website.

Unfortunately, as of May 10th the web host is having difficulties so it currently remains unfinished and unavailable. I hope to update it as soon as it comes back online.

BEHANCE

I have uploaded this project to my Behance site here. It contains the uploaded publication and video interviews.

I did begin by uploading the video’s directly to Behance, however I found that I could actually just embed the video from my Vimeo feed which made the process very quick.

VIMEO

All the interviews that were conducted were either audio, recorded on my phone, or by video, and were transcribed by myself to be used in the publication.

This was a pretty laborious task, especially when it came to the talk give by Fumbally exchange. For that one I ended up just using extracts as it was an hour long talk.

Of the video interviews, I edited 2 for use online as a proof of concept. I edited the interviews down to concentrate the information. These are below.

 

https://vimeo.com/216498682 André

Emer.

 https://vimeo.com/216586719  Grá

I also created a quick intro for my logo and also used a pre-made logo intro for CDCFE. The Grá intro can be found here.


<p><a href=”https://vimeo.com/216586719″>Gr&aacute; Intro 1</a> from <a href=”https://vimeo.com/user47337614″>Hugh Shelley</a> on <a href=”https://vimeo.com”>Vimeo</a&gt;.</p>

 

The back cover was something I found hard to decide what to do with. Normally I guess you would have sponsorship or adverts, or information about other issues. I decided to keep it fairly simple for this issue and designed a graphic that was part call to action and a part representation of what the publication represented.

The image is of someone looking into the sun, or perhaps the future, kinda feeling like anything can be possible. The text over the shoulder is the website and then the GPS co-ordinates of all 3 Colláiste Dhúlaigh campus locations. A little cryptic, but I can’t do everything for you. 🙂

Legacy Back Cover

Other useful links:

https://www.digitalprintingireland.ie/products/saddle-stitched-booklets/18/quote/?config_id=1046486#step4

Converting to CMYK when outputting PDF File.

https://indesignsecrets.com/import-rgb-images-indesign-convert-cmyk-export.php

Video Encoding https://helpx.adobe.com/after-effects/how-to/add-video-special-effects.html

 

As stated in the mission statement, Legacy was created for a number of reasons but above all it was intended that it should be passed on to the following final year’s graphic design students for experience as well as continuity. All the files I have collected during this project will be handed over at the end of the year so that it might be taken up by next years editorial team.

 

Social media share link. http://issuu.com/gradesign/docs/legacy_2017

 

Advertisements

IBM Design Thinking

In October 2016 we had the opportunity to participate in a workshop with designers from the IBM Studios in Dublin who came to the college. It was a great experience  to see this process first hand and I was able to utilise it in a number of things I have done since including my Product design & implementation module. I will base this post on the application of design thinking to that module.

Design thinking is a method of breaking down a problem into bite size chunks of information, discovering who your audience is and spotting gaps and opportunities.

We began with an analysis of our target person, discovering who they were, what they thought, what they needed, said & thought. I felt that the person I was designing for was the head of the colege. The first image below shows the qualities of the principle as I saw them.

 

Head of College

The second image shows what I believe they say, do, think and feel. This gives us a further insight into what can be done to aid them.

 

The 3rd image here shows whats called an as-is chart, it helps us see a clearer picture and spot opportunities.

As Is Chart #1

 

The next stage was to come up with the really out there ideas, it’s pretty tough tryint to brainstorm with just one person but a few of the ideas were a little out there, the others were more relevant.

 

The last chart here is the feasibility chart. This allows me to place the ideas from the last stage onto a graph. The axis go from easy & cheap to expensive & hard, and from low priority for the client to high priority.

Obviously the ideal outcome is to come up with a winning idea that is both cost free and of high value / priority to the client. When the ideas are placed on this graph you can get an idea of where to begin your process of design.

The outcome for my project was that the digital email of the interactive PDF was the least expensive and most effective idea to produce, followed by: YouTube, Print magazine and Website.

 

 

 

 

 

 

3D Animation intro for Journey

Journey Intro.

The Journey intro clip is an introduction trailer for the Ideas in Context module, or Journey, a travel book based on the history of Dublin.

This comp was assembled using imagery from that project along with some new elements and a soundtrack. Using all the techniques learned in the composition of all the previous clips I was able to render them as 3D, add a camera and give it a track through the scene, and also introduced kinetic type that was synced with the soundtrack.

 

Critical review.

The idea for this project came through an idea I had for another animation which had an aerial view of the ground getting closer then swooping out over a precipice. When told we had to make our animation based on the journey project I incorporated the original idea and used it to create a flyover of the city of Dublin with key landmarks popping up on the way.

I created rough storyboards based on the idea generated and tried to keep to these but I couldn’t keep to it exactly, elements changed as I began the process of actually putting it together on screen.

I am quite please with the opening clip where the camera falls through the clouds. I researched how to make a Photoshop brush that would simulate clouds and was able to do this successfully. I then placed then into the comp and reduced the opacity as the point of view passed through.

The overall end result is not too bad at all, however I’m not entirely happy with the images used for the landscape or the buildings. The landscape is very pixelated and the images of the buildings don’t really suit this project I feel. They are taken from the original Journey project and just don’t seem to fit.

I am pretty happy though with the camera movements and the kinetic type. Also, I was able to find an effect that added flames to the GPO element which I think looks really good.

Given more time and experience I think a project like this needs to have the elements created from scratch rather than using a compilation of elements from other projects.

The type used in the animation is too simple for exhibition standard I feel, it should have had perhaps some texture applied to it. I am happy however with the timing of it with the soundtrack.

The soundtrack was taken from 3 sections of 2 different audio clips. These were edited, duplicated and pieced together on the timeline so that they matched the video.

This was a really interesting project with a steep learning curve in some areas, but a lot of the techniques used have been covered in the previous animated clips so it wasn’t too bad. I did find it a very time consuming and detail focused task and while I don’t normally mind that it was difficult to manage within the timescale.

 

Images of the early storyboards.

This slideshow requires JavaScript.

Image of an early concept where perspective is used to have a stream of landmarks and info fly past on 2 sides.

Early idea.

An example of one of the animations I researched showing simple camera movements.

 

Disco Bob.

Disco Bob is a simple task showing the use of the puppet pin tool to reshape & animate the character. Pins were placed in numerous places on Bob and as the timeline moved forward the pins were moved. Being linked to the character this meant that Bob would move along with them.

The logo at the end of this clip was just used as a test for another modules movie clip.

 

Georgian Street.

This is where were introduced to 3D animation. This composition is comprised of the ground, house, sky, tree, bird, street lights and car.

After preparing all the elements by removing them from their original image and creating an alpha channel, where the have a transparent background or partially see through, they were placed in the scene. All elements then had their 3D toggle selected which allowed me to place them in a 3D scene where the point of view could be changed on any axis.

I then introduced a light source for the sun, and a camera which could be moved to change the point of view.

In the settings panel I adjusted each element to be able to either cast a shadow or have shadow cast upon it. For example, the street lamp could cast a shadow on the building if the sun was shining on it, but the sky could neither cast a shadow or have a shadow cast onto it.

The building was given the appearance of 3D by attaching a side wall and light was introduced to both the street lights and under the hover car.

To change perspective a camera was introduced. This was then moved through the scene in much the same way as any element is animated, this includes using Bezier handles to smooth out the motion.

All the elements were placed on different planes so as to give the impression of depth. The parallax effect between the elements as the camera moves give a very realistic look to the scene.

The light’s in the street light and car were introduced by using a new solid yellow or blue solid and adjusting its properties for blur, diffusion and transparency. The blue light was parented with the car so as to link the movements together. What ever movement the car made is also made by the light underneath.

The bird was thrown in for good measure.

 

Bouncing Ball.

Similar to the weighted ball, this exercise was to show how movement could be given to an element to give it the impression of gravity and elasticity.

Again using the Bezier handles combined with changing the shape of the element gave it the appearance of gravity and the ability to bounce naturally.

 

Weighted Ball.

This was a very simple exercise in principle, however it took quite a bit of adjusting to give the ball the appearance of weight. Once the movement of the ball was introduced the Bezier handles were again used to adjust the speed at which the the direction of the ball changed. This gave the appearance of a heaver ball that bounces less & less each time, giving the impression of weight.

 

Bird Loop.

This comp brought together a few more tools covered over the past few weeks, namely using the pen tool to create a mask which will allow you to either cut an unwanted piece of footage out, or to give text the appearance of swiping in from the side.

Rotoscoping was also covered here to cut the bird from a clip and to animate it. A scene was created with different layers, offset to give the appearance of depth. The animated bird which had been removed by rotoscope was introduced, duplicated and moved around the scene. Other elements of the scene were animated such as the moon and the water.

 

Pink Tulip.

This is a lovely little clip, simply showing the use of a mask to isolate an area, and the use of filters and other controls to change things like colour saturation over time. Though you could use any kind of suitable effect, colour was used in both the foreground layer and the background layer separately.

The pen tool was used to create the mask for this clip.

Bring on the night.

This video shows the use of masks to hide areas of the clip, and to slowly reveal the title.

The shape tool was used to create the mask for the scene simply by drawing an oval. However, the pen tool could also have been used to create an irregular shape mask as in the case of the title.

The slow revealing of the title was accomplished by changing the shape of the mask in the timeline.

 

First animation. BeeMovie.

This is the first composition worked on for this module and it involved learning how to get elements to move around the screen, rotation, scale, text and sound.

Probably the most useful skill learned in this comp was how to use the Bezier handles to smooth out the motions of the elements as they moved around the comp. A very useful first exercise.

 

All animations can be found on my Vimeo page.

 

 

Making an environment map. https://helpx.adobe.com/after-effects/atv/cs6-tutorials/3d-environment-map.html

 

Audio File https://www.youtube.com/watch?v=dMI4X8OOMOg

 

Flame effects. https://www.rocketstock.com/free-after-effects-templates/fire-in-after-effects/