You're about to create your best presentation ever

Get started with Prezi

Material Design Presentation Background

Create your presentation by reusing one of our great community templates.

Material Design

Transcript: In the real world things do not come out of nowhere and disappear to nowhere. Use realistic animations. This will help direct the users attention where you want it. Great Resources for material design. How hard is it to Apply animations? Material Design We challenged ourselves to create a visual language for our users that synthesizes the classic principles of good design with the innovation and possibility of technology and science. Tactile Surface (Quantum paper) https://developer.android.com/training/material/animations.html Use the same good design princeples you would see in a magazine. https://www.sanwebe.com/2015/01/using-custom-animations-for-googles-material-design Print Design (digital Ink) material (paper) properties: https://material.google.com/what-is-material/material-properties.html The Idea Is to Use real world physical concepts in our design So that our UIs are more intuitive to users. the content of a material http://materialdesignblog.com/the-ultimate-guide-to-googles-material-design/ Material is the metaphor -bold colors http://www.vogella.com/tutorials/AndroidAnimation/article.html -consistent branding - use white space Meaningful animations https://material.google.com/components/bottom-navigation.html

Material Design

Transcript: With several standards It grows from the point of Touch Radial Actions Motion in the world is not only beautiful, it build meaning about spatial relationships, functionality & intention of the system Carefully Choreographed motion design with the smooth flow Hence they introduced Floating Action Define a theme that inherits from an older theme (like Holo) in res/values/styles.xml. Define a theme with the same name that inherits from the material theme in res/values-v21/styles.xml. Set this theme as your app's theme in the manifest file. Note: If you do not provide an alternative theme in this manner, your app will not run on earlier versions of Android. Google is the boss Visual Continuity consistent choreography Hierarchical Timings Material Design Your notifications will bridge to Android Wear devices. Denotes what it actually means mean, specific , user centric Epicenter is the Touch Point Every action should mean a reaction The z axis Material Response Rationalized space & a system of motion. Bold, graphic, intentional Motion provides meaning Notifications Design concept is : Some new things Point of origin Epicenter is the TouchPoint Snackbars For Any Questions? Meaningful Transitions eventually you get the list of the same Compatibility

MATERIAL DESIGN

Transcript: Tomlinson (2014, 2003) argues that materials fall into four different categories: 1. INSTRUCTIONAL 2. EXPERIENTIAL 3. EXPLORATORY 4. ELICITATIVE MATERIAL DESIGN EFL METHODOLOGY - NOV 2016 INSTRUCTIONAL MATERIAL Most frequently used materials in EFL classrooms around the world They teach features of the language in explicit ways e.g. a worksheet on the rules of say, the past simple Have predefined objectives which the learner aims to achieve by the end

Material Design

Transcript: The Design & Development of Online Course Materials The design and development of online course materials is a potential alternative to a curriculum proposal It guarantees people's access to ICT (TIC) and generates opportunities for them to benefit from it when we talk about design, we talk about instruction Instruction enhances learning, retention and learning transfer (Gagne & Briggs, 1974) instructional Design Useful approach to course design Analysis starts with what was found in the analysis stage looks for solutions in terms of arrangement of resources, strategies and assessment procedures that best suit instruction has two main characteristics systematic specific DEVELOPMENT IMPLEMENTATION EVALUATION Summative Formative AGENTS INVOLVED There are four basic conditions for effective integration of technology into materials design: Technical assistance Planning time Staff development Technology access ROLES FOR THE PARTICIPANTS (HERNANDEZ, 2005) Tutor’s skills 1. Clear and steady communication 2. Information Technology (IT) and content area 3. Competence 4. Management 5. Vision 6. Open-minded attitude 7. Leadership STUDENTS’ ROLE Risk-takers and constructive members in a learning community FIVE MAJOR ONLINE ACTION CATEGORIES 1. Organizational 2. Technical 3. Procedural 4. Interactional 5. Transactional INTERACTION IN ONLINE LEARNING ENVIRONMENTS *Tutors need to employ practices that focus on fulfilling their learner’s needs. *Tutors must smooth the progress of learners through the incorporation of highly interactive practices that transfer well from synchronous to asynchronous learning scenarios. *Learners must make a profound commitment in their plans to accomplish learning in a non-traditional but cooperative manner. CONTENT Coherent to Curriculum Subject to a continuous evaluation stage. STRUCTURE 1. Information 2. Classification of the material 3. Navigation............ Requires certain stages throughout its implementation and the designer decides the approach e.g. behaviorist, cognitive or constructivist it's when we put the planning into operation this stage requires a high degree of involvement by the participants it has three circumstances to make this stage efficient deals with the creation of tools and products required to meet the objectives in this stage designers elaborate an action plan composed of specific procedures to get the plan done It's a crucial planning stage which identifies the target audience and its characteristics Designers have to think of: a. types of learners b. learning styles c. intelligences a. determining a previous training procedure for preparing both teachers and learners DESIGNING MATERIALS we talk about models Tutor’s skills 1. Clear and steady communication 2. Information Technology (IT) and content area 3. Competence 4. Management 5. Vision 6. Open-minded attitude 7. Leadership Analysis Design Development Implementation Evaluation Liliana Cuesta (2010) c. setting up all the conditions (tools, spaces, personnel THE ADDIE MODEL it is done once development and implementation phases are completed. this evaluation looks for an efficient implementation stage which matches the instructional aims Because it needs to establish a logical method to identify, develop and evaluate strategies to achieve an instructional objective THE END-USERS STUDENTS’ ROLE Risk-takers and constructive members in a learning community. DESIGN because each constituent must be carefully set up in order to attend specific details identifies weak points in the early stages, evaluate them and design strategies to surpass obstacles Director An academic team (E-learning specialist, a pedagogic coordinator, tutors) A technical team (A technical coordinator, Platform Administrator, Campus administrator, Graphic designer,) b. assessing learners we teachers need to implement different educational strategies on virtual environment platforms in order to improve our teaching practices this model (ADDIE) has a formative and summative evaluation the evaluation determines if there was success in planning/using the products so that we can plan further improvements ADDIE model

