This graphic shows how the skills needed to produce high standard are progressively developed from step one through to progression step five. Use this when planning activities to ensure that progression in skills and the appropriate level of challenge are central to any task.

🖨️

💻 Website Design

Website design is the process of creating and maintaining websites. It involves various tasks and skills, including visual design, user experience (UX) design, and coding. It is the process of creating and organising the content, layout, and functionality of a website. Web design involves learners using visual tools and programming languages like HTML and CSS to build and publish a website.

It’s important to start with the basics and gradually introduce more complex concepts as learners become more comfortable with the process. Web design is all about creativity and self-expression, it encourages learners to think outside the box and come up with original ideas for their websites. Learners are able to experiment with different design elements which develops great skills and confidence in web design.

No matter the industry, most businesses have a website. These days, a company, product, or brand needs to have some sort of web presence to compete with other businesses and find new customers. For this reason, web designers are in high demand in today’s job market, and will likely remain so for quite some time.

⭐ THINK ABOUT USERS!

Before you begin, think about your intended audience.

⭐ KEEP THE LAYOUT CLEAR!

The layout should be clear and easy to follow. This should not change throughout the site, as it could cause confusion.

⭐ MINIMISE GRAPHICS!

Graphics make the time it takes to load your site slower and should be kept to a minimum. Most people will not wait more than a few seconds before giving up on a site.

⭐ SIMPLE DESIGN!

Text should be easy to read and contrasting with the background.

⭐ SIMPLIFY HYPERLINKS!

Hyperlinks are essential for navigation (getting around your web site) but should be minimised to avoid over-complicating your site.

Suggestions 🔎

Adobe Express

j2create

j2webby

Codemoji

Google Sites

Weebly

Microsoft Sway

Adobe Dreamweaver

Wordpress

Here are some applications and software that you can use to develop website design skills. These are a small selection - there are MANY more available. It is essential that you select the applications and software that is suitably matched to the learner's stage and that each learner experiences a range of these applications as they apply and develop their digital skills.

PS1 - Experiencing the World Wide Web

What does good look like?

Learners understand that the world wide web is a huge online library. It contains millions of websites. Each website is like a book, with pages called webpages. They are able to access and navigate the web using a variety of devices and software programs / browsers. They are able to identify different elements on a website e.g. words, photos, videos, sounds and music.

How about...

Give learners opportunities to do various things online, such as:
1. browse websites
2. play educational games
3. log in to Hwb
4. watch videos

⭐ Skills ⭐

Hardware

Learners are able to use a keyboard, mouse and touchscreen to access and control their connected devices.

Using Websites

With support, learners are able to find, open, navigate and explore suitable websites.

Discuss elements of design on suitable websites

Interactivity of different elements e.g. appearance with respect to colours, shapes and recognising different icons.

Different devices

Experience using different devices to access websites and online content.

PS2 - Simple webpage creation

What does good look like?

Learners can create, edit and organise multimedia components using the available features in the selected software. They will begin to understand how information should be organised for clarity and use headers, titles, fonts and colours appropriate to subject and audience. Videos, images, audio and animations created in other software can be embedded to enhance the presentation. With support, learners can add hyperlinks to their web page. Learners evaluate their work and their peers before publishing appropriately.

How about...

Use Adobe Express to create a web page on a specific topic e.g.
- Favourite pet
- School trip
- Science investigation
- Local area
- To reflect their learning
- Science investigation

⭐ Skills ⭐

Planning

Start to use effective processes when planning content e.g. take part in class / group discussions, make notes, create success criteria.

Create

Create a webpage using e.g. Adobe Express or J2e5 containing text, images and some multimedia components. More advanced learners will also use hyperlinks.

Format

Use the in-built software features to improve the usability and functionality of the webpage.

Publish

With support, share or publish a link to the webpage.

Evaluate

Evaluate the standard of content to identify possible improvements i.e. receive or give feedback to peers. A learner evaluates how well their digital work answers the success criteria that were set during the planning stage of the task.

PS3 - Website Creation

What does good look like?

Learners progress to creating a website containing multiple pages organised into a suitable structure. The content has been researched and appropriate for the intended audience. They consider how users will navigate their site.

Content is a mixture of researched material and original elements created specifically for their website. Learners will have ensured that credit for other’s work is given. Hold feedback conversations with peers and use this to refine and improve their website.

