Human-Computer Interaction User Interface Design

Layout [1]

Good visual hierarchy isn’t about wild and crazy graphics or the newest photoshop filters, it’s about organizing information in a way that’s usable, accessible, and logical to the everyday site visitor.

— Brandon Jones

Topik bahasan:

  1. Pengantar
  2. Grouping
  3. Hirarki

Penjelasan Layout 1 dalam bentuk video dapat diakses pada:


Pengantar

DESAIN ADALAH TENTANG KOMUNIKASI. Jika Anda membuat website yang berfungsi dan menyajikan informasi dengan baik, tetapi tampilannya terlihat jelek atau gagal menyesuaikan dengan brand klien Anda, maka tidak ada yang mau menggunakannya. Jika Anda membuat website yang tampilannya indah tetapi sulit digunakan atau tidak dapat diakses, orang akan meninggalkannya.

Saya sering menganalogikan pembelajaran tentang Layout dengan proses membuat rancangan ruangan atau bangunan. Pada gambar di bawah ini Anda dapat melihat rancangan layout 2D untuk ruang perkantoran.

Selanjutnya terdapat visualisasi layout berbentuk 3D yang membuat rancangan lebih nyata, seperti gambar di bawah ini.

Rancangan layout yang telah dibuat menjadi acuan kerja dalam pembangunan ruangan atau bangunan. Setelah bangunan selesai dikerjakan, pengaturan atau pengisian perkakas dan perabotan juga mengacu pada gambaran layout tersebut. Contoh ruangan Coworking Space di bawah ini, telah terlihat pembatas area, susunan meja, kursi dan perkakas lainnya yang tersusun teratur dan rapi sesuai peruntukannya.

Tidak berbeda dengan membuat rancangan pada website atau aplikasi. Sebelum benar-benar melakukan implementasi, Anda harus memastikan layout website atau aplikasi telah disusun dengan memperhatikan aspek-aspek dalam Usability, misalnya accesibility, information scent, efficiency, learnability, mapping, dll. Rancangan layout menjadi acuan kerja dalam pembuatan User Interface, implementasi pembangunan aplikasi dan pengisian konten.

Rancangan layout yang baik ditujukan untuk memberi kemudahan bagi user dalam mengakses website atau aplikasi, dapat dengan cepat menemukan informasi yang dicari, mudah dipahami cara penggunaannya dan dapat membantu menyelesaikan pekerjaannya.

Penting bagi seorang desainer untuk dapat memahami prinsip layout sehingga nantinya mampu merancang layout yang baik, seperti:

  • Memperhatikan prinsip pengelompokan (grouping) untuk kemudahan scanning informasi.
  • Penyusunan hirarki elemen dan informasi dalam desain, sehingga user dapat melihat informasi dari yang paling penting ke yang kurang penting secara berurut.
  • Mengatur dan memperhatikan whitespace, juga mengatur aligment agar susunan elemen dalam desain tidak crowded (tidak tertata atau padat menumpuk).
  • Menggunakan sistem grid dalam membuat layout untuk dapat mengakomodir ketiga hal sebelumnya.

Oleh karena itu, materi Layout ini akan mengakomodir tentang prinsip:

  • Grouping dan Hirarki (Visual)
  • Whitespace
  • Alignment dan Grid

Grouping dan Hirarki

Grouping (Prinsip Gestalt)

Cara orang melihat desain Anda sangat mempengaruhi makna yang mereka ambil dari desain tersebut. Prinsip Gestalt meneliti fenomena ini. Prinsip-prinsip Gestalt berusaha menggambarkan bagaimana orang memahami elemen visual ketika kondisi tertentu berlaku. Prinsip-prinsip Gestalt menjelaskan bagaimana mata menciptakan keseluruhan (Gestalt) dari potongan bagian-bagian.

Gestalt (bentuk/ form/ shape dalam bahasa Jerman) adalah sekelompok prinsip persepsi visual yang dikembangkan oleh psikolog Jerman pada tahun 1920-an. Prinsip ini dibangun di atas teori bahwa “keseluruhan yang terorganisir dianggap lebih besar daripada jumlah bagian-bagiannya.”

“Keseluruhan adalah jumlah dari bagian-bagiannya.”

Kurt Koffka

Mari memperhatikan gambar berikut.

Contoh 1 untuk menggambarkan teori Gestalt

Pada pandangan pertama Anda akan melihat dua kepala orang tua di bagian kiri dan kanan gambar. Namun, ketika melihat lebih dekat, Anda mulai melihat detail (yang beberapa orang mungkin bahkan tidak memperhatikan pada awalnya) yang membentuk gambar-gambar ini dan Anda mulai melihat gambar yang sama sekali berbeda. Terdapat gambar cawan, perempuan sedang duduk, sebuah botol, laki-laki sedang duduk sambil bermain gitar dan perempuan di depan pintu.

Selanjutnya, Anda dapat memperhatikan gambar di bawah ini. Apakah yang pertama sekali Anda lihat?

Contoh 2 untuk menggambarkan teori Gestalt

Keseluruhan gambar menujukkan wajah seorang laki-laki tua dan tangan kanannyanya diletakkan di dada. Namun, setelah beberapa saat, Anda akan memperhatikan lebih rinci, per komponen pada gambar. Ternyata wajah laki-laki tersebut terbentuk dari beberapa gambar terpisah. Bahkan Anda sekarang bisa menunjukkan bahwa terdapat 5 perbedaan pada gambar kiri dengan kanan.

Apa sajakah yang berbeda?

Perbedaan gambar kiri dengan gambar kanan
  1. Burung hitam di kiri atas melihat ke arah yang berlawanan.
  2. Tongkat pria terbalik dan sedikit lebih gelap.
  3. Bentuk topi pria yang berbeda.
  4. Wanita melihat ke arah yang berbeda.
  5. Batu bata di trotoar pada bagian kanan bawah lebih besar di gambar kanan.

Selanjutnya, mari perhatikan gambar mobil di bawah ini.

Contoh 3 untuk menggambarkan teori Gestalt

Sebenarnya terdapat 2 versi Volkswagen Beetle, model 1937 dan 1973, dan meskipun ada beberapa perubahan besar dalam detail desain selama lebih dari 4 dekade, desain dasarnya tetap sama. Pada awalnya orang akan melihat kedua mobil tersebut adalah sama.

Hal ini terjadi karena cara otak manusia bekerja. Kita melihat seluruh gambar dan mendefinisikan seluruh bentuk lebih cepat dan lebih mudah daripada melihat atau memperhatikan perubahan detail.

Contoh keempat. Apakah yang Anda temukan pada gambar di bawah ini?

Contoh 4 untuk menggambarkan teori Gestalt

Gambar di atas menunjukkan seekor anjing Dalmation mengendus-endus tanah di bawah naungan pohon-pohon yang menggantung. Anjing tidak dikenali dengan terlebih dahulu mengidentifikasi bagian-bagiannya (kaki, telinga, hidung, ekor, dll), lalu menyimpulkan anjing dari bagian-bagian komponen itu. Anjing dilihat sebagai keseluruhan sekaligus.

Hal yang sama terjadi pada setiap desain web yang dibuat, desain tidak pernah dirasakan dengan mengidentifikasi bagian-bagiannya (header, navigasi, konten, tombol, dll).

Desain dianggap secara keseluruhan pada pandangan pertama.

Prinsip-Prinsip Gestalt

Kekuatan whitespace dalam grouping berasal dari prinsip kedekatan (proximity) Gestalt. Prinsip-prinsip ini ditemukan oleh sekolah psikolog Gestalt, menggambarkan bagaimana pemrosesan awal sekelompok elemen-elemen dalam bidang visual menjadi keutuhan yang besar.

Prinsip-prinsip Gestalt adalah:

  1. Proximity
  2. Common region
  3. Similarity
  4. Closure
  5. Symmetry
  6. Continuity
  7. Common fate

1. PROXIMITY (KEDEKATAN)

Elemen yang lebih dekat satu sama lain lebih cenderung dikelompokkan bersama. Anda melihat empat kolom lingkaran vertikal, karena lingkaran itu lebih dekat secara vertikal daripada horizontal.

Ilustrasi Proximity

Kita dapat menggunakan prinsip Proximity dalam desain UI untuk:

  • pengelompokan informasi yang serupa;
  • mengorganisir/mengatur konten, dan
  • menghilangkan kekacauan pada layout.

Seperti yang dinyatakan prinsip Gestalt, item yang terkait harus tetap dekat satu sama lain, sedangkan item yang tidak terkait harus tetap terpisah lebih jauh.

Anda dapat menerapkan prinsip Proxomity pada berbagai opsi seperti navigasi, daftar galeri dan banner, body text dan pagination.

Contoh desain yang menerapkan Proximity

Contohnya:

Interface Website Walmart

Kedekatan masing-masing gambar dengan teks mengkomunikasikan bahwa mereka terkait satu sama lain, misalnya gambar Tablet pada kiri atas dengan link Electronics terkait karena posisinya yang berdekatan.


COMMON REGION

Sama halnya dengan prinsip Proximity, elemen-elemen yang ditempatkan dalam wilayah yang sama dianggap dikelompokkan.

Ilustrasi Common Region

Prinsip Common Region dapat membantu dengan pengelompokan informasi dan penyusunan konten, tetapi juga dapat mencapai pemisahan konten atau bertindak sebagai titik fokus. Hal ini dapat meningkatkan hirarki, kemudahan memindai dan membantu dalam mempromosikan informasi.

Prinsip Common Region dapat menyatukan banyak elemen yang berbeda, menjaga mereka bersatu dalam kelompok yang besar. Kita dapat mencapainya dengan menggunakan garis, warna, bentuk (shape) dan bayangan (shadow). Hal ini sering digunakan untuk membawa elemen ke foreground (latar depan), menunjukkan interaksi atau kepentingan.

Contoh Common Region yang baik adalah pola kartu; ruang persegi panjang yang didefinisikan dengan baik dengan informasi yang berbeda dijadikan sebagai satu. Banner dan table adalah contoh yang baik.

Contoh desain yang menerapkan Common Region

Contohnya pada Pin di Pinterest.

Layout Pinterest.com

Dari gambar Pinterest di atas, prinsip Common Region digunakan untuk memisahkan setiap Pin (termasuk foto, judul, deskripsi, kontributor dan detail lainnya) dari semua pin lain di sekitarnya.

Contoh lainnya adalah pada satu post di Facebook.

Layout sebuah post di Facebook

Common Region dalam contoh Facebook di atas adalah untuk mengkomunikasikan bahwa komentar, like dan interaksi dikaitkan dengan satu postingan – bukan postingan disekitarnya.


SIMILARITY (KESAMAAN)

Elemen yang berbagi karakteristik visual yang sama dianggap lebih terkait dari yang tidak sama karakteristik visualnya.

Ilustrasi Similarity

Similarity dapat membantu kita untuk mengatur dan mengklasifikasikan obyek dalam satu grup dan menghubungkannya dengan makna atau fungsi tertentu. Ada berbagai cara untuk membuat elemen dianggap sama dan terkait. Termasuk di dalamnya Similarity pada warna, ukuran, bentuk, tekstur, dimensi dan orientasi; dengan gabungan beberapa kesamaan membuat menjadi lebih komunikatif dari yang lain (misalnya warna > ukuran > bentuk).

Ketika Similarity terjadi, suatu obyek dapat diberi penekanan dengan membuatnya berbeda dari yang lain; hal ini disebut “Anomali” dan dapat digunakan untuk membuat kontras atau bobot visual (visual weight). Hal ini dapat menarik perhatian user kepada bagian konten tertentu (titik fokus) sambil membantu pemindaian, kemampuan menemukan dan keseluruhan aliran.

Anda dapat menggunakan prinsip Similarity dalam navigasi, link, button, heading, call to action dan lainnya.

Contoh desain yang menerapkan Similarity

Contoh Similarity dapat dilihat pada website Github.

Interface Github

GitHub menggunakan prinsip Similarity dalam dua cara pada halaman di atas.

  • Pertama, menggunakan Similarity untuk membedakan bagian yang berbeda. Anda dapat segera mengetahui bagian abu-abu memiliki tujuan yang berbeda dari bagian hitam, yang juga terpisah dan berbeda dari bagian biru.
  • Kedua, menggunakan warna biru untuk membedakan link dari teks biasa, dan untuk mengkomunikasikan bahwa semua teks biru memiliki fungsi yang sama.
Interface Crazy Diamond

Similarity antar obyek adalah salah satu metode untuk membuat koneksi.
Anda dapat memberi warna, tekstur, ukuran atau bentuk pada elemen sebuah halaman dengan cara yang serupa dan secara tidak sadar user Anda akan menyatukannya. Dalam banyak cara yang sama seperti dengan simetri, elemen yang tidak punya kesamaan visual akan secara otomatis menonjol dalam penglihatan.


CLOSURE

Mata cenderung mempersepsikan sosok yang tertutup dan lengkap, bahkan ketika ada garis-garis yang hilang. Sebagai contoh, pada gambar di bawah, bagian kiri, kita melihat segitiga di tengah meskipun tepinya tidak lengkap.

Ilustrasi Closure

Seperti yang dinyatakan oleh prinsip Closure, ketika disajikan dengan jumlah informasi yang tepat, otak kita akan langsung mengambil kesimpulan dengan mengisi kekosongan dan menciptakan suatu kesatuan yang utuh. Dengan cara ini kita dapat mengurangi jumlah elemen yang dibutuhkan untuk mengkomunikasikan informasi, mengurangi kompleksitas dan membuat desain lebih menarik. Closure dapat membantu kita untuk meminimalisir visual noise dan menyampaikan pesan, memperkuat konsep dalam ruangan yang cukup kecil.

Anda dapat menggunakan prinsip Closure dalam Iconography, dimana Simplicity membantu dalam mengkomunikasikan makna dengan cepat dan jelas.

Closure pada icon dan logo

Contoh beberapa logo yang menerapkan prinsip Closure adalah Apple, Adobe dan FedEx.

Logo Apple, Adobe dan FedEx

Gambar di bawah ini berfungsi hanya karena otak kita mampu mengisi bagian-bagian karakter yang hilang sehingga kita masih bisa membaca pesan.

Contoh Closure pada teks di website

SYMMETRY

Mata lebih memilih penjelasan dengan simetris yang lebih besar. Contoh Symmetry di bawah ini (gambar paling kiri) dianggap sebagai dua segi empat yang saling tumpang tindih, bukan poligon terpisah. Elemen-elemen simetris cenderung dipersepsikan sebagai milik bersama tanpa memandang jaraknya, memberikan perasaan solidaritas dan keteraturan.

Ilustrasi Symmetry

Elemen simetris sederhana, harmonis dan menyenangkan secara visual. Mata kita mencari atribut-atribut simetris ini bersamaan dengan keteraturan dan stabilitas. Untuk alasan ini, Symmetry adalah alat yang berguna untuk mengkomunikasikan informasi dengan cepat dan efisien. Symmetry membantu fokus pada apa yang penting.

Symmetry baik digunakan untuk portfolio, galeri, tampilan produk, listing, navigasi, banner dan halaman-halaman yang memuat konten yang padat.

Contoh desain yang menerapkan Symmetry

Contoh Symmetry yang jelas dengan halaman yang terbelah dua dengan rapi dan menunjukkan gambar yang kira-kira sama di kedua sisi garis, seperti gambar di bawah ini.

Contoh 1 Symmetry pada halaman website

Perhatikan bahwa meskipun gambar pada halaman di bawah ini (sisi kiri dengan sisi kanan) tidak dicerminkan (mirroring), teks di tengah masih menciptakan estetika yang harmonis dan teratur.

Contoh 2 Symmetry pada sebuah halaman website

CONTINUITY

Mata menduga/ mengira melihat kontur sebagai obyek yang berkesinambungan. Kita terutama menganggap contoh Continuity di bawah (gambar paling kiri) sebagai dua garis yang bersilang, bukan sebagai empat garis yang bertemu pada satu titik atau dua sudut kanan yang berbagi titik.

Ilustrasi Continuity

Continuity membantu kita menafsirkan arah dan gerakan melalui komposisi. Ini terjadi saat menyelaraskan elemen dan dapat membantu mata kita bergerak dengan lancar melewati sebuah page, membantu keterbacaan. Prinsip Continuity memperkuat persepsi informasi yang dikelompokkan, menciptakan ketertiban dan membimbing user melalui segmen konten yang berbeda. Gangguan Continuity dapat menandakan akhir bagian yang menarik perhatian dan beralih ke bagian baru pada konten.

Susunan baris dan kolom linear adalah contoh yang baik dari Continuity. Kita dapat menggunakannya dalam menu dan submenu, list, pengaturan produk, carousel, layanan atau progress display.

Contoh desain yang menerapkan Continuity

Amazon menggunakan Continuity untuk mengkomunikasikan bahwa masing-masing produk di atas serupa dan terkait satu sama lain.

Continuity pada suggestion di Amazon.com

Sprig menggunakan Continuity untuk menjelaskan 3 langkah untuk menggunakan aplikasi mereka.

Langkah-langkah proses di Sprig Food

Credit Karma menggunakan Continuity untuk menggambarkan manfaat yang diberikan layanan mereka.

Rangkaian manfaat di Credit Karma

Gambar seseorang yang menunjukkan tatapan kuat dapat memikat user untuk mengikuti garis pandang. Amati bagaimana perhatian diarahkan secara alami ke arah informasi Contact di sebelah kiri oleh tatapan tajam model pada layar.

Contoh Continuity dapat melalui arah pandangan ke obyek utama pada website

COMMON FATE

Terlepas dari seberapa jauh unsur-unsur terpisah atau seberapa berbedanya mereka tampil, jika bergerak atau berubah bersama, usur ini dianggap terkait. Efek ini terjadi bahkan ketika gerakan tersirat, oleh elemen visual lainnya.

Ilustrasi Common Fate

Prinsip Common Fate lebih kuat ketika elemen bergerak disinkronkan; dalam arah yang sama dan pada waktu dan kecepatan yang sama. Hal ini dapat membantu dengan mengelompokkan informasi yang relevan dan menghubungkan aksi dengan hasil. Gangguan gerakan yang sinkron dapat menarik perhatian user dan mengarahkannya ke elemen atau fitur tertentu. Hal ini juga dapat membangun hubungan antara berbagi kelompok atau wilayah.

Kita dapat menggunakan prinsip Common Fate dalam expandable menus, accordions, tool-tips, product sliders, parallax scrollings dan swiping indicators.

Contoh desain yang menerapkan Common Fate

Contoh penggunaan Common Fate seperti gambar expandable menu di bawah ini.

Penggunaan Common Fate pada Expandable Menu

Contoh Common Fate berupa Tool Tips.

Penggunaan Common Fate pada Tool Tips

Anda dapat menggunakan prinsip Gestalt untuk mengelompokkan item terkait secara visual. Prinsip-prinsip Gestalt (terutama Similarity dan Proximity) berguna untuk meletakkan struktur pada tampilan visual, membantu user memotong-motong informasi (Chunking).

Kalkulator yang ditampilkan di bawah ini menggunakan Similarity dan Proximity untuk mengelompokkan tombol yang tampak identik ke dalam unit fungsional.

Aplikasi Calculator

Beberapa penggunaan prinsip Gestalt pada desain Kalkulator di atas adalah:

Penerapan prinsip Similarity dan Proximity pada Aplikasi Calculator
  • Tombol MC / MR / MS / M+ semuanya memiliki warna, bentuk, ukuran dan bahkan awalan “M” yang sama (Similarity), dan selanjutnya masing-masing tombol lebih dekat ke tombol M lain daripada ke bagian lainnya (Proximity). Efeknya adalah mengelompokkan tombol M bersama ke dalam fungsi memori.
  • Similarity juga digunakan untuk mengelompokkan Backspace / CE / C bersama-sama, mengelompokkan number pad bersama dan mengelompokkan operator utama /, *, -, + bersama.

Hirarki

Anda perlu menetapkan hirarki kepentingan di antara item dalam desain. Salah satu jenis hirarki adalah hirarki visual: gunakan variabel visual untuk membuat elemen yang lebih penting muncul.

Hirarki Visual Dalam Desain Web

Mari terlebih dahulu memperhatikan gambar di bawah ini.

Heat map berdasarkan eye tracking pada etalase barang di supermarket

Gambar menunjukkan susunan barang di rak sebuah supermarket. Melalui pengukuran eye tracking heat map, ditemukan bahwa area yang paling banyak diperhatikan pengunjung ketika berbelanja adalah bagian “Harga Produk” (area berwarna merah menandakan paling sering dilihat, kuning cukup sering dilihat dan hijau jarang dilihat).

Berikutnya adalah tracking pada aplikasi Facebook.

