Minggu 11

Elemen-elemen apa saja yang harus diperhatikan jika ingin mengaplikasikan desain grafis pada perangkat mobile?

1. Konsep Resolusi Layar Pada Perangkat Bergerak 

Ketajaman warna dan detail gambar pada tampilan bitmap bergantung pada banyaknya pixel. Warna atau resolusi yang membentuk gambar tersebut. Hal ini berkaitan erat dengan kemampuan monitor dan VGA (Video Graphic Adapter ) yang digunakan. Jika gambar tampilan bitmap berresolusi tinggi di tampilkan pada monitor yang berresolusi rendah akan mengakibatkan gambar terlihat kasar , bahkan terlihat kabur berbentuk kotakkotak(juggy) jika dilakukan pembesaran gambar. Satuan untuk ukuran grafis jenis bitmap ini adalah dpi (dot per inch) yang berarti banyaknya titik dalam satu inci. Resolusi pada perangkat bergerak terdiri dari : 

1. Resolusi HD (720p) HD adalah singkatan dari High Definition. HD berarti pixelnya 1280 x 720. 
2. Resolusi Full HD (1080p) Full HD adalah kelanjutannya dan sekarang sudah menjadi standar resolusi layar di pasaran. Full HD adalah 1920 x 1080 pixel. 
3. Resolusi QHD (2k) QHD atau Quad HD memiliki definisi empat kali lipat dibanding HD Standar. Berarti bisa memasukkan jumlah pixel empat biji layar HD kedalam satu layar QHD dengan ukuran sama. Resolusi pixel QHD adalah 2560 x 1440 
4. Resolusi Ultra HD (4k) 4K adalah 4096 pixel, dan Ultra HD adalah 3840 pixel. Ultra HD adalah 3840 x 2160, sementara 4K adalah 4096 x 2160. Mereka biasanya disingkat menjadi 2160p berhubung perbedaan jumlah pixelnya tidak begitu besar.

2. Konsep Layout Pada Apps Perangkat Bergerak 

Layout mendefinisikan struktur visual untuk antarmuka pengguna, seperti UI sebuah aktivitas atau widget aplikasi. Layout dapat dideklarasikan dengan dua cara: 

 Deklarasikan elemen UI dalam XML. Android menyediakan sebuah kosakata XML sederhana yang sesuai dengan kelas dan subkelas View, seperti halnya untuk widget dan layout. 

 Buat instance elemen layout saat waktu proses. Aplikasi bisa membuat objek View dan ViewGroup (dan memanipulasi propertinya) lewat program.

Layout pada aplikasi perangkat bergerak terdiri dari : 

1. Linear Layout 

LinearLayout adalah sekelompok tampilan yang menyejajarkan semua anak dalam satu arah, secara vertikal atau horizontal 

2. Relative Layout 

RelativeLayout adalah Layout ini menampilkan komponen dalam posisi relatif. Posisi masing-masing Layout dapat ditentukan sebagai relatif terhadap elemen saudara (seperti di sebelah kiri atau di bawah tampilan lain) atau pada posisi relatif terhadap area RelativeLayout induk (seperti sejajar dengan bagian bawah, kiri atau tengah). 

3. Frame Layout 

Layout ini adalah layout yang paling sederhana. Layout ini akan membuat komponen yang ada didalamnya menjadi menumpuk atau saling menutupi satu dengan yang lainnya (layering). Komponen yang paling pertama pada layout ini akan berada dibawah komponen-komponen diatasnya. Pada penggunaan fragment, FrameLayout memiliki kemampuan untuk menjadi container untuk tiap fragment didalam sebuah Activity. 

4. Grid Layout 

GridLayout ini diperkenalkan pada API level 14 (Android 4.0 / Ice Cream Sandwich), layout ini akan memberikan kemudahan dengan mengakomodir komponen didalamnya ke dalam bentuk Grid (Kolom dan Baris). Dalam sebuah referensi, GridLayout merupakan komponen Layout yang sangat fleksibel dan dapat dimanfaatkan untuk menyederhanakan pembuatan Layout UI yang bersifat kompleks dan bersarang yang terdapat di komponen Layout lainnya.

3. Konsep Tipografi Yang Sesuai Untuk Disain Grafis Aplikasi Perangkat Bergerak 

