GKG3013 Web Design. Jong Sze Joon& Auzani Zeda Mohamed Kassim Faculty of Applied and Creative Arts Universiti Malaysia Sarawak

Transcription

1 GKG3013 Web Design Jong Sze Joon& Auzani Zeda Mohamed Kassim Faculty of Applied and Creative Arts Universiti Malaysia Sarawak

2 Learning Unit 3 Web Design Basics

3 Unit Learning Objectives The aim of this unit is to explore the basic concept of web design and development. By the end of this unit, students should be able to: Describe considerations in planning and designing a website. Explain elements of a website. Discuss website building basics.

4 Topics 1. Planning Your Website 2. Designing Your Site 3. Elements of a Website 4. Working with Images

5 Planning Your Site Types of Sites 1. Business 2. Personal 3. Social 4. Informational

6 Amazon.com Business Sites Terry Lucas GKG3013 Web Design

7 Kodak.com Business Sites

8 Bloomingfoods Business Sites

9 Personal

10 Jasonsantamaria.com Personal

11 Wonkette.com Personal

12 Social Facebook Google+ Twitter

13 Social flickr MySpace

14 Informational Wikipedia IMDB

15 Planning Your Site Website Goals 1. What is the overall goal of this website 2. What parts of the website show me this goal?

16 Planning Your Site Organizing Websites Website is a collection of web pages. There should be unity to what you create. If every page is different, the site visitor might get lost. 1. Organizing the Site 2. Organizing the Page

17 Planning Your Site Best Practices of Website Organization 1. Simple Start simple You can always add things later Simple website allows your message to be clearly understood and your goals easily attained Too complex will cause confusion 2. Consistent 3. Maintainable

18 Planning Your Site Best Practices of Website Organization 1. Simple 2. Consistent Keep your website a unified whole. Looks professional and clean Helps the transmission of your message Use consistent structure on pages 3. Maintainable

19 Planning Your Site Best Practices of Website Organization 1. Simple 2. Consistent 3. Maintainable Well-organized & well-designed websites are easy to maintain and improve Disorganized work can cause more work in the long run Complex site will take a lot of time to make sure all parts work together So, start simple!

20 Designing Your Site Content Before Design Overall Design Colors Fonts Images

21 Designing Your Site Content Before Design Collecting content for your website and letting that guide and inform your design. What information do you need for a sport team website? member profiles, schedule, past matches result & team logo Overall Design Colors Fonts Images

22 Designing Your Site Content Before Design Overall Design Design Ideas Looking for award winning web designer s site Webby Award LevelTen Interactive Avenue A/Razorsih Central Image Design Colors Fonts Images

23 Designing Your Site Content Before Design Overall Design Design Ideas Central Image Design Use a central image and base your color scheme and other images off it. I.e.: Logo, Photos. Colors Fonts Images

24 Designing Your Site Content Before Design Overall Design Colors Web is a visual medium, so color is important Invokes mood from boring to dynamic. Millions of colors are available to choose from let your creativity and personal style be your guide. Fonts Images

25 Designing Your Site Content Before Design Overall Design Colors Fonts A webpage can have little text or huge amount of text. Text can be actual text or graphics System Font fonts that have been created to display well on web pages. If the font is not a system font, turn the text into an image. Fonts as Images are not selectable, slow down your page s load time and search engine cannot find it. Fonts and Color you can color your text. Go for good contrast to make it easy to read. Images

26 Designing Your Site Content Before Design Overall Design Colors Fonts Images Images is an important part of any design But, don t include too many as it will slow down your page load. Only use images that support your content well.

27 Best Design Practices Content is King Put What Is New Front & Center Keep It Simple Don t Use Attention Grabbers Be Consistent

28 Elements of a Website Content Parts of a Webpage Parts of a Website

29 Elements of a Website Content Best Practices Focused Personal High Quality Unique Appropriate to the Audience

30 Elements of a Website Parts of a Webpage Title the title of the webpage appears in the title bar of the browser displaying your webpage Header - this is where the title of your webpage and logo's are placed Body - the main body of the website. Footer - this is sometimes used for a text based navigation of the website and legal disclaimers Sidebar columns of website content that has more height than width. Navigational Elements - the main buttons to navigate around your website

31 Parts of a Webpage

32 Elements of a Website Navigational Elements Complete Consistency Easy to Read Easy to Find

33 Elements of a Website Navigational Elements Complete Make sure all pages on your site are accessible from all other pages on your site Consistency Easy to Read Easy to Find

34 Elements of a Website Navigational Elements Complete Consistency Navigational elements should appear in the same spot and contain the same links on every page. Easy to Read Easy to Find

35 Elements of a Website Navigational Elements Complete Consistency Easy to Read Navigational elements you use should be easy to read and understand Easy to Find

