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!
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
Subscribe to:
Posts (Atom)