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