lely monalisa
May 29 · 3 min read

May 27, 2019. first day of bootcamp UI/UX by Topcoder 2019 in Jogja Digital Valley with the speaker are Mas Afif Bimantara (Afif Bimantara) and Mas Khusnun Irawan (Khusnun Irawan) . The first speaker was presented by Mas Afif discusses the basic making UI design, so what must know?

1. UI Design Apps

UI Design is about how we make user interface which is will be used by the user. Design App has goal to realizing product owner’s design solves the problem in a product that contains flow, interface and scheme that will be used. UI Design Apps has stage design low prototyping and prototyping level.

  • Design Low Prototyping is about tools used by designer to make UI design for example sketch , figma , adobe XD
  • Prototyping level shows the stages product has reached.
Photo by Topcoder

2. Grid and Layout Size

It is so important for the designer to consider this issue. Grid is a series of vertical and horizontal lines that are used to subdivide a page vertically and horizontally into margins, columns, inter-column spaces, lines of type and spaces between blocks of type and images(Wikipedia). Grid will give impression clean and neat design which makes user easier to use interface and make it easier for developer to develop the product in code.

  • Clarify/order = grids bring order to layout making it easier for user to find and navigate through information.
  • Efficiency = allow designer to quickly add element to layout because many layout are addressed.
  • Economy = it will make easier for other designers to work and collaborate on the design as they provide where to place elements.
  • Consistency = it leads to consistency layout of pages across site and structural design.

3. Typograph

- Style who will use the website/app, font is divided into sans serif and serif. Font will give the impression casual and formal.

  • Character measurement (size, weight, spacing), consistency is a must
  • Whitespace will be easier user read the web/application. Which is readable?
Photo by Topcoder
  • Alignment, use as needed but must be consistent

4. Design Element,

Features which are used to create designs to enhance the user experience.

by Topcoder 2019

It’s all of the lesson that day, then Mas Afif gives the challenge to participants. Designing of furniture e-commerce, remember about UI aspect that has been taught!

NYC Design

A publication for designers in New York and followers all around the world. Design thinking is what makes us write here on Medium to share with the designers of the world.

lely monalisa

Written by

HCI enthusiast

NYC Design

A publication for designers in New York and followers all around the world. Design thinking is what makes us write here on Medium to share with the designers of the world.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade