Soal LKS Nasional [2017] Web Design Part 1

Lomba Kompetensi Siswa atau yang biasanya disebut LKS adalah Kompetisi tahunan antar siswa jenjang SMK sesuai dengan bidang keahlian yang diajarkan pada SMK para peserta. LKS setara dengan OSN (Olimpiade Sain Nasional) yang diadakan untuk SMP/SMA.

Bagi Pemenang LKS tingkat Nasional akan diberangkatkan dan mewakili Indonesia ke ASEAN Skills dan World Skills Internasional Competition. 

Siswa yang mengikuti LKS Nasional ialah siswa yang telah lolos melalui seleksi tingkat Kabupaten dan Provinsi.

Lomba Kompetensi Siswa diadakan setiap tahun. Kegiatan ini merupakan salah satu bagian rangkaian seleksi untuk mendapatkan siswa-siswi terbaik dari seluruh Indonesia yang akan dibimbing lebih lanjut oleh tim bidang kompetisi masing-masing dan akan diikutsertakan pada kompetisi keahlian tingkat internasional.

Bidang Yang Dilombakan

  • IT - Web Design
  • IT - Networking Support
  • CADD Mechanical Engineering
  • CADD Building
  • Mechatronics
  • Web Design
  • Animation
  • Telecommunication Distribution Technology
  • Electronic Application
  • Confectioner
  • Automobile Technology
  • Restaurant Service
  • Jasa Boga (Cooking)
  • CMillingNC
  • Production Machine
  • Electrical Installation
  • Bricklaying
  • Joinery
  • Plumbing and Heating
  • Cabinet Making
  • Wall and Floor Tilling
  • Printing
  • Lifestock
  • Kriya Kayu (Wood Craft)
  • Kriya Kulit (Leather Craft)
  • Kriya Logam (Jewellery)
  • Kriya Tekstil (Textile)
  • Kriya Keramik (Ceramics)
  • Chemistry
  • Mobile Robotics
  • Pattern Making
  • Refrigeration
  • Welding
  • Body painting
  • Graphic Design Technology
  • Autobody Repair
  • Tata Busana (Ladies Dressmaking)
  • Ladies and Mens Hairdressing
  • Beauty Therapy
  • Akomodasi Perhotelan
  • Tourists Industry
  • Caring
  • Secretary
  • Marketing
  • Industrial Control
  • Accounting
  • Nautica
  • Post Harvest Technology
  • Fishery
  • Agronomy

Di postingan ini, saya akan membagikan Soal Lomba Kompetensi Siswa (LKS) Tingkat Nasional tahun 2017 lalu. Kali ini akan saya bagikan 2 modul terlebih dahulu. Module A dan Module B. Lansung saja lihat soalnya dibawah ini ya:



This module has the following files:
  • MODULE_A.docx

“Chauffer Cars” is a company service specialise in wedding service car. They need a new website to support their business which include their service, products offer and reservation. The target audience for their website is young-couple whom are going to marriage.
Description of project and MODULE

Your task is to create a responsive design of a website and a logo for the “Chauffer Cars”. You have been provided with text and images that will help you in your design. You also have been provided with “Chauffer Cars” old website.

You should ensure that there is sufficient text and images included in your design to give a good overall feel of how the website will look once constructed. You may add other text and information if you wish. Use of text will only be judged on design, not the meaning of the text.

You should create mock-ups of your re-design to be presented in individual files for each of the defined devices and resolutions (width x height):
  • Computer - 1440 x 900 pixels
  • Tablet - 768 x 1024 pixels
  • Smartphone - 320 x 480 pixels
The above resolutions are the devices standard format. Additional space may be used if needed to illustrate scrolling or swiping as required by some devices. 

If you incorporate menus or other features into your design you may illustrate these by include additional views, either within the design or in additional files. Features and functionality should be self-explanatory, no written instructions are allowed in the mock-up files.

All mock-ups should be presented in real pixel size and must include a red line, less than 3 pixels wide, showing the device screen border resolution.