36 Elements of a Website Navigational Elements Complete Consistency Easy to Read Easy to Find Navigational elements should be easy to find and at the same place on each page

37 Elements of a Website Parts of a Website Home Page Content Page About Me Page Frequently Asked Questions Contact Information

38 Working With Images Key Terms Pixel Is the smallest piece of information in a digital image and is one color. Every image can be described as a certain number of pixels high and a certain number wide Resolution RGB Hexadecimal

39 Working With Images Key Terms Pixel Resolution RGB An image s resolution is the number of pixels that make up a square inch. The higher the resolution, the larger the file size. The most common resolution is 72 pixels per inch. Hexadecimal

40 Working With Images Key Terms Pixel Resolution RGB A mode of creating colors by mixing Red, Green & Blue in certain amounts. Each three colors values from 0 to 255. Using this method, more than 16 million colors are available to you. Hexadecimal

41 Working With Images Key Terms Pixel Resolution RGB Hexadecimal A method of taking a three-digit RGB numbers and converting them to two-digit numbers that HTML can understand

42 Web Graphics Lossy and Lossless Compression The HTML Image Tag Background Images Image Maps Animated GIFs

43 Web Graphics Lossy and Lossless Compression Image compression tries to make your files as small as possible while retaining quality. Lossy compression degrades the image slightly to make the size of the file smaller. Ie.: Joint Photographic Expert Group (.jpg or.jpeg) Lossless compression has no degradation. ie.: Graphics Interchange Format (.gifs) & Portable Network Graphics (.png) The HTML Image Tag Background Images Image Maps Animated GIFs

44 Web Graphics Lossy and Lossless Compression The HTML Image Tag To add image to a webpage, use HTML tag IMG which has several properties, or attributes. Attributes are the things that define how the image is displayed. Background Images Image Maps Animated GIFs

45 Web Graphics Lossy and Lossless Compression The HTML Image Tag Background Images You can use an image as background of an entire page using BODY tag and the BACKGROUND attribute. Use CSS to when using a background image. Image Maps Animated GIFs

46 Web Graphics Lossy and Lossless Compression The HTML Image Tag Background Images Image Maps An HTML structure that allows you to specify coordinates on an image connected to hyperlinks. An image can be server-side (stored on server that assist with the image map) or client-side (all the information for the image is stored in the HTML file) Animated GIFs

47 Web Graphics Lossy and Lossless Compression The HTML Image Tag Background Images Image Maps Animated GIFs A series of.gif files saved into one larger.gif file that animate when loaded into a web browser. It can slow down load time if too large. So, use sparingly.

48 Optimizing Images Resizing Images When to Use Different File Types Slicing Images

49 Optimizing Images Resizing Images Using html image tag Resize in image editing software When to Use Different File Types Slicing Images

50 Optimizing Images Resizing Images When to Use Different File Types Use the highest level of compression and lowest number of colors you can Photo:.jpg & Graphics:.gifs Slicing Images

51 Optimizing Images Resizing Images When to Use Different File Types Slicing Images Larger images can be sliced into smaller images so they load quickly Effective when parts of a large area are not central to your design Make sure your sliced images line up when it is completely loaded.

52 Optimizing Images Resizing Images When to Use Different File Types Slicing Images

53 Finding Images Free Images Other People s Images Your Own Images Terry Lucas GKG3013 Web Design

54 Finding Images Free Images Sources of good images and reference Creative Commons Kave Wall FreeStockPhotography Visipix.com flickr Other People s Images Your Own Images

55 Finding Images Free Images Other People s Images Request permission to use other people s images and give credit to the image owner. Your Own Images

56 Finding Images Free Images Other People s Images Your Own Images Take your own pictures or make your own graphics. Easier to credit the creator of the images.

57 10 min Show-and-tell List down the good and not-so-good design of the selected website of yours. How are you going to improve on it? Present it to your peers. You may support/ enhance it with any visual aid (your research/sketches/ site map)

58 Reference 1. Bell, M. (2011). Build a Website for Free. Indianapolis, IN: Pearson Education. 2. Strauss, R. (2001). Developing Effective Websites: A Project Manager s Guide. Boston, MA: Focal Press. 3. Lopuck, L. (2012). Web Design For Dummies, 3 rd Edition. Hoboken, New Jersey: John Wiley & Sons. 4. Dawson, A. (2011). Distinctive Design A Practical Guide to a Useful, Beautiful Web. West Sussex, UK: John Wiley & Sons. 5. Eccher, C. (2011). Professional Web Design Techniques and Templates. Boston: MA. Course Technology. 6. Smith, J. & Osborn, J. (2011). Web Design with HTML and CSS Digital Classroom. Indianapolis: IN. John Wiley & Sons. 7. Stocks, E. J. (2009). Sexy Web Design. Victoria: Australia. SitePoint.