Ragam Layout Website dalam Media Visual Berbasis Web

 Ragam Layout Website

Ada beberapa macam layout desain web saat ini yang semakin menghiasi dunia web : 

1. Static Layout static pada web desain memiliki ukuran tetap pada semua resolusi browser. Lebar layout static ini menggunakan satuan pixel (px) sehingga akan menghasilkan layout yang statis. Contoh layout static: Facebook, Twitter. 

2. Fluid Layout fluid memiliki kemampuan untuk menyesuaikan lebar layout sesuai dengan resolusi browser. Hal tersebut terjadi karena lebar layout menggunakan satuan percent (%) sehingga lebar layout akan mengikuti resolusi browser saat dikecilkan atau dibesarkan (resize). Contoh layout fluid: gmail, yahoo mail.

3. Responsive Layout responsive memiliki kemampuan untuk berganti layout pada resolusi tertentu. Layout bisa berganti ini berkat kehadiran CSS3 dengan sintax media queries nya. Kalo di pemrograman fungsinya mirip „if„, tapi ini di css. Jadi sebuah web bisa memiliki tampilan berbeda saat dibuka dengan pc, tablet atau smartphone.

4. Responsive-fluid Layout responsive-fluid merupakan gabungan antara responsive dengan fluid sehingga lebar layout akan mennyesuaikan resolusi dan akan berganti layout pada resolusi tertentu. Layout ini menggunakan media queries dan satuan percent (%) untuk ukuran.

5. Horizontal Scrolling Layout horizontal scrolling adalah dengan menata content web kesamping, sehingga untuk melihat content web tersebut menggunakan scroll horizontal6. Parallax Scrolling Layout 

6. parallax scrolling menggunakan beberapa layer dan setiap layer memiliki kecepatan perpindahan yang berbeda-beda saat di scroll sehingga menimbulkan efek yang menarik

Format Gambar Untuk Website

    Format image ada beberapa jenis, yang umum untuk ditemukan adalah JPEG (JPG), GIF dan PNG juga BMP. Perbedaannya tidak dapat dilepaskan dari jenis kompresi yang digunakan untuk menyimpan data.

    Semakin besar kompresi semakin sedikit data yang disimpan. Dan jika ukuran data semakin besar, akan menambah waktu yang diperlukan untuk menampilkannya pada web browser. Ini lah pertimbangan utama dalam memilih jenis format gambar yang ingin di tampilkan di dalam sebuah web.

Berikut acuan sederhananya:

PNG sangat baik untuk dipergunakan pada kebanyakan web browser (IE6+ butuh sedikit sentuhan CSS untuk pengaturan transparansi). Format jenis ini sangat tepat untuk menyimpan grafik (ilustration) atau foto (kualitas tinggi) 

JPG adalah pilihan terbaik untuk menampilkan foto secara online, walau kualitasnya tidak sebagus PNG tetapi cukup bisa diterima mata manusia 

GIF sangat baik untuk menampilkan gambar grafik (jika tidak mau menggunakan PNG), tapi jangan ubah foto menjadi format GIF karena hasilnya tidak sedap dipandang mata 

BMP bisa dikategorikan sebagai gambar tidak terkompresi, tidak disarankan untuk penggunaan pada web (menghabiskan bandwidth)

Media Visual Berbasis Web

 Apa saja hal yang perlu diperhatikan dalam membuat media visual berbasis web?

1. Penggunaan warna yang tepat.

        warna berpengaruh dalam sebuah desain. setiap warna memiliki karaketer masing masing oleh karena itu warna berfungsi untuk membentuk karakter dari web itu sendiri. Penggunaan banyak warna juga sangat tidak dianjurkan karena membuat suatu website tidak memiliki karakter yang jelas

