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