From 087bde86313d729be5a500d88741e0c293f9060a Mon Sep 17 00:00:00 2001 From: Jocelyn Tang <125464101+JoT8ng@users.noreply.github.com> Date: Tue, 8 Oct 2024 20:42:07 +0100 Subject: [PATCH] feat(curriculum): create design fundamentals quiz #56181 (#56546) Co-authored-by: Bruce Blaser --- .../66ed901ff45ce3ece4053eba.md | 200 +++++++++--------- 1 file changed, 100 insertions(+), 100 deletions(-) diff --git a/curriculum/challenges/english/25-front-end-development/quiz-design-fundamentals/66ed901ff45ce3ece4053eba.md b/curriculum/challenges/english/25-front-end-development/quiz-design-fundamentals/66ed901ff45ce3ece4053eba.md index f2a46be2186..bd4e2d51bfe 100644 --- a/curriculum/challenges/english/25-front-end-development/quiz-design-fundamentals/66ed901ff45ce3ece4053eba.md +++ b/curriculum/challenges/english/25-front-end-development/quiz-design-fundamentals/66ed901ff45ce3ece4053eba.md @@ -17,439 +17,439 @@ Answer all of the questions below correctly to pass the quiz. #### --text-- -Placeholder question +What are some reasons why whitespace is important for good design? #### --distractors-- -Placeholder distractor 1 +Improves readability by placing many elements on the page --- -Placeholder distractor 2 +Focuses the viewer's attention by having elements placed close together --- -Placeholder distractor 3 +Creates breathing space in the design to make users scroll for more information #### --answer-- -Placeholder answer +Creates visual hierarchy, improves readability, focuses the viewer's attention on different elements ### --question-- #### --text-- -Placeholder question +What is the design principle of carefully choosing the size of elements in relation to each other and the layout? #### --distractors-- -Placeholder distractor 1 +Visual hierarchy --- -Placeholder distractor 2 +Proportion --- -Placeholder distractor 3 +Balance #### --answer-- -Placeholder answer +Scale ### --question-- #### --text-- -Placeholder question +What design tool in Figma would you use to combine multiple elements together without flattening the layers of the elements? #### --distractors-- -Placeholder distractor 1 +Frames --- -Placeholder distractor 2 +Blocks --- -Placeholder distractor 3 +Class #### --answer-- -Placeholder answer +Groups ### --question-- #### --text-- -Placeholder question +What design pattern allows users to access and interact with specific elements and content on a website without or while deferring registration? #### --distractors-- -Placeholder distractor 1 +Captcha validation --- -Placeholder distractor 2 +Lazy loading --- -Placeholder distractor 3 +Progressive enhancement #### --answer-- -Placeholder answer +Deferred/lazy registration ### --question-- #### --text-- -Placeholder question +What are the three main types of text alignment? #### --distractors-- -Placeholder distractor 1 +Vertical, center, horizontal --- -Placeholder distractor 2 +Left, right, justified --- -Placeholder distractor 3 +Vertical, horizontal, justified #### --answer-- -Placeholder answer +Left, right, center ### --question-- #### --text-- -Placeholder question +Which interaction design pattern reduces the complexity of interaction by hiding parts of interfaces progressively so that content is only introduced to the user as they progress through the application? #### --distractors-- -Placeholder distractor 1 +Extended discoverability --- -Placeholder distractor 2 +Delayed implementation --- -Placeholder distractor 3 +Gradual engagement #### --answer-- -Placeholder answer +Progressive disclosure ### --question-- #### --text-- -Placeholder question +What is contrast in design? #### --distractors-- -Placeholder distractor 1 +Elements that are visually similar --- -Placeholder distractor 2 +The difference in saturation between two colors --- -Placeholder distractor 3 +Matching elements on a page #### --answer-- -Placeholder answer +Elements that are strikingly different from each other visually ### --question-- #### --text-- -Placeholder question +In the examples below, which one is an example of visual hierarchy in design? #### --distractors-- -Placeholder distractor 1 +Headline and title text are a similar color to the background and other elements to blend in --- -Placeholder distractor 2 +Text and images are all the same size on the page --- -Placeholder distractor 3 +The logo banner is smaller than all the minor images on the main landing page #### --answer-- -Placeholder answer +Making the headline of the page larger than other text that comprise the body or sub-headings ### --question-- #### --text-- -Placeholder question +Which Figma tools allows users to specify a region on the screen they would like to export? #### --distractors-- -Placeholder distractor 1 +Frames --- -Placeholder distractor 2 +Section --- -Placeholder distractor 3 +Blocks #### --answer-- -Placeholder answer +Slice ### --question-- #### --text-- -Placeholder question +What is user centered design? #### --distractors-- -Placeholder distractor 1 +A design process where once the design is completed, designers test the product by getting user feedback --- -Placeholder distractor 2 +A design process where designers consider user accessibility requirements --- -Placeholder distractor 3 +A design process focused on client requirements at every stage of the process #### --answer-- -Placeholder answer +An iterative design process where designers design a product considering user requirements at every stage of the process ### --question-- #### --text-- -Placeholder question +What is the minimum required contrast ratio for regular text for accessibility according to WCAG guidelines? #### --distractors-- -Placeholder distractor 1 +1:1 --- -Placeholder distractor 2 +7:1 --- -Placeholder distractor 3 +3:1 #### --answer-- -Placeholder answer +4.5:1 ### --question-- #### --text-- -Placeholder question +What are some colors to consider when designing dark mode? #### --distractors-- -Placeholder distractor 1 +Pure white --- -Placeholder distractor 2 +Highly saturated colors --- -Placeholder distractor 3 +Bright highly contrasting colors #### --answer-- -Placeholder answer +Dark colors and muted light colors for contrast in dim lighting conditions ### --question-- #### --text-- -Placeholder question +What is one good design practice when considering color palettes for a design? #### --distractors-- -Placeholder distractor 1 +Using a variety of colors with strong saturation and contrast --- -Placeholder distractor 2 +Focus on vibrancy and saturation and place many non complementary hues --- -Placeholder distractor 3 +Using many complementary colors together #### --answer-- -Placeholder answer +Limit colors and focus on using shades, tones, and tints of one color and add another hue three spaces away from that color ### --question-- #### --text-- -Placeholder question +What is one reason why the rule of thirds is important? #### --distractors-- -Placeholder distractor 1 +Creates symmetry in the composition by dividing it equally --- -Placeholder distractor 2 +By dividing up the composition, it eliminates visual hierarchy --- -Placeholder distractor 3 +Objects at the edge of the composition get more focus #### --answer-- -Placeholder answer +Breaks the composition apart into 9 equal parts, where objects placed on the dividing lines provide focus and hierarchy to the composition ### --question-- #### --text-- -Placeholder question +What is one bad practice method for implementing infinite scroll? #### --distractors-- -Placeholder distractor 1 +Allow users to jump to a page or section through the navbar or a pagination drop down menu --- -Placeholder distractor 2 +Add a load more indicator or symbol after a certain point in the page along with the infinite scroll --- -Placeholder distractor 3 +Integrate a footer reveal at the bottom #### --answer-- -Placeholder answer +No back to top button, alternative methods of navigating the page, and very long inefficient scrolling ### --question-- #### --text-- -Placeholder question +What is one bad practice for working with images? #### --distractors-- -Placeholder distractor 1 +Make important images stand out by being larger in size --- -Placeholder distractor 2 +Separate text and images into columns or rows --- -Placeholder distractor 3 +Put images outside the layout and important ones on their own or full screen #### --answer-- -Placeholder answer +Images placed in the middle of text paragraphs with very little margin space for separation ### --question-- #### --text-- -Placeholder question +What is one way to make shopping cart design intuitive and user friendly? #### --distractors-- -Placeholder distractor 1 +Use a new shopping cart icon that no other website has used before --- -Placeholder distractor 2 +Do not allow users to add or remove items from the cart --- -Placeholder distractor 3 +Include a checkout summary on another page #### --answer-- -Placeholder answer +Include thumbnail images of products in the cart ### --question-- #### --text-- -Placeholder question +Dark mode doesn't mean pure black. What are some colors and good techniques to create a good dark mode color scheme? #### --distractors-- -Placeholder distractor 1 +Make images and elements darker and reduce contrast between different elements to have them blend in --- -Placeholder distractor 2 +Invert the color scheme --- -Placeholder distractor 3 +Use many saturated colors #### --answer-- -Placeholder answer +Use dark gray or a dark shade of the brand color instead of pure black ### --question-- #### --text-- -Placeholder question +What is one good design practice when creating modals? #### --distractors-- -Placeholder distractor 1 +Put a lot of important information inside a modal --- -Placeholder distractor 2 +Have multiple modals on the same screen --- -Placeholder distractor 3 +Ensure the modal draws the user's attention away from it #### --answer-- -Placeholder answer +Make the modal dismiss icon visible ### --question-- #### --text-- -Placeholder question +What is a design brief? #### --distractors-- -Placeholder distractor 1 +A design brief is a document outlining the programming and design standards of the project --- -Placeholder distractor 2 +A design brief is a document explaining how to replicate a design --- -Placeholder distractor 3 +A design brief is a document with detailed information of icons, colors, and assets the designer should use #### --answer-- -Placeholder answer +A design brief states the goals and project scope, budget, design requirements, and other important details of the project