Materi 8 Desain Mobile Disusun Oleh Yulyani Arifin

Materi 8 Desain Mobile Disusun Oleh : Yulyani Arifin, S. Kom, MMSI

Agenda • • • Pendahuluan Interpreting Design The Mobile Design Tent-Pole Desain untuk Pengalaman Terbaik Element Desain Mobile Desain Tools

Kemampuan Akhir yang Diharapkan • Mahasiswa mampu memahami konsep desain mobile • Mahasiswa mampu membuat desain mobile sesuai konsep desain mobile

MATERI BELAJAR Pendahuluan • The visual design of your experience is the direct representation of everything underneath. ( Fling, 2009) • Desain yang hebat memberikan harapan tinggi user pada website atau aplikasi, desain yang buruk menurunkan harapan user. • Tantangan di desain mobile : kreatifitas • Setiap device mempunyai kelebihan menciptakan pengalaman terbaik tergantung penggunaan medium aplikasi dan context.

MATERI BELAJAR Pendahuluan • Strategi pengembangan produk yang jalan di beberapa platform di komputer : lowest common denominator • Desain mobile juga mulai dari lowest common denominator.

MATERI BELAJAR Pendahuluan A Lowest common denominator design ( Fling , 2009)

MATERI BELAJAR Interpretasi Desain • Menurut Fling, desain adalah metode mengkomunikasikan informasi dengan cara menyusun dan mengunakan elemen desain untuk meningkatkan informasi dan memungkinkan user untuk memahaminya.

MATERI BELAJAR The Mobile Design Tent-Pole • Tent-Pole : istilah untuk mengambarkan film dan pertunjukan televisi. • Makna Tent-Pole : untuk bisnis dan kreatifitas • Contoh : Disney Land vs Pixar • Disney Land : • Kualitas tidak bagus hanya mengandalkan nama besar Disney • Menciptakan tent-pole product atau sejumlah besar produk untuk mendukung sejumlah peralatan yang tidak ada orang yang menggunakan.

MATERI BELAJAR The Mobile Design Tent-Pole • Pixar : • Mengunakan cerita bertema emosi khusus dan berkaitan dengan semua umur , multi budaya. • Desain Mobile : Berpikir seperti Pixar • cari kaitan emosi yang secara mendasar sesuai dengan banyak penonton, berbagai budaya, dan berbagai pengalaman desain.

MATERI BELAJAR The Mobile Design Tent-Pole Apple’s App Store ( fling , 2009)

MATERI BELAJAR Desain untuk Pengalaman Terbaik • Jangan hanya desain. • Ciptakan pengalaman passion dan komitment. menarik dengan

MATERI BELAJAR Element Desain Mobile • Berpikir sebagai seorang desainer Mobile perlu memperhatikan 7 element desain Mobile Context Message Look & Feel Layout Color Typography Graphics

MATERI BELAJAR Element Desain Mobile 1. Context • Tentukan context di app dengan cara bertanya diantaranya : • Tentukan siapa user ? Apa yang kita ketahui tentang user ? Apa kebiasaannya ? • Apa yang sedang terjadi ? • Dimana user kita ? • Bagaimana user menggunakan mobilenya ?

MATERI BELAJAR Element Desain Mobile 2. Message Apa yang ingin dikatakan tentang aplikasi atau website secara visual. Apa Message untuk setiap desain di atas ?

MATERI BELAJAR Element Desain Mobile 3. Look & Feel - Look & Feel is in a literal sense , as something real and tactile that the users can “look” at , then “feel” – something they can touch or interact with. ( Fling, 2009) - Look & feel digunakan untuk membangkitkan tindakan – bagaimana user akan menggunakan sebuah interface. - Gunakan Design Pattern atau documented solution untuk mendesain masalah yang dikenal dengan Style Guides

