Psikologi desain: Membentuk citra online Anda

Diterbitkan: 2021-11-23

Kami membahas pentingnya warna secara menyeluruh dalam dua bagian sebelumnya dari seri psikologi desain kami. Pilihan warna, bagaimanapun, hanyalah salah satu bagian dari perjuangan melawan desain yang buruk.

Baik Anda sedang membuat pola latar belakang untuk desain web baru atau sedang memikirkan tentang kemasan produk baru, pada akhirnya Anda harus meletakkan pensil di atas kertas dan mulai membuat sketsa. Tidak peduli apa bentuk yang Anda mulai bentuk, itu akan memiliki efek yang kuat pada pemirsa Anda.

Baca terus untuk mengetahui lebih lanjut tentang asosiasi umum yang akan dibuat pelanggan Anda antara bentuk yang Anda pilih dan apa yang mereka katakan tentang merek Anda secara keseluruhan. Plus, lihat beberapa contoh nyata tentang bagaimana bentuk-bentuk ini telah digunakan dalam semua jenis desain!

  • Garis
  • Lingkaran dan Oval
  • segitiga
  • segi empat
  • poligon
  • Bentuk abstrak

Garis lurus dan lengkung

Ketika datang ke pekerjaan garis, Anda benar-benar harus menarik garis antara sudut dan montok. Garis mungkin merupakan bentuk dasar yang melahirkan semua karya seni, tetapi logo dan desain web yang sangat bergantung pada kerja garis sama sekali tidak sederhana.

Biasanya, manusia lebih menyukai garis lengkung daripada garis lurus. Ini dapat dikaitkan dengan neurofisiologi sistem visual. Bahkan bayi yang matanya belum sepenuhnya terbentuk akan memusatkan perhatian mereka lebih lama pada bentuk lengkung daripada pada garis tajam dan bersudut.

Tangkapan layar dari situs web Affinity yang menampilkan logo segitiga bundar mereka
Tepi bulat logo Affinity melembutkan efek keseluruhannya pada pengguna

Namun, kurva tidak serta merta meningkatkan jumlah waktu pengguna akan memusatkan perhatian mereka pada desain Anda. Faktanya, sudut tajam lebih cenderung menarik perhatian pengguna Anda dengan cepat. Dimana kurva berkonotasi kelembutan dan kompleksitas, garis tajam dan sudut berkonotasi keseriusan dan kesederhanaan.

Penelitian telah menunjukkan bahwa objek sudut dapat memicu rasa ancaman. Ketajaman bentuk telah terbukti meningkatkan aktivitas di amigdala, yang merupakan area otak yang memproses rasa takut. Karena alasan itu, sudut tajam sering kali menuntut perhatian audiens Anda dan menarik perhatian lebih cepat daripada rekan-rekan mereka yang melengkung.

Anda dapat menggunakan pola respons alami manusia ini untuk membuat desain yang membuat audiens Anda merasakan sesuatu. Untuk merek yang menyenangkan dan ringan, garis lengkung dapat membantu Anda memecah blok teks di situs dan menciptakan kesan imajinasi. Namun, untuk persona merek yang lebih serius, sudut tajam dan garis lurus akan membantu mendorong rasa gravitasi.

Tangkapan layar dari situs web The Inlay yang menampilkan latar belakang putih dan tiga garis tegak lurus
Studio kreatif The Inlay menggunakan garis tipis dan lurus untuk memecah situs minimalis mereka dan membuat mata Anda terus bergerak

Studio kreatif The Inlay menggunakan garis lurus dan desain minimalis untuk menarik perhatian Anda saat menggulir halaman, tetapi menghindari penggunaan sudut tajam yang berlebihan yang dapat memicu respons negatif.

Namun, perusahaan konsultan teknologi Affinity menggunakan banyak bahasa berorientasi hubungan di seluruh situs web mereka. Logo panah bulat dan bentuk melengkung di seluruh desain terasa jauh lebih mudah didekati daripada citra tradisional dan kaku yang digunakan di ruang teknologi.

Lingkaran dan oval

Jika Anda menyebut seseorang persegi, Anda mungkin menyindir bahwa mereka membosankan. Sebaliknya, kemudian, berarti lingkaran berkonotasi kesenangan, masa muda, dan mentalitas riang. Masuk akal karena perhatian bayi telah terbukti bertahan lebih lama untuk garis lengkung, mereka juga cenderung lebih menyukai mainan melingkar.

Keterbukaan dan kebersamaan muncul dalam pikiran ketika pemirsa Anda melihat sebuah lingkaran. Bentuk bulat juga dapat berkonotasi dengan perasaan komunitas atau perlindungan—seperti merasa aman dalam gelembung Anda sendiri atau bahkan pelukan yang menyenangkan. Karakteristik lain dari lingkaran dapat mencakup persahabatan, kehangatan, feminitas, dan kelahiran kembali (pikirkan: lingkaran kehidupan).

