Case Study

Post-Mortem Case Study

Computer Graphic Technology 353 Class of 2017

This page is dedicated to an analysis of my CGT 353 class over dynamic media, the work that I have created, and the process it took to create the final projects. These four projects were created in Adobe Dreamweaver, Adobe Animate CC, and with the help of Adobe Illustrator for some of the images created.


User Specific Requirements:

This was our first assignment, I decided to include this within the four other main projects because it was what we as a class wanted to do as the semester progressed. We were essentially making a list of what we wanted to learn, what we should be learning, how many main projects should we complete through the semester, when we should meet as a class, etc.

First, we had to write all of these ideas out and see which we considered to be most to least important to us and then figure out how to lay it out on a piece of paper logically so a professor would easily be able to see what  the learning objectives are and how to proceed.

After we completed this step and typed out the requirements and our course objectives, we needed to lay it out nicely in Illustrator to be more pleasing to the eye. I sketched out some ideas for the file which we later ended up using some of my ideas as our final piece. Below shows my sketches in which we as a class worked off of and one of the finalized pages as well.

This slideshow requires JavaScript.


Project 1: Personal Webpage

For this project, we delved into Dreamweaver for our first real test of our skills. The goal of this project was to dive into HTML 5 and get our feet wet when it came to web development, especially since some of us had little to no experience in the matter. This project was also made to let us learn how important user centered design is and how it is a growing field of work. Personally, I had never even touched Dreamweaver before this project, so I had to go into a completely new program just to test out what I could and could not do.

The assignment asked us: 1. Describe what you want to be 2. Describe what you want to acquire (skills), and 3. How do you want to view yourself? I then dedicated a small webpage built from inside Dreamweaver to display three separate pages and one home page to answer these questions.

This slideshow requires JavaScript.

I learned how to link webpages, how to create tags, how to easily edit HTML 5 in Dreamweaver, how to link videos, among other skills.

After this attempt at building a website, we let ourselves sketch out what we would want our professional website to look like in the future. Of course, I didn’t want mine looking like this at all since it was only my first attempt. I did have some ideas over what my personal webpage may entail, which is shown in the sketches below.

We then began to discuss why wire-framing is so important before you set up a website. I learned that you really need to test out the website in wire-frames, step by step, and let someone else walk through it so that there is no user centered design flaws. When a website is easy to navigate and people don’t need to think about where to go, they are more likely to stay on the website and browse what’s to offer. I focused on showing off my work on these sketches for my website wire-frame. For more information about why wire-framing is important before you jump into the final product, click here.

For right now, my personal website will still consist of WordPress until I become more proficient in HTML 5 / Dreamweaver.


Project 2: Web-banner in Adobe Animate CC 2017

For this project, it was our job to learn how to animate in Adobe Animate CC 2017, which is the new “Adobe Flash.” It was a simple objective, but a difficult one if you had never animated anything in Flash before this project.

Our project was a 3 to 5 second long animation for a made-up company called “Java Junction” a gourmet coffee shop. The size was supposed to be 250 x 250 pixels to create a web banner for the side of a website.

First I started off with sketches and a storyboard, which lead me into the animation process in Adobe Animate. My first sketch is shown below.

FullSizeR[3]

I began animating at this point and quickly realized I had made a mistake: this was going to be a LOT longer than a 3-5 second ad and more complicated than I first imagined. I then had to rework my storyboard into something more feasible, especially for a first-time animator like myself.

FullSizeR (3)

This storyboard was much more doable and I recreated this sketch in Adobe Animate CC.

Coffee-Web-Banner

This was my final product, I had a timeline with several different layers, one for the table, the coffee, the coffee maker, the smoke, and the text. I used Adobe Illustrator to image trace pictures to get the images I was able to manipulate. I also used this tutorial here to be able to learn how to animate smoke in Adobe Flash.

Before starting this project, I had never used Flash before so I learned how to: Understand how to read the timeline, how to draw and animate smoke (with a gradient opacity), import pictures and files into flash, gradually change the opacity of an object, how to shrink and grow an object, how to use key frames and make an object go quicker or slower, and how to set objects to a motion path and move them around the screen.


Project 3: Self-Directed Project with Adobe Animate

This was our first project where we as a class, got to choose what we wanted to do individually, as long as we produced something that was interactive or that was involving Adobe Animate.

