DESAIN ANTAR MUKA WEBSITE

Brainstorming UI

Brainstorming UX

Material IO

Free Assets

Marketplace Design

Tools

Figma

Buku Bacaan

Blink — Malcolm Gladwell
Hooked — Nir Eyal
Sprint — Jake Knapp
Don’t Make Me Think — Steve Krug
Steal like an Artist — Austin Kleon

Forum

Refrensi Online / Blog / Medium

Seminar / Diskusi Panel / Meetup

FREE EBOOK FOR YOU : Download

PERTEMUAN 1 :

Materi : Pengantar Desain Antar muka (UI/UX)

Link source : https://m3.material.io/foundations/layout/understanding-layout/overview

60 min

Understanding layout

Layout is the visual arrangement of elements. It directs attention to the most important information on the screen and makes it easy for users to take action.

Product layouts must adapt to fit different screen sizes and form factors including mobile, tablet, foldable, and large-screen devices. When creating a layout, consider how the spacing and the parts of layout work together. Material layout guidelines apply to products built for Android and the web.

Takeaways

Column: one or more vertical blocks of content within a pane
Fold: on foldable devices, a flexible area of the screen or, on dual-screen devices, a hinge that separates two displays
Margin: the space between the edge of the screen and any elements inside of it
Multi-window mode: enables multiple apps to share the same screen simultaneously
Pane: a layout container that houses other components and elements within a single app. A pane can be: fixed, flexible, floating, or semi permanent
Spacer: the space between two panes
Window size class: opinionated breakpoint, the window size at which a layout needs to change to match available space, device conventions, and ergonomics

PERTEMUAN 2 :

Materi : Pengenalan Interaksi Manusia dan Komputer

Link Source : https://m3.material.io/styles

30 min

Styles

Styles are the visual aspects of a UI that give it a distinct look and feel. They can be customized by changing your Material theme.

PERTEMUAN 3 :

Materi : Persiapan Membangun Desain Antarmuka

15 min

We're exploring other ways of learning and exploring Figma.

Klik https://youtu.be/wvFd-z7jSaA untuk membuka sumber.

15 min

Klik https://www.youtube.com/watch?v=PNJxeD29ZTg&list=PLXDU_eVOJTx55HFubfbTL3ellJjBM2QE2&ab_channel=Figma untuk membuka sumber.

15 min

Overview

Components are elements you can reuse across your designs. They help to create and manage consistent designs across projects. You can create components from any layers or objects you've designed. These could be a whole range of things like buttons, icons, layouts, and more.

There are two aspects to a component

A main component defines the properties of the component
An instance is a copy of the component you can reuse in your designs. Instances are linked to the main component and receive any updates made to the component.

You can create components to use within a single file. Or, you can use team library to share components and styles across files and projects.

Klik https://www.youtube.com/watch?v=k74IrUNaJVk&list=PLXDU_eVOJTx5LSjOmeBYMuvaa4UayfMe4&ab_channel=Figma untuk membuka sumber.

PERTEMUAN 4 : HANYA ABSEN

PERTEMUAN 5 :

Klik https://www.youtube.com/watch?v=_bAiopgO5ek&ab_channel=Figma untuk membuka sumber.

PERTEMUAN 6 : HANYA ABSEN

PERTEMUAN 7 :

Materi : Peran Interaktif dan Ragam Dialog

PERTEMUAN 8 : UTS

SEMESTER 4 : DESAIN ANTAR MUKA WEBSITE

Brainstorming UI

Brainstorming UX

Free Assets

Marketplace Design

Tools

Buku Bacaan

Forum

Refrensi Online / Blog / Medium

Seminar / Diskusi Panel / Meetup

Understanding layout

Layout is the visual arrangement of elements. It directs attention to the most important information on the screen and makes it easy for users to take action.

Product layouts must adapt to fit different screen sizes and form factors including mobile, tablet, foldable, and large-screen devices. When creating a layout, consider how the spacing and the parts of layout work together. Material layout guidelines apply to products built for Android and the web.

Takeaways

Column: one or more vertical blocks of content within a pane

Fold: on foldable devices, a flexible area of the screen or, on dual-screen devices, a hinge that separates two displays

Margin: the space between the edge of the screen and any elements inside of it

Multi-window mode: enables multiple apps to share the same screen simultaneously

Pane: a layout container that houses other components and elements within a single app. A pane can be: fixed, flexible, floating, or semi permanent

Spacer: the space between two panes

Window size class: opinionated breakpoint, the window size at which a layout needs to change to match available space, device conventions, and ergonomics

Styles

Styles are the visual aspects of a UI that give it a distinct look and feel. They can be customized by changing your Material theme.

We're exploring other ways of learning and exploring Figma.

Overview

Components are elements you can reuse across your designs. They help to create and manage consistent designs across projects. You can create components from any layers or objects you've designed. These could be a whole range of things like buttons, icons, layouts, and more.

There are two aspects to a component

A main component defines the properties of the component

An instance is a copy of the component you can reuse in your designs. Instances are linked to the main component and receive any updates made to the component.

You can create components to use within a single file. Or, you can use team library to share components and styles across files and projects.

Posting Komentar

Formulir Kontak