Pertemuan X. Ali Tarmuji, S.T., M.Cs. Pemrograman Web. Teknik Informatika Fakultas Teknologi Industri

Pertemuan X

Ali Tarmuji, S.T., M.Cs. [email protected]

Pemrograman Web [email protected]

Teknik Informatika Fakultas Teknologi Industri

1

Materi minggu ini:

(Opimasi grafik + Integrasi Desain + Programming)

1. Konsep Dasar Desain web 2. Image Slice (mecah gambar)



2

KONSEP DASAR DESAIN WEB Pemrograman Web [email protected]


3

Konsep Keseimbangan • Merupakan hasil susunan satu atau lebih elemen dari desain yang sama antara yang satu dengan lainnya • Ada dua jenis keseimbangan, yaitu : – Keseimbangan Simetris (Formal) – Keseimbangan Asimetris (Non Formal)



4

Keseimbangan Simetris (Formal) • Keseimbangan yang meiliki elemen – elemen dengan bobot yang sama pada dua sisi dari garis vertikal imajiner pada halaman, hal ini memberikan kesan kestabilan dan ketetapan • Keseimbangan simetris menghasilkan design yang formal. Cocok diterapkan pada aplikasi perkantoran, iklan yang menekankan pada mutu dan kualitas Pemrograman Web [email protected]


5

Ilustrasi Keseimbangan Simetris



6

Keseimbangan Asimetris (Nonformal) • Kebanyakan dijumpai pada ketidaksamaan dalam posisi dan intensitasnya • Untuk membuat sesuatu seimbang dalam konsep asimetris yaitu dengan menambahkan intensitas untuk mengimbangi perubahan posisi • Penambahan intensitas dapat dilakukan dengan mengubah ukuran, warna, dan objek • terdapat kesulitan dalam penggunaannya, karena seorang desainer harus merancang tata letak dengan sangat hati – hati untuk memastikan bahwa desainnya benar – benar terlihat seimbang Pemrograman Web [email protected]


7

Ilustrasi Keseimbangan Asimetris



8

Konsep Pewarnaan • Warna pada tampilan sebuah halaman aplikasi, harus tetap menarik karena berhubungan dengan tema aplikasi dan efek psikologis juga • Tabel aspek psikologis warna :



9

Konsep Pewarnaan



10

Konsep Pewarnaan



11

Konsep Pewarnaan •

Jenis warna adalah sebagai berikut : – Warna primer • Warna ini berdiri sendiri, • tidak bisa dicampurkan dengan warna lain. • Terdiri atas merah, kuning dan biru. – Warna sekunder • Warna ini dibuat dengan mengkombinasikan dua warna primer. • Warna sekunder terdiri atas orange, hijau dan ungu. • Warna ini terletak di antara warna primer. – Warna tersier • Merupakan jenis warna menengah. • Warna ini dibuat dengan mengkombinasikan warna primer dengan perbatasan warna sekunder. • Terdiri atas kuning – hijau, kuning – orange, merah – orange, merah – ungu, biru – ungu dan biru – hijau. • Warna ini terletak diantara warna primer dan sekunder yang digunakan



12

Konsep Pewarnaan • Metode pemilihan warna – Metode Warna Beruntun • Terdiri atas tiga susunan warna yang letaknya saling bersebelahan dan biasanya ada satu warna yang menonjol (dominan). Metode ini menghasilkan warna lembut yang serasi, misalnya kuning, kuning – orange dan kuning atau orange, kuning – hijau dan hijau.



13

Konsep Pewarnaan (6) – Metode Warna Berlawanan • Terdiri atas dua susunan warna yang letaknya saling bersebrangan contohnya biru dan orange. Metode ini menghasilkan nuansa yang lebih hidup (kontas tinggi).



14

