desain grafis dan web

100
DESAIN GRAFIS DAN WEB ISNAINI NOR RAHMADHANI

Upload: isna-rahma

Post on 16-May-2015

4.867 views

Category:

Documents


4 download

TRANSCRIPT

Page 1: Desain grafis dan web

DESAIN GRAFIS DAN WEBISNAINI NOR RAHMADHANI

Page 2: Desain grafis dan web

DEFINISI DESAIN GRAFIS

Desain grafis adalah suatu bentuk komunikasi visual yang menggunakan gambar untuk menyampaikan informasi atau pesan seefektif mungkin. Dalam disain grafis, teks juga dianggap gambar karena merupakan hasil abstraksi simbol-simbol yang bisa dibunyikan. disain grafis diterapkan dalam disain komunikasi dan fine art. Seperti jenis disain lainnya, disain grafis dapat merujuk kepada proses pembuatan, metoda merancang, produk yang dihasilkan (rancangan), atau pun disiplin ilmu yang digunakan (disain).

Page 3: Desain grafis dan web

KATEGORI DESAIN GRAFIS

Printing (Percetakan) yang memuat desain buku, majalah, poster, booklet, leaflet, flyer, pamflet, periklanan, dan publikasi lain yang sejenis.

Web Desain: desain untuk halaman web. Film termasuk CD, DVD, CD multimedia untuk

promosi. Identifikasi (Logo), EGD (Environmental Graphic

Design) : merupakan desain profesional yang mencakup desain grafis, desain arsitek, desain industri, dan arsitek taman.

Desain Produk, Pemaketan dan sejenisnya.

Page 4: Desain grafis dan web

MACAM-MACAM DESAIN GRAFIS

3D3D merupakan proses penciptaan, display, dan manipulasi obyek di komputer dalam bentuk tiga dimensi. Kelebihan 3D adalah obyeknya dapat dirotasi, dilihat dari segala sudut, serta dapat diskala lebih besar atau lebih kecil. Program-program 3D CAD dan 3D Graphics memungkinkan obyek-obyek diciptakan dalam skala X-Y-Z (lebar, tinggi, kedalaman). Program-program ini juga memungkinkan pencahayaan diterapkan secara otomatis di tahap pengubahan

Page 5: Desain grafis dan web

MACAM-MACAM DESAIN GRAFIS

Vektor Gambar vektor merupakan gambar digital berdasarkan persamaan matematis yang menggabungkan titik-titik garis untuk menjadi sebuah obyek sehingga gambar tidak menjadi pecah walaupun diperbesar atau diperkecil. Itu sebabnya, vektor banyak digunakan untuk mendesain logo. Versi lain menyebutkan, dalam komputer grafis, sebuah garis ditandakan oleh titik akhirnya. Ketika sebuah lingkaran digambar, lingkaran tersebut terdiri dari banyak vektor-vektor kecil. Gambar vektor umumnya berukuran lebih kecil bila dibandingkan dengan gambar bitmap. Beberapa format gambar vektor di antaranya adalah SVG, EPS, CDR, AI, atau SWF.

Page 6: Desain grafis dan web

WebsiteSebuah situs web (sering pula disingkat menjadi situs atau website) adalah sebutan bagi sekelompok halaman web (web page) yang umumnya merupakan bagian dari suatu nama domain atau subdomain di world wide web (WWW) di internet. WWW terdiri dari seluruh situs web yang tersedia kepada publik. Halaman-halaman sebuah situs web diakses dari sebuah URL yang menjadi akar yang disebut homepage (halaman induk) dan biasanya disimpan dalam server yang sama. Halaman-halaman web, yaitu dokumen berkode HTML (hyper text markup language), terhubung satu sama lain—dan sering kali antar-halaman-halaman di situs web lainnya.

Page 7: Desain grafis dan web

E-zine E-zine (electronic magazine) adalah sebuah majalah atau koran yang dipublikasikan secara online yang berisi artikel, wawancara, atau macam-macam bentuk berita lainnya. E-zine bisa berbentuk website html biasa, flash, downloadable flash, pdf, atau downloadable pdf. Online graphic design magazine buatan anak Indonesia yang sudah cukup dikenal adalah creativebehavior.com, Vektorika Magazine, atau DesignFlip. Proses membuat e-zine ini tidaklah semudah yang dibayangkan. Serba teliti. Kalau tidak teliti, semua halamannya bisa buyar.

Page 8: Desain grafis dan web

Animasi Animasi disebut peragaan grafik atau file yang data-datanya mampu menghasilkan gambar 2 dimensi atau 3 dimensi yang bergerak. Misalnya adalah animasi gif yang mampu diubah-ubah dengan menggunakan perangkat lunak GIF animator. Di dalam sebuah halaman web, animasi bisa digabungkan dengan informasi lainnya dengan menggunakan teknik penyuntingan HTML, JAVA, Animasi GIF, Shockwave, maupun Flash.

Page 9: Desain grafis dan web

Motion GraphicMotion graphics adalah grafis yang menggunakan teknologi video atau animasi untuk menciptakan ilusi sebuah penampakan bergerak atau berubah. Motion graphics biasanya digabungkan dengan suara untuk proyek-proyek multimedia, dengan kata lain ditampilkan melalui teknologi media elektronik, tapi dapat juga ditampilkan memakai teknologi manual. Istilah ini berguna untuk membedakan grafis diam dengan grafis yang dapat berubah-ubah. Dasar program ini adalah pixel. Dalam film bioskop dikenal istilah frame by frame, satu detik 32 gambar. Di motion graphic komputer juga sama, gambarnya hasil dari pixel. Misalnya, 20 foto disatukan sehingga menjadi gambar bergerak.

Page 10: Desain grafis dan web

Digital imaging Digital imaging atau digital image acquisition lebih dikenal dengan istilah olah digital atau metode mengedit gambar yang biasanya merupakan modifikasi dari obyek fisik. Suatu gambar digital bisa dibuat menggunakan kamera digital atau alat semacamnya. Bisa juga menggunakan media analog (atau gambar), kemudian ditransfer melalui pemindai atau media semacamnya menjadi informasi digital dalam bentuk pixel yang dapat dibaca dan dimanipulasi oleh komputer, dan kemudian dibentuk kembali sebagai gambar yang dapat dilihat mata.

