[CTE] OCP-C

DIG00830 (300 Hours)

Multimedia Web Interactive Designer

OCP-C Pacing Chart

The third section of the course will introduce students to the world of web design as well as User Interface/User Experience (UI/UX) design. Not only will we start to think of Photoshop CC in a whole new way, but we will journey into new powerful Creative Cloud Programs like Dreamweaver, and Animate CC.  These programs are quickly becoming one of the most integral part of a Multimedia Web Designers toolkit, and will allow us to quickly and professionally make our designs come to life in a whole new way.

During this section, we are setting our sights on becoming an Adobe Certified Associate Web Design Specialist as well, which will require a passing score for Multiplatform Animations using Adobe Animate CC, Web Authoring using Adobe Dreamweaver, and of course the Visual Communication using Adobe Photoshop certificate (that you hopefully earned during OCP-B, but if not… you will get a chance to re-test!).

The Final Project for this course will be centered around the same startup company who has hired you to build the branding, website, marketing and even a app prototype for their business in a test of your real world design skills on a tight deadline. This course will require much more focus and dedication from the students both in class and online, as well as require you to speak basic HTML and CSS. Buckle up and prepare yourselves to be truly tested over the next ten weeks!

Week 1: Market Research, Intro to HTML

Congrats! In the last section, you worked hard to pitch your designs for the Startup Company through the use of various designs, and you got the job! Now you work directly for the company, and they want to you break ground on all the web and interactive components of the company.  First things first, you had better get an understanding of Basic HTML by completing Code C1: Introduction to HTML on CodeCademy , to learn to speak to the coders at the company. But ALSO this week will also have you jumping into some introductory market research with Design C1: User Persona Designs. That’s right… it’s one of those weeks with TWO PROJECTS! Welcome to the new workload!

  • Week 1 Checklist
    • Complete the Learn HTML Course at CodeCademy. This module is meant for beginners, and if you complete the entire module, you will be able to make basic changes to HTML documents in the future. When you are done, be sure to screenshot proof that you completed the project, and email your screenshot to the Instructor at the end of the week.
    • Watch the HTML Essential Training videos from LinkedIn Learning. This is obviously optional, since you have so much work to do this week, but it’s REALLY helpful if you are brand new to HTML. Be sure to take the “What do you already know?” practice quiz there, too. Those questions could appear on your weekly class quiz too!
    • Watch the UX Design: Creating Personas online video. It’s only about a half hour long, and Chris Nodder really does a great job of showing you what you need to do to get your project done this week.
    • Complete and post Design C1: User Persona Designs in your portfolio, and have the link ready to email to your Instructor at the end of the week. Be sure to write a little bit about the process of creating these Personas, and your take on it when adding it to your Portfolio.
    • Write a detailed Article how professionals determine website target audiences, and how design strategies help reach and keep these audiences. One of your projects will require you to do some preliminary audience research, so be sure to really dig in!
    • Take Quiz C1: HTML Basics & Dreamweaver Interface at the end of the week, after you present your work and email your projects to the Instructor. All of the Basic HTML Quiz questions were taken from the practice quizzes from the week.

Week 2: Wireframing & Intro to CSS

Now that we have a few demo Personas to work with, and a basic knowledge of HTML, we will jump into some Code C2: Learn CSS and start thinking about the design of the website for our company. Once you have a working understanding of how CSS will make styling websites easier, we will break ground on Design C2: App & Website Wireframing for the upcoming web build. With this wireframe, we will plan a responsive design and the core functions of your App design. Another TWO PROJECT WEEK? It’s almost like this course is getting more intense! You better make good use of your time again this week!

  • Week 2 Checklist
    • Complete the Code C2: Learn CSS project. This module should be a little simpler now that you know how to use CodeCademy. When you are done, be sure to screenshot proof that you completed the project, and email your screenshot to the Instructor at the end of the week.
    • Finish the Design C2: App & Website Wireframing Design project. Put a LOT of thought into this project, as it will really help you in the weeks to come! Don’t forget to add some nice mockups of it to your Portfolio!
    • Take a Practice CSS Quiz online each day. Get good and comfortable with CSS Terminology, it’s going to be on your quiz!
    • This week you have two very important sets of videos to watch. The first is your CSS Essential Training, which will give you a LOT of solid information about this coding language. Secondly, watch the Illustrator for UX Design by Brian Wood. He shows you how Illustrator is used to help us plan out our projects for screens!
    • Write a detailed Article about Page Size Optimization to make websites faster.  Also, describe when JPG, GIF and PNG files are used in website design, and why each one would be used.
    • Take Quiz C2: CSS Basics & Dreamweaver Project Control at the end of the week. All of the Basic CSS Quiz questions were taken from the practice quizzes from the week, and some questions were pulled from ACATestPrep content.

