TutorsOnspot.com is a worldwide forum where we help our clients all over the world to meet the best Academic Writers.

Our Live writers provide Original paper which is 100% unique and plagiarism free. Writers always meet the all requirements of the paper and make sure it must be a quality piece of writing.

They especially take care of the Grammar, and follow the proper Referencing style which is directed by the client. Writers majorly write papers in APA, Harvard, MLA, Chicago and IEEE.

Web Design and Development

FINAL WEBSITE PROJECT

DESCRIPTION

In the project, you will work with HTML, CSS and JavaScript to develop a website that will be published to an Apache Web server. The project will require research, self-directed learning and consultation with lecturers.


Milestone 1 - Project Plan & Design Comps

In this milestone you will create a project plan (including goal and audience analysis, flowchart, text, images and screen designs), which you will use to develop the finished site.

Document the changes you have made to the site in response to feedback from Assignment-1 and submit/show to your tutor/lecturer during week 7 practical class.


Milestone 2 - Website

This is the complete website, the result of you going through the complete website design and development process. Using the work done in the project plan and design comps, your group will develop a functional, finished site. Your site should be basically “completed” by week 9, so that it is ready for usability testing during the week 10 practical. Assessment of this milestone is for both completeness and quality.

Other Info

Design Principles Some content from: The Principles of Beautiful Web Design (Jason Beaird and James George) Principles of Web Design (Joel Sklar) 1 Learning Outcomes apply user-centred design principles and methods understand and be able to follow a suitable design process appreciate the design principles that make a “good” website be able to apply these principles at a basic level 2 Design Process somewhere between art, science, and problem solving the process of creating a design comp can be boiled down to: discovery exploration implementation 3 What's a comp? the word comp is an abbreviation of the phrase “comprehensive dummy” – a term that comes from the print design world. complete simulation of a printed layout created before the layout goes to press. in Web design, a comp is an image of a layout that’s created before we prototype the design in HTML 4 Discovery meeting and learning about the client(s) gathering information, desires, goals… What questions should you ask a client? 5 Exploration (using the information from the client) put yourself in the shoes of the website visitors and ask yourself what they are looking for thinking about buying a product… what do you need to know before you buy? signing up for a service… where would you learn about the different offerings and which option you need? what is the clearest title possible for page x? how many steps does it take to reach page y? 6 Exploration Information Architecture (IA) focus on organising the content and flow of the website into a logical structure make a list of all the bits and pieces of the site and start arranging them into groups use paper, sticky notes or a whiteboard – or a digital tool that lets you move things easily turn this into a flowchart (more on this later) every box is a page every line (arrow) is a link the order matches the site 7 This is a very brief summary – more to come in the next lecture. 7 Implementation – Creating a layout use… paper! too easy to lose focus when using a computer sketch a few possible layouts use (something like) Photoshop to block out the planned areas experiment with foreground and background colours keep tweaking until you have a comp you can show the client 8 Defining Good (& Bad) Design two ways of looking at it: strict usability angle functionality, the effective presentation of information, and efficiency purely aesthetic perspective artistic value and visual appeal of the design goal: maximise both 9 Design is about communication the elements and functionality of a finished website design should work together, so that: users are pleased by the design but drawn to the content users can move about easily via intuitive navigation users recognise each page as belonging to the site 10 11 Talk about the following website (screenshot) What do you notice first? What is good/bad about it? … 12 http://www.harmonyrepublic.com/ The richly textured, colorful illustrations flow around the structure of the page, which is embellished with hand-drawn navigation and a simple layout. The abundance of handcrafted, organic elements creates contrast and helps to draw your eyes to the featured artists without interfering with the pages’ readability or how it’s organized. 12 Good Navigation Design main navigation should be clearly visible each link should have a descriptive title help users recognise where they are: links change appearance when hovered over indicate the active page or section 13 Good Navigation Design make content and navigation clear, dominant secondary navigation, search fields, outgoing links should not be dominant features make these easy to find, separate them visually from the content, this allows users to focus on the information, yet they’ll know where to look when they’re ready to move on to other content. 14 Cohesive Design have a unified/cohesive theme or style helps hold the design together across whole site users should never think they've left the site 15 How can we make site designs cohesive? 16 Although the content blocks on these pages are divided differently, there are several visual indicators that let users know that these are pages from the same site. Much of this unity is due to the repetition of the identity and navigation blocks. The consistent use of a very limited color palette (black, gray, yellow, and red) also helps to unify the pages. 16 How to create a cohesive design: consistency and repetition create smooth transitions (no "jumps" in layout) reinforce identifying elements e.g. logo in the same top-left spot on every page place navigation elements in the same position on each page use the same navigation graphics throughout the site use a consistent colour scheme 17 17 Testing Smooth Transitions One way to test for smooth transitions is to click through several pages of the site, then use back and forward shortcut keys to change pages without having to move the mouse or scroll and you'll quickly see if any page elements are in different spots from one page to another 18 Web Page Anatomy 19 Web Page Anatomy containing block body or container div... can be fluid (flexible) or fixed flexible: http://en.wikipedia.org/wiki/ Main_Page fixed: https://www.facebook.com/groups/1547903532143110 / you can have a combination of both by using % widths and pixel-based min-width and max-width 20 Flexible Page Layouts Pros: user gets to control view adapt to different screen resolutions (devices) usually less scrolling for user Cons: harder to design - must account for the movement of elements at different resolutions at high resolutions, your content can break apart or be hard to read 21 Fixed-Width Page Layouts Pros: easier to design - allows Web pages to be designed like print pages designer has more control Cons: user can not control view don't adjust to make use of larger screen sizes at lower resolutions you get horizontal scrolling 22 no right or wrong layouts - based on your content whether you are going to scan or scroll the page Web Page Anatomy logo identity block should usually be at top navigation horizontal or vertical close to the top – definitely above the "fold" 23 The Fold this metaphor is derived from the fold in a newspaper the end of one screen – where the content of a page ends before users scroll down ensure important content is above the fold so users don't miss it problem page: https ://secure.jcu.edu.au/app/studyfinder / http :// www.cpr-promotions.com/dead-air-in-radio-webdesign 24 The studyfinder app (https://secure.jcu.edu.au/app/studyfinder/) shows the results below the page fold, so it looks like nothing has happened. 24 Web Page Anatomy content content is king! Make this the focal point needs to be designed ("information design") footer bottom, usually contains ©, contact, legal, links some designs use minimal footers (https://twitter.com /), others have expansive ones with lots of links (https://www.docker.com /, http://yodiv.com /) 25 Active Whitespace white spaces are the blank areas of the page good use of whitespace guides the reader, reduces clutter and clarifies organisation deliberate whitespace is "active whitespace" passive whitespace is normally the result of mismatched shapes don't add space by entering blank line breaks, instead - use CSS margins and padding 26 27 Principles of Web Design 5th Ed. 28 Principles of Web Design 5th Ed. Grids longing for structure and ideal proportion is deeply ingrained in human nature grids are an essential tool for layout design help you create alignment easily 29 https://css-tricks.com/snippets/css/complete-guide-grid / https://gridbyexample.com/examples / Website to learn to create Grids 30 Principles of Web Design 5th Ed. Grids The black lines are not visible, just conceptual 30 Grids 31 The pink lines are overlaid here to show the 16-column grid used the Pythagoreans observed a mathematical pattern that occurred so often in nature that they believed it to be divinely inspired. ϕ = 1.6180339 (1.62) e.g. sunflower's centre is total diameter / ϕ thirds is a close-enough approximation Golden Ratio & Rule of Thirds 32 Rule Of Thirds in Photography 33 Rule Of Thirds in Photography 34 Start with a grid. Make a wireframe 35 Note the use of thirds (3 columns) in a few different ways 35 Grid Systems for Websites – CSS Frameworks these frameworks provide a bunch of CSS classes to work with out of the box based on (responsive) grids unsemantic - http:// unsemantic.com foundation - http:// foundation.zurb.com bootstrap - http :// getbootstrap.com 36 We are not using any of these in the subject, but you can learn a lot from them 36 Balance - Symmetrical 37 Balance - Asymmetrical 38 Unity – all the design elements work as a whole two ways to achieve unity: proximity repetition 39 Unity – Proximity placing elements closer together (compared to other elements) makes them appear related 40 In the column on the left, the word “Unkgnome” is equidistant from the top and bottom paragraphs. The result is that it looks more like a separator than a heading for the next paragraph. In the second column, the “Gnomenclature” heading is placed closer to the paragraph that follows it. In accordance with the rules of proximity, this heading appears to belong to that block of text. 40 Unity – Proximity What's wrong with this form? This is much better: 41 .proximityDemo input { margin-left: 1em; } The first example has the text labels and radio buttons all the same distance apart, so looking in the middle, you can't tell if the button for, say 17-25 is to its left or right. Adding just a little margin on one side groups the elements enough to solve this problem. 41 Unity – Repetition reuse elements to create unity 42 the repeated thumbnail images with the views, comments & like icons create a sense of unity 42 What draws your attention? 43 Emphasis making a particular feature draw the viewer’s attention often you want an item to stand out a button for users to press an error message … make that element into a focal point 44 placement the direct centre is the highest value screen real estate (users look there first) top-left is second Placement Examples 45 Placement know what expectations your user might have about your navigation and content users have come to expect common elements of a Web page in certain locations 46 What are some of these expectations? When is it a good idea to break these conventions? There are usually no good reasons to break common conventions unless your site is intended to be unconventional – you want people to find it awkward or difficult. 46 47 I would add contact details in the footer. 47 Emphasis continuance your eyes keep going in one direction when they start looking that way place call-to-action elements at the end of 'lines' of elements isolation make elements stand out by moving them away from others (opposite of proximity) proportion differences in scale draw attention 48 Emphasis Contrast juxtaposition of dissimilar graphic elements most common method of creating emphasis the greater the between a graphic element and its surroundings, the more that element will stand out can be created using differences in: colour size shape 49 difference What draws your attention? 50 Call To Action (CTA) The bright orange sign up button is the only orange thing in a page of blues… 50 Standard "bread and butter" Layouts left-column Navigation 51 Right-column Navigation 52 Three-column Navigation 53 Information Design soooo important! don't just design the frame/layout for your content to sit inside… design the content sections as well existing print-designed content (like a client might provide) needs to be re-formatted line length, font, layout do not transfer well print = portrait, screen = landscape 54 From this… 55 To this… (almost the same content) 56 What can we do? 56 Information Design information should be easy to read and legible break text into reasonable (logical) segments include logical headings where appropriate helps focus the user's attention breaks up blocks of content control the width of your text paragraphs that are too wide (lose your place) or too narrow (eyes move too much) are harder to read 57 Example – Contact Information 58 Contact Us Phone (07) 4781 4619 Fax (07) 4781 4629 Contact Us Phone (07) 4781 4619 Fax (07) 4781 4629 Contact Us Phone (07) 4781 4619 Fax (07) 4781 4629 This is a great example of a small change that makes a big difference. Without adjusting fonts, but only aligning the phone numbers, you can quickly see that the fax number is the same as the phone number except for one digit. This information is there in the first presentation, but it is not readily clear. Design your information carefully and with the goal of communicating as clearly and quickly as possible. 58 How Much Content Is Too Much? don't overcrowd your pages/sections be conscious of the user's "cognitive load" don't make them think! too much can overwhelm people carefully divide content into smaller sections not less content.. still the same content, just broken up appropriately probably with pictures… people like pictures 59 Designing for the User keep your design efforts focused on your user find out what users expect from your site if you can, survey or watch them what do users want when they get to your site? 60 What's the most ‘successful’ (most used) website in the world? How is it designed? Ask what people think of this first statement the book author makes? Is "Solely" too narrow? Should we focus on the client or the designer goals as well…? 60 2-61 Google's home page in 2007, then in 2011. What's changed? What's the same? Why? Google's home page in 2007, then in 2011. What's changed? What's the same? Why? 2-62 A better demonstration of the similarity/change The previous page was not the best example of showing the differences, because the screenshots didn't line up. Here is a better way to show this, since you can actually see things like the difference in the logo size or the location of links, etc. Design for Interaction think about how the user wants to interact with your information design for your content type - will the user: read or scan design pages for reading or scanning based on the content type 63 64 (scanning) 64 65 This is a different page in the same website. Notice the cohesion. (reading) – same site Notice the use of a grid – this page uses 2 of the 3 columns for content - very common and effective layout idea 65 Keep a Flat Hierarchy don't make users navigate through too many layers of information create content sections organised logically use consistent navigation consider providing a site map or search facility for larger sites follow the three click rule* 66 *It's less important how many times people have to click than how much they have to think. 66 Use Hypertext Linking Effectively let users move between pages as they please make it easy for them provide plenty of navigation options use contextual (in context) linking avoid the use of “click here” (why?) 67 "Click here" is a problem for screen readers, that read the text of the link, not the content around it. It's harder for scanning. It doesn't get indexed well by search engines that rate content in a link more highly. 67 68 Lindsay's Law – if the user would want to click there, let them click (make it a link) Demo: http ://www.jcu.edu.au/itr/JCUPRD_049017. html The demo (download Sophos from JCU) shows how not to do this… follow the link (login required) and try and download the software (that's the main thing someone would want to do)… the link is not where you'd expect it (where it says "download"). Did you notice the left nav change? I didn't. 68 Design Principles aesthetic design might never be your thing, but you can learn and implement these clear principles notice what you do and don't like on the Web and in other areas of design (everywhere!) mimic good design in your own work without simply copying it 69 “Good artists copy, great artists steal.” Pablo Picasso Design trends & cutting-edge designs www.assembly.com www.tedxguc.com dougaitkenthesource.com www.swansea.ac.uk /bright- futures 70 70 Summary be able to apply user-centred design principles and methods understand and be able to follow a suitable design process appreciate the design principles that make a “good” website be able to apply these principles at a basic level recognising why sites look “good” or “bad” is helpful 71
HTML and CSS Some content from: Build Your Own Website The Right Way Using HTML & CSS (Ian Lloyd) Principles of Web Design (Joel Sklar) 1 Learning Outcomes demonstrate best practices in creating standards-based websites learn the basics of the HTML and CSS languages and how they work together appreciate some of the history of HTML and the current HTML 5 standard 2 Remember… these notes are not meant to be exhaustive or stand-alone you should read the chapters in the books and watch the videos online – preferably before the lecture – to pick everything up … and practise making small pages and sites – so it sticks! 3 Creating Web Pages with HTML HTML is a markup language (not a programming language) that lets you specify the structure and content of a Web page markup elements define each section or item this

