Perancangan Perangkat Lunak

Transkripsi

1 COLORING THE GLOBAL FUTURE Perancangan Perangkat Lunak Design for Software visual design & Interaction Design Pasca Sarjana UG

2 Design for Software: A Playbook for Developers, Erik Climzcak, 2013

3 Lanjutkan tugas perkelompok untuk visual desain : Typography, visual communication dan motion Setelah Selesai Prototype 1 menjadi Prototype 2.

4 Typography typography is one that will benefit your applications the most. It can massively improve the usability and overall aesthetic quality of your application Eight Ways to Improve Your Typography : 1. Pick a Scale and Stick with It 2. Use Consistent Spacing 3. Consider the Measure 4. A Little Can Go a Long Way 5. Pick a Good Body Font 6. Use a Single Family 7. Combine Two to Three Typefaces 8. Use a Good Ampersand

5 Visual Communication 1. Design As Though You re Designing for Yourself 2. Be Consistent Five Ways to Clarify Your Design 1. Slap a Grid on It 2. Establish Hierarchy 3. Remove the Junk 4. Check for Parallelism 5. Create Clear Affordances

6 MOTION When Should I Use Motion? : - Communicating status - Providing feedback - Showing changes in state - Attracting attention - Orienting the user - Indicating progress - Adding or removing list items - Sorting, filtering, or reordering items

7 IV. INTERACTION DESIGN

8 few other things to avoid when trying to facilitate flow : Avoid repeatedly prompting users for credentials Avoid asking users to fill out surveys Avoid input of unnecessary information Avoid asking multiple times for the same thing Avoid sign up or sign in before the application is useable Avoid using a modal pop-up to tell users an action was successful

9 Designing for Usability + Learnability Efficient Understandable Flexible Easy to remember Is easy to learn Has clear operation Is Attractive Is Focused

10 Ergonomics

11 In general, some digital displays just don t have the brightness to overpower the sun s intensity. When you need to design a UI intended for outdoor use, it s best to embrace highcontrast design tactics. Here are some high-contrast techniques I ve used to deal with intense lighting conditions: > Use white text on a black background. > Use black text on a white background. > Increase the font sizes. > Use thicker font weights. > Use sentence case rather than all caps for better letter recognition. > Avoid using gray text on a gray background.

12

13 DESIGN PATTERN A general reusable solution to a commonly occurring problem within a given context in software design. A design pattern is not a finished design that can be transformed directly into source or machine code. It is a description or template for how to solve a problem that can be used in many different situations.

14 Pttrns.com : specializes in mobile design patterns.

15 TUGAS 1. Tugas melanjutkan wireframe (tugas sebelumnya) dan prototipe yang telah dihasilkan pada MK SPK 2. Prototipe yang telah dihasilkan sebagai Prototipe ke 1 3. Prototipe ke 1 lengkapi dengan implementasi dari Visual design (color, typography, visual communication, motion) Menjadi Prototipe ke 2 4. Untuk menjadi prototipe ke 2 buat deskripsi implementasi dari 4 visual design dari teori hasil pemahaman masing-masing kelompok thd prototipe aplikasi yang dibuat 5. Contoh :

16 Prototipe untuk halaman resep rekomendasi untuk desain visual : 1. COLOR, halaman ini menggunakan cool dan warm color, warm color biru yang digunakan untuk membuat pengguna merasa relaks untuk mencoba menu yang direkomendasikan. karena sebenarnya tujuan dari pembuatan dapur pintar ini untuk memudahkan pengguna untuk memasak maka warna yang dominan akan diubah menjadi..

17 6. Uraian implementasi dari visual design tersebut untuk setiap halaman prototipe yang dibuat. 7. Hasil implementasi dalam bentuk uraian, deskripsi dan terbentuknya PROTOTIPE ke 2 menjadi Nilai UTS ( dalam bentuk file PDF), format SMTI06- NamaSistem.PDF à Tanggal 22 Juni 2015 ( ) 8. Sebelum menjadi hasil akhir UTS, akan dipresentasikan pada tanggal 15 Juni 2015 (tidak harus sudah selesai, sesuaikan kemajuan dari masing-masing kelompok). Presentasi menjadi Nilai Tugas. 9. Untuk 1 halaman prototipe buat Desain Visual Color à sesi siang dikumpulkan bentuk PDF