Desain grafis ternyata bukan sekedar bagaimana memainkan warna dan layout tapi ada satu hal lagi yang perlu diperhatikan yaitu tipografi. Tipografi merupakan komponen paling penting dalam desain grafis yang tidak bisa ditinggalkan. Seorang desainer bertanggung jawab untuk mengetahui seluk-beluk seputar tipografi, karena dengan begitu ia akan lebih mudah untuk membuat sebuah tipografi yang baik dan berciri khas. Oleh karena itu, desainer yang baik perlu mempelajari peraturan dan pedoman spesifik sehingga dapat mengembangkan kemampuannya dalam membuat tipografi. Tipografi yang sesuai untuk disain grafik pada aplikasi perangkat bergerak adalah : 

1. Roman 

Huruf di keluarga Roman memiliki ciri khas tersendiri yang muda dikenali. Huruf Roman memiliki ketebalan dan ketipisan pada setiap garis di huruf – hurufnya. Semua huruf yang ada di bawah naungan kategori Roman memiliki ciri khas klasik, anggun, tegas, lemah gemulai dan feminim. Keluarga huruf Roman sudah ada sekitar abad 11 atau 12. Karena itu, huruf Roman merupakan salah satu kategori huruf yang paling tua. Jenis font yang ada di kategori huruf Roman antara lain Bodoni, Georgia, dan Times New Roman. 

2. Egyptian 

Huruf yang berada di bawah keluarga Egyptian memiliki ciri huruf seperti papan. Berbeda dengan kategori Roman yang memiliki tebal tipis di hurufnya, Egyptian memiliki ketebalan yang hampir sama di setiap hurufnya. Kesan yang ditimbulkan oleh jenis huruf Egyptianadalah kokoh, kuat, kekar, dan stabil. Jenis font yang ada di kategori Egyptian adalah Rockwell dan Typo Slab – Serif. 

3. Sans Serif 

Huruf yang berada di bawah keluarga Sans Serif hampir mirip dengan huruf yang berada di bawah keluarga Roman, hanya saja jenis huruf ini tidak memiliki sirip di ujung. Ketebalan hurufnya pun tidak tebal tipis, melainkan solid. Kesan yang ditimbulkan jenis huruf ini adalah modern, kontemporer, dan efisien. Bisa dibilang huruf di kategori Sans Serif merupakan versi modern dari Roman. Jenis font yang ada di kategori Sans Serif adalah Arial, Century Gothic, Futura, Helvetica, Lucida Grande, Trebuchet MS, dan Verdana. 

4. Script 

Sama seperti namanya, huruf yang berada di bawah kategori ini memiliki rupa layaknya tuliksan tangan. Tetapi bukan huruf cetak ya. Seperti tulisan tangan sambung yang dibuat dengan pena, kuas, atau pensil tajam. Biasanya huruf di bawah kategori ini memiliki ciri khas miring ke kanan. Kesan yang ditimbulkan oleh kategori huruf ini adalah pribadi dan akrab. Jenis font yang ada di kategori ini adalah Freestyle Script dan French Script. 

5. Miscellaneous 

Huruf yang berada di kategori ini tidak memiliki ciri khas atau rupa yang spesifik seperti 4 kategori lainnya. Huruf yang berada di bawah kategori ini biasanya merupakan pengembangan dari bentuk – bentuk yang sudah ada, hanya ditambahkan hiasan, ornament atau garis – garis dekoratif. Jenis font yang ada di bawah kategori ini sangat banyak, antara lain Comic Sans MS, Joker, dan Magneto.

4. Format Gambar Yang Dapat Disisipkan Dalam Apps Perangkat Bergerak 

Pengertian Format Gambar adalah suatu representasi spatial dari suatu obyek, dalam pandangan 2D atau 3D. Format file gambar yang ada saat ini : 

 Bitmap (BMP), 

 Joint Photographic Expert Group (JPEG/JPG), 

 Graphics Interchange Format (GIF),  Portable Network Graphics (PNG), 

 Tagged Image File Format (TIFF), 

 Icon (ICO), 

 Enchanced Windows Metafile (EMF), 

 PCX, ANI (Animation), 

 Cursor (CUR), 

 WBMP (WAP BMP), 

 Adobe Photoshop Document (PSD),  Corel Draw (CDR).

5. Konsep Warna Pada Apps Perangkat Bergerak 

Dalam pengolahan image, dikenal dua macam warna paling populer yang menjadi standar internasional, yaitu RGB dan CMYK. 

