DOCSLIB.ORG

Material Design a Discussion About the New Visual Language Developed by Google

Total Page：16

File Type：pdf, Size：1020Kb

Download full-text PDF Read full-text
Material Design a Discussion About the New Visual Language Developed by Google Material Design A discussion about the new visual language developed by Google. Presented by : Sugisha Sukumaran What is Material Design? It is a design language developed by Google. It is a design with increased use of grid-based layouts, responsive animations and transitions, padding, and depth effects such as lighting and shadows. A comprehensive guide for visual, motion, and interaction design across platforms and devices. It is grounded in tactile reality, inspired by the study of paper and ink. It is a skeuomorphed flat design. Used extensively in Android 5.0 “Lollipop”. © RapidValue Solutions Material design as a skeuomorphed flat design Material design is skeuomorphic in that it is an attempt to make design more realistic in how it portrays elements, using layers and animation in a way that makes sense outside of the browser. Skeuomorphism is adopting the style of physical incantation of an object for its digital display. Material design dictates a single physical incantation for the UI- everything should feel like paper. Figure shows the paper model developed by Google to demonstrate material design. © RapidValue Solutions Evolution of Material Design When google overhauled the Android design philosophy in Ice Cream Sandwich, they introduced a whole theme called holo. The holo theme hasn’t been much of a design highlight after the release of Android 4.4 Kitkat. Instead a more brighter and minimalistic design status was showcased. Matias Duarte Matias Duarte introduces a new design language called (The man behind material design) material design alongside the Android L release. © RapidValue Solutions Material UI © RapidValue Solutions Material Theme Material Theme is a user interface style that determines the look and feel of views and activities in Android 5.0 (Lollipop) Material Dark Material Light Material Dark + Light © RapidValue Solutions Colors Bold colors are the main focus in Material Design. The color palette contains 19 hues 16 colors have accent variants 256 colors including black and white © RapidValue Solutions UI Color Application 1. Choose your palette Limit your selection of colors by choosing three color hues from the primary palette and one accent color. Example of a primary color palette Example of a secondary color palette © RapidValue Solutions 2. Use alpha values for grey text, icons and dividers Standard alpha value for text on a white background is 87% (#000000), secondary text is 54%. © RapidValue Solutions 3. Toolbars and status bars Toolbars and larger color blocks should use the primary 500 color. Status bar should be the darker 700 tint of the primary color. © RapidValue Solutions 4. Accent Color Use the accent color for your primary action button and components like switches or sliders. Don’t use the accent color for body text colors. Don’t use the accent color for app bars or larger areas of color. If your accent color is too light or dark for the background color, the general fallback rule is to choose a darker or lighter tint of the accent color. © RapidValue Solutions Typography To support all languages worldwide, Google recommends using Roboto for languages that use the Latin, Greek, and Cyrillic scripts Noto for all other languages. Hinted fonts Hints are the instructions embedded in a font on how to modify (distort) a glyph to look better on low-resolution displays. Use the unhinted versions on Android and on Mac OS X. Use hinted fonts on Chrome OS, Windows, and Linux. © RapidValue Solutions Typography Typographic scale and basic styles The basic set of styles are based on a typographic scale of 12, 14, 16, 20 and 34. © RapidValue Solutions Typography Basic colors and color contrast Text should maintain a minimum contrast ratio of 4:5:1. Characters and line length You should have around 60 characters per line if you want a good reading experience. © RapidValue Solutions Imagery A powerful tool to help you communicate and differentiate your product. Some best practices to incorporate imagery are: Both illustration and photography can live within the same product. Choose images that express personal relevance, information and delight. Stay away from stock Have a point of focus Build narratives Make sure your images are appropriately sized for their containers and cross platforms. © RapidValue Solutions Iconography To create an icon for different densities, you should follow the 2:3:4:6:8 scaling ratio between the five primary densities (medium, high, x-high, xx-high, and xxx-high respectively). Some best practices for creating an icon are: Launcher icons on a mobile device must be 48x48 dp. Launcher icons for display on Google Play must be 512x512 pixels. Action bar icons for phones should be 32x32 dp. Small icons should be 16x16dp. Notification icons must be 24x24 dp. © RapidValue Solutions Layout Paper craft In material design, every pixel drawn by an application resides on a sheet of paper. Paper has a flat background color and can be sized to serve a variety of purposes. A typical layout is composed of multiple sheets of paper, arranging papers in two ways - Seams and Steps Example of a seam Example of a step © RapidValue Solutions Paper toolbars A toolbar is a strip of paper used to present actions. The actions cluster on either side of the toolbar. Navigation actions, such as a drawer menu icon or an up arrow, appear at the left, while contextual actions appear at the right. Toolbars have a standard height, 56 dp on mobile and 64 dp on desktop, but they can be taller. © RapidValue Solutions Paper toolbars Do’s Don’ts Never allow a sheet of paper to be split by another one. © RapidValue Solutions Floating actions A floating action is a circular sheet of paper separate from a toolbar. A floating action can straddle a step if it relates to the content of the paper creating that step. A floating action can straddle a seam if it relates to the content of both of the papers creating that seam. © RapidValue Solutions Metrics & Keylines All components align to an 8dp square baseline grid. Type aligns to a 4dp baseline grid. Iconography in toolbars align to a 4dp square baseline grid. This applies to mobile, tablet, and desktop. © RapidValue Solutions Keylines and spacing-Mobile Vertical keyline at 16dp from the left and right edges. Content associated with an icon or avatar aligns 72dp from the left edge. 1 - 24dp 2 - 56dp 3 - 48dp 4 - 72dp © RapidValue Solutions Incremental Keylines An incremental keyline defines an increment, like the height of the action bar, and uses a multiple of that increment to determine the size and position of other elements in the app. © RapidValue Solutions Structure Put content forward. Anchor navigation and actions. Be opinionated about functionality. Focus on a single view with embedded navigation. Use tabs to switch between a small number of equally important views. Manage more complex structure through a left navigation drawer. © RapidValue Solutions Mobile Structure This structure includes an app bar and a floating action button. If you have any additional functionality or action overflow, you can add a bottom bar. This is optional and side nav overlays all other structural elements. © RapidValue Solutions Tablet Structure This structure includes an app bar and a floating action button. Bottom bar is optional and side nav overlays all other structural elements. Right nav can be accessed temporarily or pinned for permanent display. © RapidValue Solutions Desktop Structure This structure includes an app bar and a floating action button. Side navigation menus accessed temporarily or pinned for permanent display. Side navs and content canvas can have secondary toolbar. © RapidValue Solutions App bar The app bar, formerly known as the action bar in Android, is a special kind of toolbar that’s used for branding, navigation, search, and actions. Metrics Mobile Landscape: 48dp Mobile Portrait: 56dp Tablet/Desktop: 64dp © RapidValue Solutions System bars – Status bar/window bar On Android, the status bar contains notification icons and system icons. On Chrome, the top bar contains the window controls: minimize, full screen, and close. The color of the status or window bar is a darker tone of the app bar color. It can also reference an element in the layout or it can be translucent. Metrics Android status bar height: 24dp Android status bar Chrome window height: 32dp Chrome window bar © RapidValue Solutions System bars-Android navigation bar/window bar It contains the device navigation controls: Back, Home, and Recents. It also displays a menu for apps written for Android 2.3 or earlier. Metrics Height: 48dp © RapidValue Solutions Side Nav The left and right nav bars can be pinned for permanent display or they can float temporarily as overlays. The content in the left nav is ideally navigation- or identity-based. The content in the right nav should be secondary to the main content on a page. Metrics Mobile : Width = screen width - app bar height Desktop: 400dp © RapidValue Solutions Components Bottom sheets A sheet of paper that slides up from the bottom edge of the screen. It is suitable when three or more actions are displayed to the user and when the actions do not require a description. Bottom Sheets - Spec Text: Roboto Regular 16sp, #000 87% Title (optional): Roboto Regular 16sp, #000 54% Default bottom sheet background fill: #FFF Overlay shield fill: #000 20% © RapidValue Solutions Buttons A button consists of text and/or an image that clearly communicates what action will occur when the user touches it. There are three types of main buttons: Flat button: a button made of ink that emits ink reactions on press but does not lift. Raised button: a typically rectangular button made of paper that lifts and emits ink reactions on press. Floating action button: a circular button made of paper that lifts and emits ink reactions on press.
Load more

Recommended publications
  • Best Practices for Developing for Chromebook Tablets
    1 Best practices for developing for Chromebook tablets The goal of this guide is to share some best practices for developing Android and web apps for Chromebook tablets. With the help of educators and developers around the globe, we’ve learned some tips and tricks along the way and want to share those with you and your team. Chromebook tablets come in many different shapes and sizes and run all sorts of software—from traditional websites to extensions, progressive web apps, and Android apps. In many ways, Chromebook tablets operate the same as a traditional Chromebook. The operating system is largely the same. They’re managed the same and run the same apps. Educators tell us that the smaller and lighter form of the tablet and no built-in mouse or keyboard changes how they and students use the device. For example: ● Many schools use tablets in early elementary, special education, and media classes where entering text, typing, and testing are less prevalent. ● Tablets are more conducive to handwriting notes, reading, filming, photography, and touchscreen apps than traditional laptops. ● Some schools prefer to use Android apps with tablets (because they’re designed for touchscreens) instead of using websites (usually designed for a mouse). This guide aims to help you adapt your apps to support these differences. Best practice 1: Google Drive integration One of the things that has made Chromebooks and Chromebook tablets so successful in schools over the years is that students can sign in to any device and access their files anywhere, anytime—such is the nature of the web! Android apps tend to work a little differently because they run natively (offline).
    [Show full text]
  • Android User Profile Layout Example
    Android User Profile Layout Example Is Kelwin unloving when Rudd uprises angrily? Type-high and effuse Ari scheme his rustle decried unsaddles dogmatically. Provisory Jerrold praised genotypically. Mobile applications evolve with user's needs offering new functionality still. Portfolio App User Profile UIUX Design by Anjan Rhudra Paul Modern Mobile App. Free material Design Profile designs for android with source code. Developing a mobile app against user data facilitates the design thinking process. The design details is for an instance and its own android user profile layout example is their natural boundaries and colors. See more ideas about user profile profile interface design. Top 35 Free Mobile UI Kits for App Designers 2020 Colorlib. Built with Android Studio the template's notable features include these beautiful gallery and user profiles Users can comment like pickle and send. Finally the profile screen design should be oriented to the necessary audience remember the. Step 1 Add the mixpanel-android library probably a gradle dependency. 9 Top App Design Trends for 2021 99Designs. The user would be notified via Toast if the profile does matter exist. The layout 3 add event handling to handle user input was the profile 4 save the profile as. Designing complex UI using Android ConstraintLayout. Easy for edit high-quality design Build Dynamic Android Apps From and Learn Android User Interface Design Are these any requirements or. Android Material Design profile page to Overflow. In this collection we'll be showcasing creative examples of User Profile designs. Profile Screen UI Design Android Unique Andro Code. IPhone users are proven to okay more satisfied and peninsula in using their devices And sophisticated data translates into profits most find the mobile.
    [Show full text]
  • Lexia Core5 Tech Reqs
    EXPANDED Lexia Customer Support SYSTEM 21 LEVELS [email protected] US: 800-507-2772; Outside US: 978-405-6231 System Requirements Web Version: www.lexiacore5.com For all browsers and platforms REQUIREMENTS Operating Systems and Browsers • Headsets (recommended) 1024x768 screen resolution (recommended) MacOS • • 10.12+ • 4 GB RAM (recommended), 2 GB (minimum) • Chrome 64+, Safari 10+, Firefox 62+ • Javascript must be enabled Persistent Internet connection (required) Windows • • Windows 7+ • Bandwidth: A typical student consumes 15MB of • Chrome 64+, Edge 44+, Firefox 62+ bandwidth per 5-min block (average rate ~0.4 Mbps). A classroom of 25 students consumes 750MB of band- Google Chrome OS width per 30-min session (average rate ~3.33 Mbps). 74+ • Bandwidth need is typically higher just after students • Chromebook, Chromebook Touchscreen log in and decreases after a few minutes of use. A 6MB download occurs upon logging into the Core5 product. iPad Version • iPad 4+, iPad Mini 3+, iPad Air+, iPad Pro (iOS 10+) • 1.9 GB storage space (1.65 GB for initial download) • Persistent Internet connection (minimal bandwidth is used) myLexia.com (the educator website) myLexia for iOS Chrome 64+, Edge 44+, Firefox 62+, Safari 11+ • iPhone, and iPod Touch with iOS 11.0+ • Apple Watch with watchOS 4.0+ Whitelisting, Firewall, Proxies, Content Filtering—Allow Access https://*.mylexia.com http://www.lexiacore5.com .salesforceliveagent.com (required only to use myLexia Support Chat) Note: Thin clients, Citrix, Terminal Services/Remote Desktop, virtual machines, and other remote access or PC-sharing systems are not supported. P-C5-21-SYS-0919 © 2019 Lexia Learning, a Rosetta Stone Company.
    [Show full text]
  • Mobile Application
    Mobile Application What makes a good mobile app, and how can I create my own? Mobile Application What makes a good mobile app, and how can I create my own? Mobile applications are quickly replacing websites as a common way that learning designers now reach their learners. Mobile apps benefit from the same opportunities provided by websites but also allow the Visuals in Learning Design 1 learning designer to utilize various smartphone capabilities that are not standard on desktop and laptop computers, such as location services, gyroscopes, cameras, facial recognition, augmented reality, and so forth. This means that learning designers can approach apps similar to how they approach websites, but also that apps may have many potential opportunities that are not available with websites alone. In terms of ARC, a mobile application's emphasis will vary greatly by its purpose, but at a basic level, apps may be thought of as being similar to websites in that their primary function is to appeal to the learner and to get them to stay on the app to learn. This means that apps should strive to be clear, sleek, and inviting and should also make it clear to the learner where they are and where they need to go to keep learning Visuals in Learning Design 2 For this project, you will create a visual mockup for an iOS/Android app of your choice for a smartphone or tablet. You are encouraged to use existing User Interface Design Kits (e.g., iOS Design Kit, Google Material Design, Bootstrap, jQuery UI Mobile, Publica) along with Adobe Illustrator to complete this project.
    [Show full text]
  • PDF Download Android User Interface Design
    ANDROID USER INTERFACE DESIGN : IMPLEMENTING MATERIAL DESIGN FOR DEVELOPERS PDF, EPUB, EBOOK Ian Clifton | 448 pages | 10 Dec 2015 | Pearson Education (US) | 9780134191409 | English | Boston, United States Android User Interface Design : Implementing Material Design for Developers PDF Book Paging 3. Unlike typical ease-in-ease-out transitions, in Material Design, objects tend to start quickly and ease into their final position. The online book is very nice with meaningfulcontent. With Material Design, Google introduced its most radical visual changes ever, and made effective design even more essential. Head MD [T8G. Material utilises classic principles from print design to create clean, simple layouts that put your content front and center. Please try again. It is great. In this article 1. The first best-practice guide to superb Android smartphone and tablet app design. You can use the CardView widget to create cards with a default elevation. Communicate with wireless devices. It will bebetter if you read the book alone. See also : Material Design Principles. Ian's love of technology, art, and user experience has led him along a variety of paths. Adaptive vs. Autofill framework. Device management. Work fast with our official CLI. Additional Product Features Dewey Edition. Resources Free Wallpapers. When a chapter covers multiple apps, the individual apps are in their own subdirectories within the chapter directory. Multiple APK support. For elements entering and exiting the screen which should do so at peak velocity , check out the linear-out-slow-in and fast-out-linear-in interpolators respectively. Web-based content. Clifton , Trade Paperback Be the first to write a review.
    [Show full text]
  • [email protected] 952 334 9130
    https://joshuaworley.com [email protected] 952 334 9130 Frontend Developer, Digital Designer, and Digital Producer with 6 years of professional experience in the US and APAC. For examples of my work please see my public portfolio: https://joshuaworley.com EXPERIENCE Worley Digital - Freelance Business Offering Frontend Development, Digital Design, and Digital Marketing Services Global DIGITAL DESIGNER, FRONTEND DEVELOPER, DIGITAL PRODUCER, CONSULTANT Apr 2020 - Present • Client: Celebideo (Dec 2020 - Present) Cameo-like Startup in Japan o App & Prototype Design (Figma), Frontend Development (React Native) • Client: Mila Clarity (Nov 2020 – Dec 2020) https://milaclarity.com/ o Shopify updates (Liquid, JavaScript), Web Design (Figma) • Client: Namonai (August 2020 – Present) https://namonai.jp o Brand, Website, App Design, Frontend Development (JavaScript, nanohtml) o Case Study: https://joshuaworley.com/projects/namonai • Client: Telcoin (October 2020 - Present) https://telco.in o Website Updates (HTML, CSS, JavaScript), v3 Cryptocurrency Wallet and Remittance App Design (Figma) • Client: SnapHabit o Brand, UXUI Design (Figma) o Case Study: https://joshuaworley.com/projects/snaphabit • Client: A Lighthouse Called Kanata (May 2020 – July 2020) https://lighthouse-kanata.com o Rebranding, Site Migration, Webapp Expansion (CoffeeScript, Jade), SEO • Client: Sedona (April 2020) https://sedo.na o Website Design (Sketch) Frontend Coding (React.js) o Case Study: https://joshuaworley.com/projects/sedona Ptmind, Inc. - Tokyo/Beijing-based B2B Data Analytics Software Startup Shibuya, Tokyo FRONTEND DEVELOPER, UXUI DESIGNER, GROWTH MANAGER Apr 2019 – Apr 2020 • Project: Designed and developed the Ptengine flagship product’s SPA webapp renewal (Vue.js, Nuxt.js, Wordpress CMS) https://ptengine.jp • Created all design and marketing materials for the Japanese office, including a branded design assets library, illustrations, wireframes, user flows, personas, blog images, flyers, web components, web portals, splash pages, digital invitations, and business cards.
    [Show full text]
  • Chromebooks + Chromecast in the Classroom
    CHROMEBOOKS + CHROMECAST IN THE CLASSROOM As more Chromebook™ models enter the market, it’s becoming harder for schools to choose the best one to meet their needs. Which one has the power to run the latest online educational content such as Kno™ online textbooks and BioDigital Human™? Which one offers the best visual experience when using Chromecast™ in the classroom? Each model delivers a different experience for teachers teaching and students learning in the classroom. Here in the Principled Technologies labs, we put on our teacher hats and looked at an Intel® Core™ i3 processor-powered Chromebook and an ARM® processor-based Chromebook. We performed tasks a science teacher might include while giving a lesson in the classroom, such as using a Kno online textbook and looking at different 3D anatomy models in BioDigital Human. We measured aspects of user experience that would matter to students and teachers—time to complete tasks and frame rate. Which Chromebook is the better choice for teaching in the classroom? We found that the Intel Core i3 processor-powered Chromebook outperformed the ARM processor-based Chromebook across the board, delivering up to 250.0 percent more frames per second than the ARM processor-based Chromebook when using BioDigital Human with Chromecast. The Intel Core i3 processor-powered Chromebook also took just over half the time to complete a series of tasks, including opening BioDigital Human over 22 seconds faster than the ARM processor-based Chromebook. OCTOBER 2014 A PRINCIPLED TECHNOLOGIES TEST REPORT Commissioned by Intel Corp. WHICH PROCESSOR IS IN YOUR CHROMEBOOK? There are many different Chromebooks on the market.
    [Show full text]
  • How to Setup Your New Chromebook
    How to setup your new Chromebook Turn on Chromebook, allow it to power up. This is the first screen. Click “ Let’s Go” Select your WIFI network, enter your WIFI password (If requested), Select “ Next” 2 Read thru Google Chrome OS Terms (Choose the System security setting, yes or no) then Click “ Accept and Continue” The Chromebook will check for latest updates 3 Sign in with your Gmail Account and select “Next” or Click “More Options” and select “Create Account” SKIP if you have entered a Gmail Account already Type in your first and last name than select “Next” 4 SKIP if you have entered a Gmail Account already Enter birthday and the gender you identify with then select “Next” SKIP if you have entered a Gmail Account already Chose one of the three (3) options to create your new Gmail address then select “Next” 5 SKIP if you have entered a Gmail Account already Create an unique password than select “Next” SKIP if you have entered a Gmail Account already Add a phone number, if you choose. Scroll to bottom of the page 6 SKIP if you have entered a Gmail Account already Select one of the three: “More Options”, “Skip” or “Yes I’m in” SKIP if you have entered a Gmail Account already Review the information you entered and select “Next” 7 Allow Chromebook to finish creating your new account. Select Google options and select “Accept and continue” 8 Read thru Google Play apps and services and select “More” Read thru Google Play apps and services and select “Accept” 9 If you entered a previous Gmail account, it will as you if you want to install any associated apps, otherwise it will say The list of Apps cannot be loaded.
    [Show full text]
  • Hybrid Mobile Application for Project Planning System
    Master Thesis Czech Technical University in Prague Faculty of Electrical Engineering F3 Department of Computers Hybrid mobile application for project planning system Bc. Jan Teplý Supervisor: Mgr. Miroslav Blaško May 2017 ii Acknowledgements Declaration I would like to thank Mgr. Miroslav I declare that this work is all my own work Blaško and Ing. Jindřich Hašek for guid- and I have cited all sources I have used in ance in work on this thesis. And finally the bibliography. I would like to thank the CTU in Prague Prague, May 25, 2017 for being a very good alma mater. Prohlašuji, že jsem předloženou práci vypracoval samostatně, a že jsem uvedl veškerou použitou literaturu. V Praze, 25. května 2017 ..................................................... Bc. Jan Teplý iii Abstract Abstrakt Plantac is the proprietary web application Plantac je proprietární webová aplikace for project time and cost planning. Cur- pro plánování času a nákladů projektů na rently written on Java EE framework with platformě Java EE a grafickým uživatel- ZK framework for graphical user interface. ským rozhraním v frameworku ZK. Cí- The goal of this thesis is to explore the lem práce je prozkoumat možnosti pro vy- possibility of the creation of alternative tvoření alternativního multiplatformního multi-platform user interface, that enables uživatelského rozhraní, které zpřístupní chosen functions of Plantac on mobile de- vybrané funkce systému Plantac na mobil- vices even without internet connection. ních zařízeních i bez přístupu k internetu. Keywords: web, mobile, hybrid, offline, Klíčová slova: web, mobil, hybridní, Angular, Progressive apps, Cordova offline, Angular, Progressive apps, Cordova Supervisor: Mgr. Miroslav Blaško Překlad názvu: Hybridní mobilní aplikace pro systém plánování projektů iv Contents 1 Introduction 1 4.2.9 Development .
    [Show full text]
  • Chrome OS Based Devices in the Enterprise
    White Paper Client Virtualization Enterprise Mobility Chrome OS based devices in the Enterprise 2015 Edition Executive Summary According to IDC, 4.6 million Chromebooks were sold in 2014, roughly twice as many as in 2013. And Chromebook sales are expected to reach 14.4 million units by 2017 according to Gartner¹. Most of the Chromebooks are currently sold into the U.S. education sector. The adoption of Chrome OS devices in the Enterprise is by far slower. This might be related to concerns regarding application availability, manageability & security and the complexity of adopting yet another platform to the IT infrastructure. There may also exist reservations in regard to hosting business data in the public cloud. But Chrome OS devices may also be used for accessing non-public cloud based applications & data and even legacy apps. The latter has been recently enabled by joint ventures of Google & VMware and Citrix who announced Chrome OS support for their application and desktop virtualization technologies. Having the ability to access Windows applications from a Chrome OS Client significantly increases the versatility of those devices. Business customers now basically have three ways of utilizing Chrome OS (see also table 1). Google Chrome Apps for Business, Android Apps and Web Apps This is the “classical” Google solution Chrome OS clients can run three for business. Utilizing Google Apps for different kinds of applications: Web Business and other Web applications, apps, which run in the Chrome web like salesforce.com for example browser and typically only work when provides businesses with a cloud connected to the Internet, Chrome based working environment that suits apps, which are stored on the device many companies’ IT requirements and and can often be used in offline mode scales from a few users up to 10.000’s and more recently also Android Apps.
    [Show full text]
  • Enabling TLS 1.2 in Major Browsers
    Enabling TLS 1.2 in Major Browsers Table of Contents Updating Microsoft Internet Explorer ...................................................................................................................................................... 2 Enabling or Disabling TLS Protocols in Internet Explorer .................................................................................................................... 2 Updating Mozilla Firefox ........................................................................................................................................................................... 3 Enabling or Disabling TLS Protocols in Firefox .................................................................................................................................... 4 Updating Google Chrome ......................................................................................................................................................................... 5 Enabling or Disabling TLS Protocols in Chrome .................................................................................................................................. 5 Updating Apple Safari ............................................................................................................................................................................... 7 Enabling or Disabling TLS Protocols in Apple Safari ............................................................................................................................ 7 Appendix
    [Show full text]
  • Designing English Listening Materials Through Youtube Video Editing Indonesian Journal of English Language Teaching and Applied Linguistics Vol
    Designing English Listening Materials through YouTube Video Editing Indonesian Journal of English Language Teaching and Applied Linguistics Vol. 4(2), 2020 www.ijeltal.org e-ISSN: 2527-8746; p-ISSN: 2527-6492 Designing English Listening Materials through YouTube Video Editing: Training for English Teachers of Islamic Junior High Schools, Parepare, South Sulawesi Zulfah Fakhruddin IAIN Parepare, Indonesia e-mail: [email protected] Usman IAIN Parepare, Indonesia e-mail:[email protected] Rahmawati IAIN Parepare, Indonesia e-mail: [email protected] Sulvinajayanti IAIN Parepare, Indonesia e-mail: [email protected] Abstract: This study was conducted to help English teachers in designing English listening materials in form of audio and textbook through YouTube video editing. 18 English teachers of 10 Islamic junior high schools in Parepare were trained to write English listening materials in form of textbook and to edit video (download ,import, cut, merge, and export video) in form of audio.150 students were observed and tested to evaluate teachers’ products. Training materials consist of: (1) searching and download video through YouTube, (2) editing video that includes import, cut, merge, and export video, and (3) writing worksheet that contains phoneme discrimination dan listening comprehension exercise in form of multiple choice,true false,and completion. Training activities include: (1) explanation, (2) practice, (3) grouping, (4) assignment/design, and (5) evaluation and revision. After following training, teachers’ ability was categorized into good and fair in designing English listening materials. More than 50% Indonesian Journal of English Language Teaching and Applied Linguistics, 4(2), 2020 275 Zulfah Fakhruddin, Usman, Rahmawati, Sulvinajayanti teachers were categorized into good in editing video and 72% teachers were categorized into good in writing listening exercise.
    [Show full text]