1_Pengantar_Web_Desain_pptx [Autosaved].pptx

Pengantar Web Design

1. Pengantar Web Desain

2. Uraian Umum Pengantar Web Desain Tujuan : Mengenal sejarah , konsep desain web yang efektif dan menarik . Materi : Sejarah Web Desain Pengertian web desain Peran HTML dan CSS Aplikasi Pendukung

3. Pengantar Sejak awal kelahiran website di awal tahun 1990, para programer dan graphic desainer mendapatkan sebuah lahan baru untuk karya mereka , yang kemudian disebut web design. Seiring perkembangannya , web design akhirnya tumbuh menjadi segmen design tersendiri yang jelas-jelas terpisah dari graphic design. Skill yang dibutuhkan pun juga berbeda dengan graphic design, karena web design juga melibatkan berbagai bahasa pemrogaman .

4. Hingga saat ini , ada dua golongan utama pekerja web design. Golongan pertama adalah orang-orang yang dulunya programer , dan golongan kedua adalah orang-orang yang dulunya graphic designer. Karakter web yang dihasilkan dua kelompok ini cukup bertentangan . Mantan programer biasanya lebih mementingkan sistem , sedangkan mantan graphic designer lebih mementingkan tampilan .  Kami pun juga berpendapat bahwa web desain yang sempurna selalu dihasilkan oleh minimal dua orang : satu orang graphic designer sebagai seniman , dan satu orang programer sebagai pengatur sistem .

5. Contoh Web Desain

6. Sejarah Web desain ( Fase 1) Website pertama kali dibuat oleh Tim Berners-Lee pada bulan Agustus 1991. Website pertama itu bernama World Wide Web. Bentuknya sangat sederhana . Semua masih menggunakan script html standar tanpa ada unsur apapun . Website pertama tersebut masih ada dan bisa diakses hingga saat ini .  Silahkan Klik di sini untuk melihatnya . Lahirnya website pertama merupakan babak baru bagi perkembangan komputer dan teknologi informasi .

7. Contoh Web Desain ( Fase 1) Desain web pertama (1991) oleh Tim Berners-Lee Desain web yahoo (1996)

8. Sejarah Web Desain ( Fase 2) Pada tahun 1994, World Wide Web Consortium (W3C) didirikan . Lembaga ini mengambil keputusan bahwa script HTML adalah script standar untuk semua website. Dalam perkembangan selanjutnya , script html tersebut dikembangkan lagi menjadi XHTML yang bersifat terbuka terhadap berbagai plugin script tambahan seperti Java, flash, dan Ajax. Pada sekitar tahun 1995 muncul website dengan menggunakan tabel sebagai dasar layoutnya , atau yang biasa disebut table-based layout. Kehadiran Table-based layout merupakan gebrakan yang cukup signifikan bagi web design waktu itu . Dengan table-based layout, web bisa dibuat dalam beberapa kolom dengan posisi-posisi layout selangkah lebih maju . Website yang menggunakan Table-based layout diantaranya adalah W3C (1998) dan Yahoo (2002).

9. W3C (1998) Yahoo (2002). Contoh Web Desain ( Fase 2)

10. Sejarah Web Desain ( Fase 3) Pada tahun 1996 flash diintegrasikan dengan website. Pada awalnya script flash disebut dengan Future Splash Animator, kemudian Macromedia Flash, dan sekarang Adobe Flash. Flash sendiri sebenarnya merupakan pengembangan dari Macromedia Shockwave ( sekarang Adobe Shockwave). Program ini pertama kali ditujukan sebagai pembuat menu dan daftar multimedia content pada autorun CD-ROM. Dengan adanya flash, gambar-gambar dalam website dapat ‘ bergerak ’. Selain itu fitur-fitur klasik html, seperti ‘link’ tetap bisa dihadirkan . Tetapi flash memiliki kekurangan , yaitu website menjadi berat dan sulit diakses . Selain itu , pengguna web juga harus memiliki flash plugin di browsernya , dan hal ini sangat merepotkan saat itu .

11. Contoh Web Desain ( Fase 3)

12. Sejarah Web Desain ( Fase 4) Pada awal tahun 2000,  Dynamic HTML (DHTML)   diperkenalkan . Pada awalnya , DHTML merupakan gabungan dari flash dan html. Script ini dikembangkan lebih lanjut dan menjadi JavaScript. Tetapi seiring perkembangannya DHTML dan JavaScript tumbuh sendiri-sendiri dan memiliki platform yang sangat berbeda . Dengan DHTML, script animasi flash dapat diintegrasikan dengan HTML sehingga web tidak menjadi berat . Selain itu , DHTML juga mensupport   HTML DOM , yang memberi keleluasaan script untuk melibatkan Operating System yang digunakan user dalam perintahnya . Pada tahun yang sama (2000) Cascading Style Sheets (CSS) mulai diperkenalkan . CSS adalah platform web design yang sangat populer hingga saat ini . Dengan adanya CSS, script untuk tampilan bisa dipisah dari file HTML induknya . Dengan CSS, template web bisa dibuat lebih rapi . CSS memungkinkan banyak fungsi tampilan yang tidak mungkin dipenuhi oleh table-based layout. CSS akhir-akhir ini menjadi sangat populer dengan diperkenalkannya platform CMS opensource seperti Joomla dan WordPress . Hampir semua template WordPress dan Joomla menggunakan CSS sebagai basis tampilannya .

13. Contoh Web Desain ( Fase 4)