How about...

Use Google Sites to create a multi-page website on a specific topic such as:
- - School trip
  - Science investigation
  - To reflect their learning

Creating a collaborative website as a group/ class.

Enterprise - create a website to support their entrepreneur project e.g. Christmas / summer fete.

⭐ Skills ⭐

Planning

Learners research effective website features before co constructing success criteria and planning their work (considering audience and purpose).

Navigation

Consider and plan how the content will be structured and navigated through flowcharts or site maps.

Create

Create a website using basic software (i.e. Google Sites) containing text, images and multimedia components which are produced in other digital tools.

Design Assets

Produce original design assets to be used as buttons or banners.

Format

More complex website features are used effectively e.g. embed a video or a link to another website, use action buttons to link to another website or a webpage.

Evaluating and Improving

Learners are able to give specific reasons orally or in writing for the design and content of their own digital work or the digital work of their peers. Make improvements to their website in response to the feedback given.

PS4 - Increasing complexity

What does good look like?

Learners would apply knowledge, skills and understanding to identify audience needs and plan digital products and communications.

Progression in website design will consider more advanced aspects e.g. viewer platforms, accessibility, readability, quality of digital elements and effective navigation structure.

Learners will evaluate feedback gained during the development process to establish views and feelings in the context of the target audience, making changes where appropriate to ensure that it meets the brief.

How about...

Create a multimedia catalogue for a chosen organisation developing a house style and ethos.

Think about creating an effective navigation system

Include a proportion of text and images suitable for the intended audience

Images can be created and not imported from a library or the web

The site could include original animation or an animated movie

The website could include original sound, music or narration

⭐ Skills ⭐

Planning

Learners select and use various planning methods (including non digital planning methods) independently according to the digital task taking into account the output and criteria of the brief.

Create

Create a website using Google Sites containing a variety of multimedia components for a range of audiences and purposes. Use design tools and adapt themes and colours to suit the purpose. Create master templates of pages to ensure uniformity.

Format

Advanced website features e.g. embedding live documents, use of appropriate styling, use of navigation tools from a library of facilities provided by the software, hyperlinks, hotspot (using images to hyperlink), ensuring text is fit for purpose.

Accessibility

Improve viewer experience / accessibility by using favicons, alternative image text, announcement banner, table of contents and logo.

Evaluate and improve

Learners demonstrate good evaluation of digital products by thoroughly considering feedback in the context of the target audience to critically and objectively evaluate the extent to which the final digital product meets the scenario’s aims and objectives. Learners clearly identify the potential for a range of further improvements, with suggestions for how these may be made.

PS5 - Advanced Website Design

What does good look like?

Learners demonstrate a deeper understanding of their target audience by conducting research to identify their specific needs, preferences, and behaviours.

Learners demonstrate proficiency in more advanced aspects of website design, including the consideration of viewer platforms (e.g. responsive design for different devices and browsers), accessibility (ensuring compliance with accessibility standards), readability (choosing appropriate fonts, sizes, and spacing), and the overall quality of digital elements (e.g., high-resolution images, optimized multimedia content).

How about...

Building on progression step 3 and 4 learners can plan and build a websites for a specific brief.

⭐ Skills ⭐

Planning

When planning a website, learners effectively and progressively increase the complexity by considering the target audience, defining clear objectives, and outlining the website’s structure and content.

Format

Learners would develop a sophisticated navigation structure for their website, ensuring logical organization of content, intuitive menus, and effective internal linking. They would consider user experience principles to enhance ease of use and facilitate seamless navigation for the target audience.

Create

Other learners can be added to collaboratively develop the site. Learners will demonstrate the ability to integrate diverse multimedia components into their websites, such as videos, audio clips, interactive elements, and embedded content from external sources. They will strategically select and position these components to enhance engagement and convey information effectively. By establishing consistent elements like headers, footers, navigation menus, and content sections, they will enhance the overall visual coherence and user-friendliness of the website.

Evaluation and improving

Learners can share ‘view only’ drafts of the site to gather feedback. Learners would demonstrate the ability to iterate and improve their website based on feedback received during the development process. They would actively seek feedback from the target audience and use that feedback to make informed decisions and implement necessary changes to align the website with the original brief and meet audience needs.