DESAIN GRAFIS by Tj0iyk

VIEWS: 136 PAGES: 13

									WEB DESIGN

Materi Kuliah Pemrograman Internet


Hadi Sutopo, Ir, MMSI



FAKULTAS TEKNIK INFORMATIKA
UNIVERSITAS PERSADA INDONESIA
JAKARTA


Daftar isi

Pengantar
Elemen Desain Grafis
Konsep Desain Grafis
Desain Web
Vector Drawing dan Bitmap Painting




PENGANTAR

Desain untuk web pada dasarnya mengikuti prinsip desain grafis secara umum.
Tampilan serta user interface dalam internet, maupun sistem informasi berbasis
komputer diperlukan untuk memudahkan pengguna mencerna isi dari informasi yang
terdapat di dalamnya. Faktor psikologis pengguna sangat berpengaruh akan berhasil
dan tidaknya suatu informasi sampai ke audiens sesuai dengan pesan yang
dikehendaki oleh pengrimnya. Karena manusia berorientasi pada visual, maka
tampilan serta kemudahan untuk menggunakannya akan sangat bengaruh pada
keberhasilan desain. Bila suatu web site ternyata tidak banyak dikunjungi oleh
pengguna, maka desain grafis mempunyai andil dalam kegagalan pengembangan
sistem informasi.


ELEMEN DESAIN GRAFIS
Desain grafis khususnya halaman-halaman web terdiri dari beberapa elemen sebagai
berikut:
:
    1. teks
        Teks adalah bagian yang paling utama untuk menampilkan informasi. Tujuan
        pengguna mengunjungi web site adalah untuk membaca informasi yang ada di
        dalamnya.

   2. grafik dan image
      Grafik dan image merupakan elemen yang dapat membantu menjelaskan
      informasi. Dengan penggunaan grafik maupun image orang lebih mudah
      memahami suatu pesan. Grafik dapat dibuat dengan draw program dan image
      dapat dibuat dengan paint program yang juga dapat memanipulasi foto.

   3. animasi
      Animasi merupakan sarana untuk menampilkan informasi dengan baik, di
      samping animasi merupakan daya tarik yang mudah diingat bagi pengguna.
      Animasi dapat dibuat dengan komputer menggunakan perangkat lunak yang
      ada, misalnya Macromedia Flash.

   4. video
      Video dapat merupakan hasil suatu rekaman dengan kamera video maupun
      hasil pengolahan dengan komputer seperti 3D Studio Max, Maya dan lain-lain.

   5. suara
      Suara melengkapi desain web, memberikan efek khusus pada suatu tampilan
      animasi serta memberikan kenyamanan bagi pengguna yang
      mendengarkannya.

   6. interctive link
      Interactive link dapat menggunakan button yang berupa teks, simbol, grafik,
      maupun image. Interactive link menggunakan gambar dapat lebih mudah
      digunakan oleh pengguna. Contohnya, penggunaan icon lebih disenangi dari
      pada pull-down menu, walaupun begi sebagian orang tetap menyukai
      penggunaan menu.



KONSEP DESAIN GRAFIS

Suatu desain apapun, misalnya web, brosur, majalah, buku dan lain lain dibuat dengan
memperhatikan prinsip desain sebagai berikut:
   1. komunikatif
       Prinsip komunikasif berhubungan dengan corporate identity, isi pesan serta
       audiens. Desain web untuk media berita seperti koran dan lain-lain tidak sama
       dengan desain web untuk site yang menampilkan karya seni. Web yang
       ditujukan untuk anak muda tidak sama dengan web yang ditujukan untuk
       orang dewasa. Contohnya anak-anak akan sulit untuki membaca teks dengan
       font yang banyak variasi. Semua elemen desain yang ditempatkan pada
       halaman web harus mempunyai makna.
   2. estetis
      Desain web yang tidak memperhatikan keindahan biasanya jarang dikunjungi
      oleh pengguna, karena pengguna hanya mengunjungi web tersebut sekali saja.
      Walaupun demikian terdapat desain web yang tidak memerlukan keindahan
      dengan alasan tertentu, misalnya nama sudah terkenal sehingga tampilan
      apapun bentuknya tidak mempengaruhi audiens. Keindahan suatu tampilan
      web akan menarik perhatian serta selalu diingat oleh pengguna internet.

   3. ekonomis
      Desain web harus memperhatikan faktor ekonomis dalam arti ukuran file yang
      digunakannya. File animasi yaang mempunyai ukuran besar, walaupun secara
      estetis memenuhi selera, tetapi mengakibatkan pengunjung memerlukan waktu
      yang lama untuk membuka halaman web tersebut. Biasanya web site seperti
      itu akan ditinggalkan oleh pengguna.


