Identifying & Implementing UI Design Vol 2
Hello friends. I am Agung Prabowo from Singaperbangsa Karawang University. This time I will continue discuss about UI Design. we will discuss about User Interface Design and Implementation of User Interface Design. this article continuation of the previous article. Let’s just start the first discussion.
UI Design Implementation
We will enter the first discussion in this article. In implementing the UI Design, we can use a text editor or a UI builder sortware. If we implement the UI using a text editor, the design will be converted into HTML, CSS, and Javascript program code. If we use the UI builder, then we only need to apply the drag and drop technique according to the design made. However, there are also several software that provide drag and drop techniques as well as source code editors.
Some software for UI implementation
- Adobe Dreamweaver (Commercial)
- Pingendo (Freemium)
- Silex.me (Open Source)
- Google Web Designer (Free)
- Grapedrop (Freemium)
- etc
Program Menu According to the Applied Program Design
The program menu is the part of the website that contains the main links that lead to certain pages or elements on a website. Make sure if we want to create a menu that has been designed in accordance with the structure / navigation hierarchy of the program to be created. All page links that want to be presented to users have been stated in the program menu. The consistency of the program menu display on each page is needed to make it easier for users.
In the previous UI design, it was still black and white so that there was no visible difference between the menus, here are some tips for implementing the UI design.
- Looks clearer than the rest of the web
- Gives the position of the page being accessed
- There is a difference between text containing links and plain text
- The label on the menu corresponds to the intended page
- A good website architecture must be able to fully serve users with just three clicks (Three-Click Rule)
Placement of User Interface Dialogs Arranged Sequentially
UI Dialog sequentially serves to explain the order of access to components from the UI or website process flow.
For example a dialog for account authentication in the following order :
- Open the website login page
- Enter username and password
- When the data is correct, the Home page will be displayed
- When the data is incorrect, an alert will be displayed “Your Username or Password is Wrong”
- Back to the website login page
Active-Passive Settings of Dialog User Interface Components Adjusted to Process Flow Sequence
The Active-Passive setting is used to activate certain functions of the dialog when there is an action from the user.
For example, an airplane ticket order form on a website :
- Fill in the customer’s name and contact
- Fill in the NIK, name and contact of the passenger
- If the passenger or customer data has not been filled in, the send button is not active.
- If the customer and passenger data has been filled in, the send button is activated.
The Style Shape of User Interface Components Is Defined
The style form of the User Interface component must be consistent across pages. Every website should have a basic color that describes the identity of the brand. The basic consistency lies in color and typography.
There is no exact number of how effective colors are in a website design. To make it easier to get an effective color combination. Use the simple principle of 60–30–10 (60%, 30%, 10%), which is a color principle that is often used in interior design. But it is very helpful for the color combination of your website design. 60% is the primary (dominant) color, 30% is the secondary color that contrasts with the base color, and 10% is complementary.
However, if your brand does not yet have an identity color, then it can be adjusted to the area of the brand. For example, the field of technology is identical to the color blue, food is identical to the color red or yellow, and so on.
In using fonts, understand the target user of the website. For example, a promotional website for colorful and decorative children’s toys. But keep in mind, the use of fonts on the website should not consist of more than 3 types of fonts. Even 3 is also quite a lot.
A good font composition is to use 2 types of fonts, namely 1 font for titles or large writings on the website, and 1 other font for content. The two fonts should also not be of 1 type, for example 1 type of serif font, and 1 type of sans-serif font. Use a serif font for the title, and use a sans-serif for the content.
Application of Simulation Is Made a Real Process
Example of UI Implementation with Grapedrop
- Open your browser, then access Grapedrop on the following link
- Then a display like the image above will appear
- Create a Grapedrop account using your respective email
- If you already have an account, please login using your email and password
- After successfully logging in, a screen like the image below will appear
- Click “Start your new project now!” to create a new project on Grapedrop
- For the next step will be below in Vol 3
Conclusion
The program menu is the part of the website that contains the main links that lead to certain pages or elements on a website. The implementation of the UI design on the website is managed using HTML, CSS and Javascript program code. Grapedrop is an application that makes it easy to implement UI designs with drag & drop techniques and source code editor.