Material Design

Transcript: To learn the correct use of the verbs in the simple present tense According to Nunan (1988): Effective learning frequently involves learners in explorations of new linguistic terrain, and interaction can often be the medium for providing the "stretch" that is necessary for ongoing language development. Materials designers should ensure their materials allow sufficient scope for their learners to be "stretched" at least some of the time, to build on from what is provided to generate new language, and to progress beyond surface fluency to proficiency and confidence. This group consists of 10 students between the ages of 30 and 35 who study at “Fundacion Social Alianza”. They are basic level learners studying English I. They have two weekly hours of English class and the subject does not have any academic credit, even though it is compulsory course. The language level is mixed. (cc) photo by Metro Centric on Flickr The teacher is going to divide the course in two groups. Affective Needs . The winner is the one who has more pairs. Budapest San Francisco Procedures ACTIVITY THEORY OBJECTIVE Guidelines for Designing Effective English Language Teaching Material. PDF given by Teacher Diana Sanchez Stockholm Authentic Materials (cc) photo by jimmyharris on Flickr (cc) photo by Franco Folini on Flickr Double click to crop it if necessary Linguistic Needs All of them consider English is useful for academic purposes due to most of them are teachers, and also for their jobs. All learners enjoy group work and most of them are visual. They pay attention and work in class actively. Learners’ Profile Pictures taken from: https://www.google.com.co/ So, the students must choose two numbers, in order to get the correct pair, one with the spelling of the verb and the other with the picture of it. Age and Language Level REFENCES Some general needs of the group are related to listening, speaking, writing and reading skills. Learners need to get involved in drilling and modeling activities so they build self-confidence and make progress on achieving their communicative competence. Place your own picture behind this frame! (cc) photo by Metro Centric on Flickr

Material Design

Transcript: Material Design Image by Tom Mooring Material design is a comprehensive guide for visual, motion, and interaction design across platforms and devices. Principles: Material is the metaphor Bold, graphic, intentional Motion provides meaning What is material? Material Design?

Material Design

Transcript: Material Design https://material.io/ ABOUT MATERIAL DESIGN ABOUT MATERIAL DESIGN COLOR STYLE COLOR STYLE Color in material design is inspired by bold hues juxtaposed with muted environments, deep shadows, and bright highlights. https://material.io/guidelines/style/color.html This color scheme contains a primary color, plus darker and lighter versions of that color. Do Don't ICONS ICONS • Icon Product • Icon System Material icons use geometric shapes to visually represent core ideas, capabilities, or topics. System icons Do Don't Don't Do LAYOUT LAYOUT Structure Avoid slicing up the interface into too many regions which can cause L shapes. Instead, use whitespace to delineate secondary areas. Do Don't RESPONSIVE RESPONSIVE Responsive layouts in material design adapt to any possible screen size. This UI guidance includes a flexible grid that ensures consistency across layouts, breakpoint details about how content reflows on different screens, and a description of how an app can scale from small to extra-large screens. Breakpoints Breakpoints For optimal user experience, material design user interfaces should adapt layouts for the following breakpoint widths: 480, 600, 840, 960, 1280, 1440, and 1600dp. Example Example Transform Transform A UI element may transform from one format to another. A UI may reflow into available space. Reflow Do/Don't Do/Don't Font Font Do Don't UI GOOD DESIGN GOOD DESIGN BAD DESIGN Good Design Good Design Bad Design Bad Design

