Perancangan Tampilan Website Perusahaan Asgar Muda Sebagai Media Promosi : Laporan Kerja Praktek

(1)

(2)

Laporan Kerja Praktek

PERANCANGAN TAMPILAN

WEBSITE

PERUSAHAAN ASGAR MUDA SEBAGAI

MEDIA PROMOSI

DK 36502 KERJA PRAKTEK Oleh :

Ega Bismahadi 51909050

Desain Komunikasi Visual

Dosen Pembimbing :

Wira Mahardika Putra, S.Ds

FAKULTAS DESAIN

UNIVERSITAS KOMPUTER INDONESIA

BANDUNG

(3)

(4)

iii

ABSTRAK

(5)

ABSTRACT

In the writing of this report, the author is discussing about website

design for ASGARMUDA FOUNDATION. The disscusion starts from background of company, organization structure, until the concept of

website design of ASGARMUDA FOUNDATION. The purpose of writing this report is to know ho w important the website media campaign

(6)

i

KATA PENGANTAR

Dengan mengucap puji dan syukur kepada Allah SWT, yang mana atas rahmatNya, laporan kerja praktek ini dapat diselesaikan. Penulisan laporan kerja praktek ini untuk memenuhi persyaratan kelulusan program Studi Stara I pada Jurusan Desain Komunikasi Visual di Universitas Komputer Indonesia Bandung.

Laporan ini berjudul : PERANCANGAN TAMPILAN WEBSITE

PERUSAHAAN ASGARMUDA SEBAGAI MEDIA PROMOSI. Praktikan

mengambil judul ini karena sesuai dengan hasil lapangan Kerja Praktek dimana penulis memegang peranan sebagai perancang grafis website di perusahaan tersebut.

Dalam proses Kerja Praktek dan Penulisan Laporan Kerja Praktek ini, tentunya penulis mendapatkan ilmu yang sangat bermanfaat, juga banyak mendapat pengalaman kerja yang sangat berguna, penulis juga merasakan bagaimana pahit-manisnya di dunia kerja.

Penulis sangat berterima kasih kepada semua pihak yang telah membantu menyelesaikan penulisan laporan kerja praktek ini. Mohon maaf bila laporan ini masih jauh dari sempurna, maka dari itu kritik dan saran yang membangun akan sangat berguna.

Demikian Laporan Kerja Praktek ini saya buat semoga bermanfaat.

Bandung, 20 Juni 2012 Penyusun,

(7)

DAFTAR ISI

1.1 Latar Belakang Kerja Praktek... 1

1.2 Tujuan Kerja Praktek ... 2

1.3 Waktu dan Tempat Pelaksanaan Kerja Praktek ... 2

BAB II TINJAUAN UMUM YAYASAN ASGARMUDA ... 3

2.1 Sejarah Perusahaan ... 3

2.2 Profil Perusahaan ... 4

2.2.1 Logo Perusahaan ... 4

2.2.2 Bidang Perusahaan ... 5

2.2.3 Badan Hukum Perusahaan ... 5

2.2.4 Struktur Organisasi Perusahaan... 5

2.2.4 Visi dan Misi Perusahaan ... 6

BAB III LAPORAN KERJA PRAKTEK 3.1 Peranan Dalam Perusahaan... 7

3.2 Pekerjaan Selama di Perusahaan ... 7

(8)

vi

3.4 Perancangan Design Website Yayasan ASGARMUDA... 8

3.4.1 Konsep Perancangan ... 8

3.4.2 Teknis Perancangan ... 10

BAB IV KESIMPULAN ... 17

4.1 Kesimpulan ... 17

DAFTAR PUSTAKA ... ix

LAMPIRAN ... x

(9)

BAB I

PENDAHULUAN

1.1 Latar Belakang Kerja Praktek

Di era yang serba elektronik saat ini, masyarakat tentunya sangat mudah untuk mendapatkan informasi yang mereka butuhkan. Untuk mencari informasi apapun, seseorang tidak perlu bersusah payah untuk mendatangi sumber informasi yang terkadang jaraknya sangat jauh atau bahkan terkadang kita tidak tahu di manakah kita harus meminta informasi tentang data yang kita butuhkan.

