Advertisement
  1. Design & Illustration
  2. Icon Design
Design

10 Gaya yang Telah Berubah dalam Wajah Ikon Desain

by
Length:LongLanguages:
This post is part of a series called 10 Years of Envato Tuts+!.
10 Essential Adobe Photoshop Brushes You Should Own
How to Create 10 Different Useful Layer Style Text Effects in Adobe Photoshop

Indonesian (Bahasa Indonesia) translation by Dwi Bagus Nurrohman (you can also view the original English article)

Sudah lama sejak saya melakukan artikel semacam ini, tetapi hari ini saya kembali, dan saya benar-benar berpikir Anda akan menyukai artikel ini. Kami akan menahan jus kreatif kami dan menghabiskan waktu berkualitas bersama menjelajahi sejarah dan evolusi makhluk kecil yang kami sebut sebagai "ikon".

Jadi, jika Anda menyukai desain ikon sebanyak saya (kepalan tangan digital sambil tersenyum seperti orang gila), cepat-cepat berhenti di mesin espresso terdekat dan ambil secangkir minuman kacang ajaib, lalu naiklah dengan lembut kembali ke kursi dan biarkan perjalanan dimulai.

1. Ikon. Apa, Kapan, dan Mengapa

Yah, saya kira banyak dari Anda sudah tahu jawabannya, tetapi jika kelas ilmu sosial "Metode Penelitian dan Teknik" mengajari saya apa saja, itu untuk setiap studi (yang jelas artikel ini), Anda harus selalu mulai dari tingkat akar konsep Anda dan kemudian secara bertahap membangun jalan Anda menggunakan beberapa lapisan informasi.

Apa

Jadi, "ikon" adalah kata benda asal Yunani (eikόn), dan didefinisikan menurut kamus online Merriam Webster sebagai "gambar agama konvensional yang biasanya dilukis pada panel kayu kecil dan digunakan dalam pengabdian umat Kristen Timur."

Sekarang, saya pikir kita semua bisa mengangkat alis dan setuju bahwa ini bukan semacam "ikon" yang kita minati, karena kita sebenarnya tidak dalam bisnis melukis gambar-gambar yang memuji dewa di kayu (atau Saya kira sebagian besar dari kita tidak), jadi mari kita coba pendekatan istilah dari perspektif teknologi yang lebih modern.

Dari sudut pandang digital, "ikon" adalah "simbol grafik pada layar tampilan komputer yang mewakili objek (seperti file) atau fungsi (seperti perintah atau hapus)".

Penjelasan yang lebih mendalam dapat ditemukan pada versi online dari Cambridge Dictionary di mana mereka mendefinisikannya sebagai “gambar kecil atau simbol pada layar komputer yang Anda tuju dan klik (= tekan) dengan mouse untuk memberikan komputer sebuah petunjuk."

Sekarang, sebelum kita melanjutkan, saya ingin menunjukkan bahwa meskipun ikon pada awalnya dibuat dengan tujuan untuk digunakan dalam antarmuka grafis komputer (desktop), mereka dengan cepat membuktikan kegunaannya, membuat jalan mereka ke perangkat lain yang mendukung layar yang telah mengadopsinya karena kemudahan penggunaannya.

Kapan

Set ikon komputer yang pertama kali lahir pada tahun 1981, ketika ilmuwan komputer David Canfield Smith dan perancang Norman Lloyd Cox bergabung untuk membawa "metafora kantor" ke Xerox Star 8010, yang merupakan komputer kantor pertama yang dimaksudkan pada masanya. .

xerox star 8010 image provided by DigiBarn
Xerox Star 8010 - gambar disediakan oleh DigiBarn

Idenya adalah untuk membuat Norman mendesain satu set barang kantor seperti dokumen, folder, lemari arsip, dll., Yang akan menentukan gaya ikon pertama (pixel art) di mana semua yang lain akan didasarkan.

Kenapa

Alasan mengapa ikon muncul adalah karena komputer maju ke tahap di mana mereka membutuhkan simbol visual yang mampu memudahkan interaksi antara antarmuka perangkat lunak mereka (GUI atau Graphical User Interface) dan kebutuhan pengguna.

