Langsung ke konten utama

Konsep Dasar Desain Web



Desain Untuk Sebuah Web

Dalam membuat atau mendesain sebuah web, harus memerhatikan beberapa hal seperti : 

A. Warna

Warna merupakan hal yang sangat penting dalam mendesain sebuah web agar membuat web tersebut menjadi lebih menarik. Pemilihan warna harus sangat diperhatikan dan disesuaikan dengan konsep website kamu. Menurut teori Brewster, untuk menyederhanakan warna  yang ada di alam, warna dibagi menjadi 4 kelompok, yaitu : 

    1. Warna Primer
    2. Warna Sekunder
    3. Warna Tersier
    4. Warna Netral

1). Warna Primer

Warna Primer ada 3 warna yaitu Merah, Kuning, dan Biru.


 2) Warna Sekunder

Warna sekunder ada beberapa warna seperti ungu, orange, dan hijau.

3) Warna Tersier

Berikut adalah warna yang tergolong dalam warna tersier :


4) Warna Netral

Berikut adalah warna yang tergolong dalam warna netral :



Psikologi Warna

Psikologi warna dapat kita pahami salah satunya dengan mengetahui perlambangan warna. Warna memiliki pengaruh yang kuat terhadap sikap dan emosi. Memahami psikologi warna akan membantumu merancang antarmuka yang efektif dan tepat sasaran.
Warna yang Disukai Wanita 

Dalam survei tentang warna dan gender : 

  • 35% wanita suka warna biru
  • 23% wanita suka warna ungu
  • 14% wanita suka warna hijau
  • 33% wanita tidak suka warna oranye
  • 33% wanita tidak suka warna coklat
  • 17% wanita tidak suka warna abu-abu

Warna yang Disuka Pria

Umumnya pria menyukai warna biru, hijau, dan hitam. Sedangkan warna yang tidak disukai kebanyakan pria adalah ungu, orange, coklat.


Makna-Makna Berbagai Warna 

  • Biru Menumbuhkan Kepercayaan. 
  • Kuning Memancing Rasa Waspada
  • Hijau untuk Kesan Alami dan Kreatif
  • Orange Melambangkan Kesenangan 
  • Hitam Memberikan Kesan 

Palette Color

Color Palette adalah sekumpulan warna yang di mix and match sehingga menghasilkan kombinasi warna yang unik dan menarik. Contohnya : https://colorhunt.co/



RGB (Red, Green, Blue)

RGB adalah sebuah metoda dalam penggambaran warna. RGB (Red, Green, Blue) terdiri dari tiga warna, yaitu Merah, Hijau, dan Biru. Warna umum yang digunakan untuk sebuah website biasanya menggunakan model RGB. Kode RGB menggunakan bilangan Hexadecimal. Hexadecimal basis 16 ( 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F). Contoh Kode Warna RGB :


Type Font

Serif menggunakan tips atau flag dekoratif. Serif biasanya digunakan untuk dokumen atau layar yang mengandung banyak text. Sans Serif tidak menggunakan tips atau flag dekoratif. Sans Serif biasanya digunakan untuk komputer karena dianggap memiliki kontras yang lebih tajam



B. Tipografi

Tipografi adalah suatu teknik dalam memilih dan menata huruf dengan indah dalam suatu ruang yang tersedia. 

1. Judul (Heading)
Sesuai dengan nama nya Heading terletak dibagian atas Website sebagai judul dari website tersebut.

2. Body (Paragraf)
Body berisi paragraf-paragraf. Paragraf pada website hendaknya memiliki ketegasan dan keterbacaan sehingga nyaman untuk dibaca. 

3. Aksen (Penekanan)
Berbagai aksen dari penulisan website atau dalam tipografi website. Bold, Italic, Underline. 


Pemilihan Font

Pahami target pengunjung website
Perhatikan tingkat keterbacaan website
Perhatikan type font (serif & sans serif)
Perhatikan style font (B, I, U)
Perhatikan lowercase atau UPPERCASE font
Perhatikan pewarnaan font (Nyaman di lihat)
Tidak menggunakan terlalu banyak jenis font (Rekomendasi 2 font berbeda)
Perhatikan lisensi font (free atau tidak), disarankan font yang benar-benar gratis untuk apapun.


Jenis Layout Desain Website
  • Static - Desain web memiliki ukuran tetap pada semua resolusi browser (pixel)
  • Fluid - Desain web dapat menyesuaikan lebar layout sesuai dengan resolusi browser (%)
  • Responsive – Desain web dapat berganti layout pada resolusi tertentu (desktop&mobile)
  • Responsive fluid – Gabungan Responsive & Fluid (%)
  • Horizontal Scrolling- Desain web dengan menampilkan konten Horizontal atau menyamping)
  • Parallax Scrolling- Desain web dengan layer atau hanya 1 halaman (one page/single page)

