Tugas M13

 Jelaskan apa yang menjadi dasar penggunaan ragam layout website dalam membuat media visual berbasis web!

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.

 

spigotdesign.com

 

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.

 

https://forefathersgroup.com/

 

5. Horizontal Scrolling

Layout horizontal scrolling adalah dengan menata content web kesamping, sehingga

untuk melihat content web tersebut menggunakan scroll horizontal.

 

https://deanoakley.com/

 

6. Parallax Scrolling

Layout parallax scrolling menggunakan beberapa layer dan setiap layer memiliki

kecepatan perpindahan yang berbeda-beda saat di scroll sehingga menimbulkan efek

yang menarik.

 

 

Jelaskan penggunaan berbagai macam format gambar pada desain grafis berbasis web!

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:

1. 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)
2. JPG adalah pilihan terbaik untuk menampilkan foto secara online, walau kualitasnya tidak sebagus PNG tetapi cukup bisa diterima mata manusia
3. 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
4. BMP bisa dikategorikan sebagai gambar tidak terkompresi, tidak disarankan untuk penggunaan pada web (menghabiskan bandwidth)

Sumber :

https://ourscientific.wordpress.com/2019/10/19/identifikasi-kebutuhan-pengguna-terhadap-grafik-pada-aplikasi-berbasis-web/

https://hiduptreda.com/knowledge/berbagai-macam-layout-desain-web.html

https://www.niagahoster.co.id/blog/warna-efektif-desain-website/

Tugas Minggu ke 12

 Jelaskan hal-hal apa saja yang perlu diperhatikan apabila ingin membuat media visual berbasis Web !

1.     Pemilihan warna tampilan web

Dalam pengolahan image, dikenal dua macam warna paling populer yang menjadi standar internasional, yaitu RGB dan CMYK.

RGB adalah singkatan dari Red-Green-Blue. 3 warna dasar yang dijadikan patokan warna secara universal (primary colors). Dengan basis RGB, seorang desainer bisa mengubah warna ke dalam kode-kode angka sehingga warna tersebut akan tampil universal. Dasar warna ini menjadi standar pasti dalam konteks profesional, seorang desainer tidak bisa mengatakan sebuah warna berdasar pertimbangan subektif, misal: biru muda menurut orang awam adalah birunya langit di siang yang cerah, hal ini bisa jadi berbeda bagi orang lain dengan pertimbangan yang lain pula. Untuk menyamakan persepsi dalam definisi warna, perlu adanya standar internasional dalam konteks kerja profesional. Dengan standar RGB, seorang desainer dapat mengatakan warna dengan komposisi angka yang jelas, warna biru memiliki komposisi perpaduan antara unsur Red, Green, Blue dengan derajat angka untuk R : 115 – G : 221 – B : 240.

Standar warna internasional lainnya yang digunakan untuk dunia percetakan adalah CMYK yang merupakan Singkatan dari Cyan – Magenta – Yellow, dan K mewakili warna hitam. Seperti halnya RGB, CMYK menggunakan standardisasi warna dalam koordinat. Rangenya antara 0 – 100 sehingga kehadiran unsur K sangat menentukan. Berapapun koordinat CMY-nya, selama K- nya 100 maka warna tersebut akan jadi warna hitam. CMYK merupakan standar warna berbasis pigment-based, menyesuaikan diri dengan standar industri printing. Sampai saat ini dunia cetak- mencetak memakai 4 warna dasar dalam membuat warna apapun.

2.     Tipografi

Desain grafis ternyata bukan sekedar bagaimana memainkan warna dan layout tapi ada satu hal lagi yang perlu diperhatikan yaitu tipografi. Tipografi merupakan komponen paling penting dalam desain grafis yang tidak bisa ditinggalkan. Seorang desainer bertanggung jawab untuk mengetahui seluk-beluk seputar tipografi, karena dengan begitu ia akan lebih mudah untuk membuat sebuah tipografi yang baik dan berciri khas. Oleh karena itu, desainer yang baik perlu mempelajari peraturan dan pedoman spesifik sehingga dapat mengembangkan kemampuannya dalam membuat tipografi. Tipografi yang sesuai untuk disain grafik pada aplikasi perangkat bergerak adalah :