14. Pengertian Web Desain

15. Pengertian Web Desain Design  hasil karya manusia yang harus dapat berfungsi untuk memecahkan suatu masalah (problem solving) Web  Fasilitas hypertext yang mampu menampilkan data berupa teks, gambar, suara, animasi, dan multimedia lainnya, di mana di antara data-data tersebut saling terkait dan berhubungan satu dengan yang lainnya Web design adalah Seni dalam membuat suatu halaman website yang melibatkan keindahan dan mekanisme dalam proses membuat sebuah halaman website . Membuat suatu halaman website terlihat lebih menarik dengan mengintegrasikan unsur gambar , animasi , text, dan video

16. Prinsip dasar Mendesain Web ( Tujuan Web) Merumuskan Tujuan Membuat Website Berdasarkan isi maupun tujuan , suatu website biasanya dapat digolongkan menjadi seperti berikut : website marketing, berfungsi sebagai media presentasi dan pemasaran website costumer service, berfungsi sebagai media untuk melayani konsumen . website e-Commerce, berfungsi sebagai media transaksi online website informasi / berita , berfungsi sebagai media informasi berita

17. Prinsip dasar Web Desain 1.1. Menentukan Isi Website 1.2. Menentukan target pengunjung 1.3. Menentukan struktur website susunan atau kerangka navigasi situs web Struktur Linear Struktur Non-Linear Struktur Hirarki

18. Struktur Website a. Linear merupakan struktur yang mempunyai satu rangkaian cerita berurutan . Struktur ini menampilkan satu demi satu tampilan layer secara berurutan menurut aturannya b. Non-Linear Merupakan Pengembangan dari linear. pada struktur ini semua kedudukan page sama , sehingga tidak kenal adanya master atau slave page

19. c. Hirarki merupakan struktur yang mengandalkan percabangan untuk menampilkan data atau gambar pada layer dengan kriteria tertentu . Tampilan pada menu utama disebut master page ( halaman utama satu ), halaman tersebut mempunyai halaman percabangan yang disebut slave page. Jika salah satu halaman pendukung dipilih atau diaktifkan , maka tampilan tersebut akan bernama Master Page ( halaman utama kedua ) dan seterusnya

20. d. Campuran (Composite) Struktur navigasi composite ( campuran ) disebut juga struktur navigasi bebas yang merupakan gabungan dari ketiga struktur yang ada . Struktur navigasi ini biasa digunakan dalam pembuatan multimedia karena dapat memberikan keinteraksian yang lebih tinggi .

21. Prinsip dasar Web Desain (Layout Web) Faktor keindahan desain tampilan dari suatu website merupakan salah satu faktor yang paling pentingdalam menentukan keberhasilan suatu website, selain faktor kecepatan loading. Suatu situs yang baik memiliki suatu kesatuan desain bisa dikatakan memiliki kesamaan tema dalam halaman halaman webnya . Hal ini penting dalam hal estetika maupun segi navigasi . Kesamaan desain yang biasanya dipertahankan antara lain kesamaan jenis font yang digunakan , warna , tombol navigasi (menu) letak menu dan lain sebagainya .

22. Tahapan Pembuatan Layout Berikut merupakan proses yang secara umum banyak dilakukan dalam pembuatan layout : Membuat sketsa design Seorang designer bisa saja menuangkan ide dalam pembuatan interface dengan terlebih dahulu membuat sketsa diatas kertas . Namun untuk kebanyakan orang , langkah ini biasanya dilewatkan dan langsung pada langkah pembuatan layout design dengan menggunakan software

23. Membuat layout design Banyak software yang dapat digunakan untuk membuat layout. Salah satu diantaranya adalah Macromedia, proses ini dikerjakan setelah pembuatak sketsa design. Namun terkadang pembuatan layout merupakan proses pertama kali dikerjakan Membagi gambar menjadi potonganpotongan kecil , proses ini diperlukan untuk meng-optotimize waktu download Membuat HTML Setelah merapikan layout design lengkap dengan tombol , image, teks , script HTML, hal yang perlu dilakukan adalah membuat layout ke dalam format HTML

24. Prinsip dasar Web Desain Focus adalah hierarki prioritas dari pesan yang akan disampaikan . Dengan adanya focus tersebut , diharapkan pengunjung dapat memahami dan menentukan pesan mana yang lebih dahulu harus dibaca atau dilihat . konsistensi adalah pemilihan bentuk atau style yang digunakan pada elemen-elemen perancangan web dan digunakan pada semua halaman website. Website yang konsisten akan memberikan identitas tersendiri dan mampu memperlihatkan visi serta misi dari website tersebut

25. Peran HTML dan CSS

26. Peran HTML dan CSS Menurut rekomendasi dari W3C, untuk pembuatan suatu website, untuk menjadi kerangka dari web tersebut anda perlu menggunakan HTML dan untuk design dari website anda dituntut untuk menggunakan CSS. Sebagai contoh :  Jika anda akan membuat suatu artikel web dengan align center, maka pada penulisan pada HTML anda tidak dianjurkan untuk membuat Tag ‘Align ‘ tetapi cukup hanya menulis artikelnya saja dan untuk membuat supaya artikel tersebut sesuai dengan design anda menggunakan CSS. Kesimpulannya adalah :  HTML untuk membangun dasar kerangka dan penulisan artikel saja . CSS  berfungsi untuk mendesign halaman website .

27. Sekian .. Lanjut di pertemuan berikut tentang HTML….