Desain web
This presentation is the property of its rightful owner.
Sponsored Links
1 / 16

Desain Web PowerPoint PPT Presentation


  • 171 Views
  • Uploaded on
  • Presentation posted in: General

Desain Web. R0312 – Grafik Komputer. Client Side dan Server Side. Client-side digunakan untuk mengadakan interkasi dengan user, dan data yang diolah relatif sedikit. Proses dilakukan pada browser dengan script seperti JavaScript, ActionScript dll

Download Presentation

Desain Web

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Desain web

Desain Web

R0312 – Grafik Komputer


Client side dan server side

Client Side dan Server Side

  • Client-side digunakan untuk mengadakan interkasi dengan user, dan data yang diolah relatif sedikit. Proses dilakukan pada browser dengan script seperti JavaScript, ActionScript dll

  • Server-side digunakan untuk memproses semua yang berhubungan dengan server, seperti guest book, pooling, feedback dan aplikasi data lainnya. Proses dilakukan di web server, sedangkan Client hanya menerima hasil dalm bentuk HTML


Client side dan server side flash

Client Side dan Server Side Flash

  • Contoh penggunaan client-side Flash

    • Aplikasi perhitungan, seperti menghitung angsuran rumah dengan memperhatikan bunga bank sesuai perhitungan real estate

    • Aplikasi game

    • Aplikasi computer-based training

  • Contoh server-side Flash

    • Registrasi, konfirmasi password, penambahan record dalam data base, dll. Form input dari user biasanya menggunakan form HTML, tetapi dapat digunakan field text input dalam Flash. Dengan mengintegrasikan ActionScript dengan ASP, CGI/Perl, atau PHP, maka pengaksesan table database dapat dilakukan. Hasil pengolahan di server ditampilkan kembali dalam Flash Movie

    • Feedback dan aplikasi lain yang berhubungan dengan file text external dapat dilakukan karena Flash dapat membaca variabel yang terdapat dalam file text

    • Generator Object dari Flash dapat digunakan untuk membuat bermacam-macam chart, yang datanya berasal dari file eksternal. Dengan demikian data yang ditampilkan pada chart selalu baru


Struktur web site

Struktur Web Site

  • Beberapa desainet web menggunakan teknik yang biasa seperti dalam pengembangan multimedia pada umumnya yaitu Storyboarding

  • Petama-tama pembuatan diagram untuk bermacam-macam halaman, seperti storyboarding pembuatan film dan video, kemudian hubungan detail yang diperlukan antara halaman-halaman secara keseluruhan

  • Dalam pengembangan web, terdapat beberapa model navigasi dasar, yang harus dikenal dengan baik oleh desaine, karena setiap model memberikan solusi untuk kebutuhan yang berbeda


Linear navigation model

Linear navigation model

  • Pada awal pengembangan Internet, Linear navigation model digunakan oleh sebagian besar Web site. Informasi diberikan secara sekuensial dimulai dari satu halaman.

  • Linear navigation model banyak digunakan dan berhasil dengan baik pada beberapa macam aplikasi seperti:

    • Presentasi

    • Aplikasi computer based-training

    • Aplikasi yang memerlukan informasi sekuensial


Hierarchical model

Hierarchical Model

  • Hierarchical model diadaptasi dari top-down design. Konsep navigasi ini dumulai dari satu node yang menjadi homepage. Dari homepage dapat dibuat beberapa cabang ke halaman-halamn utama. Apabila diperlukanm dari tiap halaman utama dapat dikembangkan menjadi beberapa cabang lagi. Hal ini seperti struktur organisasi dalam perusahaan

  • Hierarchical model baik bagi pengunjung untuk menemukan lokasi halaman dalam Web site dengan mudah. Untuk menggambarkan model tersebut, dapat digunakan ilustrasi dengan tree


Spoke and hub model

Spoke-and-hub Model

  • Untuk membuat struktur hyperlink yang fleksibel, spoke-and-hub model dapat bekerja dengan baik.

  • Hub dinyatakan dengan homepage yang mempunyai hubungan dengan setiap node.

  • Setiap node dapat berhubungan kembali ke homepage.

  • Pada model ini hanya terdapat dua macam link, yaitu dari homepage ke halaman tertentu, dan dari halaman tersebut kembali ke homepage


Full web model

Full Web Model

  • Full Web model memberikan kemampuan hyperlink yang banyak. Full Web model banyak digunakan karena user dapat mengakses semua topik dengan subtopik dengan cepat. Namun kelemahan dari model ini, yaitu dapat berakibat user kehilangan cara untuk kembali ke topik sebelumnya.


Desain visual

Desain Visual

  • Desain visual mencakup elemen grafik yang digunakan pada interface, termasuk layout secara keseluruhan, menu, desain form, penggunaan warna, coding, dan penempatan tiap unit dari informasi

  • Beberapa pedoman untuk membuat desain Web site yang baik, yaitu mencakup kejelasan, konsistensi, estetis, dan kecepatan download


