Desain Grafis WWW - faculty.petra.ac.idfaculty.petra.ac.id/ido/courses/grafis/desain_grafis.pdf ·...

16
Desain Grafis WWW Ido Priyono Hadi Web site adalah koleksi dari banyak file yang dihubungkan satu sama lain. Halaman web adalah dokumen yang ditulis dalam html [hypertext mark-up language] yang bisa dilihat oleh siapapun dan kapanpun – bagi orang yang mempunyai web browser. Copyright by Ido

Transcript of Desain Grafis WWW - faculty.petra.ac.idfaculty.petra.ac.id/ido/courses/grafis/desain_grafis.pdf ·...

Page 1: Desain Grafis WWW - faculty.petra.ac.idfaculty.petra.ac.id/ido/courses/grafis/desain_grafis.pdf · Develop Architecture ... browsers sebelum di upload di server World Wide Web. 5.

Desain Grafis WWWIdo Priyono Hadi

Web site adalah koleksi dari banyak file yang dihubungkan satu sama lain.

Halaman web adalah dokumen yang ditulis dalam html [hypertext mark-up language] yang bisa dilihat oleh siapapun dan kapanpun – bagi orang yang mempunyai web browser.

Copyright by Ido

Page 2: Desain Grafis WWW - faculty.petra.ac.idfaculty.petra.ac.id/ido/courses/grafis/desain_grafis.pdf · Develop Architecture ... browsers sebelum di upload di server World Wide Web. 5.

3 Generasi Desain Website : sebuah hipotesa 1

Page 3: Desain Grafis WWW - faculty.petra.ac.idfaculty.petra.ac.id/ido/courses/grafis/desain_grafis.pdf · Develop Architecture ... browsers sebelum di upload di server World Wide Web. 5.

3 Generasi Desain Website : sebuah hipotesa 2

Page 4: Desain Grafis WWW - faculty.petra.ac.idfaculty.petra.ac.id/ido/courses/grafis/desain_grafis.pdf · Develop Architecture ... browsers sebelum di upload di server World Wide Web. 5.

3 Generasi Desain Website : sebuah hipotesa 3

Page 5: Desain Grafis WWW - faculty.petra.ac.idfaculty.petra.ac.id/ido/courses/grafis/desain_grafis.pdf · Develop Architecture ... browsers sebelum di upload di server World Wide Web. 5.

3 Generasi Desain Website : sebuah hipotesa 3 : Contoh

Page 6: Desain Grafis WWW - faculty.petra.ac.idfaculty.petra.ac.id/ido/courses/grafis/desain_grafis.pdf · Develop Architecture ... browsers sebelum di upload di server World Wide Web. 5.

Proses Pembuatan Website

1. Define Content / Website ObjectivesMaksud dan Tujuan situs. Kebutuhan orang membaca halaman web Anda. Yang terbaik anda bisa menemukan kebutuhan mereka.

2. Develop ArchitectureMembuat kerangka dasar situs atau arsitektur atau hirarki. Gunakan flowchart. Prioritas dan kategori. Tentukan link diantara kategori.

3. Create DesignDesain seharusnya bisa tampak bagus di monitor komputer. Konsistensi desain pada semua halaman web SANGAT penting. Warna, Huruf, Grafis, Garis, Tabel, Logo, dan Navigasi

4. Implement The SiteUjikan desain web anda pada berbagai monitor komputer, platforms dan browsers sebelum di upload di server World Wide Web.

5. Maintaining the site

Page 7: Desain Grafis WWW - faculty.petra.ac.idfaculty.petra.ac.id/ido/courses/grafis/desain_grafis.pdf · Develop Architecture ... browsers sebelum di upload di server World Wide Web. 5.

Define Content/ Isi

Tentukan Maksud dan Tujuan Situs AndaApa Kebutuhan Orang Mengunjungi Situs AndaTentukan Target Umur Rata-rata Audiencedan Tingkat Ketrampilan.Kenali Audience AndaJagalah Content Anda Fresh dan Up To DateDahulukan Kualitas di Atas KuantitasNyatakan Kebijaksanaan Anda Dg Jelas [Privacy Policy, Copyright, Disclaimer]