Saat ini, internet sudah merupakan suatu kebutuhan bagi sebagian masyarakat kita. Bersumber dari internet inilah berbagai kemudahan akan sebuah informasi bisa kita dapatkan. Untuk mendapatkan informasi melalui internet, saat ini bukanlah sesuatu yang sulit.

Oleh karena itu Yayasan ASGARMUDA membutuhkan website

untuk media promosi maupun untuk memudahkan tujuan serta visi dan misi perusahaan. Perancangan website (web design) adalah istilah umum yang digunakan untuk mencakup bagaimana isi web konten ditampilkan. Tujuan dari perancangan ini adalah untuk membuat design website perusahaan terlihat menarik. Sebuah

website dapat berupa sekumpulan teks, gambar, suara dan konten lainnya, serta dapat bersifat interaktif ataupun statis.

Desain grafis sangat berhubungan erat dengan perancangan

website karena desain mempunyai peranan yang sangat penting pada situs atau website.

(10)

2 1.2 Tujuan Kerja Praktek

Mengacu pada Buku Panduan Kerja Praktek, pada Program Studi Desain Komunikasi Visual, Universitas Komputer Indonesia, maka Tujuan kerja praktek adalah untuk :

 Memenuhi kewajiban melaksanakan mata kuliah Kerja Praktek.

 Mengaplikasikan ilmu yang telah diperoleh selama melaksanakan proses perkuliahan.

 Menambah pengetahuan dan pengalaman bekerja.

 Mendapatkan pengalaman Soft Skill, yang tentu akan berguna pada saat mahasiswa telah lulus dan bekerja.

1.3 Waktu dan Tempat Pelaksanaan Kerja Praktek

Kerja Praktek dilaksanakan di tempat tinggal penulis serta rumah salah seorang pengurus perusahaan saudara Yuyus Rudimansah, S.Si yang berada di Bandung tepatnya di Jalan Gagak. Untuk pekerjaan dikerjakan di tempat tinggal penulis, dan perusahaan memberikan data-data yang dibutuhkan untuk pengerjaan website.

(11)

BAB II

TINJAUAN UMUM YAYASAN ASGAR MUDA

2.1 Sejarah Perusahaan

Sejarah telah menunjukkan kepada kita bahwa generasi muda senantiasa memegang peranan penting dalam proses perubahan dalam kehidupan berbangsa ini. Begitu pula dalam konteks masa depan, pemuda senantiasa diidentikkan dengan predikat pemegang tahta, pewaris kepemimpinan masa depan.

Globalisasi telah menghadirkan peluang serta tantangan yang belum pernah kita hadapi sebelumnya. Sejarah menunjukkan pada kita fakta bangsa yang besar adalah bangsa yang mampu menguasai pengetahuan/teknologi serta mempertahankan karakter kebangsaannya (nation and character building).

Pemuda sebagai salah satu elemen dalam masyarakat memiliki peran strategis yang khas. Dengan idealisme, dinamisasi, serta keberaniannya ditambah aspek intelektualitas ia mampu menjadi pelopor dalam segenap perubahan (agent of change) dan pembangunan (agent of development). Oleh karena itu sudah saatnya segenap aspek pembangunan melibatkan pemuda, yang melahirkan konsekuensi pemuda pun harus proaktif dan tulus mengabdi pada masyarakat.

Kami Generasi Muda Asal Garut merasa terpanggil untuk menyumbangkan tenaga, pikiran kami sekecil apapun untuk Garut yang lebih baik. maka dibentuklah ASGARMUDA, yang bertujuan menampung semua potensi pemuda-terutama alumni dan mahasiswa- untuk membina diri serta mengaktualisasikan perannya dalam rangka berkontribusi membangun daerah

(12)

4

dengan mengusung dan melestarikan nilai-nilai budaya Garut. Dan mulai didirikan pada tanggal 12 Mei 2007 di Garut.

Melihat peran historis pemuda yang senantiasa memainkan peranan penting dalam perubahan, serta Visi di masa depan bahwa Indonesia harus menjadi negeri yang sejahtera dan bermartabat di dunia, maka kami optimis dengan tekad yang kuat, kerendahan hati, serta tentunya Doa memohon ridha dan pertolongan-Nya kami bisa menghasilkan sinergi positif untuk Garut, kami yakin, masa depan gemilang adalah Milik Generasi Muda yang mampu menggabungkan potensi lokal dengan peluang global.