1. RGB adalah singkatan dari Red-Green-Blue. 3 warna dasar yang dijadikan patokan warna secara universal (primary colors). Dengan basis RGB, seorang desainer bisa mengubah warna ke dalam kode-kode angka sehingga warna tersebut akan tampil universal. Dasar warna ini menjadi standar pasti dalam konteks profesional, seorang desainer tidak bisa mengatakan sebuah warna berdasar pertimbangan subektif, misal: biru muda menurut orang awam adalah birunya langit di siang yang cerah, hal ini bisa jadi berbeda bagi orang lain dengan pertimbangan yang lain pula. Untuk menyamakan persepsi dalam definisi warna, perlu adanya standar internasional dalam konteks kerja profesional. Dengan standar RGB, seorang desainer dapat mengatakan warna dengan komposisi angka yang jelas, warna biru memiliki komposisi perpaduan antara unsur Red, Green, Blue dengan derajat angka untuk R : 115 – G : 221 – B : 240.

2. Standar warna internasional lainnya yang digunakan untuk dunia percetakan adalah CMYK yang merupakan Singkatan dari Cyan – Magenta – Yellow, dan K mewakili warna hitam. Seperti halnya RGB, CMYK menggunakan standardisasi warna dalam koordinat. Rangenya antara 0 – 100 sehingga kehadiran unsur K sangat menentukan. Berapapun koordinat CMY-nya, selama K- nya 100 maka warna tersebut akan jadi warna hitam. CMYK merupakan standar warna berbasis pigment-based, menyesuaikan diri dengan standar industri printing. Sampai saat ini dunia cetak- mencetak memakai 4 warna dasar dalam membuat warna apapun.

6. Konsep Input Pada Apps Perangkat Bergerak 

Masukan (input) merupakan awal dimulainya informasi. Bahan mentah dari informasi adalah data yang terjadi dari transaksi yang dilakukan oleh organisasi. Desain input digunakan untuk merancang tampilan layar dikomputer yang menggambarkan bagaimana bentuk pemasukan data. Proses input melibatkan 3 tahapan utama yaitu : 

 Penangkapan Data (Data Capture), Merupakan proses mencatat kejadian nyata yang terjadi akibat transaksi yang dilakukan ke dalam dokumen dasar 

 Penyiapan Data (Data Preparation), Yaitu mengubah data yang telah ditangkap kedalam bentuk yang dapat dibaca oleh mesin (Machine Readable Form 1), misalnya kartu plong, pita magnetik/disk magnetick) 

 Pemasukan Data (Data Entry), Merupakan proses membacakan atau memasukan data ke dalam komputer 

Langkah-langkah Desain Input 

Yang perlu didesain secara rinci untuk input adalah bentuk dari dokumen dasar yang digunakan untuk menangkap data, kode-kode input yang digunakan dan bentuk dari tampilan input di alat-alat input. Langkah-langkanya sebagai berikut :

 Menentukan kebutuhan input dari sistem baru Input yang akan didesain dapat ditentukan dari DAD sistem baru yang telah dibuat. Input DAD ditunjukan oleh arus data dari suatu kesatuan luar ke suatu proses dan bentuk tampilan input di alat input yang ditunjukan oleh suatu proses pemasukan data.

 Menentukan parameter dari input a. Bentuk dari input, dokumen dasar atau bentuk isian di alat input (Dialog layar terminal) b. Sumber input c. Jumlah tembusan untuk input berupa dokumen dasar dan distribusinya d. Alat input yang digunakan e. Volume input f. Periode input.

Cara Mengurangi Input sistem 

 Menggunakan kode 

 Data yang relatif konstan disimpan dalam file acuan, gunakan kode untuk mengambil datanya.  Jam dan tanggal diambil da 

 Rutin perhitungan dilakukan oleh sistem. 

 Penomoran/pengkodean Otomatis 

 Penggunaan nilai default 

 Input data berdasarkan filter tertentu. 

 Gunakan kontrol pilihan

 Hindari karakter yang mirip 

 Panjang kode sebaiknya sama

7. Desain Grafis untuk Apps Perangkat Bergerak yang sesuai dengan UX dan UI 

User Interface Design atau desain UI adalah sebuah desain keseluruhan gaya dan komponen yang ditampilkan di halaman web. Contohnya seperti tata letak dan bentuk desain menu, ikon, warna, gambar, tombol, dan semua komponen lainnya. Tampilan UI harus menarik, mudah dioperasikan, dan diposisikan dengan pas di laman web. Karena tujuan utamanya adalah untuk memberikan tampilan yang enak dipandang pengguna. User Experience Design atau desain UX adalah sebuah proses yang komprehensif untuk mengembangkan pengalaman pengguna sebuah produk web. Caranya dengan memaksimalkan step by step yang dilakukan penguna di dalam web tersebut. Sejak awal tahun 2019 sampai sekarang, ada beberapa desain antarmuka yang menjadi tren masa kini.

