P4-M 4/24 Website Style
The UI lesson teaches how to design interfaces that look good, are easy to use, and work well for everyone. This includes things like how to arrange elements on the screen, choose fonts and colors, and make sure everything is easy to understand and use.
-
Introduction to the team (Roles & Contributions)
-
Outline of Lesson
-
Reveal the goal of the project: “to let students develop their coding skills in frontend/UI…help them become more fluent in coding frontend…become experts…"
-
Definitions of properties: Color, Font, Layout, Icons, Interactivity, Accessibility
-
Going over how to add/change colors: changing the color of text, changing the background color, themes
-
Images: data compression, PIL, numpy, base 64, io
Section 1
Introduction (5 minutes)
- Introduce the topic of advanced UI design and discuss the importance of creating effective interfaces for modern applications.
- Explain that students will learn about advanced UI design elements and techniques and will apply these principles to design their own interfaces. Body (45-60 minutes)
- Introduce the key elements of advanced UI design, such as microinteractions, animations, and visual feedback.
- Show examples of interfaces that use these elements effectively and discuss how they contribute to the overall user experience.
- Ask students to analyze and evaluate the effectiveness of these elements in the examples shown. Conclusion (5-10 minutes)
- Review the key concepts covered in the lesson and discuss the importance of effective UI design in modern applications.
- Encourage students to continue exploring advanced UI design techniques and principles on their own.
Section 2
Introduction (5 minutes):
- Explain that animation is a technique used to bring static images to life by creating the illusion of motion through a series of images displayed in rapid succession.
- Explain that animations can be created using code and that today they will learn how to code basic animations. Demonstration (10 minutes):
- Show students a few examples of animations created using HTML, CSS, and JavaScript.
- Explain how CSS can be used to define styles and animations for HTML elements, while JavaScript can be used to manipulate the HTML and CSS code to create dynamic effects.
- Demonstrate how to use CSS keyframes and the animation property to create simple animations, such as moving a shape across the screen.
Customization Goals
- Snakeskin Change
- Apple Change
- Background Change
- Animations
Lesson Plan
- JavaScript basic run-down
- Snake game customization run-down
- Snake game customization before and after
Hacks for Customization 1 and 2
- Clone the template repo given and replicate the screen video of the example using elements from the lesson (.9)
- Add an own element from the lesson to make student's repository unique (.9)
- EXTRA Make a UI element that was seen on one of the example websites (.2)
Hacks for JavaScript
- Customizing an element of the game
- Play the snake game until the score of 10
- Take note on how to customize (make their own step-by-step guide)
- EXTRA Play the snake game until 50 and a selfie with your score (NO CHEATING..if we suspect you we will do a live review of your snake playing)