1. Roman

Huruf di keluarga Roman memiliki ciri khas tersendiri yang muda dikenali. Huruf Roman memiliki ketebalan dan ketipisan pada setiap garis di huruf – hurufnya. Semua huruf yang ada di bawah naungan kategori Roman memiliki ciri khas klasik, anggun, tegas, lemah gemulai dan feminim. Keluarga huruf Roman sudah ada sekitar abad 11 atau 12. Karena itu, huruf Roman merupakan salah satu kategori huruf yang paling tua. Jenis font yang ada di kategori huruf Roman antara lain Bodoni, Georgia, dan Times New Roman.

2. Egyptian

Huruf yang berada di bawah keluarga Egyptian memiliki ciri huruf seperti papan. Berbeda dengan kategori Roman yang memiliki tebal tipis di hurufnya, Egyptian memiliki ketebalan yang hampir sama di setiap hurufnya. Kesan yang ditimbulkan oleh jenis huruf Egyptianadalah kokoh, kuat, kekar, dan stabil. Jenis font yang ada di kategori Egyptian adalah Rockwell dan Typo Slab – Serif.

3. Sans Serif

Huruf yang berada di bawah keluarga Sans Serif hampir mirip dengan huruf yang berada di bawah keluarga Roman, hanya saja jenis huruf ini tidak memiliki sirip di ujung. Ketebalan hurufnya pun tidak tebal tipis, melainkan solid. Kesan yang ditimbulkan jenis huruf ini adalah modern, kontemporer, dan efisien. Bisa dibilang huruf di kategori Sans Serif merupakan versi modern dari Roman. Jenis font yang ada di kategori Sans Serif adalah Arial, Century Gothic, Futura, Helvetica, Lucida Grande, Trebuchet MS, dan Verdana.

4. Script

Sama seperti namanya, huruf yang berada di bawah kategori ini memiliki rupa layaknya tuliksan tangan. Tetapi bukan huruf cetak ya. Seperti tulisan tangan sambung yang dibuat  dengan pena, kuas, atau pensil tajam. Biasanya huruf di bawah kategori ini memiliki ciri khas miring ke kanan. Kesan yang ditimbulkan oleh kategori huruf ini adalah pribadi dan akrab. Jenis font yang ada di kategori ini adalah Freestyle Script dan French Script.

5. Miscellaneous

Huruf yang berada di kategori ini tidak memiliki ciri khas atau rupa yang spesifik seperti 4 kategori lainnya. Huruf yang berada di bawah kategori ini biasanya merupakan pengembangan dari bentuk – bentuk yang sudah ada, hanya ditambahkan hiasan, ornament atau garis – garis dekoratif. Jenis font yang ada di bawah kategori ini sangat banyak, antara lain Comic Sans MS, Joker, dan Magneto.

3.     Desain visual web / Pemilihan gambar

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.

4.     Layout web

Layout atau tata letak desain disarankan sesederhana mungkin, minimalisir elemen-elemen yang tidak penting, maksimalkan whitespace (jarak antar elemen). Website dengan layout yang baik, mudah untuk dijelajahi, pengguns mudah untuk menemukan sesuatu, dan dengan cepat menemukan apa yang dicarinya.

5.     Alur web

Layout desain website harus bisa menuntun pengguna dan mengarahkan pengguna, sehingga pembuat web yang menuntun alur perhatian pengguna dari titik a, ke titik b, ke titik C, dan seterusnya, sehingga tujuan web dan misi dari web bisa dimengerti oleh pengguna.

6.     Menu navigasi

Menu navigasi berguna agar pengguna dapat berinteraksi dengan website. Ada berbagai macam desain menu navigasi, tetapi desain yang digunakan tidak melupakan fungsi utamanya, sebagai alat interaksi pengguna dengan website.

Website dapat memiliki beberapa menu/navigasi, bisa diatas pada header, atau pada sidebar, maupun dibawah pada footer.

7.     Resolusi layar