Ini berarti bahwa dari perspektif simbolisistik, ia memiliki fungsi dan makna, karena ia harus menyampaikan dengan cermat dan benar objek atau tindakan yang dimaksudkan untuk menggambarkannya, menggunakan isyarat visual yang bertujuan untuk menjelaskan sendiri.

Anda dapat mempelajari lebih lanjut tentang proses penelitian yang terlibat dalam pembuatan jenis metafora visual ini, dengan membaca 10 Tips Top saya untuk Membuat Ikon yang Luar Biasa, yang akan menjawab sebagian besar jika tidak semua pertanyaan Anda.

2. Mendefinisikan Gaya (Kreatif)

Karena artikel ini berfokus pada penyajian dan menjelaskan evolusi ikon dari perspektif visual, wajar saja jika kita mengambil beberapa saat untuk melihat apa sebenarnya "gaya" itu, karena banyak kali istilah tersebut disalahpahami.

Jika kita kembali ke kamus Merriam Webster, kita akan melihat kata benda didefinisikan sebagai "cara atau teknik tertentu yang dengannya sesuatu dilakukan, dibuat, atau dilakukan".

Satu definisi benar-benar berdiri dalam pikiran saya, karena menggambarkan istilah ini sebagai "penampilan yang berbeda, biasanya ditentukan oleh prinsip-prinsip yang dengannya sesuatu dirancang".

Menyatukan keduanya, dan kami segera menyadari bahwa gaya pada dasarnya adalah bentuk ekspresi (baik visual atau sifat lain) berdasarkan hubungan yang rumit antara metode dan prinsip yang dipilih dan dikembangkan dengan cermat oleh pencipta (artis), untuk mewujudkan visinya.

Sekarang, misalnya, gaya aktor dapat dengan mudah direduksi menjadi cara orang itu berbicara, berjalan, dan terlihat. Penyanyi dapat memisahkan diri dengan mengadopsi pakaian tertentu dan suara yang lebih lembut atau lebih dalam.

Desainer, di sisi lain, berusaha untuk mencapai rasa gaya dengan menanamkan karakteristik visual yang berbeda berdasarkan metode dan teknik yang dikembangkan selama proses eksplorasi dan penyempurnaan yang panjang, menjadikannya milik mereka sendiri.

Sekarang di sinilah menjadi sedikit rumit, karena dalam desain, gaya pribadi seseorang dapat dengan cepat diambil, ditiru dan diulangi, mengubahnya menjadi gaya kolektif, di mana desainer yang berbeda mengikuti teknik komposisi yang mirip atau tidak identik.

Yang sedang berkata, tidak ada gaya individu yang sepenuhnya murni, karena semua yang sedang dibuat pada dasarnya adalah iterasi visual dan / atau evolusi yang didasarkan pada karya orang lain sebelumnya.

3. Apa Yang Mempengaruhi Gaya?

Pada titik ini, kami telah berhasil memahami apa itu "gaya", tetapi mari kita luangkan waktu sejenak dan melihat faktor-faktor apa yang dapat memengaruhi perkembangan dan evolusinya.

Seperti yang kita semua tahu, untuk setiap bentuk seni ada seperangkat alat dan media yang akhirnya mempengaruhi pertumbuhan dan popularitasnya, dan desain ikon tidak terkecuali pada aturan itu.

Sebagai desainer, kami menghabiskan hari-hari kami menciptakan produk-produk digital yang dimaksudkan untuk hidup dalam media digital, yang dipengaruhi oleh keadaan dan evolusi teknologi yang ditentukan oleh kekuatan komputer dan tampilan kemajuan yang tersedia dalam masa hidup seseorang. Inilah sebabnya mengapa perjalanan dari ikon seni pixel ke yang penuh skuomorfik adalah hal yang sangat panjang, karena komputer tidak memiliki kekuatan untuk menampilkan jumlah piksel yang saat ini kita miliki.

Bagi desainer, ini berarti bahwa mereka selalu harus beradaptasi dan menjadi sepenuhnya bergantung pada medium, yang bergantung pada keadaan evolusinya dapat memengaruhi gaya mereka dengan menambah atau menghilangkan batasan kreatif.