Page 11: Desain grafis dan web

Virtual world (second life) Virtual world adalah lingkungan simulasi komputer yang ditujukan agar para pemakainya mendiami dan berinteraksi melalui avatar. Beberapa virtual world, tetapi tidak semua, memungkinkan adanya berbagai pengguna. Biasanya, kalau seseorang setiap hari menggunakan internet minimal 1-2 jam, bisa dipastikan ia memiliki virtual world/second life. Contoh dari virtual world/second life adalah situs jaringan sosial semacam Friendster, Mypace, atau multiply. Bahkan, chatting juga termasuk dalam virtual world/second life. Bagaimana memulai belajar Desain Grafis? Memang itu sebuah pertanyaan yang sangat mendasar bagi seorang desiner pemula.

Page 12: Desain grafis dan web

PROGRAM PENGOLAH GRAFIS

Aplikasi Pengolah Tata Letak (Layout) Program ini sering digunakan untuk keperluan pembuatan brosur, pamflet, booklet, poster, dan lain yang sejenis. Program ini mampu mengatur penempatan teks dan gambar yang diambil dari program lain (seperti Adobe Photoshop). Yang termasuk dalam kelompok ini adalah:

Page 13: Desain grafis dan web

Adobe FrameMaker Adobe In Design Adobe PageMaker Corel Ventura Microsoft Publisher Quark Xpress

Page 14: Desain grafis dan web

Aplikasi Pengolah 3D 3D StudioMax Maya AutoCad Google SketchUp Light Wave Blender Softimage

Page 15: Desain grafis dan web

Aplikasi Pengolah Vektor/GarisProgram yang termasuk dalam kelompok ini dapat digunakan untuk membuat gambar dalam bentuk vektor/garis sehingga sering disebut sebagai Illustrator Program. Seluruh objek yang dihasilkan berupa kombinasi beberapa garis, baik berupa garis lurus maupun lengkung. Aplikasi yang termasuk dalam kelompok ini adalah:

Page 16: Desain grafis dan web

Adobe Illustrator Beneba Canvas CorelDraw Macromedia Freehand Metacreations Expression Micrografx Designer

Page 17: Desain grafis dan web

Aplikasi Pengolah Pixel/Gambar

Adobe Photoshop Corel Photo Paint Macromedia Xres Metacreations Painter Metacreations Live Picture Micrografx Picture Publisher Microsoft Photo Editor QFX Wright Image

Page 18: Desain grafis dan web

Aplikasi Pengolah Film/VideoProgram yang termasuk dalam kelompok ini dapat dimanfaatkan untuk mengolah film dalam berbagai macam format. Pemberian judul teks (seperti karaoke, teks terjemahan, dll) juga dapat diolah menggunakan program ini. Umumnya, pemberian efek khusus (special effect) seperti suara ledakan, desingan peluru, ombak, dan lain-lain juga dapat dibuat menggunakan aplikasi ini. Yang termasuk dalam kategori ini adalah:

Page 19: Desain grafis dan web

Adobe After Effect Power Director Show Biz DVD Ulead Video Studio Element Premier Easy Media Creator Pinnacle Studio Plus WinDVD Creater Nero Ultra Edition Adobe Premiere Vegas Pro

Page 20: Desain grafis dan web

Aplikasi Pengolah MultimediaProgram yang termasuk dalam kelompok ini biasanya digunakan untuk membuat sebuah karya dalam bentuk Multimedia berisi promosi, profil perusahaan, maupun yang sejenisnya dan dikemas dalam bentuk CD maupun DVD. Multimedia tersebut dapat berisi film/movie, animasi, teks, gambar, dan suara yang dirancan sedemikian rupa sehingga pesan yang disampaikan lebih interktif dan menarik. Yang termasuk dalam kelompok ini adalah:

Page 21: Desain grafis dan web

Macromedia Authorware Macromedia Director Macromedia Flash Multimedia Builder Ezedia Hyper Studio Ovation Studio Pro

Page 22: Desain grafis dan web

APLIKASI MULTIMEDIA

VLC Media Player Songbird Foobar2000 KMPlayer Media Player Classic GOM Player WinAmp

Page 23: Desain grafis dan web

JENIS-JENIS DESAIN GRAFIS

Drafter Desainer khusus untuk membuat arsitektur dan rancang bangun yang simetris dan digunakan untuk keperluan pembuatan sesuatu yang memerlukan ketelitian tinggi dan rancangan. Membutuhkan orang orang yang ahli di software (Autocad, Archicad, 3d revit architecture). Sangat dibutuhkan di dunia arsitektur dan industri.

Page 24: Desain grafis dan web

Editor Desainer khusus untuk membuat kover, sampul, banner, dsb. Dan juga membuat karya karya desain grafis misalnya: brosur, kartu nama, pin, logo, poster, dsb. Yang memerlukan sentuhan pandangan dan software yang harus dikuasai adalah : Corel draw,Adobe Photoshop,Freehand,Illustrator. Sangat dibutuhkan di dunia periklanan dan publikasi.

Page 25: Desain grafis dan web

Layouter Desianer khusus untuk membuat tatanan layout sebuah majalah atau koran atau publikasi yang lainya dan diharuskan mempunyai feel untuk tata letak agar enak dilihat. Sedangkan aplikasi yang harus dikuasai adalah Adobe Page Maker, MS.Publisher, Adobe In Design. Sangat dibutuhkan dipercetakan dan industri koran/buku/majalah.

Page 26: Desain grafis dan web

Art Director Desainer khusus unuk membuat karya karya seni dari komputer yang bisa digunakan untuk visual effects ataupun hanya untuk hiasan saja. Membutuhkan kreativitas tinggi untuk membuat karya agung yang akan dibuat. Sedangkan software yang harus dikuasai adalah : Corel draw, Photoshop, Photo paint, Art creator. Sangat dibutuhkan di dunia perfilman, seniman visualisator, foto editing effects.

Page 27: Desain grafis dan web

