Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download Effective Web Design
Transcript
DMT612 Professional Preparation EFFECTIVE WEB DESIGN Effective web design… …is the result of careful thought and planning Effective web design… 1. 2. 3. 4. 5. 6. 7. 8. 9. Planning What do you want your website to do for you? Colour Typography Layout Best Practice Coding Tools Assets Planning • Thoroughly plan your website before you start building it. • Make your website load with lightning speed. • Make site navigation clear and simple. • Focus on solving visitors' problems. What are you trying to achieve? • Decide what you are trying to say and to whom. • Figure out how to deliver the solution quickly. • Map out your website on paper before you start building it. • Continue to fine-tune your website after it is created. BASIC COLOUR SCHEMES MONOCHROMATIC COLOUR SCHEME The monochromatic colour scheme uses a primary colour to create an overall mood. Tints and shades of the primary colour are used to enhance the scheme. This scheme is easy to balance and is soothing to look at. It can be used with neutral colours like black, white or grey. ANALOGOUS COLOUR SCHEME The analogous colour scheme uses adjacent colours on the colour wheel. The primary colour is dominant while the others are used as highlights. The analogous colour scheme is similar to the monochromatic scheme but offers a more vibrant look. COMPLEMENTARY COLOUR SCHEME The complementary colour scheme uses colours that are directly opposite each other on the colour wheel. This colour scheme creates a highcontrast effect. It is best to use one colour as the dominant colour and the second colour as an accent in your design. This technique will allow you to highlight important information and make it jump out at your readers. Colour • Colour can create an emotional response in people. • Monochromatic colour schemes are soothing and work with neutral colours. • Analogous colour schemes are vibrant but can be tricky to balance. • Complementary colour schemes are high-contrast and allow you to draw attention to important information. Typography • Design so that your web site will be legible with many different browser settings. • Pick a font that is appropriate for your content. • Keep enough contrast between the text and the background. • Keep line-length short enough to enable easy reading. TYPEFACE The typeface you select will set the feel of your web site. Fonts are generally divided between two groups: serif and sans-serif. Layout • Put your best content at the top of the page. • Keep images and graphics small so your page will load quickly. • Keep items like navigation menus in the same place from page to page. • Break up your text into logical blocks. Best practice • Thoroughly plan your website around serving the user. • Design webpages that load quickly. • Simplify navigation. • Be consistent with fonts, colours and menu locations. • Use plenty of 'white space'. • Preview your website on as many different platforms as possible to eliminate bugs. • Don't make pages too long - users don't like to scroll down too far. • Keep graphics to a minimum to reduce load times. • Carefully select colour. • Keep sufficient contrast between the text and background. • Use fonts that are appropriate to your content. • Keep line-length at a comfortable size. • Don't overuse flashing/animated graphics. • Write as shortly and clearly as possible. • Put your best content at the top of the page. • Break text into logical blocks. • Provide users with a way to contact you. Session Links • https://www.google.co.uk/ • http://www.bbc.co.uk/ • http://www.html-5-tutorial.com/ • http://www.codecademy.com/en/tracks/web • http://marksimpson.co.uk/msr/ • http://marksimpson.co.uk/ismr/ • http://www.top10bestwebsitebuilders.co.uk/ • http://www.weebly.com/ • http://www.wix.com/my-account/sites/ Close To finish, here are my top tips: 1. 2. 3. 4. For audio or video, use a small number of short clips, highlights; no one wants to see your life’s work at this stage! Use quotes about your work that you couldn't use on your CV Optimise your assets for the web, you need your pages to load quickly A web page is essentially visual, so consider how visually appealing yours are Time for you to go and play!
