Lesson video

Hello.

My name is Mrs. Holborow and welcome to Computing.

I'm so pleased you've decided to join me for the lesson today.

In today's lesson, you'll be starting to create a digital blog about accessibility and digital inclusion.

But what is a blog?

And how can we go about designing a blog?

Welcome to today's lesson from the unit School Blog: Digital Inclusion.

This lesson is called Planning and Designing an Accessible Blog.

And by the end of today's lesson, you'll be able to plan and apply accessibility principles in digital design.

Shall we make a start?

We will be exploring these keywords throughout today's lesson.

Let's take a look at them together now.

Wireframe.

Wireframe.

A plan that outlines the basic structure and layout of visual content.

User experience or UX design.

User experience, UX design.

The process of designing products such as websites, apps, or blogs to make them easy, useful, and enjoyable to use.

Blog.

Blog.

Short for weblog, a regularly updated website or webpage that contains diary-style articles.

Look out for these keywords throughout today's lesson.

Today's lesson is split into two parts.

We'll start by creating a wireframe design for your blog.

We'll then move on to apply accessibility principles in digital design.

Let's make a start with creating a wireframe design for your blog.

What is a wireframe?

Maybe pause the video whilst you have a think.

A wireframe is a basic outline of a webpage.

It does not include colors, images, or the final content details.

It helps designers plan where the elements on a webpage will be positioned.

So you can see here, we've got an example of a wireframe, and it's showing the key elements of the webpage, such as the header, the buttons, and where the content will be.

So, some elements of a wireframe will typically include the header, the navigation bar, the main content areas, the sidebar, and the footer.

These aren't essential for every single page though.

What is a blog?

A blog is short for weblog and it's a regularly updated website or webpage that contains diary-style articles called blog posts.

Blogs appear in reverse chronological order, which means that the newest posts are at the top of the page and older posts are towards the bottom of the page.

That's because people are much more likely to read the content at the top of the page rather than having to scroll down.

Here's an example of a blog post from Oak National Academy.

So, you can see here we have the header, which is in this background yellow style, which says "Inspiration for inside and outside the classroom.

" We've got a sidebar navigation with some links to some other pages.

And then we've got the blog posts which are separated by a horizontal line.

So, the most recent blog post is at the top.

Okay.

Time to check your understanding.

I have a question for you.

Which of the following does a wireframe typically not include?

Is it A, colors, B, basic outline, or C, main content areas?

Pause the video whilst you have a think about your answer.

Did you select A?

Well done.

Remember, the wireframe doesn't give us exactly what the final product is going to look like.

User experience or UX design is the process of designing products such as websites, apps, or blogs to make them easy, useful, and enjoyable to use.

Andeep says, "What makes an effective blog?

" Maybe pause the video whilst you think about Andeep's question.

Did you manage to think about what makes an effective blog or website?

Let's have a look at some answers and see how they compare.

Clear navigation.

This means there are easy to use menus.

Responsive design.

This means it would work well on all devices, such as a laptop, tablet, or smartphone.

Accessibility.

Alt text is included for images, fonts are readable and good color contrast is used.

Consistent design.

The layout, fonts, and color scheme look the same across all pages.

This helps users to know exactly where they're going and how to use the site.

Quality content.

The information is relevant, useful, and interesting.

And there are minimal distractions.

So, there aren't too many adverts, animations, or flashy colors.

Did you have any of these items on the list?

Did you have any additional items?

So, here's the Oak National Academy blog again.

On the left-hand side is what the blog looks like when it's viewed on a laptop or a desktop computer.

On the right-hand side is what the blog looks like when it's accessed from a mobile device.

So, you can see we've got clear navigation.

It works on different devices with different screen sizes.

There's a subtle color scheme.

There's relevant content and no distractions from the content.

Let's have a look at each of these in a little bit more detail.

Clear navigation.

Simple menus help users to get the right information quickly.

And a clear layout means less confusion.

Responsive design.

Responsive design automatically adjusts to different screen sizes on different devices.

Responsive design makes the website or blog easier to read and use.

Accessibility.

Alt text helps visually impaired users understand images and is also used by screen readers.

Readable fonts and good color contrast help visually impaired users access website content.

Consistent design.

Using the same fonts and colors makes it easy to read.

And a consistent layout helps users know where things are.

Quality content.

Content that is clear, short, and to the point is easy to read.

Correct and up-to-date content keeps the website or blog relevant and will mean people will continue to come back to your site.

Engaging content makes users want to stay longer.

Minimal distractions.

A simple, clean design makes it easier to find important information.

If a page has too many moving things, it can be frustrating or distracting for users.