2.2 Profil Perusahaan

Nama Perusahaan : Yayasan Asgar Muda

Alamat : Jalan Muhammadiyah no 48 Garut Kota

(13)

2.2.2 Bidang Perusahaan

Berdiri dengan nama Yayasan ASGARMUDA adalah organisasi kekaryaan pemuda Garut yang berorientasi kepada peningkatan kesejahteraan masyarakat Garut dengan mengusung dan melestarikan nilai-nilai budaya Garut. Dan mulai didirikan pada tanggal 12 Mei 2007 di Garut..

2.2.3 Badan Hukum Perusahaan

Yayasan adalah badan hukum yang terdiri atas kekayaan yang dipisahkan dan diperuntukkan dalam mencapai tujuan tertentu dibidang sosial, keagamaan, dan kemanusiaan, yang tidak mempunyai anggota. Yayasan dapat mendirikan badan usaha yang kegiatannya sesuai dengan maksud dan tujuan yayasan.

2.2.4 Struktur Organisasi Perusahaan

(14)

6 2.2.5 Visi dan Misi Perusahaan

VISI:

Pembinaan dan Aktualisasi Generasi Muda untuk Kesejahteraan Masyarakat Garut.

MISI:

1. Turut berperan aktif dan berkontribusi dengan menggalang kebersamaan dan kesetiakawanan menyumbangkan karya dan pikiran dalam penataan kehidupan masyarakat Garut.

2. Memupuk dan membina rasa persaudaraan dan kekeluargaan para anggotanya.

(15)

BAB III

LAPORAN KERJA PRAKTEK

3.1 Peranan Dalam Perusahaan

Praktikan berperan sebagai Desainer dalam proyek pembuatan

Website untuk Yayasan Asgar Muda. Praktikan dibimbing oleh Ketua Umum Yayasan Asgar Muda selama kerja praktek berlangsung.

Kewajiban yang harus diselesaikan oleh praktikan adalah menyelesaikan projek pembuatan Tampilan Website Yayasan Asgar Muda.

3.2 Pekerjaan Selama di Perusahaan

Dalam pelaksanaan kerja praktek di Yayasan Asgar Muda praktikan mempunyai tanggung jawab menentukan, merancang serta menyelesaikan Desain untuk Website Yayasan Asgar Muda sesuai

brief yang telah diberikan oleh Ketua Umum Yayasan Asgar Muda.

3.3 Metode Kerja

(16)

8

3.4 Perancangan Tampilan Website Yayasan Asgar Muda 3.4.1 Konsep Perancangan Tampilan Website

Tahap yang pertama kali dilakukan oleh praktikan setelah menerima brief adalah membuat Pemetaan pikiran (mind map). Dari hasil brief penulis mendapatkan beberapa keyword dan image

perusahaan yaitu muda, ceria, pendidikan, organisasi dan budaya.

Gambar III.1 Mind Mapping

Dari penggabungan beberapa keyword tersebut penulis mendapatkan beberapa konsep untuk digunakan dalam elemen visual

Website Yayasan Asgar Muda, yaitu merah putih (indonesia), tidak terlalu formal, ceria dan terbuka.

Langkah selanjutnya membuat sketsa tampilan website sesuai dengan konsep yang diperoleh dari mind map. Penulis membuat beberapa sketsa untuk tampilan website, penulis juga menyesuaikan tampilan dengan jenis website dinamis, agar memudahkan

(17)

Gambar III.2 sketsa pertama

Sketsa tahap awal lebih fokus pada bagian header, body dan

footer, untuk desain layout akan mengikuti sketsa yang dipilih.

Gambar III.3 sketsa kedua

Sketsa tahap kedua penulis melakukan pemilihan warna dari sketsa yang sudah dipilih yang akan digunakan dalam Website

(18)

10

Gambar III.4 warna dasar

Pemilihan warna disesuaikan dengan konsep yang telah didapat pada tahap sebelumnya. Warna dasar yang digunakan adalah warna merah, putih, abu-abu dan hitam. Warna dasar yang dipilih harus cocok atau match dengan logo Yayasan Asgar Muda, warna yang digunakan juga merupakan warna yang telah dijadikan identitas visual perusahaan .

Tahap selanjutnya praktikan memilih beberapa font yang akan digunakan pada website Yayasan Asgar Muda. Setelah menentukan warna dan font, langkah selanjutnya yang praktikan lakukan adalah membuat sketsa menjadi digital (digitalisasi).

3.4.2 Teknis Perancangan

Tahap selanjutnya adalah tahapan-tahapan perancangan untuk pembuatan Website Yayasan Asgar Muda, praktikan menggunakan

software Adobe Photoshop CS5 dan Adobe Illustrator CS5 untuk membuat tampilan website.

Penulis membuat dummy layout dasar dan membuat beberapa icon

yang akan digunakan pada website menggunakan Adobe Illustrator CS5, icon dirancang berdasarkan identitas visual perusahaan dan dikemas secara unik namun tetap simple dan sesuai dengan content -nya. Untuk icon social network dirancang dengan gaya Drawing Pen

(19)

Gambar III.5 proses pembuatan icon

Proses selanjutnya penulis mulai mengumpulkan bahan-bahan yang akan diaplikasikan pada website, bahan-bahan yang tersedia berupa image dan data-data perusahaan yang sudah penulis kumpulkan sebelumnya. Pada proses ini penulis menggunakan software Adobe Photoshop CS5 dan mulai merancang desain layout

untuk halaman utama website. Pada beberapa image penulis mengatur brightness dan contrast-nya agar gambar terlihat lebih tajam dan sesuai dengan layout dasar.

Penulis hanya memakai warna-warna dasar yang sudah menjadi identitas perusahaan, untuk warna huruf penulis memakai warna hitam dan abu-abu, lalu untuk icon dibuat dengan beberapa versi yaitu dengan shadow dan tanpa shadow, langkah ini dilakukan untuk proses pembuatan roll-over nanti.

Tahap selanjutnya adalah pemilihan jenis-jenis huruf atau font, pemilihan font yang tepat sangat penting memaksimalkan tujuan dari

(20)

12

Gambar III.6 merancang halaman utama

Jenis-jenis font yang digunakan adalah Helvetica Neue LT Std, HelveticaTextbook LT Roman, Helvetica CE, Segoe Script, Harabara,

Gambar III.7 pemilihan jenis huruf

(21)

Gambar III.8 jenis font yang dipakai

Gambar III.9 perancangan ilustrasi

Kemudian proses dilanjutkan dengan perancangan elemen grafis berupa ilustrasi, dengan mengikuti konsep penulis membuat ilustrasi yang bersifat ceria, terbuka dan juga bebas menggunakan Adobe Ilustrator CS5 dan akan di export kembali ke Photoshop.

(22)

14

Gambar III.10 perancangan tampilan halaman profil dan kontak

Gambar III.11 perancangan tampilan halaman program Bagian terakhir adalah proses pemotongan atau proses slicing,

proses ini dikerjakan menggunakan Photoshop dengan cara

memotong bagian-bagian dari halaman. Proses ini dikerjakan agar memudahkan Programmer pada saat proses perancangan hyperlink

(23)

.

Gambar III.12 proses pemotongan

(24)

16

(25)

BAB IV

KESIMPULAN

4.1 Kesimpulan

Selama kerja praktek berlangsung yang bertempat di Yayasan Asgar Muda, dengan memakan waktu sekitar satu bulan, yang dimulai dari bulan Mei sampai dengan bulan Juni, praktikan dapat menghasilkan laporan kerja praktek yang berjudul "PERANCANGAN TAMPILAN

WEBSITE PERUSAHAAN ASGAR MUDA SEBAGAI MEDIA

PROMOSI".

Selain itu banyak bidang keilmuan diluar dari keilmuan desain komunikasi visual, seperti kiat – kiat dalam menghadapi seorang klien dan cara berkomunikasi yang baik dengan seorang klien. Yang penulis dapat dan berguna di dunia kerja nantinya.

(26)

ix