Week 3: Building the Landing Page

Alright, we know know intro level CSS & HTML, and can talk to the coders in a language they will understand. Time to get Design C3: Landing Page Design going.  Now you can make use of your Wireframe for your Landing Page last week to knock out the Landing Page design, which will be used as the hub for your companies upcoming App Project. For this project we will build a responsive page for our future users to visit, where they will be able to download our app for their devices. This week is also your Web Authoring using Adobe Dreamweaver ACA Test! The website needs to be able to fully function and be presented at the end of the week with responsive breakpoints and working links, so don’t drag your feet on this one!

  • Week 3 Checklist
    • Complete the Design C3: Landing Page Design, and have it ready to present to the class at the end of the week. If you keep your design simple, you should have more than enough time to get this one done.
    • This week you will need to watch the Creating a First Website in Dreamweaver videos online in order to have the skills you need to finish your weekly project.
    • Finish up all of ACATestPrep content for Dreamweaver early in the week, so that you are prepared for the ACA Certification Test!
    • Write a detailed Article about UI/UX Design, A/B Testing and find local jobs that you could actually get with some practice in the field.
    • Take Quiz C3: Dreamweaver Authoring & Document Setup at the end of the week. Most of the content for this weeks quiz came from LinkedIn Learning videos, and ACATestPrep content.

Week 4: Design a Banner Ad Campaign

Now, I know that the last few weeks have been brutal, so it’s time to slow the pace (just a little bit though). This week, we are focusing on making a series of static web banners in Design C4: Web Banner Campaign, which our client will use to traffic new users to our landing page, in hopes of getting lots and lots of downloads! The week is designed to be “light” on design work, so that you can completely switch your brain around and prepare it for Adobe Animate, which is considered by some to be one of the most complicated and tough to learn in the Creative Cloud Suite. Take a breath this week, because it gets rough again before you know it!

  • Week 4 Checklist
    • The Design C4: Web Banner Campaign should be done, complete with nicely done mockups for your portfolio, and ready to present to the class by the end of the week. You can use Photoshop, Illustrator… anything you want to complete this weeks project.
    • This week you will watch Learning Adobe Animate CC on LinkedIn Learning to begin to understand what we will be able to do with these web banners, once we want to animate them for an HTML 5 output (next week).
    • Jump into the ACATestPrep Course for Adobe Animate, and complete the first few projects to make sure you are ready for Animate when we get there! Project 2 in particular should be very useful for next weeks project, so be sure to pay close attention!
    • Write a detailed Article about the process of Wireframing a Website/App project. Why do we wireframe? What does it help us achieve? Think back to your own experience making a wireframe, and include your personal insights.
    • Take Quiz C4: Introduction to Adobe Animate at the end of the week. These questions are coming from ACATestPrep content, as well as the LinkedIn Learning videos for the week and covers the basic interface and some document setup questions.

Week 5: Animating the Loading Screen