Responsive Web Design

2010 Ethan Marcotte memperkenalkan istilah Responsive Web Design yaitu sebuah metode untuk mengoptimalkan pengalaman pengguna melakukan surfing internet di berbagai perangkat, baik mobile, tablet, maupun desktop.

Format Layout Web

One Column
Two Colums
Three Columns


Content (Gambar, Audio, Video)
  • Ukuran gambar/audio/video sekecil mungkin dengan kualitas semaksimal mungkin (< 500 Kb)
  • Resolusi gambar/audio/video disesuaikan dengan ukuran file gambar
  • GIF - Cocok untuk menambahkan animasi singkat, cara menarik untuk mengambil perhatian pembaca web
  • JPEG / JPG - Pas untuk ilustrasi yang kaya warna.
  • PNG –Pilihan yang tepat untuk menampilkan logo, screenshot yang detail dan tipografi
  • Format audio MP3, OGG dan WAP
  • Format audio MP4, OGV dan upload ke YouTube)


Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

Evaluasi UI (Usability & User Experience)

Apa itu Usability? Jacob Nielson, usability didefinisikan sebagai kemampuan sistem untuk memenuhi kebutuhan pengguna dengan 5 atribut penilaian, yaitu learnability, efficiency, memorability, errors, dan satisfaction. Pressman, usability merupakan tingkatan kemampuan antarmuka aplikasi dapat digunakan untuk mempermudah hidup pengguna. Santoso, usability merupakan derajat kemampuan sebuah aplikasi untuk membantu pengguna menyelesaikan sebuah tugas. ISO 9241-11 (Bevan, 1995), mendefinisikan usability merupakan sejauh mana suatu produk dapat digunakan oleh pengguna tertentu untuk mencapai target yang ditetapkan dengan effectiveness, efficiency dan satisfaction. Kenapa sih Usability itu Penting? Memudahkan pengguna Aplikasi mudah dipelajari Aplikasi harus berjalan sesuai fungsinya Berdampak Pada Faktor Kesuksesan Menarik minat penggunanya Alat Uji Usability SUS (System Usability Scale) : SUS merupakan kuesioner yang sederhana dan paling dapat diandalkan. QUIS (Questionnaire for User Int...
Posting Komentar
Baca selengkapnya

Implementasi HTML Bootstrap Design Web ke WordPress

Kemunculan WordPress lebih memudahkan proses perancangan blog. Sebelum adanya WordPress, banyak developer Website yang menggunakan HTML statis bagi merancang blog. Namun, kini para developer sudah mulai beralih menggunakan tampilan yang terdapat di WordPress. Meskipun saat ini tak masalah jika tetap menggunakan HTML statis, tetapi tak ada salahnya bukan jika mempertimbangkan pindah ke WordPress. Kenapa? Karena dengan WordPress, Kamu dapat merancang dan mengelola blog lebih gampang. WordPress menyediakan tema, plugin, widget, dan beragam fitur lainnya yang mempermudah Kamu mengelola blog tanpa berurusan dengan coding. Bagi kamu selaku pemilik blog yang masih menggunakan HTML statis telah seharusnya disarankan sebaiknya Kamu mulai mempertimbangkan untuk melakukan convert HTML ke WordPress. Selain mempermudah Kamu bagi mengelola, WordPress pun mempunyai banyak fitur yang lebih fleksibel ditambah maupun dikurangi diperbandingkan dengan HTML statis. Ada tiga macam cara convert HTML ke WordP...
Posting Komentar
Baca selengkapnya

Logika Fuzzy (Model Sugeno dan Tsukamoto)

Logika Fuzzy adalah metodologi sistem kontrol pemecahan masalah yang cocok digunakan untuk diimplementasikan pada berbagai sistem, mulai dari sistem yang sederhana, sistem kecil, embedded system, jaringan PC, multichannel atau workstation berbasis akuisisi data dan sistem kontrol. Logika ini  merupakan suatu logika yang memiliki nilai kekaburan atau kesamaran antara benar atau salah. Logika Fuzzy sering digunakan dalam bidang elektronika. Konsep logika ini pertama kali diperkenalkan oleh Prof. Lotfi Astor Zadeh pada tahun 1962. A. Model Sugeno Model Sugeno adalah metode interfensi fuzzy untuk aturan yang dipresentasikan dalam bentuk IF-THEN, output yang dihasilkan sistem tidak berupa himpunan fuzzy, tetapi berupa konstanta atau persamaan linear. Sebagai fungsi keanggotaan dari konsekuen, Michio Sugeno mengusulkan penggunaan singleton. Singleton adalah sebuah himpunan fuzzy dengan fungsi keanggotaan yang pada titik tertentu mempunyai sebuah nilai dan 0 diluar titik tersebut. Du...
Posting Komentar
Baca selengkapnya