Page 8: Desain Grafis WWW - faculty.petra.ac.idfaculty.petra.ac.id/ido/courses/grafis/desain_grafis.pdf · Develop Architecture ... browsers sebelum di upload di server World Wide Web. 5.

What is a Map?What is Site Map?

Map adalah bentuk khusus komunikasi visual representasi dunia tiga dimensi dalam bentuk dua dimensi. Map adalah sebuah geometri imajinasi visual.

Belum ada definisi umum tentang site map. Bisa diartikan sebuah index, table of content, sekilas, atau diagram.Site Map adalah navigasi untuk pengunjung ke sebuah website.

Page 9: Desain Grafis WWW - faculty.petra.ac.idfaculty.petra.ac.id/ido/courses/grafis/desain_grafis.pdf · Develop Architecture ... browsers sebelum di upload di server World Wide Web. 5.

Arsitektur Situs : Site Map

Page 10: Desain Grafis WWW - faculty.petra.ac.idfaculty.petra.ac.id/ido/courses/grafis/desain_grafis.pdf · Develop Architecture ... browsers sebelum di upload di server World Wide Web. 5.

Arsitektur Situs : Sequence

Informasi mengalir spt narasi linier, time line, logis, kronologis, serial dari umum ke khusus, alphabetis, index, ensiklopedia, dan glossaries.

Page 11: Desain Grafis WWW - faculty.petra.ac.idfaculty.petra.ac.id/ido/courses/grafis/desain_grafis.pdf · Develop Architecture ... browsers sebelum di upload di server World Wide Web. 5.

Arsitektur Situs : Grid

Korelatif variabel, time line vs historical information. Kategori standar : events, technology, culture, etc. User hrs mengenali interrelationships antara kategori informasi.

Page 12: Desain Grafis WWW - faculty.petra.ac.idfaculty.petra.ac.id/ido/courses/grafis/desain_grafis.pdf · Develop Architecture ... browsers sebelum di upload di server World Wide Web. 5.

Arsitektur Situs : Hierarchy

Bagus untuk menyusun struktur informasi yang komplek. Bagus untuk website, spt single homepage. Navigasinya mudah dimengerti. Lebih familiar dg diagram hirarki.

Page 13: Desain Grafis WWW - faculty.petra.ac.idfaculty.petra.ac.id/ido/courses/grafis/desain_grafis.pdf · Develop Architecture ... browsers sebelum di upload di server World Wide Web. 5.

Arsitektur Situs : Web

Web spt struktur organisasi, ada batasan pada pola penggunaan informasi. Informasi mengalir bagai ide bebas, sesuai keinginan users. Struktur spt ini membingungkan users tentang interrelationships menu.

Page 14: Desain Grafis WWW - faculty.petra.ac.idfaculty.petra.ac.id/ido/courses/grafis/desain_grafis.pdf · Develop Architecture ... browsers sebelum di upload di server World Wide Web. 5.

Pengorganisasian Desain Sitemap

Page 15: Desain Grafis WWW - faculty.petra.ac.idfaculty.petra.ac.id/ido/courses/grafis/desain_grafis.pdf · Develop Architecture ... browsers sebelum di upload di server World Wide Web. 5.

Pengorganisasian Desain Sitemap

Ingatlah ! : Web site bukanlah seperti publikasi cetak tradisional yang dapat

dibaca secara berurutan dari satu halaman cover ke halaman cover lain.

Web site dibagi ke dalam bagian-bagian pendek dalam link interaktif yang bisa membantu pengunjung melihat contentmelalui point of interest mereka.

Buttons [tombol], graphics, dan hypertext memberikan navigasi/ rute dari sebuah content web koneksi satu sama lain.

Page 16: Desain Grafis WWW - faculty.petra.ac.idfaculty.petra.ac.id/ido/courses/grafis/desain_grafis.pdf · Develop Architecture ... browsers sebelum di upload di server World Wide Web. 5.

Arsitektur Situs : Summary