Design and deliver

Ready-made website builders

1. State that the easiest tools to use to create a website for their portfolio are online website builders.
2. Divide the class into three groups and have each group examine one of the following free website builders for the design category ‘Portfolio’ (each web builder site below has a Portfolio template category). 
   (Teacher note: Although these sites are free they may require registration. You may choose to create and provide a login.)
   
   • Wix
   • Squarespace
   • Weebly
3. Have each large group meet, discuss and report back to the class the criteria required by a website to satisfy each of these terms:
   
   • functionality
   • accessibility
   • usability
   • aesthetics
   • features: for example, blogs, online store, social media widgets, other feature widgets, domain registration.
4. Ask students to (individually) find a website they believe meets the above criteria.

This lesson sequence will emphasise the importance of a designer focusing always on users’ needs in any design process. We focus on website design and examine functionality, accessibility, usability and aesthetics. Learners observe and are encouraged to ask clarifying questions.

Flexible web site design

1. Explain that responsive web design ensures websites adapt seamlessly to different screen sizes (e.g., desktop, tablet, and mobile).Highlight that this avoids the need for separate designs for each device.
2. Explore this demo website called Pigeon which illustrates how responsive design works. Discuss how elements on the slides adjust fluidly to fit varying screen sizes.
3. Introduce CSS media queries, which apply different styling rules based on device characteristics like screen size, resolution, and orientation. Explain the concept of breakpoints, where the design adjusts at specific screen widths, for example, mobile vs. desktop. Emphasise that responsive design allows a single layout to work across multiple devices, saving time and ensuring consistency.
4. Revise a key point of responsive design is 'Mobile First' which means designing for mobile before designing for desktop or any other device. This will make the page display faster on smaller devices.

Explain the task of creating and building their own portfolio-based website. Steps may include:

• Create a new site, including a 'Master' page and a 'Home' page.
• Add two additional pages: 'Portfolio' and 'My profile'. Label these pages with placeholder text.
• Explain that the 'Portfolio' page is where you showcase your best work, projects, or achievements in a clear and professional way.
• On the 'Master' page consider a header (banner) and a footer. Ensure they adjust to the full browser width.
• Use a horizontal menu to link all pages and customize states for normal, rollover, mouse down, and active.

Add Content

• Students may want to create a logo and import their logo for the header and background images for each page. Remind students to centre and scale the images.
• Use web-safe fonts or specialised fonts for titles and body text. Discuss the difference between standard web fonts and custom fonts.
• Students could consider design elements such as a slideshow gallery to the portfolio page and social media links to the footer.

Discuss how to test responsiveness:

• Resize the browser window to observe how content adjusts. Add breakpoints where necessary to ensure the layout looks good on desktop, tablet, and mobile screens.
• Adjust elements such as buttons, text, images for each breakpoint to maintain usability and design consistency.

Provide accessibility and design tips:

• Ensure buttons are large enough for touchscreens (at least 40px by 40px).
• Use high-contrast colours for readability, especially for devices used in bright light.
• Optimise for slower bandwidth by minimising large images or complex elements.
• Consider using a hamburger menu for navigation on smaller devices.

1. Students complete their own portfolio-based website using a suitable platform, incorporating the guiding steps explored in the learning construction.
2. Once the students have a working website, ask them to evaluate their own site using relevant criteria. Provide students with site design comparison worksheet.  They will score each website from 1 to 5 on the following criteria, and comment on any special features noted.
   • Functionality
   • Accessibility
   • Usability
   • Aesthetics
   • Features: (for example, blogs, online store, social media widgets, other feature widgets, domain registration)
3. Have students provide feedback on each other's design for constructive feedback.