Web Project | Responsive Web Site

The primary goal in this module is to explore the Web Design process. The secondary goal is to introduce you to Responsive Web Design. It should take 3 to 4 weeks (30-40 hrs). There are two learning tasks followed by an assessment task to test your skills and knowledge for the unit.

The Unit
BSBDES201 Follow a Design Process is all about applying a basic design process to a problem. It covers the following steps:

 

www.training.gov.au has more details on the unit: BSBDES201 Follow a design process

Recognition of Prior Learning (recognition)
If you feel you already have the necessary skills to be assessed for this units, then simply do the two Assessment Tasks or apply for "Recognition".

If you choose Recognition, check whether the evidence you have matches the Elements and Performance Criteria from the units.

Evidence can be gathered from sources such as Position Statements, Job Descriptions, Work Examples, Projects, Portfolios, References, Peer Assessments, Awards, Reviews etc. See your teacher on how to apply for recognition.

If however, you feel you don't have the skills or evidence yet, then read on.

Learning Task: Responsive Web (2 hrs)

This task lets you explore the terminology and concepts behind Responsive Web Design.

Answer these short questions in your own words using MS Word, around 2-3 pages A4.

  • What's Responsive Web Design? Why is it the recommended layout strategy to use for web layouts?
  • What's the Bootstrap Framework and why is it popular with web designers? Where can you download the assets to make a Bootstrap-based website? Name two other responsive frameworks.
  • Find a site you like that's responsive and take a screenshot of it at maximum size and again at minimum size. Include both screenshots and the URL.
  • Find a site that doesn't "respond" to changing display sizes, take a screenshot of it at maximum size and again at minimum size. Include both screenshots and the URL.

 

Submission Guide:
Submit in a Word doc with cover page (your name, course, unit and task ) via email.

 

Chris Adams 2017

Learning Task: Mobirise (3-4hrs)

Introduction
This task introduces you to Mobirise. It's one of the easiest rapid-prototyping web design tools out there. Simply download, extract the zip and install on your mac or PC to start making responsive websites.

Task
With no pre-production or planning, make a site using Mobirise comprising of three pages. Customise the navigation to link all three pages together. Avoid the temptation of making single long scrolling page.

The theme is up to you. The primary goal here is learning the interface.

Add as many "blocks" as you can, add your own copy, background images and customise the typefaces.

Replace the Mobirise logo with your own. Add a form and add the Google Map block.

Submission Guide
Export your site then zip it up and submit via email or your preferred cloud storage for feedback.

Supporting Learning Resources
Watch the demo. videos available from our shared Google Drive for help on using Mobirise. Further support can be found in our Web Publishing forums.

Chris Adams 2017

Assessment Task : The Web Design Process (8-12 hrs)

Introduction
This assessment tests your understanding of a web design process. If you've completed the Design Module you should be familiar with a web design process, it was part of the Assessment.

Brief:
Based on your preferred web design process (shown below is a recommended one from Visually) develop a site for a client.

How you code/ develop the site is up to you; hand-coded with supporting CSS/JS frameworks, Mobirise, Adobe Muse, Dreamweaver, Wordpress CMS, Wix, Weebly, Squarespace.

Note: Don't make it too big. The site needs to be relatively small; 5-10 pages max.

Deliverables:

  • Record of Client feedback for Landing Page mock-up and the final review before launch; ( evidence via email is recommended)
  • A Client Needs Survey filled-out by your client (MS Word OR use your online form and export in your preferred format)
  • Site Map (bubbl.us, .jpg )
  • Entry page mock-up (.jpg)
  • The coded site in a zipped folder including all assets
  • Site published to the server
  • Validation, accessibility & link checker reports (MS Word)

Submission Guide

  1. Publish your site and submit your site URL via email.
  2. Gather all deliverables into a single zip folder and submit using your preferred cloud storage.

Supporting Resources
Our Web Publishing Forum offers support and help with clarifying any part of the task. The "Develop a client needs survey" thread in our Web Publishing Forum holds useful info. related to this task.

Assessment Guide
You will be assessed using these criteria:

  • Neatness and completeness of work (all deliverables supplied, site published)
  • Working links both internal (between internal pages) and external
  • Adherance to the Principles of Design (flow, layout hierarchy, focus, unity of type, colour)
  • Content needs to adhere to copyright license (see your teacher if unsure)
  • All images to have alt-tags for both accessibility and SEO
  • Include meaningful page titles and meta-tag description
  • You need to integrate at least┬áthree┬áthird-party applications such as Google Fonts, Maps, Calendar, Facebook, YouTube, Photobucket, Slideshare, JQuery slider etc. into your design
  • Spell-checked and free from errors
  • Responsive

Chris Adams 2017