Dasar Desain Antarmuka Pengguna

Tim Ajar Mata kuliah DDAP

•
K Candra Brata
Design Process
• Wireframing
k.candra.brata@ub.ac.id
Proses Desain
Metodologi desain web

ideas generation

– Prototyping
– testing

A Practical Guide to Designing for the Web

by Mark Boulton
Design Brief

• Design brief  panduan desain yg disepakati antara

klien dan desainer.

• Brief sangat penting untuk membantu klien dan

designer untuk berkomunikasi dalam
bahasa/kerangka/konteks yang sama.

• Brief yang baik memberikan semua informasi dasar

yang diperlukan oleh desainer untuk menghasilkan
pekerjaan yang sesuai dengan ekspektasi klien.
https://desainerhaus.wordpress.com/2018/03/02/hal-wajib-dalam-design-brief-atau-panduan-pekerjaan-desain/
 Pra-perancangan Desain Web

1. Menentukan tujuan/goal
(berdasarkan brief dari klien & riset user)
2. Merancang sitemap
(alur proses halaman, navigasi dan link
interaksi ke halaman lainnya)
3. Mencari referensi website
(website serupa untuk referensi desain dan
UX)

http://bisakomputer.com/9-tahap-utama-dalam-mendesain-website/
 Pra-perancangan Desain Web

4. Membuat sketsa/wireframe
(gambaran kasar dari web yang akan
dibangun).
5. Menentukan skema warna dan Tipografi.

6. Layouting (Menentukan lebar konten dan

menggunakan sistem grid).
7. Manajemen file

http://bisakomputer.com/9-tahap-utama-dalam-mendesain-website/
1. Tujuan/goal

Manajemen konten, konsep dan gaya desain dirancang

berdasarkan tujuan.
Tujuan:
▪ Profil perusahaan, portofolio atau berjualan (e-
commerce)?
▪ Apakah hanya sebagai media eksistensi perusahaan,
media informasi, membangun citra/branding, atau
untuk mencari lebih banyak klien?

Fokus pada tujuan!

Jangan terlalu berlebihan dalam hal yang bersifat dekoratif

http://bisakomputer.com/9-tahap-utama-dalam-mendesain-website/
2. Sitemap

Sitemap: kerangka utama hubungan antara satu halaman dengan

halaman lainnya di sebuah website berisi navigasi utama, alur
proses halaman, dan link interaksi ke halaman lainnya.

http://bisakomputer.com/9-tahap-utama-dalam-mendesain-website/
Sitemap
Sitemap
 3. Get Your
References..
Menggali ide dengan merujuk pada website sejenis,
Sebagai bahan perbandingan
Mempelajari pengalaman pengguna (user experience/UX)

http://www.awwwards.com/
Get Your
References..
Web Design Trend

• Similar UI Pattern
• Hamburger menu
• Account Registration
• Long Scroll
• Card Layout
• Hero Image

• Microinteractions
• Material Design

• Rich Animation
• Loading animation
• Hover animation
• Gallery & slideshow
• Motion animation
• Scrolling
• Background animation / videos

• Responsive Design
• Flat Design

Sumber: http://www.awwwards.com/6-web-design-trends-you-must-know-for-2015-2016.html
WEB TREND &
FUTURE
https://99designs.com/
Dark
mode
Imperfections
that add
personality
Immersive
3D elements
Soft
shadows,
layers and
floating
elements
Hamburger Menu

Sumber: https://medium.com/@kollinz/hamburger-menu-alternatives-for-mobile-navigation-a3a3beb555b8
Registration Form

Sumber: https://www.freshdesignweb.com/css-registration-form-templates/
Card Layout

Sumber: https://www.awwwards.com/play-your-cards-right-exploring-the-cards-trend-in-web-design.html
Hover Animation

Sumber: https://codemyui.com/tag/hover-animation/
Hover Animation

Sumber: https://codemyui.com/tag/hover-animation/
Hover Animation (3D Card)

Sumber: https://codemyui.com/tag/hover-animation/
Hover Animation (3D)

Sumber: https://codemyui.com/tag/hover-animation/
Hover Animation (Pure CSS Fadein
Fadeout)