Gambaran heat map pada sebuah halaman Facebook
Perbandingan heat map pada akun facebook perempuan (kiri) dan facebook laki-laki (kanan)

Viewer kedua jenis kelamin user Facebook lebih cenderung melihat wajah wanita (ditandai dengan heat map berwarna merah). Pada profil user pria, fokus viewer adalah membaca teks.


Salah satu tujuan utama desain grafis adalah untuk mengkomunikasikan informasi, dan hirarki visual adalah prinsip utama untuk mangatur informasi.

Robin Landa

Untuk memandu viewer, desainer menggunakan hirarki visual, pengaturan semua elemen grafis sesuai dengan penekanan. Penekanan (emphasis) adalah pengaturan elemen-elemen visual yang sesuai dengan kepentingan, memberi penekanan beberapa elemen di atas yang lain, membuat beberapa elemen yang lebih tinggi (dominan) dan mensubordinasikan (level di bawahnya) elemen lainnya. Pada dasarnya desainer menentukan elemen grafis mana yang akan dilihat viewer pertama sekali, kedua, ketiga dan seterusnya.

5 elemen paling dasar, blok penting yang dipergunakan untuk mendukung hirarki yang sederhana maupun kompleks adalah:

  • Size
  • Color
  • Layout
  • Spacing
  • Style

Untuk menciptakan hirarki visual melalui LAYOUT, dapat dilakukan dengan:

  • Pilih satu titik fokus (focal point)
  • Gunakan grid
  • Manfaatkan pola melihat user

1. Pilih Satu Titik Fokus
Tentukan elemen paling penting pada page Anda dan desain di sekitarnya. Bisa berupa gambar besar, sebaris salam atau call-to-action. Tujuannya untuk mengetahui elemen visual yang paling penting akan memungkinkan Anda untuk mengatur elemen-elemen lain untuk dipromosikan, plus membuat memulai dari awal lebih mudah.

2. Gunakan Grid
Menggunakan sistem grid adalah metode cepat dan efisien untuk memastikan layout Anda tetap seimbang. Mendesain dengan grid adalah bantuan sempurna untuk menjaga semua elemen sejalan dan seimbang di semua halaman.

3. Manfaatkan Pola Melihat User
Study tentang eye tracking mengidentifikasi beberapa pola umum dan dapat diprediksi yang diikuti oleh pengguna web. Dengan memanfaatkan pola-pola ini, Anda tidak hanya dapat mengantisipasi di mana user Anda akan melihat, tetapi juga mendorong dan mempromosikan pola semacam ini memberi Anda lebih banyak kontrol. Dua pola yang paling umum adalah F-pattern dan Z-pattern.


Mendesain Untuk Scanning

F-Pattern

F-pattern adalah layout untuk web yang padat teks seperti situs berita, blog atau landing page yang mendalam. F-pattern menggambarkan pola scanning mata user yang paling umum dalam hal mengelompokkan/ membagi konten.

F mengacu pada:

  • Pembaca pertama kali scanning garis horizontal di bagian atas layar, seperti yang dapat dipahami pada budaya membaca dari kiri ke kanan.
  • Selanjutnya user scanning secara vertikal di sisi kiri layar, mencari keyword atau area menarik pada awal paragraf atau subjudul.
  • Ketika pembaca menemukan sesuatu yang mereka sukai, mereka mulai membaca secara normal, membentuk garis-garis horizontal.

Jakob Nielsen dari Nielsen Norman Group melakukan study keterbacaan (readability) berdasarkan 232 user yang scanning ribuan web dan mengurai implikasi F-Pattern:

  • Pengguna jarang akan membaca setiap kata dari teks Anda (pada kenyataannya, hanya 20%).
  • Dua bagian pertama adalah yang paling penting dan harus berisi kait Anda.
  • Cukup satu ide per paragraf, gunakan bullet sebanyak yang mungkin
  • Mulai paragraf dan bagian baru dengan kata kunci yang menarik.

Gambaran pola melihat user utuk F-Pattern ditunjukkan dalam heat map pada gambar di bawah ini.

Tampilan heat map yang menunjukkan pola F-Pattern

Proses membaca pada F-Pattern diilustrasikan seperti gambar di bawah ini.

Layout yang menerapkan F-Pattern

F-Pattern sangat membantu untuk web yang ingin menambahkan iklan atau call to action dengan cara yang tidak membanjiri area konten. Ingatlah bahwa konten selalu menjadi raja, sidebar ada untuk membuat user terlibat lebih dalam.

Seperti halnya semua pola, F-Pattern lebih pada pedoman (dibanding template), karena F-Pattern dapat terasa membosankan setelah baris atas “F”. Seperti yang akan Anda lihat di bawah, Kickstarter menambahkan beberapa widget (ditata secara horizontal) untuk menjaga desain tetap menarik secara visual di luar 1000 piksel pertama.

Contoh F-Pattern: Website Kickstarter

Z-Pattern

Ketika konten lebih lapang (setidaknya lebih luas/ leluasa/ longgar pengaturannya), pandangan user biasanya akan mengikuti pola seperti huruf Z. Z-Pattern berlaku untuk hampir semua interface web karena memenuhi persyaratan iti sebuah web yaitu hirarki, branding dan call to action.

Z-pattern sempurna untuk interface dimana Simplicity (kesederhanaan) adalah prioritas dan call to action adalah target akhir utama. Singkatnya, F-pattern mengatur konten, Z-pattern menekankan pada ajakan bertindak (call to action).

Pola pada Z-pattern, pembaca:

  • Pertama scanning garis horizontal di bagian atas halaman, apakah karena menu bar atau karena kebiasaan membaca kiri ke kanan dari bagian atas.
  • Ketika mata mencapai ujung akhir, langsung mengarahkan pandangan ke bawah bagian kiri (berdasarkan kebiasaan membaca), dan
  • Mengulangi pencarian horizontal di bagian bawah page.
Layout yang menerapkan Z-Pattern

Keterangan:

  • Background — Pisahkan background untuk menjaga pandangan user dalam framework Anda.
  • Point #1 — Lokasi utama untuk logo.
  • Point #2 — Menambahkan call to action yang berwarna untuk membantu memandu user sepanjang Z-pattern.
  • Center of Page – Featured Image Slider di tengah halaman akan memisahkan bagian atas dan bawah dan memandu mata sepanjang jalur Z.
  • Point #3 — Menambahkan ikon dimulai dari sini dan bergerak sepanjang sumbu bawah yang dapat memandu user untuk call to cation di Point #4.
  • Point #4 — Garis finis, tempat yang ideal untuk call to action utama.

Contoh penerapan Z-Pattern:

Website Evernote menunjukkan call to action di akhir

Mengontrol Desain Anda

Mari memperhatikan desain di bawah ini:

Perbandingan posisi bayi pada dua desain website

Anda akan melihat heat map pada gambar di atas adalah untuk halaman yang sama, satu-satunya pembeda adalah garis mata bayi pada gambar. Di sebelah kiri, bayi menatap ke arah Anda, dan heat map paling banyak adalah pada wajah bayi. Di sebelah kaka, bayi sedang melihat ke headline web, yang mengarahkan mata kita dari wajahnya ke headline dan konten.

Manusia secara otomatis ingin melihat di mana manusia lain mencari. Dengan menggeser pandangan bayi, kita kemudian mengambil kendali atas pandangan user dan mengarahkannya ke nilai/konten utama yang kita ingin dibaca user.


Referensi