Now that we are a little more familiar with Animate, let’s lean into it a little think like animators. We will spend the week making a video export that shows how our app will look like when being fired up with the Design C5: Animated App Loading Screen project. The rest of the week includes more ACATestPrep work to get ready for our upcoming Animate ACA Test. You will notice there are no additional LinkedIn Learning videos for this week, so all of your online time should be spent digging deep into the ACATestPrep content, and our loading screen this week. Our client wants to see what we’ve got by the end of the week, so dig in and get the job done!

  • Week 5 Checklist
    • The Design C5: Animated App Loading Screen project should be ready to show to the class by the end of the week. Since it is video work, you will also need to learn how to post and embed YouTube Videos back into your portfolio, which is great practice for upcoming projects!
    • Watch the Adobe Animate CC: HTML5 Canvas and WebGL on LinkedIn Learning. Adobe Animate is A VERY difficult software to learn as a beginner, and this course is a great way of getting all the most important information for how we use it for Web! It’s FULL of good stuff!
    • Complete ACATestPrep for Adobe Animate projects 3, 4 and 5. Project 3 in particular should be VERY helpful for this weeks design project so be sure to soak it all up to make the best design you can this week (and do well on the quiz!). It’s all about importing, working with, and exporting video content from Animate.
    • Write a detailed Article about Web Ad Banners.  Describe a job position for a skilled Web Ad Banner Designer, including salary and position requirements. Now that you have done one for yourself, is there anything about the process you would like to do again, or better?
    • Take Quiz C5: Video Production in Animate at the end of the week. This quiz is designed to help you prep for your Certification test… which is next week! I hope you were paying attention to your ACATestPrep content… that’s all I’m gonna say about that…
    • Don’t forget to keep taking those Practice ACA Tests too on Gmetrix. They really should give you an idea of what you need to work on, and what you already have mastered! Keep at it!

Week 6: Interactive Web Banner

Our client was pretty impressed with our work on the original banner campaign from a few weeks ago, and wants us to kick it up another notch with a fancy new addition with the Design C6: Interactive Web Banner project. This week will truly test our knowledge of Adobe Animate, by requiring a whole new set of skills to make the banner not just animated, but INTERACTIVE!

  • Week 6 Checklist
    • The Design C6: Interactive Web Banner project should be ready to show to the class by the end of the week. Since this is web work, you will be required to turn it in and present it on the projector to the whole class, and show its proper design and functions.
    • Watch the Adobe Animate CC: Creating an HTML5 Banner Ad video lessons on LinkedIn Learning. There are lots of NEW bits of information in this video that will help you with your project this week!
    • Complete ACATestPrep for Adobe Animate projects 6 & 7. Remember that last week you were assigned Project 5, which is all about Interactive Web Banner Design! Do you remember the ins and outs? If not, be sure to re-do that lesson to help with this weeks project!
    • Write a detailed Article about WordPress.  Why is it so popular among Web Designers and Bloggers?  Examine and explain how professionals use WordPress to quickly create websites. Keep in mind, this article should not cover only WORDPRESS.COM, but also the full Content Management System!
    • Take Quiz C6: Animate Interactive Content at the end of the week. Once again, these questions were taken from ACA Test Prep!

Week 7: The Investor Pitch Deck

So now we have a website, banner campaigns, business cards, and almost everything else we could need… there is just one problem our client has… THEY DON’T HAVE ANY MONEY! We need to build them a proper presentation to take to investors to start building the company. Design C7: The Pitch Deck Presentation will get us there, and will test your ability to make a beautiful and effective presentation design. There are two solid LinkedIn Learning videos for you to make use of this week to help you better understand what we are going for as well, and the quiz at the end of the week will test how much you were paying attention to the videos!

  • Week 7 Checklist
    • The Design C7: The Pitch Deck Presentation project will have you creating a professionally built ask for money from investors for your startup client. You will present it yourself at the end of the week, but we are far more interested in the DESIGN of the presentation than the made up data in it. Check out Guy Kawasaki’s Pitch Deck breakdown to see what you should cover in your presentation.
    • You have two video assignments this week to help you with your project work. Presentation Tips for Pitching to Investors, as well as Learning Graphic Design: Presentations. These two videos will give you a solid understanding and better perspective on what you are aiming to produce this week.
    • IF you have already earned your Visual Communication using Adobe Photoshop certificate, then you will have even more time to spend on this weeks projects. If you did not earn your certificate during OCP-B, you will spend the next few weeks re-doing the ACATestPrep content to re-test in a few weeks. Buckle down, and complete Projects 1, 2 and 3 this week!
    • Write a detailed Article about Animated Web Designers. Explain the use of Animated Web Ad Banners, as well as job positions for Web Animation Designers.  Also, find 5 examples and critique them.
    • Take Quiz C7: Presentation Design & Pitch Decks at the end of the week. Once again, these questions were taken from ACA Test Prep!

Week 8: Infographic Design

