mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-10-13 00:03:05 +08:00
Co-authored-by: Bruce Blaser <bbsmooth@gmail.com>
This commit is contained in:
Jocelyn Tang
co-authored by
Bruce Blaser
Bruce Blaser
parent
3e0d01fa69
commit
087bde8631
+100
-100
@@ -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
|
||||
|
||||
|
||||
Reference in New Issue
Block a user