Animation mistakes

Don’t do this

These are NOT the top ten animation mistakes in film, but the most common mistakes in animation in general.

  1. Animated actions with anticipation and aftermath. From what I’ve seen, people are more concerned with this preconceived mindset that their projects are supposed to be like “this”. Always remember that there is no such thing as perfection, make it as good as it can get but understand that it will never be perfect. Or else you’ll just set an unrealistic expectation for yourself.
  2. References. It’s good to have references, but don’t illustrate them. They are there for inspiration not for translating in the actual project.
  3. Keep it simple. Don’t make it too complex. If you make a mistake and you need to go back and fix it it’s easier to fix simpler styles than more complex ones. Of course your designs should always be nice to look at, but don’t give too much than you need to.

According to animationmentor.com There are other mistakes which include 3D animation. Such as…

  • Not following a syllabus. Follow a syllabus, it’s the formula to how an animated media should flow.
  • Feedback. YOU NEED IT! Or else you wont fully understand if the animation is going in the right direction. This holds true for every project than just animation.
  • Don’t underestimate the project. Always note that a project can take longer than you expect. I make this mistake myself, so I know how this can affect creators.

So that’s animation mistakes and what you need to do about them. Now make no mistake there are more mistakes out there that pop up out of nowhere that no one sees coming so always stay on it, and remember this important tip: Ctrl-Z and Ctrl-S. Now get out there and make a cartoon.

Different ways to edit a video

Photo by Sam McGhee on Unsplash

Let’s talk about the process of editing videos. Did you know that there are so many ways to edit videos? There’s linear and non-linear editing, and there’s offline and real-time editing.

Linear VS Non-linear

Linear editing is the process of editing in timeline order from start to finish. But with linear editing you have to do it from the start to the end, meaning you can’t backtrack. Fortunately that is where non-linear editing comes in. Non-Linear is editing that isn’t in chronological order, so you can backtrack and fix or add something that was way back there. Linear and non-linear editing can both be utilized when it comes to editing thanks to modern day technology, so you don’t have to risk doing one or the other.

Offline vs Real-time

Another type of editing is offline and real-time editing. Offline editing is when you take a copy of the raw footage and edit that one copy only. According to premiumbeat.com the copied footage is transcoded down to a more compressed and lower resolution format. The video will use this as proxy footage through the rough, fine and final cut. So the best time to use offline editing is when you need to lighten the work load when editing. Real-time editing is when you edit videos on the the timeline without isolating footage. In fact real-time editing uses cloud based programs to clip and edit across multiple platforms.

Words to know

Here’s a few video editing words to know.

  • Batch processing: In computer terms it is an efficient way of processing multiple transactions at the same time.
  • Project trimming: Basically video editing where you cut parts of footage either by slicing in between, or cutting out a section to isolate it for other uses.

This is how the process of video editing works. The newer programs like adobe premiere can do most of these anyway so you wouldn’t have to do exhaustive work to handle the editing processes. Now get out there and make your movies.

More about Multimedia

Let’s talk more about the multimedia teams, mainly the jobs.

This one remote job as a multimedia programmer requires you to reprogram documents from flash to HTML. For this job you need to be proficient with HTML, CSS, and Javascript; have +2 years of programming experience, and have the ability to learn new languages.

There’s another job as a motion graphics designer in Weston, FL for Bang Energy. If you are into energy drinks and high performance drinks, then you’ll like this one. This job is entails you to create animated and video artwork for social media, it includes movie clips, some photoshop, illustrator and premier pro. Your responsible for working with art directors, designers and developers, generate new ideas, be organized and follow deadlines. This job requires you to have a bachelors degree in motion design or any design field, you need to have +2 years of experience, You must be able to multitask in a face paced environment, be a team player and have high attention to detail. Their benefits include health, dental and vision insurance and they offer tuition reimbursement.

Here’s another remote job as an Instructional designer for Tresta, a communication service in South Florida to help businesses move away from landlines. This job wants you to develop employee learning programs in alignment with organizational goals and training needed. You must utilize resources to ensure course content and training curriculum contains accurate information, understand various learning principles and employ a variety of multimedia to ensure maximum retention and comprehension, conduct assessments need to analyze and identify new developmental needs and recommend training methods accordingly. For this job you are required to have a bachelors degree along with +2 years of experience. The perks of this job is that you get:

  • To work from home
  • Competitive pay
  • 401K
  • Wellness initiatives
  • Health, dental, and vision coverage