2. Teks yang mudah dibaca

      Teks yang mudah dibaca membantu para pengunjung website untuk mengerti apa pesan atau informasi yang ingin disampaikan oleh website kepada pengunjung website. Penggunaan font harus diperhatikan seperti jenis font, ukuran font, dan konsistensinya dalam desain. Selain itu pengaturan paragraf dan jarak antara teks dengan elemen lain juga perlu diperhatikan. Whitespace atau ruang kosong antar elemen harus harmonis. Semua hal tersebut bertujuan supaya Teks mudah dibaca.

3. Desain visual yang harmonis

        Image atau gambar secara visual merupakan unsur atau elemen utama dalam desain. Image bisa digunakan sebai pemanis, atau penyeimbang atau point of interest. Sebaiknya pemilihan image sesuai dengan keseluruhan tema dan karakter desain website. Komposisi image dengan elemen lain juga harus sesuai, adakalanya sebuah website membutuhkan image yang besar (hampir fullscreen) untuk memberi kesan tertentu, dan dikombinasi dengan teks yang lebih kecil porsinya, ada pula website dengan komposisi teks yang lebih banyak dan image hanya sebagai unsur tambahan. Komposisi antara image dengan teks tergantung dari tema dan karakter yang ingin dibangun. Yang penting harus bijaksana dalam memilih, menempatkan, dan mengkomposisi image, dan yang tidak kalah penting adalah kualitas image itu sendiri. Hal lain yang harus menjadi pertimbangan adalah besarnya file. Kecepatan load sebuah halaman website sebagian besar ditentukan oleh besarnya ukuran file, terutama image, apalagi bagi kita di Indonesia yang kecepatan akses internetnya sebagian besar dibawah rata-rata.

4. Layout yang simpel

        Layout atau tataletak desain diusahakan sesederhana mungkin, minimalisir elemenelemen yang tidak penting, maksimalkan whitespace (jarak antar elemen). Website dengan layout yang baik, mudah untuk dijelajahi, pengunjung mudah untuk menemukan sesuatu, dan dengan cepat menemukan apa yang dicarinya. Layout yang berantakan membuat pengunjung kesulitan dan membutuhkan waktu lebih lama untuk menemukan sesuatu. Penempatan yang tidak sesuai, point of interest yang menyesatkan, dan urutan tata letak yang acak, sangat tidak menguntungkan.

5. Alur yang mudah dimengerti

        Layout desain website harus bisa menuntun pengunjung dan mengarahkan mereka ke sesuatu yang kita inginkan, jadi kitalah yang menuntun alur perhatian pengunjung dari titik a, ke titik b, ke titik C, dan seterusnya, sehingga tujuan kita dan misi dari website bisa dicerna dengan baik oleh pengunjung. Hal ini tidaklah mudah, berbeda dengan media lain seperti televisi, dan koran, audience dalam kendali pemberi informasi, mereka menerima apa adanya dan pasif, dan tidak melakukan tindakan aktif untuk memilah. Sedangkan pada website, pengunjung memiliki kendali penuh, mereka aktif, dan oleh karena itu alur dari desain website harus jelas dan mudah dipahami agar pengunjung tidak frustasi menemukan apa yang mereka inginkan.   

6. Menu navigasi yang jelas

        Salah satu elemen penting yang juga wajib diperhatikan adalah navigasi atau menu. Menu navigasi adalah satu-satunya cara pengunjung berinteraksi dengan website. Ada banyak cara dan banyak desain menu navigasi, tetapi yang tidak boleh dilupakan adalah fungsi utamanya, sebagai alat interaksi pengunjung dengan website. Website bisa saja mempunyai beberapa menu/navigasi, bisa diatas pada header, atau pada sidebar, maupun dibawah pada footer. Tidak ada rumus yang mengharuskan dimana kita menempatkan menu, yang penting harus menyatu dengan alur dan layout desain sebuah website.

        Ada dua hal penting yang membuat website menjadi sukses dan mampu mendapatkan trafik dalam jumlah tinggi: konten berkualitas dan desain yang unik serta menarik. Desain website yang tidak rapi dan berantakan memengaruhi kesempatan konten dibaca oleh pengunjung situs. Pastinya mereka tidak akan melanjutkan membaca konten jika desain web yang dibuat „merusak‟ pandangan mata. Kalau sudah begini, jumlah pengunjung yang mengakses web akan berkurang. Oleh karena itu, harus berhati-hati dalam mengatur tata letak website. Carilah informasi sebanyak mungkin tentang cara desain web guna membantu dalam menemukan style yang tepat. 

    Untuk menarik trafik yang tinggi, maka buatlah desain website yang menarik serta profesional. Dengan desain web yang apik, orang-orang akan lebih betah dalam membaca konten yang disediakan. Tak jarang konversi pun akan naik. Cari informasi sebanyak mungkin tentang cara mendesain web. 

