DESAIN GRAFIS | DESAIN WEB DENGAN UI DAN UX

DESAIN WEB DENGAN UI DAN UX

A. Mendesain Sebuah Web yang sesuai dengan User Interface dan User Experience

UI merupakan desain grafis yang akan berkaitan dengan estetika visual web design. Sedangkan UX menetukan seberapa mudah atau sulitnya interaksi antara User dengan elemen-elemen UI yang telah dibuat sebelumnya. 

Beberapa tips untuk mendesain sebuah web yang sesuai dengan UI dan UX ;

• Tentukan Target Audience

Menentukan target Audience yang ingin dituju merupakan hal yang penting dalam pembuatan sebuah halaman web, dengan menentukan target audience terlebih dahulu kita dapat menetukan tema desain, topik, dan desain-desain lainnya.

• Jaga User Interface agar tetap sederhana.

Gunakan elemen-elemen antarmuka yang sudah sering digunakan untuk menghindari kerumitan dan ketidak-mudahan User dalam menggunakan halaman Web kita.

• Gunakan Kombinasi Warna background

Gunakan kombinasi warna untuk menunjukan bagian-bagian penting dalam suatu halaman Web atapun bagian-bagian yang menarik perhatian User, pastikan tidak terlalu berlebihan dalam penggunaan kombinasi warna ini.

• Gunakan berbagai macam Tipografi

Dengan menggunakan berbagai macam Tipografi dalam suatu halaman web akan memperindah tampilan web tersebut untuk dilihat dan dipandang oleh User dan juga pastikan untuk tidak berlebihan dalam menggunakan Tipografi ini.

• Gunakan Struktur Hierarki

Menggunakan struktur Hierarki yang benar dalam desain web kita dapat memudahkan User dalam melakukan navigasi serta kemudahan dalam mencerna informasi-informasi yang kita sediakan pada halaman web sekaligus juga memperbagus tampilan interface.

B. Browser yang digunakan untuk menampilkan halaman Web

Browser merupakan sebuah program perangkat lunak yang digunakan untuk mengeksplorasi, mengambil, dan menampilkan informasi-informasi yang tersedia di World Wide Bjeb. Informasi ini dapat berupa gambar, teks, dokumen, audio, ataupun video.

Browser yang paling banyak digunakan untuk menampilkan halaman Web :

1. Microsoft Edge (Internet Explorer)

Microsoft Edge (atau Internet Explorer) hadir secara default pada instalasi  sistem operasi Windows. Internet Explorer akan secara resmi dipensiunkan pada Juni 2022 dan diganti dengan Microsoft Edge pada Windows 11 untuk dapat bersaing dengan Browser-Browser lainnya.

2. Mozilla Firefox

Browser ini dikembangkan oleh Mozilla Corporation. Pertama kali dirilis pada November 2004, Firefox sepenuhnya dapat disesuaikan dengan tema, plug-in, dan add-on. Firefox menggunakan Gecko untuk merender tampilan halaman web, dan menerapkan standar Web saat ini dan yang akan datang nantinya.

3. Google Chrome

Chrome adalah Browser cross platform yang dikembangkan oleh perusahaan Google. pertama kali dirilis pada tahun 2008 untuk Microsoft Windows. Chrome memiliki tampilan interface yang sangat user friendly, memiliki tampilan iklan yang sedikit dan mempunyai kecepatan memuat halaman web yang sangat cepat.

C. Software Desain Web

1. Bootstrap Studio

Software desain web yang satu ini memiliki fitur yang lengkap, waktu loading yang cepat, dan grafik yang interaktif.

Bootstrap Studio juga menyediakan template dan widget yang bisa kamu gunakan secara bebas, seperti header, footer, slideshow, span, dan div.

2. Figma

Software desain web yang satu ini memiliki banyak kesamaan dengan Sketch. Namun, salah satu keunggulan Figma adalah memiliki fitur kolaborasi tim.

Meskipun terbilang baru dibandingkan pilihan software lainnya, fitur-fitur Figma tidak kalah menarik. Selain itu, Figma memiliki tampilan berbasis vektor yang membuatnya simpel dan mudah digunakan.

