Downloaded 92 times
Uploaded byMoch. Zamroni
Pengantar UI/UX
Dokumen ini membahas tentang UI/UX oleh Moch Zamroni, dengan penjelasan mengenai perbedaan UI dan UX, proses riset pengguna, serta elemen dan prinsip desain. Terdapat juga pembahasan tentang proses desain UX dan berbagai alat yang digunakan dalam pengembangan UI/UX. Penekanan pada pentingnya branding dan pengujian kegunaan dalam menciptakan pengalaman pengguna yang efektif juga disorot.
More Related Content
Pengantar UI/UX
- 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 notjust what it looks like and feels like. Design is how it works.” Steve Jobs.
- 4.
- 5.
- 6.
- 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.
- 9. Usability Testing Usability testingadalah 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 • Userresearch 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 • UserStories 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 adalahdokumentasi 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 tataletak 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 ofdesign • 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 ofdesign • 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 prosespenciptaan 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.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 32.
- 33.
- 34. Responsive Desktops & Laptops:1024×768 pixels or higher
- 36.
- 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