From 04447d25b59692611a31842e16a895a0fa97166e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Giftea=20=E2=98=95?= Date: Wed, 15 Oct 2025 23:51:53 +0100 Subject: [PATCH] feat(curriculum): Add interactive examples to images and design lesson (#62845) --- .../672baad7bbc4f86762ca173e.md | 233 +++++++++++++++++- 1 file changed, 232 insertions(+), 1 deletion(-) diff --git a/curriculum/challenges/english/blocks/lecture-user-interface-design-fundamentals/672baad7bbc4f86762ca173e.md b/curriculum/challenges/english/blocks/lecture-user-interface-design-fundamentals/672baad7bbc4f86762ca173e.md index 758e020ed59..c04676df8b4 100644 --- a/curriculum/challenges/english/blocks/lecture-user-interface-design-fundamentals/672baad7bbc4f86762ca173e.md +++ b/curriculum/challenges/english/blocks/lecture-user-interface-design-fundamentals/672baad7bbc4f86762ca173e.md @@ -5,12 +5,55 @@ challengeType: 19 dashedName: what-are-best-practices-for-working-with-images-in-your-designs --- -# --description-- +# --interactive-- + +**NOTE**: Some of the interactive examples might use CSS that you haven't learned yet. Don't worry about trying to understand all of the code. The goal of the examples is to show you previews for these design concepts so you better understand how things work. Adding images to your websites is a great way to engage your users and increase the visual appeal of your site. But there are a few things to consider when working with images in your designs. The first thing to consider is creating responsive images. Responsive images are images that scale to fit the size of the screen they are being viewed on. This is important because it ensures that your images look good on all devices, from desktops to mobile phones. +:::interactive_editor + +```html + + +

Responsive Cat Image

+ +Two cats peacefully sleeping together. + +

+ This image automatically scales based on the screen size. Whether you're viewing on a desktop or a mobile phone, + it adjusts its size without losing proportions, making the design clean and user-friendly on all devices. +

+``` + +::: + Another thing to consider is the resolution for images. Higher quality images with better resolution have more pixels per inch. Pixels are small squares that make up an image. Pixels per inch, or PPI, is the number of pixels in one inch of an image. The higher the PPI, the better the image quality. @@ -25,10 +68,198 @@ When it comes to image placement, you want to think about balance, hierarchy, an Balance is the distribution of visual weight in a design. You want to make sure there is a good balance between text and images on the site so it creates a harmonious design. +:::interactive_editor + +```html + + +
+
+

Balanced Layout

+

+ Balance is essential in web design. By evenly distributing visual weight—such as pairing this block of text + with a complementary image—you create a layout that feels calm, structured, and easy to navigate. +

+
+ +
+ Two cats peacefully sleeping together. +
+
+``` + +::: + Hierarchy is the order in which elements are viewed on a page. You want to make sure that images that align with important content are placed higher than images that are less important. +:::interactive_editor + +```html + + +
+ Two cats peacefully sleeping together. +

Our Feline Rescue Mission

+

+ This image supports one of our most important stories — the rescue of 12 stray cats from a storm drain. + Placing it at the top ensures visitors connect emotionally with our mission right away. +

+
+ +
+

Upcoming Fundraiser

+

+ Join us for a small fundraising event to support our shelter. It’ll be a fun, casual afternoon with + snacks, games, and of course — plenty of cats! +

+ Two cats peacefully sleeping together. +
+``` + +::: + Alignment is the placement of elements in relation to each other. You want to make sure that your images are aligned with the text and other elements on your site so that it creates a cohesive design. +:::interactive_editor + +```html + + +
+ Two cats peacefully sleeping together. + +
+

Aligned Elements

+

+ In this example, the image is aligned horizontally next to the text block. This creates a visually cohesive layout, + where both elements feel like they belong together. Proper alignment like this improves readability and reinforces + structure in your design. +

+
+
+``` + +::: + The last thing to consider is accessibility for images. You want to make sure that your images are accessible to all users, including those with visual impairments. This means that you should use alt text for your images so that screen readers can read the text to users who are visually impaired. # --questions--