Sumber: https://codemyui.com/tag/hover-animation/
 4. Create
WireFrame
sketsa atau wireframe (istilah yg biasa digunakan dalam desain web)
berguna sebagai acuan dasar sebuah desain website.
Wireframe juga digunakan ketika presentasi ke klien untuk menghemat
waktu dan effort revisi.

Tool: 6. JustInMind 11. Figma

1. Lumzy
7. Mockflow 12. Adobe XD
2. Frame Box
3. Creately 8. Pencil Project 13. Marvel
4. Mockingbird 9. SimpleDiagrams 14. InVision
5. Hotgloo 10. Prototyper 15. Sketch
5. Skema warna & Tipografi

Pemilihan warna dan tipografi yang sesuai dengan tujuan.

Dengan menentukan skema warna terlebih dahulu, proses desain
website menjadi lebih efisien. Misal:
• Biru  kesan profesional dan formal
• Coklat  kesan klasik dan eksklusif.

Tool:
1. Kuler 6. Sphere

2. Color Scheme Designer 7. Pictaculous

3. Color Explorer 8. Colorspire
4. Toucan 9. Colourlovers
5. Colorotate
http://bisakomputer.com/9-tahap-utama-dalam-mendesain-website/
6. Lebar konten & sistem grid

1024 x 768  sistem grid 960 pixel

Multi device display  Responsive Web Design - Fluid grid

http://bisakomputer.com/9-tahap-utama-dalam-mendesain-website/
 Watch this!
Beginning Graphic Design: Layout & Composition
https://www.youtube.com/watch?v=a5KYlHNKQB8&index=4
&list=PLx03_0RRvUEE8w_ipVLwBjr9glIlU9G8M
Web & UI
Structure
http://webstyleguide.com/wsg3/6-page-structure/3-site-design.html
Web Layouting Example's Sliced Box Parts
Grid System
Struktur yg terdiri dari serangkaian garis
horizontal dan vertikal, digunakan untuk
mengatur konten.
 “..the grid system is a means to
introducing order into a design”
- Josef Müller Brockmann
Leonardo DaVinci, “The Vitruvian Man” 1492 Luca Pacioli and Leonardo da Vinci, 1498
Why Grid System?
• Grids enable you to build solid structure and
form into your designs
• Grid system helps designers to structure and
present content and imagery in a much more
readable, manageable way
• Creating consistency and familiarity in your
design
• It’s flexible!
Columns
Rows
Gutters
Margins
Baseline Grid
Baseline
A baseline grid is an underlying structure that
helps guide the vertical spacing
of your design.
 Video:

Using Baseline Grids

in Web & UI Design
InVision Design Snack #7

http://blog.invisionapp.com/design-snack-7-baseline-grids-in-web-ui-
design/
Column Grid
 Web Layouting CSS framework with Grid
• Why Grid System?
• Save time, save money, & reduce frustation
• Solid visual and structural balance in
website
• Offer more flexibility of User Experience
• Easy to follow for user
• Consistent
• Easy to follow, easy to update
• Elements
• Column, Margin, Gutter
• Example
• 960 Grid System – http://960.gs
• http://960.gs/demo.html
Web Layouting CSS framework with Grid
Web Layouting
960.Gs (960 Grid System) CSS Framework 12 column
Web & UI
Elements
Guidelines:

• Google Material Design

https://material.google.com/
https://design.google.com/
• iOS Human Interface Guidelines
https://developer.apple.com/ios/human-
interface-guidelines/
• Website Design
https://guidelines.usability.gov/
Responsive Web
Contoh
Contoh
 Prinsip dasar RWD

Sumber: http://www.tutorial-webdesign.com/prinsip-dasar-responsive-web-design/
1. Flow
2. Relative vs Static Unit
2. Relative vs Static Unit

Static Relative
widht/height pixel (px) percent (%)
font point/px em
3. Breakpoints
4. Minimun & maximum value
5. Nested Objects
6. Mobile or Desktop First
7. Web vs System Fonts
8. Bitmap vs Vector
Thank You
ANY
QUESTIONS?
You can find me at:
andra.course@gmail.com

k.candra.brata@ub.ac.id

FILKOM A.1.2 Building