58 thoughts on “Layout [1]

  1. Nama : Clarita Butarbutar
    NIM : 11419067
    Rancangan layout menjadi acuan kerja dalam pembuatan interfaces dan juga pengisian konten. Rancangan layout yang baik memberikan kemudahan bagi user mengakses website, mudah menemukan informasi yang dicari dan juga membantu menyelesaikan pekerjanannya.
    Prinsip Grouping Gestalt adalah cara otak manusia bekerja dimana kita melihat seluruh gambar dan mendefinisikan seluruh bentuk lebih cepat dan lebih mudah daripada melihat atau memperhatikan perubahan detail.
    Ada 7 prinsip Gestalt yaitu:
    1. Proximility, elemen yang lebih dekat satu sama lain lebih cenderung dikelompokkan bersama.
    2. Common Region, elemen elemen yang ditempatkan dalam wilayah yang sama dianggap dikelompokkan.Prinsip common region menyatukan banyak elemen yang berbeda.
    3. Similarity, elemen yang berbagi karakteristik visual yang sama dianggap lebih terkait dari yang tidak sama karakteristik visualnya. Similarity memiliki 2 fungsi yaitu untuk grouping dan jga membuat kontras sebagai titik fokus.
    4. Closure, mata cenderung mempersiapkan sosok yang tertutup dan lengkap bahkan ketika ada garis-garis yang hilang.Biasanya digunkan dalam Ikon dan Logo.Tujuannya adalah agar tidak terlalu banyak gangguan visual dalam sebuah design.
    5. Symmetry, elemen-elemen simetris cenderung dipresepsikan sebagai milik bersama tanpa memandang jaraknya, memberikan solidaritas dan keteraturan.Baik digunkan dalam portofolio, galeri tampilan produk dll.
    6. Continuity, Kita melihat kontur sebagai obyek yang berkesinambungan. Continuity membantu kita menafsirkan arah dan gerakan melalui sebuah komposisi. Biasanya digunakan dalam list produk , pengaturan produk dan informasi layanan.
    7. Common fate, terlepas dari beberapa jauh unsur-unsur terpisah atau seberapa berbedanya mereka tampil, jika bergerak dan beruabh bersama unsur ini dianggap terkait.
    Hirarki
    Salah satu jenis Hirarki adalah hirarki visual. Hirarki visual adalah prinsip utama yang bisa kita gunakan untuk mengatur informasi. Hirarki visual dapat ditunjukan dengan Size, Color , Layout, Spacing dan Style
    Layout
    Yang perlu diperhatikan :
    – Pilih titik fokus
    – Gunakan Grid
    – Manfaatkan pola user melihhat informasi (F-Pattern dan Z-pattern)

  2. Nama : Santo L Harianja
    Nim : 11419027
    Kelas : 42 TRPL 1

    Layout 1
    .
    .
    .
    Layout adalah tata letak dari suatu elemen desain yang di tempatkan dalam sebuah bidang menggunakan sebuah media yang sebelumnya sudah di konsep terlebih dahulu.
    Dalam membuat layout yang baik banyak hal yang harus diperhatikan yaitu grouping and hierarchy, whitespace, dan alignment and grids.Dalam grouping and hierarchy, prinsip yang digunakan adalah gestalt.
    Adapun yang menjadi bagian gestalt adalah:
    1.Proximity
    => Elemen yang lebih dekat satu sama lain lebih cenderung dikelompokkan bersama
    2.Common Region
    => Elemen elemen yang ditempatkan dalam wilayah yang sama dianggap dikelompokkan.Prinsip common region menyatukan banyak elemen yang berbeda.
    3.Similarity
    =>Elemen yang berbagi karakteristik visual yang sama dianggap lebih terkait dari yang tidak sama karakteristik visualnya.
    4.Closure
    => Mata cenderung mempersiapkan sosok yang tertutup dan lengkap bahkan ketika ada garis-garis yang hilang.Biasanya digunkan dalam Ikon dan Logo.Tujuannya adalah agar tidak terlalu banyak gangguan visual dalam sebuah design.
    5.Symmetry
    => Elemen-Elemen simetris cenderung dipresepsikan sebagai milik bersama tanpa memandang jaraknya, memberikan solidaritas dan keteraturan.Baik digunkan dalam portofolio, galeri tampilan produk dll.
    6. Continuity
    => Kita melihat kontur sebagai obyek yang berkesinambungan. Continuity membantu kita menafsirkan arah dan gerakan melalui sebuah komposisi.Biasanya digunkan dalam list produk , pengaturan produk dan informasi layanan.
    7. Common fate
    => Terlepas dari beberapa jauh unsur-unsur terpisah atau seberapa berbedanya mereka tampil, jika bergerak dan beruabh bersama unsur ini dianggap terkait.

    Hirarki
    salah satu jenis Hirarki adalah hirarki visual. Hirarki visual adalah prinsip utama yang bisa kita gunakan unutk mengatur informasi.
    Hirarki visual dapat ditunjukan dengan Size, Color , Layout, Spacing dan Style

    Layout
    => Yang perlu diperhatikan :
    – Pilih titik fokus
    – Gunakan Grid
    – Manfaatkan pola user melihhat informasi (F-Pattern dan Z-pattern)

    F-pattern oleh jacob Nielsen
    – User jarang membaca setiap kata dari teks
    – Dua bagian pertama adalah yang paling penting dan harus berisi kait anda
    – Cukup satu ide per paragraf , Gunakan bullet sebanyak mungkin
    – Mulai paragraf dengan kata kunci yang menarik.

    Z-pattern
    – Ketika konten Setidaknya lebih luas pengturannya , Pandangan user biasanya akan mengikuti pola seperti huruf Z.
    – Simplicity merupakan prioritas dan call to action target akhir utama.
    – Scanning garis horizontal dibagian atas halaman.
    – ketika mata mencapai ujung akhir mata akan berpindah kebagian kiri
    – dan mengulangi pencarian secara horizontal di bagian bawah page.

  3. Nama : Gahasa Timothius B.P Purba
    NIM : 11419048
    Prodi : 42TRPL2

    Sebelum membuat rancangan pada website / aplikasi dan mengimplementasikannya kita harus memastikan layout website/aplikasi telah disusun dengan memperhatikan aspek aspek seperti accessibility, information scent, efficiency, dll
    Lancangan layout merupakan acuan kerja dalam pembuatan user interface dan rancangan konten.

    Prinsip gestalt meneliti fenomena soal bagaimana cara orang melihat desain yang kita buat.
    Menurut prinsip gestalt, cara otak manusia bekerja yaitu dengan melihat seluruh gambar dan mendefinisikan seluruh bentuk lebih cepat dan lebih mudah daripada melihat atau memperhatikan perubahan detail

    Ada 7 prinsip gestalt untuk grouping :
    1. Proximity = Elemen yang lebih dekat satu sama lain, cenderung dikelompokkan bersama
    2. Common Region = Elemen yang ditempatkan dalam wilayah yang sama, dianggap dikelompokkan
    3. Similarity = Elemen yang berbagi karakteristik visual yang sama dianggap lebih terkait dari yang tidak sama karakteristik visualnya
    4. Closure = Mata cenderung mempersepsikan sosok yang tertutup dan lengkap, bahkan ketika ada garis-garis yang hilang
    5. Symmetry = Elemen-elemen simetris cenderung dipersepsikan sebagai milik bersama tanpa memandang jaraknya, memberikan perasaan solidaritas dan keteraturan
    6. Continuity = Mata menduga/mengira melihatkontur sebagai objek yang berkesinambungan. Continuity membantu kita menafsirkan arah dan gerakan melalui komposisi
    7. Common Fate = Terlepas dari seberapa jauh unsur-unsur terpisah atau seberapa berbedanya mereka tampil, jika bergerak atau berubah bersama, unsur ini dianggap terkait

    Prinsip prinsip ini dapat digunakan untuk mengelompokka item yang terkait secara visaul dan juga membantu user dalam chunking. Sehingga memudahkan user membaca dan mengakses informasi yang ditampilkan karena lebih terstruktur.

    Salah satu tujuan utama desain grafis adalah untuk mengkomunikasikan informasi. Dan hierarki visual adalah prinsip utama yang bisa gunakan untuk mengatur informasi.

    Hierarki visual dapat ditunjukkan dengan:
    1. Size
    2. Color
    3. Layout
    4. Spacing
    5. Style

    Beberapa aspek untuk melakukan hierarki pada layout :
    1. Pilih satu titik fokus (focal point)
    2. Gunakan grid
    3. Manfaatkan pola user melihat informasi: F-pattern dan Z-pattern

    Pola F-Pattern :
    Layout untuk web yang padat teks (situs berita,blog,dll)
    -Scanning garis horizontal di bagian atas layar
    -Scanning secara vertikal di sisi kiri layar
    -Menemukan sesuatu yang menarik, lalu mulai membaca secara normal

    Pola Z-Pattern :
    Layout untuk web yang sedikit teks
    -Scanning garis horizontal di bagian atas halaman
    -Ketika mata mencapai ujung akhir, langsung mengarahkan pandangan ke bawah bagian kiri
    -Mengulangi pencarian secara horizontal di bagian bawah page

  4. Nama : Evelin Sinurat
    NIM : 11419056
    Kelas : 42 TRPL 2

    Layout 1
    A. Prinsip Gestalt
    Prinsip Gestalt adalah cara bagaimana kita bekerja untuk melihat seluruh gambar dan mendefenisikan bentuk lebih cepat, dibandingkan dengan memperhatikan perubahan detail.
    Prinsip Gestalt dapat berguna untuk meletakkan struktur pada tampilan visual, membantu user dalam Chunking.

    1. Proximity adalah elemen yang lebih dekat satu sama lain, cenderung akan dikelompokkan bersama.
    2. Common Region adalah elemen-elemen yang terdapat dalam wilayah yang sama akan dikelompokkan.
    3. Similarity adalah elemen yang berbagi karakteristik visual yang sama dianggap lebih terkait, daripada karakteristik visualnya yang tidak sama. Atau dengan kata lain, mengatur dan mengklasifikasikan obyek dalam satu grup, dan menghubungkannya dalam fungsi tertentu.
    4. Closure adalah ketika mata dapat mempersepsikan sosok yang tertutup dan secara lengkap, walaupun ada garis yang hilang.
    5. Symmetry adalah elemen-elemen simetris cenderung dipersepsikan sebagai milik bersama tanpa memandang jarak, serta memberikan perasaan solidaritas dan keteraturan. Atau dengan kata lain sederhana, harmonis, serta menyenangkan secara visual, dan stabil.
    6. Continuity adalah mata menduga garis sebagai obyek yang berkesinambungan, serta membantu kita menafsirkan arah dan gerakan melalui komposisi.
    7. Common Fate adalah terlepas dari seberapa jauh unsur-unsur terpisah, jika mereka saling bergerak/berubah secara bersama, maka unsur tersebut dianggap terkait.

    B. Hirarki
    Hirarki visual:
    1. Size
    2. Color
    3. Layout
    4. Spacing
    5. Style

    Cara membuat Hirarki Visual Layout:
    1. Memilih satu titik fokus (focal point)
    2. Menggunakan grid (memastikan layout tetap seimbang pada semua halaman)
    3. Memanfaatkan pola user melihat informasi.

    F-Pattern yaitu layout dengan teks yang padat
    Z-Pattern yaitu ketika konten setidaknya lebih longgar pengaturannya

  5. Nama : Ervina Sipahutar
    NIM : 11419066
    Kelas : 42 TRPL 2

    Prinsip Gestalt adalah meneliti fenomena bagaimana cara seseorang melihat desain yang kita buat.

    Ada 7 prinsip Gestalt yaitu:
    1. Proximity : elemen yang lebih dekat satu sama lain lebih cenderung dikelompokkan bersama.
    2. Common Region : elemen yang ditempatkan pada wilayah yang sama dianggap dikelompokkan sehingga dikatakan menyatukan banyak elemen yang berbeda.
    3. Similarity : elemen yang berbagi karakteristik visual yang sama dianggap lebih terkait dari yang tidak sama karakteristik visualnya.
    4. Closure : mata cenderung mempersiapkan sosok yang tertutup dan lengkap bahkan ketika ada garis-garis yang hilang.
    5. Symmetry : elemen-elemen simetris cenderung dipresepsikan sebagai milik bersama tanpa memandang jaraknya, memberikan solidaritas dan keteraturan.
    6. Continuity : mata menduga melihat kontur sebagai obyek yang berkesinambungan. Continuity membantu kita menafsirkan arah dan gerakan melalui sebuah komposisi.
    7. Common Fate : seberapa jauh unsur-unsur terpisah atau seberapa berbedanya mereka tampil.

    Hirarki visual:
    Beberapa aspek untuk melakukan hirarki pada layout :
    – Pilih satu titik fokus
    – Gunakan grid
    – Manfaatkan pola user melihat informasi, yaitu F-pattern dan Z-pattern

    Pola F-Pattern :
    – Scanning garis horizontal di bagian atas layar
    – Scanning secara vertikal di sisi kiri layar
    – Menemukan sesuatu yang menarik, lalu mulai membaca secara normal

    Pola Z-Pattern :
    – Scanning garis horizontal di bagian atas halaman
    – Ketika mata mencapai ujung akhir, langsung mengarahkan pandangan ke bawah bagian kiri
    – Mengulangi pencarian secara horizontal di bagian bawah page

  6. Nama : Naldo Tua Samosir
    NIM : 11419024
    Kelas : 42 TRPL 1

    Komponen-komponen layout antara lain grouping, hirarki, whitespace, alignment and grids.

    1. Grouping
    7 prinsip grouping gestalt :
    1.Proximity
    Elemen yang lebih dekat satu sama lain lebih cenderung dikelompokkan bersama
    2.Common Fate
    Elemen-elemen yang ditempatkan dalam wilayah yang sama dianggap dikelompokkan bisa menggunakan garis,warna maupun shadow
    3.Similarity
    Elemen yang berbagi karakteristik visual yang sama dianggap lebih terkait dari yang tidak sama karakteristik visualnya
    4.Closure
    Mata cenderung mempersepsikan sosok yang tertutup dan lengkap,bahkan ketika ada garis –garis yang hilang
    5.Symmetry
    Elemen –elemen simetris cenderung dipersepsikan sebagai milik bersama tanpa memandang jaraknya , memberikan perasaan solidaritas dan keteraturan
    6.Continuity
    Mata menduga/mengira melihat kontur sebagai obyek yang berkesinambungan. Continuity membantu kita menafsirkan arah dan gerakan melalui komposisi
    7.Common Fate
    Terlepas dari seberapa jauh unsur-unsur terpisah atau seberapa berbedanya mereka tampil,jika bergerak atau berubah bersama,unsur ini dianggap terkait.

    2. Hirarki
    Beberapa aspek dalam melakukan hierarki:
    -Pilih satu titik fokus
    -Gunakan grid
    -Manfaatkan pola user melihat informasi:F-pattern dan Z-pattren
    Pola F-Pattern :
    – Scanning garis horizontal di bagian atas layar
    – Scanning secara vertikal di sisi kiri layar
    – Menemukan sesuatu yang menarik, lalu mulai membaca secara normal.

    Pola Z-Pattern :
    – Scanning garis horizontal di bagian atas halaman
    – Ketika mata mencapai ujung akhir, langsung mengarahkan pandangan ke bawah bagian kiri
    – Mengulangi pencarian secara horizontal di bagian bawah page.

  7. Nama : Hilman Sijabat
    NIM : 11419025
    Kelas : 42 TRPL1

    Layout 1
    Rancangan layout menjadi acuan kerja dalam pembuatan UI dan ditujukan untuk memudahkan user mengakses website.
    Komponen layout antara lain grouping, hirarki, whitespace, alignment dan grids.
    1. Grouping
    Menggunakan prinsip grouping Gestalt, dimana berbicara soal persepsi visual.
    7 bagian prinsip Gestalt
    1. Proximity = elemen yang lebih dekat satu sama lain lebih cenderung dikelompokkan bersama.
    2. Common Region = elemen-elemen yang ditempatkan dalam wilayah yang sama dianggap dikelompokkan.
    3. Similarity = elemen yang berbagi karakteristik visual yang sama dianggap lebih terkait dari yang tidak sama karakteristik visualnya.
    4. Closure = ketika user melihat, mata user cenderung mempersepsikan sosok yang tertutup dan lengkap, bahkan ketika ada garis-garis yang hilang
    5. Symmetry = elemen-elemen simetris cenderung dipersepsikan sebagai milik bersama tanpa memandang jaraknya.
    6. Continuity = mata menduga/melihat garis sebagai objek yang berkesinambungan.
    7. Common Fate = terlepas dari seberapa jauh unsur-unsur terpisah atau seberapa berbedanya mereka tampil, jika bergerak bersama, unsur ini dianggap terkait.

    Prinsip Gestalt dapat digunakan untuk mengelompokkan item terkait secara visual. Prinsip ini juga berguna untuk meletakkan struktur pada tampilan visual dan membantu user dalam chunking.

    2. Hirarki
    Hirarki visual digunakan untuk membuat elemen yang lebih penting muncul.
    Beberapa aspek dalam melakukan hierarki:
    1. Pilih satu titik fokus
    2. Gunakan grid
    3. Manfaatkan pola user melihat informasi, yakni dengan pola F-pattern dan Z-pattern

    F-pattern layout untuk web yang padat
    Z-pattern layout untuk web yang kontennya tidak terlalu banyak.

    Pola F-Pattern :
    Layout untuk web yang memiliki banyak teks (situs berita, blog, dll)
    – Scanning garis horizontal di bagian atas layar
    – Scanning secara vertikal di sisi kiri layar
    – Menemukan sesuatu yang menarik, lalu mulai membaca secara normal

    Pola Z-Pattern :
    Layout untuk web yang memiliki sedikit teks
    – Scanning garis horizontal di bagian atas halaman
    – Ketika mata mencapai ujung akhir, langsung mengarahkan pandangan ke bawah bagian kiri
    – Mengulangi pencarian secara horizontal di bagian bawah page

  8. Nama : Ivanowsky Fernandes Habeahan
    Nim : 11419030
    Kelas : 42 TRPL 1

    Layout adalah tata letak dari suatu elemen desain yang di tempatkan dalam sebuah bidang menggunakan sebuah media yang sebelumnya sudah di konsep terlebih dahulu.
    Dalam membuat layout yang baik banyak hal yang harus diperhatikan yaitu grouping and hierarchy, whitespace, dan alignment and grids.Dalam grouping and hierarchy, prinsip yang digunakan adalah gestalt.
    1.Proximity
    => Elemen yang lebih dekat satu sama lain lebih cenderung dikelompokkan bersama
    2.Common Region
    => Elemen elemen yang ditempatkan dalam wilayah yang sama dianggap dikelompokkan.Prinsip common region menyatukan banyak elemen yang berbeda.
    3.Similarity
    =>Elemen yang berbagi karakteristik visual yang sama dianggap lebih terkait dari yang tidak sama karakteristik visualnya.
    4.C losure
    => Mata cenderung mempersiapkan sosok yang tertutup dan lengkap bahkan ketika ada garis-garis yang hilang.Biasanya digunkan dalam Ikon dan Logo.Tujuannya adalah agar tidak terlalu banyak gangguan visual dalam sebuah design.
    5.Symmetry
    => Elemen-Elemen simetris cenderung dipresepsikan sebagai milik bersama tanpa memandang jaraknya, memberikan solidaritas dan keteraturan.Baik digunkan dalam portofolio, galeri tampilan produk dll.
    6. Continuity
    => Kita melihat kontur sebagai obyek yang berkesinambungan. Continuity membantu kita menafsirkan arah dan gerakan melalui sebuah komposisi.Biasanya digunkan dalam list produk , pengaturan produk dan informasi layanan.
    7. Common fate
    => Terlepas dari beberapa jauh unsur-unsur terpisah atau seberapa berbedanya mereka tampil, jika bergerak dan beruabh bersama unsur ini dianggap terkait.

    Hirarki
    salah satu jenis Hirarki adalah hirarki visual. Hirarki visual adalah prinsip utama yang bisa kita gunakan unutk mengatur informasi.
    Hirarki visual dapat ditunjukan dengan Size, Color , Layout, Spacing dan Style

    Layout
    => Yang perlu diperhatikan :
    – Pilih titik fokus
    – Gunakan Grid
    – Manfaatkan pola user melihhat informasi (F-Pattern dan Z-pattern)

    F-pattern oleh jacob Nielsen
    – User jarang membaca setiap kata dari teks
    – Dua bagian pertama adalah yang paling penting dan harus berisi kait anda
    – Cukup satu ide per paragraf , Gunakan bullet sebanyak mungkin
    – Mulai paragraf dengan kata kunci yang menarik.

    Z-pattern
    – Ketika konten Setidaknya lebih luas pengturannya , Pandangan user biasanya akan mengikuti pola seperti huruf Z.
    – Simplicity merupakan prioritas dan call to action target akhir utama.
    – Scanning garis horizontal dibagian atas halaman.
    – ketika mata mencapai ujung akhir mata akan berpindah kebagian kiri
    – dan mengulangi pencarian secara horizontal di bagian bawah page.

  9. Nama : Mikhael Hutapea
    NIM : 11419037
    Kelas : 42TRPL 2

    Layout 1

    Rancangan layout menjadi acuan kerja dalam pembuatan UI dan ditujukan untuk memudahkan user mengakses website.
    Komponen layout antara lain grouping, hirarki, whitespace, alignment dan grids.
    1. Grouping
    Menggunakan prinsip grouping Gestalt, dimana berbicara soal persepsi visual.
    7 bagian prinsip Gestalt
    1. Proximity = elemen yang lebih dekat satu sama lain lebih cenderung dikelompokkan bersama.
    2. Common Region = elemen-elemen yang ditempatkan dalam wilayah yang sama dianggap dikelompokkan.
    3. Similarity = elemen yang berbagi karakteristik visual yang sama dianggap lebih terkait dari yang tidak sama karakteristik visualnya.
    4. Closure = ketika user melihat, mata user cenderung mempersepsikan sosok yang tertutup dan lengkap, bahkan ketika ada garis-garis yang hilang
    5. Symmetry = elemen-elemen simetris cenderung dipersepsikan sebagai milik bersama tanpa memandang jaraknya.
    6. Continuity = mata menduga/melihat garis sebagai objek yang berkesinambungan.
    7. Common Fate = terlepas dari seberapa jauh unsur-unsur terpisah atau seberapa berbedanya mereka tampil, jika bergerak bersama, unsur ini dianggap terkait.

    Prinsip Gestalt dapat digunakan untuk mengelompokkan item terkait secara visual. Prinsip ini juga berguna untuk meletakkan struktur pada tampilan visual dan membantu user dalam chunking.

    2. Hirarki
    Hirarki visual digunakan untuk membuat elemen yang lebih penting muncul.
    Beberapa aspek dalam melakukan hierarki:
    1. Pilih satu titik fokus
    2. Gunakan grid
    3. Manfaatkan pola user melihat informasi, yakni dengan pola F-pattern dan Z-pattern

    F-pattern layout untuk web yang padat
    Z-pattern layout untuk web yang kontennya tidak terlalu banyak.

  10. Nama : Suryanto Ray S Panjaitan
    NIM : 11419031
    Kelas : 42 TRPL 1

    1.Pengenalan

    Rancangan layout menjadi acuan kerja dalam pembuatan user interface dalam implementasi pembangunan aplikasi dan pengisian konten.Rancangan layout yang baik ditujukan untuk memberikan kemudahan bagi user untuk mengakses website (dapat dengan cepat menemukan informasi yang dicari,mudah dicari cara penggunaannya & membantu menyelesaikan pekerjaannya)

    2.Grouping dan hirarki
    Grouping
    Prinsip Grouping gestalt
    – Prinsip gestalt berusaha menggambarkan bagaimana org” memahami elemen visual ketika kondisi tertentu berlaku.Hal yang sama terjadi pada setiap desain web yang dibuat :Desain dianggap secara keseluruhan pada pandangan pertama
    – Gunakan prinsip Gestalt untuk mengelompokkan item terkait secara visual
    – prinsip-prinsip Gestalt berguna untuk meletakkan struktur pada tampilan visual,membantu user dalam Chunking

    7 prinsip grouping gestalt :

    1.Proximity
    Elemen yang lebih dekat satu sama lain lebih cenderung dikelompokkan bersama
    Fungsi untuk mengelompokkan informasi yang serupa,mengatur konten dan menghilangkan kekacauan dipengaturan layoutnya

    2.Common Fate
    Elemen-elemen yang ditempatkan dalam wilayah yang sama dianggap dikelompokkan bisa menggunakan garis,warna maupun shadow
    Baik digunakan pada navigasi daftar galeri dan banner,body text, dan panigation
    3.Similarity
    Elemen yang berbagi karakteristik visual yang sama dianggap lebih terkait dari yang tidak sama karakteristik visualnya,mengatur dan mengklasifikasikan objek dalam satu grup, menggunakan warna,ukuran,bentuk,dimensi,dan lain sebagainya
    Baik digunakan pada pola card;ruang persegi panjang yang didefenisikan dengan baik dengan informasi yang berbeda dijadikan sebagai satu

    4.Closure
    Mata cenderung mempersepsikan sosok yang tertutup dan lengkap,bahkan ketika ada garis –garis yang hilang

    5.Symmetry
    Elemen –elemen simetris cenderung dipersepsikan sebagai milik bersama tanpa memandang jaraknya , memberikan perasaan solidaritas dan keteraturan
    Baik digunakan untuk portfolio,galeri,tampilan produk,listing,navigasi,banner dan halaman-halaman yang memuat konten yang padat

    6.Continuity
    -mata menduga/mengira melihat kontur sebagai obyek yang berkesinambungan
    -continuity membantu kita menafsirkan arah dan gerakan melalui komposisi
    -baik digunakan pada menu dan submenu,list,pengaturan produk,carousel.layanan,atau progress display

    7.Common Fate
    -Terlepas dari seberapa jauh unsur-unsur terpisah atau seberapa berbedanya mereka tampil,jika bergerak atau berubah bersama,unsur ini dianggap terkait
    -Baik digunakan expandable menus,accordions,tool-tips,tips,product sliders,parallax scrollings dan swiping indicators

    HIRARKI
    Perlu menerapkan hirarki kepentingan di antara item dalam desain.
    hirarki visual : digunakan untuk membuat elemen yang lebih penting muncul.
    Informasi yang penting dapat dibedakan dengan cara membedakan warna background atau menempatkan informasi tersebut dibagian atas supaya langsung dilihat oleh user.
    HIRARKI

    Jenis hirarki
    1.Hirarki visual
    Variable visual penekanan, hirarki visual dapat ditentukan oleh:
    -size
    -color
    -layout
    -spacing
    -style

  11. Nama : Meyliza Veronica Siregar
    NIM : 11419058

    1. Grouping
    Prinsip Gestalt adalah meneliti fenomena soal bagaimana cara orang melihat desain yang dibuat.
    7 prinsip Getstalt :
    – Proximity : Elemen yang lebih dekat satu sama lain lebih cenderung dikelompokkan bersama.
    – Common fate : Seberapa jauh unsur-unsur terpisah atau seberapa berbeda mereka ditampilkan, jika bergerak atau berubah bersama unsur ini dianggap terkait.
    – Similarity : Elemen dengan berbagai karakteristik visual yang sama dianggap lebih terkait dari yang tidak sama karakteristik visualnya.
    – Continuity : Melihat kontur sebagai obyek yang berkesinambungan, menafsirkan arah dan gerakkan melalui komposisi (membantu keterbacaan).
    – Closure : Mata cenderung mempersepsikan sosok yang tertutup dan lengkap bahkan ketika ada garis-garis yang hilang.
    – Common region : Elemen-elemen yang ditempatkan dalam wilayah yang sama dianggap dikelompokkan
    – Symmetry: Elemen- elemen simetris cenderung dipersepsikan sebagai milik bersama tanpa memandang jaraknya, memberikan perasaan solidaritas dan keteraturan.
    2. Hirarki
    Salah satu jenis hirarki adalah hirarki visual. Hirarki visual adalah prinsip utama yang bisa kita gunakan untuk mengatur informasi dan untuk membuat elemen yang lebih penting muncul Hirarki visual ditujukan pada size, color, Layout, Spacing, dan Style.
    F- Pattern Layanan untuk yang berteks padat, seperti web berita Dengan pola :
    1. Scanning garis horizontal di bagian layar atas
    2. Scanning secara vertikal di sisi kiri layar 3. Menemukan sesuatu yang menarik, lalu membaca secara normal.
    Z-Pattern
    1. Scanning garis horizontal di bagian atas layar
    2. Ketika mata mencapai ujung akhir, langsung mengarahkan pandangan ke bawah bagian kiri
    3. Mengulangi pencarian secara horizontal di bagian bawah page.

  12. Nama: Maristella Sitanggang
    NIM: 11419064
    Kelas: 42TRPL 2

    Untuk dapat memahami prinsip layout seorang desainer perlu merancang layout yang baik, seperti:
    – Memperhatikan prinsip pengelompokan (grouping) untuk kemudahan scanning informasi.
    – Penyusunan hirarki elemen dan informasi dalam desain, sehingga user dapat melihat informasi dari yang paling penting ke yang kurang penting secara berurut.
    – Mengatur dan memperhatikan whitespace, juga mengatur aligment agar susunan elemen dalam desain tidak crowded (tidak tertata atau padat menumpuk).
    – Menggunakan sistem grid dalam membuat layout untuk dapat mengakomodir ketiga hal sebelumnya.

    Rancangan layout yang baik memberikan kemudahan bagi user mengakses website, mudah menemukan informasi yang dicari dan juga membantu menyelesaikan pekerjaannya.
    Prinsip Gestalt adalah meneliti fenomena soal bagaimana cara orang melihat desain yang kita buat, jadi prinsip Gestalt berusaha menggambarkan bagaimana orang-orang memahami bagaimana elemen visual ketika kondisi tertentu berlaku.
    Ada 7 prinsip Gestalt yaitu:
    1. Proximility
    Elemen yang lebih dekat satu sama lain lebih cenderung dikelompokkan bersama.
    2. Common Region
    Elemen elemen yang ditempatkan dalam wilayah yang sama dianggap dikelompokkan sehingga dapat dikatakan menyatukan banyak elemen yang berbeda.
    3. Similarity
    Elemen yang berbagi karakteristik visual yang sama dianggap lebih terkait dari yang tidak sama karakteristik visualnya.
    4. Closure
    Mata cenderung mempersiapkan sosok yang tertutup dan lengkap bahkan ketika ada garis-garis yang hilang.
    5. Symmetry
    Elemen-elemen simetris cenderung dipresepsikan sebagai milik bersama tanpa memandang jaraknya, memberikan solidaritas dan keteraturan.
    6. Continuity
    Kita melihat kontur sebagai obyek yang berkesinambungan. Continuity membantu kita menafsirkan arah dan gerakan melalui sebuah komposisi. Biasanya digunakan dalam list produk , pengaturan produk dan informasi layanan.
    7. Common fate
    Terlepas dari beberapa jauh unsur-unsur terpisah atau seberapa berbedanya mereka tampil, jika bergerak dan beruabh bersama unsur ini dianggap terkait.

    Hirarki
    Salah satu jenis Hirarki adalah hirarki visual. Hirarki visual adalah prinsip utama yang bisa kita gunakan untuk mengatur informasi. Hirarki visual dapat ditunjukan dengan Size, Color , Layout, Spacing dan Style

    Beberapa aspek untuk melakukan hirarki pada layout :
    – Pilih satu titik fokus
    – Gunakan grid
    – Manfaatkan pola user melihat informasi, yaitu F-pattern dan Z-pattern

    Pola F-Pattern :
    Layout untuk web yang memiliki banyak teks (situs berita, blog, dll)
    – Scanning garis horizontal di bagian atas layar
    – Scanning secara vertikal di sisi kiri layar
    – Menemukan sesuatu yang menarik, lalu mulai membaca secara normal

    Pola Z-Pattern :
    Layout untuk web yang memiliki sedikit teks
    – Scanning garis horizontal di bagian atas halaman
    – Ketika mata mencapai ujung akhir, langsung mengarahkan pandangan ke bawah bagian kiri
    – Mengulangi pencarian secara horizontal di bagian bawah page

  13. Nama : Tantri H.Silaen
    NIM : 11419059
    Kelas : 42 TRPL 2

    Rancangan layout menjadi acuan kerja dalam pembuatan UI.Rancangan layout
    berfungsi untuk untuk memudahkan user untuk mengakses aplikasi, user dapat
    dengan mudah mendapatkan apa yang diingankan user.
    Terdapat 4 komponen layout:
    1. Grouping
    –>Pengelompokan komponen untuk mempermudah scanning informasi
    2. Hirarki
    –> Penyusunan hirarki mana informasi yang paling penting sampai ke informasi yang kurang penting
    3, Whitespace
    4. Alignment dan Grids

    1.Grouping
    –>memudahkan user mengakses UI atau web.Prinsip-prinsip gestalt berguna
    untuk meletakkan struktur pada tampilan visual, membantu user dalam Chunking.

    Terdapat 7 prinsip-prinsip gestal:
    1.Proximity
    Elemen yang lebih dekat satu sama lain cenderung dikelompokkan bersama.
    2.Common Region
    Elemen-elemen yang ditempatkan dalam wilayah yang sama dianggap dikelompokkan.
    3.Similarity
    Elemen yang berbagi karakterisitik visual yang sama dianggap lebih terkait
    dari yang tidak sama karakterisitik visualnya
    4.Closure
    Mata cenderung mempersepsikan sosok yang tertutup dan lengkap, bahkan ketika
    ada garis-garis yang hilang.
    5.Symetry
    Elemen-elemen simetris cenderung dipersepsikan sebagai milik bersama tanpa
    memandang jaraknya, memberikan perasaan solidaritas dan keteraturan.
    6.Continuity
    -Mata menduga/mengira melihat kontur sebagai obyek yang berkesinambungan.
    -Contuinuity membantu kita menafsirkan arah dan gerakan melalui komposisi.
    7.Common fate
    Seberapa jauh unsur- unsur terpisah/ seberapa berbedanya mereka tampil, jika
    bergerak/ berubah bersama.
    2.Hirarki
    –>Perlu menerapkan hirarki kepentingan di antara item dalam desain.
    Hirarki visual adalah prinsip utama yang bisa kita gunakan untuk mengatur
    informasi. Hirarki visual dapat ditunjsukan dengan Size, Color , Layout, Spacing dan Style.
    Beberapa aspek untuk melakukan hirarki pada layout :
    – Pilih satu titik fokus
    – Gunakan grid
    – Manfaatkan pola user melihat informasi, yaitu F-pattern dan Z-pattern

    Pola F-Pattern :
    Layout untuk web yang memiliki banyak teks (situs berita, blog, dll)
    – Scanning garis horizontal di bagian atas layar
    – Scanning secara vertikal di sisi kiri layar
    – Menemukan sesuatu yang menarik, lalu mulai membaca secara normal

    Pola Z-Pattern :
    Layout untuk web yang memiliki sedikit teks
    – Scanning garis horizontal di bagian atas halaman
    – Ketika mata mencapai ujung akhir, langsung mengarahkan pandangan ke bawah bagian kiri
    – Mengulangi pencarian secara horizontal di bagian bawah page

  14. Nama : Ares J. M. Pardosi
    NIM : 11419062
    Kelas : 42TRPL2

    1. GROUPING
    Prinsip gestalt yaitu
    Meneliti venomena soal bagaimana cara orang melihat desain yang kita buat. prinsip-prinsip gestalt berusaha menggambarkan bagaimana orang-orang memahami elemen visual ketika kondisi tertentu berlaku. ( Bagaimana menciptakan keseluruhan dari potingan-potongan atau bagian-bagian).

    prinsip grouping gestalt
    – cara otak manusia bekerja : kita melihat seluruh gambar dan mendefenisikan seluruh bentuk lebih cepat dan lebih mudah daripada melihat atau memperhatikan perubahan detail.
    – hal yang sama terjadi pada setiap desain web yang di buat: desain dianggap secara keseluruhan pada pandangan pertama.

    Terdapat 7 bagian dari prinsip gestalt yaitu:
    – proximity : elemen yang lebih dekat satu sama lain lebih cenderung dikelompokkan sama
    – commor region : elemen- elemen yang ditempatkan dalam wilayah yang sama dianggap
    dikelompokkan.
    – Similarity : elemen yang berbagi karakteristik visual yang sama dianggap lebih terkait dari yang
    tidak sama karakteristik visualnya.
    – Closure : mata cenderung mempersepsikan sosok yang tertutup dan lengkap
    – Symmetry : elemen simetris cenderung dipersepsikan sebagai milik bersama tanpa memandang
    jaraknya
    – Continuity : mata mengira melihat kontur sebagai obyek yang berkesinambungan
    – Common fate : seberapa jauh unsur- unsur terpisah/ seberapa berbedanya mereka tampil, jika
    bergerak/ berubah bersama.

    2. HIRARKI
    salah satu jenis hirarki adlaah ‘Hiraki visual’ yang digunakan untuk membuat elemen yang lebih penting muncul.
    >> salah satu tujuan utama desain grafis adalah untuk mengkomunikasikan informasi, yang dimana kita dapat menggunakan hirarki visual untuk mengatur informasi.

    Layout pada Hirarki Visual
    – pilih salah satu titik fokus (focal point)
    – Gunakan gird
    – Manfaatkan pola user melihat informasi : F-Pattern dan Z-Pattern.

  15. Nama : Ares J. M. Pardosi
    NIM : 11419062
    Kelas : 42TRPL2

    1. GROUPING
    Prinsip gestalt yaitu :
    Meneliti venomena soal bagaimana cara orang melihat desain yang kita buat. prinsip-prinsip gestalt berusaha menggambarkan bagaimana orang-orang memahami elemen visual ketika kondisi tertentu berlaku. ( Bagaimana menciptakan keseluruhan dari potingan-potongan atau bagian-bagian).

    prinsip grouping gestalt
    – cara otak manusia bekerja : kita melihat seluruh gambar dan mendefenisikan seluruh bentuk lebih cepat dan lebih mudah daripada melihat atau memperhatikan perubahan detail.
    – hal yang sama terjadi pada setiap desain web yang di buat: desain dianggap secara keseluruhan pada pandangan pertama.

    Terdapat 7 bagian dari prinsip gestalt yaitu:
    – proximity : elemen yang lebih dekat satu sama lain lebih cenderung dikelompokkan sama
    – commor region : elemen- elemen yang ditempatkan dalam wilayah yang sama dianggap
    dikelompokkan.
    – Similarity : elemen yang berbagi karakteristik visual yang sama dianggap lebih terkait dari yang
    tidak sama karakteristik visualnya.
    – Closure : mata cenderung mempersepsikan sosok yang tertutup dan lengkap
    – Symmetry : elemen simetris cenderung dipersepsikan sebagai milik bersama tanpa memandang
    jaraknya
    – Continuity : mata mengira melihat kontur sebagai obyek yang berkesinambungan
    – Common fate : seberapa jauh unsur- unsur terpisah/ seberapa berbedanya mereka tampil, jika
    bergerak/ berubah bersama.

    2. HIRARKI
    salah satu jenis hirarki adlaah ‘Hiraki visual’ yang digunakan untuk membuat elemen yang lebih penting muncul.
    >> salah satu tujuan utama desain grafis adalah untuk mengkomunikasikan informasi, yang dimana kita dapat menggunakan hirarki visual untuk mengatur informasi.

    Layout pada Hirarki Visual
    – pilih salah satu titik fokus (focal point)
    – Gunakan gird
    – Manfaatkan pola user melihat informasi : F-Pattern dan Z-Pattern.

  16. Nama:Thumphak Adhitio Aritonang
    NIM:11419035
    Kelas:42 TRPL 1

    Desain yang itu adalah tentang komunikasi.
    Sebuah web yang berfungsi dan menyampaikan informasi dengan baik tetapi gagal menyesuakan dengan brand dan sebuah web yang indah tetapi sala digunakan atau tidak dapat digunakan atau diakses sama saja.Karean user akan meninggalkannya.

    Layout
    Layout yang baik ditujukan untuk kemudahan bagi user dalam penggunaannya.Rancangan layout menjadia acuan kerja dalam pembuatan UI
    Grouping & Hirarki
    Cara orang melihat desain anda sangat memepengaruhi makna yang diambil dari desain tersebut.

    Prinsip Grouping Gestalt
    Hal yang sama terjadi pada setiap desain yang dibuat .Desain dianggap secara kesseluruhan pada pandangan pertama.
    Ada 7Prinsip Grouping Gestalt yaitu:
    1. Proximity ==> Elemen yang lebih dekat satu sama lain, cenderung dikelompokkan bersama
    2. Common Region ==> Elemen yang ditempatkan dalam wilayah yang sama, dianggap dikelompokkan.Prinsip Common Fate lebih kuat ketika elemen bergerak disinkronkan
    3. Similarity ==>Elemen yang berbagi karakteristik visual yang sama dianggap lebih terkait dari yang tidak sama karakteristik visualnya
    4. Closure ==>Mata cenderung mempersepsikan sosok yang tertutup dan lengkap, bahkan ketika ada garis-garis yang hilang
    5. Symmetry ==> Elemen-elemen simetris cenderung dipersepsikan sebagai milik bersama tanpa memandang jaraknya, memberikan perasaan solidaritas dan keteraturan
    6. Continuity ==>Mata menduga/mengira melihatkontur sebagai objek yang berkesinambungan. Continuity membantu kita menafsirkan arah dan gerakan melalui komposisi
    7. Common Fate ==> Terlepas dari seberapa jauh unsur-unsur terpisah atau seberapa berbedanya mereka tampil, jika bergerak atau berubah bersama, unsur ini dianggap terkait.

    HIRARKI
    Kita perlu menerapkan hirarki kepentingan dari item-item di dalam desain
    Hirarki visual dapat di tunjukkan dengan:
    -Size
    -color
    -Layout
    -Spacing
    Style
    Hirarki Visual digunakan untuk membuat elemen yang lebih penting muncul.
    Hirarki Visual Layout dalam memanfaatkan pola user melihat informasi memiliki 2 pola yaitu :
    1.F-Pattern : scanning garis horizontal dibagian atas layar, seperti membaca dari kiri kekanan (konten padat seperti blog).
    2.Z-Pattern : digunakan saat konten lebih luas/ leluasa, pandangan user mengikuti pola seperti huruf Z. Z-pattern sempurna untuk interface dimana Simplicity (kesederhanaan) adalah prioritas dan call to action adalah target akhir utam

  17. Nama : Mei Pane
    NIM : 11419006
    Kelas : 42 TRPL 1

    LAYOUT 1
    Layout akan mudah digunakan user untuk mengakses dan mudah mencari apa yang diinginkan oleh user pada aplikasi:
    1.Grouping
    Prinsip grouping gestalt adalah hal yang terjadi secara bersamaan pada desain web akan dianggap secara keseluruhan pada pandangan pertama. Dengan adanya grouping ini akan membuat user mudah mengakses desain website yang dibuat.
    Ada 7 bagian prinsip dari Gestalt yaitu:
    1.Proximity => Elemen-elemen yang saling berdekatan akan dikelompokkan bersama
    2.Common Region => Elemen- elemen yang ditempatkan di wilayah yang sama akan dikelompokkan
    3.Similarity => Elemen-elemen yang berbagi karakteristik visual yang sama akan dianggap lebih terkait dibandingkan elemen yang tidak sama karakteristik visualnya.
    4.Closure => Mata akan cenderung dipersepsikan sosok yang lengkap dan tertutup ketika ada garis yang hilang
    5.Symmetry => Elemen-elemen simetris akan cenderung dipersepsikan sebagai milik bersama tanpa memandang jarak,memberi perasaan solidaritas dan keteraturan.
    6.Continuity => Mata akan menduga/mengira melihat kontur sebagai objek yang berkesinambungan, kontinuity membantu kita menafsirkan arah dan gerakan dari komposisi
    7.Common Fate => Jika elemen terlepas dari seberapa jauh unsur-unsur terpisah, jika bergerak akan dianggap terkait

    2.Hirarki
    Salah satu jenis hirarki adalah hirarki visual yang digunakan untuk membuat elemen yang lebih penting muncul.
    Pola user dalam melihat informasi pada hirarki visaul dapat dimanfaatkan dengan F-pattern dan Z-pattern.
    F-pattern => scanning garis horizontal dan vertikal, menemukan sesuatu yang menarik
    Z-pattern => kontensetidaknya lebih luas, leluasa dan longgar pengaturannya yang membuat pandangan user seperti membentuk huruf Z.

  18. Nama: Fretty L M Silalahi
    NIM: 11419057
    Kelas: 42TRPL 2

    Untuk dapat memahami prinsip layout seorang desainer perlu merancang layout yang baik, seperti:
    – Memperhatikan prinsip pengelompokan (grouping) untuk kemudahan scanning informasi.
    – Penyusunan hirarki elemen dan informasi dalam desain, sehingga user dapat melihat informasi dari yang paling penting ke yang kurang penting secara berurut.
    – Mengatur dan memperhatikan whitespace, juga mengatur aligment agar susunan elemen dalam desain tidak crowded (tidak tertata atau padat menumpuk).
    – Menggunakan sistem grid dalam membuat layout untuk dapat mengakomodir ketiga hal sebelumnya.

    Rancangan layout yang baik memberikan kemudahan bagi user mengakses website, mudah menemukan informasi yang dicari dan juga membantu menyelesaikan pekerjaannya.
    Prinsip Gestalt adalah meneliti fenomena soal bagaimana cara orang melihat desain yang kita buat, jadi prinsip Gestalt berusaha menggambarkan bagaimana orang-orang memahami bagaimana elemen visual ketika kondisi tertentu berlaku.
    Ada 7 prinsip Gestalt yaitu:
    1. Proximility
    Elemen yang lebih dekat satu sama lain lebih cenderung dikelompokkan bersama.
    2. Common Region
    Elemen elemen yang ditempatkan dalam wilayah yang sama dianggap dikelompokkan sehingga dapat dikatakan menyatukan banyak elemen yang berbeda.
    3. Similarity
    Elemen yang berbagi karakteristik visual yang sama dianggap lebih terkait dari yang tidak sama karakteristik visualnya.
    4. Closure
    Mata cenderung mempersiapkan sosok yang tertutup dan lengkap bahkan ketika ada garis-garis yang hilang.
    5. Symmetry
    Elemen-elemen simetris cenderung dipresepsikan sebagai milik bersama tanpa memandang jaraknya, memberikan solidaritas dan keteraturan.
    6. Continuity
    Kita melihat kontur sebagai obyek yang berkesinambungan. Continuity membantu kita menafsirkan arah dan gerakan melalui sebuah komposisi. Biasanya digunakan dalam list produk , pengaturan produk dan informasi layanan.
    7. Common fate
    Terlepas dari beberapa jauh unsur-unsur terpisah atau seberapa berbedanya mereka tampil, jika bergerak dan beruabh bersama unsur ini dianggap terkait.

    Hirarki
    Salah satu jenis Hirarki adalah hirarki visual. Hirarki visual adalah prinsip utama yang bisa kita gunakan untuk mengatur informasi. Hirarki visual dapat ditunjukan dengan Size, Color , Layout, Spacing dan Style

    Beberapa aspek untuk melakukan hirarki pada layout :
    – Pilih satu titik fokus
    – Gunakan grid
    – Manfaatkan pola user melihat informasi, yaitu F-pattern dan Z-pattern

    Pola F-Pattern :
    Layout untuk web yang memiliki banyak teks (situs berita, blog, dll)
    – Scanning garis horizontal di bagian atas layar
    – Scanning secara vertikal di sisi kiri layar
    – Menemukan sesuatu yang menarik, lalu mulai membaca secara normal

    Pola Z-Pattern :
    Layout untuk web yang memiliki sedikit teks
    – Scanning garis horizontal di bagian atas halaman
    – Ketika mata mencapai ujung akhir, langsung mengarahkan pandangan ke bawah bagian kiri
    – Mengulangi pencarian secara horizontal di bagian bawah page

  19. Nama : Lastri Rohani Nababan
    NIM : 11419060
    Kelas : 42 TRPL 2

    Grouping dan Hirarki
    Prinsip Gestalt merupakan meneliti fenomena bagaimana seseorang melihat desain yang kita buat.
    Prinsip Grouping Gestalt, yaitu :
    1. Proximity adalah elemen yang lebih dekat satu sama lain lebih cenderung dikelompokkan Bersama.
    2. Common Region adalah elemen-elemen yang ditempatkan dalam wilayah yang sama dianggap dikelompokkan.
    3. Similarity adalah elemen yang berbagai karakteristik visual yang sama dianggap lebih terkait dari yang tidak sama karakteristik visualnya.
    4. Closure, mata yang cenderung mempersepsikan sosok yang tertutup dan lengkap, bahkan ketika ada garis-garis yang hilang.
    5. Symmetry adalah elemen-elemen simetris cenderung dipersepsikan sebagai milik bersama tanpa memandang jaraknya, memberikan persaan solidaritas dan keteraturan.
    6. Continuity, membantu kita untuk menafsirkan arah dan gerak melalui komposisi.
    7. Common Fate, seberapa jauh unsur-unsur terpisah atau seberapa berbedanya mereka tampil, jika bergerak atau berubah bersama yang unsur ini dianggap terkait.

    a. Grouping
    Menggunakan prinsip gestalt untuk mengelompokkan item terkait secara visual.
    Prinsip Gestalt berguna untuk meletakkan struktur pada tampilan visual, membantu user dalam Chunking.
    b. Hirarki
    – Hirarki Visual, yaitu :
    1. Size
    2. Color
    3. Layout
    4. Spacing
    5. Style
    Manfaat pola User melihat informasi, yaitu :
    1. Pola F-pattern, layout untuk web yang memiliki banyak teks
    – Scanning garis horizontal dibagian atas layer
    – Scanning secara vertical di sisi kiri layer
    – Menemukan sesuatu yang menarik
    2. Pola Z-Pattern, layout untuk web yang memiliki sedikit teks
    – Scanning garis horizontal dibagian atas halaman
    – Mengulang pencarian secara horizontal

  20. Nama : Febryanti Melati
    NIM : 11419061
    Kelas : 42TRPL2

    Desainer perlu merancang layout yang baik.
    Layout yang baik ditujukan untuk memudahkan user
    untuk mengakses aplikasi.

    1. Grouping adalah
    ==> Prinsip grouping gestalt adalah hal yang terjadi secara bersamaan pada desain web akan dianggap secara keseluruhan pada pandangan pertama.
    Menggunakan prinsip grouping Gestalt, dimana berbicara soal persepsi visual.
    – Proximity -> Elemen yang lebih dekat satu sama lain, cenderung dikelompokkan bersama
    – Common Region -> Elemen yang ditempatkan dalam wilayah yang sama, dengan kata lain itu dikelompokkan
    – Similarity -> Elemen yang berbagi karakteristik visual yang sama dianggap lebih terkait dari yang tidak sama karakteristik visualnya
    – Closure -> Cenderung mempersepsikan sosok yang tertutup dan lengkap, bahkan ketika ada garis-garis yang hilang
    – Symmetry -> Elemen-elemen simetris cenderung dipersepsikan sebagai milik bersama tanpa memandang jaraknya, memberikan perasaan solidaritas dan keteraturan
    – Continuity -> Mata menduga/mengira melihatkontur sebagai objek yang berkesinambungan. Continuity membantu kita menafsirkan arah dan gerakan melalui komposisi
    – Common Fate -> Terlepas dari seberapa jauh unsur-unsur terpisah atau seberapa berbedanya mereka tampil, jika bergerak atau berubah bersama, unsur ini dianggap terkait

    2. Hirarki
    ==> Digunakan untuk membuat elemen yang lebih penting menjadi muncul.
    Aspek untuk melakukan hirarki pada layout :
    – Pilih satu titik fokus(fokal point)
    – Gunakan grid
    – Manfaatkan pola user melihat informasi, yaitu F-pattern dan Z-pattern

    F- Pattern
    Layanan untuk yang berteks padat, seperti web berita Dengan pola :
    1. Scanning garis horizontal di bagian layar atas, seperti membaca dari kiri ke kanan
    2. Scanning secara vertikal di sisi kiri layar
    3. Menemukan sesuatu yang menarik, lalu membaca secara normal.
    Z-Pattern
    1. Scanning garis horizontal di bagian atas halaman
    2. Ketika mata mencapai ujung akhir, langsung mengarahkan pandangan ke bawah bagian kiri
    3. Mengulangi pencarian secara horizontal di bagian bawah page.

  21. Nama : Darwin Sibarani
    Nim : 11419029
    Kelas : 42 TRPL 1

    Aspek yang perlu diperhatikan untuk membuat rancangan pada website adalah accessibility, efficiency, reliability, mapping.

    Ada 4 komponen dalam layout :
    1.Grouping
    2.Hirarki
    3.Whitespace
    4.Alignment and Grids

    1.Aspek Grouping
    Prinsip gestalt merupakan bagaimana orang – orang memahami elemen visual terhadapa
    desain interface kita
    Ada 7 bagian dari prinsip – prinsip gestalt pada bagian grouping :
    1.proximity
    adalah Elemen yang lebih dekat satu sama lain cenderung dikelompokkan bersama
    2.commor region
    adalah Elemen- elemen yang ditempatkan dalam wilayah yang sama dianggap dikelompokkan.
    3.Similarity
    adalah Elemen yang berbagi karakteristik visual yang sama dianggap lebih terkait dari yang
    tidak sama karakteristik visualnya.
    4.Closure
    adalah Mata cenderung mempersepsikan sosok yang tertutup dan lengkap
    5.Symmetry
    adalah Elemen – elemen simetris cenderung dipersepsikan sebagai milik bersama tanpa memandang jaraknya
    6.Continuity
    adalah Mata menduga melihat kontur sebagai obyek yang berkesinambungan
    7.Common fate
    adalah Seberapa jauh unsur- unsur terpisah atau seberapa berbedanya mereka tampil, jika
    bergerak/ berubah bersama.

    2.Hirarki
    Menetapkan hirarki kepentingan di antara item dalam desain
    -Hirarki Visual
    adalah Digunakan untuk membuat elemen yang lebih penting muncul
    Hirarki visual dapat ditunjukkan berupa :
    1.Size
    2.Color
    3.Layout
    4.Spacing
    5.Style
    Aspek – Aspek untuk melakukan hierarki pada layout :
    1. Pilih satu titik fokus (focal point)
    2. Gunakan grid
    3. Manfaatkan pola user melihat informasi: F-pattern dan Z-pattern

  22. Nama: Josua SImbolon
    Nim : 11419032
    Kelas : D4TRPL 1

    Layout adalah tata letak dari suatu elemen desain yang di tempatkan dalam sebuah bidang menggunakan sebuah media yang sebelumnya sudah di konsep terlebih dahulu. Tujuan utama layout adalah menampilkan elemen gambar dan teks agar menjadi komunikatif sehingga memudahkan pengguna menerima informasi yang disajikan.
    Dalam membuat layout yang baik banyak hal yang harus diperhatikan yaitu:
    grouping and hierarchy, whitespace, dan alignment and grids.
    Adapun yang menjadi bagian gestalt ialah :
    1. Proximity
    Elemen yang lebih dekat satu sama lain lebih cenderung dikelompokkan bersama.
    2. Common fate
    Seberapa jauh unsur-unsur terpisah atau seberapa berbeda mereka ditampilkan, jika bergerak atau berubah bersama unsur ini dianggap terkait.
    3. Similarity

    Elemen dengan berbagai karakteristik visual yang sama dianggap lebih terkait dari yang tidak sama karakteristik visualnya.
    4. Continuity
    Melihat kontur sebagai obyek yang berkesinambungan, menafsirkan arah dan gerakkan melalui komposisi (membantu keterbacaan).
    5. Closure
    Mata cenderung mempersepsikan sosok yang tertutup dan lengkap bahkan ketika ada garis-garis yang hilang.
    6. Common region

    Elemen-elemen yang ditempatkan dalam wilayah yang sama dianggap dikelompokkan
    7. Symmetry
    Elemen- elemen simetris cenderung dipersepsikan sebagai milik bersama tanpa memandang jaraknya, memberikan perasaan solidaritas dan keteraturan.

  23. SAHAT HUTAURUK
    11419010 / 42TRPL1

    4 komponen layout :
    grouping, hirarki, whitespace, alignment dan grids.

    — Grouping
    Prinsip grouping gestalt adalah hal yang sama terjadi pada setiap desain web yang dibuat (desain dianggap secara keseluruhan pada pandangan pertama). Prinsip gestalt berguna untuk meletakkan struktur pada tampilan visual dan membantu user dalam chunking.

    — Hirarki

    Hirarki Visual digunakan untuk membuat elemen yang lebih penting muncul.
    Hirarki Visual : Layout dalam memanfaatkan pola user melihat informasi memiliki 2 pola yaitu :
    — F-Pattern : scanning garis horizontal dibagian atas layar, seperti membaca dari kiri kekanan
    (konten padat seperti blog).
    — Z-Pattern : digunakan saat konten lebih luas/ leluasa, pandangan user mengikuti pola seperti
    huruf Z.

  24. Nama : Daniel A.C Simamora
    Nim : 11419001
    Kelas : 42 TRPL 1

    Dalam membuat rancangan pada website kita harus memperhatikan bahwa layout disusun dengan aspek accesibility,efficiency,reliability,mapping,dll fungsi rancangan layout yang baik ditujukan untuk memberikan kemudahan bagi user dalam menggunakan website.

    Terdapat 4 komponen dalam layout, yaitu :
    1.Grouping
    2.Hirarki
    3.Whitespace
    4.Alignment and Grids

    1.Aspek Grouping
    Prinsip gestalt merupakan bagaimana orang – orang memahami elemen visual terhadapa
    desain interface kita
    Ada 7 bagian dari prinsip – prinsip gestalt pada bagian grouping :
    1.proximity
    =>Elemen yang lebih dekat satu sama lain cenderung dikelompokkan bersama
    2.commor region
    =>Elemen- elemen yang ditempatkan dalam wilayah yang sama dianggap dikelompokkan.
    3.Similarity
    =>Elemen yang berbagi karakteristik visual yang sama dianggap lebih terkait dari yang
    tidak sama karakteristik visualnya.
    4.Closure
    =>Mata cenderung mempersepsikan sosok yang tertutup dan lengkap
    5.Symmetry
    =>Elemen – elemen simetris cenderung dipersepsikan sebagai milik bersama tanpa memandang jaraknya
    6.Continuity
    =>Mata menduga melihat kontur sebagai obyek yang berkesinambungan
    7.Common fate
    =>Seberapa jauh unsur- unsur terpisah atau seberapa berbedanya mereka tampil, jika
    bergerak/ berubah bersama.

    2.Hirarki
    Menetapkan hirarki kepentingan di antara item dalam desain
    *Hirarki Visual
    => Digunakan untuk membuat elemen yang lebih penting muncul
    Hirarki visual dapat ditunjukkan berupa :
    1.Size
    2.Color
    3.Layout
    4.Spacing
    5.Style
    Beberapa aspek untuk melakukan hierarki pada layout, yaitu :
    1. Pilih satu titik fokus (focal point)
    2. Gunakan grid
    3. Manfaatkan pola user melihat informasi: F-pattern dan Z-pattern

  25. Oriza Sitanggang_11419018
    Empat komponen Layout: grouping, hirarki, whitespace, alignment dan grids.
    Prinsip Gestalt adalah cara pandang manusia yang melihat sekilas di awal, tanpa memperhatikan beberapa bagian yang lain dengan teliti.
    Ada 7 bagian dari prinsip gestalt yaitu:
    – proximity: elemen yang lebih dekat satu sama lain lebih cenderung dikelompokkan sama
    – commor region: elemen yang ditempatkan dalam wilayah yang sama dianggap
    dikelompokkan.
    – Similarity: elemen yang berbagi karakteristik visual yang sama dianggap lebih terkait dari yang
    tidak sama karakteristik visualnya.
    – Closure: mata cenderung mempersepsikan sosok yang tertutup dan lengkap
    – Symmetry: elemen simetris cenderung dipersepsikan sebagai milik bersama tanpa memandang
    jaraknya
    – Continuity: mata mengira melihat kontur sebagai obyek yang berkesinambungan
    – Common fate : seberapa jauh unsur- unsur terpisah/ seberapa berbedanya mereka tampil.

    F-Pattern: scanning garis horizontal dibagian atas layar, seperti membaca dari kiri kekanan

    Z-Pattern: digunakan saat konten lebih luas/ leluasa, pandangan user mengikuti pola seperti huruf Z.

  26. Nama : Zico Andreas Aritonang
    NIM : 11419049
    Kelas : 42TRPL2

    A. Grouping & Hirarki

    Prinsip grouping gestalt adalah hal yang sama terjadi pada setiap desain web yang dibuat
    (desain dianggap secara keseluruhan pada pandangan pertama)

    ◾ Proximility
    Elemen yang lebih dekat satu sama lain lebih cenderung dikelompokkan bersama.
    ◾ Common Region
    Elemen elemen yang ditempatkan dalam wilayah yang sama dianggap dikelompokkan sehingga dapat dikatakan menyatukan banyak elemen yang berbeda.
    ◾ Similarity
    Elemen yang berbagi karakteristik visual yang sama dianggap lebih terkait dari yang tidak sama karakteristik visualnya.
    ◾ Closure
    Mata cenderung mempersiapkan sosok yang tertutup dan lengkap bahkan ketika ada garis-garis yang hilang.
    ◾ Symmetry
    Elemen-elemen simetris cenderung dipresepsikan sebagai milik bersama tanpa memandang jaraknya, memberikan solidaritas dan keteraturan.
    ◾ Continuity
    Kita melihat kontur sebagai obyek yang berkesinambungan. Continuity membantu kita menafsirkan arah dan gerakan melalui sebuah komposisi. Biasanya digunakan dalam list produk , pengaturan produk dan informasi layanan.
    ◾ Common fate
    Terlepas dari beberapa jauh unsur-unsur terpisah atau seberapa berbedanya mereka tampil, jika bergerak dan beruabh bersama unsur ini dianggap terkait.

    B. Hirarki
    Salah satu jenis Hirarki adalah hirarki visual.
    Hirarki visual adalah prinsip utama yang bisa kita gunakan untuk mengatur informasi dan untuk membuat
    elemen yang lebih penting muncul.
    Hirarki visual dapat ditunjukan dengan Size, Color , Layout, Spacing dan Style.

  27. Nama : Lilis Marito Pardosi
    Nim : 11419015
    Kelas : 42 TRPL 1

    Dalam membuat rancangan pada website kita harus memperhatikan bahwa layout disusun dengan aspek accesibility,efficiency,reliability,mapping,dll fungsi rancangan layout yang baik ditujukan untuk memberikan kemudahan bagi user dalam menggunakan website. Ada 4 komponen layout yaitu: grouping, hirarki, whitespace, alignment dan grids.
    1. Grouping
    Prinsip grouping gestalt adalah hal yang sama terjadi pada setiap desain web yang dibuat (desain dianggap secara keseluruhan pada pandangan pertama). Prinsip gestalt berguna untuk meletakkan struktur pada tampilan visual dan membantu user dalam chunking. Ada 7 bagian dari prinsip gestalt yaitu:
    – Proximity = elemen yang lebih dekat satu sama lain lebih cenderung dikelompokkan bersama.
    – Common Region = elemen-elemen yang ditempatkan dalam wilayah yang sama dianggap dikelompokkan.
    – Similarity = elemen yang berbagi karakteristik visual yang sama dianggap lebih terkait dari yang tidak sama karakteristik visualnya.
    – Closure = ketika user melihat, mata user cenderung mempersepsikan sosok yang tertutup dan lengkap, bahkan ketika ada garis-garis yang hilang
    – Symmetry = elemen-elemen simetris cenderung dipersepsikan sebagai milik bersama tanpa memandang jaraknya.
    – Continuity = mata menduga/melihat garis sebagai objek yang berkesinambungan.
    – Common Fate = terlepas dari seberapa jauh unsur-unsur terpisah atau seberapa berbedanya mereka tampil, jika bergerak bersama, unsur ini dianggap terkait.

    2. Hirarki
    Perlu menerapkan hirarki kepentingan di antara item dalam desain. hirarki visual : digunakan untuk membuat elemen yang lebih penting muncul. Informasi yang penting dapat dibedakan dengan cara membedakan warna background atau menempatkan informasi tersebut dibagian atas supaya langsung dilihat oleh user.

    Beberapa aspek untuk melakukan hirarki pada layout :
    – Pilih satu titik fokus
    – Gunakan grid
    – Manfaatkan pola user melihat informasi, yaitu F-pattern dan Z-pattern

  28. Nama : Hepniwer Nur Aisah Purba
    NIM : 11419019
    Kelas : 42 TRPL 1

    Untuk dapat memahami prinsip layout seorang desainer perlu merancang layout yang baik, seperti:
    Layout yang baik ditujukan untuk memudahkan user untuk mengakses aplikasi, user dapat dengan mudah mendapatkan apa yang diinginkan user.
    Untuk dapat memahami prinsip layout seorang desainer perlu merancang layout yang baik, seperti:
    1. Grouping -> Pengelompokan komponen untuk mempermudah scanning informasi
    GROUPING
    – Gunakan prinsip Gestalt untuk mengelompokkan item terkait secara visual
    – prinsip-prinsip Gestalt berguna untuk meletakkan struktur pada tampilan visual, membantu user dalam chunking.
    Prinsip Gestalt
    Prinsip Gestalt adalah aturan yang menjelaskan bagaimana mata manusia membuat persepsi elemen visual. Mata manusia cenderung melihat komponen keseluruhan terlebih dahulu baru kemudian melihat komponen yang detail.
    Ada 7 prinsip gestalt untuk grouping :
    a. Proximity
    Elemen yang lebih dekat satu sama lain, cenderung dikelompokkan bersama
    b. Common Region
    Elemen yang ditempatkan dalam wilayah yang sama, dianggap dikelompokkan
    c. Similarity
    Elemen yang berbagi karakteristik visual yang sama dianggap lebih terkait dari yang tidak sama karakteristik visualnya
    d. Closure
    Mata cenderung mempersepsikan sosok yang tertutup dan lengkap, bahkan ketika ada garis-garis yang hilang
    e. Symmetry
    Elemen-elemen simetris cenderung dipersepsikan sebagai milik bersama tanpa memandang jaraknya, memberikan perasaan solidaritas dan keteraturan
    f. Continuity
    Mata menduga/mengira melihatkontur sebagai objek yang berkesinambungan. Continuity membantu kita menafsirkan arah dan gerakan melalui komposisi
    g. Common Fate
    Terlepas dari seberapa jauh unsur-unsur terpisah atau seberapa berbedanya mereka tampil, jika bergerak atau berubah bersama, unsur ini dianggap terkait
    2. Hirarki -> Penyusunan hirarki mana informasi yang paling penting sampai ke informasi yang kurang penting
    3. Whitespace
    4. Alignment dan Grids
    F- Pattern
    Layanan untuk yang berteks padat, seperti web berita Dengan pola :
    1. Scanning garis horizontal di bagian layar atas, seperti membaca dari kiri ke kanan
    2. Scanning secara vertikal di sisi kiri layar
    3. Menemukan sesuatu yang menarik, lalu membaca secara normal.
    Z-Pattern
    1. Scanning garis horizontal di bagian atas halaman
    2. Ketika mata mencapai ujung akhir, langsung mengarahkan pandangan ke bawah bagian kiri 3. Mengulangi pencarian secara horizontal di bagian bawah page.

  29. Nama : Kevin Yoyada Tambunan
    NIM : 11419033
    KELAS : 42 TRPL 1

    Layout yang baik ditujukan untuk memudahkan user untuk mengakses aplikasi, user dapat dengan mudah mendapatkan apa yang diingankan user.
    4 komponen Layout
    1. Grouping
    -> Pengelompokan komponen untuk mempermudah scanning informasi
    2. Hirarki
    -> Penyusunan hirarki mana informasi yang paling penting sampai ke informasi yang kurang penting
    3, Whitespace
    4. Alignment dan Grids

    GROUPING
    – Gunakan prinsip Gestalt untuk mengelompokkan item terkait secara visual
    – prinsip-prinsip Gestalt berguna untuk meletakkan struktur pada tampilan visual, membantu user dalam chunking.

    Prinsip Gestalt :
    Prinsip Gestalt adalah aturan yang menjelaskan bagaimana mata manusia membuat persepsi elemen visual. Mata manusia cenderung melihat komponen keseluruhan terlebih dahulu baru kemudian melihat komponen yang detail.

    7 bagian Prinsip Gestalt :
    1. Proximity
    -> Element yang lebih dekat satu dengan yang lain lebih cenderung dikelompokkan bersama. Item yang terkait harus dikelompokkan atau didekatkan, item yang tidak terkait harus dijauhkan.
    Prinsip ini menekankan bahwa :
    Mata manusia mempersepsikan hubungan antara unsur-unsur visual bahwa hal-hal yang berdekatan satu sama lain dianggap lebih terkait/ satu kelompok daripada hal-hal yang terpisah.

    2. Common Fate
    -> terlepas dari seberapa jauh unsur-unsur terpisah atau seberapa berbedanya mereka tampil, jika bergerak atau berubah bersama, unsur ini dianggap terkait.
    Prinsip ini menekankan bahwa :
    Mata manusia cenderung melihat unsur-unsur yang bergerak bersama-sama sebagai suatu kelompok yang lebih mirip satu sama lain daripada unsur yang diam atau bergerak ke arah yang berbeda.

    3. Continuity
    -> Mata menduga/mengira melihat garis sebagai objek yang berkesinambungan. Continuity membantu kita menafsirkan arah dan gerakan melalui komposisi. Memperkuat persepsi terhadap informasi yang dikelompokkan.
    Prinsip ini menekankan bahwa :
    Mata manusia mengikuti garis, kurva atau urutan bentuk untuk menentukan hubungan antar elemen desain

    4. Similarity
    -> Element yang berbagi karakteristik visual yang sama dianggap lebih terkait dari yang tidak sama karakteristik visualnya.
    Prinsip ini menekankan bahwa :
    Mata manusia cenderung untuk membangun hubungan antara unsur-unsur yang sama dalam sebuah desain. Kesamaan dapat dicapai dengan menggunakan elemen dasar seperti bentuk, warna, dan ukuran.

    5. Closure
    -> Mata cenderung mempersepsikan sosok yang tertutup dan lengkap, bahkan ketika ada garis-garis yang hilang. prinsip ini biasanya digunakan dalam icon, walaupun icon nya tidak lengkap user dapat mengerti apa fungsi dari icon tersebut.
    Prinsip ini menekankan bahwa :
    mata manusia memiliki kecenderungan untuk menyelesaikan bentuk yang tidak lengkap kemudian merasionalisasi secara keseluruhan.

    6. Common region
    -> Element yang ditempatkan dalam wilayah yang sama dianggap dikelompokkan. Element yang satu region(wilayah) dipasahkan dengan element yang lain menggunakan garis, shadow, atau shape.

    7. Symmetry
    -> Element yang simetris cenderung dipersepsikan sebagai milik bersama tanpa memandang jaraknya, memberikan perasaan solidaritas dan keteraturan. Prinsip ini menciptakan ke harmonisan dan keteratuan (nilai estetika) dari setiap element.
    Prinsip ini menekankan bahwa :
    Setiap elemen desain dianggap seimbang satu dengan yang lain dalam kelompok yang sama.

    HIRARKI
    -> Perlu menerapkan hirarki kepentingan di antara item dalam desain.
    hirarki visual : digunakan untuk membuat elemen yang lebih penting muncul.
    Informasi yang penting dapat dibedakan dengan cara membedakan warna background atau menempatkan informasi tersebut dibagian atas supaya langsung dilihat oleh user.

  30. Nama : Kevin Johanes Pakpahan
    NIM : 11419042
    Kelas : 42 TRPL 2

    Rancangan layout diantaranya :

    Terdapat 4 komponen Layout

    -. Grouping
    -. Hirarki
    -. Whitespace
    -. Alignment dan Grids

    7 bagian dari prinsip Gestalt:

    1. Proximility: Elemen yang lebih dekat satu sama lain lebih cenderung dikelompokkan bersama.
    2. Common Region: Elemen elemen yang ditempatkan dalam wilayah yang sama dianggap dikelompokkan sehingga dapat dikatakan menyatukan banyak elemen yang berbeda.
    3. Similarity: Elemen yang berbagi karakteristik visual yang sama dianggap lebih terkait dari yang tidak sama karakteristik visualnya.
    4. Closure: Mata cenderung mempersiapkan sosok yang tertutup dan lengkap bahkan ketika ada garis-garis yang hilang.
    5. Symmetry: Elemen-elemen simetris cenderung dipresepsikan sebagai milik bersama tanpa memandang jaraknya, memberikan solidaritas dan keteraturan.
    6. Continuity: Continuity membantu kita menafsirkan arah dan gerakan melalui sebuah komposisi.
    7. Common Fate: Terlepas dari beberapa jauh unsur-unsur terpisah atau seberapa berbedanya mereka tampil, jika bergerak dan beruabh bersama unsur ini dianggap terkait.

  31. Nama : Agus Rokyanto S
    NIM : 11419045
    Kelas : 42TRPL2

    Layout adalah tata letak elemen desain, di tempatkan dalam sebuah bidang menggunakan sebuah media yang sebelumnya sudah di konsep terlebih dahulu.

    4 komponen Layout:
    1. Grouping
    2. Hirarki
    3. Whitespace
    4. Alignment dan grids.

    7 prinsip Gestalt yaitu:
    1. Proximility : Elemen yang berdekatan cenderung dikelompokkan bersama.
    2. Common Region : Common region elemen yang ada di satu tempat dianggap sebagai kelompok.
    3. Similarity : Similarity berfungsi untuk grouping dan membuat kontras sebagai titik fokus.
    4. Closure : Bertujuan untuk tidak terlalu banyak gangguan visual dalam sebuah design.
    5. Symmetry : Dipresepsikan sebagai milik bersama, memberikan solidaritas dan keteraturan.
    6. Continuity : Continuity membantu kita menafsirkan arah dan gerakan melalui sebuah komposisi.
    7. Common fate : Jika suatu unsur bergerak bersama, maka mereka sekelompok.

    Pola F-Pattern :
    1. Scanning garis horizontal di bagian atas layar
    2. Scanning secara vertikal di sisi kiri layar
    3. Menemukan sesuatu yang menarik, lalu mulai membaca secara normal

    Pola Z-Pattern :
    1. Scanning garis horizontal di bagian atas halaman
    2. Ketika mata mencapai ujung akhir, langsung mengarahkan pandangan ke bawah bagian kiri
    3. Mengulangi pencarian secara horizontal di bagian bawah page

  32. Nama : Nathan F L Tobing
    NIM : 11419003
    Kelas : 42 TRPL 1

    Berikut prinsip gestalt :
    1. Proximity
    elemen yang berdekatan lebih cenderung dikelompokkan sama
    2. Commor Region
    elemen yang terletak pada wilayah yang sama danggap dikelompokkan.
    3. Similarity
    elemen yang berbagi karakteristik visual yang sama dianggap lebih terkait dari yang tidak sama karakteristik visualnya.
    4. Symmetry
    elemen simetris cenderung dipersepsikan dimiliki tanpa memandang jaraknya
    5. Closure
    mata cenderung mempersepsikan sosok yang tertutup dan lengkap, bahkan disaat ada garis-garis yang hilang
    6. Continuity
    mata mengira melihat kontur sebagai obyek yang berkesinambungan
    7. Common fate
    seberapa jauh unsur- unsur terpisah atau seberapa berbedanya mereka tampil jika bergerak atau berubah bersama.

    Pola F-Pattern
    Layout untuk web yang padat teks
    1. Scanning garis horizontal di bagian atas layar
    2. Scanning secara vertikal di sisi kiri layar
    3. Menemukan sesuatu yang menarik, lalu mulai membaca secara normal

    Pola Z-Pattern
    Layout untuk web yang sedikit teks
    1. Scanning garis horizontal di bagian atas halaman
    2. Ketika mata mencapai ujung akhir, langsung mengarahkan pandangan ke bawah bagian kiri
    3. Mengulangi pencarian secara horizontal di bagian bawah page

  33. Nama : Denny Abraham Sinaga
    NIM : 11419036
    Kelas : 42TRPL2

    Desain adalah tentang komunikasi sehingga desain yang baik adalah desain yang dapat mengelola komunikasi dengan baik.
    Prinsip Grouping Gestalt: bentuk kesatuan komponen-komponen yang terdapat dalam sebuah halaman.
    7 Prinsip Gestalt :
    1. Proximity : Elemen yang berdekatan yang saling relevan cenderung dikelompokkan bersama.
    2. Common Region : Elemen -elemen dalam satu wilayah adalah sebuah kelompok.
    3. Similarity : Karakteristik visual elemen-elemen yang sama dianggap lebih terkait dari yang tidak sama karakteristik visualnya.
    4. Closure : Suatu elemen dianggap sebagai suatu yang utuh dalam isi yang tidak lengkap.
    5. Symmetry : Suatu elemen dipandang menjadi sebagai bagian dari kelompok yang sama dan menciptakan stabilitas dan keteraturan.
    6. Continuity : Suatu elemen cenderung dipandang saling terkait atau dikelompokkan apabila dipandang untuk berpindah dari satu elemen ke elemen lain.
    7. Common Fate : Elemen-elemen cenderung dilihat bergerak ke arah yang sama dan menjadi sebuah bagian dari kelompok yang sama.

    Hirarki visual : ukuran, warna, tata letak, spasi, gaya.
    Dalam hirarki visual > layout, pola F dalam scanning informasi :
    1. Scanning garis horizontal di bagian atas layar,
    2. Scanning secara vertikal di sisi kiri layar,
    3. Menemukan sesuatu yang menarik dan membaca secara normal.

    Z-Pattern dalam scanning informasi :
    1. Scanning garis horizontal di bagian atas halaman.
    2. Ketika mencapai ujung akhir, mata bergerak menuju ke bawah bagian kiri.
    3. Mengulangi pencarian secara horizontal di bagian bawah halaman.

  34. Nama : Daniel Naibaho
    NIM : 11419047
    Prodi : 42TRPL2

    Ada beberapa komponen layout yaitu: Grouping dan hirarki, Whitespace, Alignment dan Grids.

    1. Grouping
    Ada 7 prinsip Gestalt pada Grouping :
    -Proximity = elemen yang lebih dekat satu sama lain lebih cenderung dikelompokkan bersama
    -Common Region = elemen-elemen yang ditempatkan dalam wilayah yang sama dianggap dikelompokkan
    -Similarity = elemen yang berbagi karakteristik visual yang sama dianggap lebih terkait dari yang tidak sama karakteristik visualnya
    -Closure = mata cenderung mempersepsikan sosok yang tertutup dan lengkap, bahkan ketika ada garis-garis yang hilang
    -Symetry = elemen-elemen simetris cenderung dipersepsikan sebagai milik bersama tanpa memandang jaraknya, memberikan perasaan solidaritas dan keteraturan
    -Continuity = melihat kontur sebagai obyek yang berkesinambungan
    -Common Fate = Terlepas dari seberapa jauh unsur-unsur terpisah atau seberapa berbedanya mereka tampil, jika bergerak atau berubah bersama, unsur ini dianggap terkait

    2.Hierarki
    Hierarki visual dapat ditunjukkan dengan:
    -Size
    – Color
    – Layout
    – Spacing
    -Style

    Cara membuat Hirarki Visual Layout yaitu:
    1. Memilih satu titik fokus (focal point)
    2. Menggunakan grid (memastikan layout tetap seimbang pada semua halaman)
    3. Memanfaatkan pola user melihat informasi.
    Pola F-Pattern :ayout dengan teks yang padat
    Pola Z-Pattern :ketika konten setidaknya lebih longgar pengaturannya

  35. Nama : Riris Lasmarito Malau
    Nim : 11419022
    Kelas : 42 TRPL 1

    Rancangan layout menjadi acuan kerja dalam pembuatan user interface.

    Terdapat 4 komponen Layout
    1. Grouping
    2. Hirarki
    3. Whitespace
    4. Alignment dan Grids

    7 bagian dari prinsip Gestalt:
    1. Proximility: Elemen yang lebih dekat satu sama lain lebih cenderung dikelompokkan bersama.
    2. Common Region: Elemen elemen yang ditempatkan dalam wilayah yang sama dianggap dikelompokkan sehingga dapat dikatakan menyatukan banyak elemen yang berbeda.
    3. Similarity: Elemen yang berbagi karakteristik visual yang sama dianggap lebih terkait dari yang tidak sama karakteristik visualnya.
    4. Closure: Mata cenderung mempersiapkan sosok yang tertutup dan lengkap bahkan ketika ada garis-garis yang hilang.
    5. Symmetry: Elemen-elemen simetris cenderung dipresepsikan sebagai milik bersama tanpa memandang jaraknya, memberikan solidaritas dan keteraturan.
    6. Continuity: Continuity membantu kita menafsirkan arah dan gerakan melalui sebuah komposisi.
    7. Common Fate: Terlepas dari beberapa jauh unsur-unsur terpisah atau seberapa berbedanya mereka tampil, jika bergerak dan beruabh bersama unsur ini dianggap terkait.

  36. Nama : Samuel Halomoan Manalu
    NIM : 11419041

    Grouping dan Hirarki
    Grouping (Prinsip Gestalt)
    Cara orang melihat desain Anda sangat mempengaruhi makna yang mereka ambil dari desain tersebut. Prinsip Gestalt meneliti fenomena ini. Prinsip-prinsip Gestalt berusaha menggambarkan bagaimana orang memahami elemen visual ketika kondisi tertentu berlaku. Prinsip-prinsip Gestalt menjelaskan bagaimana mata menciptakan keseluruhan (Gestalt) dari potongan bagian-bagian.

    Hirarki
    Anda perlu menetapkan hirarki kepentingan di antara item dalam desain. Salah satu jenis hirarki adalah hirarki visual: gunakan variabel visual untuk membuat elemen yang lebih penting muncul.

    5 elemen paling dasar, blok penting yang dipergunakan untuk mendukung hirarki yang sederhana maupun kompleks adalah:
    – Size
    – Color
    – Layout
    – Spacing
    – Style

    Untuk menciptakan hirarki visual melalui LAYOUT, dapat dilakukan dengan:
    – Pilih satu titik fokus (focal point)
    – Gunakan grid
    – Manfaatkan pola melihat user

    Gestalt (bentuk/ form/ shape dalam bahasa Jerman) adalah sekelompok prinsip persepsi visual yang dikembangkan oleh psikolog Jerman pada tahun 1920-an. Prinsip ini dibangun di atas teori bahwa “keseluruhan yang terorganisir dianggap lebih besar daripada jumlah bagian-bagiannya.
    Prinsip-prinsip Gestalt adalah:
    1. Proximity
    2. Common region
    3. Similarity
    4. Closure
    5. Symmetry
    6. Continuity
    7. Common fate

    1. PROXIMITY (KEDEKATAN)
    Elemen yang lebih dekat satu sama lain lebih cenderung dikelompokkan bersama.

    2. COMMON REGION
    Sama halnya dengan prinsip Proximity, elemen-elemen yang ditempatkan dalam wilayah yang sama dianggap dikelompokkan.
    Prinsip Common Region dapat menyatukan banyak elemen yang berbeda, menjaga mereka bersatu dalam kelompok yang besar. Kita dapat mencapainya dengan menggunakan garis, warna, bentuk (shape) dan bayangan (shadow).

    3. SIMILARITY (KESAMAAN)
    Elemen yang berbagi karakteristik visual yang sama dianggap lebih terkait dari yang tidak sama karakteristik visualnya. Similarity antar obyek adalah salah satu metode untuk membuat koneksi.
    Anda dapat memberi warna, tekstur, ukuran atau bentuk pada elemen sebuah halaman dengan cara yang serupa dan secara tidak sadar user Anda akan menyatukannya. Dalam banyak cara yang sama seperti dengan simetri, elemen yang tidak punya kesamaan visual akan secara otomatis menonjol dalam penglihatan.

    4. CLOSURE
    Mata cenderung mempersepsikan sosok yang tertutup dan lengkap, bahkan ketika ada garis-garis yang hilang. Prinsip Closure ketika disajikan dengan jumlah informasi yang tepat, otak kita akan langsung mengambil kesimpulan dengan mengisi kekosongan dan menciptakan suatu kesatuan yang utuh. Dengan cara ini kita dapat mengurangi jumlah elemen yang dibutuhkan untuk mengkomunikasikan informasi, mengurangi kompleksitas dan membuat desain lebih menarik. Closure dapat membantu kita untuk meminimalisir visual noise dan menyampaikan pesan, memperkuat konsep dalam ruangan yang cukup kecil.

    5. SYMMETRY
    Mata lebih memilih penjelasan dengan simetris yang lebih besar. Contoh Symmetry di bawah ini (gambar paling kiri) dianggap sebagai dua segi empat yang saling tumpang tindih, bukan poligon terpisah. Elemen-elemen simetris cenderung dipersepsikan sebagai milik bersama tanpa memandang jaraknya, memberikan perasaan solidaritas dan keteraturan.

    6. CONTINUITY
    Mata menduga/ mengira melihat kontur sebagai obyek yang berkesinambungan. Kita terutama menganggap contoh Continuity di bawah (gambar paling kiri) sebagai dua garis yang bersilang, bukan sebagai empat garis yang bertemu pada satu titik atau dua sudut kanan yang berbagi titik.

    7. COMMON FATE
    Prinsip Common Fate lebih kuat ketika elemen bergerak disinkronkan; dalam arah yang sama dan pada waktu dan kecepatan yang sama. Hal ini dapat membantu dengan mengelompokkan informasi yang relevan dan menghubungkan aksi dengan hasil. Gangguan gerakan yang sinkron dapat menarik perhatian user dan mengarahkannya ke elemen atau fitur tertentu. Hal ini juga dapat membangun hubungan antara berbagi kelompok atau wilayah.

    ==Mendesain Untuk Scanning==
    F-Pattern
    F-pattern adalah layout untuk web yang padat teks seperti situs berita, blog atau landing page yang mendalam. F-pattern menggambarkan pola scanning mata user yang paling umum dalam hal mengelompokkan/ membagi konten.

    Z-Pattern
    Ketika konten lebih lapang (setidaknya lebih luas/ leluasa/ longgar pengaturannya), pandangan user biasanya akan mengikuti pola seperti huruf Z. Z-Pattern berlaku untuk hampir semua interface web karena memenuhi persyaratan iti sebuah web yaitu hirarki, branding dan call to action.

  37. Nama : Mario Wira Pratama Purba
    NIM : 114190350
    Kelas : 42TRPL2

    Desain adalah tentang komunikasi sehingga desain yang baik adalah desain yang dapat mengelola komunikasi dengan baik.

    Prinsip Grouping Gestalt: bentuk kesatuan komponen-komponen yang terdapat dalam sebuah halaman.
    7 Prinsip Gestalt :
    -. Proximity : Elemen yang berdekatan yang saling relevan cenderung dikelompokkan bersama.
    -. Common Region : Elemen -elemen dalam satu wilayah adalah sebuah kelompok.
    -. Similarity : Karakteristik visual elemen-elemen yang sama dianggap lebih terkait dari yang tidak sama karakteristik visualnya.
    -. Closure : Suatu elemen dianggap sebagai suatu yang utuh dalam isi yang tidak lengkap.
    -. Symmetry : Suatu elemen dipandang menjadi sebagai bagian dari kelompok yang sama dan menciptakan stabilitas dan keteraturan.
    -. Continuity : Suatu elemen cenderung dipandang saling terkait atau dikelompokkan apabila dipandang untuk berpindah dari satu elemen ke elemen lain.
    -. Common Fate : Elemen-elemen cenderung dilihat bergerak ke arah yang sama dan menjadi sebuah bagian dari kelompok yang sama.

    Z-Pattern dalam scanning informasi :
    1. Scanning garis horizontal di bagian atas halaman.
    2. Ketika mencapai ujung akhir, mata bergerak menuju ke bawah bagian kiri.
    3. Mengulangi pencarian secara horizontal di bagian bawah halaman.

  38. Nama : Arijona Purba
    NIM : 11419034
    Kelas : 42TRPL1

    Layout adalah tata letak dari suatu elemen desain yang di tempatkan dalam sebuah bidang menggunakan sebuah media yang sebelumnya sudah di konsep terlebih dahulu.
    Empat komponen Layout: grouping, hirarki, whitespace, alignment dan grids.
    Ada 7 prinsip Gestalt yaitu:
    1. Proximility, elemen yang lebih dekat satu sama lain lebih cenderung dikelompokkan bersama.
    2. Common Region, elemen elemen yang ditempatkan dalam wilayah yang sama dianggap dikelompokkan.Prinsip common region menyatukan banyak elemen yang berbeda.
    3. Similarity, elemen yang berbagi karakteristik visual yang sama dianggap lebih terkait dari yang tidak sama karakteristik visualnya. Similarity memiliki 2 fungsi yaitu untuk grouping dan jga membuat kontras sebagai titik fokus.
    4. Closure, mata cenderung mempersiapkan sosok yang tertutup dan lengkap bahkan ketika ada garis-garis yang hilang.Biasanya digunkan dalam Ikon dan Logo.Tujuannya adalah agar tidak terlalu banyak gangguan visual dalam sebuah design.
    5. Symmetry, elemen-elemen simetris cenderung dipresepsikan sebagai milik bersama tanpa memandang jaraknya, memberikan solidaritas dan keteraturan.Baik digunkan dalam portofolio, galeri tampilan produk dll.
    6. Continuity, Kita melihat kontur sebagai obyek yang berkesinambungan. Continuity membantu kita menafsirkan arah dan gerakan melalui sebuah komposisi. Biasanya digunakan dalam list produk , pengaturan produk dan informasi layanan.
    7. Common fate, terlepas dari beberapa jauh unsur-unsur terpisah atau seberapa berbedanya mereka tampil, jika bergerak dan beruabh bersama unsur ini dianggap terkait.

    Pola F-Pattern :
    – Scanning garis horizontal di bagian atas layar
    – Scanning secara vertikal di sisi kiri layar
    – Menemukan sesuatu yang menarik, lalu mulai membaca secara normal

    Pola Z-Pattern :
    – Scanning garis horizontal di bagian atas halaman
    – Ketika mata mencapai ujung akhir, langsung mengarahkan pandangan ke bawah bagian kiri
    – Mengulangi pencarian secara horizontal di bagian bawah page

  39. Nama : Jovan Imanuel Sigalingging
    NIM : 11419021
    Kelas : 42TRPL1

    Layout adalah tata letak dari suatu elemen desain yang di tempatkan dalam sebuah bidang menggunakan sebuah media yang sebelumnya sudah di konsep terlebih dahulu.

    Empat komponen Layout:
    1. Grouping
    2. Hirarki
    3. Whitespace
    4. Alignment dan grids.

    Ada 7 prinsip Gestalt yaitu:
    1. Proximility —> Elemen yang lebih dekat satu sama lain lebih cenderung dikelompokkan bersama.
    2. Common Region —-> Elemen elemen yang ditempatkan dalam wilayah yang sama dianggap dikelompokkan.Prinsip common region menyatukan banyak elemen yang berbeda.
    3. Similarity —-> Elemen yang berbagi karakteristik visual yang sama dianggap lebih terkait dari yang tidak sama karakteristik visualnya. Similarity memiliki 2 fungsi yaitu untuk grouping dan jga membuat kontras sebagai titik fokus.
    4. Closure —> Mata cenderung mempersiapkan sosok yang tertutup dan lengkap bahkan ketika ada garis-garis yang hilang.Biasanya digunkan dalam Ikon dan Logo.Tujuannya adalah agar tidak terlalu banyak gangguan visual dalam sebuah design.
    5. Symmetry —> Elemen-elemen simetris cenderung dipresepsikan sebagai milik bersama tanpa memandang jaraknya, memberikan solidaritas dan keteraturan.Baik digunkan dalam portofolio, galeri tampilan produk dll.
    6. Continuity —-> Kita melihat kontur sebagai obyek yang berkesinambungan. Continuity membantu kita menafsirkan arah dan gerakan melalui sebuah komposisi. Biasanya digunakan dalam list produk , pengaturan produk dan informasi layanan.
    7. Common fate —> terlepas dari beberapa jauh unsur-unsur terpisah atau seberapa berbedanya mereka tampil, jika bergerak dan beruabh bersama unsur ini dianggap terkait.

    Pola F-Pattern :
    1. Scanning garis horizontal di bagian atas layar
    2. Scanning secara vertikal di sisi kiri layar
    3. Menemukan sesuatu yang menarik, lalu mulai membaca secara normal

    Pola Z-Pattern :
    1. Scanning garis horizontal di bagian atas halaman
    2. Ketika mata mencapai ujung akhir, langsung mengarahkan pandangan ke bawah bagian kiri
    3. Mengulangi pencarian secara horizontal di bagian bawah page

  40. Nama : Timothy J F Henan
    Nim : 11419028
    Kelas : 42 TRPL 1

    Dalam membuat rancangan pada website kita harus memperhatikan bahwa layout
    disusun dengan aspek accesibility,efficiency,reliability,mapping,dll
    fungsi rancangan layout yang baik ditujukan untuk memberikan kemudahan bagi user
    dalam menggunakan website

    Terdapat 4 komponen dalam layout :
    1.Grouping
    2.Hirarki
    3.Whitespace
    4.Alignment and Grids

    1.Aspek Grouping
    Prinsip gestalt merupakan bagaimana orang – orang memahami elemen visual terhadapa
    desain interface kita
    Ada 7 bagian dari prinsip – prinsip gestalt pada bagian grouping :
    1.proximity
    =>Elemen yang lebih dekat satu sama lain cenderung dikelompokkan bersama
    2.commor region
    =>Elemen- elemen yang ditempatkan dalam wilayah yang sama dianggap dikelompokkan.
    3.Similarity
    =>Elemen yang berbagi karakteristik visual yang sama dianggap lebih terkait dari yang
    tidak sama karakteristik visualnya.
    4.Closure
    =>Mata cenderung mempersepsikan sosok yang tertutup dan lengkap
    5.Symmetry
    =>Elemen – elemen simetris cenderung dipersepsikan sebagai milik bersama tanpa memandang jaraknya
    6.Continuity
    =>Mata menduga melihat kontur sebagai obyek yang berkesinambungan
    7.Common fate
    =>Seberapa jauh unsur- unsur terpisah atau seberapa berbedanya mereka tampil, jika
    bergerak/ berubah bersama.

    2.Hirarki
    Menetapkan hirarki kepentingan di antara item dalam desain
    *Hirarki Visual
    => Digunakan untuk membuat elemen yang lebih penting muncul
    Hirarki visual dapat ditunjukkan berupa :
    1.Size
    2.Color
    3.Layout
    4.Spacing
    5.Style
    Beberapa aspek untuk melakukan hierarki pada layout :
    1. Pilih satu titik fokus (focal point)
    2. Gunakan grid
    3. Manfaatkan pola user melihat informasi: F-pattern dan Z-pattern

  41. Nama : Hotnida Siagian
    NIM : 11419023
    Kelas : 42 TRPL 1

    Layout 1

    Rancangan layout menjadi acuan kerja dalam pembuatan UI dan ditujukan untuk memudahkan user mengakses website.
    Komponen layout yaitu:
    -grouping
    -hirarki
    -whitespace
    -alignment and grids.

    1.Grouping
    Menggunakan prinsip grouping Gestalt, dimana berbicara soal persepsi visual.
    7 bagian prinsip Gestalt
    => Proximity = elemen yang lebih dekat satu sama lain lebih cenderung dikelompokkan bersama.
    => Common Region = elemen-elemen yang ditempatkan dalam wilayah yang sama dianggap dikelompokkan.
    => Similarity = elemen yang berbagi karakteristik visual yang sama dianggap lebih terkait dari yang tidak sama karakteristik visualnya.
    => Closure = ketika user melihat, mata user cenderung mempersepsikan sosok yang tertutup dan lengkap, bahkan ketika ada garis-garis yang hilang
    => Symmetry = elemen-elemen simetris cenderung dipersepsikan sebagai milik bersama tanpa memandang jaraknya.
    => Continuity = mata menduga/melihat garis sebagai objek yang berkesinambungan.
    => Common Fate = terlepas dari seberapa jauh unsur-unsur terpisah atau seberapa berbedanya mereka tampil, jika bergerak bersama, unsur ini dianggap terkait.

    2.Hirarki
    Hirarki visual digunakan untuk membuat elemen yang lebih penting muncul.
    Cara membuat Hirarki Visual Layout yaitu:
    1. Memilih satu titik fokus (focal point)
    2. Menggunakan grid (memastikan layout tetap seimbang pada semua halaman)
    3. Memanfaatkan pola user melihat informasi.
    Pola F-Pattern :ayout dengan teks yang padat
    Pola Z-Pattern :ketika konten setidaknya lebih longgar pengaturannya

  42. Nama: Anjelina Sihombing
    NIM : 11419063
    Kelas : 42 TRPL 2

    Rancangan layout menjadi acuan kerja dalam pembuatan user interface dalam implementasi pembangunan aplikasi dan pengisian konten.
    Ada 4 komponen layout yaitu: grouping, hirarki, whitespace, alignment dan grids.
    1. Grouping
    Desain dianggap secara keseluruhan pada pandangan pertama 7 prinsip grouping gestalt :

    1.Proximity
    2.Common Fate
    3.Similarity
    4.Closure
    5.Symmetry

    6.Continuity
    7.Common Fate

    2. Hirarki
    Perlu menerapkan hirarki kepentingan di antara item dalam desain.

    Beberapa aspek untuk melakukan hirarki pada layout :
    – Pilih satu titik fokus
    – Gunakan grid
    – Manfaatkan pola user melihat informasi, yaitu F-pattern dan Z-pattern

    Pola F-Pattern :
    Layout untuk web yang memiliki banyak teks (situs berita, blog, dll)
    – Scanning garis horizontal di bagian atas layar
    – Scanning secara vertikal di sisi kiri layar
    – Menemukan sesuatu yang menarik, lalu mulai membaca secara normal

    Pola Z-Pattern :
    Layout untuk web yang memiliki sedikit teks
    – Scanning garis horizontal di bagian atas halaman
    – Ketika mata mencapai ujung akhir, langsung mengarahkan pandangan ke bawah bagian kiri
    – Mengulangi pencarian secara horizontal di bagian bawah page

  43. Nama : Dwiky F. N. Sitorus
    NIM : 11419004
    Kelas : 42 TRPL 1

    7 prinsip grouping gestalt :
    1.Proximity
    Elemen yang lebih dekat satu sama lain lebih cenderung dikelompokkan bersama
    2.Common Fate
    Elemen-elemen yang ditempatkan dalam wilayah yang sama dianggap dikelompokkan bisa menggunakan garis,warna maupun shadow
    3.Similarity
    Elemen yang berbagi karakteristik visual yang sama dianggap lebih terkait dari yang tidak sama karakteristik visualnya
    4.Closure
    Mata cenderung mempersepsikan sosok yang tertutup dan lengkap,bahkan ketika ada garis –garis yang hilang
    5.Symmetry
    Elemen –elemen simetris cenderung dipersepsikan sebagai milik bersama tanpa memandang jaraknya , memberikan perasaan solidaritas dan keteraturan
    6.Continuity
    Mata menduga/mengira melihat kontur sebagai obyek yang berkesinambungan. Continuity membantu kita menafsirkan arah dan gerakan melalui komposisi
    7.Common Fate
    Terlepas dari seberapa jauh unsur-unsur terpisah atau seberapa berbedanya mereka tampil,jika bergerak atau berubah bersama,unsur ini dianggap terkait

    Hirarki Visual:
    -Pilih satu titik fokus
    -Gunakan grid
    -Manfaatkan pola user melihat informasi:F-pattern dan Z-pattren

    F-Pattern, untuk layout untuk web yang padat teks seperti blog, web berita

    Pola :
    – Scanning garis horizontal dibagian atas layar,seperti membaca dari kiri ke kanan
    – Scanning secara vertical disisi kiri layar,mencari keyword atau area menarik pada awal paragraph atau subjudul
    – Menemukan sesuatu yang menarik,lalu mulai membaca secara normal

    Z-Pattern, ketika konten setidaknya lebih luas/leluasa/longgar peraturannya pandangan user biasanya akan mengikuti pola seperti huruf Z
    Pola:
    -Scanning garis horizontal di bagian atas halaman
    -Ketika mata mencapai ujung akhir,langsung mengarahkan pandangan kebawah bagian kiri, dan
    -Mengulangi pencarian secara horizontal dibagian bawah page

  44. Nama : Edwin Immanuel Damanik
    NIM : 11419011
    Kelas : 42TRPL1

    Desain yang baik adalah desain tentang komunikasi dimana membuat web yang berfungsi, informasi yang baik dan penampilan serta fungsi yang baik.

    Prinsip gestalt merupakan cara pandang manusia yang melihat sekilas di awal, tanpa memperhatikan beberapa potong bagian.

    Prinsip gestalt terdiri dari :
    – Proximity, elemen yang saling berdekatan cenderung dikelompokkan bersama.
    – Common fate, terlepas dari unsur perbedaan mereka tampil, unsur tersebut akan sama dilihat jika bergerak atau berubah bersama
    – Continuity, mata menduga melihat kontur sebagai objek yang berkesinambungan
    – Similarity, elemen yang berbagi karakteristik visual yang sama dianggap lebih terkait dari yang tidak sama karakteristik visualnya.
    – Closure, mata yang cenderung mempersepsikan sesuatu dengan lengkap, walaupun gambar itu tidak lengkap / full.
    – Common region, elemen yang ditempatkan di wilayah yang sama cenderung dikelompokkan.

    – Symetry, elemen simetris dipersepsikan sebagai milik bersama tanpa memandang jarak. Memberikan perasaan solidaritas dan keteraturan.

    Hirarki visual digunakan untuk membuat elemen yang lebih penting menjadi muncul.

    Hirarki Visual ( Bagian Layout ) :
    – Pilih satu titik fokus (focal point)
    – Gunakan grid
    – Manfaatkan pola user melihat informasi.

    F- Pattern :
    Layanan untuk yang berteks padat, seperti web berita
    Dengan pola :
    1. Scanning garis horizontal di bagian layar atas, seperti membaca dari kiri ke kanan
    2. Scanning secara vertikal di sisi kiri layar
    3. Menemukan sesuatu yang menarik, lalu membaca secara normal.

    Z-Pattern :
    1. Scanning garis horizontal di bagian atas halaman
    2. Ketika mata mencapai ujung akhir, langsung mengarahkan pandangan ke bawah bagian kiri
    3. Mengulangi pencarian secara horizontal di bagian bawah page.

  45. Nama : Geby W P Lumban Gaol
    NIM : 11419068
    Kelas : 42 TRPL 2

    Layout yang baik memberikan kemudahan bagi user untuk mengakses website.

    1. Grouping
    Ketika orang lihat halaman website yang Anda rancang, mereka tidak lihat potongan-potongan komponen di dalamnya, mereka lihat keseluruhan satu halaman itu sebagai satu kesatuan.
    Ada 7 bagian dari prinsip gestalt yaitu:
    – Proximity : elemen yang lebih dekat satu sama lain lebih cenderung dikelompokkan bersama. Proximity bisa digunakan untuk mengelompokkan informasi yang serupa.
    – Commor Region : elemen-elemen yang ditempatkan dalam wilayah yang sama dianggap dikelompokkan. Prinsip ini dapat menyatukan banyak elemen yang berbeda, dapat menggunakan garis, warna, atau shadow.
    – Similarity : elemen yang berbagi karakteristik visual yang sama dianggap lebih terkait dari yang tidak sama karakteristik visualnya.
    – Closure : mata cenderung mempersepsikan sosok yang tertutup dan lengkap
    – Symmetry : elemen simetris cenderung dipersepsikan sebagai milik bersama tanpa memandang jaraknya
    – Continuity : mata mengira melihat kontur sebagai obyek yang berkesinambungan
    – Common fate : seberapa jauh unsur- unsur terpisah/ seberapa berbedanya mereka tampil, jika bergerak/ berubah bersama.

    2. Hierarki
    Hirarki Visual digunakan untuk membuat elemen yang lebih penting muncul.
    5 elemen dasar hierarki :
    – Size (ukuran)
    – Color (warna)
    – Layout (tata letak)
    Ada 2 pola user melihat informasi, yaitu:
    1. F-pattern : layout untuk web yang padat teks, scanning garis horizontal di bagian atas layar, scanning secara vertikal di sisi kiri layar.
    2. Z-pattern : Scanning garis horizontal di bagian atas halaman, metika mata mencapai ujung akhir, langsung mengarahkan pandangan ke bawah bagian kiri, mengulangi pencarian secara horizontal di bagian bawah page

    – Spacing
    – Style

  46. Nama : Yohana Sihombing
    NIM : 11419055
    Kelas : 42 TRPL-2
    LAYOUT 1
    1.Pengenalan
    Rancangan layout menjadi acuan kerja dalam pembuatan user interface dalam implementasi pembangunan aplikasi dan pengisian konten.Rancangan layout yang baik ditujukan untuk memberikan kemudahan bagi user untuk mengakses website (dapat dengan cepat menemukan informasi yang dicari,mudah dicari cara penggunaannya & membantu menyelesaikan pekerjaannya)
    2.Grouping dan hirarki
    Grouping

    Prinsip Grouping gestalt berusaha menggambarkan bagaimana org” memahami elemen visual ketika kondisi tertentu berlaku.Hal yang sama terjadi pada setiap desain web yang dibuat :Desain dianggap secara keseluruhan pada pandangan pertama 7 prinsip grouping gestalt :

    1.Proximity
    Elemen yang lebih dekat satu sama lain lebih cenderung dikelompokkan bersama
    Fungsi untuk mengelompokkan informasi yang serupa,mengatur konten dan menghilangkan kekacauan dipengaturan layoutnya
    2.Common Fate
    Elemen-elemen yang ditempatkan dalam wilayah yang sama dianggap dikelompokkan bisa menggunakan garis,warna maupun shadow
    Baik digunakan pada navigasi daftar galeri dan banner,body text, dan panigation
    3.Similarity
    Elemen yang berbagi karakteristik visual yang sama dianggap lebih terkait dari yang tidak sama karakteristik visualnya,mengatur dan mengklasifikasikan objek dalam satu grup
    4.Closure
    Mata cenderung mempersepsikan sosok yang tertutup dan lengkap,bahkan ketika ada garis –garis yang hilang
    5.Symmetry
    Elemen –elemen simetris cenderung dipersepsikan sebagai milik bersama tanpa memandang jaraknya
    6.Continuity
    mata menduga/mengira melihat kontur sebagai obyek yang berkesinambungan
    7.Common Fate

    Terlepas dari seberapa jauh unsur-unsur terpisah atau seberapa berbedanya mereka tampil,jika bergerak atau berubah bersama,unsur ini dianggap terkait

    HIRARKI

    Jenis hirarki
    1.Hirarki visual
    Variable visual penekanan, hirarki visual dapat ditentukan oleh:
    -size
    -color
    -layout
    -spacing
    -style

    Manfaatkan pola user melihat informasi:F-pattern dan Z-pattren

    F-Pattern
    -layout untuk web yang padat teks situs berita,blog atau landing page yang mendalam

    -pola F-Pattern,scanning garis horizontal dibagian atas layar,seperti membaca dari kiri ke kanan

    -scanning secara vertical disisi kiri layar,mencari keyword atau area menarik pada awal paragraph atau subjudul

    Z-Pattern
    -ketika konten setidaknya lebih luas/leluasa/longgar peraturannya pandangan user biasanya akan mengikuti pola seperti huruf Z
    -pada Z-pattern, simplicity adalah prioritas dan call to action adalah target akhir utama
    -F-pattern mengatur konten,Z-pattern menekankan pada call action
    Pola:
    -Scanning garis horizontal di bagian atas halaman
    -Ketika mata mencapai ujung akhir,langsung mengarahkan pandangan kebawah bagian kiri, dan
    -Mengulangi pencarian secara horizontal dibagian bawah page

  47. Nama : Andree Panjaitan
    NIM : 11419014
    Kelas : 42 TRPL 1

    Grupping dan Hirarki

    Grupping
    Prinsip grouping gestalt adalah hal yang sama terjadi pada setiap desain web yang dibuat (desain dianggap secara keseluruhan pada pandangan pertama). Prinsip gestalt berguna untuk meletakkan struktur pada tampilan visual dan membantu user dalam chunking. Ada 7 bagian dari prinsip gestalt yaitu
    1. Proximility
    -> Elemen yang lebih dekat satu sama lain lebih cenderung dikelompokkan bersama.
    2. Common Region
    -> Elemen elemen yang ditempatkan dalam wilayah yang sama dianggap dikelompokkan sehingga dapat dikatakan menyatukan banyak elemen yang berbeda.
    3. Similarity
    -> Elemen yang berbagi karakteristik visual yang sama dianggap lebih terkait dari yang tidak sama karakteristik visualnya.
    4. Closure
    -> Mata cenderung mempersiapkan sosok yang tertutup dan lengkap bahkan ketika ada garis-garis yang hilang.
    5. Symmetry
    -> Elemen-elemen simetris cenderung dipresepsikan sebagai milik bersama tanpa memandang jaraknya, memberikan solidaritas dan keteraturan.
    6. Continuity
    -> Continuity membantu kita menafsirkan arah dan gerakan melalui sebuah komposisi.
    7. Common fate
    ->Terlepas dari beberapa jauh unsur-unsur terpisah atau seberapa berbedanya mereka tampil, jika bergerak dan beruabh bersama unsur ini dianggap terkait.

    Hirarki
    Hirarki Visual digunakan untuk membuat elemen yang lebih penting muncul.
    Layout dalam memanfaatkan pola user melihat informasi memiliki 2 pola yaitu
    1. F-Pattern
    -> scanning garis horizontal dibagian atas layar, seperti membaca dari kiri kekanan.
    2. Z-Pattern
    -> digunakan saat konten lebih leluasa, pandangan user mengikuti pola seperti huruf Z.

  48. Nama : Revi Angeli Siahaan
    NIM : 11419054

    Ada 4 komponen layout yaitu: grouping, hirarki, whitespace, alignment dan grids.
    1. Grouping
    Prinsip grouping gestalt adalah hal yang sama terjadi pada setiap desain web yang dibuat (desain dianggap secara keseluruhan pada pandangan pertama). Prinsip gestalt berguna untuk meletakkan struktur pada tampilan visual dan membantu user dalam chunking.
    Ada 7 bagian dari prinsip gestalt yaitu:
    – proximity : elemen yang lebih dekat satu sama lain lebih cenderung dikelompokkan sama
    – commor region : elemen- elemen yang ditempatkan dalam wilayah yang sama dianggap dikelompokkan.
    – Similarity : elemen yang berbagi karakteristik visual yang sama dianggap lebih terkait dari yang tidak sama karakteristik visualnya.
    – Closure : mata cenderung mempersepsikan sosok yang tertutup dan lengkap
    – Symmetry : elemen simetris cenderung dipersepsikan sebagai milik bersama tanpa memandang jaraknya
    – Continuity : mata mengira melihat kontur sebagai obyek yang berkesinambungan
    – Common fate : seberapa jauh unsur- unsur terpisah/ seberapa berbedanya mereka tampil, jika bergerak/ berubah bersama.
    2. Hirarki
    Hirarki Visual digunakan untuk membuat elemen yang lebih penting muncul.
    Hirarki Visual : Layout dalam memanfaatkan pola user melihat informasi memiliki 2 pola yaitu :
    – F-Pattern : scanning garis horizontal dibagian atas layar, seperti membaca dari kiri kekanan (konten padat seperti blog).
    – Z-Pattern : digunakan saat konten lebih luas/ leluasa, pandangan user mengikuti pola seperti huruf Z

  49. Nama: Jerry Andrianto Pangaribuan
    NIM: 11419046
    Kelas: 42TRPL2

    Menurut prinsip gestalt, cara otak manusia bekerja yaitu dengan melihat seluruh gambar dan mendefinisikan seluruh bentuk lebih cepat dan lebih mudah daripada melihat atau memperhatikan perubahan detail

    Ada 7 prinsip gestalt, antara lain:
    1. Proximity
    Elemen yang lebih dekat satu sama lain lebih cenderung dikelompokkan bersama baik digunakan pada navigasi, daftar galeri dan banner

    2. Common Region
    Elemen-elemen yang ditempatkan dalam wilayah yang sama dianggap dikelompokkan.

    3. Similarity
    Elemen yang berbagi karakteristik visual yang sama dianggap lebih terkait dari yang tidak sama karakteristik visualnya.

    4. Closure
    Mata cenderung mempersepsikan sosok yang tertutup dan lengkap, bahkan ketika ada garis-garis yang hilang

    5. Symmetry
    Elemen-elemen simetris cenderung dipersepsikan sebagai milik bersama tanpa memandang jaraknya, memberikan perasaan solidaritas dan keteraturan

    6. Continuity
    Mata menduga/mengira melihat kontur sebagai obyek yang berkesinambungan.
    Continuity membantu kita menafsirkan arah dan gerakan melalui komposisi.

    7. common fate
    terlepas dari seberapa jauh unsur-unsur terpisah atau seberapa berbedanya mereka tampil, jika bergerak atau berubah bersama, unsur ini dianggap terkait.

    F-Pattern
    – Layout untuk web padat teks, contoh: situs berita, blog, atau landing page yang mendalam
    – Pola F-Pattern
    Scanning garis horizontal di bagian atas layar, seperti membaca dari kiri ke kanan.
    Scanning secara vertikal di sisi kiri layar, mencari keyword atau area menarik pada awal paragraf atau subjudul.
    Menemukan sesuatu yang menarik, lalu mulai membaca secara normal

    Z-Pattern
    – Ketika konten setidaknya lebih luas/leluasa/longgar pengaturannya, pandangan user biasanya akan mengikuti pola seperti huruf Z.
    – Pada Z-pattern, simplicity adalah prioritas dan call to action adalah target akhir utama.
    – F-Pattern mengatur konten, Z-pattern menekankan pada call to action.

  50. Nama : Cyntia Evelin Simamora
    NIM : 11419065
    Kelas : 42TRPL2

    layout merupakan bagian dari desain dan memainkan peran penting dalam desain. layout yang dibuat dengan baik dapat meningkatkan tampilan objek tertentu dan objek sebagi keseluruhan desain untk menciptakan komposisi yang kuat.

    4 komponen layout:
    1. Grouping merupakan hal yang sama pada setiap desain web yang dibuat.
    prinsip gestalt untuk meletakkan struktir pada tampilan visual dan membantu user chunking. Ada 7 bagian prinsip gelstalt:
    1. Proximity: Element yang lebih dekat satu dengan yang lain lebih cenderung dikelompokkan bersama.
    2. commor region : elemen- elemen yang ditempatkan dalam wilayah yang sama dianggap
    3. Continuity : membantu kita menafsirkan arah dan gerakan melalui komposisi.
    4. Similarity: Element yang berbagi karakteristik visual yang sama dianggap lebih terkait dari yang tidak sama karakteristik visualnya.
    5. Closure: mata cenderung mempersepsikan sosok yang tertutup dan lengkap.
    6. Common region: Element yang ditempatkan dalam wilayah yang sama dianggap dikelompokkan.
    7. Common fate : seberapa jauh unsur- unsur terpisah/ seberapa berbedanya mereka tampil, jika bergerak/ berubah bersama.

    2. Hirarki
    Salah satu jenis Hirarki adalah hirarki visual. Hirarki visual adalah prinsip utama yang bisa kita gunakan untuk mengatur informasi. Hirarki visual dapat ditunjukan dengan Size, Color , Layout, Spacing dan Style.

  51. Nama : Michael Binsar Tua Sinaga
    NIM : 11419012
    Kelas : 42 TRPL 1

    LAYOUT 1
    Layout adalah tata letak dari suatu elemen desain yang di tempatkan dalam sebuah bidang menggunakan sebuah media yang sebelumnya sudah di konsep terlebih dahulu.
    4 komponen layout yaitu: grouping, hirarki, whitespace, alignment dan grids.

    7 bagian7 prinsip gestalt yaitu:
    – Proximity -> elemen yang berdekatan lebih cenderung dikelompokkan sama
    – Commor Region -> elemen yang terletak pada wilayah yang sama danggap dikelompokkan.
    – Similarity -> elemen yang berbagi karakteristik visual yang sama dianggap lebih terkait dari yang tidak sama karakteristik visualnya.
    – Closure -> mata cenderung mempersepsikan sosok yang tertutup dan lengkap, bahkan disaat ada garis-garis yang hilang
    – Symmetry -> elemen simetris cenderung dipersepsikan dimiliki tanpa memandang jaraknya
    – Continuity -> mata mengira melihat kontur sebagai obyek yang berkesinambungan
    – Common fate > seberapa jauh unsur unsur terpisah atau seberapa berbedanya mereka tampil jika bergerak atau berubah bersama.

    Hirarki
    Menetapkan hirarki kepentingan di antara item dalam desain
    Hirarki Visual -> Digunakan untuk membuat elemen yang lebih penting muncul

    Hirarki visual dapat ditunjukkan berupa : Size, Color, Layout, Spacing , Style

    Beberapa aspek untuk melakukan hierarki pada layout :
    1. Pilih satu titik fokus (focal point)
    2. Gunakan grid
    3. Manfaatkan pola user melihat informasi, yaitu F-pattern dan Z-pattern
    F-Pattern :
    Layout untuk web yang memiliki banyak teks (situs berita, blog, dll)
    – Scanning garis horizontal di bagian atas layar
    – Scanning secara vertikal di sisi kiri layar
    – Menemukan sesuatu yang menarik, lalu mulai membaca secara normal
    Z-Pattern :
    Layout untuk web yang memiliki sedikit teks
    – Scanning garis horizontal di bagian atas halaman
    – Ketika mata mencapai ujung akhir, langsung mengarahkan pandangan ke bawah bagian kiri
    – Mengulangi pencarian secara horizontal di bagian bawah page

  52. Nama : Nazir Manahan Manurung
    Nim : 11419020
    Kelas : 42 TRPL 1

    Layout 1
    Layout adalah tata letak dari suatu elemen desain yang di tempatkan dalam sebuah bidang menggunakan sebuah media yang sebelumnya sudah di konsep terlebih dahulu.
    Dalam membuat layout yang baik banyak hal yang harus diperhatikan yaitu grouping and hierarchy, whitespace, dan alignment and grids.Dalam grouping and hierarchy, prinsip yang digunakan adalah gestalt.
    Adapun yang menjadi bagian dari gestalt adalah:
    1.Proximity
    => Elemen yang lebih dekat satu sama lain lebih cenderung dikelompokkan bersama
    2.Common Region
    => Elemen elemen yang ditempatkan dalam wilayah yang sama dianggap dikelompokkan.Prinsip common region menyatukan banyak elemen yang berbeda.
    3.Similarity
    =>Elemen yang berbagi karakteristik visual yang sama dianggap lebih terkait dari yang tidak sama karakteristik visualnya.
    4.C losure
    => Mata cenderung mempersiapkan sosok yang tertutup dan lengkap bahkan ketika ada garis-garis yang hilang.Biasanya digunkan dalam Ikon dan Logo.Tujuannya adalah agar tidak terlalu banyak gangguan visual dalam sebuah design.
    5.Symmetry
    => Elemen-Elemen simetris cenderung dipresepsikan sebagai milik bersama tanpa memandang jaraknya, memberikan solidaritas dan keteraturan.Baik digunkan dalam portofolio, galeri tampilan produk dll.
    6. Continuity
    => Kita melihat kontur sebagai obyek yang berkesinambungan. Continuity membantu kita menafsirkan arah dan gerakan melalui sebuah komposisi.Biasanya digunkan dalam list produk , pengaturan produk dan informasi layanan.
    7. Common fate
    => Terlepas dari beberapa jauh unsur-unsur terpisah atau seberapa berbedanya mereka tampil, jika bergerak dan beruabh bersama unsur ini dianggap terkait.

    Hirarki
    salah satu jenis Hirarki adalah hirarki visual. Hirarki visual adalah prinsip utama yang bisa kita gunakan unutk mengatur informasi.
    Hirarki visual dapat ditunjukan dengan Size, Color , Layout, Spacing dan Style

    Layout
    => Yang perlu diperhatikan :
    – Pilih titik fokus
    – Gunakan Grid
    – Manfaatkan pola user melihhat informasi (F-Pattern dan Z-pattern)

    F-pattern oleh jacob Nielsen
    – User jarang membaca setiap kata dari teks
    – Dua bagian pertama adalah yang paling penting dan harus berisi kait anda
    – Cukup satu ide per paragraf , Gunakan bullet sebanyak mungkin
    – Mulai paragraf dengan kata kunci yang menarik.

    Z-pattern
    – Ketika konten Setidaknya lebih luas pengturannya , Pandangan user biasanya akan mengikuti pola seperti huruf Z.
    – Simplicity merupakan prioritas dan call to action target akhir utama.
    – Scanning garis horizontal dibagian atas halaman.
    – ketika mata mencapai ujung akhir mata akan berpindah kebagian kiri
    – dan mengulangi pencarian secara horizontal di bagian bawah page.

  53. Nama : Berliana L. Simamora
    NIM : 11419016
    Kelas : 42 TRPL 1

    Layout 1
    Desain adalah tentang komunikasi

    Grouping & Hirarki
    Prinsip-prinsip Gestalt berusaha menggambarkan bagaimana orang memahami elemen visual ketika kondisi tertentu berlaku.
    Prinsip-prinsip Gestalt menjelaskan bagaimana mata menciptakan keseluruhan (gestalt) dari potongan bagian-bagian.
    Ada 7 bagian dari prinsip Gestalt:
    1. Proximity = Elemen yang lebih dekat satu sama lain lebih cenderung dikelompokkan bersama.
    2. Common Region =elemen – elemen yang ditempatkan dalam wilayah yang sama dianggap dikelompokkan.
    3. Similarity/kesamaan = Elemen yang berbagi karakteristik visual yang sama dianggap lebih terkait dari yang tidak sama karakteristik visualnya.
    4. Closure = Mata cenderung mempersepsikan sosok yang tertutup dan lengkap, bahkan ketika ada garis – garis yang hilang.
    5. Symmetry = Elemen-elemen simetris cenderung dipersepsikan sebagai milik bersama tanpa memandang jaraknya, memberikan perasaan solidaritas dan keteraturan.
    6. Continuity = Mata menduga/mengira melihat kontur sebagai obyek yang berkesinambungan.
    7. Common Fate = Terlepas dari seberapa jauh unsur-unsur terpisah atau seberapa berbedanya mereka tampil, jika bergerak atau berubah bersama, usur ini dianggap terkait.

    Grouping
    Prinsip-prinsip Gestalt berguna untuk meletakkan struktur pada tampilan visual, membantu user dalam Chunking.

    Hirarki
    Hirarki Visual: digunakan untuk membuat elemen yang lebih penting muncul.
    Hirarki visual dapat ditunjukkan dengan:
    • Size
    • Color
    • Layout
    • Spacing
    • Style
    untuk membuat hirarki visual melalui layout:
    – Pilih satu titik fokus (focal point)
    – Gunakan grid
    – Manfaatkan pola user melihat informasi. F- Pattern(layout untuk web yang padat text) dan Z-pattern

    Pola F-Pattern :
    1. Scanning garis horizontal di bagian layar atas, seperti membaca dari kiri ke kanan
    2. Scanning secara vertikal di sisi kiri layar
    3. Menemukan sesuatu yang menarik, lalu membaca secara normal.

    Z-Pattern
    1. Scanning garis horizontal di bagian atas halaman
    2. Ketika mata mencapai ujung akhir, langsung mengarahkan pandangan ke bawah bagian kiri
    3. Mengulangi pencarian secara horizontal di bagian bawah page.

  54. Nama : Sarah O.Y Simorangkir
    NIM : 11419017
    KELAS: 42TRPL1

    Layout 1 :
    Aspek yang harus perlu diperhatikan dalam layout yaitu accesibility, efficiency,reliability,mapping,dll
    Rancangan layout dibuat untuk memberikan kemudahan user dalam mengakses website

    4 komponen layout yaitu:
    1. Grouping
    Prinsip grouping gestalt adalah dimana desain dinilai secara keseluruhan pada pandangan pertama).
    Prinsip gestalt berguna untuk meletakkan struktur pada tampilan visual dan membantu user dalam chunking. Ada 7 bagian dari prinsip gestalt yaitu:
    – Proximity = elemen yang lebih dekat satu sama lain dan cenderung dikelompokkan bersama.
    – Common Region = elemen-elemen yang ditempatkan dalam wilayah yang sama dianggap satu kelompok.
    – Similarity = elemen yang berbagi karakteristik visual yang sama dianggap lebih terkait dari yang
    tidak sama karakteristik visualnya.
    – Closure = ketika user melihat, mata user cenderung mempersepsikan sosok yang tertutup dan lengkap,
    bahkan ketika ada garis-garis yang hilang
    – Symmetry = elemen-elemen simetris cenderung dipersepsikan sebagai milik bersama tanpa memandang jaraknya, serta harmonis dan teratur.
    – Continuity = mata memandang bahwa garis sebagai objek yang berkesinambungan. membantu menafsirkan arah, gerak, melalui suatu komposisi
    – Common Fate = terlepas dari seberapa jauh unsur-unsur terpisah atau seberapa berbedanya mereka tampil,
    jika bergerak bersama, unsur ini dianggap terkait.

    2. Hirarki
    penerapan hirarki diperlukan dalam kepentingan di antara item dalam desain.
    hirarki visual digunakan untuk membuat elemen yang lebih penting muncul dan mengatur informasi
    Informasi yang penting dapat dibedakan dengan cara membedakan jenis teks,
    Warna background atau menempatkan informasi dibagian atas agar langsung dilihat oleh user.

    Langkah melakukan hirarki pada layout :
    – memiilih satu titik fokus
    – menggunakan grid
    – Memanfaatkan pola user saat melihat informasi, yaitu F-pattern dan Z-pattern

  55. Nama : John Ryan Siallagan
    NIM : 11419013
    Kelas : 42TRPL1

    7 bagian7 prinsip gestalt yaitu:
    – Proximity : elemen yang berdekatan lebih cenderung dikelompokkan sama
    – Commor Region : elemen yang terletak pada wilayah yang sama danggap dikelompokkan.
    – Similarity : elemen yang berbagi karakteristik visual yang sama dianggap lebih terkait dari yang tidak sama karakteristik visualnya.
    – Closure : mata cenderung mempersepsikan sosok yang tertutup dan lengkap, bahkan disaat ada garis-garis yang hilang
    – Symmetry : elemen simetris cenderung dipersepsikan dimiliki tanpa memandang jaraknya
    – Continuity : mata mengira melihat kontur sebagai obyek yang berkesinambungan
    – Common fate : seberapa jauh unsur- unsur terpisah atau seberapa berbedanya mereka tampil jika bergerak atau berubah bersama.

    Hirarki Visual :
    – Pilih satu titik fokus
    – Gunakan grid
    – Manfaatkan pola user melihat informasi:
    Pola F-Pattern :
    – Scanning garis horizontal di bagian atas layar
    – Scanning secara vertikal di sisi kiri layar
    – Menemukan sesuatu yang menarik, lalu mulai membaca secara normal

    Pola Z-Pattern :
    – Scanning garis horizontal di bagian atas halaman
    – Ketika mata mencapai ujung akhir, langsung mengarahkan pandangan ke bawah bagian kiri
    – Mengulangi pencarian secara horizontal di bagian bawah page

  56. Nama : Yonatan A.P.L Tobing
    Nim : 11419039
    Kelas : 42 TRPL-2

    Aspek yang perlu diperhatikan untuk membuat rancangan pada website adalah accessibility, efficiency, reliability, mapping.

    Ada 4 komponen dalam layout :
    1.Grouping
    2.Hirarki
    3.Whitespace
    4.Alignment and Grids

    1.Aspek Grouping
    Prinsip gestalt merupakan bagaimana orang – orang memahami elemen visual terhadapa
    desain interface kita
    Ada 7 bagian dari prinsip – prinsip gestalt pada bagian grouping :
    1.proximity
    adalah Elemen yang lebih dekat satu sama lain cenderung dikelompokkan bersama
    2.commor region
    adalah Elemen- elemen yang ditempatkan dalam wilayah yang sama dianggap dikelompokkan.
    3.Similarity
    adalah Elemen yang berbagi karakteristik visual yang sama dianggap lebih terkait dari yang
    tidak sama karakteristik visualnya.
    4.Closure
    adalah Mata cenderung mempersepsikan sosok yang tertutup dan lengkap
    5.Symmetry
    adalah Elemen – elemen simetris cenderung dipersepsikan sebagai milik bersama tanpa memandang jaraknya
    6.Continuity
    adalah Mata menduga melihat kontur sebagai obyek yang berkesinambungan
    7.Common fate
    adalah Seberapa jauh unsur- unsur terpisah atau seberapa berbedanya mereka tampil, jika
    bergerak/ berubah bersama.

    2.Hirarki
    Menetapkan hirarki kepentingan di antara item dalam desain
    -Hirarki Visual
    adalah Digunakan untuk membuat elemen yang lebih penting muncul
    Hirarki visual dapat ditunjukkan berupa :
    1.Size
    2.Color
    3.Layout
    4.Spacing
    5.Style
    Aspek – Aspek untuk melakukan hierarki pada layout :
    1. Pilih satu titik fokus (focal point)
    2. Gunakan grid
    3. Manfaatkan pola user melihat informasi: F-pattern dan Z-pattern

    1. PROXIMITY (KEDEKATAN)
    Elemen yang lebih dekat satu sama lain lebih cenderung dikelompokkan bersama.

    2. COMMON REGION
    Sama halnya dengan prinsip Proximity, elemen-elemen yang ditempatkan dalam wilayah yang sama dianggap dikelompokkan.
    Prinsip Common Region dapat menyatukan banyak elemen yang berbeda, menjaga mereka bersatu dalam kelompok yang besar. Kita dapat mencapainya dengan menggunakan garis, warna, bentuk (shape) dan bayangan (shadow).

    3. SIMILARITY (KESAMAAN)
    Elemen yang berbagi karakteristik visual yang sama dianggap lebih terkait dari yang tidak sama karakteristik visualnya. Similarity antar obyek adalah salah satu metode untuk membuat koneksi.
    Anda dapat memberi warna, tekstur, ukuran atau bentuk pada elemen sebuah halaman dengan cara yang serupa dan secara tidak sadar user Anda akan menyatukannya. Dalam banyak cara yang sama seperti dengan simetri, elemen yang tidak punya kesamaan visual akan secara otomatis menonjol dalam penglihatan.

    4. CLOSURE
    Mata cenderung mempersepsikan sosok yang tertutup dan lengkap, bahkan ketika ada garis-garis yang hilang.

    5. SYMMETRY
    Mata lebih memilih penjelasan dengan simetris yang lebih besar. Contoh Symmetry di bawah ini (gambar paling kiri) dianggap sebagai dua segi empat yang saling tumpang tindih, bukan poligon terpisah.

    6. CONTINUITY
    Mata menduga/ mengira melihat kontur sebagai obyek yang berkesinambungan. Kita terutama menganggap contoh Continuity di bawah (gambar paling kiri) sebagai dua garis yang bersilang, bukan sebagai empat garis yang bertemu pada satu titik atau dua sudut kanan yang berbagi titik.

    7. COMMON FATE
    Prinsip Common Fate lebih kuat ketika elemen bergerak disinkronkan; dalam arah yang sama dan pada waktu dan kecepatan yang sama. Hal ini dapat membantu dengan mengelompokkan informasi yang relevan dan menghubungkan aksi dengan hasil.

    F-Pattern
    F-pattern adalah layout untuk web yang padat teks seperti situs berita, blog atau landing page yang mendalam. F-pattern menggambarkan pola scanning mata user yang paling umum dalam hal mengelompokkan/ membagi konten.

    Z-Pattern
    Ketika konten lebih lapang (setidaknya lebih luas/ leluasa/ longgar pengaturannya), pandangan user biasanya akan mengikuti pola seperti huruf Z. Z-Pattern berlaku untuk hampir semua interface web karena memenuhi persyaratan iti sebuah web yaitu hirarki, branding dan call to action.

  57. Nama :Michael Situmorang
    NIM :11419005
    Kelas :42TRPL1

    Di LAYOUT itu ada 4 bagian yg penting.
    1. Grouping => pengelompokkan elemen/komponen web. Membantu user dalam Chunking
    ada 7 prinsip di Grouping ini.
    -ada PROXIMITY(elemen elemen yg lebih dekat itu dikelompokkan)
    -ada COMMON FATE(kalau saja ada unsur yg bergerak bersama sama/bergerak bersama sama/ bergerak dengan pola yg sama, mereka bisa saja berupa kelompok)
    -ada CLOSURE(cenderung kita membayangkan objek yg hilang/tertutup sebagai suatu yg lengkap. Misal menulis huruf A dengan titik titik atau tertutup setengah, orang umumnya langsung meyimpulkan kalau itu huruf A.)
    -ada SYMMETRY(simetri, seperti efek cermin)
    -ada CONTINUITY(mata menduga/mengira melihat garis sebagai objek yang berkesinambungan, CONTINUITY membantu kita menafsirkan arah dan gerakan melalui komposisi)
    -ada COMMON REGION(elemen yang ditempatkan dalam wilayah yang sama, dianggap dikelompokkan)
    -ada SIMILARITY(bisa aja suatu elemen memiliki kesamaan terhadap elemen lainnya dikelompokkan)

    2. Hirarki =>ini membuat elemen yg lebih penting utk mucul.
    ada 2 loh pola si Hirarki Visual ini, apalagi klo bukan F-Pattern(kayak konten biasa ini dipakai umumnya) dan Z-Pattern(ini ni kalo ada web yg di desain lebih luas layout nya, so semua layar bisa keliatan gitu).

  58. Nama : Sarah Susanty O. Tampubolon
    NIM : 11419007
    Kelas : 42TRPL1

    Prinsip Gestalt adalah meneliti fenomena bagaimana cara seseorang melihat desain yang kita buat.

    Ada 7 prinsip Gestalt, yaitu :
    1. Proximity : Elemen yang lebih dekat satu sama lain, cenderung dikelompokkan bersama.
    2. Common Region : Elemen yang ditempatkan dalam wilayah yang sama, dianggap dikelompokkan.
    3. Similarity : Elemen yang berbagi karakteristik visual yang sama dianggap lebih terkait dari yang tidak sama karakteristik visualnya.
    4. Closure : Mata cenderung mempersepsikan sosok yang tertutup dan lengkap, bahkan ketika ada garis-garis yang hilang.
    5. Symmetry :Elemen-elemen simetris cenderung dipersepsikan sebagai milik bersama tanpa memandang jaraknya.
    6. Continuity : Mata melihat kontur sebagai objek yang berkesinambungan.
    7. Common Fate : Terlepas dari seberapa jauh unsur-unsur terpisah atau seberapa berbedanya mereka tampil.

    Hierarki visual dapat ditunjukkan dengan :
    1.Size
    2.Color
    3.Layout
    4.Spacing
    5.Style

    Ada 3 aspek untuk melakukan hierarki pada layout, yaitu :
    1. Pilih satu titik fokus
    2. Gunakan grid
    3. Manfaatkan pola user melihat informasi: F-pattern dan Z-pattern

    Pola F-Pattern :
    1. Scanning garis horizontal di bagian layar atas, seperti membaca dari kiri ke kanan.
    2. Scanning secara vertikal di sisi kiri layar.
    3. Menemukan sesuatu yang menarik, lalu membaca secara normal.

    Z-Pattern
    1. Scanning garis horizontal di bagian atas halaman.
    2. Ketika mata mencapai ujung akhir, langsung mengarahkan pandangan ke bawah bagian kiri.
    3. Mengulangi pencarian secara horizontal di bagian bawah page.

Comments are closed.