Category: Design

Posted on by

UI Design for Total Beginner

UI design, also known as User Interface design, is the process of designing the user interface for a website, app, or other software application. It involves creating a visual design that is both aesthetically pleasing and functional, making it easy for users to navigate and interact with the software.

There are several key principles that every beginner in UI design should keep in mind. First and foremost, it is essential to have a clear understanding of the user’s needs and goals. This will inform the design process and help ensure that the end product is both user-friendly and intuitive.

Another key principle of UI design is to keep the interface simple and uncluttered. Too many elements on a page can be overwhelming and make it difficult for users to find what they are looking for. Instead, the interface should be organized in a logical and easy-to-follow manner.

As a beginner in UI design, it is important to have basic knowledge about the layout. The layout of a user interface refers to the overall organization and positioning of the elements on a page. This includes the placement of buttons, menus, forms, and other elements. The layout should be logical and easy to follow, and it should guide the user’s attention to the most important elements.

In addition, the visual design of the interface is crucial. This includes the use of color, typography, and other design elements to create a cohesive and aesthetically pleasing UI. The visual design should be consistent throughout the interface, and it should reflect the overall tone and brand of the software.

It is also important to consider the user experience of the interface. This includes usability testing, which involves having real users interact with the interface and providing feedback on their experience. This can help identify any potential issues or areas for improvement, and ensure that the final product is as user-friendly as possible.

In conclusion, UI design is a crucial aspect of any software application, and it is essential for beginners to understand the key principles and best practices of the field. By keeping the user’s needs and goals in mind, and focusing on simplicity, aesthetic, and testing, it is possible to create an effective and user-friendly user interface.

Posted on by

10 Useful Figma Plugins to Save Your Time

Figma is originally web-based vector graphics editor and prototyping tool with emphasis on real-time collaboration. The objective was to enable anyone to be creative by creating free, simple, creative tools in a browser. As for now, the desktop version is also available both for macOS and Windows.

Figma becomes popular among designers and the community grows along with the tools/plugins. Figma plugins are programs or applications created by the community that extends the functionality of Figma. Plugins allow users to customize their experience or create more efficient design workflows.

We have curated 10 useful Figma plugins to save your time for your next design works.

Batch Styler

Batch Styler allows you to change multiple text and color styles at once. For example, you want to change 30 text styles, changing text from Inter to Roboto while keeping all font weights and other styles.

In addition, changing colors in batch also can be done, for example you want to change 12 color styles with specific hue.

INSTALL

Chart

Save time creating chart on Figma using this plugin. It can uses real or random data to create the most popular charts with 16 types of charts. Chart supports copy-paste from editors like Excel, Numbers, Google Sheets, live connection with Google Sheets and remote JSON (REST API), local CSV and JSON files.

INSTALL

Dark Mode Magic

This plugin will transform your design into dark mode instantly. How it works? The plugin automatically generates colors for Dark mode from a light palette and applys them to elements. You just need to select the frame then apply the plugin, and it just works.

INSTALL

Icon Resizer

Icons from different collections or packs could have different bounding box that will cause non-standard size of icon in your design. Icon Resizer is fantastic plugin that will make your life easier when dealing with icons from multiple packs. Resize icons into a standard size and bounding box on your design. Run this plugin once and it has already saved you hours of work.

INSTALL

Iconify

No need specific plugin for an icon sets, use Iconify that combines several icon packs at once, such as Material Design Icons, FontAwesome, Bootstrap Icons, Carbon, Simple Icons and many more. It has 100+ icon sets containing over 100.000 open source SVG icons.

INSTALL

Mapsicle

Ever need to include map in your design? Never take a screenshot of a map again! With Mapsicle, you can quickly and seamlessly place maps in your mockups. An interactive map lets you pan to the perfect location, or you can search for a place anywhere in the world. Once you’ve placed a map in your designs, head back into Mapsicle to adjust the location, style, zoom level and more. Mapsicle uses Mapbox maps to give you a variety of customization options.

INSTALL

Unsplash

You may have heard of Unsplash or even use it in daily basis. Yep, Unsplash provides over 2 millions of free high-resolution images for your design or prototype. This plugin make it easy to insert images from Unsplash straight into your design.

INSTALL

Brand Colors

Find the best color from the world’s best brands and cool apps. Fill beautiful colors from “Brands Colors plugin” straight into your design. With Brands Colors for Figma, you can search for your favorite brand’s colors or app’s colors and apply it on your design and make it awesome.

INSTALL

Lorem ipsum

Generate ‘Lorem ipsum’ to fill your text layers with dummy text. Select all the text layers you want to generate ‘Lorem ipsum’ for then click ‘Generate’ — it will generate for each layer uniquely. ‘Auto-generate’ will automatically fill the selected layers with the perfectly amount of ‘Lorem ipsum’ to fit their existing frame.

INSTALL

Logo Creator

Logo Creator is Figma plugin with prebuild collections of 300+ logos. Browse via the plugin and select the best logo or craft one using different component.

INSTALL