Communications Coordinator at Broward college. Under limited supervision this position assists in executing strategies developed by the communications and community relations department. For this job you will need at least a bachelors degree. Your daily essential functions include.

  • Writing speaking points and blogs.
  • Builds and fosters collaborative relationships with other departments.
  • Pitch stories for distribution/publication. Contributes photos and stories to websites and publications. Encourage media participation, promotes spokespersons and arrange media interviews.

And much more responsibilities.

And last one I’ll be talking about is a multimedia designer for Nations Benefits. Your task is to deliver compelling, clean, modern digital print creative that clearly communicates the brand and effectively engages the audiences. You must create visually appealing and technically accurate/appropriate designs while adhering to strict deadlines. You must have a minimum of three years of experience in multimedia design, including but not limited to, producing/shooting/editing photography and videos, you must be extremely proficient in adobe creative suite, and they also prefer you to have excellent customer service skills as well. The offer the same health benefits and paid time off like the other jobs.

So these are the jobs for multimedia designers. Now be a team player and make some movies.

Multimedia production teams

When it comes to multimedia, (which involve movies or games) there are multimedia teams that do individual parts, there are many positions and team members that contribute to these projects.

Project manager: Oversees the project, conveys the information between the client and the team. Has to design and of course manage the project.

Video specialist: Has to shoot quality videos, transfer the footage to the computers, edit the footage using digital non-linear editing (NLE) system, and deliver the files to the CDs, or the web.

Photo by Tyler Casey on Unsplash

Multimedia writer: Write proposals and test screens, script voice-overs and actors narrations.

Audio Specialists: Locating and selecting suitable musical talent, scheduling recording sessions, digitizing and editing recorded material on the computer.

Photo by Obi Onyeador on Unsplash

multimedia designer: Graphic designers, illustrators, animators, and image processing specialists to deal with the visuals, thereby making the project look aesthetically pleasing.

Multimedia producer: Put together a set of coordinated pages for the web, and co-coordinate the updates and changes.

Multimedia programmer: Integrates all the multimedia elements into a seamless project, using authoring systems or programming language. They write the programming language (codes) of multimedia elements, and control various peripheral devices and they manage timings, transitions, and record keeping.

Interface designer: Creates software devices that organizes content, allows the users to access or modify content, and build a user-friendly interface.

These team members hold the projects together and must provide the best experiences for the clients. Without one of them the project would not work efficiently. Now team up and make something amazing.

Audio designing

So apart from looking at how to draw or putting together eye-catching media, let’s discuss how to make good sounds.

Like everything that comes to being creative there are no set of rules when it comes to making you own stuff (except make YOUR OWN stuff), so you can use any type of audio software to create clean sounds. Sound designers like Ben Burtt, Who was behind movies like star wars, WALL-E, and many other sci-fi based movies use Synthesizers and mixing programs to make the sound effects you hear. Sound designing can be used for not only movies, but also games, TV, and music (like Daft punk with the robotic voices). You can make some nice sounds using free programs like audacity to mix and edit .wave files, personally I use Adobe Audition.

The sound I made in audition

It requires a subscription to creative cloud, but it has more options that audacity doesn’t. Which was how I managed to make these.

Jobs

Of course we need to talk about the jobs and what they need from you.

Some jobs I found on Indeed (like: Sound Designer/ MixerEverpost – Los Angeles, CARemote) require you to be proficient in software like audition and are able to read scripts, and of course have some experience in sound editing and designing.

Another example is a job for a sound designer for Bungie, they need someone with effective communication skills but the tools they need are pro tools, Nuendo, and sound forge.

Sound designers can make up to $15 or $28 per hour, or $37,000 to $40,000 per year. Some contain benefits like 401K, health, paid time of, or dental.

So that’s a look at the art of audio design. It’s a little bit different from what I discussed previously, but it gets easier the more you do it. Now go make some game soundtracks.

Responsive web designing

When It comes to designing websites you must make the designs responsive, otherwise they will not be functional as a website.

When you go on a website and you see the mouse change or the thing you’re pointing at do a thing that shows that the website can take you somewhere else.

In the adobe software “Dreamweaver” you can create websites like the one I’ve made in HTML. You need to utilize the HTML (the structure) and the CSS (the design).

the guts of a website

In the HTML portion of the site, to make a hyperlink you need to add the opening “<a>” and closing “</a>” around the word IMAGES. But the <a> needs to have a href= in the opening “<a>”.