Ketajaman warna dan detail gambar pada tampilan bitmap bergantung pada banyaknya pixel. Warna atau resolusi yang membentuk gambar tersebut. Hal ini berkaitan erat dengan kemampuan monitor dan VGA (Video Graphic Adapter ) yang digunakan. Jika gambar tampilan bitmap berresolusi tinggi di tampilkan pada monitor yang berresolusi rendah akan mengakibatkan gambar terlihat kasar , bahkan terlihat kabur berbentuk kotakkotak(juggy) jika dilakukan pembesaran gambar. Satuan untuk ukuran grafis jenis bitmap ini adalah dpi (dot per inch) yang berarti banyaknya titik dalam satu inci. Resolusi pada perangkat bergerak terdiri dari :

Resolusi HD (720p) HD adalah singkatan dari High Definition. HD berarti pixelnya 128 x 720.

Resolusi Full HD (1080p) Full HD adalah kelanjutannya dan sekarang sudah menjadi standar resolusi layar di pasaran. Full HD adalah 1920 x 1080 pixel.

Resolusi QHD (2k) QHD atau Quad HD memiliki definisi empat kali lipat dibanding HD Standar. Berarti bisa memasukkan jumlah pixel empat biji layar HD kedalam satu layar QHD dengan ukuran sama. Resolusi pixel QHD adalah 2560 x 1440

Resolusi Ultra HD (4k) 4K adalah 4096 pixel, dan Ultra HD adalah 3840 pixel. Ultra HD adalah 3840 x 2160, sementara 4K adalah 4096 x 2160. Mereka biasanya disingkat menjadi 2160p berhubung perbedaan jumlah pixelnya tidak begitu besar.

 

Berikan contoh hasil aplikasi desain grafis berbasis Web !

Halodoc - Beli Obat, Tanya Dokter, Cek Lab Terpercaya

BMKG | Badan Meteorologi, Klimatologi, dan Geofisika

Perpustakaan Nasional Republik Indonesia (perpusnas.go.id)

Sumber:

https://ourscientific.wordpress.com/2019/10/19/konsep-pemodelan-desain-grafik-padaaplikasi-berbasis-perangkat/

http://diarsirazudin.blogspot.com/2019/10/konsep-pemodelan-desain-grafik-pada.html

https://sis.binus.ac.id/2014/10/08/apa-yang-perlu-diperhatikan-saat-merancang-tampilan-web/

 

Tugas M10

Jelaskan jenis-jenis desain grafis dan berikan contohnya.

1.  Desain struktur yang merupakan wujud dari suatu benda yang terdiri dari unsur-unsur desain diantaranya susunan garis, bentuk, ukuran, warna tekstur dan nilai gelap terangnya.

Contoh :

Sketsa desain / Kerangka desain

    Sketsa desain akan membentuk kerangka desain yang akan dibuat.

Bentuk barang desain

   contohnya kita membuat keyboard. Bentuk yang dibuat disesuaikan dengan kebutuhan konsumen dan    kenyamanan juga dipertimbangkan. Ukuran desain sesuai kegunaan misalnuy untuk dibawa-bawa           maka keyboard ada yang didesain tipis sehingga mudah dibawa atau keyboard yang tahan lama yang     tidak dibawa kemana-mana maka keyboard akan didesain tebal dan durable. Pilihan warna desain           juga disesuaikan sesuai keinginan dan kebutuhan pengguna

2. Desain hiasan yang mempunyai tujuan untuk menghias desain struktur suatu benda atau busana.

Contoh :

    Desain produk sangat dicari karena dapat menarik minat konsumen.

Jelaskan apa yang dimaksud dengan ide dan bagaimana proses untuk mendapatkan ide tersebut!

Salah satu sumber ide adalah imajinasi. Imajinasi, menurut Jack Stoops dan Jerry Samuelson, adalah kekuatan dari dalam diri kita yang memperbolehkan kita untuk mengalami apa yang telah kita alami, apa yang akan kita alami, dan apa yang tidak akan kita alami; imajinasi dapat menembus batasan ruang, waktu dan realitas. Imajinasi dapat membawa kita ke alam fantasi melalui dunia mimpi, yang sebenarnya adalah cermin dari keinginan dan pemikiran kita yang paling dalam.

Strategy yang membantu kita bermain-main dengan daya imajinasi kita untuk memancing