Fotografer Desianer khusus yang selain melakukan pengeditan foto juga merangkap sebagai fotografer, harus memiliki talenta khas fotografer serta mampu mengedit foto sesuai event atau yang perfect. Membutuhkan intelegensi tinggi kreativitas tinggi dan harus menguasai adobe photoshop,ieworks,photo studio. Sangat dibutuhkan didunia fotografi, foto editor, wartawan, dsb.

Page 28: Desain grafis dan web

Animator Desainer khusus bekerja pada bidang motion graphic, iklan atau film fantasi. Harus memiliki daya tahan tinggi, pengetahuan yang cukup tinggi , pengalaman dan harus menguasai Macromedia Flash, Adobe Flash, After Effects, 3d Maya, Gif Animator dan Corel Rave. Dibutuhkan di dunia advertising, perfilman, pertelevisian.

Page 29: Desain grafis dan web

VisualisatorDesainer khusus untuk memberikan gambaran sebuah produk atau karya dalam bentuk real / 3d dan harus memiliki kemampuan otak kanan yang cukup tinggi serta harus menguasai 3d Max, Autocad, Swift 3d, Digital Clay. Sangat dibutuhkan di dunia visualisasi produk dan presentasi produk.

Page 30: Desain grafis dan web

Video EditorDesainer khusus untuk mengedit video atau film dan juga merangkap sebagai video shooter, harus memiliki imajinasi tinggi dan harus menguasai Adobe After Effects, 3d Maya, Adobe Premiere, Ulead Video Studio, Sony Vegas, Pinneacle. Sangat dibutuhkan di dunia perfilman dan industri musik.

Page 31: Desain grafis dan web

Integrated DesainerDesainer khusus yang membutuhkan integrasi dengan programmer misalnya pembuatan game, cd interaktif, web desain, dsb. Sedangakan anda harus menguasai hampir semua elemen desain. Sangat dibutuhkan di industri informatika.

Page 32: Desain grafis dan web

YANG DIBUTUHKAN DALAM PEMBUATAN DESAIN GRAFIS

IDE / KONSEP Konsepmerupakanbasic dari sebuah karya design grafis

IMAJINASIMemutar otak, membayangkan visual dari segala macam hal yang berhubungan dengan konsep kita

REFERENSIRiset mencari acuan atau pembanding, mengambil contoh dan inspirasi dari berbagai macam elemen.

SKILLKemampuan teknis untuk mengolah konsep, menjadi sebuah karya desain

Page 33: Desain grafis dan web

KONSEP DESAIN GRAFIS

KomunikatifPrinsip komunikasif berhubungan dengan corporate identity, isi pesan serta audiens.

EstetisDesain web yang tidak memperhatikan keindahan biasanya jarang dikunjungi oleh pengguna, karena pengguna hanya mengunjungi web tersebut sekali saja.

EkonomisDesain web harus memperhatikan faktor ekonomis dalam arti ukuran file yang digunakannya.

Page 34: Desain grafis dan web

PEDOMAN TATA LETAK TAMPILAN DESAIN

KesatuanElemen-elemen layout dari halaman harus ditempatkan sedemikain rupa sehingga merupakan kesatuan informasi pada satu halaman atau beberapa halaman.

BalanceElemen-elemen layout dari halaman harus ditempatkan sedemikain rupa sehingga terdapat keseimbangan secara keseluruhan.

Page 35: Desain grafis dan web

KontrasKontras diperlukan untuk menonjolkan bagian yang dianggap lebih penting dari bagian lainnya.

kontinuitasInformasi mudah dimengerti oleh pengguna bila mempunyai aliran yang baik, sedikit gangguan yang menghambatnya.

Page 36: Desain grafis dan web

PRINSIP DESAIN GRAFIS

Metaphor (Metafora) Adalah aplikasi dari nama atau deskripsi istilah objek lain yang tidak dapat diartikan secara harafiah. Menghubungkan presentasI dan elemen-elemen visual dengan item-item yang berkaitan. Contoh: metafora tampilan desktop.

Page 37: Desain grafis dan web

Clarity (Kejelasan) Harus ada alasan yang kuat/masuk akal mengapa kita menggunakan setiap elemen yang berada dalam suatu interface yang kita buat. Penggunaan yang sedikit akan lebih baik.

Page 38: Desain grafis dan web

Consistency (Ketetapan) Konsistensi dalam tampilan, pewarnaan, gambar, ikon, typography, teks, dll. Harus ada konsistensi baik dalam layar maupun antar layar. Dan harus selalu ada metafora dimanapun juga. Setiap platform mungkin memiliki panduannya.

Page 39: Desain grafis dan web

Alignment (Perataan) Untuk perataan dapat digunakan rata

kiri, kanan atau tengah. Dunia barat dimulai dari kiri atas. Mengijinkan mata untuk menguraikan tampilan dengan lebih mudah.

Page 40: Desain grafis dan web

Proximity Item-item yang berkaitan ditampilkan bersama. Karena jarak yang jauh mengimplikasikan bahwa tidak ada hubungan antar item-item tersebut.

Page 41: Desain grafis dan web

Contrast (Keserasian Tampilan) Membuat anda tertarik, memandu mata anda melihat keseluruhan interface. Keuntungan dari keserasian adalah untuk memperkuat fokus atau untuk memperkuat suatu interface. Contrast dapat digunakan untuk membedakan aktifitas kendali. Juga dapat digunakan untuk men-set item yang paling utama. Item yang paling utama diberi highlight. Gunakan geometri untuk membantu pengurutan.

Page 42: Desain grafis dan web

UNSUR-UNSUR DESAIN GRAFIS

Garis (Line) adalah sebuah garis adalah unsur desain yang menghubungkan antara satu titik poin dengan titik poin yang lain sehingga bisa berbentuk gambar garis lengkung (curve) atau lurus (straight). Garis adalah unsur dasar untuk membangun bentuk atau konstruksi desain.

Page 43: Desain grafis dan web

