A Little Nature Scene .GIF

I made this little nature scene .gif for someone who likes deer. She drew the flowers at the bottom which I scanned and colored in Photoshop, and did the same with her signature which I animated in After Effects using the write-on tool. The deer was taken from a Youtube video, rotoscoped, stylized, and made into a walk cycle animation. Background is an edited Creative Commons image.

Communication Design Portfolio

Work done through the semester of COM322 by Ethan Howard

Resume

Poster

Postcard

Brochure

Company Logo

Biz Card

Self Promo Site

I recently made a self promo website for this Web and Social Media Production Class.

A portfolio page contains eight productions I have produced. Of these, I selected ones that show the diversity of my skill set (live-action short film, 3d motion graphic, 2d motion graphic short, radio drama, radio news sample, voice acting, abstract/absurd edit, a motion graphic music visualizer, and an example of rotoscoping). This is important as it shows an employer that I am interested and trained in various disciplines from audio production, news, film, and animation. 

The contact page has linked icons to my "professional" social media accounts (twitter and blogger) as well as hyperlinked email and cell number. These elements make the website more user friendly. If an  employer tried to click on an icon to view my twitter and it didn't work smoothly, he might just disregard the entire prospect of hiring me right then and there. It's important that the website is fully integrated as much as possible to the contacts and web content contained in the site for ease of user access. We all get mad when we are forced to use poorly designed websites, so imagine if someone you were looking to hire annoyed you by not properly linking their social media icons? You'd probably not be giving them a call (you can't, since you're on a smart phone viewing the site and the number does not instantly open in your dialing screen, and copy pasting is still too tedious on a mobile device).

The process of making the site was simple thanks to the very convenient sample site folder supplied to me. By looking at an already completed website and playing around with it, I was able to quickly develop an intuition to how the Dreamweaver application worked and also a rudimentary understanding of the code. The process of embedding Vimeo content was easy, as a simple HTML embed code provided by Vimeo is entered in a line of code in the page.
I learned the importance of file organization by seeing the errors caused by unlinked images and elements in Dreamweaver. By frequently checking the live view of the site in my browser, I was able to quickly identify broken elements that appeared normal in the code but did link to the specific image I wanted. After a few hours of working in Dreamweaver I began to start using the code to navigate through elements instead of the split view, in order to familiarize myself with the more efficient method of web design.


Overall, this project was informative and has left me more inclined to learn web design. At first, the process seemed intimidating but working with the split view in Dreamweaver served as good training wheels. While it was easy to learn some of the more straightforward commands there was still a great deal of confusion in getting the elements where and how I wanted them.

Writing for Wikihow

 I created this wikihow page last semester to help those learning rotoscoping in Adobe AE. Detailed below is the process that went into writing this article.

The process of writing a wikiHow page begins with the realization that there is not enough information on how to perform a particular activity on the website. While there may be lots of information on the topic elsewhere on the web, it may not exist sufficiently in the wikiHow format. Lots of places that host tutorials exist on the web, (such as YouTube, company websites, blogs, and miscellaneous sites) but wikiHow stands out for its simplicity and ease of use for its readers, editors, and creators. The format of wikiHow pages makes the information in the article easy to absorb by using a step-by-step layout with pictures that accompany the steps; learning an activity on wikiHow is a simple process.

            After a potential wikiHow creator finds a lack of information on a subject on wikiHow, they should be sure that their knowledge and expertise in the subject is sufficient for teaching others. For this project, the chosen subject was a tutorial on a particular tool in the video layering and special effects software Adobe After Effects. This project was chosen because the creator had recently finished a college course that centered on the use of this program and the tool (Roto Brush) in particular. Rotoscoping is a special effects method that the creator of the article noticed was a common headache for students in the course. During a rotoscoping project in the course, which made use of the Roto Brush tool, the writer of the article was frustrated that specific questions regarding the brush could not be answered with the available YouTube tutorials. Issues that arose included the Roto Brush not responding to edits to the selection area made by the user, and the brush propagating to areas not near the subject. By working through these problems through trial and error, as well as reading information on various special effects websites, a solid knowledge of common problems and solutions with the Roto Brush was developed.

            During the experience of the class, the writer of the article found that there was plenty of video tutorials for the process on YouTube, but no sufficient multimedia tutorials for users who prefer not to watch a video tutorial. The writer was able to identify specific, helpful information learned in the class to the wikiHow that was not found in YouTube tutorials, to be included in the wikiHow. The next step was to gather and organize the information for the wikiHow and also research how to compose the article.

            This reference on the wikiHow website goes into detail about how to create a passable wikiHow article. One of the key points is to create an outline. For this project, the outline was made to include at least eight steps and several tips and warnings for the activity. By creating an outline first, the creator has time between the inception of the article and the writing of the first draft to consider what information, images, and other elements should be included in the article. For this project, it was determined that the tutorial should begin with the basic step of importing footage into After Effects (AE). Since the tutorial is intended for those already familiar with the software, it was determined that basic information of After Effects, such as how to create a new composition, how to create and duplicate layers, and how to export the video, would be assumed as knowledge for the reader.

            While creating the outline, the activity itself, rotoscoping with the Roto Brush tool, was performed and documented for the article. In order for a user to learn a process in software like AE, it is necessary to take screenshots to accompany the text directions. The screenshots were taken at each major step to provide a visual reference to the reader, who could read simultaneously read the article and use After Effects in order to know that they are clicking the right tools, in the correct panel, and so on.