Untuk mendapatkan desain yang komunikatif, estetis dan ekonomis perlu diperhatikan
pedoman untuk membuat tata letak suatu tampilan, yaitu dengan mengatur elemen-
elemen layout seperti teks, image, aniamsi serta video. Pedoman yang dimaksud
adalah:
   1. kesatuan
        Elemen-elemen layout dari halaman harus ditempatkan sedemikain rupa
        sehingga merupakan kesatuan informasi pada satu halaman atau beberapa
        halaman.
   2. balance
        Elemen-elemen layout dari halaman harus ditempatkan sedemikain rupa
        sehingga terdapat keseimbangan secara keseluruhan.
   3. kontras
        Kontras diperlukan untuk menonjolkan bagian yang dianggap lebih penting
        dari bagian lainnya. Kantras dapat dinyatakan dengan membedakan ukuran
        serta warna dari elemen layout.
   4. kontinuitas
        Informasi mudah dimengerti oleh pengguna bila mempunyai aliran yang baik,
        sedikit gangguan yang menghambatnya. Suatu aliran informasi dapat
        dikatakan kontinue dan hormonis bila tampilannya mencerminkan
        kesinambungan dari satu bagian ke bagian lain. Kontinuitas dapat dibuat
        dengan membuat halaman-halaman mempunyai gaya, bentuk atau warna yang
        memberikan pengguna merasakan kesinambungan dengan halaman lainnya.


DESAIN WEB

Contoh
Suatu penerbit Millenium yang menerbitkan buku, kaset dan VCD bermaksud
membuat website. Penerbit mempunyai jangkauan pemasaran di seluruh dunia. Untuk
memudahkan transaksi, penerbit juga mengehendaki pengembangan e-commerce.

Penerbit mempunyai bagian-bagian seperti produksi, penyiapan naskah, pemasaran
dan kanbtor pusat yang berbeda lokasinya. Untuk memudahkan komunikasi antara
bagian-bagian tersebut diperlukan intranet portal. Dengan demikian semua informasi
dari berbagai bagian dapat diakses melalui portal tersebut.


Logo

Langkah pertama untuk mendidirikan suatu organisasi adalah dengan membuat logo.
Logo merupakan identitas sehingga dibuat sadebaik-baiknya dari segi filosofinya
maupun desain grafis. Penerbit Millenium didirikan menyongsong millenium ke-3
tepatnya abad ke-21. Gambar logo mempunyai arti sebagai berikut::
        Angka 21 menggambarkan abad ke 21 sebagai awal milenium ke-3
        Lingkaran menggambarkan jalan yang panjang ke tujuan yang mulia.
           Warna kuning melambangkan harapan yang cerah.
        Buku di tengah berwarna putih melambangkan penerbitan. Gambar buku
           terbuka yang berarti bahwa ilmu pengetahuan terbuka atau diberikan
           kepada semua orang.


E-Commerce

Halaman ke1
       Halaman utama
       Animasi logo
       Animasi ganbar buku di atas, dari kiri ke kanan dengan Macromedia Flash
       Searching pilihan buku, kaset atau CD, kategori buku
       Menu pilihan kategori buku
       Bagian tengah menampilkan buku baru.Bagian kanan menampilkan best
         seller, buku yang ditulis oleh penulis terkenal

Halaman ke-2
       Halaman kategori buku
       Animasi logo
       Searching pilihan buku, kaset atau CD, kategori buku
       Menu pilihan kategori buku
       Bagian tengah pilihan sub kategori

Contoh pada Gambar 1 dan 2




Intranet Portal

Halaman ke1
       Halaman utama
       Gambar di atas menggambarkan unit-unit perusahaan
       Bagian kiri, menu pilihan unit
       Pada pilihan unit Produksi, di tengah semua materi yang berhubungan
         dengan produksi
