Competition Overview

Web Design

Competition Overview

Competitors will receive a professional brief and must design a user-friendly website from conception to completion in a live competition. The competition includes a range of competencies for web designers and developers. The Regional Competition will include the creation of a responsive portfolio website that will be tested using Chrome and a smartphone.

The National Final is made up of 4 modules:

· Design

· Layout

· Client Side Customisation

· Server Side

The National Final will include designing a website from a given brief, creating a website from a given image, use of client side customisation and JavaScript and finally, creating a database for a company and making a database secure using PHP.

If you are invited to the National Final, a training manual will be given to improve your skills towards the level of the National Final.

Core Competencies

Core competencies and standards for WorldSkills UK Skills Competitions activities / Qualifier / UK Final / Team UK
Competency / HTM5 & CSS 3 / x / x / x
Standards / HTML5 and CSS3 standards with no validation errors
Effective use of classes
Effective and meaningful commenting of code
CSS Animations
Competency / Responsive Web Design / x / x / x
Standards / Utilising Responsive Grid Systems
Responsive Design for Mobile
Responsive Design for Tablet
Competency / Contemporary Design / x / x / x
Standards / Contemporary design standards and trends
Material Design
Typography in design
Layout in design
Accessibility in design
Contemporary colour palettes
Competency / JavaScript / x / x
Standards / Externalisation of JS
Use of jQuery
Creating JS Animations
jQuery sliders, accordions and other elements
Personalised error codes in forms
Competency / PHP / x / x
Standards / Web Security using PHP
Login systems
Automatic updates of tables within websites
PHP and PHPMyadmin
XAMPP
SQL (Team UK only)
Competency / Database creation for a website / x / x
Standards / ERD creation
Database Security
Database creation
Database Queries (Team UK only)
Linking Databases with websites
Competency / Understanding Client Briefs / x / x / x
Standards / Reading briefs
Being able to breakdown client expectations
Utilising client colours schemes, logos and fonts

Note: Core Competencies are tested, identified and measured as recognition of the competition level and duration.

General Instructions

Entrants should have experience of creating and designing web sites. Competitors should also be able to work with HTML5, CSS3, CSS Animations, JavaScript, jQuery and some PHP at the National Final – A Training Manual will be given covering all aspects of the Final.

The Regional heat will involve HTML5, CSS3, responsive design and CSS animations.

Web Design

Assessment Summary

Practice & Preparation

· Prepare using the online tools available at: https://worldskillsuk.org/

· Where possible practice the tasks you don’t use in your everyday work or course.

· Speak to your employer or lecturer to ask for help with learning or equipment where needed.

Marking Criteria

Criterion ID / Description / Max. Marks
A1 / Design of the Desktop website / 15
A2 / Design of the Mobile website / 15
B / Code layout, commenting and use of HTML5 and CSS3 / 15
C / Responsive Design / 10
A(subj) / Design of Desktop and Mobile / 15
B(subj) / Efficiency of code and usefulness of commenting / 15
C(subj) / Replication of image to website / 15
Total Marks / 100.00

Task Breakdown

Competitors will be given a client brief to complete within 4 hours.

The client brief will give an image of a completed website, both desktop and mobile version will be supplied.

Competitors will be expected to use the colours, fonts and images provided in order to recreate the image into a fully functional website. Interactive areas will also be given in the client brief.

Competitors must use their time wisely to create the finished product, as well as implementing fully functional responsivity.

A responsive grid system will be implemented to improve the transition of desktop to mobile.

Further sources of information and websites

www.w3schools.com

www.codeacademy.com

https://www.tutorialspoint.com/php/

http://www.webdesignerdepot.com/