BA. (Hons) Graphics Design

Size: px

Start display at page:

Download "BA. (Hons) Graphics Design"

Felicia Wheeler
5 years ago
Views:

BA. (Hons) Graphics Design Cohort: BGD/16A/FT Examinations for 2018 / Semester 1 Resit Examinations for BGD/15B/FT MODULE: Advanced Web Design MODULE CODE: WAT3110C Duration: 2 Hours Instructions to

1 BA. (Hons) Graphics Design Cohort: BGD/16A/FT Examinations for 2018 / Semester 1 Resit Examinations for BGD/15B/FT MODULE: Advanced Web Design MODULE CODE: WAT3110C Duration: 2 Hours Instructions to Candidates: 1. Answer all questions. 2. Questions may be answered in any order but your answers must show the question number clearly. 3. Always start a new question on a fresh page. 4. All questions carry equal marks. 5. Total marks 100. This question paper contains 4 questions and 9 pages. Page 1 of 9

2 QUESTION 1: (25 MARKS) ANSWER ALL QUESTIONS Figure 1: Desktop template for website Page 2 of 9

3 As the Web Designer for a Website production company, you have been assigned the task of carrying out an orientation meeting / interview with a client to gather requirements for a new website for an online printing service a) A recommendation would be to have a Navigation map and a Mockup / wireframe by the end of the meeting. The website shall have Home, Services, Portfolio and a contact page. I. Illustrate a Navigation Map and a Mockup based on Figure 1 as example of how you would create one for validation with the client. II. Why is it important to have the wireframe / mockup designed during the meeting / Interview? b) During the orientation meeting the designer will try to have a base color, sample images and other essential elements to create a Web Moodboard. Why should a web moodboard be created first rather than creating the template directly as illustrated in figure 1. c) As per W3C recommendations, menu should be created with the unordered list. Write down the HTML snippet for the Main Menu present on Figure 1. d) In order to make the website responsive, you opted for CSS3 grid. Some of the terminologies used by CSS grids are listed below. With the aid of a diagram explain these terms. I. Grid Lines II. III. IV. Grid Tracks Grid Cell Grid Area Page 3 of 9

4 QUESTION 2: (25 MARKS) Figure 2: tablet (top) and mobile (right) versions of template Page 4 of 9

5 a) The responsive version of the website was designed using Photoshop as shown in Figure 2. Assuming that the website is in a div container with ID wrapper, write down the HTML Divs to create the structure for the template as shown in Figure 1,2. The divs should be labelled as follows: wrapper, header, nav, product, ready, books, posters, covers, main, and footer. b) In order to make the website responsive, media queries were used. While inspecting the CSS you noticed the following (min-width: 1200px) { #wrapper { /* Some CSS tags here (min-width: 768px) and (max-width: 1199px) { #wrapper { /* Some CSS tags here (max-width: 479px) { #wrapper { /* Some CSS tags here */ Why is the #wrapper present in the 3 media queries? How does that affect the website view of different screen sizes? Page 5 of 9

6 c) With reference to the media queries in part (c), you noticed that there were IDs defined for each section with Grid Area Names as displayed below. #nav{ grid-area: nav; The grid sections are then used inside the wrapper for the 1200px as follows: #wrapper { Display:grid; Grid-gap:10px; Grid-template-columns: 3fr 3fr 3fr 3fr; grid-template-areas: "header header header header" "nav nav nav nav" "product books posters covers" "ready main main main" "footer footer footer footer"; i. Explain the purpose of the Grid-template-Columns. ii. Explain the grid-template-areas as present in the above code snippet iii. Write the wrapper id CSS for the tablet version of the website. Page 6 of 9

7 QUESTION 3: (25 MARKS) a) Wordpress is among the most widely used Content Management Systems CMS / blog systems. While modifying an existing template present in Wordpress, it is recommended to create a child theme. What is a child theme and how is it created? (2+3 marks) b) Wordpress contains plugins, themes and widgets. Using suitable example explain plugins and widgets for Wordpress. c) You are working on the base twentyeighteen Wordpress template and want to change the widgets background color to represent the flags of Mauritius. The widgets have class name.widgets. Using the Nth-Child pseudo-element write down the CSS for the.widget class to perform same task. d) In responsive and mobile Web Design, a common term used is viewport. HTML5 introduced the following Meta values for the viewport. <meta name="viewport" content="width=device-width, initial-scale=1.0"> What is the purpose of the viewport? e) HTML5 introduced Figure and Figcaption. Assuming you have an image named image1.jpg with an Image caption of Sample Image write down the HTML code snippet to place this image with the image caption below the image using the previously mentioned tags. Page 7 of 9

8 QUESTION 4: (25 MARKS) a) The appropriate use of CSS Style is important to change the layout of a website. Among the ways css styles could be applied are: I. CSS tag formatting II. CSS class formatting III. CSS ID formatting Using an appropriate example for each, explain the implications and purpose of using each of the above CSS formats. ( marks) b) There are three ways to integrate CSS in an HTML document. I. Inline CSS II. Internal CSS III. External CSS Provide one advantage or disadvantage of using each one of the above mentioned integrations. ( marks) c) The rectangular shape (left) in figure below require the following css modifications: a border of 2px 10px 20px and 40 px a shadow of 2px for x & y and an offset of 10px. The final color of the shadow should be black with a 50% of transparency. The final results should be as seen on the right. Page 8 of 9

Figure 3: Original box (left) needs to be transformed to rounded-radius box with shadow (right) Write down the CSS snippets to transform the box as expected.

9 Figure 3: Original box (left) needs to be transformed to rounded-radius box with shadow (right) Write down the CSS snippets to transform the box as expected. d) You want to deploy a website as a mobile application for android devices. You opted for Phonegap build to perform same. Write down the major steps to allow conversion of webpage into Mobile app. e) You want to upload a website online. What are the steps to perform same? ***END OF QUESTION PAPER*** Page 9 of 9

BA. (Hons) Graphics Design

BA. (Hons) Graphics Design Cohort: BGD/16A/FT Examinations for 2016 / Semester 2 Resit Examinations for BGD/13/FT & BGD/14B/FT MODULE: Web Design MODULE CODE: WAT1106c Duration: 2 Hours Instructions to