It’s time to put a pretty face on some data, with Design C8: Infographic Design. This project will pull you back into thinking like a graphic designer again, except now you need to present some REAL DATA about your clients industry. The work itself isn’t going to be hard, but changing your brain into “data mode” should be easy. You did all the industry data research last week, so now it’s time to make that data into easily digestible information for the end user of your app. Additionally, this is halfway to the Photoshop Certification re-test if you didn’t manage to secure your Certificate in the last section. Buckle down and get ready to earn that certificate!

  • Week 8 Checklist
    • The Design C8: Infographic Design will have you create an attractive design that explains data points that are relevant to the industry that your clients app belongs to. Use the data you gathered for your Pitch Deck Presentation, but also find new interesting data points!
    • You have another two videos this week on LinkedIn Learning. The first is Learning Infographic Design, which explains the use of these graphics and what you should be thinking about while building them. The second video, Designing an Infographic gets more in depth on the process of the design itself. Both videos were used to build the quiz at the end of the week, so pay close attention!
    • Keep working on your Photoshop Retest if it applies to you, and complete Projects 4, 5 and 6 on ACATestPrep. The retest is NEXT WEEK, so get ready!
    • Write a detailed Article about Animated Web Content, with a detailed look at Timelines, Keyframes and the best formats to use when creating Animated Web Content.  HOW are they created? WHO uses them? WHAT is the goal for animated web content (other than just looking really, really cool)?
    • Take Quiz C8: Infographic Fundamentals at the end of the week. Once again, these questions were taken from ACA Test Prep!

Weeks 9 & 10: Updated & Interactive Branding Style Guide

This section is already almost over?! Where did the time go? We now have just TWO WEEKS before the section closes, and we need to update our Brand Guide! This next two weeks will challenge you to think about your Print Brand Guide in a new digitally friendly way… the EPUB! Your Final C1: Updated & Interactive Branding Style Guide will be due at the end of the next two weeks, giving you more than enough time to not only add to the content of your Brand Guide (like… all the web and interactive rules for your brand), but we are also going to make it friendly for multiple types of viewing devices! On top of that, if you did not already lock up your Photoshop Certification, your retest is here! Hopefully you have been keeping on top of your ACATestPrep content! End this section on a very strong note!

  • Week 9 Checklist
    • Start updating the Final C1: Updated & Interactive Branding Style Guide with all your newly built web rules. You will need to add new pages, and explain how your Brand Guide is to be applied to the web. Also, REALLY REALLY look at where you left it off… are you much better with design now? Should you re-do some of the old work? Did you fix all the errors from the end of the last section?
    • Watch the InDesign Interactive Documents video on LinkedIn Learning, so that you can understand how your old Brand Guide can be made into a shiny new one with lots of interactive features!
    • If you are going to be retaking your Photoshop Certification Exam, finish up Projects 7, 8 and 9 of ACATestPrep early in the week, and be sure to do all the quizzes in ACATestPrep as well! They have a huge impact on your actual test scores!
    • Write a detailed Article about Responsive Web Design. Find 5 local job postings for Web Designers who can fill this role, and describe the job details including requirements & salaries. Do you think you could apply for these jobs? Would you get the job, or do you still have some learning to do?
    • Take Quiz C9: Interactive InDesign Basics at the end of the week. All the questions came from your LinkedIn Learning video this week… were you paying attention?
  • Week 10 Checklist
    • Put the finishing touches on your Final C1: Updated & Interactive Branding Style Guide and get it exported correctly with flowing text, resizing elements, etc. The entire brand guide should be fully responsive by the end of the week, and then present it to the class.
    • Watch the InDesign CC: EPUB video course on LinkedIn Learning. In this video all of the secret hacks needed to complete your final project can be revealed! Also, this weeks quiz was pulled directly from this content… so pay attention!
    • Research & Explain the terms SEO, SEM and Online Reputation Management.  Find 5 local job postings for a person who can fill this role, and describe the job details including requirements & salaries. Once again… do you think you could apply for these jobs? What do you need to learn in order to get these jobs? You know you can make a TON of money in the SEO and SEM industries, right? Do you feel ready to go get a job doing that?
    • Take Quiz C10: Advanced Interactive InDesign. This weeks quiz is all about making a better more responsive InDesign document… and was pulled from the video lessons from the week!