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 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.

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

Pendahuluan A Lowest common denominator design ( Fling , 2009) 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.

The Mobile Design Tent-Pole 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.

The Mobile Design Tent-Pole 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.

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

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

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

Element Desain Mobile Context MATERI BELAJAR Element Desain Mobile 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 ?

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

Element Desain Mobile 3. Look & Feel 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

Element Desain Mobile 3. Look & Feel 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)

Beberapa pola user interface MATERI BELAJAR Element Desain Mobile Beberapa pola user interface

Beberapa pola user interface di Design4Mobile MATERI BELAJAR Element Desain Mobile Beberapa pola user interface di Design4Mobile

Mobile Desain Tools 4. Layout 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.

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

Element Desain Mobile 4. Layout 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.

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

iPhone HIG, showing the layout dimensions of Safari on the Iphone MATERI BELAJAR Element Desain Mobile iPhone HIG, showing the layout dimensions of Safari on the Iphone

Element Desain Mobile Contoh : Layout dengan scroll application MATERI BELAJAR Element Desain Mobile Contoh : Layout dengan scroll application

Element Desain Mobile 4. Layout b. Fluid vs Fixed 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