Web Design

The authentic activity was designed by H. I. as part of CITE204 - Instructional Design course. The activity was designed for learners who are studying computing technologies.

Introduction

In this learning environment, a website design company was used as a metaphor in order to provide learners with a real-world situation. A manager, a design team coordinator and interns in the design team of the company exist. The design department is one of the many departments in the company. There exist other departments like the animation, graphic, web-hosting departments, etc. The interns in the design department are the learners interested in learning how to practically design a website using the HTML language and the design team-coordinator is the instructor.

Project Scenario

Hello staff, as you all know it’s our company’s (HenOz Website Design Company) 10th-year anniversary celebration and as our custom is every year we select random clients’ requests and offer our services to them for free as a way of giving back to the community. One of the lucky clients for this year is The Eagle-Girl Initiative (TEGI) organization.

The Eagle-Girl Initiative (TEGI) is a health organization committed to promoting health in the community and Miss Ozi the CEO of the organization has just met with the company’s manager requesting a website to be designed for the organization since they plan to launch the organization.

The organization organizes educational online seminars, events, practical workshops, and keeps to date the various health days of the year (e.g. World AIDS day) to help provide the community with information on how to be healthy and live better lives.

The organization’s aim with this website is to go public in other to reach a wider community that is not yet aware of their services in order to make sure that they receive important information concerning health and healthy living. Green, which represents life and health to the organization, is the main color symbol.

The design department is responsible for the interface design of this website and the team-coordinator will work directly with all interns on this project. Every resource needed for the design is provided for in the resources archive and the team coordinator’s contact is readily available to you for any further assistance.

The launching of the organization is in 4 months’ time and they hope to also present the website at the time of launching.

Description of the Learning Environment

Figure 1: The Website Company’s main Office

Figure 1 above shows the learning environment that the student will operate with to fulfil the aim of the course which is as stated above to learn how to develop a website.

This a very interactive environment and the function of each element will be explained below in no particular order.

External Resources:

The internet provides a lot of important resources as well as not so important ones. The external sources page (Figure 2) is provided for learners with some important sources like links to websites, tutorials, code editor download page, etc. This will provide them with useful links to needed resources for their learning. They’ll also get to see expert models to what they intend to do.

Figure 2: External sources

Project Resources:

In order to make learning easier for learners they are provided with sources such as basics tools for designing a website, sketches of sample storyboards, video tutorials on how to draw a storyboard, how to choose a good code editor, and the tutorial to learn HTML coding. Figures 3 and 4 are the screen clips for this page.

Figure 3: Project Resources 1
Figure 4: Project Resources 2


Figure 5: Meeting room

Calendar:

The calendar will help learners to schedule their tasks and keep in mind the duration of the various task phases and the overall project to be done.

Meeting Room:

The discussion forum named Meeting Room (Figure 5) is where learners can share their ideas, provide feedback to the instructor and their peers. To accomplish this, an online forum will be created using Google classroom and the link made available to them. The learners will be able to access each sub-forums from the classroom. The forum also presents a platform where learners can collaboratively construct knowledge.

To provide a very efficient forum for discussion, the instructor provided some focus areas.

FAQ

This section contains most asked questions by learners about various aspects of the project. This is will be the first place learners are expected to go to find answers to any question or idea they’d like to get because chances are that they have been addressed already.

Deadlines

This section is provided to allow learners to discuss issues related to the tasks and overall project deadlines. For example, there might be a request for extensions or change in presentation time and this is the place where it’ll be addressed.

Resources

Learners in their personal research might find some helpful resources such as tutorials for a particular task, links to free images and software needed for their work. This is where they can share this information with their peers and this is an important way to encourage collaboration among themselves.

Feedback

The instructor expects learners to provide feedback on their learning journey. This section provides the platform for such. For example, the instructor might want to know the learners' views on certain aspects of the course such as the assessment, dates, etc.

Instructor box

This is where learners can chat with the instructor directly. They can send their work and expect a more detailed and immediate response from the instructor.

Design Room:

The design room shown in Figure 6 was designed to provide the learners with the tasks they are required to do. Since there is just one final product to be designed by each learner, the tasks were organized in phases. In this way, learners are to go from one phase to the other and by the last phase, they should have a finished product. These tasks are designed in an authentic way in order to maintain the realism of the learning situation.


Figure 6: Design Room

Office Tour:

The office tour provides a short video tutorial to learners on how to use the learning environment.

Assessment:

This will provide the assessment criteria to the students. An authentic assessment will be employed for the assessment of learning. Students’ performances will be assessed using the finished product. This means that they will be assessed based on their ability to produce a finished product. An assessment rubric will be developed and provided to the learners in order for them to be aware of how they'd be assessed. Also, the assessment will be integrated into each task phase during the cause of learning.

Client’s Request:

This is where the learners get to know the main task that they are expected to perform. The tasks are designed in an authentic way in order to maintain the realism of the learning situation.

Websites Examples:

Example website templates are provided for the learners. This includes a catalogue of former designers’ websites. As shown in Figures 7 and 8 respectively, learners can have a look at various websites designed before by other designers which will hopefully provide some form of motivation for them to do theirs.

Figure 7: Websites Examples 1
Figure 8: Websites Examples 2

Principles of Authentic Learning

Introduction

This learning environment was designed based on the nine principles of authentic learning, as proposed by Jan Herrington and Ron Oliver (2010) in their book titled “A guide to authentic E-learning.” The characteristics of these nine elements are stated below and their application to this learning environment is also described.