This project was made to test our abilities, since we were given ample amounts of time (and Spring Break) to complete this assignment. Our professor wanted professional work to turn in, and since I had fun learning Adobe Animate, I decided to continue working with the program to see if I could do frame-by-frame animation instead of tweening animation (i.e. project 2). I have always been a huge fan of animators and animation movies, such as Ghibli films, so I was excited to try out something I had been wanting to do since I was a child.

The first step for this project was learning all of the ins and the outs of Adobe Animate CC 2017, which I did by watching this full-length tutorial which you can find here. After watching this and reviewing things several times while I was setting up my animating work-space, I could then start on my project. I already had an idea in mind, and since this piece was all drawing I didn’t need to create any sketch art before hand. I used a live-action GIF to recreate a game character into a frame-by-frame animation.

In total there were 51 frames at 24 fps, and shown below is my final product. Approximately 15-20 hours went into making this 2.1 second piece. This took so long probably because not only did I draw every single frame by hand, but also because I was still in the process of learning the program I was using and how to manipulate the animation timeline / frames.

Tf2-Flash-Animation 2

I was fairly proud of this final piece since I had never done any serious frame-by-frame animation before this, overall I learned a lot about Adobe Animate CC 2017 as well as how tedious animation can be (but fun).


Project 4: Self-Directed Project 2 with Adobe Dreamweaver

This was our class’ last major project, which we had roughly 2-3 weeks to be able to complete. Our project was to create an interactive design for a user to be able to interact with without any issues. This project was created to test out our skills that we had learned and studied throughout this semester to see what we could produce on our own.

For this project I chose to try and create a website for the insect bite app I had created last semester in both Balsamiq as well as the final prototype I made in InVision. The InVision interactive prototype I made for iPhone can be seen by clicking here.

Deciding to do this was a challenge for me, since web coding can be daunting, so I had to step out of my comfort zone willingly to try and create a working website prototype.

The first step I did was to create some basic sketches of how I wanted the website to look based on my old sketches from Balsamiq and InVision.

FullSizeR[5]

My notes as well as my layout became fairly hard to read as I ended up writing on the back of this page and the indentations came through the back of it. But, the gist of it was that I was writing down what made a friendly interface for user design, how to create buttons and layouts that were easy to understand, and what I wanted my page to end up looking similar to.

My first attempt at my website didn’t go over so well, I wasn’t too pleased with how I was going about it, and decided to completely scrap what I had and start over. I then created the content you see below as my second attempt.

Sadly, that’s not the full amount of content I had created, I had several pages worth of information as well as clickable links and a working navigation bar. My Dreamweaver however had different plans, and after 10 hours of work, my file got saved over back to the start-up template and I was left with nothing. Below is the scraps of what I managed to retrieve from this awful incident.

Save multiple files no matter what stage in the process you are in.

insect bite website 1

If not, you’ll regret it when something decided to crash or corrupt. It’s a good idea to save things to a USB, a external hard-drive, as well as the Cloud or G-drive.

After this awful incident, I had about a day and a half to try and re-create the work that was missing, and that’s what I did to the best of my ability. This time it only took around 3-4 hours of work instead of 10 because I knew what I needed to do and I knew the code I needed to put into Dreamweaver. Repetition = Faster Learning

Viewer discretion is advised, insect bite and sting wounds are depicted in this website, do not use this information instead of seeking medical assistance.

This slideshow requires JavaScript.

This was a learning experience for me, I managed to produce a usable product by coding while also managing to increase my effectiveness on both web coding and time-spent. I learned that there’s a stopping point for projects, and that sometimes I don’t need to produce the “perfect product” to be able to learn valuable information and skills.

What I learned: How to put in links quickly, align objects to the right or left of the screen, change icons (aka: boxes, circles, thumbnails, etc), how to incorperate the css properly into the html, styles, how to manage a site and import pictures quickly because they are embedded

Overall I gained more confidence and gained the ability to code quicker with the knowledge I obtained from both my successes and my failures.


Conclusion

A lot of time and effort went into this semester to try to produce high quality work, I had both success and failure, but what’s important are the skills I learned and the knowledge I can take from this course to be able to better myself in both the understanding of user centered design as well as interactive design. I’d say the most enjoyable aspect over this semester for me was the animation part of it, I loved seeing my drawing come to life, and I plan on continuing working on animating whenever I have the free-time to. I’ve learned a lot of different subject matter throughout this class, and all of it is definitely something I can take with me as I progress towards my career as a Computer Graphic Technology major.

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