Tangkapan layar dari situs web Ring yang menampilkan empat produk bel pintu mereka
Lampu tombol berbentuk cincin pada produk itu sendiri adalah isyarat visual lain bagi pengguna Dering

Dari perspektif penamaan, bel pintu Ring telah menyentuh indra penggunanya. Secara auditori, Anda dapat membayangkan "cincin" bel pintu sementara secara visual, "cincin" yang dibayangkan itu terikat pada logo mereka dan cara perangkat keras fisik dirancang.

Tangkapan layar dari halaman menu utama Netflix untuk acara The Circle. Punggung dua sosok wanita melihat layar kontestan
Lingkaran ditemukan di gambar profil, bentuk tombol, dan bahkan desain arsitektur bangunan tempat para kontestan tinggal

The Circle, acara kompetisi realitas Netflix, adalah tempat lain di mana merek melingkar paling masuk akal. Premisnya adalah sekelompok orang yang mungkin atau mungkin tidak mengatakan yang sebenarnya tentang identitas mereka mencoba untuk mendapatkan popularitas di antara rekan-rekan mereka hanya melalui platform media sosial yang disebut The Circle. Objektif? Tetap berada di dalam komunitas—tetap berada di The Circle.

segitiga

Percepatan, gerak, dan keseimbangan, segitiga dengan mudah menggambarkan aktivitas. Mereka energik, bentuk yang kuat yang dapat membangkitkan berbagai emosi dari kegembiraan hingga kehati-hatian.

Segitiga memiliki dampak, dan cara mereka diarahkan sangat penting, karena arah akan mengubah maknanya di benak konsumen Anda. Misalnya, segitiga yang mengarah ke atas dapat menunjukkan kekuatan, tetapi ketika diputar sedikit miring, segitiga tersebut dapat menunjukkan ketidakstabilan. Tetapi beberapa segitiga di semua arah yang berbeda dapat menunjukkan hiburan atau kegembiraan — seperti confetti!

Tangkapan layar dari gambar pratinjau untuk lagu hit Rick Astley "Never Gonna Give You Up" dengan ikon putar segitiga di tengah
Gambar pratinjau video YouTube ini menggunakan ikon "putar" segitiga

Tombol putar pada layanan streaming video atau musik favorit Anda kemungkinan besar hanya segitiga yang mengarah ke kanan. Ini menyerupai panah yang menunjukkan gerakan maju, berlawanan dengan dua garis lurus yang menunjukkan jeda ("break" harfiah antara dua garis lurus).

Tangkapan layar beranda HGTV yang menampilkan logo mereka
“Home & Garden Television” menampilkan rumah dengan segitiga sederhana di atas logonya

HGTV juga menggunakan desain segitiga dengan cara yang cerdas. Segitiga sama kaki terletak di bagian atas tanda kata mereka, cara yang jelas namun sederhana untuk menggambarkan atap rumah. Huruf "V" di ujung lain logo menjadi penyeimbang yang bagus saat mengarah ke bawah.

segi empat

Segi empat termasuk bentuk empat sisi. Kotak dan persegi panjang adalah contoh yang paling umum, tetapi trapesium, berlian, dan beberapa lainnya juga disertakan di sini. Kotak dan persegi panjang sering merupakan simbol stabilitas dan kemantapan, kesesuaian, atau keterusterangan. Sudut kanan mereka secara visual menunjukkan rasionalitas, keteraturan, dan struktur.

Kotak dan persegi panjang sering digunakan oleh merek yang ingin tampil sederhana atau pragmatis. Dari National Geographic hingga LinkedIn hingga Domino, kotak dan persegi panjang sudah umum—terutama untuk logo—di berbagai industri.

Jenis segi empat lainnya juga akan menyampaikan perasaan keteraturan itu, tetapi dengan sentuhan visual kontemporer yang lebih avant-garde. Berlian dapat digunakan untuk menyampaikan produk mewah atau high-end karena asosiasi bawah sadar kita antara bentuk dan batu permata. Segi empat seperti layang-layang dan belah ketupat sangat bagus untuk menunjukkan tingkat stabilitas tanpa menggunakan pola yang berlebihan.

Tangkapan layar pola jajaran genjang di situs desain Mokthar Saghafi
Tangkapan layar dari situs desain Mokthar Saghafi

