1 Mata Pelajaran: TIK 3 Topik: Web Design T.P: 2011/2012 Versi: 2. - презентация

1 1 Mata Pelajaran: TIK 3 Topik: Web Design T.P: 2011/2012 Versi: 2

2 Pada akhir pertemuan ini, diharapkan peserta didik akan mampu : Mengklasifikasikan content sebuah website 2

3 Web Content : Text Advantages & Disadvantages using Text as Web Content Audio Advantages & Disadvantages using Audio as Web Content Video Advantages & Disadvantages using Video as Web Content Image Advantages & Disadvantages using Image as Web Content 3

4 Orisinal Dibutuhkan / bermanfaat bagi orang lain Global atau justru Lokal Valuable Struktur yang baik Contoh: Detik.com, Orisinal.com, DLL. 4

5 Keseimbangan antara aspek Disain dan Usefulness 5

6 Design: Estetika: Warna, Layout, Elemen, Tipografi Informasi: Isi (Konten), Penyampaian Pesan, Pembentukan Citra Usefulness: Utility: Fungsionalitas, Aksesibilitas, teknologi yang tepat Usability: Kemudahan penggunaan, waktu belajar, kecepatan kinerja, tingkat kesalahan, daya ingat dan kepuasan subyektif 6

7 Desain adalah kreatifitas, tidak ada yang salah selama tidak merugikan orang lain Desain adalah rasa estetika Nilai estetika ditentukan dari apresiasi dan persepsi setiap orang (user) Buatlah website yang memenuhi nilai estetika kebanyakan orang! (disain grafis) 7

8 8

9 User tidak akan membaca teks kata-per-kata secara runtut Dua Paragraf awal harus berisi informasi yang paling penting Awali subheads, paragraphs, dan bullet points dengan kata- kata yang informatif dan bermakna. 9

10 10

11 Meskipun fitur baru dalam disain web selalu bermunculan dan menjadi topik yang ramai dibahas di forum diskusi, mailing list maupun seminar, user tidak terlalu perduli dengan teknologi dan fitur tersebut Meskipun halaman web bisa memuat berbagai jenis konten multimedia: gambar, audio, video dan animasi; tidak berarti semua harus digunakan! Gunakan secara efisien dan efektif! 11

12 User hanya menginginkan perbaikan kualitas pada hal dasar: Teks yang bisa terbaca dengan jelas Konten yang menjawab kebutuhan user Navigasi dan search yang membantu menemukan apa yang dibutuhkan user Form yang sederhana dan singkat 12

13 Aksesibilitas: kemampuan sistem agar dapat diakses oleh pengguna yang memiliki keterbatasan. 13

14 Tujuan utama Web adalah informasi, dan harus dapat diakses oleh seluas-luasnya pengguna. Siapa saja pengguna itu? Setiap orang bebas dan berhak untuk memperoleh informasi baik itu dalam televisi, surat kabar, radio, dan tentu saja Web. Tapi tidak seluruhnya dapat dimanfaatkan oleh setiap orang, Mis: orang yang cacat pendengaran tidak dapat menikmati radio dan orang yang buta tidak dapat menikmati televisi. 14

15 Setiap orang dapat menikmati informasi yang Ada dalam sebuah situs tak terkecuali bagi orang-orang dengan keterbatasan (fisik, teknologi, dll). Dalam pembangunan sebuah situs Web kita tidak dapat gegabah agar hasil yang diperoleh lebih maksimal dan dapat dinikmati dalam berbagai keadaan audiens (user). 15

