Web Design Competition College of Computing Science, Department of Information Systems. New Jersey Institute of Technology

Transcription

1 COMPETITION PURPOSE The Web is the most transformable invention of our time. This competition features the creation of high-quality, well-designed and original Websites, while seeking to identify and encourage future talent in this area. INSTRUCTIONS: DESIGNING YOUR WEBSITE Each school may identify one or more teams of students to participate in this category of the competition. Working as a team, they will be required to design an educational web site based on a set of professional design guidelines. Keep in mind that each person in the team must present at least one idea a group of four members, must present four ideas. The subject and resulting ideas that will be included in this category should surface after discussions with an advisor, teacher and or students in your school. The key ideas will result in individual lessons which will be a critical component of the project. The subject is to be of the team s choosing and can include one of the following: A course subject such as Biology, History, Math, Computer science, Information System, etc. Current events subject such as emergency response, homeland security, the selection of a Justice to the Supreme Court, etc. Any specific subject of the team s interest DESIGNING PHASE Remember the web site that you develop will communicate ideas using text, graphics, pictures, sound, video, animation, etc. The purpose is to integrate these different objects into a cohesive whole and then get feedback from peers.

2 DESIGN GUIDELINES: Web Design Competition 2013 Introduction/ overview section: Provide an overview in one or two paragraphs about the subject area in general. Navigation & Structure: Web site must have suitable structure and be easy to navigate. Use of frames is strongly not recommended. Menu: Provide tabs, buttons etc. referencing each specific lesson and when clicked on shows the specific lesson, and allows for navigation within a lesson. Main page area: The area where the actual lessons will appear. link: There will be an link included on the site that users can access to interact with the team (one link). Team Name: The team should choose a team name and use this in their Introduction. Individual sections: Each team member s subject topic will be one idea taken from a subject area. Each lesson must: Give the name of author/student who created the lesson at the beginning. State the learning goal - the idea you want to teach - (e.g. "How to "). Each subject lesson will consist of 4-6 topics in a sequence. Each lesson topic should first state some concept and then give a practical example. Also give examples of how not to do it if appropriate. Remember, your target audience is students like yourselves. Assume they know little about the subject. As people do not learn instantly, you will need statements, examples, human reasons, variations and perhaps some self-testing to fully get a point across. User Feedback - As a separate menu item include feedback from a set of 5 students who will be users. Record their comments either in text form, audio, or video. These comments should be gathered after the prototype is complete.

3 IMPORTANT NOTE Web Design Competition 2013 The total website should not exceed 100MB. Stay away from server languages, such as php, due to possible server setting differences. Browser plug-ins such as shockwave, flash and java are not permitted. Review the example folder that s included in each team s dropbox account. This provides simple structure that must be implemented in the final design. Each team s website must include the following on their contact page in order to easily identify each team and their school: Team contact information (except phone numbers) School name Team number Team member names (No nicknames e.g. Michael Smith and not Mike Smith) SUBMISSION All final designs must be uploaded to each team s individual dropbox s folder by Monday, February 27, Submissions will not be accepted after this date. This will allow the Judges selected from the Information Systems Department with enough time to review the submissions prior to the date of the competition. In the case that your website submission does not work, the judges will not modify your website in anyway (e.g. fixing broken image links).

4 DROPBOX REGISTERING PROCESS 1. Click on the dropbox invitation sent from the Information System Department ( Only the contact person will receive the ) 2. Register for a dropbox account, if you currently don t own one. UPLOADING YOUR WEBSITE 1. Sign in to the Dropbox website 2. Click on the name of your school 3. Select your team

5 4. Click the upload button from the very top of the window ( Make sure that you re in the correct team folder, if you have more that one teams) 5. Upload the final design folders and files, as seen below in your team folder (Please upload everything in the root folder) What not to do 6. After uploading your content, please njwc@njit.edu letting us know. CHEATING The use of any template, generating wizard, content management system (e.g. drupal and joomla), built-in template, or any other template type from the Internet or any other source is strictly forbidden. Teams caught will be considered cheating and disqualified. However, they can be viewed for inspiration.

6 DESIGN COMPLIANCE Web Design Competition 2013 Website must use standards based web design with well-formed CSS and HTML Take into consideration the following: Ensure to choose a color scheme and stick with it. All html pages must have the.html extension and not the.htm extension. The homepage must be called index.html. Other names such as index.htm, default.htm, default.html, etc are not accepted All images must be placed in a folder called images. You must use relative paths (e.g. images/njit.jpg). Manually add links and do not use editors to do so. This is will ensure that your website works when we receive them HTML opening tags (i.e <b>) must have a closing tag (i.e </b>) Tags that doesn t have a closer tag should include a space and slash (i.e. <br />) Ensure tags are in lower case Website should be fully functional in Internet 8.0 and above, firefox 3.0 and above and chrome 20 and above. The following are links are of well-designed educational websites and that should give you some inspiration: (a simple design: follow a simple design for starters)

7 ASSESSMENT CRITERIA Speak the user s language: Use phrases, icons and concepts familiar to the users, present information in a natural and logical order. Minimize the user s memory load: Take advantage of recognition rather than recall. Do not force user to remember key information across web pages. Chunking: Write and organize information in chunks that are short and contain exactly one topic. Ideally, a topic should fit on one Web page. Do not force users to access multiple web pages to complete a single thought. Web site usability (40%) Consistency: Indicate similar concepts through identical terminology and graphics. Adhere to uniform conventions for layout, formatting, typefaces, labeling, and so on. Flexibility and Efficacy of use: Accommodate a range of user sophistication and user goals. For example, allow novice users to reach desired goals through a series of progressive steps, but allow expert users or frequent users to directly reach their destination. Progressive level of detail: Organize information hierarchically, with more general information appearing before more specific detail. Allow users to delve as deep as needed, but to stop whenever sufficient information has been received. For example, use HTML lists to organize web site content in a hierarchical way. Navigation feedback: Allow the user to determine his or her current position. Make it easy to return to an initial state. For example, making effective of breadcrumbs and navigational links Aesthetic and minimalist design (30%) Create visually pleasing displays that engage the user s attention. Eliminate information that is irrelevant or distracting. Web pages should not contain information, which is irrelevant or rarely needed. Every extra unit of information competes with the relevant units of information and diminishes their relative visibility. The extent usages of JavaScript, Flash, etc. are used. Technical competency level (30%) Effective use of multimedia format to present information, such as video, animations, etc.

8 It's recommended that each team tests the functionality of their individual website before uploading their final copy Have Fun! Be Creative! Share ideas! Once again welcome to the Department of Information Systems Web Design Competition 2013 Contents subjected to change.