element defines a first-level heading:

What is HTML?

4 Styling Web Pages with CSS CSS is a style language (also not a programming language) that lets you modify how a Web page appears the following style rule makes all heading 1 elements blue h1 { color: blue; } 5 Separation of Form & Function Content & Structure = HTML Style = CSS Dynamic Functionality = JavaScript, PHP… these should be used appropriately don't inextricably link content and style e.g. make headings headings top-level headings must be

, content is structured correctly then change the style to make it look like whatever you want … i.e. if it's too big, don't make it

… that's incorrect (

is second level headings with small font size) 6 7 Separation of Form and Function Form = what it looks like Style CSS Function = what it is Structure & Content HTML Structure of a Basic Web Page an HTML file contains content text "marked up" with HTML CSS code can be in the same file or in a separate file the code itself does not appear in the browser the browser interprets the HTML & CSS and displays (renders) the results each browser interprets HTML & CSS in its own way, based on its rendering engine it is essential that you test your work in different browsers different programs and different versions 8 9 Structure of a Basic Web Page Demonstration Page

Sample Heading

Simple sample paragraph

10 the document type, or doctype for short, specifies the rules for the document language the tag is the root element the two main sections are the and elements the section is the container for all of the descriptive information about the document (not displayed) the section includes the content that the user will see in their browser In the example above, the meta tag tells the browser which character set to use—specifically, UTF-8, which includes the characters needed for web pages in just about any written language. To be drawn on… note: element opening and closing tags 10 HTML Code elements (tags) - the basic building blocks of HTML attributes – extra information for elements (properties) most elements have opening and closing tags some are "void" or "empty": no content or closing tag (e.g. img, br, hr, meta, input) 11 Add “value” to this – “en” is a value (of an attribute) 11 HTML Elements an HTML element starts and ends with tags – the opening tag and the closing tag. a tag consists of an opening angled bracket (<), some text, and a closing bracket (>). e.g.

inside a tag, there is a tag name; there may also be one or more attributes with values. e.g.

non-empty elements have content in them, should have a closing tag. e.g.

Content

empty elements can not contain content should not have a closing tag. e.g.

This is a test paragraph.
With two lines.

12 HTML Attributes HTML elements can have a range of attributes, depending on which element you’re dealing with each attribute is made up of a name and a value always written as: name="value" some are optional, some are compulsory – e.g. the img (image) element requires a source file reference where everything to display in the browser 'canvas' goes all content elements (p, div, img, a, head, table, etc.) must be inside the body element 16 Some HTML Elements (just a selection) Element Description

,

Heading – the number defines the level; 1 = most important