DIG00820 (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 Introduction to HTML module 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.
- Take a Practice HTML Quiz online each day. Practice, practice, practice… you get it.
- 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!