Bentuk (Shape) adalah segala hal yang memiliki diameter tinggi dan lebar. Bentuk dasar yang dikenal orang adalah kotak (rectangle), lingkaran (circle), dan segitiga (triangle)dan masih banyak lagi.. “polygon” atau kalo di corel draw semuanya ada di “basic Shape”. Sementara pada kategori sifatnya, bentuk dapat dikategorikan menjadi tiga.

Page 44: Desain grafis dan web

Ruang (space) merupakan jarak antara suatu bentuk dengan bentuk lainnya yang pada praktek desain dapat dijadikan unsur untuk memberi efek estetika desain. Sebagai contoh, tanpa ruang Anda tidak akan tahu mana kata dan mana kalimat atau paragraf. Tanpa ruang Anda tidak tahu mana yang harus dilihat terlebih dahulu, kapan harus membaca dan kapan harus berhenti sebentar. Dalam bentuk fisiknya pengidentifikasian ruang digolongkan menjadi dua unsur, yaitu obyek (figure) dan latar belakang (background)

Page 45: Desain grafis dan web

Ukuran adalah unsur lain dalam desain yang mendefinisikan besar kecilnya suatu obyek. Unsur ini digunakan untuk memperlihatkan mana objek manakah yang kita mau tonjolkan atau yang mau dipublis karenan dengan menggunakan unsur ini Anda dapat menciptakan kontras dan penekanan (emphasis) pada obyek desain anda sehingga orang akan tahu mana yang akan dilihat atau dibaca terlebih dahulu.

Page 46: Desain grafis dan web

Warna merupakan unsur penting dalam obyek desain. Dalam perwarnaan hendaknya disesuaikan dengan desain yang akan kita buat. Karena dengan warna orang bisa menampilkan identitas, menyampaikan pesan atau membedakan sifat dari bentuk-bentuk bentuk visual secara jelas. Dalam prakteknya warna dibedakan menjadi dua: yaitu warna yang ditimbulkan karena sinar (Additive color)yang biasanya digunakan pada warna lampu, monitor, TV dan sebagainya, dan warna yang dibuat dengan unsur-unsur tinta atau cat (Substractive color) yang biasanya digunakan dalam proses pencetakan gambar ke permukaan benda padat seperti kertas, logam, kain atau plastik.

Page 47: Desain grafis dan web

HAL YANG HARUS DIPERHATIKAN DALAM PENGGUNAAN WARNA

Tampilkan gambar berwarna pada warna latar hitam. Pilih warna latar depan yang terang (putih, cyan, dll). Hindari warna coklat dan hijau sebagai warna latar. Pastikan bahwa warna latar depan dan warna latar

belakang serasi baik segi brightness maupun hue. Gunakan warna sedikit mungkin, pada rancangan hitam-

putih tambahkan warna yang sesuai. Gunakan warna untuk menarik perhatian,

menghubungkan organisasi, menyatakan status, atau untuk mengadakan suatu hubungan.

Hindari penggunaan warna yang tidak diinginkan oleh user.

Pewarnaan sangat baik untuk mendukung pencarian.

Page 48: Desain grafis dan web

ASSOSIASI WARNA

Merah Æ panas, peringatan, agresi, cinta Pink Æ wanita, cute, kembang gula Oranye Æ musim semi, hangat,

Halloween Kuning Æ gembira, perhatian, sukacita Coklat Æ hangat, musim gugur, kotor,

bumi Hijau Æ lush, pastural, bingung Ungu Æ kekayaan, lembut, “Barney”

Page 49: Desain grafis dan web

MANFAAT DESAIN GRAFIS

Mempercepat proses pekerjaan dengan cara menyajikan suatu pekerjaan dalam bentuk grafis.

Memperkenalkan dunia desain grafis kepada masyarakat luas (secara umum) sehingga dapat diimlementasikan di dalam lingkunganya.

Memperkenalkan kepada masyarakat luas tentang program aplikasi desain grafis.

Mempersiapkan masyarakat (generasi muda/mahasiswa/kaum terpelajar) agar dapat memahami dengan mudah pesan-pesan yang disampaikan dalam bentuk grafis.

Page 50: Desain grafis dan web

DEFINISI WEB

Secara terminologi, website adalah kumpulan dari halaman - halaman situs, yang terangkum dalam sebuah domain atau subdomain, yang tempatnya berada di dalamWorld Wide Web ( WWW ) di dalam Internet. Sebuah halaman web biasanya berupa dokumen yang ditulis dalam format HTML ( Hyper Text Markup Language ), yang selalu bisa diakses melalui HTTP, yaitu sebuah protokol yang menyampaikan informasi dari server website untuk ditampilkan kepada para pemakai melalui web browser. Semua publikasi dari website tersebut dapat membentuk sebuah jaringan informasi yang sangat besar.

Page 51: Desain grafis dan web

SEJARAH WEB

Penemu website adalah Sir Timothy John “ Tim ” Berners - Lee, sedangkanwebsite yang tersambung dengan jaringan, pertama kali muncul pada tahun 1991. Maksud dari Tim membuat website adalah untuk mempermudah tukar menukar dan memperbarui informasi kepada sesama peneliti di tempatnya bekerja. Pada tanggal 30 April 1993, CERN ( tempat dimana Tim bekerja ) menginformasikan bahwa WWWdapat digunakan secara gratis oleh semua orang. Sebuah website bisa berupa hasil kerja dari perorangan atau individu, atau menunjukkan kepemilikan dari sebuah organisasi, perusahaan, dan biasanya website itu menujukkan beberapa topik khusus, atau kepentingan tertentu.

Page 52: Desain grafis dan web

Sebuah website dapat berisi hyperlink ( pranala ) yang menghubungkan ke website lain, jadi, terkadang perbedaan antara website yang dibuat oleh individu perseorangan dengan website yang dibuat oleh organisasi bisnis bisa saja tidak terlalu terlihat.

Website ditulis, atau secara dinamik di konversi menjadi HTML dan diakses melalui sebuah program software yang biasa disebut dengan web browser, yang dikenal juga dengan HTTP Client. Halaman web dapat dilihat atau diakses melalui jaringan komputer dan internet, perangkatnya dapat berupa komputer pribadi , laptop, PDA ataupun telepon selular.

Page 53: Desain grafis dan web