Contoh sempurna dari ini adalah VR (Virtual Reality) di mana kita baru saja mulai membuat kemajuan dengan mencari tahu kemungkinan dan keterbatasan media baru dan menarik ini.

Pada awalnya, saya berjanji bahwa penelitian ini akan fokus pada presentasi dan menjelaskan secara singkat sepuluh gaya yang membentuk desain ikon ke dalam kondisi saat ini, jadi tanpa membuang waktu lagi, ambil satu teguk kopi panas itu dan mari kita lompat langsung ke dalamnya.

3.1 Tiga yang Asli

Kami akan memulai dengan menghadirkan trinitas dari mana semua dimulai.

Ikon Seni Piksel

Dulu

Seperti yang kita lihat beberapa saat yang lalu, gaya ikon pertama yang muncul diciptakan dan dibentuk oleh teknologi pada masanya, ketika komputer lambat dan desainer harus berurusan dengan tampilan monokromatik.

Misinya adalah memanfaatkan batasan yang ada dan membuat ikon menggunakan proses rumit penentuan posisi sejumlah piksel hitam di atas kisi-kisi persegi, hingga simbol mulai terbentuk, dari sinilah nama gaya berasal.

Gaya itu sendiri hanya dapat digambarkan sebagai huruf tebal, karena ia menggunakan garis-garis hitam yang keras, tebal, dan garis-garis yang lebih lembut, lebih tipis dan detail untuk bagian-bagian yang menyusun bagian dalam.

Bagi saya pribadi, ikon berbasis piksel sangat mengesankan karena bukan saja mereka yang pertama membuka komputer pribadi ke pasar konsumen, tetapi mereka juga berhasil tetap relevan karena kesederhanaan sifatnya, sejak lebih dari 36 tahun mereka. keberadaan, tidak banyak yang berubah, dan mungkin itu hal yang baik.

xerox 8010 star globalview os
Xerox 8010 Star GlobalView OS - gambar yang disediakan oleh ToastyTech

Sekarang

Hari ini, ikon pixel art terus mempertahankan popularitasnya, karena mereka merupakan pemicu nostalgia yang kuat, membawa kembali nuansa dan tampilan masa-masa awal komputasi, di mana gaya bukan tentang berapa banyak detail yang dapat Anda masukkan ke dalam ruang kecil, tetapi bagaimana Anda bisa menangkap perhatian mata menggunakan elemen visual sesedikit mungkin.

pixel icons by gustavo zambelli
Pixel Icons by Gustavo Zambelli

Ikon Isometrik

Dulu

Ini adalah tahun 1985, dan ATARI baru saja memulai debutnya TOS (The Operating System) dengan meluncurkan komputer Atari 520ST-nya, yang merupakan pertama kalinya kami melihat evolusi visual dari ikon piksel. Jika sebelumnya pengguna harus berurusan dengan ikon dua dimensi, sekarang pengalaman berubah menjadi lebih baik dengan pengenalan ikon isometrik, berdasarkan "metafora kantor" yang sama, yang menambahkan ilusi kedalaman dan dimensi ke GUI-nya (Pengguna Grafis) Antarmuka) menggunakan sumbu ketiga.

Dari segi gaya, ini bukan keberangkatan radikal. Anggap saja lebih sebagai peningkatan visual, karena mereka masih berbasis pixel, tetapi membawa beberapa perubahan halus seperti penambahan bayangan keras yang diproyeksikan dan ketebalan garis yang seragam.

Untuk beberapa orang, kata "isometrik" sepertinya bukan cara terbaik untuk memberi label gaya, karena menurut definisi, proyeksi isometrik adalah "metode untuk secara visual mewakili objek tiga dimensi dalam dua dimensi" di mana "tiga koordinat sumbu tampak sama-sama foreshortened dan sudut di antara keduanya adalah 120 derajat ”. Bagi saya pribadi, mereka dapat dilihat sebagai upaya pertama untuk membawa perspektif baru ke "metafora kantor" yang akhirnya mengarah pada apa yang sekarang kita sebut ikon isometrik.