1. Ilustrasi 

Kreatif Menggunakan desain ilustrasi memang gak ada matinya deh. Termasuk dalam perancangan UI dan UX. Desain yang simpel, interaktif, dan efektif adalah idaman semua orang bukan? Ilustrasi menjadi aset visual yang akan diingat oleh pengguna. Bagus untuk menyampaikan citra situs web atau aplikasi buatanmu. Tambahkan ciri khas gaya gambar sebagai signature. Bentuknya bisa gambar manual atau digital seperti vektor dan kartun. Bukan hanya itu, gaya ini sangat memungkinkan para desainer untuk menyampaikan ideide yang rumit tanpa perlu menggunakan terlalu banyak kata. Cukup dari melihat gambar ilustrasi saja pengguna sudah dapat memahami informasi yang ingin disampaikan dalam sekejap.

2. Gradien 

Warna-warna gradasi juga sedang menjadi tren masa kini loh. Sebenarnya warna ini sudah populer sejak lama, tapi yang membedakannya adalah pemilihan kombinasi warna. Di tahun ini, para desainer lebih condong ke warna gradien yang cerah dan mencolok. Kemudian ditambah dengan ilustrasi tebal Perpaduan warna neon yang terang dan solid juga bakalan keren banget jika dikombinasikan satu sama lain. Contohnya seperti warna ungu, magenta, oren, tosca, dan lain-lain. Gaya seperti ini akan meninggalkan kesan yang modern dan eksklusif. Pemilihan warna yang akan digabungkan juga tidak boleh sembarangan, harus dipertimbangkan baik-baik. Ini akan menjadi cerminan situs web atau aplikasi buatanmu. Maka dari itu perlu banget seorang desainer UI UX untuk mempelajari psikologi warna. Tips: Gunakan teks berukuran besar untuk membatasi permainan warna yang berani. Tujuannya supaya pengguna bisa tetap fokus pada informasi yang disampaikan.

3. Grafis 

3D Tren berikutnya adalah grafis 3D, baik dalam bentuk desain statis maupun grafik 3D animasi. Hal penting yang harus diperhatikan seperti pergerakan objek, timing, dan kombinasi objek satu dengan objek lainnya. Ketika semuanya digabungkan, maka akan membentuk komposisi yang mampu menarik perhatian pengguna dan membuat mereka betah untuk berlama-lama di aplikasi, karena bentuknya yang unik (jika statis) dan pergerakannya yang dinamis (jika animasi). Situs web dengan desain grafis 3D akan lebih mudah dipahami informasinya dibandingkan desain 2D. Hanya saja jika menggunakan desain 3D, maka harus tetap memastikan kecepatan loading situs web rancanganmu loh.Durasi terbaik adalah 3 detik untuk waktu rata-rata yang pengguna habiskan untuk memutuskan apakah akan tetap tinggal di laman atau malah pergi menjelajah ke situs lain. 

4. Augmented Reality 

Mendesain virtual akan memberikan pengalam tersendiri, salah satunya adalah jenis augmented reality. Gaya UI UX design yang satu ini memungkinkan seorang desainer untuk melakukan banyak hal. Seperti mengambil keuntungan dari indera pengguna. Cerita dapat dibuat dari sudut pandang orang pertama. Menutupi kenyataan dengan menggunakan objek virtual. Sehingga semua terasa nyata. Pengguna bisa melihat hal-hal di luar nalar yang tidak akan pernah mereka lihat di dunia nyata. 

5. Hero Image

Jika saat berkunjung ke salah satu situs web, langsung disambut dengan foto berukuran besar yang ukurannya hampir memenuhi layar laptop mencakup sebagian besar layar, yaitu 25-50% dari total dimensi, maka jenis desain seperti ini disebut hero image. Hero image adalah gambar yang terpampang secara jelas dengan ukuran yang besar di halaman web. Biasanya diletakkan di bagian depan dan tengah laman. Bentuknya bisa statis maupun bergerak secara dinamis. Baru datang sudah disuguhkan dengan hero image. Otomatis akan memberikan pengalaman yang berbeda kepada pengguna. Sehingga mereka tertarik untuk mengulik informasi apa saja yang ada di lamanmu.

6. Ukuran Headline yang Besar 