Sebuah website dibuat didalam sebuah sistem komputer yang dikenal dengan server web, atau yang disebut HTTP Server, dan pengertian ini dapat menunjuk pada software yang dipakai untuk menjalankan sistem ini, yang kemudian menerima lalu mengirimkan halaman - halaman yang diperlukan untuk merespon permintaan dari pengguna. Apache adalah piranti lunak yang biasa digunakan dalam sebuah webserver, kemudian setelah itu adalah Microsoft Internet Information Services ( IIS ).

Page 54: Desain grafis dan web

MACAM-MACAM WEBSITE

Web StatisWeb statis adalah website yang mana pengguna tidak bisa mengubah konten dari web tersebut secara langsung menggunakan browser. Interaksi yang terjadi antara pengguna dan server hanyalah seputar pemrosesan link saja. Halaman-halaman web tersebut tidak memliki database, data dan informasi yang ada pada web statis tidak berubah-ubah kecuali diubah sintaksnya.

Page 55: Desain grafis dan web

Web Dinamis Web dinamis merupakan web yang secara

spesifik didisain agar isi yang terdapat dalam situs tersebut dapat diperbarui secara berkala dengan mudah. Sesuai dengan namanya, isi yang terkadung dalam situs web ini umumnya akan berubah setelah melewati satu periode tertentu. Situs berita adalah salah satu contoh jenis situs yang umumnya mengimplementasikan situs web dinamis.

Page 56: Desain grafis dan web

JENIS – JENIS WEBSITE

Website Pribadi/Personal Website Perusahaan (Company Profile) Website Organisasi Website E-Commerce atau Toko Online Website Berita

Page 57: Desain grafis dan web

UNSUR DALAM DESAIN WEB

FONT Anda harus mengatur dan menyesuaikan

ukuran dan jenis font yang akan digunakan dalam website anda.

Color Warna sangat berpengaruh pada tampilan

website Anda, Hati-hati dalam pemilihan warna, jangan terlalu mencolok (merusak pandangan) akan terkesan buruk pada web anda. Sesuaikan dengan image yang anda pakai.

Page 58: Desain grafis dan web

ELEMEN-ELEMEN DESAIN WEB

Teks merupakan bagian yang paling utama untuk menampilkan informasi isi web konten ditampilkan.

Grafik atau Image merupakan elemen yang dapat membantu menjelaskan informasi web yang diinginkan.

Animasi merupakan sarana untuk menampilkan informasi yang baik, karena animasi merupakan daya tarik yang mudah diingat oleh pengunjung.

Page 59: Desain grafis dan web

Video merupakan hasil suatu rekaman dengan kamera video maupun hasil pengolahan dengan komputer.

Suara melengkapi desain web, memberikan efek khusus pada suatu tampilan animasi serta memberikan kenyaman bagi pengunjung yang mendengarkannya

Interaktive link dapat menggunakan button yang berupa teks, simbol, grafik, maupun image, yang berfungsi untuk memudahkan pengunjung dalam menyelusuri suatu website.

Page 60: Desain grafis dan web

Layout Penataan tampilan web sering di

abaikan, padahal itu hal yang penting. web yang baik tidak membingungkan penggunanya..

Page 61: Desain grafis dan web

JENIS WEBSITE BERDASARKAN FUNGSI

Search Engine atau Mesin PencarianSearch Engine atau mesin pencari adalah website yang khusus mengumpulkan semua daftar link dan konten seluruh website yang bisa ditemukan di internet dalam indeks mereka kemudian menampilkan daftar indeks ini berdasarkan kata kunci atau “keywords” yang sesuai yang dicari oleh user. Mayoritas pengguna internet sudah familiar dengan situs search engine ini untuk mencari informasi yang mereka butuhkan melalui internet. Beberapa contoh search engine antara lain : Google Search, Bing, Yahoo Search dan lain-lain.

Page 62: Desain grafis dan web

Web Portal.Web Portal adalah situs yang mengumpulkan dan menyediakan aneka informasi dari berbagai sumber untuk ditampilkan kepada user, jika user tertarik untuk mengetahui informasi yang ada dengan lebih lengkap, user akan diarahkan ke sumber yang aslinya. Namun pada umumnya web portal tidak hanya menampilkan informasi dari sumber luar, kadang mereka juga menampilkan informasi-informasi dalam website mereka sendiri. Beberapa contoh web portal antara lain : Yahoo, msn, msnbc dan lain-lain.

Page 63: Desain grafis dan web

Wiki.Website wiki yang paling terkenal saat ini adalah wikipedia. Website wiki adalah website yang mengijinkan pengunjung untuk ikut menulis dan mengedit artikel yang ada dalam website tersebut dengan peraturan-peraturan tertentu. Masing-masing website wiki memiliki aturan yang berbeda-beda. Biasanya, meskipun semua pengunjung bebas untuk menulis dan mengedit artikel di website ini, namun ada sekelompok orang yang bertugas untuk memeriksa konten yang dimuat apakah layak atau tidak untuk website tersebut. Meskipun website wiki sering menjadi sumber referensi namun tidak semua informasi yang ada dapat dipercaya 100%.

Page 64: Desain grafis dan web

Archieve SiteArchieve site atau situs arsip adalah website yang dibuat untuk mengumpulkan dan menyimpan materi-materi elektronik berupa konten-konten dan halaman-halaman website agar tidak hilang/punah. Contohnya archieve.org dan google groups.

Page 65: Desain grafis dan web

Social NetworkingSocial networking termasuk salah satu fenomena yang luar biasa hingga saat ini, khususnya diwakili oleh Facebook. situs social networking atau situs pertemanan online adalah situs yang disediakan bagi para membernya untuk bertukar informasi dan media elektronik lainnya seperti foto, musik dan video. Beberapa situs social networking yang terkenal sebelum fenomena Facebook dan Twitter antara lain Multiply, Friendster dan MySpace. setelah tergusur Facebook dan Twitter, Friendster saat ini telah mengubah konsep sebagai situs game online dan Multiply yang tadinya mengusung konsep social networking dalam bentuk blog, kini lebih mengutamakan fitur portal toko online.