Desainer web yang berbasis di Australia, Mokthar Saghafi menggunakan bentuk jajar genjang untuk pola geometris situs webnya. Angka empat sisi ditumpuk dengan rapi, mengisyaratkan stabilitas yang biasanya dikonotasikan dengan bentuk empat sisi. Mengaturnya sedikit tidak teratur sebagai belah ketupat alih-alih persegi panjang yang sebenarnya, menambahkan lapisan lain yang menarik secara visual.

Papan nama jalan berbentuk balok yang dihiasi dengan logo Lego
Foto oleh Faiz Zaki

Meskipun Lego mungkin tidak terlihat sederhana atau sesuai, mereka pasti stabil—bagaimana lagi Anda akan membuatnya? Logo persegi mereka juga merupakan panggilan balik visual ke produk mereka. Terlihat sangat mirip dengan bata Lego persegi dengan empat kancing.

Pentagon, segi enam, dan segi delapan

Dalam matematika dan desain, kumpulan bentuk ini dikenal sebagai "poligon". Poligon adalah istilah umum yang digunakan untuk menggambarkan bentuk geometris 2D apa pun, tetapi biasanya digunakan untuk yang memiliki 5 sisi atau lebih.

Di alam bentuk-bentuk ini ditemukan di mana-mana mulai dari sarang lebah hingga pola cangkang hingga kristal dan formasi batuan. Namun, dalam desain web, mereka lebih jarang digunakan. Ini bisa menjadi hal yang baik untuk klien Anda, karena ini akan membantu membedakan Anda dari tren desain yang lebih umum!

Kompleks dan futuristik, poligon sering digunakan untuk menciptakan aura kontemporer modern yang masih terstruktur dengan baik. Namun, poligon tertentu biasanya digunakan dalam industri khusus. Misalnya, perusahaan manufaktur dan perbaikan mobil dan mesin sering kali menggunakan desain segi enam dan segi delapan karena mereka menyerupai kepala baut.

Tangkapan layar dari beranda Built By Buffalo di mana proyek unggulan mereka ditampilkan dalam pola sarang lebah
Menggunakan pola ini untuk memamerkan karya mereka memungkinkan Built By Buffalo untuk menunjukkan banyak proyek di real estat web yang sangat sedikit

Tata letak heksagonal yang digunakan oleh agensi desain web Inggris Built By Buffalo adalah cara yang bagus untuk menunjukkan banyak contoh pekerjaan mereka di muka tanpa membebani beranda mereka. Ini kemudian digunakan di seluruh situs web untuk menampilkan foto kepala tim, memamerkan foto kantor yang menyenangkan, dan memberikan informasi penting.

Tangkapan layar dari situs web Pentagon Tours Tentang halaman. Tiga garis diagonal memotong foto tur sebagai elemen grafis
Garis kuat logo Pentagon Tours ditiru dengan perlakuan grafis pada gambar di situs

Pentagon adalah salah satu bangunan yang paling dikenal di dunia, dan diberi nama yang tepat karena struktur lima sisinya. Contoh utama penggunaan poligon untuk desain arsitektur, bangunan itu sendiri menyampaikan ketabahan dan stabilitas

Bentuk abstrak

Ada beberapa bentuk geometris dan abstrak lainnya yang umum digunakan di seluruh web dan desain produk, promosi, dan upaya branding. Mari kita lihat sekilas beberapa bentuk populer itu dan artinya.

gumpalan

Gumpalan sering kali merupakan bentuk yang dicirikan sebagai menyenangkan atau konyol. "Efek bouba/kiki" yang terkenal telah membuktikan bahwa individu lintas budaya dan sistem penulisan akan mengaitkan kata "bouba" yang tidak masuk akal dengan bentuk gumpalan, sementara "kiki" dikaitkan dengan bentuk abstrak runcing.  

Saat Anda memilih untuk menggunakan bentuk abstrak tajam dengan tepi runcing, Anda akan menarik perhatian pemirsa dengan cepat. Namun, dengan bentuk yang lebih bulat, Anda akan membuatnya lebih nyaman dan menyenangkan.

Tangkapan layar dari menu navigasi Buzzworthy dengan bentuk bulat yang menampilkan foto di samping tulisan "work. studio. team. contact. funhouse."
Bentuk animasi "bouba" muncul saat Anda membuka menu navigasi Buzzworthy u

Studio desain WordPress kustom berbasis di Brooklyn Buzzworthy menggunakan banyak bentuk gumpalan dan animasi transisi bulat untuk menampilkan gaya funky mereka yang menyenangkan.

salib

Sering digunakan untuk menunjukkan spiritualitas dan penyembuhan, koneksi, atau keseimbangan, salib muncul setiap saat dalam desain web. Ini adalah cara paling umum secara visual untuk mengkonotasikan pertemuan atau hubungan antara dua hal. Penggunaan umum lainnya untuk desain silang adalah sebagai tanda "plus", yang menunjukkan bahwa Anda dapat menambahkan sesuatu ke troli atau memperluas untuk informasi lebih lanjut.