MATERI BELAJAR Element Desain Mobile 3. Look & Feel - Sebuah style guide sangat penting untuk projek mobile yang besar atau perusahaan dengan berbagai desainer karena perlu menjaga konsistensi dalam “look & feel “ dan mengurangi keperluan penyesuaian keputusan setiap desain. Contoh mobile design pattern ( http: //patterntap. com)

MATERI BELAJAR Element Desain Mobile Beberapa pola user interface

MATERI BELAJAR Element Desain Mobile Beberapa pola user interface di Design 4 Mobile

MATERI BELAJAR Mobile Desain Tools 4. Layout - elemen desain yang penting karena berkaitan dengan bagaimana user akan memproses page secara visual tetapi komponen visual dan struktural dari layout sering membuat bingung dan membuat desain menjadi lebih susah dihasilkan.

MATERI BELAJAR Mobile Desain Tools 4. Layout - Contoh layout Using a low fidelity wireframe to define the layout design element before visual design begins

MATERI BELAJAR Element Desain Mobile 4. Layout a. Different Layout for different devices - Bagian kedua dari desain layout - Pada desain mobile, elemen content yang utama adalah navigasi - Desain untuk website atau apps perlu menyediakan metode : - untuk melakukan task - navigasi ke page lain -membaca atau berinteraksi dengan content.

MATERI BELAJAR Element Desain Mobile 4. Layout a. Different Layout for different devices - Ada dua tipe layout navigasi : - touch - scroll

MATERI BELAJAR Element Desain Mobile i. Phone HIG, showing the layout dimensions of Safari on the Iphone

MATERI BELAJAR Element Desain Mobile Contoh : Layout dengan scroll application

MATERI BELAJAR Element Desain Mobile 4. Layout b. Fluid vs Fixed - Pertimbangan layout lainnya adalah bagaimana desain kita akan mempunyai skala sesuai perubahan orientasi device. - sebagai contoh : jika device diputar dari potrait menjadi landscape. - Jika fixed : selebar ukuran pixel - Atau fluid : kemampuan menyesuaikan di layar tergantung orientasi device

MATERI BELAJAR Element Desain Mobile 5. Color Hambatan yang berhubungan dengan Color adalah mobile screens, yang terdiri dari sejumlah berbeda warna dengan tingkat kedalaman. Ketika desain yang komplek tampil pada mobile device yang berbeda, keterbatasan kedalaman warna akan menyebabkan “banding” atau “unwanted posterization” pada gambar.

MATERI BELAJAR Element Desain Mobile 5. Color Contoh beberapa level posterization

MATERI BELAJAR Element Desain Mobile Contoh Device dan Color yang disupport

MATERI BELAJAR Element Desain Mobile 5. Color - Psikologi Warna Karakteristik Warna

MATERI BELAJAR Element Desain Mobile 5. Color - Palet Warna Menentukan palet warna dapat berguna untuk menjaga konsistensi dari penggunaan warna di desain mobile. - Ada 3 cara menentukan palet warna : 1. Sequential : primary, secondary, tertier color 2. Adaptive : leverage the most common color 3. Inspired : great pieces of design that might see online

MATERI BELAJAR Element Desain Mobile Contoh : palet warna ( http: //kuler. adobe. com)

MATERI BELAJAR Element Desain Mobile 6. Typography - “ Any customer can have a car painted any color that he wants so long as it is black “ ( Henry Ford) - Ada 2 pendekatan untuk penulisan di mobile screen : 1. subpixel : - pembagian setiap pixel menjadi merah, hijau dan biru pada level microscopic

MATERI BELAJAR Element Desain Mobile 6. Typography 2. Pixels per inch (PPI) - pixel density ditentukan dengan membagi lebar area dalam pixel dengan lebar area dalam inch - pada device mobile, semakin tinggi density of pixels , maka semakin tajam layar yang terlihat pada mata telanjang

MATERI BELAJAR Element Desain Mobile Microsoft clear Type dengan subpixels

MATERI BELAJAR Element Desain Mobile - Type Options : - Tipe text dalam mobile device seperti sans -serif, monospace fonts , Arial, dll - Perubahan Font : - Beberapa device APIs mengizinkan kita untuk load a typeface ke dalam native application. - s. IFR menggunakan Flash untuk mengantikan HTML text dengan flash text

MATERI BELAJAR Element Desain Mobile - Readability - Role yang penting dalam typography adalah kemampuan dibaca. - Berikut ini ada 6 aturan : 1. 2. 3. 4. Use a high-contrast typeface Use the right typeface Provide decent leading or line spacing Leave space on the right and left of each line 5. Generously utilize headings 6. Use short paragraphs

MATERI BELAJAR Element Desain Mobile 7. Graphics - Gambar yang digunakan untuk membangun pengalaman secara visual - Graphics dapat digunakan untuk menambah kesan “Look & Feel” atau content yang inline dengan text. -

MATERI BELAJAR Element Desain Mobile. Contoh : Ribot’s Little Spender application use graphics

MATERI BELAJAR Element Desain Mobile. Bentuk Graphics : 1. Iconography : penggunaan icon untuk mengkomunikasikan ide atau aksi pada user dalam visual. 2. Foto dan Gambar : menambah makna pada content

MATERI BELAJAR Element Desain Mobile. Dengan foto atau gambar Iconography

MATERI BELAJAR Mobile Design Tools. Mobile Design membutuhkan elemen desain dan tools yang khusus.

MATERI BELAJAR Mobile Design Tools. Desain untuk Device yang tepat - the spirit of your design should be able to be adapted to multiple devices - Fokus pada mendapatkan pengalaman yang terbaik dari market.

MATERI BELAJAR Mobile Design Tools. Desain untuk Berbagai Ukuran Layar - Mobile device terdiri dari berbagai bentuk dan ukuran. - Pilihan bagus untuk pelanggan tapi buruk untuk desain. - Berita baiknya adalah mayoritas ukuran mobile device berbagai orientasi yang sama yaitu potrait atau landscape walaupun berbeda dimensi.

MATERI BELAJAR Mobile Design Tools Perbandingan berbagai ukuran layar

MATERI BELAJAR Mobile Design Tools Tipical arah informasi pada device mobile

MATERI BELAJAR Mobile Design Tools The Iphone Calculator

MATERI BELAJAR Q & A