Page 66: Desain grafis dan web

ForumForum termasuk salah satu jenis website yang pernah menjamur di Indonesia. Apalagi sejak fenomena KasKus sebagai forum no 1 dan juga website dengan pengunjung terbanyak di Indonesia. Forum dibuat untuk ajang diskusi dan tukar informasi. Ada yang spesifik ada juga yang bersifat umum, dan dalam forum ini terdapat sub-sub forum berdasarkan kategori-kategori tertentu yang ditetapkan oleh admin. Untuk membangun sebuah forum yang lengkap membutuhkan waktu yang sangat banyak. Untungnya sudah tersedia software-software pembuat forum yang siap pakai, baik yang gratis ataupun berbayar. Software pembuat forum yang terkenal adalah vBulletin, yang digunakan oleh kaskus dan banyak forum-forum internet lainnya. Sedangkan beberapa forum gratisan dan open-source antara lain : yabb, vanilla, SMF, phpbb dan lain-lain. Sedangkan contoh website forum antara lain Kaskus, Modifikasi, detikForum dan lain-lain.

Page 67: Desain grafis dan web

News SiteNews site atau situs berita adalah situs yang memuat berita-berita dan artikel-artikel untuk dibaca pengunjung. Bisa juga berisi opini dan komentar-komentar seputar politik, teknologi dan lain-lain. Situs-situs berita ini seperti layaknya koran, majalah dan buletin online. Konsep dan karakteristik situs berita berbeda-beda sesuai dengan jenis berita dan target pembacanya. Beberapa contoh situs berita adalah detik, kompas, cosmopolitan dan lain-lain.

Page 68: Desain grafis dan web

Social BookmarkingSocial bookmarking adalah situs yang mengijinkan user untuk memasukan informasi atau sumber informasi artikel-artikel tertentu untuk dibaca atau di-rating dan dikomentari oleh user lainnya. Situs jenis ini sering digunakan oleh pemilik situs berita, blog dan situs-situs lainnya untuk mempromosikan konten situs mereka. Beberapa situs social bookmarking yang terkenal adalah Lintas Berita, Digg dan stumbleupon

Page 69: Desain grafis dan web

Media SharingSitus ini khusus disediakan bagi user untuk meng-upload media-media elektroknik seperti gambaer, musik dan video agar dapat dilihat atau di download oleh pengunjung lain. Contohnya adalah Youtube, Flickr, Imageshack dll.

Page 70: Desain grafis dan web

Company ProfileCompany profile biasanya berupa website sederhana untuk menampilkan profil dan produk atau jasa serta portfolio sebuah perusahaan. Website jenis ini hanya untuk memperkenalkan profil perusahaan meskipun juga dapat menjadi alat promosi jika dikelola dengan benar. Selain profil,produk dan portfolio berupa konten teks dan foto atau video, fitur form kontak termasuk yang penting dalam website ini agar pengunjung dapat dengan mudah menghubungi perusahaan pemilik website jika mereka memerlukan produk atau jasa perusahaan tersebut. Namun belakangan ini situs Company Profile semakin berkembang dengan menambahkan fitur-fitur tertentu seperti artikel-artikel terkait, bahkan forum diskusi. Tujuannya adalah untuk memperbanyak konten dan menjaring pengunjung lebih banyak. Contoh website company profile antara lain : Remax Capital, Pratama Jaya Jasa dan lain-lain.

Page 71: Desain grafis dan web

Corporate WebsiteBerbeda dengan company profile, Corporate Website biasanya lebih kompleks. Website ini berisi informasi lengkap dari latar belakang hingga kegiatan-kegiatan suatu perusahaan, organisasi atau yayasan sosial baik yang bersifat profitable ataupun non-profit. Informasi-informasi dalam corporate website bisa berupa profile perusahaan/organisasi, latar belakang, visi dan misi, daftar founder dan pengurus, informasi investor dan klien hingga laporan keuangan, afiliasi dan lain-lain serta artikel-artikel dan berita-berita yang terkait dengan kegiatan perusahaan/organisasi tersebut. Contoh corporate website antara lain, Pertamina, General Motors dan lain-lain.

Page 72: Desain grafis dan web

Brand Building WebsiteBrand Building Website dibuat untuk memperkenalkan serta membangun image sebuah brand. Yang paling menonjol dari website seperti ini adalah konsep untuk menyampaikan pesan sesuai dengan image yang akan dibangun. Fiturnya sangat beragam dan biasanya cukup kompleks seperti animasi, game, video dan fitur-fitur interaktif lainnya. Belakangan Brand Building website juga sering diintegrasikan dengan social media seperti Facebook, Twitter hingga blog. Brand Building website sering dimanfaatkan oleh produk-produk fast moving consumer goods misalnya groseri, soft drinks, snack dan lain-lain.

Page 73: Desain grafis dan web

Online StoreOnline store atau toko online sudah jelas peruntukannya adalah untuk menjual barang secara online. Fitur-fitur utama online store adalah katalog produk dengan informasi yang lengkap serta shopping cart, yaitu fitur untuk pengunjung untuk melakukan pemesanan produk secara online. Online store bisa bermacam-macam bentuk dan konsepnya. Fitur-fitur online store juga bisa bermacam-macam disesuaikan dengan budget dan kemudahan yang didapatkan. Baik kemudahan mengelola online store itu sendiri ataupun kemudahan bagi pengunjung untuk memilih dan berbelanja produk.

Page 74: Desain grafis dan web

Katalog/Portfolio OnlineKatalog/portfolio online hampir mirip dengan online store, hanya jenis website ini lebih mengutamakan katalog atau portfolio dengan informasi lengkap bagi pengunjung tanpa ada fitur transaksi online. Jika pengunjung tertarik dengan produk-produk atau jasa yang ditawarkan, diharapkan pengunjung akan langsung menghubungi pemilik website untuk melakukan pemesanan atau negosiasi.

Page 75: Desain grafis dan web