MATERIAL DESIGN

Transcript: Bottom sheets are especially suitable when three or more actions are displayed to the user and when the actions do not require descriptive explanation. If there are two or fewer actions or detailed description is required, consider using a menu or dialog instead. Perceiving an object's tangible form helps us understand how to manipulate it. Observing an object's motion tells us whether it is light or heavy, flexible or rigid, small or large. Motion in the world of material design is not only beautiful, it builds meaning about the spatial relationships, functionality, and intention of the system. THANK YOU ! Material is the metaphor The new CardView widget lets you display important pieces of information inside cards that have a consistent look and feel. Animation RecyclerView is a more advanced and flexible version of ListView. Bottom Sheets CardView extends the FrameLayout class and lets you show information inside cards that have a consistent look on any app. CardView widgets can have shadows and rounded corners. Responsive interaction builds trust with the user and engages them. When a user interacts with an app and beautiful yet perfectly logical things happen, the user feels satisfied—even delighted. It is thoughtful and purposeful, not random, and can be gently whimsical but never distracting. RecyclerView CardView Principles Typography Motion provides meaning Material Theme Structure New Widgets Material Design Imagery A system icon, or UI icon, symbolizes a command, file, device, or directory. System icons are also used to represent common actions like trash, print, and save. The design of system icons is simple, modern, friendly, and sometimes quirky. Buttons Color Metrics and Keylines To create apps with material design: Take a look at the material design specification. Apply the material theme to your app. Define additional styles to customize the material theme. Create your layouts following material design guidelines. Specify the elevation of your views to cast appropriate shadows. Use the new widgets for complex views, such as lists and cards. Use the new APIs to customize the animations in your app. A button consists of text and/or an image that clearly communicates what action will occur when the user touches it. Here's how to specify properties of CardView: To set the corner radius in your layouts, use the card_view:cardCornerRadius attribute. To set the corner radius in your code, use the CardView.setRadius method. To set the background color of a card, use the card_view:cardBackgroundColor attribute. Icons The new RecyclerView widget is a more advanced version of ListView that provides performance improvements for dynamic views and is easier to use. The material theme is defined as: @android:style/Theme.Material (dark version) @android:style/Theme.Material.Light (light version) @android:style/Theme.Material.Light.DarkActionBar Layout Mass and Weight MATERIAL DESIGN Responsive Interaction Meaningful Transitions The layout is designed to scale across different screen sizes and will help facilitate UI development and ultimately help you make scalable apps. The layout guidelines also encourage apps to have a consistent look and feel by using the same visual elements, structural grids, and general spacing rules across platforms and screen sizes. Structural and visual consistency creates an environment for the user that is recognizable across products, which facilitates usage by providing users with a high level of familiarity and comfort. In material design, imagery—whether illustration or photography—is constructed but never contrived, magical but never overproduced. The style is optimistic, delightful and honest. Materiality, texture, depth, unexpected use of color, and appreciation of context are emphasized. The principles of imagery support the goal of purposeful, thoughtful, beautiful UIs. Delightful Details Color is inspired by bold color statements juxtaposed with muted environments, taking cues from contemporary architecture, road signs, pavement marking tape, and sports courts. Emphasize bold shadows and highlights. The Android L Developer Preview includes support for material design apps. Material design is a comprehensive guide for visual, motion, and interaction design across platforms and devices. The Android L Developer Preview provides the following elements for you to build material design apps: A new theme New widgets for complex views New APIs for custom shadows and animations Bold, Graphic, Intentional

Explore our templates for more presentation inspiration

World Map - Atlas

Description: For program proposals, grant requests, or any other nonprofit or education presentation, this beautiful world map-inspired creative Prezi template will engage and captivate your audience. All Prezi education templates and Prezi nonprofit templates are easy to customize.

Grant Proposal Presentation for NonProfit & Education | Prezi

Description: For grant requests, program proposals, or any other kind of nonprofit or education presentation, this graphite drawing-inspired creative Prezi template is the way to generate interest. Like all Prezi education templates and Prezi nonprofit templates, it’s easy to customize.

Best Executive Presentation Template to Customize | Prezi

Description: Show the big picture, zoom in on details, and explain clearly how it all relates with this Prezi executive brief or Prezi nonprofit template. The lively image and bold colors make it easy to create compelling, engaging executive brief or nonprofit presentations.

Top Lesson Plan Template for Teachers | Prezi

Description: This customizable, colorful Prezi presentation template makes creating and sharing lesson plans simple, clear, and engaging. The friendly, board game-inspired theme provides a clear path for organizing subjects, assignments, exams, and more.

Now you can make any subject more engaging and memorable

Get started with Prezi