Tools and Technologies

This chapter in Graphic Design School wasn’t particularly revolutionary, but provided a great reminder of how cool the tools we as graphic designers have at our fingertips, and how much we can actually do with them.

The chapter opened with a conversation about photography, and when taking your own images might be preferable, versus sourcing your images versus hiring a photographer specific to a project. The largest influence in this decision is the purpose of the piece – for a very specialized shoot or one with a very tight deadline, it may be necessary to hire the job out, while an image that goes through lots of post-processing to distort the photographic quality might be able to be done in-house. Regardless of where the image comes from, it’s still incredibly important to consider the formal compositional principles (many of which are very similar to those in design), so that the image is suitable for the purpose and is visually interesting.

Next, the chapter briefly explored software available to us, and their distinct purposes. Though I’ve been using the Creative Suite for years, it was nice to get a succinct reminder of when each program should be used over another. InDesign is preferred for page and publication layout, and can be used to compile both vector-based and pixel-based assets, while also maintaining strict control over typography to create a cohesive layout. Illustrator, on the other hand, can also be used for page layout because it has some of the same typographic settings as InDesign, though for large publications it isn’t as well suited as InDesign. Illustrator, then, is best used for creating vector-based graphics and any instances of customized typography, like in a logo. Conversely, Photoshop is pixel based, so it’s really only suited for photo manipulation, not graphic creation.

Finally, this chapter explored two time-based programs: Flash and After Effects. Flash is used for animation of vector graphics, and its small file size makes it especially useful to create web animations and other interactive material. After Effects, on the other hand, is more of a post-processing program for raster graphics (film and photos), as it used more to compose and add effects to pre-existing media.


Because I am so familiar with the Creative Suite, I wanted to look more into time-based media development, and discovered an article* outlining alternative to using Flash for web-based animation: HTML5. In 2010, Steve Jobs wrote a letter in which he bashed Flash, and declared that HTML5 (an extension of the HTML language, which allows animations and videos to be coded directly into a website, instead of relying on outside plugins, like Flash.) would take over. Four years later, Steve Jobs might just be right. Even Adobe, the creator of Flash, is adding more HTML5 support into the Creative Cloud, and leaning away from Flash support.

HTML5’s growing success is largely due to the overwhelming prevalence of mobile devices – “according to IAB.net, nearly half of the U.S. population has a mobile phone with Internet access, and one in five page views on the Web happen on a mobile device.” Flash has very limited support on mobile devices; Apple has never implemented Flash support on iOS, and many Android devices lack support as well. HTML5 fills that gap, and allows much more content to be viewed on mobile because it’s simply a part of the coded language of a website. Though content can be easier to create in Flash, many companies are making the switch to HTML5 to meet the demand of the mobile market, which means that it’s important for us students to be keeping up with the up and coming industry standard as well.

 

Here are some examples of how HTML5 is currently being used. For best results, actually visit the websites, as screenshots don’t do the technology justice.

 

The Arcade Fire's video experience for "We Used to Wait" was created entirely in HTML5, which allows viewers to interact with the content in new ways, and involves incorporating data from Google Maps to customize the video to each viewer. Though not a conventional video experience, this is an excellent example of how complex HTML5 interactivity can be – without relying on any external plugins.  View the entire video at thewildernessdowntown.com.

The Arcade Fire’s video experience for “We Used to Wait” was created entirely in HTML5, which allows viewers to interact with the content in new ways, and involves incorporating data from Google Maps to customize the video to each viewer. Though not a conventional video experience, this is an excellent example of how complex HTML5 interactivity can be – without relying on any external plugins.
View the entire video at thewildernessdowntown.com.

Vlog.it is another example of the versatility of HTML5. Though not pictured in this screenshot, every time an image is clicked, a full-screen animated transition occurs. Had this been a Flash website, the entire page would have been a Flash player, rendering the site useless on mobile devices. Source: vlog.it

Vlog.it is another example of the versatility of HTML5. Each layer of this circle is animated separately to spin, and though not pictured in this screenshot, every time an image is clicked, a new full-screen animated transition occurs. Had this been a Flash website, the entire page would have been a Flash player, rendering the site useless on mobile devices, and making it significantly more difficult to update content quickly.
Source: vlog.it

This screenshot, from the interactive music video for "Preflight Nerves" by Brightly, incorporates full-screen video footage, based in HTML5, not Flash, and a live Twitter feed of tweets containing lyrics to the song, meaning that the content is constantly changing for each viewer – something that would have been impossible in Flash. View the video here: tweetflight.wearebrightly.com

This screenshot, from the interactive music video for “Preflight Nerves” by Brightly, incorporates full-screen video footage, based in HTML5, not Flash, and a live Twitter feed of tweets containing lyrics to the song, meaning that the content is constantly changing for each viewer – something that would have been impossible in Flash.
View the video here: tweetflight.wearebrightly.com

In a slightly more novel use of HTML5, this site allows users to drag mustaches on top of HTML5 embedded video, because they are simply treated as separate layers, rather than separate frames of content, like they would be in Flash. Check it out here: http://www.themustachegame.tv/

In a slightly more novel use of HTML5, this site allows users to drag mustaches on top of HTML5 embedded video, because they are simply treated as separate layers, rather than separate frames of content, like they would be in Flash.
Check it out here: http://www.themustachegame.tv/

*Source: http://www.adotas.com/2014/05/r-i-p-flash-why-html5-will-take-over-video-and-the-web-in-2014/

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: