TATARAN ELEMENTER. Unsur-unsur pembentukan karya

Transkripsi

1 TATARAN ELEMENTER Unsur-unsur pembentukan karya Alasan kenapa saya merancang ulang website ini adalah ingin merancang kembali website tersebut menjadi sebuah website dengan tampilan yang atraktif dan menarik, sesuai dengan kaidah-kaidah desain komunikasi visual. Tampilan website penjualan alat tulis kantor (atk) CV Inti Karya Utama sebelumnya terlihat lebih kaku, monoton, dan membosankan, dari segi layout yang kurang rapih, penggunaan warna yang kontras antar warna, penataan produk konten yang masih berantakan, karakter tipografi yang tidak konsisten, dan penggunaan icon yang kurang tepat. Oleh karena itu saya mempunyai gagasan untuk merancang kembali website dengan tampilan yang statis menjadi website dengan tampilan dinamis. Dengan menampilkan produkproduk yang disusun dalam sebuah website dapat memudahkan khalayak dalam mencari kebutuhan yang diinginkan. Adanya kegiatan transaksi pada website ini membuat saya dituntut untuk membuat tampilan website yang atraktif, dinamis dan menarik, agar dapat meningkatkan pelanggan. Karena selain sebagai tempat transaksi, website tersebut juga digunakan sebagai media promosi. Bentuk perancangan website penjualan alat tulis kantor (atk) ini menggunakan beberapa elemen website seperti header/slide banner, side bar, illustrasi, warna kombinasi, karakter tipografi, icon kategori, audio, dan gerak / transisi. - Header (slide banner) Header adalah bagian atas dari sebuah website. Biasanya berisi nama situs, logo dan deskripsinya. Header berfungsi untuk menampilkan identitas utama dari sebuah situs. Header yang digunakan pada website ini adalah slide banner, yang artinya banner bergerak ke kiri menggunakan animasi slide. Banner yang digunakan sebanyak 3 buah, terdiri dari satu banner utama dan dua banner promosi. Hal ini bertujuan selain untuk meningkatkan efektifitas perusahaan dengan menampilkan banner promosi juga untuk menarik perhatian pengunjung. Dibuat 3 banner agar terlihat tidak terlalu banyak dan tidak terlalu sedikit sehingga mudah diingat oleh pengunjung website. Banner Utama

2 Banner Promosi - Illustrasi adalah hasil visualisasi dari suatu tulisan dengan teknik drawing, lukisan, digital, atau teknik seni rupa lainnya yang lebih menekankan hubungan subjek dengan tulisan yang dimaksud daripada bentuk, tujuan illustrasi adalah untuk menerangkan atau menghiasi suatu cerita, tulisan, puisi, atau informasi tertulis lainnya. Diharapkan dengan bantuan visual, tulisan tersebut lebih mudah dicerna. a. Illustrasi vektor anak sekolah agar berkesan fun dan ceria, karena menurut saya masamasa sekolah adalah masa yang paling indah, dimana kita bisa bercanda dan tertawa dengan teman tanpa ada beban, selain itu pengambilan icon anak sekolah juga karena icon anak sekolah masih berkaitan dengan peralatan tulis. b. Ilustrasi vektor Icon pendukung seperti : kertas, peralatan tulis, printer dan computer adalah sebagai simbol semiotika atau simbol yang mendeskripsikan sesuatu. c. Illustrasi Vektor Cara berbalanja adalah sebagai simbol semiotika atau simbol yang menerangkan tentang cara berbalanja.

3 d. Illustrasi Keranjang Belanja Illustrasi keranjang belanja dibuat dengan gaya illustrasi chibi Agar sesuai dengan konsep website secara keseluruhan. Dengan ciri menggunakan garis outline berwarna hitam Mengikuti gaya illustrasi lainnya yang ada di website ini. e. Illustrasi Pintu Bergeser Pada dasarnya warna pintu kebanyakan berwarna coklat. Namun warna pintu di website ini menggunakan kombinasi Warna biru dan biru muda agar sesuai dengan kecenderungan Warna website ini. - Warna adalah salah satu daya tarik dalam dunia desain grafis dimana warna-warna yang soft akan menghasilkan kenyamanan tersendiri bagi mata yang melihatnya, warna juga merupakan unsur yang sangat penting dalam membuat desain. Warna yang digunakan pada website penjualan ini adalah dominan warna biru muda, terlihat lebih cerah dan warna biru muda dapat diartikan dengan warna langit biru. Warna yang diambil hanya satu turunan saja, dengan tingkat ketebalan yang sama atau hampir mendekati. Adapun jika warna yang diambil 2 warna berbeda atau lebih, maka warna yang diambil harus mempunyai ketebalan yang sama. Background Background Banner Website Warna biru muda dipilih karena warna biru sudah menjadi warna identitas dari perusahaan, setelah penulis melakukan riset dan melakukan wawancara dengan pemilik perusahaan. Warna biru bisa juga dilambangkan dengan kewibawaan, bijaksana, professional dan kepercayaan. Berhubung konsep dari pembuatan website ini adalah fun dan ceria maka dipilihlah warna-warna terang (cenderung ke arah putih), sehingga dipilihlah warna biru muda sebagai warna dominan dari website ini.

4 Kombinasi Warna Sebelum penulis membuat karya, penulis melakukan riset seputar studi warna, karena konsep yang dibuat dalam pembuatan website ini adalah Fun dan Ceria maka pengambilan sample warna yang dibutuhkan adalah warna-warna yang cerah dan soft. Adapun warna tambahan yang bukan warna-warna cerah adalah untuk mempertegas teks / objek lainnya. Warna Banner Warna Keranjang Belanja

5 - Typografi adalah suatu kesenian dan teknik memilih dan menata huruf dengan pengaturan penyebarannya pada ruang yang tersedia untuk menciptakan kesan tertentu, guna kenyamanan membaca semaksimal mungkin. Typografi yang digunakan untuk membuat website penjualan ini adalah Sans Serif, Jenis huruf Sans Serif dipilih karena terlihat lebih jelas, efisien dan modern. Selain itu juga terlihat lebih nyaman dilihat dalam layar monitor dibandingkan dengan jenis font lain, sehingga jenis font sans serif sangat direkomendasikan dalam pembuatan website. Jenis Font : Avant Garde Bk Bt Jenis Font : Bauhaus 93 Jenis Font : Britanic Bold Jenis Font : Kristen ITC - Icon atau ikon, adalah bentuk yang paling sederhana, karena ia hanya pola yang menampilkan kembali obyek yang ditandainya, sebagaimana bentuk fisik obyek itu. Ikon cenderung hanya menyederhanakan bentuk, tetapi mencoba menampilkan bagian yang paling esensial dari bentuk tersebut. Icon yang digunakan dalam website penjualan ini adalah anak sekolah sebagai icon utama dan icon-icon pendukung seperti : - Icon Menubar - Icon Kategori - Icon Menu Register Icon Menu Login Icon Edit Account.

6 Icon Menubar Icon ini dibuat dengan kombinasi warna biru dan biru tua, hal ini bertujuan untuk memberikan kesan timbul agar terlihat seperti sebuah tombol. Dengan tipografi menggunakan jenis huruf Helvetica, agar bisa konsisten dengan karakter tipografi secara keseluruhan dari website ini. Warna putih pada huruf agar terlihat kontras dengan warna background menu, dari semua warna yang telah dicoba, terpilih warna putih sebagai warna yang cocok untuk menubar website ini. Icon Kategori Hampir sama dengan dengan Icon Menubar, Icon Kategori Menggunakan warna biru cyan sebagai dasar background. Dengan Tipografi yang sama yaitu Helvetica dan berwarna putih, icon Kategori ini menggunakan dropdown menu sebagai penghiasnya. Dropdown menu berwarna biru muda dan dengan kombinasi warna Tulisan hitam dan abu, membuat kesatuan warna yang solid dan Nyaman dipandang mata. Icon Menu Register Icon ini dibuat dibuat dengan kombinasi warna orange, dibuat Gradasi agar terlihat timbul yang bertujuan untuk mempertegas Maksud dan tujuan dari menu tersebut, yaitu untuk registrasi Pelanggan. Tambahan gambar illustrasi pensil dan buku untuk Menegaskan bahwa menu registrasi ini bertujuan untuk mencatat Data-data pribadi. Icon simbol edit pelanggan Warna biru dan jenis font sans serif menyesuaikan pada tema website ini. Icon Menu Login Pelanggan Gambar illustrasi anak sekolah sebagai brand image dari Perusahaan, agar mudah diingat oleh pengunjung. Gambar Illustrasi kunci dan gembok menjelaskan bahwa jika ingin Melakukan transaksi pada website ini harus mengunakan Kunci untuk masuk ke halaman pelanggan.

7 - Layout adalah penyusunan dari elemen-elemen desain yang berhubungan kedalam sebuah bidang sehingga membentuk susunan artistik. Hal ini bisa juga disebut manajemen bentuk dan bidang. Tujuan utama layout adalah menampilkan elemen gambar dan teks agar menjadi komunikatif dalam sebuah cara yang dapat memudahkan pembaca menerima informasi yang disajikan. a. Layout yang digunakan dalam website ini adalah, Grid Simetris : Jarak antara margin kanan dan kiri sama, atas dan bawah sama, begitu juga dengan ukuran antar kolom table dibuat sama. - Konten adalah informasi yang tersedia melalui media atau gambar produk, tujuan konten adalah untuk memberikan informasi kepada pembacanya apa saja yang ditawarkan/ditampilkannya melalui media. Konten yang disampaikan adalah produk-produk alat tulis kantor (atk).

8 - Audio adalah media yang penyampaian pesannya dapat diterima oleh indera pendengeran saja, yang meliputi unsur suara. Website ini menggunakan audio untuk menyampaikan pesan kepada khalayak agar pesan yang ingin disampaikan dapat diterima dengan baik kepada khalayak. Audio di website ini diperoleh melalui beberapa tahapan : 1. Rekaman Rekaman dengan menggunakan alat perekam suara yang ada pada headset computer. Model suara yang digunakan adalah yang mempunyai suara bagus, dalam hal ini penulis menggunakan suara dari seorang dengan pekerjaan call center. 2. Pemilihan Backsound Pemilihan backsound untuk animasi website ini adalah musik yang bernuansa ceria. Dipilihlah lagu dari audio jungle yang bernuansa ceria. 3. Pengelolaan efek suara Setelah hasil dari rekaman dan backsound sudah didapat, penulis melakukan pengeditan suara dengan menggunakan software adobe audition. - Gerak / Transisi Dalam pembuatan animasi gerak/transisi pada website ini, penulis memperhatikan aspekaspek sebagai berikut : a. Penetapan Objek dan teks Penetapan objek dan teks adalah sebagai dasar utama dalam pembuatan animasi gerak, gambar dan teks tersebut harus sesuai dengan tema yang ingin disampaikan. Dalam hal ini ada beberapa macam gambar yang digunakan penulis agar pesan yang telah didapat dari audio bisa tersampaikan.

9 b. Timing and Spacing Grim Natwick -seorang animator Disney pernah berkata, Animasi adalah tentang timing dan spacing. Timing adalah tentang menentukan waktu kapan sebuah gerakan harus dilakukan, sementara spacing adalah tentang menentukan percepatan dan perlambatan dari bermacam-macam jenis gerak. Dalam membuat animasi gerak / transisi dari website ini penulis harus benar-benar memperhatikan kapan timing yang tepat untuk menyesuaikan antara efek suara dan penempatan gambar / teks. c. Pembuatan efek transisi Dalam hal ini penulis membuat efek transisi menggunakan software adobe flash. Animasi gerak yang digunakan adalah efek slide, fade ini dan fade out. Penulis menggunakan efek sederhana ini agar mudah ditangkap oleh pengunjung website yang kategori semua umur. TATARAN PRODUK Peranan/fungsi produk Media Online seperti website ini memiliki peranan sebagai alternatif media transaksi dan juga sebagai media promosi yang simple,efisien, menarik dan dapat menunjukan kepada khalayak bahwa kegiatan transaksi pada saat ini tidak harus bertatap muka, melainkan bisa melalui media online. Dengan menampilkan foto-foto produk yang disusun dalam sebuah website, memudahkan khalayak dalam berbelanja khususnya alat tulis. Tampilan web dan juganya dibuat menarik, karena website yang dibuat menggunakan unsur audio visual, membuat tampilan website terlihat dinamis dan tidak membuat bosan. Pemenuhan kebutuhan Website intikarya-atk.com berfungsi sebagai media transaksi untuk komersil, atau bisa disebut juga E-Commerce. Website ini menjual berbagai macam peralatan tulis kantor dan sekolah, kertas, printer, computer, dll. Media Website ini menjadi solusi yang baik untuk khalayak yang sedang malas berpergian dan yang tidak punya waktu untuk membeli peralatan tulis, dan baik juga untuk perusahaan yang ingin membeli secara retail untuk keperluan kantor perusahaan.