3. Sketch

Sketch berfokus pada penyederhanaan proses pembuatan mockup yang berkualitas tinggi. Banyak desainer memilih Sketch dengan alasan tampilannya yang rapi dan intuitif sehingga mendukung proses desain dengan mudah dan cepat.

Secara keseluruhan, Sketch merupakan software yang berbasis vektor. Kamu tetap bisa membuka gambar raster. Namun, kamu tidak bisa mengeditnya di Sketch.

4. InVision Studio

Secara keseluruhan, InVision Studio memiliki banyak kesamaan dengan Sketch dan Figma. Namun, software desain web yang satu ini lebih fokus pada pembuatan animasi dalam prototype desain web.

InVision Studio juga memiliki fitur Mirror. Dengan fitur tersebut, kamu bisa menguji tampilan atau animasi pada smartphone-mu.

Sistem Keamanan Komputer | Keamanan Web Browser

 Keamanan Web Browser

Apa Itu Web Browser ?

Web browser atau website browser merupakan salah satu aplikasi yang digunakan untuk menjelajah, menyajikan hingga mengambil konten dari berbagai sumber informasi pada jaringan internet. Peramban website ini dapat mengidentifikasi sumber informasi dari jaringan internet, berupa halaman website, video, gambar atau konten lainnya.

Jenis - Jenis Web Browser

Ada beberapa jenis website browser yang perlu diketahui, diantaranya:

• Google Chrome

Peramban web ini banyak digunakan masyarakat. Meski terbilang masih muda namun google chrome sudah mampu mengalahkan peramban web seniornya berkaitan dengan performa yang dimiliki. Tampilan pada google chrome ramah, sederhana, dan menarik, maka pengguna akan betah selama menjelajah internet menggunakan mesin peramban ini.

 

Bahkan google chrome telah terintegrasi dengan produk Google lain, ditambah lagi Google Chrome adalah salah satu alat peramban web yang terjaga keamanannya.Kelebihan Google Chrome adalah kecepatan loadingnya, jadi website yang dibuka akan cepat. Kelemahannya, menguras banyak memori.

• UC Browser

Peramban web ini menjadi kedua yang sering dipakai masyarakat, bahkan sebagian lagi menjadikan UC Browser menjadi mesin peramban utama mereka dan menjadikan Google Chrome sebagai mesin peramban yang kedua. Kelebihan UC Browser yakni bisa mengecilkan data browsing, sehingga data yang digunakan semakin hemat data. UC Browser juga bagus dalam hal download sebab bisa mengelola unduhan dengan baik. Kelemahan UC Browser adalah desain kurang menarik, jadi pengguna akan booring dengan desain yang itu-itu saja.

• Mozilla Firefox

Peforma bagus yang diberikan Mozilla Firefox sudah tidak diragukan lagi, sebab performanya bagis mempunyai tingkat pengamanan ampuh dibanding yang lain. Banyaknya fitur yang ada di Web Browser ini misalkan, Fitur add on. Kelemahan pada web browser ini adalah kemungkinan banyak cracker mulai ganas dengan memanfaatkan populernya Mozilla Firefox ini.

• Samsung Internet Browser

Peramban web dari perusahaan Samsung ini adalah salah satu peramban yang dapat dipakai di browser mobile atau android. Awalnya Samsung Internet Browser hanya dapat digunakan pada android Samsung saja. Sekarang web browser ini bisa dipakai di android dengan berbagai merek, sebab bisa diundur di play store. Kelebihannya, browser dengan kecepatan tinggi dan ringanm sebab bebas dari iklan. Kekurangannya, tampilan pada peramban web ini kurang menarik dari pada peramban lain. Kekurangannya lain ada pada shortcur bagian bawah ketika membuka tab baru maupun home, fitur ini rasanya mubazir sebab hanya mengurangi menariknya desain.

• Opera Mini

Kelebihan dari mesin peramban web ini adalah resource memory yang digunakan kecil, jadi pengguna semakin cepat dan ringan dalam menjalankan startup atau program. Jadi cocok dipakai untuk PC atau laptop dengan spek yang rendah. Kelemahannya, data jejak user seluruhnya terekam di server oOpera, maka kurang aman dan penampilannya juga tidak terlalu menarik untuk pengguna.