Elements of Authentic Learning and their Application to this Project

1. Authentic contexts that reflect the way the knowledge will be used in real life:

To provide an authentic learning environment for learners a real-world scenario will be provided. In this scenario, learners are interns who are working as website developers in a company and the instructor is the website company’s design department coordinator. Each task will present the learners with what the client has requested. For example, the client requested for 3-8 main menu items with pages, links to external sites, videos about their upcoming seminars and events, and lots of photographs that they’d provide. Also, that green should be the predominant colour for the website because of what it represents to the organization.

2. Authentic Activities:

a. Real-World Relevance: Learners will be expected to do what real-world designers do. They are expected to understand a client’s request and develop a website based on that. Although based on the fact that they are learners they are required to present their work periodically to their superior for feedback and constructive criticism.

b. Ill-Defined, Requiring Students to Define the Tasks and Sub-Tasks needed to complete the Activity: Learners are expected to navigate their way in order to reach the desired goal. Therefore, the major task will be presented in an ill-defined format. This means that it is totally the responsibility of the learners to find out the steps, sub-steps, tools and other necessary equipment needed for the successful completion of the task. For example, learners are to decide on which code editor to use, the structure of their pages, the colours to use that will match with the main colour green, etc.

c. Comprise Complex Tasks to be investigated by Students over a Sustained Period of Time: The Provided tasks are complex and this means that learners are not expected to produce the finished product within a couple of hours, days or even weeks.

d. Provide the Opportunity for Students to Examine the Task from Different Perspectives, Using a Variety of Resources: Learners will be expected to observe the task from various perspectives. For example, as learners, they need to learn to code, as researchers, they need to research on the various tools and methods needed to achieve the main aim. Furthermore, they need to analyse the client’s expectations. Also, in the discussion forum, they are expected to provide constructive feedback to their colleagues’ work. They will also be expected to design storyboards for the activity. These will be achieved with the help of consulting various resources like the external sources, and website examples.

e. Integrated and Applied Across Different Subject Areas and Lead beyond Domain-Specific Outcomes: The finished product that will be produced by the learners will be very similar to those produced in real-world settings. So, products can be used in various domains.

f. Authentic Tasks Create Polished Products Valuable in their Own Right rather than as Preparation for Something Else: With the help of the instructors and peers, learners will be able to produce a functioning website that will be profitable to the targeted audience.

g. Allow Competing Solutions and Diversity of outcome: Although learners will collaborate in reaching the final goal, each of them will have a different product. For example, some learners might use a side navigation bar while others might use an overhead navigation bar. Also, the user-interface and stylings might be different for each learner.

3. Access to expert performances and the modelling of processes:

From the external sources that will be provided in the learning environment, learners will have access to various websites designed by professionals and they will be expected to analyse them. In this analysis, they are to observe various features such as the colour scheme, animations, and structure design, etc., used for each website. Also, from the project resources, they will be able to view some sample storyboards designed by experts. Access to these will be a model for their learning and it will enable them to construct relevant knowledge.

4. Multiple roles and perspectives:

Learners will take on various roles. For example, they undertake the role of a designer in developing the website and also learning how to develop a website. The instructor will have the role of a team-coordinator and also a website analyst. The roles they assume will determine the perspective they’ll operate from.

5. Support collaborative construction of knowledge:

The discussion forum termed the meeting room is a platform where collaboration between students will occur. They can share ideas and provide help to each other during the cause of learning. Also, learners will be expected to collaborate with the instructor whereby the instructor will provide guided and scaffolded help to learners in critical situations to ensure that they construct good knowledge to achieve their goal.

6. Promote reflection to enable abstractions to be formed:

The meeting room also presents a platform where students can reflect on what they’ve done so far as they present their work progress to the instructor. Also, uploading their work via the discussion forum to get feedback from their peers would encourage reflection on their work. Learners will present the tasks provided in different phases and finally the finished product at the end of the duration. After each presentation, they’ll be encouraged to reflect on their project so that they can understand better and improve if need be on their skills.

7. Promote articulation to enable tacit knowledge to be made explicit:

Learners’ participation via the discussion forum provide a good platform for articulation. They will be expected to give feedback on their peers’ work and provide suggestions to them if necessary. A weekly mini-presentation time will be integrated into their learning to enable them to articulate their progress effectively. Also, learners will be expected to express why they chose a certain way to achieve their goals.

8. Provide coaching and scaffolding by the teacher at critical times:

The instructor will be expected to use the coaching and scaffolding method to help the learners. The instructor will provide learners with relevant material necessary to help them instead of giving direct instructions to them. For example, the external sources are provided as a way of exposing the students to how a website looks like. The instructor’s box in the discussion forum is another example where coaching and scaffolding by the instructor to the learners will occur. Also, the instructor will provide guided help to the learners in situations where they’re stuck during the process of learning. For example, learners might be stuck with a part during the coding, it is the responsibility of the instructor to provide them with the needed assistance.

9. Provide for authentic assessment of learning within the tasks:

An authentic assessment will be employed for the assessment of learning. Students’ performances will be assessed using the finished product. This means that they will be assessed based on their ability to produce a finished product. An assessment rubric will be developed and provided to the learners in order for them to be aware of how they'd be assessed. Also, the assessment will be integrated into each task phase during the cause of learning.