BlogBlog adalah sebuah website yang berbentuk seperti jurnal atau diari online. Biasa digunakan seorang blogger untuk mengeskpresikan pemikiran dan opini-opininya. Bisa juga artikel-artikel seputar kegiatan blogger. Bisa berisi tulisan maupun media gambar, video dan lainnya. Setiap artikel biasanya disertai kolom komentar dimana pengunjung blog bisa meninggalkan komentar atau berdiskusi mengenai artikel yang ditulis. Blog juga dianggap sebagai salah satu social media karena para blogger biasanya saling berinteraksi melalui blog.

Page 76: Desain grafis dan web

MANFAAT WEBSITE

Media Interaksi Media Promosi Sumber daya tanpa lelah Media untuk terkenal Tempat hiburan terlengkap, All in One Informan terlengkap

Page 77: Desain grafis dan web

FUNGSI WEBSITE

Sebuah website merupakan representasi perusahaan di dunia maya dalam arti kata keseluruhan asset fisik yang ada direduksi menjadi sekumpulan informasi digital yang dapat diakses oleh siapa saja di dunia ini;

Sebuah website merupakan kanal akses (access channel) yang menghubungkan perusahaan dengan stakeholder-nya seperti supplier, pelanggan, pemerintah, masyarakat, atau mitra bisnisnya;

Sebuah website merupakan tempat dimana perusahaan menawarkan produk dan/atau jasanya kepada para calon pelanggan yang memiliki akses ke internet, dan di tempat ini pulalah transaksi jual-beli antara dua belah pihak terjadi; dan

Sebuah website merupakan tempat dimana berbagai komunitas dapat saling berinteraksi, membagi informasi dan pengetahuannya kepada orang lain secara bebas dan terbuka.

Page 78: Desain grafis dan web

KRITERIA DALAM MEMBUAT WEBSITE

Site Design – menyangkut hal-hal yang berkaitan dengan tampilan website dan sistem menu yang dipergunakan

Site Functionality – menyangkut beragam fasilitas dan kemudahan yang tersedia di website

Customer Value – menyangkut berbagai aspek manfaat yang dapat secara langsung dirasakan oleh para pelanggan yang mengakses website terkait

Page 79: Desain grafis dan web

HAL YANG HARUS DIPERHATIKAN MEMBUAT DESAIN WEB

Pertimbangkan Mengenai Responsive Web Design Responsive web design adalah upaya untuk membuat website ditampilkan dalam ukuran yang sesuai dalam berbagai device apa pun.

Membuat Desain Yang Menarik, Pastikan bahwa web design perusahaan yang Anda buat mempunyai karakteristik unik yang membedakannya dengani situs lain.

Page 80: Desain grafis dan web

Membuat Konten Yang Jelas Dan Singkat, Konten yang original dan berkualitas akan meningkatkan trafik ke web yang dibuat.

Perhatikan SEOSEO adalah proses untuk meningkatkan peringkat dari website Anda pada mesin pencari. Hal ini dapat dilakukan dengan cara mengedit konten situs Anda, mengedit link, mengedit coding dan beberapa faktor lain.

Prioritaskan Keamanan

Page 81: Desain grafis dan web

TIPS UNTUK MENDESAIN WEB

Grafis/Gambar Grafis atau gambar merupakan bagian terpenting dari suatu desain situs Internet. Dengan grafis/gambar, kita dapat memberikan unsur warna, kesan dan tema.

LayoutMerancang sebuah layout website desain yang tampak sama untuk semua halaman situs Anda akan lebih memudahkan pengunjung dalam memahami isi situs Anda, daripada membuat layout website desain yang berbeda-beda untuk setiap halaman.

Page 82: Desain grafis dan web

NavigasiNavigasi yang mudah merupakan hal yang penting dalam situs yang baik

IklanIklan yang terlalu banyak merupakan hal yang buruk bagi para pengunjung. Cobalah untuk menempatkannya sebaik mungkin di tempat yang paling dihiraukan pengunjung tanpa mengganggu prioritas isi atau content yang ada.

Page 83: Desain grafis dan web

Proses Pemeliharaan (maintenance)Jika Anda menghubungkannya dengan situs yang lain, Anda harus memeriksanya secara rutin untuk memastikannya masih ada, karena kadang ada situs yang hilang.

Sesuatu yang ‘Berkedip’Sesuatu yang berkedip, entah itu gambar maupun tulisan, dapat menjadi hal yang mengganggu pengunjung.

Page 84: Desain grafis dan web

Ramai/BerisikBanyak orang sering menambahkan musik pada situs mereka. Semua itu baik, tetapi jika lagu terlalu keras hingga pengunjung tidak nyaman

Pop-Ups Tidak hanya iklan pop-up namun juga pop up boxes.

Anda tahu, ketika Anda membuka sebuah situs dan kemudian nama Anda ditanyakan, mungkin itu masih bisa dimaklumi. Namun jika kemudian muncul 5 (lima) baris pertanyaan berbeda atau harus menjawab sebuah pertanyaan di setiap halaman situs tersebut, maka pengunjung akan segera menutup dan meninggalkan situs tersebut, karena merasa terganggu.

Page 85: Desain grafis dan web

WarnaDengan memberikan warna yang tepat, maka akan menambah kesempurnaan situs, sehingga halaman-halamannya akan mudah dibaca.

Fonts Anda tidak harus memakai standart fonts yang

sama terus menerus dalam sebuah situs agar tidak membosankan. Ada banyak sekali jenis font yang lain, yang akan membuat tulisan Anda terlihat lebih menarik. Namun pemakaian font yang terlalu beraneka ragam dalam suatu halaman juga tidak baik.

Page 86: Desain grafis dan web

Gaya PenulisanSetiap orang mempunyai cara penulisan sendiri. Anda dapat menjadi seseorang yang lucu, serius, atau apa adanya.

Isi/ContentAnda akan buat website seperti apa? Hal apapun yang Anda tulis, Anda harus yakin bahwa ejaan dan tata bahasa yang dipergunakan sudah benar, dan jika Anda mempunyai cukup waktu, bacalah ulang untuk meyakinkan bahwa sudah tidak ada lagi kesalahan bahasa.

Page 87: Desain grafis dan web

BAHASA PEMROGRAMAN WEB