• Opera

Opera Browser adalah mesin peramban yang mempunyai opsi bahasa Indonesia ditambah kosa kata yang cukup bagus. menunya memakai bahasa Indonesia yang benar dan baik, Opera Browser mempunyai kecepatan render juga loading cepat. Kekurangan dari Opera yaitu kenyamanan ketika browsing, anda tidak bisa melihat page info juga menjalankan download gambar satu per satu.

• Internet Explorer

Kelebihan Internet Exproler adalah add-ons yang ada, meski add-ons yang dipunyai tidak sekaya Firefox, tetapi tampilan di Internet Explorer lebih elegan dan menarik. Kekurangannya, Internet Explorer banyak membutuhkan resources dengan skala besar.

Fungsi Web Browser

Perlu diketahui mengenai fungsi sesungguhnya agar tak melewatkan keunggulan website browser, berikut ulasannya:

1. Verifikasi Keamanan Website

Website browser memiliki fungsi memastikan atau verifikasi keamnan sebuah laman website, tujuannya memastikan keamanan dan meminimalisir bahaya bagai user.

2. Memudahkan Akses Laman

Fungsi utama dari web browser ialah kemudahan akses membuka laman website pada internet, pengguna akan langsung diarahkan menuju website yang ingin diakses dengan mudah.

3. Mengumpulkan Data

Website browser akan menampilkan konten dalam bentuk teks, gambar, video, hingga audio pada laman tersebut.

4. Mendukung Permintaan Data

Jika Anda membutuhkan data pada laman website dan ingin menyimpannya secara permanen ke komputer atau PC, maka web browser memiliki fungsi membantu Anda melakukan proses download hingga masuk ke dokumen PC Anda.

5. Sinergisme dengan Mesin Pencari

Search engine pada laman google merupakan mesin pencari yang memudahkan Anda mengakses suatu konten. Web browser pun demikian dibutuhkan oleh mesin pencari untuk semakin memudahkan pengguna mengakses data dan informasi dari internet.

Manfaat Web Browser

Memahami fungsi website browser, kurang afdol jika belum memahami manfaatnya bagi para user dengan mobilitas kerja tinggi dan memerlukan bantuan akses internet.

• Akses yang mudah, memudahkan pengguna mengakses informasi dan data secara cepat dan ringkas dari internet.
• Kemudahan download, web browser membantu pengguna mengunduh file atau data dari laman website ke komputer pribadi.
• Kemudahan menjelajah internet, berbagai macam situs yang aman dan berguna bagi pengguna akan dipermudah dengan website browser.

Cara Kerja Web Browser

Setelah memahami keseluruhan apa itu web browser, selanjutnya mengetahui cara kerjanya dalam membantu pengguna menemukan laman sesuai keinginan, berikut ini:

• User mengakses website dengan mengetikkan alamat pada URL di address bar pada peramban website (contohnya: Google(dot)com).
• Web browser akan otomatis menerima permintaan user dan menjalankan pengambilan data pada DNS server.
• Data yang telah diambil, berupa IP dari perintah dengan mengetikkan sesuai keinginan user.
• Kemudian, web browser dapat mengakses server tujuan menggunakan IP yang diperoleh dari DNS server
• Server memberikan data dari konten dalam bentuk HTML atau file lain, seperti PHP, CSS, dll.
• Terakhir, peramban web menampilkan beragam konten sesuai permintaan pengguna.

Gangguan Atau Ancaman Yang Dapat Muncul Pada Sistem Komputer Melalui Web Browser

VIRUS

Virus komputer  adalah program komputer yang masuk ke dalam sistem untuk melakukan sesuatu, misalnya meng-interupsi proses yang sedang berjalan di CPU, memperlambat kinerja komputer, memenuhi memory komputer sehingga kegiatan CPU berhenti, memenuhi hard-disk, menghapus file-file, merusak sistem operasi, dan sebagainya.

