MVA 6 Media Arts Lesson 2 PDF

Document Details

SofterMetonymy

Uploaded by SofterMetonymy

University of Science and Technology of Southern Philippines

OCR

Tags

media arts graphic design web design design principles

Summary

This document is a lesson plan for a secondary-level media arts class, covering graphic design principles, software, and web design concepts. It includes information about Adobe Illustrator, Photoshop, InDesign and covers topics such as user interface and user experience (UI/UX) design.

Full Transcript

MEDIA ARTS MVA 6 WHAT IS GRAPHIC DESIGN? It is the art of visual communication, where designers use typography, imagery, and layout to convey messages and solve problems. WHAT ARE THE DESIGN PRINCIPLES AND TOOLS Alignment Contrast DESIGN Visual PRINC...

MEDIA ARTS MVA 6 WHAT IS GRAPHIC DESIGN? It is the art of visual communication, where designers use typography, imagery, and layout to convey messages and solve problems. WHAT ARE THE DESIGN PRINCIPLES AND TOOLS Alignment Contrast DESIGN Visual PRINCIPLES Balance Hierarchy ALIGNMENT Ensuring that elements are visually connected and organized, which improves the overall cohesion of the design. CONTRAST Using differing elements (like color or size) to create visual interest and draw attention to key areas. VISUAL HIERARCHY Arranging elements to guide the viewer’s eye in a logical order, emphasizing the most important information. BALANCE Distributing elements evenly to create a stable and aesthetically pleasing design. Adobe Photoshop Illustrator SOFTWARE PROFICIENCY InDesign ADOBE ILLUSTRATOR Ideal for creating vector graphics, logos, and illustrations that can be scaled without losing quality. PHOTOSHOP Used for photo editing, digital painting, and creating intricate designs with layers and effects. INDESIGN Perfect for layout design, such as magazines, brochures, and multi-page documents. PROJECT-BASED LEARNING Branding Advertising Editorial Design BRANDING Developing visual identities for companies or products, including logos, color schemes, and brand guidelines. ADVERTISING Creating promotional materials such as posters, banners, and social media ads that effectively communicate marketing messages. EDITORIAL DESIGN Designing layouts for books, magazines, and newspapers, focusing on readability and visual appeal. CREATIVITY AND INNOVATION Exploration Techniques EXPLORATION Encouraging apprentices to experiment with various design styles, techniques, and mediums to find their unique voice and approach. TECHNIQUES Learning about different graphic design techniques, such as illustration, photo manipulation, and typography. Client Professional Projects Skills CLIENT INTERACTION AND PROFESSIONALISM CLIENT PROJECTS Working with actual clients or on simulated projects helps apprentices understand client needs, manage expectations, and deliver tailored solutions. PROFESSIONAL SKILLS Developing skills in presenting designs, handling feedback, and maintaining a professional attitude throughout the design process. WHAT IS WEB DESIGN? Web design focuses on crafting functional and visually appealing websites. It combines elements of design, user experience (UX), and coding to create intuitive and responsive digital spaces. Web designers aim to enhance user interactions and ensure a seamless experience across various devices and screen sizes. UI/UX DESIGN User Usability Interface User Testing Experience USER INTERACTION (UI) Focuses on the visual layout of a website, including buttons, icons, and overall aesthetics. The goal is to make interfaces that are visually appealing and easy to navigate. USER EXPERIENCE (UX) Emphasizes the overall experience of the user, from the ease of use to the efficiency of the navigation. UX design involves researching user behavior, creating wireframes, and prototyping to ensure a smooth and intuitive user journey. USABILITY TESTING Conducting tests to gather feedback on how real users interact with the website. This helps identify pain points and areas for improvement. HTML CSS CODING AND JavaScript DEVELOPMENT Responsive Design HTML (HYPERTEXT MARKUP LANGUAGE) The foundational language used to structure content on the web. CSS (CASCADING STYLE SHEETS) Used to style and layout web pages, including design aspects like colors, fonts, and spacing. JAVASCRIPT Adds interactivity and dynamic features to websites, such as forms, animations, and real- time updates. RESPONSIVE DESIGN Ensures that websites work well on various devices and screen sizes, using techniques like media queries and flexible grid layouts. DESIGN TOOLS AND Adobe XD PLATFORMSWordPress Figma ADOBE XD A tool for designing and prototyping user experiences for web and mobile apps. It offers features for wireframing, creating interactive prototypes, and collaborating with team members. FIGMA A web-based design tool that supports collaborative design work. It’s widely used for creating UI/UX designs and prototyping. WORDPRESS A content management system (CMS) that simplifies website creation and management. It’s popular for its flexibility and extensive library of themes and plugins. INDUSTRY TRENDS AND BEST PRACTICES Emerging Accessibility Technologies Design Standards Patterns EMERGING TECHNOLOGIES Keeping up with advancements such as progressive web apps (PWAs), voice user interfaces (VUIs), and artificial intelligence (AI) in web design. DESIGN PATTERNS Familiarizing with established design patterns and methodologies, such as mobile-first design, minimalism, and modular design. ACCESSIBILITY STANDARDS Ensuring websites are accessible to users with disabilities by following guidelines like WCAG (Web Content Accessibility Guidelines) and incorporating features like keyboard navigation and screen reader compatibility. WHAT IS INTERACTIVE MOBILE DESIGN? It is a dynamic field dedicated to crafting engaging and intuitive experiences for mobile devices. It integrates user experience (UX) and user interface (UI) design principles to create apps and websites that are both visually appealing and easy to navigate. The focus is on ensuring that users can interact seamlessly with digital products, leveraging tools and technologies to adapt designs for various devices and screen sizes. TECHNICAL MASTERY AND Adobe XD TOOLS Sketch Figma DESIGN TOOLS ADOBE XD Provides tools for designing and prototyping user interfaces with features like interactive prototypes and collaborative design. FIGMA A popular tool for designing and prototyping with a focus on real-time collaboration and ease of use. SKETCH Used for creating user interfaces and prototypes, particularly for macOS users. It offers a range of plugins to enhance functionality. HTML CSS CODING JavaScript LANGUAGES Responsive Design Principles HTML (HYPERTEXT MARKUP LANGUAGE) Used to structure content on mobile web applications. CSS (CASCADING STYLE SHEETS) Styles the content and layout, ensuring that designs are responsive and visually appealing. JAVASCRIPT Adds interactivity and dynamic features to mobile web apps. RESPONSIVE DESIGN PRINCIPLES Ensuring that mobile apps and websites adapt to various screen sizes and orientations, providing a consistent and optimized experience across devices. USER-CENTERED DESIGN User Prototyping Research Personas and Testing USER RESEARCH Gathering insights into user needs, preferences, and behaviors through methods like surveys, interviews, and usability testing. PERSONAS Creating detailed profiles of typical users to guide design decisions and ensure the product meets their needs. PROTOTYPING AND TESTING Developing and testing prototypes to gather feedback and make iterative improvements, enhancing usability and overall user experience. EXPLORATION AND Augmented INNOVATIONDesign Trends Reality Virtual Reality Emerging Technologies AUGMENTED REALITY (AR) Integrates digital elements into the real world, offering interactive and immersive experiences. VIRTUAL REALITY (VR) Creates fully immersive digital environments, which can be used for apps and experiences that require a high level of engagement. DESIGN TRENDS Staying updated with the latest trends, such as gesture-based navigation, minimalistic design, and voice interfaces, to ensure designs are modern and relevant. THE END THANKS FOR LISTENING!

Use Quizgecko on...
Browser
Browser