16 Text is the form of words, sentences and paragraphs is used to communicate thoughts, ideas and facts in nearly every aspect of our lives. Text elements : Alphabet characters : A - Z Numbers : Special characters : Punctuation [., ; …], Sign or Symbols [* & ^ % $ £ ! /\ ~ Multimedia products depends on text for many things : To explain how the multimedia products work To guide the user in navigating through the multimedia products To deliver the information for which the multimedia products was designed 16

17 Typefaces : a family of graphics characters that usually includes may type sizes and styles. Fonts : a collection of characters of a single size and style belonging to a particular typeface family. Ascender: an upstroke on a character Descender: the down stroke below the baseline of a character Leading : spacing above and below a font or Line spacing Tracking: spacing between characters Kerning: space between pairs of characters, usually as an overlap for improvement appearance 17

18 18 Av Unkerned vA Kerned Reading Line One Leading

19 Advantages Is relatively inexpensive to produce Present abstract ideas effectively Clarifies other media Provides confidentiality Is easily changed or updated Disadvantages Is less memorable than other visual media Requires more attention from the user than other media Can be cumbersome 19

20 Hypertext is a computer-based text retrieval system that enables a user to access particular locations in web pages or other electronic documents. 20 A F ED CB

21 21

22 22

23 Don't tell visitors to "check out" your site. If the information looks interesting and useful, they will. Don't say your site is "under construction." If the site is a mess, don't launch it. If you want to tell visitors that you update the contents periodically, state when the site was last revised. Don't call anything on your site "cool." Very uncool. Don't invite visitors to "come back often." If their visit was worth it, they will. If it wasn't, they won't. Size – Consistent Font Size. Don't use a 10 point type on some of the pages and a 12 point type on other pages. Don't use a size that is too small to read. When choosing your font and size, keep in mind that actual font size will vary from font to font, i.e., a 10 point Arial will be larger than a 10 point Times New Roman. 23

24 Placement – Text Placement shows how profesional you are.. Some of the don'ts that apply to text are: Don't crowd your text against the left edge of a page or table. Don't create paragraphs of text in all CAPS, bold, italics, or any combination of these three. Don't underline text for emphasis. It will appear to be a broken link. Don't create paragraphs of text that stretch all the way across your page. Narrower columns are much easier to read. Don't misspell words. Run a spell check on each of your pages. Misspellings are a sign of sloppiness and a real "turn off Underlined Text that is not a link Definitely no blink-blink text ! 24

25 Image is a visual representation of some information that can be displayed on a computer screen or printed out. Images come in a variety of forms : –Photographs –Paintings –Maps, etc. 25

26 Images can be generally divided into two formats : –Bitmap or Raster images –Draw-type or Vector graphics or Metafile images A bitmap is a data matrix that describes the characteristics of all the pixels making up an image. A vector graphics is the creation of digital images through a sequence of commands or mathematical statements that place lines and shapes in a given two- dimensional or three-dimensional space. 26

27 Each pixel in the image contains information about the color to be displayed. Each pixel can be in a specific colour and each pixel consists of two or more colours. The range of these colours is known as the colour depth. Colour depth is measured in bits per pixel. More colour per pixel bigger image size Bitmap images have a fixed resolution and cannot be resized without losing image quality. Common bitmap-based formats are JPEG, GIF, TIFF, PNG, PICT, and BMP. 27

28 Advantages Convey detail of information quickly Real life Disadvantages Depend on a Resolution Effect to the image quality Size file is big 28 True Colour (24 bits) 8 bits 4 bits1 bit

29 Vector images are stored as the set of graphic primitives required to represent the image A graphic primitive is a simple graphic based on drawing elements or objects such as shape and consists of a set of commands (mathematical equations) e.g. square, line, ellipse, arc, etc. Each primitive object has various attributes that go to make up the entire image e.g. x-y location, fill colour, line colour, line style, etc. Vector image or vector graphics can be resized without losing the integrity of the original image. Common bitmap-based formats are WMF, SVG, CGM, PS, PDF, DFX, and EPF. 29

30 Advantages Relatively small amount of data required to represent the image. Therefore, it does not required a lot of memory to store Easier to manipulate Disadvantages Limited level of detail than can be presented in an image 30

31 31 Vector Images Bitmap Images

32 Is it REALLY necessary to add movie to your web? Give option to visitor wether they want to view it directly or they can download first and view it later Ex : (use video streaming) Video Streaming suitable in Indonesia Infrastructure ? 32

33 How long the songs plays in one web page Is it same sound every page ? Big sound file makes slow load time page Plenty of music will kick-out your website visitor, REMEMBER your website goals. Is it the music or content ? 33

34 Animation is a sequence of frames that, when played in order at sufficient speed, presents a smoothly moving image like a film or video. 34

35 2D animation is the creation of moving pictures in a two- dimensional environment. This is done by sequencing consecutive images, or "frames", that simulate motion by each image showing the next in a gradual progression of steps. Two types of 2D animation : Cel animation : based on changes that occur from one frame to the next Path animation : moves an object along a predetermined path on the screen 35

36 36 Cel Animation & Path Animation Cel Animation Path Animation

37 Flash Intro Screen can be usefull or can be useless, depends on its content. Is it related to the Websites content or not? Make sure to give skip link, not all visitor have large internet bandwidth. And not all visitor wants to see your animation Too much animation can make visitor thinks that the website builder is not profesional Dont use too much.gif image that never stops, ITS VERY ANNOYING for most people 37

38 Ben Shneiderman's "Eight Golden Rules of Interface Design" : Strive for consistency Enable frequent users to use shortcuts Offer informative feedback Design dialog to yield closure Offer simple error handling Permit easy reversal of actions Support internal locus of control Reduce short-term memory load 38

39 Jakob Nielsen's Top Ten Mistakes in Web Design : Using Frames Gratuitous Use of Bleeding-Edge Technology Scrolling Text, Marquees, and Constantly Running Animations Complex URLs Orphan Pages Long Scrolling Pages Lack of Navigation Support Non-Standard Link Colors Outdated Information Overly Long Download Times 39

40 Legibility Problems Non-Standard Links Flash Content That's Not Written for the Web Bad Search Browser Incompatibility Cumbersome Forms No Contact Information or Other Company Info Frozen Layouts with Fixed Page Widths Inadequate Photo Enlargement 40

41 Web dapat diakses dengan baik pada berbagai perangkat dan browser 41

42 Learnability: Kemudahan penggunaan dan waktu belajar Efficiency: kecepatan kinerja Memorability: daya ingat Errors: tingkat kesalahan Satisfaction: kepuasan subyektif 42 Usabilitas: kemampuan sistem agar mudah digunakan dan sederhana dalam pengoperasiannya

43 Jika sebuah website sulit untuk digunakan Jika sebuah website tidak berisi informasi yang dicari user JIka sebuah website tidak membantu menuntun user apa yang harus dilakukan Jika user tersesat pada sebuah website Maka tombol close [x] pasti di-klik! 43

44 Letakkan Nama & Logo pada setiap halaman dan dapat diklik (Home) Sediakan Search jika halaman > 100 atau minimal sediakan Site Map Gunakan foto asli: produk atau kegiatan Sediakan gambar dalam resolusi kecil jangan merubah size gambar asli (thumbnail) 44

45 Letakkan Navigasi pada lokasi yang konsisten pada halaman web. Tempatkan pada lokasi yang familiar (Diatas, Kiri, atau Bawah) Hindari scrolling secara horisontal. Jika teks ditampilkan centered, gunakan hanya satu titik simetri 45

46 Gunakan XHTML & CSS sebagai standar dokumen web saat ini Buatlah website yang dapat diakses semua user dengan baik dan mudah Buatlah konten website yang memiliki value dan bermanfaat bagi orang lain 46