Animated App Loading Screen (Design C5)

Project Introduction

It’s a great time to be in Animate, because our client has requested look at what our app “loading page” will look like while being launched. No worries, we have enough branding experience to be able to show off how the app design will look while loading up… right?

Most apps have an animated “loading screen” for when the app is first launched. In our case, we just need to provide a sample video of what ours will look like. Luckily, we can use Animate to create a quick mock up of what that will look like! It’s time to think about REALLY animation our logos in a nice, visually pleasing way.

The point of this video is to make a “first impression” to the client as far as how the app should look and feel, not like a wireframe or a static set of images to show what we want the design to look like, but a real animated loading screen! Have you considered how you will make this look yet? If not… you better get to it!

Your App Loading Screen needs to include:

  1. Brand Growth: We need to make sure that we consistently deliver our project work to the client in a way that grows the branding, but does not invalidate any old stuff we have already done. Your grade on this project will include your ability to grow your branding in a consistent direction.
  2. The Company Logo: Everyone chose a different project to work on, so this will need some creativity on your part. How will you incorporate the logo into this little teaser video?
  3. No Live Video: The client has expressly requested a video teaser that only uses graphics… what is that gonna look like? Use your camera, Photoshop, Illustrator, Animate… whatever you can to get it done WITHOUT the use of live action video.

“Yes, this project is SPECIFICALLY DESIGNED to be extremely limited in scope, to force you (the designer) to get creative and use your problem solving skills to overcome the objective, in a short amount of time. I know it feels like your hands are “creatively tied”, and you are completely correct… they have been. Stay within the parameters of the project, and get the job done.” – GD

Sample App Loading Screens

I am sampling a bunch of .gif files just as a showcase to explain what your options are, but you will be exporting a VIDEO that is 5-10 seconds long, which shows what the clients logo or app loading page will look like, from start to finish. Of course, a REALLY GOOD designer would have both, right?

Project Requirements & Helpful Links

  • You post your video to YouTube, and embed it back on your portfolio to turn it in. Detail on your portfolio a bit about your process. You cannot email the video to the Instructor. You need to publish it online, and embed it on your own WordPress portfolio.
    • The Video Requirements
      • Must be between 5-10 seconds long at 30 fps. The dimensions of the video are up to you, but should be showcased in a “scene” like the .gif examples above. Priority should be given to smooth playback!
      • You should consider using a sort of “mockup” of the app loading page being shown on a static phone, like in the provided samples, so that the client can really understand your use of screen space.
      • Also, consider re-saving your video out as a .gif, for use as the featured image on your portfolio. This would put a really nice touch on the overall presentation of your work, and should be easy for you now, right? If not, check this tutorial out on How to Convert a Video File into a GIF using Photoshop out…
    • Explain your plan…
      • Before you get started, you 100% MUST GET THE CREATIVE APPROVAL OF YOUR INSTRUCTOR. Do NOT start working on this project without showing your Instructor your idea, inspiration and plan to complete the project. There is not enough time for you to start something that you cannot do!

Project Grading Rubric

The grade for this project include your ability to produce the required media, as well as follow all of the directions. Your final grade is comprised of your ability to create an attractive animated logo reveal, and keep it within the scope and requirements technically. Your ability to upload it to YouTube, and embed it back on your own portfolio. All of these skill are incredibly important to any company, studio, firm or team that would hire you, therefore they are all part of the grade rubric.

You showcased an complete mastery over this project with good video, great animations, hosting and embedding.Student was able to follow almost all of the requirements, but may have missed one key aspect.Student did make the video, but it suffered from a lack of design skill, or did not follow more than one of the requirements.Student did the absolute bare minimum, and produced a less than acceptable product, and didn’t meet all of the requirements.Student did not follow directions, did not produce remotely acceptable work, or didn’t cover almost any of the requirements.