Konsep Pewarnaan (7) – Metode Warna Segi Tiga • Sesuai dengan namanya, terdiri atas tiga warna yang letaknya ditentukan dengan bentuk segi tiga. Metode ini menghasilkan warna serasi, misalkan biru, merah, kuning.



15

Tipografi • Merupakan seni huruf, meliputi pemilihan huruf, penentuan ukuran yang tepat, di mana teks dapat diputus, spasi jarak dan bagaimana teks dapat dengan mudah dibaca • Huruf di web dapat dibuat sebagai bagian dari grafik (image) atau HTML atau dengan style sheet. • Desainer dapat menentukan pilihan huruf, tapi yang menggunakan HTML atau style sheet dianjurkan untuk menggunakan huruf yang ada (default)



16

Tipografi • Jenis huruf secara garis besar : – Serif • Mempunyai stroke (ekor) • Berkesan formal, elegan/intelektual, anggun dan konserpatif pada desain • Cocok dipakai untuk teks yang panjang dengan jarak spasi yang sedikit • Cocok dipakai untuk organisasi, pemerintahan, pendidikan dan perusahaan • Huruf serif terbagi menjadi 4 jenis, yaitu : – Style (Caslon, Garamond, Goudy, Palatino) – Transitional (Baskerville, Century, Time New Roman) – Modern (Bodoni) – Egyptian (Clarenden, Lubalin, Memphis) Pemrograman Web [email protected]


17

Tipografi – Sans-serif • Jenis huruf yang tidak memiliki stroke (ekor), ujungnya dapat bentuk tumpul atau tajam. • Contoh : –Arial –Verdana –Avant Garde



18

Tipografi – Dekoratif • Jenis huruf yang mempunyai desain rumit, sesuatu yang baru, dll. • Biasa digunakan untuk judul, banner, dll • Contoh : Stencil, crackling, rosewood, dll – Skrip • Menyerupai tulisan tangan, sering disebut kursif (cursive) • Contoh : Brush Script, Larissa, dll – Monospace • Jenis huruf yang mempunyai jarak dan lebar yang sama untuk setiap hurufnya • Contoh : Monospace, Courirer New, dll.



19

Layout • Merupakan proses penataan dan pengaturan teks atau grafik pada halaman • Meliputi penyusunan, pembagian tempat dalam suatu halaman, pengaturan jarak spasi, pengelompokan teks dan grafik, serta penekanan pada suatu bagian tertentu • Sebelum merancang layout, harus mengetahui jawaban pertanyaan berikut : – Di manakah akan diletakkan layout tersebut? – Siapa yang akan melihatnya? – Hasil apakah yang diperoleh? – Bagaimana menempatkan teks dan gambar sehingga memberikan pengaruh yang baik? – Akan seperti apakah layout tersebut? Pemrograman Web [email protected]


20

Layout • Layout yang baik setidaknya memiliki 3 kriteria dasar : – Mencapai tujuan • Apakah tujuan yang akan dicapai sebuah halaman web? Informasi apakah yang akan disampaikan? • Siapakah yang akan membaca, menggunakan, atau mengunjungi web tersebut • Di manakah letak halaman web tersebut terhadap halaman yang lain – Pemetaan visual • Penataan dan penekanan pada beberapa titik informasi • Penentuan item apakah yang akan dibaca atau dilihat oleh pengunjung – Menarik perhatian (berbeda dengan yang lain dan memiliki daya tarik tersendiri)



21

Layout • Layout menurut bentuk : – Model layout top index – Model layout bottom index – Model layout left index – Model layout right index – Model layout split index – Model layout alternating index • Layout menurut ukuran : – Liquid design (satuan yg fleksibel/%) – Ice design (satuan yang tetap/fixed) – Jelly design (kombinasi satuan fleksibel dan tetap) Pemrograman Web [email protected]


22

Pertemuan X. Ali Tarmuji, S.T., M.Cs. Pemrograman Web. Teknik Informatika Fakultas Teknologi Industri

Recommend Documents