Jobs for this

There are a few positions open on Linkedin right now. These jobs can pay up to $41K – $127K depending on the job you are doing.

  • Junior web developer for EverCommerce. The job requires that you know HTML5/CSS of course, photoshop and strong ownership and accountability to judge multiple projects. It offers 401k, public transportation reimbursement, medical/dental insurance, parental leave.
  • Assistant WordPress developer from Dealer Inspire. Like how we talked about wordpress, this is yet another job that involves wordpress. Of course this requires you to know how to use wordpress. Also HTML5/CSS, and remain calm cool and collected under pressure (I cant do that).
  • Junior application developer Association for Talent Development (ATD). This job need you to design and implement web-based solutions. You need two years of CSS/HTML, experience in SQL.
  • Interactive designer from Sandhills Global. These people require you to know adobe software like photoshop, illustrator, and/or dreamweaver, and be able to learn new technologies and business functions.
  • Junior Web Developer for Stansberry Research. Like the others you need to know HTML/CSS. However you need to have 1-3 years of web development experience, and you also need to have a bachelors degree in computer science.

And this is some of the information you need to know about interactive design.

How to make animated web content

Creating animated web content is sort of like making animations for other stuff. For those of you who don’t know, animation is basically a method where figures are manipulated to create the illusion of movement. There is both 2D and 3D animation, and in the world of web designing you can technically do both.

From what I’ve read Toonboom is one of the top ten animation software’s for “animation” but personally I use Photoshop for manipulating pictures.

The timeline

This is the video timeline you will see

In every animation software, or movie making software in general, there will be a timeline showing you what will happen in the “movie”.

If you saw my post on: how to make a gif (not JIFF) then this should be no surprise to see this. The only difference here is exporting as an .mp4 than as a .gif.

pivot points

In the timeline I’ve added transformation pivot points to this animation so that it starts from one way and finishes on another. For this I made “rain drops” on one point and then I transformed them to look like they’re falling on the end point.

Final result

Now photoshop is a program you can use for animation but there is adobe animate that you can also use, which is specifically for animation as you can tell by the title of the program but you can also use it for html coding. Which is how most designers make there web banners for ads.

But don’t just take my word for it, try to use these programs yourself, and see what you can make.

Website Wireframing

Wireframe is the blueprint for a website

When constructing a website something you need to understand is that it’s just like building anything else and that you need to plan it out.

A wire frame is like a blueprint for your new sites. Without a blueprint for anything, then there’s no direction and if there’s no direction then there’s nothing to build, you cannot build without any form of direction. Without a wireframe the website will be a mess, and that’s uncool. So plan always.

Wireframing digitally VS traditionally

When it comes to wireframing you can do it with on a device or on pencil (not pen don’t be a neanderthal) and paper, or a board. Personally I don’t think it really matters which one you use because all that matters is what you’re comfortable using. I’m more of a pencil and paper type of guy so everything that I do starts out on literal paper and digitized later.

Wireframe tools

There are so many wireframe tools out there. Some costs money but some are also free to use. Here’s a few programs that you can use that wont cost you anything.

  • Lucidchart: you will have to sign up first but you can use the free version. Paying for it gives you more options on the site but we don’t need that if all we are doing is just very few things like wireframing.
  • Framer: it’s another site you have to sign up for, but you can still use the site to wireframe without paying for any memberships.
  • Wireframe.CC: It’s like writing on pencil and paper. It’s simple to use and you don’t have to buy a premium for that. However, it does lack mock-up creation, prototyping, and screen capture. So while it is simple to use, it does lack complexity.
  • Figma: Is a cloud based platform great for sharing and collaboration with team members. It’s free but for only two members and on three projects at a time.
  • Pencil project: It’s all FREE! Diverse UX tool, good amount of interactive elements, and especially known for it’s diagramming capabilities, linking shapes, wireflows, and other flowcharts is made quick and easy with Pencil Project’s “connector” tool and linking page. But because it’s free there are things this program lacks, like the good collaboration features, and the shapes are a bit lighter than other programs.

And that people, is how wireframing works. Remember, always construct a blueprint before doing any project otherwise you’ll be dealing with an absolute mess.

What is UX/UI?

More things to know about designing is a little thing called UI/UX designing. What these developers do is apply interactive and visual design principles on websites and web applications for a positive and cohesive user experience. These developers use HTML, CSS, Javascript or some other design tools to achieve responsive designs. UI,UX and front end developers are assisted by back-end web developers, who are responsible for server- side application integration and logic. UX and UI are in fact two different things however. UX stands for User Experience design, UI stands for User Interface design.