atari tos
Atari TOS - gambar yang disediakan oleh ToastyTech

sekarang

Hari ini, gaya telah melihat keberangkatan radikal dari asal-usulnya yang berbasis pixel monokromatik, sangat bergantung pada penggunaan warna dan bentuk untuk membawa objek tiga dimensi ke kehidupan.

Dalam hal kompleksitas, gaya ini cukup sulit untuk dikuasai, karena itu mengharuskan desainer untuk secara visual menata kembali objek yang ingin mereka gambarkan menggunakan kubus yang diputar sebagai objek referensi, yang tidak selalu mudah, terutama ketika Anda berurusan dengan aneh benda berbentuk.

isometric icons by Thomas Brunsdon
Ikon Isometrik oleh Thomas Brunsdon

Ikon Skeuomorfik

Lalu

Maju cepat empat tahun, dan berbagai hal akhirnya mulai mematahkan pola dengan peluncuran komputer stasiun kerja NeXT Steve Jobs, yang datang dengan NeXTSTEP OS.

Jika sampai saat ini ikon dianggap sebagai simbol sederhana yang dimaksudkan untuk memudahkan interaksi antara manusia dan mesin, Jobs membawanya ke tingkat berikutnya dengan pengenalan ikon skuomorfik pertama, yang dirancang untuk meniru rekan-rekan mereka di dunia nyata. .

Ucapkan selamat tinggal pada garis tebal yang tebal, dan salam pada tingkat keahlian yang belum pernah terlihat di dalam GUI (Graphical User Interface), yang ditandai dengan penggunaan ilustrasi yang teduh dan sangat rinci, semuanya dijejalkan di dalam ruang kecil yang sama.

nextstep os 08
NeXTSTEP OS 0.8 - gambar yang disediakan oleh ToastyTech

Sekarang

Ketika komputer menjadi lebih kuat dan teknologi layar berkembang, skeuomorfisme menjadi lebih dari bentuk seni daripada simbol sederhana, mendorong teknik dan imajinasi penciptanya ke titik di mana objek yang digambarkan mengaburkan garis antara piksel dan kenyataan.

Dari gradien yang rumit hingga tekstur yang hidup, highlight dan bayangan, prosesnya bisa sangat sulit untuk dikuasai jika Anda belum memiliki pelatihan artistik. Jika Anda tertarik dengan gaya ini, Anda bisa mulai belajar dengan membuat ulang Stylized Strawberry Icon yang akan menunjukkan semua dasar-dasarnya.

Gaya itu sendiri menjadi sangat populer pada tahun 2007 dengan peluncuran iPhone Apple, dan tetap demikian hingga tahun 2012, ketika ada pergeseran dari ikon realistis ke ikon minimalis.

skeuomorphic icon by eddie lobanovskiy
Skeuomorphic Icon by Eddie Lobanovskiy

3.2. Evolusi

Pada titik ini, timeline kami akan mendapatkan sedikit buram di sana-sini, karena untuk beberapa gaya yang akan datang kami tidak akan dapat menentukan saat yang tepat ketika mereka muncul dan mendapatkan popularitas, itulah sebabnya saya memutuskan untuk kelompok dan memesannya berdasarkan atribut yang mereka bagikan dan berevolusi.

Ikon Garis

line icons by Justas Galaburda
Ikon Garis oleh Justas Galaburda dari Icon Utopia

Ikon garis adalah cabang evolusi langsung dari ikon seni piksel asli, yang menjadi salah satu gaya populer saat ini yang dipraktikkan, karena kemampuannya untuk menggambarkan citra yang kuat menggunakan bentuk dan garis sederhana.

Untuk filosofi desain, gaya itu sendiri menggunakan prinsip yang sama untuk memisahkan bagian-bagian penulisan objek yang berbeda menggunakan garis-garis tebal dan keras, tetapi melakukannya dengan menggunakan goresan yang berlawanan dengan kotak individu. Perubahan teknik ini telah mempermudah perancang untuk membuat dan menyesuaikannya, karena Anda sekarang berurusan dengan bentuk dan jalur alih-alih masing-masing piksel.