A good website or blog is easy to use, looks good, and works for everyone.

Okay, time to check your understanding.

This time, I have a true or false question for you.

Good user experience or UX design reduces user frustration and increases engagement.

Is this statement true or false?

Pause the video whilst you have a think.

Did you select true?

Well done.

Good user experience or UX design reduces user frustration and increases engagement.

It may mean that more people will use your website or blog, and they might be more likely to return.

Okay, we're moving on to the first task of today's lesson and you've done a fantastic job, so well done.

For this task, I'd like you to create a wireframe design for your blog on digital inclusion.

And I want you to ensure you consider clear navigation, responsive design, accessibility, consistent design, and minimal distractions.

Pause the video whilst you create your wireframe.

How did you get on?

Did you manage to create your wireframe design?

Here's an example that has been created.

So, you can see we're showing the general layout of the blog page.

We've included the navigation, a search item, and where the images will be on the page.

Accessibility will be implemented by ensuring images contain alt text and that the fonts used are readable.

If you haven't quite finished your wireframe design or this example gives you some tips that you could use to improve yours, you can always pause your video now.

Okay, we're moving on to the second part of today's lesson, where we're going to apply accessibility principles in digital design.

Digital accessibility means designing technology so it can be used by people with a variety of different needs.

For example, visual or hearing impairments, physical impairments, or neurodivergent conditions.

Digital accessibility is about ensuring equity of access in digital products.

Izzy says, "Why does accessibility matter?

" Maybe pause the video whilst you think about Izzy's question.

Accessibility matters because it promotes equality and inclusion.

It improves usability for everyone, not just individuals with specific needs.

It is often a legal requirement, and it expands your audience so more people can use your blog.

Inclusive design aims to remove barriers from the start, rather than having to adapt later on.

Imagine building a school.

Option one would be to build the stairs first and then add a ramp later.

Option two, design the entrance with both stairs and a ramp from the start.

Inclusive design is like option two.

Different users are considered in the design stages and planning is done for a range of needs so that fewer changes are needed later.

Okay, time to check your understanding.

I have a question for you.

Which of the following statements best describes the importance of accessibility in digital products?

Is it A, it is only important for people with disabilities, B, it improves usability for everyone, or C, it reduces development time and costs in all areas?

Pause the video whilst you think about your answer.

Did you select B?

Well done.

The importance of accessibility in digital products means that it improves usability for everyone.

In this lesson, you are going to create your own blog on digital inclusion.

The blog should contain information about digital inclusion that you have collected from research.

You should also apply accessibility principles when creating your blog.

Here is a checklist you can use to ensure your blog meets the criteria.

Contains data from valid sources.

Promotes digital inclusion.

Identifies the issue of the digital divide.

Has clear navigations and headings.

Uses good color contrast.

And uses simple language.

Okay.

Time to check your understanding.

Which of the following are common accessibility mistakes?

A, using images instead of text.

B, large, readable fonts.

Or C, low-contrast colors.

Pause the video whilst you have a think about your answer.

Did you spot it?

Well done.

Both A and C are common accessibility mistakes.

So, using images instead of text or using lots of text within images, and also using low-contrast colors.

Okay, we're moving on to task B of today's lesson and you've done a fantastic job, so well done.

You're now going to use the wireframe design you created in task A to begin creating your blog on digital inclusion.

Use the checklist provided to ensure your blog meets the specified requirements.

So, contains data from valid sources.

Promotes digital inclusion.

Identifies the issue of the digital divide.

Has clear navigation and headings.

Uses good color contrast.

And uses simple language.

Pause the video here whilst you create your blog.

How did you get on creating your blog?

Did you make a good start?

Well done.

Here's an example that has been created and we've also got the checklist to see what we've managed to do so far.

So, the blog contains data from valid sources.

It promotes digital inclusion, so we've got the title there that says "Digital Inclusion for All.

" It has clear navigation and headings.

So you can see along the top we've got a navigation panel which says Home, About, Topics, and Contact.

It uses good color contrast.

The background is fairly light and the text is black and easy to read.

There are a couple things on the checklist we haven't quite managed to do yet, so perhaps we'll revisit it and make some improvements.

Okay, we've come to the end of today's lesson, Planning and Designing an Accessible Blog, and you've done a fantastic job, so well done.

Let's summarize what we've learned together in this lesson.

User experience, UX, focuses on how easy, useful, and enjoyable a product is to use.

A wireframe is a simple visual plan or layout of a digital product such as a website or blog.

Clear structure and navigation improve accessibility.

Accessibility should be planned from the beginning of a project.

I hope you've enjoyed today's lesson and I hope you'll join me again soon.

Bye.