Contoh aplikasi desain grafis berbasis web

1. Gravit Designer.

2. Vect

3. Canva

4. Snappa

5. Adobe Spark Post

KONSEP PEMODELAN DESAIN GRAFIK PADA APLIKASI MOBILE

 

ELEMEN-ELEMEN YANG HARUS DIPERHATIKAN JIKA INGIN MENGAPLIKASIKAN DESAIN GRAFIS PADA PERANGKAT MOBILE

• Seni Visual

Ilmu yang termasuk ke dalam seni visul yaitu: fotografi dan digital imaging.

• Tipografi

Seni dalam merancang, menyusun, dan memodifikasi huruf seestetik mungkin. Untuk membuat tipografi pun ada beberapa peraturan tertentu, diantaranya: ukuran huruf, jenis huruf, tracking, kerning, leading.

• Tata Letak

Seni dalam menyusun konten atau elemen yang terdapat di dalam suatu halaman dengan tujuan untuk memberikan kenyamanan kepada pembaca. Keterampilan tata letak ini biasanya digunakan dalam dunia percetakan seperti: majalah, buku, koran, tabloid atau yang lainnya.

• Desain Interaksi

Sejak perkembangannya dalam dunia teknologi informasi, para desainer grafis mulai merancang tampilan dari perangkat lunak (Antarmuka Pengguna Grafis atau APG (Inggris: Graphical User Interface (GUI)) serta tampilan dari halaman web. Desainer grafis tersebut bekerja sama dengan para pengembang situs web atau pengembang software dalam merancang tampilan.

• Pewarnaan 

Seorang desainer harus dapat mengaplikasikan warna dengan tepat sehingga akan membuat suatu karya yang enak untuk dipandang.

• Penguasaan Software

Memiliki fungsi untuk menunjang kegiatan desain supaya lebih mudah.

• Sketsa

Dimana seorang desainer harus dapat membuat suatu sketsa atau rancangan mengenai karya yang akan diciptakan secara baik dan benar.

• Desain Interaksi

Desain produk interaktif dengan tujuan untuk membantu manusia dalam berkomunikasi sekaligus berinteraksi dalam kehidupan dan juga pekerjaan sehari-hari.

• Nirmana

Cara penyusunan elemen-elemen visual seperti titik, garis, warna, ruang serta tekstur sehingga akan menjadi satu kesatuan yang harmonis.

CONTOH APLIKASI DESAIN GRAFIS PADA PERANGKAT MOBILE

• 3D Modeling
• Adobe Illustrator Draw
• Adobe Photoshop Express
• Adobe Photoshop Lightroom CC
• Adobe Photoshop MIX
• Adobe Photosop Fix
• Afterlight
• AirBrush
• AutoCAD
• Canva
• Designapp Design Graphic
• Desygner
• Infinite Design
• PicsArt
• Snapsheed

Gagasan dan Manfaat Desain Grafis

 

A.    Jenis - Jenis Desain Grafis

Adapun beberapa jenis dari desain grafis yang sering digunakan, diantaranya adalah sebagai berikut:

 

1.   Identitas Visual (Visual Identity)

Sistem identitas visual adalah suatu sistem komunikasi visual yang membentuk dan dapat mengkomunikasikan identitas sebuah merek, perusahaan, lembaga, hingga produk. Visual identity umumnya digunakan untuk memberikan perbedaan antara sebuah produk barang atau jasa dengan produk barang dan jasa lainnya. Sebagai contohnya adalah adidas vs nike.

 

2.   Periklanan dan Pemasaran

Agar dapat dikenal oleh masyarakat luas, maka sebuah perusahaan wajib berupaya lebih dalam pemasaran juga periklanan. Hal ini bertujuan agar masyarakat dapat mengetahui produk tersebut, hingga memutuskan untuk membelinya. Ide yang unik, desain yang menarik sanggup menarik minat masyarakat. Materi desain promosi (iklan & pemasaran) pun dapat dikelompokkan berdasarkan jenis kelamin, usia, hingga demografi. Contoh desain grafis pemasaran:

-     Flyer atau Brosur

-     Poster, Banner, Billboards

-     Iklan Majalah & Koran

-     Spanduk Cetak

-     Banner Sosial Media (instagram, facebook, dll)

-     Katalog

-     Company Profile

 

3.   User Interface (UI)

Desain Antar Muka atau User Interface adalah tentang bagaimana pengguna berinteraksi pada perangkat seluler/desktop atau aplikasi. UI sendiri mencakup semua hal yang berkaitan dengan interaksi pengguna layar, keyboard, dan mouse. Khusus pada desain grafis, desain UI terfokus kepada pengalaman visual pengguna dan elemen desain grafis pada layar seperti:

-     Tombol

-     Menu Navigasi

-     Tata Letak (Layout)

-     Formulir (Form) Kontak, Pemesanan, Beli, Register

-     Desain Aplikasi

-     Tema Website (Wordpres, dll)

-     Dan lain-lain

 

4.   Publikasi Desain

Desain publikasi sebenarnya mengacu kepada industri desain grafis pada media cetak seperti: Koran, majalah, hingga katalog, dst. Bisa juga dalam bentuk digital alias tidak dicetak sama sekali seperti Pdf. Desainer grafis yang berkecimpung di desain publikasi akan bekerja sama dengan editor dan penerbit dalam menciptakan tatak letak desain, ilustrasi, pemilihan font, hingga warna. Contoh desain grafis publikasi:

-     Buku

-     Koran

-     Majalah

-     Katalog

-     Laporan Tahunan

-     Dll

 

 

5.   Desain Kemasan

Packaging design atau desain kemasan merupakan salah satu cara untuk merepresentasikan sebuah merek/produk. Tidak hanya berfungsi dasar sebagai tempat menyimpan, penjualan, hingga distribusi. Sebagai seorang desainer akan menciptakan konsep, digitalisasi desain konsep, hingga membuat file desain menjadi siap cetak. Untuk menciptakan desain kemasan yang keren, kamu harus memahami proses-prosesnya dan harus bekerja sama dengan manufaktur industri.

 

6.   Motion Graphic (Motion Grafis)

Sederhananya, motion grafis ialah cabang dari desain grafis yang menggabungkan antara tipografi, ilustrasi , videografi, dan fotografi. Aplikasi yang banyak digunakan untuk motion grafis ialah adobe after effects atau sejenisnya. Motion grafis mencakupi animasi, video, audio, tipografi, hingga efek-efek lainnya yang digunakan dalam media televisi, film, youtube, facebook / instagram video. Popularitas motion grafis tumbuh cukup cepat dalam beberapa tahun terakhir. Hal ini sepertinya sejalan dengan populernya youtube, kemajuan teknologi dan meleknya masyarakat terhadap internet. Contoh motion grafis:

-     Logo Animasi

-     Periklanan

-     Presentasi

-     Cuplikan

-     Video Tutorial & Promosi

-     Video Games

-     GIFs

-     Dll

 

7.   Desain Grafis Lingkungan

Environmental graphic design, secara visual menghubungkan orang-orang ke suatu tempat untuk meningkatkan bagaimana pengalaman mereka secara menyeluruh. Jenis desain ini dapat dilakukan dengan membuat sebuah tempat (ruang/lokasi) yang indah, menarik, unik, dan lebih mudah untuk mereka ingat. Beberapa contohnya adalah:

-     Mural

-     Desain Interior

-     Petunjuk Jalan

-     Branding Stadion

-     Branding Kantor

-     Dll

 

8.   Seni dan Ilustrasi

Art and illustration for graphic design (Seni & Ilustrasi) terdengar serupa dengan desain grafis tetapi sebenarnya berbeda. Yakni, desainer membuat komposisi yang dapat berkomunikasi dengan baik, tepat, dan dapat memecahkan sumber masalah. Seorang artis dan illustrator dapat membuat karya seni yang original mulai dari proses draft sketsa hingga digitalisasi. Contohnya adalah:

-     Desain Kaos

-     Desain Pola atau Tekstil

-     Motion Grafis

-     Stok Gambar

-     Cover Buku

-     Grafis Novel

-     Infografis

-     Konseptual Arts

-     Dll

 

B.    Ide dan Proses Mendapatkan Ide

Ide adalah bagaimana seseorang dapat memunculkan pemikiran-pemikiran baru untuk tujuan tertentu yang didapat dari proses mencari, menganalisa atau mendapatkan begitu saja dari suatu kejadian yang menciptakan keinginan untuk "mengolah dan membentuk" image yang berbeda dan menghasilkan sebuah pemikiran baru.

 

Ada beberapa cara bagaimana mengelola proses berfikir kreatif sehingga akan timbul ide-ide baru yang diinginkan :

1.   Santai dan Rilex

Kreatifitas itu datang ketika kondisi tubuh dan pikiran sedang santai dan rilex. Jika Ide tidak ada / belum datang janganlah memaksakan diri, yang pada akhirnya malah nanti jadi stress, kondisi seperti ini malah menjadikan kreatifitas hilang. Santai saja dan rilex, regangkan otot, regangkan syaraf, nikmati udara sekitar, tarik nafas, hembuskan, mungkin  bisa mencoba lebih menenangkan diri dengan menjadi natural. Kondisi disekitar yang hening membantu  berfikir. Setelah  melakukan tahapan ini, maka lanjutkan ke langkah berikutnya. Yakni menjelajahi pikiran / berimajinasi.

 

2.   Jelajahi Pikiran (Imijinasi)

Yang membedakan orang jenius dengan orang pada umumnya sebetulnya hanya di imajinasi, orang pada umumnya hanya menjalankan kehidupan berdasarkan realitas yang ada, sedangkan si jenius membangun suatu konsep yang belum pernah ada sebelumnya. Meskipun sesuatu itu sendiri berdiri di atas konsep yang sudah ada di alam sekitarnya.

 

Sebagai contohnya, yang dilakukan oleh Abbas Ibnu Firnas ilmuwan muslim di zaman kekhilafahan yang menemukan konsep pesawat terbang sekaligus mengimplementasikannya, konsepnya di temukan 800 tahun sebelum Wilbur O Wright mengadopsinya dan merealisasikannya dalam pesawat terbang masa kini. Dari mana konsepnya ? Dari mengamati bagaimana burung terbang, meneliti bentuk sayap yang aerodinamis.

 

Sehingga berimajinasi dalam pikiran yang santai dan rilex ini lah mampu memicu daya kreatifitas , tidak hanya untuk blogging tapi untuk banyak hal. Imajinasi memungkinkan  menemukan jembatan di antara dua hal yang berbeda. Yang jelas semuanya berawal dari imajinasi seseorang terhadap pengamatan yang ada disekitarnya, ya sesederhana itu.

 

3.   Banyak Belajar dan Referensi

Seorang yang kreatif pun tentunya tidak akan pernah berhenti belajar akan banyak hal, apabila diperhatikan ilmuwan-ilmuwan pun memiliki banyak sekali referensi yang menunjang keilmuwannya. Semakin tinggi keilmuwannya, maka bisa dipastikan semakin banyak juga referensi yang dimilikinya. Seorang designer dan blogger populer pun belajar dan memiliki serta mengamati banyak referensi, dan belajar dari orang-orang yang sebelumnya. Begitu juga dengan banyak belajar dan memiliki banyak referensi akan menunjang daya kreatifitas.

 

4.   Komunikasi dan Bersosialisasi

Ide dan kreatifitas pun biasanya muncul ketika  bersosialisasi dengan banyak orang. Hal-hal sederhana bisa memicu kreatifitas yang luar biasa. Contoh ketika Dustin Moskovitz berbincang dengan Mark Zuckerberg perihal status seorang teman wanitanya, masih single atau tidak. Mark Zuckerberg menjawab bahwa tidak ada seorang pun yang mau kemana-mana menggunakan papandi tempel di bajunya untuk menjelaskan statusnya. Nah dari sinilah ide muncul, yang akhirnya menjadi salah satu fitur bermanfaat di facebook, yakni fitur status seseorang. Yang jelas ide mengalir begitu saja ketika  berkomunikasi dan bersosialisasi dengan orang-orang yang bahkan beda bidangnya dengan.

5.   Ide Datang Dengan Sendiri lalu Improvisasikan

Sepercik ide yang datang pun bila improvisasi maka akan menghasilkan ide-ide luar biasa selanjutnya. Asal  tidak lupa untuk mencatatnya ke dalam secarik kertas / handphone atau apapun, jangan sampai ide muncul kemudian  tidak mencatatnya. Karena bisa hilang dengan cepat.

 

C.    Manfaat Desain Grafis

Adapun manfaat desain dalam kehidupan sehari-hari yaitu:

·     Mempercepat Proses Pekerjaan

Suatu pekerjaan akan dapat diperisngkat dengan menggunakan desain grafis, contohnya sebuah proposal yang harus memaparkan setiap detail perusahaan tetapi dengan menggunakan desain grafis maka akan lebih dipersingkat dengan membuatnya dalam bentuk gambar atau kurva.

 

·     Dapat Menyampaikan Pesan Dalam Bentuk Grafis

Untuk membuat pesan dalam bentuk sebuah karya seni desain grafis tidaklah mudah, hal ini dapat dilakukan dengan mengikuti kursus desain grafis yang terpercaya agar pesan yang dibuat dapat disampaikan kepada masyarakat.

 

·     Menjadi Tempat Pengungkapan Perasaan

Setiap orang pasti memiliki perasaan yang terkadang sulit di ungkapan, setelah belajar desain grafis di dumet school dengan sebuah aplikasi photoshop ataua adobe lainnya dapat mengungkapkan perasaan dalam bentuk grafis.

 

·     Memberikan Hasil Gambar Yang Lebih Menarik Dan Indah

Gambar yang dihasilkan baik melalui jepretan kamera ataupun karya tangan tidak selalu menghasilkan gambar yang sesuai keinginan, dengan sentuhan desaign grafis maka gambar tersebut akan lebih menarik dan indah di lihat.

 

·     Dapat Menghasilkan Uang

Dengan sebuah hasil desain yang telah dibuat akan memiliki nilai yang berharga, bayangkan saja logo-logo perusahaan yang dibuat dari aplikasi desain bukan sekedar bernilai ratusan ribu saja, bahkan ada yang bernilai milyaran.

 

 

REFERENSI

https://www.apridesain.id/desain-grafis/

https://www.dosenpendidikan.co.id/desain-adalah/

https://www.seputarpengetahuan.co.id/2017/11/pengertian-desain-fungsi-tujuan-jenis-jenis-prinsip-manfaat-metode.html

https://www.topkarir.com/article/detail/5-cara-efektif-menemukan-ide-inovasi-dan-inspirasi