Di luar itu, gaya menjadi lebih organik, karena evolusi tampilan komputer memungkinkan untuk menggunakan garis melengkung dan sudut membulat, dibandingkan dengan masa lalu ketika Anda harus menghidupkan ide-ide Anda menggunakan bentuk persegi panjang super tajam.

Saya pribadi menyukai gaya ini, karena mudah untuk didekati dan menjadi baik sekaligus Anda sudah berlatih beberapa kali.

Ikon Glyph

Dari perspektif terminologis, kata benda "glyph" berasal dari "glyphe" Prancis yang berasal dari bahasa Yunani "gluphē" dan dapat didefinisikan sebagai "karakter atau simbol hieroglif". Dari perspektif desain, "mesin terbang" adalah gaya visual, di mana objek diwakili menggunakan bentuk monokromatik yang dapat memiliki ruang kosong halus yang memisahkan bagian-bagian penulisan yang berbeda.

Meskipun sifatnya sederhana, gaya dapat benar-benar efektif, terutama bila digunakan dalam ukuran yang lebih kecil, karena Anda dapat menggambarkan objek menggunakan hasil yang minimalis namun masih dapat dipahami, itulah sebabnya dapat dilihat sebagai pelopor desain datar.

glyph icons by martin david
Glyph Icons by Martin David

Ikon Datar

Ikon datar sebagai gaya menjadi populer di sekitar tahun 2012, dengan peluncuran bahasa visual Microsoft yang baru dirancang ulang yang kami kenal sebagai Metro (sekarang Fluent), yang datang sebagai respons langsung terhadap penyalahgunaan skuomorfisme oleh Apple.

Secara visual, ada perubahan besar dalam filosofi desain, yang bertujuan untuk pendekatan yang jelas, minimalis dengan memecah objek ke esensi dasarnya, menghapus sebanyak mungkin detail dalam proses.

Hal ini menyebabkan lahirnya ikon jenis baru yang mudah dipahami dan digunakan, karena fakta bahwa fokus telah diarahkan ke penggunaan warna dan bentuk geometris dasar yang cermat.

Akhirnya, desainer melihat potensi yang dimiliki desain datar, dan mereka mulai membuat ikon baru berdasarkan bentuk yang jelas, bebas dari gradien atau bayangan, dan mengembangkan gaya menjadi seperti sekarang.

flat icons by dominic flask
Flat Icons oleh Dominic Flask

Ikon Material

Ketika segalanya mulai berubah dengan desain datar, pada tahun 2014 Google memutuskan untuk menerima perubahan dan membawa desainer Matias Duarte untuk membantu menciptakan bahasa visualnya sendiri, yang disebut Material Design.

Sekarang, jika skuomorfisme terjadi terlalu banyak, dan desain datar baik, terlalu datar, Google memposisikan dirinya di suatu tempat di tengah dengan membawa kembali highlight dan bayangan tetapi memberi mereka kehadiran yang lebih halus, menciptakan gaya visual di mana objek ditumpuk lebih dari satu lain. Mereka melangkah lebih jauh dan menyusun panduan online yang cukup luas, di mana mereka berbicara tentang segala sesuatu mulai dari sifat material hingga prinsip tata letak dan gaya warna, yang membuatnya sangat mudah untuk melompat dan mengadopsi gaya.

Menurut pendapat saya, ikon material adalah tambahan yang bagus untuk desain datar, dan selama Google memiliki sesuatu untuk dikatakan, mereka akan terus menjadi populer.

material icon by jovie brett bardoles
Ikon Bahan oleh Jovie Brett Bardoles

Ikon Dimensi

Untuk gaya selanjutnya, agak sulit untuk memasang label, karena berada di antara batas ikon garis dan ikon isometrik, meminjam elemen kunci dari keduanya.

Saya hampir mematahkan otak saya untuk mencoba mendefinisikannya, dan akhirnya saya sampai pada kesimpulan bahwa yang paling cocok adalah dimensi, karena prosesnya berfokus pada penambahan dimensi atau kedalaman pada ikon dari perspektif horizontal.