Bahasa Pemrograman HTMLHyperText Markup Language (HTML) adalah sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web dan menampilkan berbagai informasi di dalam sebuah browser Internet.HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C).HTML berupa kode-kode tag yang menginstruksikan browser untuk menghasilkan tampilan sesuai dengan yang diinginkan.Sebuah file yang merupakan file HTML dapat dibuka dengan menggunakan browser web seperti Mozilla Firefox atau Microsoft Internet Explorer.

Page 88: Desain grafis dan web

Bahasa Pemrograman CSSCascading Style Sheets (CSS) adalah suatu bahasa stylesheet yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup.Penggunaan yang paling umum dari CSS adalah untuk memformat halaman web yang ditulis dengan HTML dan XHTML.Walaupun demikian, bahasanya sendiri dapat dipergunakan untuk semua jenis dokumen XML termasuk SVG dan XUL.Spesifikasi CSS diatur oleh World Wide Web Consortium (W3C).

Page 89: Desain grafis dan web

Bahasa Pemrograman PHPPHP adalah bahasa pemrograman script yang paling banyak dipakai saat ini.PHP pertama kali dibuat oleh Rasmus Lerdorf pada tahun 1995. Pada waktu itu PHP masih bernama FI (Form Interpreted), yang wujudnya berupa sekumpulan script yang digunakan untuk mengolah data form dari web.PHP banyak dipakai untuk membuat situs web yang dinamis, walaupun tidak tertutup kemungkinan digunakan untuk pemakaian lain.PHP biasanya berjalan pada sistem operasi linux (PHP juga bisa dijalankan dengan hosting windows).

Page 90: Desain grafis dan web

Bahasa Pemrograman ASPASP adalah singkatan dari Active Server Pages yang merupakan salah satu bahasa pemograman web untuk menciptakan halaman web yang dinamis.ASP merupakan salah satu produk teknologi yang disediakan oleh Microsoft.ASP bekerja pada web server dan merupakan server side scripting

Page 91: Desain grafis dan web

Bahasa Pemrograman XMLExtensible Markup Language (XML) adalah bahasa markup serbaguna yang direkomendasikan W3C untuk mendeskripsikan berbagai macam data.XML menggunakan markup tags seperti halnya HTML namun penggunaannya tidak terbatas pada tampilan halaman web saja.XML merupakan suatu metode dalam membuat penanda/markup pada sebuah dokumen.

Page 92: Desain grafis dan web

Bahasa Pemrograman WMLWML adalah kepanjangan dari Wireless Markup Language, yaitu bahasa pemrograman yang digunakan dalam aplikasi berbasis XML (eXtensible Markup Langauge).WML ini adalah bahasa pemrograman yang digunakan dalam aplikasi wireless.WML merupakan analogi dari HTML yang berjalan pada protocol nirkabel.

Page 93: Desain grafis dan web

Bahasa Pemrograman PERLPerl adalah bahasa pemrograman untuk mesin dengan sistem operasi Unix (SunOS, Linux, BSD, HP-UX), juga tersedia untuk sistem operasi seperti DOS, Windows, PowerPC, BeOS, VMS, EBCDIC, dan PocketPC.PERL merupakan bahasa pemograman yang mirip bahasa pemograman C.

Page 94: Desain grafis dan web

Bahasa Pemrograman CFMCfm dibuat menggunakan tag ColdFusion dengan software Adobe ColdFusion / BlueDragon / Coldfusion Studio.Syntax coldfusion berbasis html.

Page 95: Desain grafis dan web

Bahasa Pemrograman JavascriptJavascript adalah bahasa scripting yang handal yang berjalan pada sisi client.JavaScript merupakan sebuah bahasa scripting yang dikembangkan oleh Netscape.Untuk menjalankan script yang ditulis dengan JavaScript kita membutuhkan JavaScript-enabled browser yaitu browser yang mampu menjalankan JavaScript.

Page 96: Desain grafis dan web

APLIKASI UNTUK DESAIN WEB

SeaMonkeySeaMonkey dikembangkan oleh Mozilla Foundation. SeaMonkey merupakan “all-in-one” web browser yang sederhana namun canggih untuk editor HTML.

KompoZer.KompoZer adalah fully-featured web authoring system yang terpadu klien FTP yang intuitif dan support untuk semua sistem operasi.

Page 97: Desain grafis dan web

NOTEPAD++.NotePad ++ merupakan aplikasi open source yang sangat popupler sebagai editor teks untuk Windows. Walaupun tidak hanya semata-mata untuk web designer tetapi aplikasi ini memiliki “source code editor” yang mendukung editor HTML, XML, CSS, dan JavaScript.

Bluefish Editor.Bluefish Editor adalah aplikasi yang ringan dan cepat untuk proses editor yang ditujukan untuk perancang dan programer web. Mempunyai fasiltas Wizards yang berguna untuk pembuatan dokumen HTML.

Page 98: Desain grafis dan web

Quanta Plus.Quanta Plus adalah pengembangan Web IDE. Quanta Plus sangat extensible dan dapat menjalankan skrip kustom.Aplikasi ini sangat baik untuk editor css karena memiliki kode hints dan auto komplet sintaks.

Amaya.Amaya adalah aplikasi gratis, open source web editor dan browser web yang dikembangkan oleh World Wide Web Consortium (W3C). Amaya dimulai sebagai HTML / CSS editor dan telah berkembang menjadi sebuah editor untuk berbagai sistem berbasis XML seperti MathML dan SVG.

Page 99: Desain grafis dan web

OPEN BEXI HTML Builder. OPEN BEXI HTML Builder adalah browser berbasis open source untuk menciptakan aplikasi HTML halaman web. OPEN BEXI HTML Builder memiliki CSS color picker built.

jEdit. jEdit adalah sebuah editor teks untuk programmers. jEdit dapat berjalan di Mac, Windows, dan Linux dan mempunyai fasilitas “syntax highlighting” untuk HTML, XML, CSS, JavaScript dan bahasa pemrograma lainnya.

Page 100: Desain grafis dan web

APLIKASI WEB BROWSER

Mozilla Firefox Internet Exporer Safari Flock Opera K-Meleon SeaMonkey Camino Konqueror