Assignment 1: Web page mockup
Unit: DGTL11005 Web Design, 2020 Term 1
Due date: 9:00 pm AEST, Friday of Week 5
Weighting: 30%
Objectives
This assessment item relates to the unit learning outcomes 1, 2 and 3, as stated in the unit profile.
Task
The Springfield Garden Expo is a fictitious two-day event that is organised annually in the small community of Springfield by a local garden centre named Parkland Nursery. This assignment requires you to create a mockup of a single web page promoting the event. The mockup should be created with Adobe Photoshop and the page layout should conform to the 960 grid system. The final mockup should be saved as both a Photoshop PSD file and a PNG image file. You must also write a report about your design choices.
Design brief
For the purpose of this assignment, imagine that Parkland Nursery is a leading distributor of plants, gardening and landscaping supplies in Springfield. The nursery requires you to design a single web page that encourages people to attend their 2020 Springfield Garden Expo. This annual event is designed to showcase all aspects of the horticultural industry to people who are interested in gardening and landscaping. Visitors will be able to view landscape garden displays and floral art, listen to gardening experts, watch gardening and landscaping demonstrations, participate in workshops, and enjoy live entertainment.
The Springfield Garden Expo is a ticketed event that will be held on 9th and 10th May 2020 at Parkland Nursery. Ticket holders receive entry to all of the activities that are part of the two-day event. The ticket price is $10 for adults and $8 for seniors and students. Children who are 12 years of age and younger are free and must be accompanied by an adult. The program of events is provided below: Saturday 9th May 2020
10:00 am Plant clinic with visiting botanists
11:00 am Kitchen garden workshop
12:00 pm Live music at the organic food court
1:00 pm Landscape gardening demonstration
2:00 pm Panel discussion with gardening experts
3:00 pm Children’s show
4:00 pm Judging of the floral art competition
Sunday 10th May 2020
10:00 am Bush tucker demonstration
11:00 am Lecture by visiting gardening personalities
12:00 pm Live music at the organic food court
1:00 pm Floral design workshop
2:00 pm Creating animal habitat demonstration
3:00 pm Organic gardening workshop
4:00 pm Judging of the garden design competition
Tickets can be purchased from Parkland Nursery at entry on the day of the event. Contact details are provided below.
Address: 13 Mill Road, Springfield 7052
Phone: (06) 2547 9644
Fax: (06) 2547 6532
E-mail enquiries: expo@parklandnursery.com
The key message that the web page should communicate to visitors is that this event is connected to the outdoors. The design should convey the idea of nature and the environment. Choose images, fonts, colours, shapes, textures and other design elements that suit the theme.
The event has a logo, which can be downloaded from the unit website along with the assignment details. The logo should be integrated into the web page. The logo may be resized. The grey elements of the logo may be changed to black or white if necessary, but no other colour changes or modifications are permitted (see Figure 1-1). Please note that the event logo file has a transparent background, which will be evident when you open it with Adobe Photoshop. However, the background might appear black if you view the logo file with other software applications. No other logos should appear in the web page.
Figure 1–1: Springfield Garden Expo logo
Mockup requirements
The mockup that you create for this assignment must be a single PNG image file that shows how the completed web page will appear on a computer screen measuring 1024 x 768 pixels. The mockup must not be an actual web page constructed with web technologies such as HTML or CSS code. It will be a design saved as single image file. Imagine that the mockup will be shown to the client for feedback before the actual web page is developed.
The mockup is of a single web page, not a multi-page website. No navigation links should be depicted in the mockup. No word-limits apply to the information presented on your page, but try to ensure that the amount of content is appropriate i.e. not too little and not too much.
The mockup should be created with Adobe Photoshop. Prepare the mockup with the aid of the template that has been supplied on the unit website along with the assignment details. The mockup must be 1,024 pixels wide with an image of a web browser interface at the top, as shown in the template. The height of the mockup may be any value between 768 pixels and 1,500 pixels.
Crop the template to suit the height of your web page design. Save the mockup as a Photoshop PSD file during development, preserving all layers and guides. Save a copy of the finished mockup as a PNG file also.
The layout of the web page within the mockup should conform to the 960 grid system, which is described in Study Guide module 3. The grid provides a static layout with a fixed width of 960 pixels, upon which blocks of text, images and other page elements can be positioned in a structured way.
In summary, the total width of the mockup must be 1,024 pixels, and the width of the web page design within it must be 960 pixels. The height of the mockup may be any value between 768 pixels and 1,500 pixels (see Figure 1-2).
Figure 1–2: Dimensions of the mockup and the web page design within it
Original content required
With the exception of the logo and the template, no content (text, photographs, illustrations, etc) will be supplied to you for this assignment. You must produce your own content for the web page using the design brief as a guide. This may involve activities such as conducting research, writing text, taking photographs, or editing images.
Images
You must own the copyright in any images (photographs, illustrations, animations, etc) that you use in your mockup. In others words, you are restricted to using images that you have created yourself from scratch. You may not use clip-art or royalty-free images. You may not download someone else’s image from the Web. You may not scan someone else’s image from a printed publication. You may not capture a screenshot from software that someone else has created. You may not take someone else’s image and alter it to create a new image.
Text
The text in your mockup should be suitable for the intended purpose and target audience. Do not simply reproduce the text from the design brief word-for-word. You must own the copyright in the text that you use in your mockup. In other words, you are required to write the text yourself. If you need to quote, paraphrase or summarise the words of another author for some reason (e.g. to substantiate your statements), references must be provided in section at the end of the web page.
Report
After creating your mockup, write a report that explains your design choices. The report should be prepared as a Microsoft Word document with a professional appearance. Use left-justified alignment for the text. Provide a heading for each section. Check your spelling. grammar and punctuation before submitting the assignment. Ideally, have someone else proof-read your assignment.
Report structure
The following outline explains how to structure your report. It lists the headings for each of the sections of your report, and the topics that should be discussed.
Title page
The title page should display the unit code, the unit name, the assignment number, the assignment name, the assignment due date, your student number, your name, and the word count. Microsoft Word has a feature for counting the number of words in a document.
Introduction
The introduction should tell the reader that this report will explain the design choices you made for the web page mockup.
Typography
This section should discuss the fonts that you used in your mockup, and how your choices enhance the design.
Colour
This section should discuss the colour scheme that you used in your mockup, and how your choices enhance the design.
Images
This section should discuss the images that you used in your mockup, and how your choices enhance the design.
Page layout principles
This section should discuss the page layout principles that you used in your mockup, and how your choices enhance the design.
References
This section should provide a complete list of references to any works that are cited in your report, such as books, journals, periodicals, newspapers and websites. References must be provided whenever you quote, paraphrase or summarise the work of another author. You might not have any references since this report is primarily reflective and does not involve research. This section may be omitted if you have no references.
Word count
The length of the report should be between 600 and 800 words. The word count is considered to be from the first word of the introduction to the last word of the conclusion. It includes in-text citations, direct quotations and words contained within any tables that are in the body of the report. It excludes any title page, abstract, table of contents, list of references or appendices. No abstract, table of contents or appendices are required for this report.
Writing style
The report may be written in either the first-person style or the third-person style. Writing in the first-person style means using personal pronouns in your writing (e.g. ‘I chose this typeface because ...’). In contrast, writing in the third-person style means removing personal pronouns from your writing and using alternatives (e.g. ‘This typeface was chosen because ...’). Academic reports are commonly written in the third-person style because avoiding personal pronouns (such as I, me, mine, we, us, or our) creates the impression of an objective, unbiased point of view. However, some students might feel that approach is inappropriate for this report because they are providing a personal reflection on their work. For that reason, the report may be written in either style. Similarly, it is acceptable to write the report in either the past tense or the present tense, but please try to be consistent.
Referencing
The prescribed referencing system for this unit is the Harvard system, which is also known as the author-date system or the name-year system. An Abridged Guide to the Harvard Referencing Style can be downloaded from the following address: https://www.cqu.edu.au/student-life/services-and-facilites/referencing
There are two parts to the Harvard system of referencing: (1) citing the author, date and page numbers in the text or main body of your writing; and (2) referencing the source of the information in the reference list at the end of the assignment. Read the first part of the referencing guide carefully to ensure that you understand how to perform both of these steps correctly. The Academic Learning Centre (ALC) at CQUniversity can provide assistance with referencing. Please contact the ALC through the following website if you would like help: https://www.cqu.edu.au/student-life/services-and-facilities/academic-learning-centre
Submission
This assignment must be submitted electronically through the unit website. You must submit the following three files:
• a PNG file named mockup.png containing your finished web page mockup;
• a Photoshop file named mockup.psd containing your finished web page mockup with all layers and guides preserved; and
• a Microsoft Word file named report.docx containing your report.
Instructions for submitting assignments electronically are available on the unit website. Before you submit your solution, check the assessment criteria to ensure that you have covered everything that is required.
Academic integrity
The work that you submit for this assignment must be your own. You may not collaborate with other people to complete this assignment. You must not store your assignment solution in a location where others might access it. You must not request help with this assignment in any online forums outside the unit website. You may ask for help with this assignment through the online forum on the unit website, but do not post your solution there. Refer to the University's Student Academic Integrity Policy and Procedure for more information.
Assessment criteria
The assessment criteria for this assignment are presented in the following table. Penalties will be applied for late submission and for failing to comply with the assignment’s requirements.
Criteria Marks
Content
• communicates the site’s key message
• supports the site’s objectives
• is appropriate for the target audience
• is informative, accurate, up-to-date and complete
• uses appropriate and inclusive language
• uses correct spelling, grammar and punctuation
• presents an appropriate amount of information on the page
• uses headings and lists where appropriate to aid scanning
• correctly references any works of other authors that have been used
• identifies the site with a descriptive title, logo or signature graphic 6
Type
• enhances communication of the site’s key message
• supports the site’s objectives
• is appropriate for the target audience
• uses appropriate choices of typeface, size, weight, colour and texture
• avoids jagged edges with anti-aliasing
• can be read easily
• uses font combinations with sufficient contrast
• limits the number of fonts in use
• is appropriately aligned
• uses emphasis techniques such as boldface, italics and capitalisation sparingly 6
Graphics
• enhance communication of the site’s key message
• support the site’s objectives
• are appropriate for the target audience
• display creativity and originality
• have a consistent and appropriate colour scheme
• use design elements such as line, shape, value, colour and texture appropriately
• are high quality with no unwanted halos, dithering, distortion or jagged edges 6
Page layout
• enhances communication of the site’s key message
• supports the site’s objectives
• is appropriate for the target audience
• works within the target screen size
• uses design principles such as balance, contrast, unity, proximity, alignment and repetition appropriately
• balances text and images
• has adequate margins
• conforms to the 960 grid system 6
Report
• adequately addresses the required topics
• has appropriate formatting and presentation
• has a word count within the specified limits
• demonstrates correct grammar, punctuation and spelling
• demonstrates appropriate written expression and style
• demonstrates correct referencing, if appropriate 6
Total 30