Designing a website Course

Lesson 1 – What is WebPlus 6

Lesson 2 – Getting Started with WebPlus

Lesson Overview:

In this lesson, you are going to be given an overview of Serif webPlus and how to use some of the more common tools and elements. You should follow the video tutorial, pausing as you go along. Before moving on to the next lesson, make sure you have completed all of the lesson tasks below.

 

Lesson Tasks:

  • Open WebPlus and start a new project using a template (Leave template dialog open)
  • In the template box choose a theme for your template
  • From the template box choose three pages before pressing open
  • Save your project now (AS: Web Demo Project 1)
  • Preview your site in the navigation bar
  • Edit text placeholders using the tools demonstrated in the tutorial
  • Update the text on the master page to represent your demo project
  • Delete a text frame
  • Add heading text
  • Move design elements around
  • Add a picture in the picture placeholder frame and edit with the tools described in the tutorial
  • Add a new picture fame, then add new picture from picture assets tab
  • Add new page
  • Add new child page

 

Assessment:

By the end of this lesson you will have a four page website mock up, where you have edited the majority of the elements on the pages / master page.

This lesson should be saved to your web design portfolio folder, Named: Web Demo Project 1

 

Lesson 3 – Hyperlinks and Anchors

Lesson Overview:

In this lesson, we will learn the various methods for linking content on our pages and different methods for displaying this content. Please complete the lesson tasks below before moving onto the next lesson.

 

Lesson Tasks:

  • Open your Web Demo 1 Project file in WebPlus
  • Add a new Text Fame on the master page
  • Link this text to one of your web pages
  • Also in this text add a link to an external web page
  • Choose how you want the page to open, experiment with: lightbox, blank and same
  • Create anchor links on one of your pages to help users navigate through a page (this is demonstrated in the tutorial)
  • Create a back to top anchor link on one of your pages
  • Add a picture link on one of your existing pictures, make this a lightbox link

 

Assessment:

By the end of this lesson, you should have a full navigation system for your demo site. Get one of your peers to use your site in a web browser and get them to evaluate the ease of use. Navigating is one of the big factors to whether a website will be successful or not, so testing is a very important part of this process.

At the end of this lesson save your project to your web portfolio folder AS: Web Demo Project 1.2

 

Lesson 4 – Navigation Bars

Lesson Overview:

In this lesson, we will look at creating a new navigation menu and customising it for child pages. Please complete the lesson tasks below before moving onto the next lesson.

 

Lesson Tasks:

  • Add a few child pages to each of your main pages on your site
  • Create a Master Page B for your site
  • Add a new navigation system to Master Page B and design this page further
  • Add the Master Page B template to your new child pages
  • Setup your new navigation system on Master Page B to Display child pages
  • Take your time and make sure your navigation works as expected

 

Assessment:

By the end of this lesson, you should have a secondary navigation system that displays a list of child pages for that section of your site.

At the end of this lesson save your project to your web portfolio folder AS: Web Demo Project 1.3

 

Lesson 5 – Adding a slider or animation banner

Lesson Overview:

In this lesson, we will look at creating a slider and an animated banner. Please complete the lesson tasks below before moving onto the next lesson.

 

Lesson Tasks:

  • Create a new slider on one of your pages
  • Add new picture to your slider
  • Customise your slider to your liking
  • Add a foreground panel to your slider
  • Preview your design in the browser

 

Assessment:

By the end of this lesson, you should have a new custom slider that fits the design of your site.

At the end of this lesson save your project to your web portfolio folder AS: Web Demo Project 1.4

 

Lesson 6 – Creating a website from scratch

Lesson Overview:

This lesson will demonstrate how to start a web project from scratch use Serif WebPlus. Follow the tutorial and then extend it by adding the tools and information you have learnt from the previous lessons.

 

Lesson Tasks:

  • Start a new project and save it, AS: Web Demo Project 2
  • Select the settings that you want for your new site from the New Site dialog boxes
  • Customise your site using the descriptions from the tutorial as your guide, remember to pause the video as you go along
  • Once this tutorial has finished, continue add the elements and information that you have already learnt from the previous lessons

 

Assessment:

By the end of this lesson, you should have a three-page site that you have built from scratch using your knowledge from this lesson and previous ones.

At the end of this lesson save this new project to your Web Portfolio folder, AS: Web Demo Project 2

 

Lesson 7 – Project Brief

For your final assessment, you will need to complete the below project brief and associated tasks. Hand all finished work into your teacher and keep a copy of your portfolio for your records.

 

Project Brief: My Portfolio

Create a website that reflects you and your accomplishments, achievements and interests. This site should be completely factual but in the interest of your safety and security follow the below instruction.

You should not include the following information:

  • Surname,
  • Date of birth,
  • Address,
  • Phone numbers,
  • email addresses,
  • Social media profiles
  • parents names and information,
  • place of birth

 

Project Objectives: 

Planning:

  • 25 Marks: Plan your project using a wireframe prototyping method, draw this on paper. For final submission, this will need to be included in your final portfolio as a digital asset (take a picture of your drawings)
  • 25 Marks: Must be well-designed website that reflect your planning

Making:

  • 10 Marks: A minimum of 4 pages. Could include: Your profile Page, Interests Page, Hobbies Page, Achievements Page, Awards Page etc…
  • 10 Marks: Must include a portfolio page. This page should be used to demonstrate various projects you have been involved in.
  • 5 Marks: Must include Text that has been suitably formatted
  • 5 Marks: Must include Pictures / slide shows
  • 5 Marks: Could include video and audio files
  • 5 Marks: Must have navigation that works
  • 5 Marks: Must include links and anchors
  • 5 Marks: Must include a master page
  • 50 Marks: Final submission should be an exported HTML folder (NOT a WEBPLUS file). You will lose all 50 marks if you do not complete an HTML export.

Evaluation:

  • 50 Marks: You must submit a written evaluation describing the success of this project. full details are on the evaluation submission page

 

Lesson 8 – Planning your project

Lesson Overview:

As part of this project, you will need to demonstrate that you understand how to plan and develop a website wireframe prototype. You will need to produce a minimum of 4 slides demonstrating your intentions and the outline of your website project.

 

Lesson Tasks:

  • Wireframing should include all of the basic information about your site design and the principles of your design layout.
  • Write down basic instruction for what will be displayed on each page
  • Use placeholders for images, text, videos etc.. as demonstrated on the video
  • Your wireframe prototype will be marked on the clarity of your design, so do a good job!

 

Assessment:

Include your final wireframe prototype in your ‘Web Design Portfolio’ folder. Include a minimum of 4 pages, this should be hand drawn but submitted as a digital asset e.g. Take pictures of your design and include them in your portfolio. You will be assessed on the quality of your drawing and the clarity of the information in each page.

 

Example 1:

sketched_wireframes

 

Example 2:

 

wireframe-sketch-07

 

Example 3:

BPgraphics-UI-Sketch

 

Lesson 9 – Evaluating your project

evaluation

 

The final part of this project is to create and submit your project evaluation. Write a clear and concise evaluation based on the following four points.

Submit this evaluation with your planning and final HTML project as part of your ‘Web Design Portfolio’ folder.

 

Evaluation:

  • What did you learn during the up and running stage of this course and did you develop any of these initial ideas further?
  • Describe your thoughts and processes during the planning stages of this project?
  • In your own words, which parts of this project did you find most challenging and why?
  • How would you improve this project if you were to do it again?

Leave a Comment