Banyak situs web atau aplikasi yang menggunakan gaya ini karena memberi banyak bobot visual pada informasi penting yang ingin disampaikan. 

7. Liquid Graphics 

Selanjutnya adalah liquid graphics atau bentuk grafik yang mirip seperti cairan. Desain seperti ini memang sedang sering digunakan oleh para desainer. Bentuknya yang abstrak dengan warna-warna kompleks mampu ditampilkan ke dalam dunia digital. Warna seperti hologram akan memberikan kesan gemerlap dan eksklusif pada suatu desain. Sebenarnya liquid graphics bisa dibuat statis maupun bergerak layaknya air. Keunikan seperti ini pasti ampuh banget untuk menarik minat pengguna. Gunakan juga warna terang dan solid untuk menuliskan informasi, supaya pengguna bisa menangkap informasi yang ingin disampaikan. 

8. Desain Surealis dan Desain Abstrak 

Ada banyak banyak aliran seni rupa. Tak dapat dipungkiri, aliran-aliran ini turut mempengaruhi dunia visual kreatif di luar seni rupa. Contohnya desain surealis dan desain abstrak yang menjadi tren perancangan UI UX 2019 awal. Kedua desain ini dipakai untuk menggambarkan betapa kompleksnya kehidupan. Keduanya terus berkembang seiring dengan perkembangan digital. Selain itu, dengan desain seperti ini bisa meninggalkan pengalaman yang membekas kepada pengguna. Di mana sesuatu yang dianggap kuno disajikan dalam bentuk modern. Tren desain surealis dan desain abstrak sering digabungkan dengan elemen-elemen lain yang memiliki beberapa animasi dan ilustrasi yang sifatnya lucu, salah satunya adalah kartun. Dari gambar-gambar super unik ini, dapat menyiratkan informasi yang kemudian dimaknai oleh pengguna itu sendiri. Penggabungan antara realita dan abstrak memungkinkan koneksi emosional kepada pengguna.

9. Tipografi Antik 

Mirip dengan poin sebelumnya, kita mundur lagi ke gaya yang lebih vintage. Tipografi antik kembali menjadi tren perancangan desain pada 2019 awal. Tulisan dengan huruf serif akan lebih mudah dibaca karena sifatnya to the point. Sehingga informasi lebih mudah disampaikan pada pengguna. Selain itu, faktor lain yang banyak berkontribusi terhadap tren desain ini adalah resolusi layar yang lebih baik di semua perangkat daripada di masa lalu. Makanya gaya vintage dengan modern cocok digabungkan secara digital. https://ourscientific.wordpress.com/2019/10/19/konsep-pemodelan-desain-grafik-padaaplikasi-berbasis-perangkat/ http://diarsirazudin.blogspot.com/2019/10/konsep-pemodelan-desain-grafik-pada.html.

Contoh aplikasi desain grafis pada perangkat mobile

1. PicsArt

PicsArt adalah sebuah aplikasi yang menarik untuk disimak. Aplikasi ini memiliki fitur standard yang lengkap seperti crop, clone, curve, rotation, size sampai kepada pengaturan cahaya seperti color, brightness, opacity dan lainnya. Fitur ini biasanya diminati oleh pengusaha online shop untuk mengedit gambar dengan menempelkan stiker dan text. Disamping itu aplikasi ini juga bisa langsung membantu pengusaha untuk mempostingkan hasil edit ke sosial media. Keren kan? Sekarang saatnya mengunduh PicsArt app.

2. Adobe Photoshop Lightroom CC

aplikasi desain grafis android dari adobe yang satu ini mengutamakan pengaturan edit foto dengan pencahayaan. Dengan fitur pencahayaan dari Adobe Photoshop Lightroom CC ini Anda bisa menghasilkan editing foto yang begitu memukau serta tampak begitu menarik. Tersedia fungsi kamera yang memiliki berbagai fitur menarik yang dapat menangkap setiap momen penting walaupun dalam keadaan cukup gelap sekalipun.

3. Adobe Photoshop MIX

Aplikasi dari adobe yang satu ini menawarkan edit foto dengan menggabungkan foto dan memberikannya efek 3D. Hasil editan menggunakan Adobe Photoshop Mix dijamin tak kalah keren dengan aplikasi lainnya. Anda dapat memotong area tertentu yang diinginkan dan kemudian menggabungkannya dengan foto lainnya tanpa kesulitan pada bagian detilnya. Bagi Anda yang suka berkreasi dengan menggabungkan gambar, harus coba aplikasi desain grafis android Adobe Photoshop Mix.