Continue working on all aspects of your app design and presentation (UI, brand, interactions, and presentation).
Due May 16th (to dropbox)
• URL link of your updated presentation
Due May 23rd (to dropbox)
• URL link of your final presentation
• Support files (jpg and gif)
HW: Due May 9th
Overview
Over the next three classes (and until the end of the semester), we will be building on the skills learned over the course of the semester to test and improve our app design incrementally, and create a strong presentation of your design as a final deliverable.
This is an opportunity to identify and fix things that aren't working, redesign key features, design icons and delightful transitions, develop your visual identity, give your work personality, and more. Transform your work!
As usual, you will be uploading work and assigned grades weekly. In addition, you will also receive a grade on your final presentation design that will be worth 25% of your overall grade for the semester.
For this week, your homework is to create an online presentation of your project. Start by creating a series of presentation slides that you will be stacking vertically to be viewed on a scrolling portfolio project webpage. There are lots of examples of this in the reference link below.
This presentation design will include:
• Introduction slide:
with your App logo, Logotype, Tagline (a short phrase that describes your app), and a mocked-up key screen.
• Overview slide:
with a description of you app in about three direct, well-written sentences.
• Visual & Interactive Concept:
Show how a key details and interactions work, and why they were design the way they are. (stuff like: warm and clean, continuous & intuitive, image focused, easy to use, friendly, hip and delightful — think about what your app does on a high level, and how your design decisions support that)
• Visual Identity:
Your logo design, typography choices, and color palette
• Icons:
If you designed custom icons (or are going to), show them.
• Process: Show your process from hand-drawn sketches to wireframes
• Demo slides (multiple slides):
Walk us through how your app works or what the key features are by showing key screens and/or animations of screen transitions.
• End slide:
Just a considered way to end your presentation deck – a blank slide with your logo, show your loading screen, or thank your visitor.
Keep in mind:
• You can design the individual pages in a software program of your choice and export them as PNG, JPG, and GIFs before uploading to a webpage.
• You don't need to put this work on a publicly searchable webpage. You can create a blog page specifically for this project that you will delete at the end of the semester. Feel free to use blogger – you're only designing a single scrolling project page, not a whole site.
Reference:
View select portfolio project links here.
There are a ton of other great examples on Behance.com and Dribbble.com and other places.
Due May 9th:
• Upload (to dropbox) a link to your published online webpage of your project presentation
Over the next three classes (and until the end of the semester), we will be building on the skills learned over the course of the semester to test and improve our app design incrementally, and create a strong presentation of your design as a final deliverable.
This is an opportunity to identify and fix things that aren't working, redesign key features, design icons and delightful transitions, develop your visual identity, give your work personality, and more. Transform your work!
As usual, you will be uploading work and assigned grades weekly. In addition, you will also receive a grade on your final presentation design that will be worth 25% of your overall grade for the semester.
For this week, your homework is to create an online presentation of your project. Start by creating a series of presentation slides that you will be stacking vertically to be viewed on a scrolling portfolio project webpage. There are lots of examples of this in the reference link below.
This presentation design will include:
• Introduction slide:
with your App logo, Logotype, Tagline (a short phrase that describes your app), and a mocked-up key screen.
• Overview slide:
with a description of you app in about three direct, well-written sentences.
• Visual & Interactive Concept:
Show how a key details and interactions work, and why they were design the way they are. (stuff like: warm and clean, continuous & intuitive, image focused, easy to use, friendly, hip and delightful — think about what your app does on a high level, and how your design decisions support that)
• Visual Identity:
Your logo design, typography choices, and color palette
• Icons:
If you designed custom icons (or are going to), show them.
• Process: Show your process from hand-drawn sketches to wireframes
• Demo slides (multiple slides):
Walk us through how your app works or what the key features are by showing key screens and/or animations of screen transitions.
• End slide:
Just a considered way to end your presentation deck – a blank slide with your logo, show your loading screen, or thank your visitor.
Keep in mind:
• You can design the individual pages in a software program of your choice and export them as PNG, JPG, and GIFs before uploading to a webpage.
• You don't need to put this work on a publicly searchable webpage. You can create a blog page specifically for this project that you will delete at the end of the semester. Feel free to use blogger – you're only designing a single scrolling project page, not a whole site.
Reference:
View select portfolio project links here.
There are a ton of other great examples on Behance.com and Dribbble.com and other places.
Due May 9th:
• Upload (to dropbox) a link to your published online webpage of your project presentation
HW: Due May 2nd
As discussed in class, continue designing your app. Focus on fine-tuning and finalizing your brand (name, logo or logotype, color palette, tone of voice, icon design, etc.) and user interface (screen layout, navigation, size & placement of buttons and other elements, consistency across screens, etc.), before moving on to design the interactions and transitions between screens using AfterEffects.
Due May 2nd:
- Fine-tune and Finalize your brand and user interface
- At least one updated animation (unless we spoke in-class about focusing on brand and UI)
Due May 2nd:
- Fine-tune and Finalize your brand and user interface
- At least one updated animation (unless we spoke in-class about focusing on brand and UI)
HW: Due April 25th
Continue the work due last week:
Animate a single short interaction (or two or three).
• Focus on quality over quantity.
• Demonstrate your knowledge of Google Material motion principles.
• Have a polished, pixel -perfect interface and brand designed in Sketch (and other programs), before you bring your assets into AfterEffects.
Keep in Mind:
• If you need to run through the tutorials in more detail, do so. Now is your chance. Be sure to download the exercise files to follow along.
• Develop a smooth work flow between Sketch, Illustrator, and AfterEffects.
• Study Material Design "Motion" section (but really all of it) and look to Dribbble "Interaction" for further inspiration.
Due April 25th
Upload to Dropbox and Bring to Class:
• Animated Shorts exported as GIF, mp4, or mov files.
Bring all files for working in class!
Animate a single short interaction (or two or three).
• Focus on quality over quantity.
• Demonstrate your knowledge of Google Material motion principles.
• Have a polished, pixel -perfect interface and brand designed in Sketch (and other programs), before you bring your assets into AfterEffects.
Keep in Mind:
• If you need to run through the tutorials in more detail, do so. Now is your chance. Be sure to download the exercise files to follow along.
• Develop a smooth work flow between Sketch, Illustrator, and AfterEffects.
• Study Material Design "Motion" section (but really all of it) and look to Dribbble "Interaction" for further inspiration.
Due April 25th
Upload to Dropbox and Bring to Class:
• Animated Shorts exported as GIF, mp4, or mov files.
Bring all files for working in class!
HW: Due April 18th – Motion for interactions and transitions
1. If you are new to Adobe AfterEffects, complete the tutorial: After Effects CC Essential Training (and/or start here). If already know the basics, move to step 2.
Creative Cow's AE-Basics is another resource on YouTube. 1-12 is "essential" and there are 89 total videos.
And here is a video on easing in and easing out
____
2. Complete the tutorial: Creating a mobile interface with After Effects.
• Take the necessary time to do all the steps of this tutorial. It's very important you learn these skills so you can apply them to your design.
• Obviously, download the work files so you can follow along. Don't just watch!
____
3. Based on the tutorial, and using AfterEffects, create a animation sequence for your app that feature animated transitions. This will be a two-week project.
For this week:
a) Study Material Design Guidelines section on Motion. Plan out what motion you will have in your app's animated sequence.
b) Define your user journey – how your user accomplishes the main task of your app and define what the main screens are to animate that sequence
• Keep in mind that you will not be animating everything your app can do, just a main function of your app. The tutorial shows about 7 transitions over 3 different screens. Make a similar short sequence and do it well.
• You will likely have to design aspects of your screen designs to plan to animate it. Do so.
c) Finalize the designs of your main screens in Sketch import them into After Effects. (Try this way; save your individual Sketch screens as SVG files that you can open in Illustrator, change the file to .AI and import into AfterEffects)
- Keep in mind: Don't have ever single object in Sketch import in on it's own layer. Flatten things that don't need to be on their own layer.
d) Begin designing your app animation in After Effects. Complete at least one simple, but well-executed animation. It should be "quick, clear, and cohesive" with proper "easing curves" as outlined in Google Material Guidelines.
e) Export your work as a gif.
_____
Due April 18th (at start of class)
1. Complete all work listed above.
2. Upload to Dropbox: Animated gif of your single screen sequence.
3. Bring to Class, all supporting files, fonts and other materials. We will be working in-class.
Due April 25th (at start of class)
1. Upload to Dropbox: Animated gif of your in-process multi-screen animation sequences
2. Bring to Class: All supporting files, fonts and other materials
Due May 2nd (at start of class)
1. Upload to Dropbox: Animated gif of your FINISHED multi-screen animation sequences
2. Bring to Class: All supporting files, fonts and other materials
____
Creative Cow's AE-Basics is another resource on YouTube. 1-12 is "essential" and there are 89 total videos.
And here is a video on easing in and easing out
____
2. Complete the tutorial: Creating a mobile interface with After Effects.
• Take the necessary time to do all the steps of this tutorial. It's very important you learn these skills so you can apply them to your design.
• Obviously, download the work files so you can follow along. Don't just watch!
____
3. Based on the tutorial, and using AfterEffects, create a animation sequence for your app that feature animated transitions. This will be a two-week project.
For this week:
a) Study Material Design Guidelines section on Motion. Plan out what motion you will have in your app's animated sequence.
b) Define your user journey – how your user accomplishes the main task of your app and define what the main screens are to animate that sequence
• Keep in mind that you will not be animating everything your app can do, just a main function of your app. The tutorial shows about 7 transitions over 3 different screens. Make a similar short sequence and do it well.
• You will likely have to design aspects of your screen designs to plan to animate it. Do so.
c) Finalize the designs of your main screens in Sketch import them into After Effects. (Try this way; save your individual Sketch screens as SVG files that you can open in Illustrator, change the file to .AI and import into AfterEffects)
- Keep in mind: Don't have ever single object in Sketch import in on it's own layer. Flatten things that don't need to be on their own layer.
d) Begin designing your app animation in After Effects. Complete at least one simple, but well-executed animation. It should be "quick, clear, and cohesive" with proper "easing curves" as outlined in Google Material Guidelines.
e) Export your work as a gif.
_____
Due April 18th (at start of class)
1. Complete all work listed above.
2. Upload to Dropbox: Animated gif of your single screen sequence.
3. Bring to Class, all supporting files, fonts and other materials. We will be working in-class.
Due April 25th (at start of class)
1. Upload to Dropbox: Animated gif of your in-process multi-screen animation sequences
2. Bring to Class: All supporting files, fonts and other materials
Due May 2nd (at start of class)
1. Upload to Dropbox: Animated gif of your FINISHED multi-screen animation sequences
2. Bring to Class: All supporting files, fonts and other materials
____
HW: Due March 21st
Overview
Continue designing working on your interactive prototypes in Sketch and InVision. Focus on refining the details to pixel-perfect perfection, and designing just the right screens to demonstrate how the user gets through the main task/s of your app.
Due March 21st
Upload to dropbox and bring to class:
• InVision Link
And bring to class
• Working Files
Continue designing working on your interactive prototypes in Sketch and InVision. Focus on refining the details to pixel-perfect perfection, and designing just the right screens to demonstrate how the user gets through the main task/s of your app.
Due March 21st
Upload to dropbox and bring to class:
• InVision Link
And bring to class
• Working Files
Homework: Due March 14th (no class March 7th)
Digital Interactive Prototypes (this is two weeks worth of work)
1) Using your journey map and wireframes for reference, create a wireflow diagram to help you identify all the screens you need to design in order for your user to accomplish the main tasks that the app helps with.
2) Once you've identified the screens you need to design, revise your thumbnails to reflect any necessary updates and changes.
______
3) Using Sketch (or Adobe XD if you're working on a PC), digitally design the screens you identified necessary for getting the user through their experience of using the app.
• We will be adapting Material Design for this. In order to understand Material Design, read and study the following sources:
- Material Design Guidelines
- Expressing Brand in Material
• Follow the Material Design guidelines to design the individual screens of your app using Sketch.
- For now, follow Material Design as closely as you possibly can. (It's an amazing system!)
- Don't worry about Motion yet. We will be designing motion interactions and animating screen transitions next.
- To see examples of specific screens look places like here and here
_____
4) After you've designed all your screens, export them as PNG or JPG files and upload them in InVision to create an interactive prototype that you can tap and swipe, and test on any mobile device.
• To get started in InVision:
- Using your school email address sign up for unlimited use of InVision here: http://www.invisionapp.com/education-signup. Use this code: 56-73-13-19
- Watch this short video to get started: Interactive Prototypes with InVision
- If you want to learn more, you could also do this tutorial: InVision for UX Design
• After you're learned the basics of InVision, build your interactive prototype.
_____
Due March 14th
Upload to Dropbox and bring to class:
1. Your InVision link
2. A folder with your individual screen designs as PNG, JPG, or PDF files
This is two weeks worth of work.
Bring all working materials and files to class.
1) Using your journey map and wireframes for reference, create a wireflow diagram to help you identify all the screens you need to design in order for your user to accomplish the main tasks that the app helps with.
2) Once you've identified the screens you need to design, revise your thumbnails to reflect any necessary updates and changes.
______
3) Using Sketch (or Adobe XD if you're working on a PC), digitally design the screens you identified necessary for getting the user through their experience of using the app.
• We will be adapting Material Design for this. In order to understand Material Design, read and study the following sources:
- Material Design Guidelines
- Expressing Brand in Material
• Follow the Material Design guidelines to design the individual screens of your app using Sketch.
- For now, follow Material Design as closely as you possibly can. (It's an amazing system!)
- Don't worry about Motion yet. We will be designing motion interactions and animating screen transitions next.
- To see examples of specific screens look places like here and here
_____
4) After you've designed all your screens, export them as PNG or JPG files and upload them in InVision to create an interactive prototype that you can tap and swipe, and test on any mobile device.
• To get started in InVision:
- Using your school email address sign up for unlimited use of InVision here: http://www.invisionapp.com/education-signup. Use this code: 56-73-13-19
- Watch this short video to get started: Interactive Prototypes with InVision
- If you want to learn more, you could also do this tutorial: InVision for UX Design
• After you're learned the basics of InVision, build your interactive prototype.
_____
Due March 14th
Upload to Dropbox and bring to class:
1. Your InVision link
2. A folder with your individual screen designs as PNG, JPG, or PDF files
This is two weeks worth of work.
Bring all working materials and files to class.
Homework: Due February 28th
1) Create a User Journey Map (like we did in class).
• Use your persona as your user.
• Include: Phases, Actions, Thinking, Feeling, Pain Points, and Opportunities.
• Read:
- Basic Patterns for Mobile Navigation and
- UI/UX Navigation Design Glossary
• Draw:
- When drawing your wireframes, figure out what needs to be on each screen and what the flow is between different screens. Draw every important screen and figure out the order that you move between screens.
- Think of the overall experience of the entire app. Don't get caught up designing every detail the login process.
- Use these iPhone sketching templates to hand-draw your wireframes. Or if you prefer use graph paper.
- Cut up your 8.5x11 pages so you can put your individual wireframes in the proper order – like a stack of cards)
- When you have all the important screens draw and have established the flow between screens, re-draw your wireframes so they look good for presentation. Use black and grey felt-tip pens in different weights. Focus on your craftsmanship as a draftsman.
- Draw at the resolution of the examples below, and look at reference to help you articulate your screen designs (i.e use and study similar apps, and look to inspiration at places like here and here.
_____
3) Do these tutorials: Sketch Essential Training and Sketch for UX Design. We will be using Sketch in class next week and throughout the semester.
* If you are using a PC and Adobe XD, do similar Lynda.com tutorials for Adobe XD.
_____
• Use your persona as your user.
• Include: Phases, Actions, Thinking, Feeling, Pain Points, and Opportunities.
_____
2) Wireframes
- Basic Patterns for Mobile Navigation and
- UI/UX Navigation Design Glossary
• Draw:
- When drawing your wireframes, figure out what needs to be on each screen and what the flow is between different screens. Draw every important screen and figure out the order that you move between screens.
- Think of the overall experience of the entire app. Don't get caught up designing every detail the login process.
- Use these iPhone sketching templates to hand-draw your wireframes. Or if you prefer use graph paper.
- Cut up your 8.5x11 pages so you can put your individual wireframes in the proper order – like a stack of cards)
- When you have all the important screens draw and have established the flow between screens, re-draw your wireframes so they look good for presentation. Use black and grey felt-tip pens in different weights. Focus on your craftsmanship as a draftsman.
- Draw at the resolution of the examples below, and look at reference to help you articulate your screen designs (i.e use and study similar apps, and look to inspiration at places like here and here.
3) Do these tutorials: Sketch Essential Training and Sketch for UX Design. We will be using Sketch in class next week and throughout the semester.
* If you are using a PC and Adobe XD, do similar Lynda.com tutorials for Adobe XD.
_____
Due February 28th (at start of class)
Bring these things to class and upload pics to your Dropbox folder:
• User Journey Map
• Wireframes
Also be sure to complete the Sketch tutorials.
Homework: Due February 21st
Now that you have begun to see what your app looks and feels like from the perspective of your prospective user, it's time to learn from real people so you can gain insights into what they want and need from a product like the one you're designing.
Homework
1. Speak to at least 5 real people. Find as many people as you can that fit the demographic you are designing for. Spend at least 10 minutes learning from them. When possible get them to show you what they are talking about.
- To help prepare for interviewing, read pages 9 and 10 (Interview Preparation and Interviewing for Empathy)
2. Empathize and understand what the people you speak to need and want
3. Write down the key observations and insights from each interview.
- These are short, direct phrases and sentences that capture what you are seeing and hearing.
4. Create a new persona and empathy map to accurately reflect the people you spoke to.
5. Create a new storyboard to reflect your new personas wants and latent needs.
- Really work through the entire sequence of the person using the app to accomplish the task the app helps with.
- Use storyboarding as a high-level design tool: Identify the “pain points” – the places that the experience isn't good for the user – and redesign them to be better.
6. Update your app name, definition statement, bullet-pointed list of key features to reflect the changes to your app.
_____
Due February 21st
Bring to class and upload pics to dropbox:
• Key Insights from interviews
• New Persona and Empathy Map
• New Storyboard
• New Definition statement & bullet-pointed features list
Homework: Due February 14th
1) Research similar apps to yours and identify how your app will innovate and be different.
• Make a list of similar apps and understand what they are doing and how they are similar and different from each other.
_____
2) Begin to identify who you're designing for and what makes them tick.
• Create a Persona based on who you think this person is you are designing for (once you know more about the actual people you are designing for we'll revise our personas, but this is a good place to start).
- Read: How To Create UX Personas
- Based on the reading, create a user persona for your app
- Keep in mind: Revise the questions as needed to be most relevant and helpful for the design of your specific app.
- Also keep in mind: the "needs and goals" should be related to the goal of what your app does for the people using it.
• Fill out this Empathy Map, based on your persona (who you think you are designing for).
- Again, keep in mind: these answers should be related to the goal and features of your app.
• If you have multiple players (such as Uber, that has both riders and drivers) design multiple Personas.
_____
3) Create hand-drawn storyboards as a way to prototyping the experience of your users using your app.
• Read AC4D Storyboarding PDF. Follow directions. Here's the worksheet too.
• If you're not comfortable drawing, here's a nice little crash course.
• If your work is messy, create a nicer final version on a new piece of paper for presentation – use a Sharpie and/or a fine-point Sharpie so we can see it clearly in-class.
• If you have multiple players (such as Uber, that has both riders and drivers) create storyboards from multiple points-of-view.
• Explore the complete cycle of needing to solve a problem and using the app to solve that problem. Create multiple storyboards if you need to.
_____
4) Revise your app definition statement and bullet-pointed list of key features to reflect your new understanding of what apps already exist, and the people you are designing for.
• Make a list of similar apps and understand what they are doing and how they are similar and different from each other.
_____
2) Begin to identify who you're designing for and what makes them tick.
• Create a Persona based on who you think this person is you are designing for (once you know more about the actual people you are designing for we'll revise our personas, but this is a good place to start).
- Read: How To Create UX Personas
- Based on the reading, create a user persona for your app
- Keep in mind: Revise the questions as needed to be most relevant and helpful for the design of your specific app.
- Also keep in mind: the "needs and goals" should be related to the goal of what your app does for the people using it.
• Fill out this Empathy Map, based on your persona (who you think you are designing for).
- Again, keep in mind: these answers should be related to the goal and features of your app.
• If you have multiple players (such as Uber, that has both riders and drivers) design multiple Personas.
_____
3) Create hand-drawn storyboards as a way to prototyping the experience of your users using your app.
• Read AC4D Storyboarding PDF. Follow directions. Here's the worksheet too.
• If you're not comfortable drawing, here's a nice little crash course.
• If your work is messy, create a nicer final version on a new piece of paper for presentation – use a Sharpie and/or a fine-point Sharpie so we can see it clearly in-class.
• If you have multiple players (such as Uber, that has both riders and drivers) create storyboards from multiple points-of-view.
• Explore the complete cycle of needing to solve a problem and using the app to solve that problem. Create multiple storyboards if you need to.
_____
4) Revise your app definition statement and bullet-pointed list of key features to reflect your new understanding of what apps already exist, and the people you are designing for.
_____
Due February 14th (at start of class)
Bring these things to class and upload pics to your Dropbox folder:
• App name, definition statement with bullet-pointed list of key features
• Personas
• Empathy Map
• Storyboards
Homework: Due February 7th
Read: Read The App Design Handbook pages 1-26. Know the material — read it twice and take notes if you need to.
Research:
• Understand the capabilities of an iPhone and what is possible for an app to do (this is covered in the reading).
• Learn about what kinds of apps are out there already. (See: App Store, App Smart, but don't limit yourself to just these two sources).
• Identify issues that people have may be solved with this technology (Think big and broad, as well as specific and small).
Ideate: What is an app that will make life better for someone? Once you have a grasp on what an app has the ability to do, think up as many ideas for new apps as you can. Go for quantity over quality — you can edit down to your best ideas later.
Prototype: Take your best app idea and develop it:
• Name the app
• Write the App Definition Statement: a short, concise, clear declaration of your app's main purpose and it's intended audience.
• Create a bullet-point list of it’s features (the main things that your app does to enable users to accomplish the app's main purpose)
Also: We will be using the software Sketch and the online software InVision in this class.
• If you plan to buy a $50 student copy of Sketch for your personal computer, order it here: https://www.sketchapp.com/store/edu/
• Using your school email address sign up for unlimited use of InVision here: http://www.invisionapp.com/education-signup. Use this code: 56-73-13-19
• Accept my emailed invitation to your class Dropbox folder
Due February 7 (before the beginning of class)
1. Teach us about an innovative app that is new to you:
• In just a few well-written sentences:
- describe with the existing app does,
- describe how it does it what it does,
- tell us why it is interesting and innovative.
2. Show your ideation process:
• Take pics of your notebook/sketchbook pages and upload to Dropbox. It should show tons of different ideas and how one idea leads to another.
3. Refine your best idea or ideas:
• Name the app. Write the App Definition Statement: Write a short, concise, concrete declaration of your app's main purpose and it's intended audience. Create a bullet point list of it’s features (resources: The App Design Handbook & iOS Human Interface Guidelines).
• Repeat this process if you have multiple ideas you want to explore.
4. Sign up for InVision and order your copy of Sketch if you plan to.
Upload your word document and pictures of your notebook pages to Dropbox. Have a printed copy of your refined best idea (#3) and your existing innovative app description (#2).
Spring 2018 Syllabus
Queens College
ΑRTS-263
App Design
Wednesdays
8:10 am – 12:00 pm
I-Building 213
Professor: Andrew DeRosa
andrewderosa@gmail.com
Office hours:
Wednesday
12:15 – 2:00pm
Klapper 432
Course Description
This course will focus on mobile app design. Students will gain skills designing mobile apps from ideation to high-resolution prototypes ready for development. We will cover user-centered and other research methods, ideation, prototyping, user experience, flowmaps, wireframes, interactive prototypes, visual design, brand creation, and presentation. No coding experience is necessary but basic knowledge of design principles and proficiency in design software is necessary. We will learning new tools (like Sketch, InVision, and AfterEffects) and also drawing, writing and working collaboratively.
Course Requirements
This is a hands-on course, and regular attendance is necessary for participation. You are expected to participate in a positive, constructive manner, and produce the best work you are capable of. You are also expected to spend twice as much time working outside the classroom as you work inside the classroom. This means you need to spend at least seven hours per week on homework. Schedule your time accordingly. It is your responsibility to turn in assignments on time. Students who miss numerous classes or fail to hand in work on-time will find it difficult to pass the course.
Frequently visit arts263-appdesign.blogspot.com for the most up-to-date information regarding this class and what is due.
Materials
Sketchbook/Notebook
Flashdrive (or cloud storage to transport files)
Pens and Pencils
Learn software skills as needed at www.lynda.qc.cuny.edu/
Pre-Requisite
ARTS-214 Web Design
Required Reading
Readings will be provided by instructor throughout the semester
Attendance Policy
Two unexcused absences result in full letter grade drop and four absences result in a failing grade. Late arrival or early departure from class is the equivalent of ½ absence. If you know you are going to be absent or late notify the professor in advance.
Grading
Your final grade will be compiled accordingly:
Assignments and Projects: 65%
Final Project: 25%
Participation: 10%
Assignments and projects will be graded based on technical merit, ingenuity, and your demonstrated ability to understand the material, as outlined in the assignments posted on the class website. The criteria for your grades are given to you with the assignment, so read the assignments carefully.
A Work is of exceptional quality and beyond the stated goals of the class
A- Work is very high quality
B+ Work is high quality and exhibits significantly better than average ability.
B Work is very good and satisfies the goals of the course
B- Good Work
C+ Above average work
C Average work that demonstrates understanding of class material. Satisfactory completion of the course.
C- Passing work but demonstrates below average ability and understanding of course material.
D Below average work that demonstrates poor understanding of class goals and assignments and severe lack of effort. Lowest passing grade in the class.
F Failure, no class credit.
W Withdrawal. If a student officially withdraws from a class during the add/drop period it will be deleted from his/her permanent record.
Class Schedule (partial)
Class 1
Course Overview // Lecture & Discussion: Design Process Overview // Assignment 1 Introduction // Homework: Assignment 1.1
Class 2
In-class Lecture and Workshop (bring all work that is due and supplies to class) // Homework: Assignment 1.2
Class 3
In-class Lecture, Workshop, Critique (bring all work that is due and supplies to class / be prepared to speak about your work in critique) //
Homework: Assignment 1.3
Class schedule subject to change. Please visit www.arts263-appdesign.blogspot.com for the most up-to-date information about this class.
ΑRTS-263
App Design
Wednesdays
8:10 am – 12:00 pm
I-Building 213
Professor: Andrew DeRosa
andrewderosa@gmail.com
Office hours:
Wednesday
12:15 – 2:00pm
Klapper 432
Course Description
This course will focus on mobile app design. Students will gain skills designing mobile apps from ideation to high-resolution prototypes ready for development. We will cover user-centered and other research methods, ideation, prototyping, user experience, flowmaps, wireframes, interactive prototypes, visual design, brand creation, and presentation. No coding experience is necessary but basic knowledge of design principles and proficiency in design software is necessary. We will learning new tools (like Sketch, InVision, and AfterEffects) and also drawing, writing and working collaboratively.
Course Requirements
This is a hands-on course, and regular attendance is necessary for participation. You are expected to participate in a positive, constructive manner, and produce the best work you are capable of. You are also expected to spend twice as much time working outside the classroom as you work inside the classroom. This means you need to spend at least seven hours per week on homework. Schedule your time accordingly. It is your responsibility to turn in assignments on time. Students who miss numerous classes or fail to hand in work on-time will find it difficult to pass the course.
Frequently visit arts263-appdesign.blogspot.com for the most up-to-date information regarding this class and what is due.
Materials
Sketchbook/Notebook
Flashdrive (or cloud storage to transport files)
Pens and Pencils
Learn software skills as needed at www.lynda.qc.cuny.edu/
Pre-Requisite
ARTS-214 Web Design
Required Reading
Readings will be provided by instructor throughout the semester
Attendance Policy
Two unexcused absences result in full letter grade drop and four absences result in a failing grade. Late arrival or early departure from class is the equivalent of ½ absence. If you know you are going to be absent or late notify the professor in advance.
Grading
Your final grade will be compiled accordingly:
Assignments and Projects: 65%
Final Project: 25%
Participation: 10%
Assignments and projects will be graded based on technical merit, ingenuity, and your demonstrated ability to understand the material, as outlined in the assignments posted on the class website. The criteria for your grades are given to you with the assignment, so read the assignments carefully.
A Work is of exceptional quality and beyond the stated goals of the class
A- Work is very high quality
B+ Work is high quality and exhibits significantly better than average ability.
B Work is very good and satisfies the goals of the course
B- Good Work
C+ Above average work
C Average work that demonstrates understanding of class material. Satisfactory completion of the course.
C- Passing work but demonstrates below average ability and understanding of course material.
D Below average work that demonstrates poor understanding of class goals and assignments and severe lack of effort. Lowest passing grade in the class.
F Failure, no class credit.
W Withdrawal. If a student officially withdraws from a class during the add/drop period it will be deleted from his/her permanent record.
Class Schedule (partial)
Class 1
Course Overview // Lecture & Discussion: Design Process Overview // Assignment 1 Introduction // Homework: Assignment 1.1
Class 2
In-class Lecture and Workshop (bring all work that is due and supplies to class) // Homework: Assignment 1.2
Class 3
In-class Lecture, Workshop, Critique (bring all work that is due and supplies to class / be prepared to speak about your work in critique) //
Homework: Assignment 1.3
Class schedule subject to change. Please visit www.arts263-appdesign.blogspot.com for the most up-to-date information about this class.
Subscribe to:
Posts (Atom)