Cara itu dilakukan adalah dengan menghadirkan bagian depan dan salah satu sisi objek, menggunakan bentuk persegi panjang untuk segala sesuatu yang tidak bersifat melingkar atau melengkung. Untuk objek yang termasuk dalam kategori kedua, mereka biasanya direpresentasikan menggunakan satu perspektif, bagian depan, yang menciptakan kontras dan pada saat bersamaan keseimbangan kohesif antara elemen-elemen yang menyusun ikon.

Dalam hal kesulitan, gaya ini agak mudah dipahami dan dikuasai selama Anda memiliki pemahaman dasar tentang perspektif, sehingga Anda dapat menetapkan dan memposisikan detail yang dibutuhkan untuk bagian depan dan samping dengan benar.

dimensional icons by ryan putnam
Dimensional Icons by Ryan Putnam

Ikon Digambar Tangan

Yang berikutnya ini berada dalam kategori tersendiri, karena sama menariknya dengan visualnya (lihat saja keindahan kecil ini), ini tidak terlalu sering digunakan karena sebagian besar waktu dipandang terlalu "menyenangkan". Gaya menjadi lebih populer setelah rebranding Dropbox, yang menunjukkan potensi untuk membangun identitas yang benar-benar unik, menggunakan garis seperti digambar tangan yang memiliki sifat goyah.

Menurut pendapat saya, ikon jenis ini dapat terbukti lebih ramah, karena hubungan antara mereka dan pengguna menjadi lebih hangat karena Anda berurusan dengan simbol-simbol yang terasa seolah-olah dirancang bukan oleh komputer, melainkan oleh nafas hidup, pernapasan. manusia.

Dalam hal kompleksitas, gaya bisa sulit untuk ditangani, terutama jika Anda tidak terbiasa menggambar dan menaungi, yang juga membuatnya sulit untuk ditiru, karena Anda tidak hanya membuat bentuk dengan mengeklik dan menyeret persegi panjang dan lingkaran.

hand drawn icons by corrine alexandra
Ikon Digambar Tangan oleh Corrine Alexandra

Ikon Animasi

Terakhir, kami memiliki beberapa ikon yang benar-benar unik karena sifatnya yang dinamis meminta Anda untuk mengkliknya. Walaupun mereka mungkin terlihat seperti gimmick visual murni, ikon animasi adalah masa depan interaksi, karena mereka memiliki kekuatan yang luar biasa ketika datang ke proses menarik antara pengguna dan antarmuka.

Tidak peduli bentuk apa yang mereka ambil (flat, line, dll.), Ikon animasi dapat membawa sesuatu yang baru dan segar ke meja, karena status kedua mereka (ketika melayang-layang), dan dengan demikian menggandakan informasi yang tersedia bagi pengguna, sejak saat melayang pada, mereka dapat membawa data yang berguna dalam hitungan detik.

Di dunia di mana VR (Virtual Reality) dan AR (Augmented Reality) adalah masa depan, orang dapat melihat potensi mengintegrasikan animasi dalam jalinan ikon.

Dalam hal kompleksitas, gaya bisa sulit dikuasai, karena Anda tidak hanya mendesainnya tetapi juga meluangkan waktu untuk menghidupkannya sepenuhnya, yang bisa sulit jika Anda tidak tahu persis apa yang ingin Anda ekspresikan melalui mereka .

Ikon Animasi oleh Dave Chenell

Beberapa Kata Akhir

Sebelum kita menyelesaikan semuanya, saya benar-benar ingin mengucapkan terima kasih kepada setiap desainer yang berpartisipasi dalam penelitian ini, dan yang paling penting ToastyTech untuk memberikan gambar dari sistem operasi.

Yang sedang berkata, saya harap Anda menikmati melalui sejarah apa yang kita sebut ikon dan menemukan sesuatu yang baru dan menawan.

Juga, jika Anda ingin mempelajari lebih lanjut tentang ikon, saya sangat menyarankan Anda membaca beberapa artikel berikut, karena saya yakin Anda akhirnya akan menemukan beberapa tips segar dan berguna.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.