Design for Digital Media Environments – Codecademy Practice

In preparation for the next unit, I have decided to go over what we’ve already learned about PHP, a scripting language for designing websites. I decided to use Codecademy to revise what we had done, as well as practise using the code a bit more. Codecademy has been very useful for revising and catching up with what we’ve done in the recent workshops, as it’s free to use and easy to follow. It also has a wide range of courses for different coding languages (e.g. HTML, JavaScript and jQuery). Our upcoming unit, “Design for Digital Media Environments”, will focus almost exclusively on coding, creating and programming websites and databases.

As shown in the screenshots below, I have also been experimenting with the different functions and variables that can be used with PHP (e.g. “echo” and “string”).

Screen Shot 2015-01-27 at 15.08.42

An example of one of the courses available at Codecademy.

Screen Shot 2015-01-27 at 15.09.02

At any time, you can preview the results of the code you’ve written.

Screen Shot 2015-01-27 at 19.26.39  Screen Shot 2015-01-27 at 19.24.43Screen Shot 2015-01-27 at 19.25.44  Screen Shot 2015-01-27 at 19.26.16Screen Shot 2015-01-27 at 15.21.50 Screen Shot 2015-01-27 at 15.21.21 Screen Shot 2015-01-27 at 15.20.46 Screen Shot 2015-01-27 at 15.19.42 Screen Shot 2015-01-27 at 15.12.54 Screen Shot 2015-01-27 at 15.12.27 Screen Shot 2015-01-27 at 15.12.13 Screen Shot 2015-01-27 at 15.12.08

Development and Realisation – Final Poster

The last development changes to my poster have finally been completed and I have reached the final design and layout for my infographic poster. I decided that changing the orientation of the poster to landscape had given me more of a chance to display more information and data, as well as make better use of the space available.

Because the poster had more space now, I added a few more countries to make my selection of data more informative and varied for the audience. These important examples included the UK, Germany and Brazil, represented respectively by Big Ben, Brandenburg Gate and Christ the Redeemer.

I applied the same image editing process for these landmarks as I did for the other main landmarks. This gave all of the landmarks a consistent, simple black and white style. I made sure to keep as many of the recognisable elements of these landmarks as I could when editing and re-sizing these images.

Screen Shot 2015-01-10 at 14.39.07 Screen Shot 2015-01-10 at 16.19.50 Screen Shot 2015-01-10 at 17.46.46 Screen Shot 2015-01-10 at 19.22.25 Screen Shot 2015-01-10 at 19.22.32

Overall, I’m very pleased with how the final result looks, and the only changes I would consider making to it are small design choices (e.g. possibly lightening the shade of blue in the colour of Germany). I feel that the simple style of my poster and the lack of text taking up space worked well together to create an end result which is visually informative. I’m glad this unit had given me the opportunity of learning the ropes of Adobe Illustrator (software used in the industry) as well as creating something interesting with it.

The finished poster document can be seen here:

Final Who Lives the Longest Poster

Additional image sources:

United Kingdom (Big Ben):

Germany (Brandenburg Gate):

Brazil (Christ the Redeemer):

Development and Realisation – Poster Development 3

This week, I have been developing my poster and have come very close to finalising the finished design of my poster. Since the last post, I have made several different design changes to the overall layout and presentation of my final poster. As I decided on what kind of shapes and images to use and display in my poster.

I felt that some of the most recognisable and appropriate shapes to use in this case would be famous landmarks from different countries (e.g. Leaning Tower of Pisa, Eiffel Tower, etc.) in order to represent and help the audience identify and understand the information I’m displaying. This gave me the opportunity to use the image trace tool in Adobe Illustrator, which can be used to recreate pre-existing images, but with different effects (e.g. black and white, 3 colours). I used this tool to create silhouettes so that I could have simple images, but also maintain the visual elements of each of the landmarks presented in the poster.

The following images show my experimenting with the tools available in Adobe Illustrator, as well as the overall development of my poster.

Screen Shot 2015-01-07 at 12.01.09Screen Shot 2015-01-04 at 19.28.11 Screen Shot 2015-01-04 at 19.32.29 Screen Shot 2015-01-04 at 19.36.39 Screen Shot 2015-01-04 at 19.42.10 Screen Shot 2015-01-04 at 20.24.55 Screen Shot 2015-01-04 at 20.27.42 Screen Shot 2015-01-04 at 20.34.52 Screen Shot 2015-01-04 at 20.35.13 Screen Shot 2015-01-04 at 21.28.40 Screen Shot 2015-01-04 at 21.51.49 Screen Shot 2015-01-04 at 21.52.17 Screen Shot 2015-01-04 at 21.52.23 Screen Shot 2015-01-04 at 21.53.27 Screen Shot 2015-01-04 at 21.57.25 Screen Shot 2015-01-04 at 22.04.21 Screen Shot 2015-01-04 at 22.16.18 Screen Shot 2015-01-04 at 22.25.22 Screen Shot 2015-01-04 at 22.33.03 Screen Shot 2015-01-04 at 22.33.39