Each screenshot was edited for wikiHow by reducing the size of the image and cropping around the relevant elements of the screenshot. In some screenshots, it was necessary to superimpose arrows and circles to highlight specific, hard-to-see elements of the image.

 One step was determined to require two images to show the contrast between what the reader’s view of AE should look like before and then immediately after the step. In sum, this tutorial relied heavily on having clear screenshots to assist the reader in learning a very visually oriented activity.

            The text of the outline was designed to be inclusive of all the relevant information for each step while also maintaining conciseness. Since there is lots of room for confusion in using a program like AE, which has many expandable features and tools tightly packed into a small space, it was important to be specific about what is being done in each step.

            After the outline was created, and all the information, images, and elements had been gathered, the draft was written in wikiHow code in a text-processing program. The simple code included in the draft serves to organize the information in the article by indicating headers, bold text, and bullet points. For example, by including a pound sign (#) before a sentence, the sentence will appear in bold; or by placing an asterisk (*) in the same fashion, which will create a bullet point. Once the code had been applied to the text, and had been organized into the preview, steps, tips, warnings, and related wikiHow sections, the text was pasted into the new article editor in wikiHow. To do this, a wikiHow account was created, which provides access to the editing tools.  To be sure that the final article would appear as intended, the preview function is used to see how the article will look once it is published. Once final adjustments have been made, and the preview reflects what the article should look like, the article is published and is then subject to editing by wikiHow users and admins.

            Overall, the process of writing a wikiHow article falls into a few steps: Research, Outline, and Editing. Although anyone can create a wikHhow page, care to all of these steps is important for making an article that can withstand the quality control of wikiHow.

           

More Logos

In this blog I'll be showing some of my favorite logos from a variety of different companies. These logos are selected for their effectiveness and aesthetic beauty, taking into account the Gasault theory of design, visual hierarchy, alignment, and repetition.

BMW M Series. This is a logo for a high performance line of cars from BMW. This is an effective logo for its symbolic use of imagery. The repeating forward slashes that align with the first part of the 'M' communicate the motion blur of a speeding auto. The 'M' itself is a metallic shiny texture that would resemble aluminum, the primary type of metal in these performance cars. The logo leans overall to the left, the direction it is read, to further communicate speed. The minimalism of the logo makes it all the more striking.

Ghastly (DJ/Producer). This logo is very basic but extremely effective. The main purpose this logo fulfill is recognition. The use of familiar 'net-speak' style emojis made from unicode symbols has an instant connection to the generation who is targeted by this music: young people who grew up with computers and no doubt stumbled across these crude emoticons. This also makes the logo spreadable, in an instant chat or SMS a user can easy reproduce this logo and spread it. It has a truly web-inspired viral quality. The tall sans serif font serves to draw further attention to the unicode face with its unassuming appearance, and is as clear as possible to draw the verbal connection of the name to the face.

This logo is great for its symbolism. This beloved movie rental chain had a ticket stub as its logo, with a font resembling the blocky letters that would be seen on a movie ticket. The torn edge draws the design closer to realism and is a clever touch to symbolize a movie ticket that has already been bought and used, getting the consumer thinking "ahead of the sale" subconsciously to fulfill a subliminal effect to rent movies at blockbuster.

Saul bass was a master of logo design, and this is my favorite from his work. The logo has a warped appearance that evokes wings in the shape of a 'U', with red representing the underside and blue the upside of the wing. This logo is also effective for its iconic design that set it apart from other airlines with its large kerning.

This logo is infamous for being the logo of an unethical fraudulent power company that made international news, but nevertheless is a striking design. The big 'E' for 'Enron' is connected in a kind of wire that represents the nature of its business (electricity). The big 'E' can also be interpreted as smokestacks, also associated with the power industry. The diagonal skew serves to differentiate the logo from other power companies to catch the eyes of an investor.

Good and Bad Poster Design

Nicely Designed Posters

GOOD: A concert poster for an electronic artist is often very heavy on visuals, but this minimalistic approach works well. The neon-themed design and purple/blue elements contrast well against the black brick background and white text. The elements are neatly and simply organized in a logical order, while the type size ensures easy reading.

GOOD: A movie poster for Mulholland Dr. This design does a good job at communicating the basic idea and mood of the movie. The viewer can derive this is a mystery story by the way the woman (Naomi Watts) is looking off-screen with an apprehensive facial expression. At the top, the darkened photo of the Hollywood sign communicates ominousness. The viewer knows, by the poster, that this is a dark mystery film has something to do with Hollywood and the woman on the phone, making the design effective in its goal.

 GOOD: This is a poster for a cookout for a church. This design is simple but also visually interesting, with the contrast of the colors of the abstract flames which overlap to create depth in the image. The date is large and in a place where the eye naturally wants to look, which makes the information memorable. The ample negative space puts emphasis on the few design elements present: the logo and organization name, the date, the name of the function, and the small text paragraph. The poster succeeds in not bombarding the viewer with too many elements/information. This poster captures the attention of the viewer and presents them with easily readable information.

Ugly and Ineffective 

BAD: This design is graphically bland and fails to command the attention of the viewer. The Cream/yellowish color gradient looks antiquated. The elements are organized in a centered format which makes it uninteresting. The poster looks like it was made in MS paint. The logo element seems jammed-in sitting in the lower left corner and should have been given more prominence. To improve this design, social media icons would have helped the poster establish credibility, accompanying the red Facebook link at the bottom.

BAD: This design has elements that are well organized, but suffers from poor color selection. The piercing neon yellow is difficult for the eye to look at and makes the viewer turn away before they can read the information in the small print. The icons at the bottom of the page are nearly indecipherable due to the lack of contrast between white and this shade of yellow. To improve, avoid using such a color that is painful to view.

BAD: Here is a poster with a very straight-forward design for an animal rights and environmental agenda. The poster works except for the bottom third. With already so much information in small text above, the map and its adjacent text is superfluous – there are too many websites listed, all in full “https://”. The YouTube link is especially bad as one would have to type the entire unique url into their browser, which almost nobody has ever done. Too improve: shorten URLs, include icons, get rid of google map.

Visuals are Powerful

Visual communication is most important of all, because sight is our most valuable sense.

One can surely get by, although with great difficulty, without the ability to hear - but the same can't be said about living without the ability to see. We as humans depend on our eyes to navigate through our world, communicate through body language, avoid dangers like open manholes and speeding cars, and whatever else you can imagine. Due to this, we naturally place a great emphasis on the use of images, gestures, and written language. For me, I respond to visual communication the most, and it's my belief that it's because of these reasons.

 I recall one time in my childhood aimlessly flipping through the pages of a magazine when I found myself transfixed by a full page ad with a dark background and a beautiful shade of green that almost seemed to glow from the page. This was, of course, an ad for Kool cigarettes (Not the exact ad, but a similar one:)

Though below the legal purchasing age, I immediately got one of the older kids from my neighborhood to buy me a pack of Kool cigarettes. When I got them in my hands, I chain-smoked the entire pack. Would I have done that without seeing the ad first? No. Aesthetically speaking, the ad was an absolute work of art. From then I realized the power of the visual advertisement, and of images in general. Images convey what we are supposed to buy, what we are supposed to desire, what we are supposed to respect, what we are supposed to hate, and basically any other communicative end.
Images, in my opinion, are the most authoritative tools of communication.

An image is a snapshot of a true or engineered reality, and communication doesn't get any more effective than that.

Besides the Kool ad, there are other very effective visual pieces that come to mind:

Redbull

I've always loved this logo and pack design for how it differentiates itself from other beverages. The checkerboard style 4-panel design evokes racing and speed, while the two bulls colliding in the logo give it a kinetic feeling. The type is bold and purposeful, putting the design more into the territory of “performance” than “enjoyment”, which I think accomplishes their branding goal.

Starbucks

This is the previous Starbucks logo. It communicates quality by organizing the elements into a seal, which gives it a kind of “royal” vibe. The color is an agreeable, smart shade of green that evokes nature (mountains, forest) and freshness. The woman at center of the seal has a goddess-like quality that gives a healthy sense of mystery and intrigue to the design.

The ultimate proof that visual communication is key is in our advertising. Simply check the prices of radio ad time versus television ad time, you probably won't not be surprised by which one is more expensive.