Virus komputer juga merupakan hasil karya seorang programmer yang punya niat jahat atau hanya untuk memuaskan nafsu programming-nya yang berhasil menyusupkan virus kedalam sistem komputer orang lain. Jumlah virus bertambah terus setiap hari sehingga pemilik sistem komputer harus selalu waspada. Virus menyusup masuk ke dalam sistem komputer melalui berbagai cara, antara lain:

• Pertukaran file, misalnya mengambil file (copy & paste) dari komputer lain yang telah tertular virus.
• E-mail, membaca e-mail dari sumber yang tidak dikenal bisa berisiko tertular virus, karena virus telah ditambahkan (attach) ke file e-mail.
• IRC, saluran chatting bisa dijadikan jalan bagi virus untuk masuk ke komputer.

SPYWARE

Perangkat pengintai (bahasa Inggris: spyware) adalah istilah teknologi informasi yang mengacu kepada salah satu bentuk program berbahaya yang memasang dirinya sendiri ke dalam sebuah sistem untuk mencuri data pengguna atau merusak sistem pengguna tersebut.

Spyware merupakan turunan dari perangkat lunak beriklan, yang memantau kebiasaan pengguna dalam melakukan penjelajahan Internet untuk mendatangkan "segudang iklan" kepada pengguna. Namun, karena perangkat lunak beriklan kurang begitu berbahaya (tidak melakukan pencurian data), spyware melakukannya dan mengirimkan hasil yang dikumpulkan kepada pembuatnya (perangkat lunak beriklan umumnya hanya mengirimkan data kepada perusahaan marketing).

Kerugian:

• Pencurian data

Kebanyakan informasi yang diambil tanpa seizin adalah kebiasaan pengguna dalam menjelajahi Internet, tetapi banyak juga yang mencuri data-data pribadi, seperti halnya alamat surel (untuk dikirimi banyak pesan sampah atau dapat dikenal dengan spam).

• Tambahan biaya penggunaan Internet

Yang merugikan dari keberadaan spyware, selain banyaknya iklan yang mengganggu adalah pemborosan bandwidth dan privasi yang telah terampas.
Pada dasarnya, spyware tersebut diiringi dengan PopUp Windows, yang tentunya selain memakan lebar pita lebih banyak, juga membuat loading Internet anda semakin lambat.

Contoh Spyware dan Adware

• Windows Live Messenger Plus

Windows Live Messenger Plus merupakan salah satu contoh Adware produk AddOns untuk Windows Live Messenger

• Situs web

Pada umumnya, situs web tersebut merupakan situs web layanan hos web.

Contoh:

1. AOL Mail
2. Grisoft
3. Ziddu

DESAIN GRAFIS | Konsep Warna Pada Web

 KONSEP WARNA PADA WEB DAN RESOLUSI LAYAR PADA MONITOR

Warna adalah alasan utama membeli sesuatu, dan warna website cukup berpengaruh terhadap kekuatan branding. Hal itu karna warna sendiri mampu berbicara dengan alam bawag sadar manusia. Warna mempengaruhi suasana hati dan menggerakan seseorang untuk melakukan sesuatu. 

Teori Warna

Teori Brewster adalah konsep yang mengelompokan warna menjadi 4 kategori yaitu : warna primer, warna sekunder, warna tersier, dan warna netral.

• Warna primer terdiri dari warna merah, kuning, dan biru

• Warna sekunder terdiri dari warna ungu, orange, dan hijau. Warna

  
  
  
  sekunder merupakan bentuk dari gabungan warna primer

• Warna tersier merupakan kombinasi warna primer dan warna sekunder.

• Warna netral digunakan untuk penyeimbang untuk membantu warna lain agar terlihat lebih focus. Ada 2 jenis warna netral : monokromatik dan earth tone.

• Warna monokrom terdiri dari hitam dan putih

• Warna earth tone atau warna yang menyerupai unsur bumi misalnya coklat, krem, dll.

Kelompok warna yang mirip dengan kelompok primer yaitu RGB yang terdiri dari warna merah, hijau, dan biru. RGB merupakan tipe warna yang digunakan untuk gambar pada layer digital. Gabungan warna RGB ini bisa membentuk corak baru seperti kuning, cyan, magenta, dan putih. 

Arti Warna Dan Pengaruhnya Bagi Website

Warna Merah yang punya arti kewaspadaan, peringatan, dan gairah. Warna ini bisa ditemui pada website restoran, kegiatan sosial, hingga industry makanan.

Warna Kuning melambangkan keceriaan, kegembiraan, dan kehidupan energi. Biasa digunakan pada website restoran atau listrik.

Warna Biru melambangkan kedamaian, ketenangan, dan intelektual. Sering digunakan untuk website perusahaan teknologi, pendidikan, dan kedinasan.

Kombinasi Warna Desain Web

1. Tint

Tint adalah campuran warna dasar dengan warna putih. Warna tint terlihat santai, lembut, serta memiliki kesan feminim.

Warna website tint efektif bagi situs yang membidik target audiens Wanita dan anak-anak. Banyak perusahaan kecantikan, produk bayi, mainan, dan lain-lain menggunakan tint sebagai warna website.

2. Tone 

Tone adalah campuran warna dasar dengan abu-abu. Efeknya, warna terlihat lebih pucat dan bahkan keruh jika unsur abu-abunya terlalu berlebihan.

Warna tone memberikan kesan klasik, alami, dan natural seperti warna alam. Jenis warna website ini cukup baik jika digunakan untuk website arsitektur, fotografi, kerajinan tangan, dan lain-lain.

3. Shade 

Shade adalah kombinasi warna dasar dengan warna hitam. Sehingga warna akan terlihat lebih gelap atau tua.

Situs yang memakai kombinasi warn aini cocok untuk website yang ingin memperkuat kesan serius, professional, dan elegan. Misalnya jasa keuangan, portal berita, jasa konsultan, dan organisasi.

Jumlah warna efektif dalam website 🡪 60 : 30 : 10

• Porsi 60% warna dominan

• Porsi 30% warna sekunder

• Porsi 10% warna pelengkap

Cara menentukan warna efektif untuk desain website :

1. Pelajari branding yang digunakan

2. Ketahui tujuan website dan setiap halamannya

3. Sesuaikan warna website dengan target pasar

4. Pastikan seluruh bagian terlihat jelas

Resolusi Layar

Secara garis besar, resolusi adalah sebuah istilah yang dipakai untuk menjelaskan banyaknya pixel/titik terkecil dalam sebuah layer, baik itu layer ponsel, laptop, TV, atau yang lainnya. Resolusi ini sangat erat kaitannya dengan kualitas gambar yang dapat dihasilkan oleh suatu perangkat. Semakin tinggi resolusinya, maka gambar yang dihasilkan akan semakin baik.

Cara Penulisan :

Lebar (width) x tinggi (height)

Jadi, jika ada layer dengan resolusi 1080 x 720 pixel, maka bisa dipastikan layer tersebut memiliki 1080 titik pixel ke samping dan 720 titik pixel ke bawah. Jika ditulis 720 x 1080 pixel, maka artinya layer tersebut memiliki 720 titik pixel ke samping dan 1080 titik pixel ke bawah. 

Satuan resolusi yang paling sering digunakan :

• 1280 x 720 pixel (720p) atau biasa disebut HD

• 1920 x 1080 pixel (1080p) atau biasa disebut full HD

• 3840 x 2160 pixel (2160p) atau biasa disebut 4K

• 7680 x 4320 pixel (4320p) atau biasa disebut 8k

Warna adalah alasan utama membeli sesuatu, dan warna website cukup berpengaruh terhadap kekuatan branding. Hal itu karna warna sendiri mampu berbicara dengan alam bawag sadar manusia. Warna mempengaruhi suasana hati dan menggerakan seseorang untuk melakukan sesuatu. 

Teori Warna

Teori Brewster adalah konsep yang mengelompokan warna menjadi 4 kategori yaitu : warna primer, warna sekunder, warna tersier, dan warna netral.

• Warna primer terdiri dari warna merah, kuning, dan biru

• Warna sekunder terdiri dari warna ungu, orange, dan hijau. Warna sekunder merupakan bentuk dari gabungan warna primer

