*Community Launching* UINUX adalah Komunitas Teknik Informatika UIN Malang, bagi kalian yang ingin belajar, sharing dan antusias di UI/UX, yuk join bersama kami di UINUX Malang. Launching ini juga akan ada Sharing Sessionnya loh. Tandai kalendermu: Tanggal : 11 April 2019 jam : 14:00-16:00 WIB Tempat : Ruang Meeting lt. 3, Teknik Informatika UIN Maulana Malik Ibrahim Malang. Speaker: 1. Satriya Kurniawan (Lead IXDA Malang) 2. Misbakhul Mustofin (DOT Indonesia ) 3. M Zamroni (Frontend at Tiket.com) 4. Afifudin Zuhri (UINUX) Kita tunggu kehadiran temen2 ya, jangan sampai ketinggalan, free snack & swag (limited!) Follow our official accounts: Instagram: @uinuxmalang Fanspage FB : uinuxmalang E-mail : uinuxmalang@gmail.com

1. Pengantar UI / UX
pakzam.web.id

2. Moch. Zamroni @pakzam
• Tiket.com (September 2013 – present)
• PhaseDev (Februari 2011 – September 2013)
• WPCharity (November 2010 – November 2014)
• LP3I Malang (Agustus 2009 – present)
• iCreativeLabs (Januari 2008 – Februari 2011)
• Immedia Visi Solusi (Oktober 2007 – Juni 2008)
• Zamdesign (December 2006 – present)
• Jade Indopratama (September 2006 – Juli 2007)
• Utero Advertising (Agustus 2006 – September 2006)
• Detai Advertising (Februari 2006 – Juni 2006)
• Gracia Design & Printing (Januari 2002 – Februari 2006)
• Indo.net Malang (September 2000 – Juni 2001)

3. “Design is not just what it looks like and feels
like. Design is how it works.”
Steve Jobs.

4. UI vs. UX

5. UI vs. UX

6. https://medium.com/insightdesign/memulai-menjadi-ui-designer-bagian-1-33317e1d1b40

7. UX vs. UI
• UX (user experience) Pengalaman pengguna:
persepsi dan respon seseorang yang dihasilkan
dari penggunaan atau penggunaan
terantisipasi dari sebuah produk, sistem, atau
jasa
• UI (user interface) Antarmuka pengguna:
merupakan bentuk tampilan grafis yang
berhubungan langsung dengan pengguna
(user)

8. UX to UI

9. Usability Testing
Usability testing adalah cara untuk mengevaluasi
sebuah produk atau jasa dengan cara
mengujinya kepada calon pengguna. Umumnya,
selama pengujian, pengguna akan mencoba
untuk menyelesaikan tugas yang diberikan,
sementara pemilik produk akan mengamati,
mendengar, dan mencatat temuan.

10. User Research
• User research adalah tahapan untuk
mengetahui kebutuhan user atau calon user.
Salah satu cara untuk mengetahui kebutuhan
user adalah dengan melakukan interview.
• Research sendiri adalah proses untuk
mengumpulkan data. Maka User Research
adalah proses untuk mengumpulkan data dari
user

11. User stories
• User Stories adalah deskripsi sederhana dan
singkat dari fitur yang diceritakan dari
prespektif user yang menginginkan fitur baru,
biasanya pengguna atau customer dari
perangkat lunak.
• User stories dibuat dengan mengikuti
template berikut: As a <type of user>, I want
<some goal> so that <some reason>

12. Persona
• Persona adalah dokumentasi yang berisi
penjelasan tentang karakteristik user
digabungkan dengan tujuan, kebutuhan dan
ketertarikannya yang menjadi target user yang
didapatkan dari hasil penelitian tentang user yang
sesuai target.
• Istilah Persona diperkenalkan pertama kali oleh
Alan Cooper yang menggunakan persona dalam
perancangan interaksi secara praktis untuk
menghasilkan produk high-tech.

16. Layout
Layout adalah tata letak dari suatu elemen
desain yang di tempatkan dalam sebuah bidang
menggunakan sebuah media yang sebelumnya
sudah di konsep terlebih dahulu.

17. Prinsip Visual Design
• Unity
• Alignment
• Continuation
• Emphasis
• Figure Ground Relationship
• Hierarchy
• Consistency
• Similarity
• White space
• Balance
• Proximity
• Closure

19. The elements of design
• LINE – The linear marks made with a pen or brush or the edge created
when two shapes meet.
• SHAPE – A shape is a self contained defined area of geometric (squares
and circles), or organic (free formed shapes or natural shapes). A positive
shape automatically creates a negative shape.
• DIRECTION – All lines have direction – Horizontal, Vertical or Oblique.
Horizontal suggests calmness, stability and tranquillity. Vertical gives a
feeling of balance, formality and alertness. Oblique suggests movement
and action
• SIZE – Size is simply the relationship of the area occupied by one shape to
that of another.
• TEXTURE – Texture is the surface quality of a shape – rough, smooth, soft
hard glossy etc.
• COLOUR – Colour is light reflected off objects. Color has three main
characteristics: hue or its name (red, green, blue, etc.), value (how light or
dark it is), and intensity (how bright or dull it is).

21. The principles of design
• BALANCE – Balance in design is similar to balance in physics. A large shape close to
the center can be balanced by a small shape close to the edge. Balance provides
stability and structure to a design. It’s the weight distributed in the design by the
placement of your elements.
• PROXIMITY – Proximity creates relationship between elements. It provides a focal
point. Proximity doesn’t mean that elements have to be placed together, it means
they should be visually connected in someway.
• ALIGNMENT – Allows us to create order and organisation. Aligning elements allows
them to create a visual connection with each other.
• REPETITION – Repetition strengthens a design by tying together individual
elements. It helps to create association and consistency. Repetition can create
rhythm (a feeling of organized movement).
• CONTRAST – Contrast is the juxtaposition of opposing elements (opposite colours
on the colour wheel, or value light / dark, or direction – horizontal / vertical).
Contrast allows us to emphasize or highlight key elements in your design.
• SPACE – Space in art refers to the distance or area between, around, above, below,
or within elements. Both positive and negative space are important factors to be
considered in every design.

22. Branding
Branding adalah proses penciptaan atau
peninggalan tanda jejak tertentu di benak dan
hati konsumen melalui berbagai macam cara
dan strategi komunikasi sehingga tercipta makna
dan perasaan khusus yang memberikan dampak
bagi kehidupan konsumen

23. UX Design Process

25. Google Design Sprint

26. Google Design Sprint

27. User Personas

28. Crazy Eights

29. Sticky Notes

30. Design System

32. Atomic Design Methodology

33. Grid Layout

34. Responsive
Desktops & Laptops: 1024×768 pixels or higher

36. Scrum Process

37. Software UI/UX
• Sketch
• Zeplin
• FIGMA
• Framer X
• Mockplus iDoc
• MockFlow
• Balsamiq
• Webflow
• Flinto
• Framer
• RapidUI
• Hype 3
• Principle
• Adobe XD
• Origami
• Invision
• Axure RP
• Proto.io
• Atomic
• UXPin
• ProtoPie

38. Maturnuwun
• https://dribbble.com/pakzam
• https://medium.com/@pakzam
• https://instagram.com/pakzam
• https://twitter.com/pakzam
• https://pakzam.web.id