ide-ide baru melalui pembentukan bentuk baru, yaitu 

1. Seleksi adalah proses pensortiran dimana kita menfokuskan pandangan kita ke satu bentuk tertentu untuk diobsevasi. Observasi meliputi perhatian detail terhadap bentuk, warna, cahaya, bahan, bagian-bagian daripada benda tersebut. Dengan observasi yang baik kita dapat menemukan bentuk-bentuk baru yang terdapat pada benda tersebut.

2. Alteration(perubahan) adalah perubahan yang dilakukan pada sebuah benda sehingga tercipta sebuah benda yang baru. Penggabungan dua elemen yang berbeda, dapat menciptakan suatu bentuk baru. Apel dan resleting adalah dua elemen yang berbeda, penggabungan keduanya dan alterasi dari bentuk apel menghasilkan suatu bentuk baru yang mempunyai nilai dan arti baru.

3. Abstraksi adalah pensederhanaan bentuk sehingga tercipta bentuk yang baru.

4. Spontanitas adalah pencatatan semua ide yang terlintas ke dalam bentuk visual, atau dapat juga disebut dengan brainstorming. Dengan demikian tanpa kita sadari kita juga membuat alterasi ide yang satu menjadi ide baru dan mengembangkannya terus sehingga menemukan ide yang terbaik.

Jelaskan manfaat dari desain grafis dan berikan contohnya!

manfaat desain dalam kehidupan sehari-hari yaitu:

1.  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.

2. Dapat Menyampaikan Pesan Dalam Bentuk Grafis

Untuk membuat pesan dalam bentuk sebuah karya seni desain grafis tidaklah

mudah, hal ini dapat dilakukan dengan mengikuti kurusus desain grafis yang

terpercaya agar pesan yang dibuat dapat disampaikan kepada masyarakat.

3. 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.

4. 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.

5. 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.

 

Contoh Desain Dalam Kehidupan Sehari-Hari

Berikut ini terdapat beberapa contoh desain dalam kehidupan sehari-hari, terdiri atas:

1. Advertising (Periklanan)

Periklanan merupakan salah satu penggunaan yang paling menguntungkan grafis, seniman

sering melakukan  pekerjaan  iklan atau  mengambil iklan potensial ke account saat

membuat seni, untuk meningkatkan peluang penjualan karya seni. Sebagai contoh :

Membuat kartu nama, Desain Kaos (T-Shirt).

2. Business (Bisnis)

Grafis yang umum digunakan dalam  bisnis dan ekonomi untuk membuat diagram

keuangan dan tabel. Istilah Usaha Graphics mulai dipakai pada akhir tahun 1970, ketika

komputer pribadi menjadi mampu menggambar grafik dibandingkan menggunakan format

tabel. Bisnis Grafik dapat digunakan untuk menyoroti perubahan selama jangka waktu

tertentu.

3. Political (Politik)

Penggunaan grafis untuk terang-terangan politik (kartun, grafiti, seni poster, desain

bendera,dll) adalah praktek berabad-abad lama yang berlangsung hingga hari ini di setiap

bagian dunia.  “The mural Irlandia Utara” adalah salah satu contohnya. Seni melukis di

dinding atau tembok yang menceritakan konflik sejarah selama 35 tahun terakhir di Irlandia

Utara.

4. Education (Pendidikan)

Grafis yang banyak digunakan adalah dalam buku teks , terutama yang menyangkut mata

pelajaran seperti geografi, sains, dan matematika untuk menggambarkan teori dan konsep,

seperti anatomi manusia . Diagram juga digunakan untuk label foto dan gambar. Dalam

rangka edukasi, grafis berfungsi secara efektif sebagai bantuan pendidikan dan pelajar

harus mampu menafsirkannya dengan baik.

5. Film and animation (Film dan animasi)

Komputer grafis sering digunakan dalam sebagian besar film ber-fitur baru, terutama bagi

Film dengan anggaran yang besar. Film-film yang banyak menggunakan komputer grafis

diantaranya ada  Doraemon, Upin -Ipin , Harry Potter, Spider Man dan masih banyak lagi

lainnya.

 

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