To create an interactive website – KNT5
Elements of the evaluated competency
Relevant performance criteria specific to each element
7. Design the interface
7.2 Functional and coherent layout of the interface components
7.3 Layout of interface elements in line with aesthetic and efficiency criteria
8. Diagram the navigation and interactivity of pages
8.1 Definition of tasks related to navigation objectives
8.2 Definition of interaction modalities and functions
8.5 Complete and precise diagramming of interactive elements
8.6 Clear definition of the navigation tree structure provided in the scenario and storyboard
8.7 Coherent organization of content elements
8.8 Thoughtful simulation of interface functionalities
8.9 Production of conceptual models with technical specifications
Evaluation Details
You already analyzed your company’s needs, determined its target audience, studied the competition, proposed a communication strategy and came up with innovative ideas in a brainstorming session. You concretized your ideas in a tree structure diagram of the website, which was approved by your managers.
To complete this assignment, you will need:
• Practical Assignment 1
• Adobe Photoshop
• Adobe Illustrator
Scenario
Your company has approved your proposals for their website. You now have to propose a layout and graphic design for the website’s master page.
The master page must include:
• a header
• a navigation menu
• a footer
• a “Content” section
Instructions
To complete this assignment, you must:
• Create the wireframe for the website’s master page using Photoshop. Base your design on the standard resolutions for websites viewed on a computer. This wireframe must contain:
• the page’s main sections
• headings for the sections
• dimensions of the sections in pixels
• navigation buttons to get from one page to another
• Create the graphic mock-up of the website’s master page in Photoshop (or Illustrator, if you want to create shapes and illustrations). The graphic mock-up must:
• present a graphic design for each section of the wireframe
• use the same dimensions as the wireframe
• include a legal notice in the footer
• display navigation buttons prominently
• represent the site’s identity through a logo or design (you can find it online)
• present a harmonious colour scheme
• Using your master page wireframe, create a wireframe for the website’s home page. It must:
• have a custom layout
• contain dummy text
• contain at least one image related to the company’s industry