According to careerfoundry.com Don Norman, a cognitive scientist and User Experience architect, describes it as:

“User experience encompasses of the end user’s interaction with the company, it’s services, and it’s products.”

-Don Norman, cognitive scientist and User Experience architect

Basically, it encompasses any and all interactions between a potential or active customer and company.

User Interface design isn’t as easy to explain because it has a broad variety of misinterpretations, but it’s mainly the look, feel, presentation and interactivity of a product. It is the point of interaction between the user and digital device or product.

A/B Testing

Another thing you should know about is A/B testing (also known as split testing). This is the practice of showing to variants of the same web page to different segments of web page to different segments of website visitors at the same time and comparing which variant drives more conversions. The reason for these tests are for solving problems for the visitors

According to VWO.com, to perform these tests you need to perform these five steps.

  • 1. Research: Before building an A/B testing plan you need to conduct thorough research on how the website is currently performing. How many users are on the site, which page drives the most traffic, or what are the various conversion goals of different pages? According to VWO.com you can use Heat maps tools to determine where users are spending most of there time or whatever they do on the site.
  • 2. Observe and formulate a hypothesis: Log research observations and create data-backed hypotheses aimed at increasing conversions. Without these, your test is completely directionless.
  • 3. Create variations: Now create a variation based on your hypothesis and test it against your current version. A variation is just another version of your current one with the changes you want to test. You can test multiple variations to see which ones work the best.
  • 4. Run test: There are many kinds of testing the methods.
  • split url testing: is testing different versions of your web page hosted in different urls. Since they’re on different urls it’s up to you to decide the winning url.
  • Multivariate testing: Is a method in which changes are made to multiple sections of a web page and variations are made for possible combinations within a single test. This is best suited for advanced marketing professionals because it’s more complicated than A/B testing.
  • multi-page testing is a form of experimentation where you can test changes to particular elements across multiple pages. There are so many ways of doing this, but to keep it simple we’ll just list two of them,
  • Either Take all the sales pages and create new versions of each
  • Test how the removal or addition of elements can impact conversions across an entire funnel.
  • 5. Results: This is the last step but A/B testing calls for continuous data gathering and analysis. Analyze the tests by considering metrics, and if the tests succeeds then deploy the winning numbers and you did it.

If you want to become an A/B tester there are a few job openings right now, and according to payscale.com the average salary for a tester is $77k and varies between jobs so you know it’s a good deal. On ziprecruiter there is a job listing for a full-time Senior UX/UI designer job in Miami that pays $45,000 to $85,000 yearly. What these people (and many others for that matter) are looking for is professionalism, goal orientation, clear communication skills, a fast learner, and would have excellent management skills.

So this is another part of the designers world that you should know about though this one is a little more complicated, just by a hair.

Good web designs

A little thing to note about designing web pages is that (like everything else we’ve discussed) the’re a few elements to keep note of. Which is that each web page consists of code and what you should and shouldn’t put in it.

Minimize http requests

According to: https://www.impactbnd.com/blog/the-importance-of-website-load-time, there are five ways to improve your web loading time.

  • Combining css/js files. Rather than just making your browser retrieve multiple files try combining your files into one larger file. This might seem tricky but it’s necessary for effective load times.
  • Only load what’s necessary. Self explanatory, don’t load what isn’t necessary.

That’s basically all you need for that.

Media to use

For web designing you need to know what type of media you are putting in.

  • JPEG:A jpeg is an image on a site. Though it’s more compressed so some of the data is lost. Which is good for reducing the load on your web pages.
  • PNG: Also images on the internet but unlike JPEGs they don’t lose their data, and dont lose transparency. However they are still bigger than JPEGs in data do they might still take a toll on websites.
  • GIF: A GIF (NOT PRONOUNCED JIFF) is an animated media like a little video. These take up more space because they are made of multiple frames, so therefore are made of more data.

You can use either of these for your web sites depending on what you want to do with it, so long as you know how much your site can take.

I may not know what exactly it is that you’re trying to do, but what I can say for certain is that if you want to make a more responsive site, then it is best to keep the data down to a minimum to reduce the workload. I do encourage making your site reach its fullest potential but that’s about it, “It’s fullest potential” might be the only thing that can do you good.

Now get to it. CHOP CHOP.