This media is not supported in your browser
VIEW IN TELEGRAM
17. Testing Your Information Architecture
Paul explains the importance of testing the information architecture and introduces tree testing as a method to validate the structure. There are three types of content to test: low agreement score, not sure category, and top tasks buried in subsections. He also addresses potential problems and explains how to interpret the results, focusing on success score, directness, and time taken to complete tasks.
#lesson
Paul explains the importance of testing the information architecture and introduces tree testing as a method to validate the structure. There are three types of content to test: low agreement score, not sure category, and top tasks buried in subsections. He also addresses potential problems and explains how to interpret the results, focusing on success score, directness, and time taken to complete tasks.
#lesson
Media is too big
VIEW IN TELEGRAM
18. Testing Your Design Concepts
Paul discusses the importance of testing design concepts and mockups. He explains that testing can lead to a better product, resolve disagreements, ensure momentum, and save money. He also introduces different types of tests, such as testing comprehension and aesthetics, and suggests using tools like Lyssna for conducting these tests.
#lesson
Paul discusses the importance of testing design concepts and mockups. He explains that testing can lead to a better product, resolve disagreements, ensure momentum, and save money. He also introduces different types of tests, such as testing comprehension and aesthetics, and suggests using tools like Lyssna for conducting these tests.
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
19. Testing User Comprehension
Paul discusses the concept of the "eight-second test," also known as the "five-second test," to assess the effectiveness of visual communication on a webpage. The test involves showing a design concept to a user for eight seconds and then asking them to recall specific details or their first impression. He explains how to set up and run the test, and highlights the benefits of quick and easy feedback it provides.
#lesson
Paul discusses the concept of the "eight-second test," also known as the "five-second test," to assess the effectiveness of visual communication on a webpage. The test involves showing a design concept to a user for eight seconds and then asking them to recall specific details or their first impression. He explains how to set up and run the test, and highlights the benefits of quick and easy feedback it provides.
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
20. Testing Aesthetics
Paul discusses the importance of testing aesthetics in design projects and explains that testing with users helps ensure a compelling design and reduces arguments. He also provides two options for testing aesthetics: preference tests and semantic differential surveys.
#lesson
Paul discusses the importance of testing aesthetics in design projects and explains that testing with users helps ensure a compelling design and reduces arguments. He also provides two options for testing aesthetics: preference tests and semantic differential surveys.
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
21. Testing Usability
Paul discusses the importance of testing usability on mock-ups and how it can address stakeholder concerns and catch issues early. He introduces different options for testing usability, including the "five-second" test and the "first click" test. He also mentions the possibility of using eye-tracking tools, such as RealEye or eye-tracking simulation software, to gain insights into where people will look at a design.
#lesson
Paul discusses the importance of testing usability on mock-ups and how it can address stakeholder concerns and catch issues early. He introduces different options for testing usability, including the "five-second" test and the "first click" test. He also mentions the possibility of using eye-tracking tools, such as RealEye or eye-tracking simulation software, to gain insights into where people will look at a design.
#lesson
Media is too big
VIEW IN TELEGRAM
22. Testing Conclusion
Paul discusses the importance of testing early in the design process and emphasizes the need for real content rather than placeholder text like lorem ipsum. He explains how to create draft content by extracting questions and bullet points from the information architecture and using tools like ChatGPT and Hemingway to generate website content. He also shares his approach to presenting design progress to clients, focusing on a continuous feedback loop rather than a traditional sign-off process.
#lesson
Paul discusses the importance of testing early in the design process and emphasizes the need for real content rather than placeholder text like lorem ipsum. He explains how to create draft content by extracting questions and bullet points from the information architecture and using tools like ChatGPT and Hemingway to generate website content. He also shares his approach to presenting design progress to clients, focusing on a continuous feedback loop rather than a traditional sign-off process.
#lesson
Media is too big
VIEW IN TELEGRAM
23. Testing Prototypes
Paul discusses the importance of prototyping and the opportunities for testing that come with it. He explains the benefits of realistic and interactive prototypes and discusses the options for usability testing, including facilitated and un-facilitated testing. He also explores the pros and cons of remote testing versus in-person testing, and highlights the importance of testing specific aspects of the prototype, such as navigation, learnability, efficiency, and satisfaction.
#lesson
Paul discusses the importance of prototyping and the opportunities for testing that come with it. He explains the benefits of realistic and interactive prototypes and discusses the options for usability testing, including facilitated and un-facilitated testing. He also explores the pros and cons of remote testing versus in-person testing, and highlights the importance of testing specific aspects of the prototype, such as navigation, learnability, efficiency, and satisfaction.
#lesson
Media is too big
VIEW IN TELEGRAM
24. Preparation for Usability Testing
Paul discusses preparation and scheduling for conducting usability testing, including. He covers topics such as the necessary equipment and environment for in-person testing, the importance of screen recording apps, and how to plan tasks and scenarios for testing. He also provides tips for facilitating the sessions, including making participants feel comfortable, emphasizing that the site is being tested and not the participant, and asking for permission to record the sessions.
#lesson
Paul discusses preparation and scheduling for conducting usability testing, including. He covers topics such as the necessary equipment and environment for in-person testing, the importance of screen recording apps, and how to plan tasks and scenarios for testing. He also provides tips for facilitating the sessions, including making participants feel comfortable, emphasizing that the site is being tested and not the participant, and asking for permission to record the sessions.
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
25. Running Usability Testing
Paul discusses the process of conducting both facilitated and unfacilitated usability testing. He provides tips for facilitating in-person testing, such as asking about participants' expectations, prompting them to talk, and allowing them to struggle. He also explains how to set up and conduct unfacilitated testing using tools like Lookback, highlighting the benefits of obtaining unbiased and unfiltered feedback.
#lesson
Paul discusses the process of conducting both facilitated and unfacilitated usability testing. He provides tips for facilitating in-person testing, such as asking about participants' expectations, prompting them to talk, and allowing them to struggle. He also explains how to set up and conduct unfacilitated testing using tools like Lookback, highlighting the benefits of obtaining unbiased and unfiltered feedback.
#lesson
Media is too big
VIEW IN TELEGRAM
26. Working with the Results
Paul discusses the importance of using the results of usability testing and how to prioritize the issues that arise from the testing. He also emphasizes the impact that usability testing can have on culture and stakeholders, and provides strategies for encouraging attendance and engagement in usability testing sessions. He also touches on the dynamic of observers during usability testing and how to manage expectations when refactoring or remaking an existing product.
#lesson
Paul discusses the importance of using the results of usability testing and how to prioritize the issues that arise from the testing. He also emphasizes the impact that usability testing can have on culture and stakeholders, and provides strategies for encouraging attendance and engagement in usability testing sessions. He also touches on the dynamic of observers during usability testing and how to manage expectations when refactoring or remaking an existing product.
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
27. Testing Existing Websites or Apps
Paul discusses the importance of post-launch testing and iteration for websites and apps. He explains that the best opportunity to improve an application or website is after it has gone live, as this is when you can observe real user behavior at scale. He also outlines the process of post-launch optimization, which involves identifying problems, diagnosing them, proposing solutions, testing those solutions, and launching the best option.
#lesson
Paul discusses the importance of post-launch testing and iteration for websites and apps. He explains that the best opportunity to improve an application or website is after it has gone live, as this is when you can observe real user behavior at scale. He also outlines the process of post-launch optimization, which involves identifying problems, diagnosing them, proposing solutions, testing those solutions, and launching the best option.
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
28. Identifying Points of Friction
Paul walks through the process of identifying and resolving issues on problem pages to improve the user experience. He explains how to use analytics to identify problem pages through exit rates, bounce rates, rage clicks, dead clicks, excessive scrolling, and quickbacks. He also explains how to narrow down the exact issue by analyzing heat maps, session recordings, and utilizing A/B testing to test potential solutions on problem pages.
#lesson
Paul walks through the process of identifying and resolving issues on problem pages to improve the user experience. He explains how to use analytics to identify problem pages through exit rates, bounce rates, rage clicks, dead clicks, excessive scrolling, and quickbacks. He also explains how to narrow down the exact issue by analyzing heat maps, session recordings, and utilizing A/B testing to test potential solutions on problem pages.
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
29. Testing Larger Changes
Paul discusses the different tools available for A-B testing and their pros and cons. He mentions tools like Convert, Crazy Egg, and Visual Website Optimizer, highlighting their features and costs. He also explains when it might be more appropriate to use prototyping instead of A-B testing, particularly for complex interactions or costly changes.
#lesson
Paul discusses the different tools available for A-B testing and their pros and cons. He mentions tools like Convert, Crazy Egg, and Visual Website Optimizer, highlighting their features and costs. He also explains when it might be more appropriate to use prototyping instead of A-B testing, particularly for complex interactions or costly changes.
#lesson
Media is too big
VIEW IN TELEGRAM
30. Wrapping Up
Paul wraps up the workshop by summarizing the topics covered, emphasizing the importance of ongoing testing and iteration, and encouraging participants to start implementing even small testing efforts. He also addresses a question about translating testing efforts into monetary value and discusses the value of feedback surveys in different contexts.
#lesson
Paul wraps up the workshop by summarizing the topics covered, emphasizing the importance of ongoing testing and iteration, and encouraging participants to start implementing even small testing efforts. He also addresses a question about translating testing efforts into monetary value and discusses the value of feedback surveys in different contexts.
#lesson
Title: Ultimate CSS Grid & Layout Techniques, v3
Description: CSS Grid is the most important tool in a modern web developer's toolkit for laying out web pages. Learn advanced techniques including subgrid, container queries, and responsive images through hands-on CodePen exercises.
Link: https://frontendmasters.com/courses/css-grid/
Time: 6 hours, 21 minutes
Lessons: 45 / 45
Tags: #course #frontendmasters #720p
Description: CSS Grid is the most important tool in a modern web developer's toolkit for laying out web pages. Learn advanced techniques including subgrid, container queries, and responsive images through hands-on CodePen exercises.
Link: https://frontendmasters.com/courses/css-grid/
Time: 6 hours, 21 minutes
Lessons: 45 / 45
Tags: #course #frontendmasters #720p
Frontendmasters
CSS Grid from Basic to Complex Responsive Layouts | Flexbox, Container Queries & Subgrid
CSS Grid is the most important tool in a modern web developer's toolkit for laying out web pages. Learn advanced techniques including subgrid, container queries, and responsive images through hands-on CodePen exercises.
❤1
Media is too big
VIEW IN TELEGRAM
1. Introduction
Jen Kramer begins the course by sharing a history of page layout from the early days when there was little CSS support through today when there is full support for CSS Grid and advanced layout features like container queries and subgrid. The course website is provided. Exercises will be coded in CodePen. Grid and Flexbox are compared.
- https://grid-flexbox.css.education/
#lesson
Jen Kramer begins the course by sharing a history of page layout from the early days when there was little CSS support through today when there is full support for CSS Grid and advanced layout features like container queries and subgrid. The course website is provided. Exercises will be coded in CodePen. Grid and Flexbox are compared.
- https://grid-flexbox.css.education/
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
2. Grid Overview
Jen explains that CSS Grid is best for layouts that span across rows and columns and sibling elements that need to overlap or cover each other. The properties available for styling depend on whether the styles are applied to a parent or child element.
#lesson
Jen explains that CSS Grid is best for layouts that span across rows and columns and sibling elements that need to overlap or cover each other. The properties available for styling depend on whether the styles are applied to a parent or child element.
#lesson
Media is too big
VIEW IN TELEGRAM
3. Your First Grid
Jen creates a CSS class to display the figure elements in a grid layout. The `display: grid` style is applied, and the `grid-template-columns` property creates the desired number of columns.
- https://codepen.io/jen4web/pen/wvZMYwv
#lesson
Jen creates a CSS class to display the figure elements in a grid layout. The `display: grid` style is applied, and the `grid-template-columns` property creates the desired number of columns.
- https://codepen.io/jen4web/pen/wvZMYwv
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
4. Inspecting Grid with Dev Tools
Jen demonstrates how to use the Chrome Developer Tools to inspect grid-based layouts. Row and column indicators appear and gaps between the rows and columns are shaded.
#lesson
Jen demonstrates how to use the Chrome Developer Tools to inspect grid-based layouts. Row and column indicators appear and gaps between the rows and columns are shaded.
#lesson
Media is too big
VIEW IN TELEGRAM
5. Basic Grid Exercise
Students are instructed to make each figure element as a grid item and use the grid layout properties to have the caption appear to the right of the image. After the exercise, the layout is refined by centering captions vertically and creating a more complex two-column layout. The final code can be found at the CodePen link below.
- https://codepen.io/jen4web/pen/wvZGwPM
#lesson
Students are instructed to make each figure element as a grid item and use the grid layout properties to have the caption appear to the right of the image. After the exercise, the layout is refined by centering captions vertically and creating a more complex two-column layout. The final code can be found at the CodePen link below.
- https://codepen.io/jen4web/pen/wvZGwPM
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
6. Grid Layout Exercise
Students are instructed to create the image layout displayed on the chapter 3 page of the course website. The links to the beginning and ending CodePen links are in the Chapter 3 page below.
- https://grid-flexbox.css.education/ch3.html
#lesson
Students are instructed to create the image layout displayed on the chapter 3 page of the course website. The links to the beginning and ending CodePen links are in the Chapter 3 page below.
- https://grid-flexbox.css.education/ch3.html
#lesson