Dalam logo, salib biasanya disediakan untuk organisasi keagamaan karena ikatan agama yang kuat, tetapi penggunaan bentuk lain yang lebih agnostik telah berhasil juga.

Tangkapan layar dari situs Palang Merah Amerika yang menampilkan logo "palang merah" ikonik mereka
Tangkapan layar dari situs Palang Merah Amerika

Palang Merah Amerika adalah salah satu organisasi paling terkenal yang menggunakan citra silang. Pekerjaan mereka berada di persimpangan individu yang membutuhkan bantuan dan individu yang dapat membantu selama atau setelah bencana. Logo Palang Merah menempatkan mereka di persimpangan dua hal itu, sementara juga secara visual menyinggung penyembuhan dan kesehatan.

Spiral

Spiral berkonotasi gerakan dan kemajuan. Spiral bulat dan loop sering menggambarkan kesempurnaan, keindahan, dan evolusi. Jika spiral Anda lebih runcing, seperti gerakan zig-zag, itu lebih mungkin untuk menyampaikan poros, perubahan, atau arah baru yang diambil oleh produk, perusahaan, atau layanan.

Arah spiral Anda juga akan banyak berkaitan dengan bagaimana hal itu dirasakan—terutama jika Anda berencana untuk menganimasikannya. Hal terakhir yang Anda inginkan adalah mencoba menyampaikan perkembangan, pertumbuhan, atau kreativitas dan pada akhirnya mengarahkan pengguna Anda pada spiral ke bawah secara literal. Seperti kebanyakan hal, sampaikan gerakan positif dengan membuat spiral Anda bergerak ke atas dan ke kanan jika memungkinkan.

Tangkapan layar dari beranda Rally yang menampilkan spiral kuning dengan latar belakang putih
Saat Anda menggulir, spiral akan bergerak lebih cepat dan berubah warna. Jika Anda berhenti sejenak untuk membaca, spiral perlahan bergerak ke atas

Rally, sebuah studio produk digital dari Salt Lake City, UT, menggunakan spiral sederhana dengan latar belakang putih untuk keseluruhan situs mereka. Warna yang berubah dan gerakan spiral yang dinamis membuat pemirsa tetap tertarik secara visual dan menciptakan pengalaman pengguna yang kohesif.

Bentuk organik

Bentuk organik termasuk daun, cabang, akar, gelombang, bintang, awan, dan banyak lagi. Di mana bentuk geometris dapat digunakan bersama untuk membuat gambar (contoh: persegi dengan segitiga di atasnya menjadi rumah sederhana), bentuk organik biasanya berdiri sendiri sebagai gambar tersendiri.

Bentuk-bentuk ini biasanya tidak beraturan atau asimetris (tetapi tidak selalu) dan mereka akan memiliki hubungan dengan alam dalam beberapa cara. Ide "awan" adalah penggunaan sempurna dari citra organik.

Tangkapan layar dari beranda SoundCloud. Logo mereka di sudut kiri berbentuk awan, bagian kirinya terdiri dari beberapa garis vertikal tipis
Logo SoundCloud menggunakan citra alami untuk membuat teknologi lebih menyenangkan dan dapat didekati secara visual

Ide penyimpanan "cloud" mengikat sesuatu yang sangat memabukkan dan teknis—sebuah "lokasi" tak berwujud yang menyimpan informasi—dan mengikatnya dengan alam, membuatnya lebih mudah didekati oleh para pemula teknologi. SoundCloud, misalnya, adalah situs berbagi musik di mana pengguna dapat mengunggah file audio dan membaginya dengan komunitas pecinta musik yang berkembang di seluruh dunia.

Pikiran di balik desain

Seperti biasa, ini bukan aturan yang keras dan cepat. Gunakan beberapa bentuk, bobot garis, dan perataan dalam desain Anda untuk menciptakan minat visual. Menggunakan beberapa elemen bersama-sama akan memungkinkan Anda untuk menceritakan sebuah kisah yang dapat dilihat dan dirasakan oleh pembaca Anda dengan mata dan perasaan mereka.

Tata letak adalah sumber daya Anda untuk semua hal desain, dan seri Psikologi Desain kami adalah tentang menggunakan elemen dasar desain untuk menarik pelanggan dengan pencitraan merek yang terencana dengan baik.

Baca bagian satu dan dua untuk menyelami lebih dalam arti warna dan bagaimana menggunakannya dalam cerita visual Anda. Kemudian, perhatikan bagian empat yang akan membahas pentingnya jenis huruf, penempatan konten, dan pilihan kata Anda.

Bagian 1
Bagian 2