Contoh pada Gambar 3




Company Profile

Halaman ke1
       Halaman utama
       Animasi ganbar buku dari kiri ke kanan
       Animasi logo dari kanan ke kiri dengan ukuran kecil ke besar, melintas di
         atas animasi buku
       Menu pilihan Tentang Kami, Produk dan Kontak

Halaman ke-2
       Halaman Tentang Kami, Penerbitan
       Animasi logo
       Di tengah semua materi yang berhubungan dengan Penerbitan


Contoh pada Gambar 4 dan 5
Gambar 1. Halaman utama e-commerce
Gambar 2. Halaman e-commerce
Gambar 3. Halaman utama company profie
Gambar 4. Halaman company profie
Gambar 5. Halaman intranet portal


VECTOR DRAWING DAN BITMAP PAINTING

Elemen web di antaranya grafik dan image yang menurut cara penyimpanan filenya
dibedakan menjadi

            vector drawing
            o Vector drawing adalah gambar di mana informasi yang disimpan
               adalah koordinat yang diperlukan untuk membuat output primitif
               (garis, lingkaran, eleips dan poligon). File disimpan dengan format
               vector sesuai dengan perangkat lunak yang digunakannya , contohnya
               .cdr (Coreldraw), . fh8 (Freehand 8), .dwg (Autocad), dan lain-lain.
               Penggunaan draw program, di antaranya untuk membuat:
      logo
      icon, simbol
      kartun
      tekstur
      perancangan web



bitmap painting
o Bitmap painting adalah gambar dimana informasi yang disimpan
   adalah pixel. Setiap pixel menyimpan informasi mengenai warna dan
   intensitasnya. File bitmap berasal dari:
       - gambar yang dibuat dengan Paint Program (Adobe Photoshop,
           Corel Photopaint, dan lain-lain).
       - Gambar hasil export dari draw program
       - Hasil scan foto atau gambar
   Penggunaan draw program, di antaranya untuk membuat:
    background
    image untuk button
    manipulasi foto
    perancangan web
Format File

      BMP (*.bmp, *.rle)
      BMP adalah format gambar standar pada DOS dan Windows. Gambar yang
      disimpan dalam format BMP pada Windows dapat dibaca oleh Macintosh.
      Format gambar yang termasuk BMP adalah *.bmp dan *.rle.

      JPEG (*.jpg, *.jpe)
      JPEG (Joint Photographic Expert Group) adalah format standar internasional
      untuk gambar yang biasa digunakan banyak komputer dan program. Format
      gambar yang termasuk JPEG adalah *.jpg dan *.jpe.

      PICT (*.pct, *.pic)
      PICT adalah format gambar yang bayak digunakan pada komputer Macintosh.
      Format gambar yang termasuk PICT adalah *.pct dan *.pic.

      TIFF (*.tif)
      TIFF (Tagged-Image File Format) adalah format gambar yang fleksibel,
      digunakan untuk saling tukar file gambar antar program aplikasi yang dapat
      digunakan untuk sistem operasi berbeda.

      EPS
      EPS (Encapsulated PostScript) adalah format file yang dapat berisi grafik
      vektor maupun bitmap. EPS digunakan untuk mentransfer bahasa PostScript
      ke dalam aplikasi.

      DCS
      DCS (Desktop Color Separation) adalah versi standar EPS untuk format
      gambar.
      GIF
      GIF (Graphics Interchange Fortmat) adalah format gambar yang umumnya
      digunakan pada dokumen HTML (Hypertext Markup Language) lewat world
      wide web.

      PCX
      PCX adalah format gambar yang umumnya digunakan oleh komputer yang
      kompatibel dengan IBM PC.

      TARGA (*.tga, *.tda, *.icb, *.vc)
      TGA (Targa) adalah format gambar yang dirancang untuk sistem yang
      menggunakan Truevision Video Board, dan umumnya didukung oleh aplikasi
      warna dalam MS DOS.

      PIXAR
      PIXAR adalah format gambar yang dirancang secara khusus untuk aplikasi
      grafik berkualitas tinggi, seperti 3 dimensi.

								
To top