Kejelasan visual

Kejelasan Visual

  • Penyajian visual tidak boleh memberikan pengertian ambigu, sehingga tidak membingungkan user, yang berarti bahwa tampilan visual harus jelas

  • Beberapa persyaratan yang harus dipenuhi untuk mendapatkan kejelasan visual adalah:

    • Kesamaan, dua bentuk visual mempunyai property yang kelihatan dimiliki oleh keduanya

    • Pendekatan, dua bentuk visual mempunyai property yang dimiliki bersama-sama

    • Penutupan, bentuk visual dapat menutup suatu area yang sama

    • Kontinuitas, suatu bentuk visual akan terhubung dengan bentuk berikutnya menurut garis lurus

  • Agar bentuk visual mempunyai arti yang jelas, perlu dipertimbangkan untuk tidak menempatkan sesuatu yang tidak berarti pada halaman Web


Konsistensi

Konsistensi

  • Konsistensi bentuk visual akan memudahkan user dalam menggunakan perintah

  • Untuk memperoleh konsisten dapat dilakukan sebagai berikut

    • Penggunaan warna pada elemen yang sama harus sama, sehingga tidak menimbulkan penafsiran yang berbeda

    • Pesan dari sistem ditampilkan pada lokasi tertentu secara logika

    • Posisi menu sebaiknya diletakkan pada lokasi yang sama, sehingga user tidak selalu mencari-cari untuk menemukannya

    • Penggunaan icon dan simbol harus sama untuk operasi yang sama


Estetis

Estetis

  • Untuk mendapatkan desain yang komunikatif dan estetis, perlu diperhatikan pedoman tata letak suatu tampilan, yaitu dengan mengatur elemen-elemen layout seperti teks, image, animasi serta video

  • Empat prinsip dasar layout user interface:

    • Kesatuan, elemen-elemen desain harus ditempatkan sedemikian rupa sehingga merupakan kesatuan informasi

    • Keseimbangan, elemen-elemen desain harus ditempatkan sedemikian rupa sehingga tedapat keseimbangan (balance) untuk setiap halaman, maupun secara keseluruhan

    • Irama, Garis irama (grid) vertikal dan horisontal digunakan untuk menempatkan elemen-elemen desain, yang diatur dalam bentuk simetris maupun asimetris

    • Kontinuitas, informasi dapat dikatakan kontinyu dan harmonis bila tampilannya mencerminkan kesinambungan dari suatu bagian ke bagian lain


Kecepatan download

Kecepatan Download

  • Setiap menggunakan gambar pada halaman Web, persoalan yang utama adalah ukuran file, dan berapa lama image akan muncul pada halaman Web

  • Pertimbangan yang harus dilakukan adalah menentukan format file, resolusi, browser dll

  • Gambar yang baik adalah gambar yang memiliki kualitas baik dengan ukuran file yang kecil


Metodologi desain

Metodologi Desain

  • Proses pembuatan desain Web meliputi beberapa tahap:

    • Menentukan tujuan. Pada tahap ini ditentukan tujuan dari Web, serta audien yang mengunjunginya

    • Memahami karakteristik user. Tingkat kemampuan audiens sangat mempengaruhi pembuatan desain. Dengan demikian Web site dapat dikatakan komunikatif

    • Mempelajari Web site yang lama. User interface seperti menu dan icon yang sama sekali baru memerlukan pelatihan yang harus diberikan kepada user, karena user telah terbiasa dengan interface yang lama. Pelatihan memerlukan biaya, penggunaan interface baru harus layak secara ekonomis


Metodologi desain lanjutan

Metodologi Desain (lanjutan)

  • Pembuatan desain konseptual. Desain ini merupakan konsep pengambangan suatu Web site, dilihat dari semua aspek. Desain konseptual merupakan sketsa kasar yang harus dikembangkan terlebih dahulu. Pembuatan desain harus mempertimbangkan bahwa sebaiknya desain sederhana dan bersifat umum

  • Pembuatan desain fungsional. Fokus dari desain ini pada perintah (command) dan bagaimana mengerjakan perintah tersebut. Desain fungsional dibuat untuk mengurangi kemungkinan kesalahan pada aplikasi

  • Pembuatan desain visual. Desain ini dibuat secara keseluruhan bersama-sama, dan lebih baik dari pada dibuat secara terpisah. Desain icon, dialog, dan menu termasuk dalam tahap ini. Dalam pembuatan desain visual, ditentukan elemen utama yang merupakan identitas dari Web. Elemen tersebut dapat berupa logo, nama, warna, dan lainnya yang mungkin telah lama dikenal oleh user


Metodologi desain lanjutan1

Metodologi Desain (lanjutan)

  • Pembuatan prototype. Prototype diperlukan untuk melihat secara keseluruhan desain yang dikembangkan. Protype dapat juga dibuat bersamaan dengan pembuatan desain visual, setelah desain konseptual dan fungsional diselesaikan.


  • Login