10 TATARAN SISTEM Posisi karya TA diantara karya lainnya Karya TA ini mengambil referensi dari berbagai macam website dan berbagai macam interaktif flash. Referensi ini dijadikan acuan untuk perancangan ulang desain website yang saya buat. Dengan menggabungkan unsur pemrograman website dengan animasi flash saya bisa menciptakan sebuah website dengan tampilan yang dinamis tanpa harus memakai bandwidth yang besar, hal ini lah yang menjadi perbedaan antara website yang saya buat dengan website sejenis lainnya. Bagaimana karya ini teraplikasikan (bekerja/difungsikan) Hal yang perlu diperhatikan agar Karya TA ini bekerja dan teraplikasikan adalah pembelian nama Domain dan sewa server hosting. Pembelian nama domain sesuai dengan nama dari perusahaan yaitu Sedangkan sewa server hosting bertujuan untuk mengelola file website yang telah dibuat. Setelah file di upload ke server hosting maka Karya TA ini sudah bisa dipublikasikan. Konsep dan Proses perancangan karya Konsep yang diangkat dalam perancangan website ini adalah Fun dan Ceria, dengan perpaduan antara warna biru muda, simbol pelangi dan illustrasi icon anak sekolah bergaya chibi. Warna biru muda menggambarkan langit, simbol pelangi menggambarkan pelangi dan icon anak sekolah. Konsep ini menggambarkan tentang imajinasi anak sekolah yang ceria dan penuh warnawarni. Site Map

11 Proses Perancangan Karya Pembuatan Icon Gambar Manual Gambar sketsa menggunakan pensil lalu di scan Pewarnaan Digital Pemberian efek warna menggunakan software pengelola gambar vector, lakukan tracing objek yang telah discan menggunakan pen tool, lalu beri efek warna menggunakan fill color. Menggunakan Software Pengelola Gambar Vector

12 Pembuatan Banner Web Banner Utama Banner ini tidak akan berganti karena banner ini yang akan menjadi ciri khas dari website ini. Banner Promosi Banner ini akan berganti tampilan seiring dengan promosi dari perusahaan. Misalnya, tahun baru atau ujian sekolah maka banner ini akan berganti tampilan. Menggunakan Software pengelola gambar raster Buat file baru dengan ukuran 900px x 235px, buat background gradasi biru muda putih, lalu copy paste objek yang telah dibuat di software pengelola gambar vector ke software pengelola gambar raster, lalu masukkan gambar-gambar produk alat tulis kantor, proses terakhir save as menggunakan perintah save for web & device, File > Save for web device

13 Pembuatan Efek Suara Rekaman Rekaman dilakukan dengan menggunakan microphone pada headset Data Profil Pengisi Suara Nama : Ika Yulyanti Umur : 23 Pekerjaan : Call Center Bank Pengelolaan Efek Suara Efek suara dibuat menggunakan Software pengelola efek suara, dengan backsound Song : Audio Jungle

14 Pembuatan Animasi Gerak Transisi Animasi Gif Animasi Gerak Transisi Pengelolaan Website menggunakan Software pengelola script website Pembuatan Layout Tabel

15 Pemrograman Script website Hasil Layout Jadi

16 TATARAN LINGKUNGAN Tanggung Jawab Karya Terhadap Lingkungan Penggunaanya Aspek yang berubah dari website yang lama ke website yang baru adalah : - Perubahan website dari statis ke dinamis Tampilan website lama yang cenderung monoton dan statis dijadikan dasar alasan penulis untuk merancang kembali tampilan website yang dinamis, dimana setiap unsur-unsur didalam website terlihat bergerak dan hidup. - Penambahan Item Menu Penambahan item menu pada side bar sebelah kanan yaitu dengan adanya menu search produk, sehingga memudahkan pengunjung untuk mencari produk yang diinginkan. Selain itu juga terdapat slide bar produk yang bergerak secara vertical yang berguna untuk menonjolkan produk yang ingin dijual. - Penambahan CSS Style CSS Style adalah hal yang paling penting yang harus diketahui oleh seorang web designer. Karena inti dari web designer adalah bagaimana dia bisa memanfaatkan fitur-fitur yang ada pada CSS Style untuk membuat tampilan design website yang menarik dan elok dipandang mata. Pada website CV. Inti Karya Utama yang lama tidak ada fitur-fitur CSS Style sehingga tampilan website terlihat tidak menarik. Penambahan fitur-fitur CSS Style pada website CV. Inti Karya Utama yang baru diharapkan dapat memberikan kesan yang positif dari pengunjung website.

17 Lampiran