UX Design: Membuat Wireframe

Summary

In this video, the speaker demonstrates how to create web frames (wireframes) using Wimcycle.com, a tool for designing the layout of websites and apps before actual development begins. The tutorial covers logging in, creating a new wireframe, customizing the layout for different devices, adding elements like avatars and buttons, and linking screens for navigation. The speaker also highlights the ability to change colors, fonts, and icon styles. The video is ideal for beginners, providing a simple and effective way to visually organize web and app designs before starting detailed work.

Takeaways

• 😀 Wireframes are simple layouts that serve as blueprints for website or app design, typically using black or gray colors.
• 😀 Wimcycle is a free online tool that allows users to create wireframes for websites and apps easily.
• 😀 Users can sign up for Wimcycle by logging in with their Gmail account to get started.
• 😀 The main menu in Wimcycle offers various features, including wireframe creation, flowchart design, and other templates.
• 😀 When creating a wireframe, users can select the platform (e.g., Android, iOS, Windows) and adjust the layout accordingly.
• 😀 The speaker demonstrates how to create a wireframe for an Android login screen, including basic design elements like text and images.
• 😀 Users can customize their wireframe by adding icons, avatars, and other visual elements like color and font changes.
• 😀 The orientation of the wireframe can be changed between portrait and landscape mode, providing flexibility for different screen types.
• 😀 Interactive elements, like buttons and links, can be added to the wireframe to simulate app functionality.
• 😀 The speaker encourages viewers to explore Wimcycle further, hinting at future tutorials that will showcase more advanced use cases and real-life examples.

Q & A

What is the purpose of the Wimcycle platform in this tutorial?

Wimcycle is used to create web frames or layouts for websites and apps. It allows users to design a visual representation of their web project, such as creating a wireframe or prototype of a mobile app interface.

How do you log in to Wimcycle?

You can log in to Wimcycle by using your Gmail account. After logging in, you can start creating projects and accessing the platform's features.

What is a web frame in the context of this tutorial?

A web frame refers to the layout or structure of a website or app. It acts as a skeletal framework where you can arrange elements like text, images, and icons before moving on to the actual design phase.

What types of devices can be selected for a web frame layout in Wimcycle?

Wimcycle offers various device layouts for designing web frames, including options for Android, Windows, phones, and tablets.

What customization options are available for adjusting the web frame layout?

The layout can be customized by choosing between landscape or portrait orientations. Additionally, elements like the keyboard and battery icon can be toggled on or off, and the color scheme can be modified.

How can you add UI elements to the web frame in Wimcycle?

UI elements such as avatars, text boxes, icons, and links can be added from the available element menu. You can also upload custom assets like images and change their properties (e.g., shape and size).

Can you adjust the text and font properties in Wimcycle?

While you can adjust text size using predefined settings (e.g., small, medium, large), you cannot change the font type within Wimcycle as it is limited to specific fonts tied to the platform's assets.

What is the role of links in the web frame design?

Links are used to connect different screens or pages within the web frame, allowing for navigation between them. This is useful when designing multi-screen apps or websites.

What happens after completing the web frame design in Wimcycle?

Once the web frame design is complete, you can export the project for further use. This might include sharing it for feedback or moving to the next phase of development.

Can Wimcycle be used for both mobile and desktop web design?

Yes, Wimcycle supports the creation of web frames for both mobile devices (e.g., Android) and desktop platforms (e.g., Windows), making it versatile for various types of web and app designs.