Desain Antarmuka Web

April 20, 2024

Pengantar design antarmuka WEB: Materi PDF

Materi Pertemuan 1 - Understanding Layout

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

Sumber materi dari: https://m3.material.io/foundations/layout/understanding-layout/overview

Materi PDF: Pengenalan Interaksi Manusia Komputer

Materi Pertemuan 2 - Styles

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.

Sumber materi dari: https://m3.material.io/styles

Materi PDF: Persiapan Membangun Desain Antarmuka

Basic Figma

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

Flexible Design in Figma

Components

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.

Cari Blog Ini

Catatan Agus Nurwanto