Screen Shot 2015-01-07 at 13.19.38As seen here, the famous landmarks were originally going to be placed on top of the bars in my bar chart. I later decided that they fit better on the lower side, as I felt they looked more aesthetically appealing, and it gave me more opportunity to try out different effects for them, without complicating the design.

The landmark I found most fun and appealing to apply effects to was the Taj Mahal, as it has many decorative details on it that translated well into my version of it.

Screen Shot 2015-01-09 at 14.40.57 Screen Shot 2015-01-09 at 14.41.00 Screen Shot 2015-01-09 at 14.56.04 Screen Shot 2015-01-09 at 15.13.23 Screen Shot 2015-01-09 at 15.44.44 Screen Shot 2015-01-09 at 16.04.15 Screen Shot 2015-01-09 at 16.47.46

As seen above, on the left, I had an earlier design for my poster, which consisted of a simple looking skull with one half of the world in each of its eyes. While I felt it was an interesting concept, I felt that the general tone of this version of the poster was a bit too grim and the message was slightly morbid, no matter how cartoony I made the skull itself look. I also felt that this design didn’t give me as much freedom when it came to using space creatively and trying out the different effects in Illustrator.

I had a skull in my original poster, as it is an established symbol for mortality, and I wanted shapes in my poster to affect the audience more than words and figures. However, I wanted a more positive approach to presenting the subject of “Who lives the longest?”

Screen Shot 2015-01-09 at 16.59.32 Screen Shot 2015-01-09 at 16.59.49 Screen Shot 2015-01-09 at 17.00.03 Screen Shot 2015-01-09 at 17.23.04 Screen Shot 2015-01-09 at 17.23.15 Screen Shot 2015-01-09 at 17.38.32 Screen Shot 2015-01-09 at 17.52.16I have nearly finished my poster, but I can still use some of my remaining time before the 12th to continue finalising and improving my poster. For example, I could include more countries in the bar chart, as a choice of ten might not be a broad enough selection of countries. I could also try presenting this information in lanscape orientation, as it may give me more space to show my information and graphics.

Image sources (in order from high life expectancy to low):

Japan (Torii Gate):

Italy (Leaning Tower):

France (Eiffel Tower):

United States (Statue of Liberty):

China (Great Wall):

Egypt (Sphinx and pyramid):

Russia (Kremlin):

India (Taj Mahal):

Pakistan (Badshahi Mosque):

South Africa (Table Mountain):

Development and Realisation – Poster Development 2

After my research, I was in the process of sketching, designing and producing the icons I would be using in my final poster. I found that one of the most important uses of icons would be for showing the age of the people in the world who lived the longest. Pictured below is the development process of creating three icons, each one for a stage of life (e.g. baby, adult, elder).

As you can see, my icons were heavily inspired and based on pre-existing images, in particular the WC icon of the adult man. This was because I wanted to keep the simple style and give a lot of information to the audience through only the shapes, and avoid any unnecessary text on my poster. My initial idea is that the different stages of life could be colour coded (e.g. bright blue for young, darker shade for older), and these colours could help identify who lives the longest in the world.

Screen Shot 2015-01-05 at 00.57.50 Screen Shot 2015-01-05 at 00.58.13 Screen Shot 2015-01-05 at 01.05.58 Screen Shot 2015-01-05 at 01.14.44 Screen Shot 2015-01-05 at 01.16.09 Screen Shot 2015-01-05 at 01.17.08 Screen Shot 2015-01-05 at 01.17.09 Screen Shot 2015-01-05 at 01.17.10 Screen Shot 2015-01-05 at 01.17.17 Screen Shot 2015-01-05 at 01.19.15 Screen Shot 2015-01-05 at 01.19.46 Screen Shot 2015-01-05 at 01.22.47 Screen Shot 2015-01-05 at 01.30.36 Screen Shot 2015-01-05 at 01.30.45 Screen Shot 2015-01-05 at 01.32.29 Screen Shot 2015-01-05 at 01.33.40 Screen Shot 2015-01-05 at 01.33.53 Screen Shot 2015-01-05 at 01.34.36 Screen Shot 2015-01-05 at 01.36.18 Screen Shot 2015-01-05 at 01.36.24

While these small graphics will only make up a small segment of my final result, I have developed a much clearer idea on how to present my information and use the space on my poster to my advantage.