This module involves designing the home pages of a website and a logo for the organization “Chauffer Cars”. With requirement listed below:
  • A logo which will be the corporate identity for the organisation. Logo must be used as part of your design. Your logo should represent the organisation and the subject of the website. The logo must be used in the design.
  • Search cars and offers
  • Sign-up component
  •  Log in component
  •  Listing of at least 3 (three) cars, each including:
  • Thumbnail image
  • Car Information (name, short description, etc)
  • Price information (rent, usage, driver, etc)
  • Current location and time
  • User testimonial
  • Reservation component
The design of front page must contain at least all information included on the original website. The computer view should illustrate a hover/mouse over effect.

This is a design module, no coding is allowed and all interactions should be visible in the design images.

Your design will be assessed by industry standards and needs to incorporate best practice of responsive design.

Instructions to the Competitor

Save your file in the root directory of the folder named "XX_MODULE_A" where XX is your computer number. Naming of files:
  • Computer: XX_computer.png
  • Tablet: XX_tablet.png
  • Smartphone: XX_smartphone.png
You can create additional images (optional) per resolution to highlight hidden elements, animations or any additional information that will aid in the development of the website.

Naming of additional files:
  • Computer: XX_computer_2.png, XX_computer_3.png
  • Tablet: XX_tablet_2.png, XX_tablet_3.png
  • Smartphone: XX_smartphone_2.png, XX_smartphone_3.png
Save the source files of images to a folder called "XX_source_files" inside "XX_Module_A" folder. Source files are the files containing the layers, development files, i.e. .psd/.ai/.jpg/.svg/…

Give red box which will indicate how the web page looks on screen. Below is an example of a computer display that you will submit.



This module has the following files:
  • MODULE_B.docx
    • Media_LKSN_Module_B-320.png (PNG file for Design)
    • Media_LKSN_Module_B-768.png (PNG file for Design)
    • Media_LKSN_Module_B-1440.png (PNG file for Design)

You need to implement a layout for coworking space called Workthink. The UI designer has designed the interfaces for you to make use of. You can find the design in the project files supplied.

We want you to follow the design to implement the layout by using HTML and CSS.

The layout needs to work in different screen resolutions. From the provided material, you can find different design screens at width points from 320px width to 1440px width.
Description of project and tasks

There are following sections that you need to implement in your layout.
  • Website Heading
  • Navigation
  • About section
  • Benefits section
  • Plans section
  • Testimonial section
  • Newsletter section
  • 3-Footer sections
  • Copyright section

This module tests your HTML and CSS skills. You should not modify the given JavaScript code in this project. We will disable any extra JavaScript during the marking.


You should apply proper accessibility roles to the essential elements.

Text selection

There is a text selection background colour applied to the web page. The colour follows the major colour of the website, which is gold colour.

You will be provided with the following images:
  • benefit.jpeg : image for benefit section
  • newsletter.jpg : image for newsletter section
  • people-1.jpeg : our user
  • people-2.jpeg : our user
  • people-3.jpeg : our user
  • plan-1.jpeg : company product member plan
  • plan-2.jpg : company product privilege plan
  • plan-2.jpg : company product virtual office
  • wallpaper.jpg : office bird view
  • The HTML is valid to HTML5 through W3 validator
  • The CSS contains no syntax errors
  • The people hover animation matches the provided motion design.
  • The position of web page sections matches the given design.
  • All photos, except explicitly mentioned, must be implemented by img tag.
  • The placement of script tag matches the latest practice.
  • All text is indexable.
  • All image has alternative description.
  • There are at least 5 comments in the HTML document.
  • There are at least 5 comments in the CSS document.
  • The text selection matches the given design.
  • The HTML structure is extensible and maintainable.
  • The Grid structure is extensible and maintainable.
  • The CSS and coding style is readable and easy to maintain.
  • Proper accessibility roles are applied to HTML.

Instructions to the Competitor

  • Save your files in your root directory on the server called "XX_Layout_Module_B"
  • where XX is your computer number.
  • You are required to submit the implemented website according to the requirements.
  • Please make sure you name the HTML file index.html.

Sumber : ditpsmk

Akhir Kata

Demikian ulasan tentang Soal LKS Nasional [2017] Web Design Part 1 semoga bermanfaat, pantau terus artikel terbaru lainnya di Fivser dan Terima kasih sudah berkunjung.

Content Creator For

Post a Comment

Jangan Spam, Jangan Berkata Kasar dan Kotor
© Fivser. All rights reserved. Developed by Jago Desain