• Warna tersier merupakan kombinasi warna primer dan warna sekunder.

• Warna netral digunakan untuk penyeimbang untuk membantu warna lain agar terlihat lebih focus. Ada 2 jenis warna netral : monokromatik dan earth tone.

• Warna monokrom terdiri dari hitam dan putih

• Warna earth tone atau warna yang menyerupai unsur bumi misalnya coklat, krem, dll.

Kelompok warna yang mirip dengan kelompok primer yaitu RGB yang terdiri dari warna merah, hijau, dan biru. RGB merupakan tipe warna yang digunakan untuk gambar pada layer digital. Gabungan warna RGB ini bisa membentuk corak baru seperti kuning, cyan, magenta, dan putih. 

Arti Warna Dan Pengaruhnya Bagi Website

Warna Merah yang punya arti kewaspadaan, peringatan, dan gairah. Warna ini bisa ditemui pada website restoran, kegiatan sosial, hingga industry makanan.

Warna Kuning melambangkan keceriaan, kegembiraan, dan kehidupan energi. Biasa digunakan pada website restoran atau listrik.

Warna Biru melambangkan kedamaian, ketenangan, dan intelektual. Sering digunakan untuk website perusahaan teknologi, pendidikan, dan kedinasan.

Kombinasi Warna Desain Web

1. Tint

Tint adalah campuran warna dasar dengan warna putih. Warna tint terlihat santai, lembut, serta memiliki kesan feminim.

Warna website tint efektif bagi situs yang membidik target audiens Wanita dan anak-anak. Banyak perusahaan kecantikan, produk bayi, mainan, dan lain-lain menggunakan tint sebagai warna website.

2. Tone 

Tone adalah campuran warna dasar dengan abu-abu. Efeknya, warna terlihat lebih pucat dan bahkan keruh jika unsur abu-abunya terlalu berlebihan.

Warna tone memberikan kesan klasik, alami, dan natural seperti warna alam. Jenis warna website ini cukup baik jika digunakan untuk website arsitektur, fotografi, kerajinan tangan, dan lain-lain.

3. Shade 

Shade adalah kombinasi warna dasar dengan warna hitam. Sehingga warna akan terlihat lebih gelap atau tua.

Situs yang memakai kombinasi warn aini cocok untuk website yang ingin memperkuat kesan serius, professional, dan elegan. Misalnya jasa keuangan, portal berita, jasa konsultan, dan organisasi.

Jumlah warna efektif dalam website 🡪 60 : 30 : 10

• Porsi 60% warna dominan

• Porsi 30% warna sekunder

• Porsi 10% warna pelengkap

Cara menentukan warna efektif untuk desain website :

1. Pelajari branding yang digunakan

2. Ketahui tujuan website dan setiap halamannya

3. Sesuaikan warna website dengan target pasar

4. Pastikan seluruh bagian terlihat jelas

Resolusi Layar

Secara garis besar, resolusi adalah sebuah istilah yang dipakai untuk menjelaskan banyaknya pixel/titik terkecil dalam sebuah layer, baik itu layer ponsel, laptop, TV, atau yang lainnya. Resolusi ini sangat erat kaitannya dengan kualitas gambar yang dapat dihasilkan oleh suatu perangkat. Semakin tinggi resolusinya, maka gambar yang dihasilkan akan semakin baik.

Cara Penulisan :

Lebar (width) x tinggi (height)

Jadi, jika ada layer dengan resolusi 1080 x 720 pixel, maka bisa dipastikan layer tersebut memiliki 1080 titik pixel ke samping dan 720 titik pixel ke bawah. Jika ditulis 720 x 1080 pixel, maka artinya layer tersebut memiliki 720 titik pixel ke samping dan 1080 titik pixel ke bawah. 

Satuan resolusi yang paling sering digunakan :

• 1280 x 720 pixel (720p) atau biasa disebut HD

• 1920 x 1080 pixel (1080p) atau biasa disebut full HD

• 3840 x 2160 pixel (2160p) atau biasa disebut 4K

• 7680 x 4320 pixel (4320p) atau biasa disebut 8k