<p>I am Hung from ABC Software Solutions Company.<br>Recently, I had the opportunity to experience building a website on the Wix platform, and I would like to share the benefits it brings, along with my personal experience and the lessons I have learned.</p><h2>What is Wix?</h2><p style="margin-left:0px;"><br>Wix is an online website building platform that allows users to easily create and manage websites without any programming knowledge. Wix offers a drag-and-drop interface that enables users to select and arrange components and content on their website as desired.<br>Users can access Wix through a web browser and start building their website from pre-designed templates or start from scratch with a blank canvas. Wix provides a range of tools and features to customize and design the website, including changing the layout, arranging components, creating product pages, adding features like blogs, online stores, contact forms, and more.<br>Wix also offers content management and analytics features, allowing users to track the performance of their website and interact with visitors. Additionally, Wix supports integration with third-party services such as search engine optimization (SEO) tools, email marketing, social media integration, and more.<br>With Wix, users don't need coding or complex web design knowledge, and they can create a professional and attractive website in a short amount of time.</p><h2 style="margin-left:0px;">My experience</h2><p style="margin-left:0px;">As a UI/UX designer, I came to Wix through a client request to build a B2B Landing page website. I was given the opportunity to spend nearly 2 weeks to learn and practice. Previously, I had experience building websites using WordPress with the application of plugins such as Elementor, Flatsome, Woocommerce,... Working on Wix this time has some similarities with WordPress that made me feel interesting. more interesting, while providing myself with more new and interesting knowledge about the platform. Here's what I've learned about Wix.</p><h3 style="margin-left:0px;">Advantages of Wix</h3><p>Wix shines with a range of notable features. With its appeal to a large user base, Wix impresses with the following standout advantages:</p><ul><li><strong>User-friendly interface: </strong>Wix is designed with a friendly and easily accessible user interface. Users can create and edit websites effortlessly through its drag-and-drop tool.</li><li><strong>Flexible design: </strong>Wix offers numerous beautiful templates and interfaces for users to choose from. Additionally, users can customize layouts, colors, fonts, and images to create unique websites that align with their ideas.</li><li><strong>Powerful feature integration: </strong>Wix comes with various integrated features such as blogging, online stores, social media integration, SEO support, and more. This enables users to easily build and manage websites according to their specific needs.</li><li><strong>Responsive on multiple devices: </strong>Websites built on Wix automatically adapt to different devices like desktops, mobile phones, and tablets. This ensures a seamless user experience across all platforms.</li><li><strong>Dedicated customer support: </strong>Wix provides detailed documentation, support centers, and community forums to assist users. You can find quick help and answers to your questions whenever needed.</li></ul><h3>Some disadvantages of Wix</h3><p>Besides the advantages, Wix also has some disadvantages to be aware of:</p><ul><li><strong>Limitations of source code customization: </strong>Wix does not allow direct access and editing of the source code. Users can only perform customizations through the user interface. This restricts the flexibility and higher level of customization of the website.</li><li><strong>Limited feature extensions:</strong> Wix has a range of apps and extensions available in the Wix App Market, but not all features found in general web development platforms may be available. This can make it challenging to meet specific requirements or integrate external tools.</li><li><strong>Service fees and bandwidth limitations:</strong> Some advanced features and resource expansions in Wix are only available in paid service packages. Some service packages also have bandwidth limitations, which can affect the website's loading speed and handling of high traffic.</li><li><strong>Wix advertisements: </strong>In the free version, Wix displays their own advertisements on your website. To remove these ads, you need to upgrade to paid service packages.</li><li><strong>Difficulty in platform migration: </strong>If you want to switch from Wix to another platform, the migration process can be challenging. The conversion may require time and effort to re-customize the website on the new platform.</li></ul><p>However, these limitations do not undermine Wix's ability to provide a quick and easy website-building solution for users without programming skills.</p><h3>Compare Wixand WordPress</h3><p>After learning about Wix, I realized that Wix and WordPress will have many differences, here are some points to pay attention to:</p><p><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/WIX_VS_WP_b34d13fea7.png" alt="WIX VS WP.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_WIX_VS_WP_b34d13fea7.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_WIX_VS_WP_b34d13fea7.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_WIX_VS_WP_b34d13fea7.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_WIX_VS_WP_b34d13fea7.png 1000w," sizes="100vw"></p><h4><strong>Design and layout</strong></h4><p style="margin-left:0px;">Wix and WordPress both offer a range of interface templates for you to choose from. Wix has over 500 pre-designed templates, suitable for various industries. These templates have intuitive interfaces, and you can easily customize layouts and tools according to your preferences. However, one point to note is that once you have chosen a template on Wix, you cannot switch to another template. Instead, you have to continue customizing the layout and components on the selected template.<br>WordPress also provides users with a diverse library of thousands of interface templates, including both free and paid options. One difference from Wix is that WordPress allows easy customization of the chosen interface template by using different themes and plugins. This gives users a higher level of flexibility in creating a unique and targeted website.<br>Whether it's Wix or WordPress, both platforms offer tools and customization options for you to create a beautiful and professional website. The decision to choose between these two platforms depends on your needs and goals. If you want simplicity and ease of use, along with some available templates for customization, Wix is a good choice. On the other hand, if you desire more flexibility and higher customization capabilities, WordPress would be a suitable option, although it does require some knowledge of coding and management.</p><h4 style="margin-left:0px;"><strong>Experience</strong></h4><p>Wix possesses a wide range of smartly designed and highly user-friendly tools. Even individuals with no knowledge of coding or web design can use them effectively.<br>On the other hand, WordPress has a visual editor that facilitates quick and easy content creation and theme customization. However, exploring the features in WordPress may require more time and effort to learn.</p><h4><strong>Plugin/App</strong></h4><p>Currently, the Wix platform has over 500 apps available that support various functionalities such as reviews, galleries, contact form templates, and more. The majority of these apps are free.&nbsp;<br>On the other hand, WordPress boasts an impressive number of plugins, with over 55,000 options available, not to mention thousands of premium apps. In summary, considering the cost-effectiveness and the abundance of features, resources, layout designs, and plugins/apps, WordPress still holds a significant advantage.&nbsp;<br>However, Wix is highly regarded for its user-friendly nature, particularly for beginners.</p><h3>Should I use Wix?</h3><p style="margin-left:0px;"><br>The Wix platform is simple and user-friendly, even for individuals with limited programming knowledge. People can start using Wix without the need to purchase separate hosting and domain. This makes Wix a reasonable choice for those who don't want to invest too much in technical aspects and finances.<br>If you are not tech-savvy and don't want to spend money on hosting and domain, Wix is a suitable option. You can create a professional website according to your requirements without encountering too many difficulties. However, if you are building a larger, more complex website, WordPress is a better choice. WordPress offers a wide range of features and powerful customization options, while allowing you to use your own domain and leverage advanced functionalities.<br>These are the basic insights into the Wix platform and how to use it to create a simple website. However, it's important to note that Wix does have some limitations. If you only need a simple website or lack deep technical knowledge, then Wix is a safe and convenient choice.</p><p><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Should_use_WIX_08197ecde3.png" alt="Should use WIX_.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_Should_use_WIX_08197ecde3.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_Should_use_WIX_08197ecde3.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_Should_use_WIX_08197ecde3.png 750w," sizes="100vw"></p><h2>The experience I have</h2><p style="margin-left:0px;">Despite the many benefits, I also encountered some challenges during the process of building a website on Wix. One of them was the limitations of the available design templates, which required me to find ways to customize them to meet the project's requirements. However, I overcame these challenges by researching thoroughly and leveraging the flexible features of Wix.<br>The experience of building a website on Wix has provided me with valuable lessons. I realized that mastering the use of an important web design tool like Wix helps enhance my ability to execute future projects. I also recognized the importance of optimizing the user experience and creating a sensible design to meet the needs of clients.<br>In summary, the experience of building a website on Wix has given me valuable knowledge and skills in the field of UI/UX design. I have gained a better understanding of the benefits and limitations of Wix, as well as how to customize and be flexible in creating a beautiful and engaging website. Through this period, I have learned that continuous learning and experimenting will help me further develop in new technologies and enhance my thinking and creativity, delivering excellent products to users.<br>I hope this blog has provided you with useful information and motivation to explore the world of web design. Keep maintaining your passion and creativity, always explore new technologies, and never stop learning.<br>Once again, thank you sincerely, and I hope that we will continue to meet in future articles and sharing.<br>See you again!</p>

Wix provides convenience and flexibility. With a variety of pre-designed templates and customization tools, you can create a beautiful and professional website quickly and easily.

Experience building websites on Wix

<p><span style="background-color:transparent;color:#252525;font-family:Montserrat,sans-serif;">Welcome back to the Learn What You Share series, and I'm Tuyen. With the previous sharing of content on coding and BA fields, today I will guide you to approach another field that also plays a crucial role in making a project successful, which is the role of a designer.</span><br><span style="background-color:transparent;color:#252525;font-family:Montserrat,sans-serif;">For a designer, in addition to learning or absorbing knowledge from various sources, the tools that can help them express their ideas, creative freedom, etc. are also a part of success. We cannot ignore useful tools such as Adobe Creative Suite (Photoshop, Illustrator, ...) and Figma. For, these two tools are quite useful for a designer like myself.</span></p><p><span style="background-color:transparent;color:#252525;font-family:Montserrat,sans-serif;">You often hear designers talk about using this software or that software for design, but we just listen and don't really understand them. In case we need to use them later, we still have to ask them about the names of that software. With that drawback in mind, I wrote this blog post to share the software that I use the most for design, which is Figma</span></p><p><span style="background-color:transparent;color:#252525;font-family:Montserrat,sans-serif;">Figma is a design software launched in 2015 and quickly adopted by the design community. It allows users to create interactive design drafts and share them with other team members</span></p><p><span style="background-color:transparent;color:#252525;font-family:Montserrat,sans-serif;">Figma provides a wide range of useful features such as geometric drawing tools, fonts, colors, and features for creating interactive designs and design templates. Additionally, it integrates with many other tools like Sketch, Photoshop, and project management tools like Jira and Trello. A special feature of Figma is that it allows users to interact with the design's functionality (buttons, links, etc.) like a website.</span></p><p><span style="background-color:transparent;color:#252525;font-family:Montserrat,sans-serif;">With the flexibility and great features of Figma, you can take advantage of this to make it even better by improving the user experience and making design easier with the help of plugins</span></p><p><span style="background-color:transparent;color:#252525;font-family:Montserrat,sans-serif;">As shared in the blog post 'https://www.abcsoftwarecompany.com/vi/blog/nhung-plugin-figma-thong-dung-danh-cho-thiet-ke-ui' by Quoc Hung, he is also a designer who has used common plugins in his designs such as Stylelist, remove.bg, lorem ipsum, unsplash, iconify,... and I have as well. However, I have accidentally discovered even more amazing features of some plugins in Figma, namely: anima, content reel, design lint</span></p><h4><span style="background-color:transparent;color:#252525;font-family:Montserrat,sans-serif;"><strong>Anima</strong></span></h4><p><span style="background-color:transparent;color:#252525;font-family:Montserrat,sans-serif;">Anima is a plugin that allows users to create buttons, forms, dropdowns, and more with flexible sharing and reuse features to make websites and apps run smoothly and highly interactive.</span></p><p><span style="background-color:transparent;color:#252525;font-family:Montserrat,sans-serif;"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_f14b6226ee.png"></span></p><p><span style="background-color:transparent;color:#252525;font-family:Montserrat,sans-serif;">You can refer to the UI of components such as button, form, dropdown, etc.</span></p><p style="text-align:center;"><span style="background-color:transparent;color:#252525;font-family:Montserrat,sans-serif;"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_12c94a945e.png"></span></p><p><span style="background-color:transparent;color:#252525;font-family:Montserrat,sans-serif;">The plugin provides flexibility, UI, and code support to help developers easily reference and code without deviating from the client's requirements set by the designer.</span></p><p><span style="background-color:transparent;color:#252525;font-family:Montserrat,sans-serif;">I can't watch the demo you mentioned as I am a text-based AI language model. However, I can assist you with any questions or concerns you may have regarding the Anima plugin for Figma.</span></p><ul><li><span style="background-color:transparent;color:#252525;font-family:Montserrat,sans-serif;">I selected a previously designed frame (Home page) and right-clicked to select Plugin -&gt; Anima -&gt; Get code. But before using this plugin, you need to install it first ^^!</span></li></ul><p><span style="background-color:transparent;color:#252525;font-family:Montserrat,sans-serif;"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_f1e884be72.png"></span></p><ul><li><span style="background-color:transparent;color:#252525;font-family:Montserrat,sans-serif;">After getting the code with Anima plugin, you can choose the programming language that the plugin supports to export the code.</span></li></ul><p><span style="background-color:transparent;color:#252525;font-family:Montserrat,sans-serif;"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_747bab4051.png"></span></p><p><span style="background-color:transparent;color:#252525;font-family:Montserrat,sans-serif;">You can export the code in the supported languages ​​such as HTML, React, Vue</span></p><ul><li><span style="background-color:transparent;color:#252525;font-family:Montserrat,sans-serif;">Finally, the result shows the code for the frame (Home page). But note, this feature is limited if you want to export the code and download the source, you should spend a little more $ for convenience. There is another way to circumvent the law a bit more, you can open to code pen like me and watch it directly.</span><br>&nbsp;</li></ul><p><span style="background-color:transparent;color:#252525;font-family:Montserrat,sans-serif;"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_d3dc2f743b.png"></span></p><p><span style="background-color:transparent;color:#252525;font-family:Montserrat,sans-serif;">This is a great plugin, but its free features are limited. Therefore, if you want to have a better experience and have the means, you should add a little $ to have even better experiences!!!</span></p><p><span style="background-color:transparent;color:#252525;font-family:Montserrat,sans-serif;">In addition, this plugin has a great feature Auto Layout that allows elements to automatically resize and position when the size of the surrounding frame if they change. This reduces the time it takes to update and arrange elements in the design.</span></p><h4><span style="background-color:transparent;color:#252525;font-family:Montserrat,sans-serif;"><strong>Content Reel</strong></span></h4><p><span style="background-color:transparent;color:#252525;font-family:Montserrat,sans-serif;">Is a plugin that makes the presentation of content (images, content, videos, gifs and animations) in the design become vivid and beautiful.</span></p><p><span style="background-color:transparent;color:#252525;font-family:Montserrat,sans-serif;"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_533fce5a90.png"></span></p><h4><span style="background-color:transparent;color:#252525;font-family:Montserrat,sans-serif;"><strong>Design Lint&nbsp;</strong></span></h4><p><span style="background-color:transparent;color:#252525;font-family:Montserrat,sans-serif;">As a plugin that helps to check the quality and standards of the design: ensures consistency in the entire design, colors, spacing, fonts, and other design rules, and helps users find errors in design and fix them quickly.</span></p><p><span style="background-color:transparent;color:#252525;font-family:Montserrat,sans-serif;">I have a personal exercise, after I design and proceed to ask the support plugin to check, the results I received are quite surprising.</span></p><p><span style="background-color:transparent;color:#252525;font-family:Montserrat,sans-serif;"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_af9d243da8.png"></span></p><p><span style="background-color:transparent;color:#252525;font-family:Montserrat,sans-serif;">With only one page, I have wrong many standards, the numbers are amazing. I think this plugin is quite good, it will help us designers improve our design standards and improve our observation, meticulousness and care.</span><br><span style="background-color:transparent;color:#252525;font-family:Montserrat,sans-serif;"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_7c6513f53b.png"></span></p><p><span style="background-color:transparent;color:#252525;font-family:Montserrat,sans-serif;">Realizing that plugins are a small part of making our design more beautiful and perfect. It contributes to helping us reduce stress and understand the time and effort to do new and great things. Thanks to automation and powerful tools, designers can focus on creating products that meet customer and market requirements.</span></p><p><span style="background-color:transparent;color:#252525;font-family:Montserrat,sans-serif;">Above, are some of the plugins that I discovered on my own in the process of learning to become a designer. I will share the knowledge that I discovered during my studies. Hope it helps okay for you.&nbsp;</span></p><p><span style="background-color:transparent;color:#252525;font-family:Montserrat,sans-serif;">Thank you for reading this far!!!!</span><br><span style="background-color:transparent;color:#252525;font-family:Montserrat,sans-serif;">See you in the next blog and I'm Tuyen.</span></p><p><span style="background-color:transparent;color:#252525;font-family:Montserrat,sans-serif;">Post created by ChatGPT and edited.</span></p>

I accidentally discovered some amazing features of certain Figma plugins, specifically: Anima, Content Reel, and Design Lint.

Plugin in figma

<p>As a UI/UX designer, I uses a variety of tools to help complete his projects. However, when I came to know ChatGPT, a smart assistant that can assist in UI/UX work, I tested it and found it very useful. In this article, I will share with his own experience when using ChatGPT in UI/UX design work.</p><h2>1. Help finding information</h2><p><br>When starting a new project, I often have to look up information about the client and their industry. With ChatGPT, I can ask questions about customers and ChatGPT will search and provide me with relevant information. This saves time and effort searching for information on the Internet.<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Information_search_9a90bad60d.png" alt="Information search.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_Information_search_9a90bad60d.png 234w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_Information_search_9a90bad60d.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_Information_search_9a90bad60d.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_Information_search_9a90bad60d.png 1000w," sizes="100vw"></p><h2>2. Come up with new ideas</h2><p>When designing user interfaces, I always want to come up with new ideas to make a difference and increase the uniqueness of my products. ChatGPT can help generate new ideas by giving suggestions and recommending websites related to your topic of interest. We can also ask questions about the latest design trends or design best practices for creating a better user interface.<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/idea_b9b5a13c1c.png" alt="idea.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_idea_b9b5a13c1c.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_idea_b9b5a13c1c.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_idea_b9b5a13c1c.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_idea_b9b5a13c1c.png 1000w," sizes="100vw"></p><h2>3. Support in the content creation process</h2><p>Creating content for a website or app is an important part of my job. ChatGPT can help me with the content creation process by providing me with keywords related to the content I want to write about and giving advice on writing style and sentence structure.<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/content_e8f0b796f3.png" alt="content.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_content_e8f0b796f3.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_content_e8f0b796f3.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_content_e8f0b796f3.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_content_e8f0b796f3.png 1000w," sizes="100vw"></p><h2>4. Answer the questions</h2><p>When I encounter questions during the UI design process, I can ask ChatGPT questions and it will provide answers and solutions to my problems. This saves time and increases work efficiency.<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/answer_the_question_8e86d790cb.png" alt="answer the question.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_answer_the_question_8e86d790cb.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_answer_the_question_8e86d790cb.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_answer_the_question_8e86d790cb.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_answer_the_question_8e86d790cb.png 1000w," sizes="100vw"></p><h2>5. Check spelling and grammar</h2><p>When creating content or writing UI messages, I always want to make sure that words and sentences are spelled correctly and grammatically. ChatGPT can help check the spelling and grammar of words and sentences you write. This helps ensure that the messages we convey to our users are clear and accurate.<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Check_spelling_and_grammar_8d72f77dc3.png" alt="Check spelling and grammar.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_Check_spelling_and_grammar_8d72f77dc3.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_Check_spelling_and_grammar_8d72f77dc3.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_Check_spelling_and_grammar_8d72f77dc3.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_Check_spelling_and_grammar_8d72f77dc3.png 1000w," sizes="100vw"></p><h2>6. Support for Search Optimization</h2><p>Search optimization is an important part of UI/UX work. ChatGPT can help come up with keywords related to its products and provide suggestions for optimizing its content to get the attention of search engines.</p><p>In summary, ChatGPT has helped me improve his work efficiency. Saves me time and effort in the process of finding information, coming up with new ideas, assisting in the process of creating content and answering questions. questions. In addition, ChatGPT also helps check spelling and grammar, assists with search optimization, and offers advice on writing style and sentence structure. I believe that ChatGPT will be a useful tool for any UI/UX designer who wants to enhance their work efficiency and get the best results for their product.<br>Once again I'm Hung, thanks for following my post!</p>

GPT chat is great tool for UI/UX designer

Optimizing UI/UX Design Work With GPT Chat

<p>Hello !!<br>My name is Hung from ABC Software Solutions Company.<br>To create the best user experience, UX (user experience) design plays an important role. However, many designers have fallen into the habit of putting too much information and features in their products. This makes the product complicated and difficult to use, making it difficult for users. In this article, learn about simplicity in UX design and how it enhances user experience.</p><h2>What is simplification, is it important in UX design?<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/wrong_right_4e631e7a84.png" alt="wrong right.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_wrong_right_4e631e7a84.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_wrong_right_4e631e7a84.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_wrong_right_4e631e7a84.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_wrong_right_4e631e7a84.png 1000w," sizes="100vw"></h2><p>Simplification is the process of eliminating unnecessary elements, reducing complexity, and creating a product that is simpler and easier to use. It is a design method that is useful in creating a better user experience.<br><br><strong>Why is simplification important in UX design?</strong></p><h3><br><strong>1. Easy for users to use</strong></h3><p>When designing products, simplification is the best way to help users use your product easily and quickly. When the product has too many features, it will be difficult for users to find the main and commonly used features. However, when the product is simplified, it is easier for users to find features and use the product effectively.</p><h3><br><strong>2. Helps increase page loading speed</strong></h3><p>Using too many features and information on a website or mobile app can make it slow to load. If your product is too complex, it can affect the page load speed, causing frustration for users. Simplifying your product will help speed up page loads and create a better user experience. Using too many features and information on a website or mobile app can make pages load faster. slow. If your product is too complex, it can affect the page load speed, causing frustration for users. Simplifying your product will help speed up page loads and create a better user experience.</p><h3><strong>3. Increase Interoperability</strong></h3><p>The simplified product not only enhances the user experience, but also enhances the interaction between the user and the product. With a simple interface, users will easily interact with the product. If users have to search too much to use a feature or to find information, they will get annoyed and may skip your product. Simplifying your product increases interactivity and makes it easier for users to find information and use your product features.</p><h3><strong>4. Increase product reliability</strong></h3><p>A simplified product is often easier to use and understand. Simplified products make it easier for users to distinguish your product features and understand your product better. This will help increase product reliability and help customers have more confidence in your product.</p><h2>How to simplify your products</h2><ul style="list-style-type:disc;"><li><strong>Focus on the most important feature:</strong> When designing a product, focus on the most important feature. Removing unnecessary features and focusing on the most important ones will make your product simpler.</li><li><strong>Keep the interface simple: </strong>A simple interface makes it easy for users to interact with and use your product. Keep the interface simple and avoid using too many images or colors.</li><li><strong>Use simple language: </strong>Use simple language and avoid using complicated terms. Using language that is easy to understand will make your product easier to use.</li><li><strong>Test your product: </strong>Before a product goes to market, test your product thoroughly to make sure it's simple and easy to use. You can seek opinions from users or UX experts to evaluate your product.</li></ul><h2>Conclusions<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/experience_2daa89ca99.png" alt="experience.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_experience_2daa89ca99.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_experience_2daa89ca99.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_experience_2daa89ca99.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_experience_2daa89ca99.png 1000w," sizes="100vw"></h2><p>Simplification in UX design is the best way to create a great user experience and increase product reliability. When your product is simplified, it's easier for users to use your product, find information faster, and interact with your product faster. This will help increase interactivity and help users feel more comfortable using your product.</p><p>However, simplifying the product is not easy, it requires perseverance and effort. Simplified product design can be a lengthy process and requires constant testing to achieve the best results. But for UX designers, product design simplification is an important skill to ensure that their product meets user requirements and increases product interoperability.</p><p>In summary, UX design simplification is an important method for creating a good user experience and giving your product credibility. With simple steps to simplify your product, you can help users interact with your product easily and efficiently. This will help increase customer satisfaction and help increase your sales. So invest in simplicity in UX design for your business success.</p><p>Above are my sharing about simplification in building UX design. I'm Hung, thanks for following my post!</p><p><br><br><br>&nbsp;</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</p>

Simplification in UX design is about minimizing complexity, enhancing the ease of use and efficiency of the product.

Simplification in UX design

<p>Hi !!<br>My name is Hung from ABC Software Solutions Company.<br>One of the highlights of Figma is the plugins. Figma has an extremely rich plugin library, new plugins are created almost daily. The Figma plugin has made design work smoother, improved productivity and saved time for dozens of errands, giving designers more time to focus on the main task. In this article, Hung will show you how to use some useful plugins in your daily work.</p><h2>What is Figma?</h2><p>Figma is specialized software for designing interfaces and building demos for applications and websites. In addition to the web and application platform, Figma is compatible with all operating systems. It is considered a great software for UI/UX design. In addition, it has features to support teamwork throughout the design process.<br>It can be said that Figma is the leading interface design tool on the market today, because it is easy to use and offers a good user experience. Compared to Adobe XD or Sketch, Figma has many outstanding advantages, such as being able to work online and allowing users to collaborate with others in real time.</p><h2>Plugins I use the most</h2><h3>1. StyleList – Figma plugin for color and font correction.</h3><p>Each project will have a different color scheme, the colors in the palette are assigned color intensities based on a primary color. Figma can help designers manage colors easily. For example, when choosing a color to use, the designer can put that color in the "Color Styles" section to ensure that only the colors have been defined from the beginning, instead of using the Eye dropper tool to select colors. manually.<br>Similar to colors, fonts should also be managed neatly. The designer will need to select the font styles, and make a note of what they are used for and put them in the "Text Styles" field. For example, headings H1, H2,…<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/img_style_list_5b826ea70d.png" alt="img-style-list.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_img_style_list_5b826ea70d.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_img_style_list_5b826ea70d.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_img_style_list_5b826ea70d.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_img_style_list_5b826ea70d.png 1000w," sizes="100vw"></p><p>Usually, when starting to design, designers have to create color palettes and fonts on their design board, and then name and add additional effects. Doing so will take a lot of time, instead you can use the Figma plugin StyleList to automate the above process with one click.</p><h4><strong>How to create a typeface on a StyleList:</strong></h4><ul><li>Enter Base size</li><li>Select the desired scale and font type</li><li>Select the desired size</li><li>Click the “Create style” button.</li></ul><p><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/create_style_list_dfc8ed0b63.png" alt="create-style-list.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_create_style_list_dfc8ed0b63.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_create_style_list_dfc8ed0b63.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_create_style_list_dfc8ed0b63.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_create_style_list_dfc8ed0b63.png 1000w," sizes="100vw"></p><h3>2. Remove.bg – Remove background for photos<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/remove_bg_435b120e46.png" alt="remove.bg.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_remove_bg_435b120e46.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_remove_bg_435b120e46.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_remove_bg_435b120e46.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_remove_bg_435b120e46.png 1000w," sizes="100vw"></h3><p>Sometimes we upload beautiful photos for our designs, only to notice that the background of the photo doesn't match the design. Now we have to use tools like AI, Photoshop so it will be very time consuming. Knowing that, Figma has added the remove.bg application to its plugin set, helping designers to use only extremely simple operations, saving a lot of time.<br>Note that you need to create a remove.bg account before you can use this plugin.</p><h3>3. Lorem Ipsum – Create Fake Content</h3><p>Lorem Ipsum is a type of dummy text used in design, typography and print. Its plugin allows designers to insert pieces of fake content to mimic the look and feel of the real copy. With this tool you can easily work out details like distance and position, words per line, spacing between letters and kerning. You don't have to spend time trying to develop content-filling blocks that might not fit your typography design.</p><h3>4. Unsplash- Plugin that provides quality photos</h3><p>When designing, we always want to find high-quality images, partly to increase professionalism, and partly to create a "flattering" feeling for the viewer. The Figma Unsplash plugin is a source of quality photos because the site has an extremely rich image library, is copyrighted and completely free. Users are free to use images on Unsplash for personal and commercial purposes.<br>Photos on Unsplash are of very high quality, so they are favored and applied by designers not only in UI/UX but also in graphic design and other design industries.<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/unsplash_d05b41e2e7.png" alt="unsplash.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_unsplash_d05b41e2e7.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_unsplash_d05b41e2e7.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_unsplash_d05b41e2e7.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_unsplash_d05b41e2e7.png 1000w," sizes="100vw"></p><p><strong>How to use the Unsplash plugin:</strong></p><ul><li>Insert random images: press the Insert random button in the random panel (random panel)</li><li>Insert a random image according to a theme: choose one of the themes included in the Presets.</li><li>Search for a specific image: use the search bar</li></ul><h3>5. Figma Iconify plugin</h3><p>Iconify is a collection of popular icon sets. This Figma plugin allows users to add icons from design systems such as Material Design Icons, FontAwesome, Jam Icons, EmojiOne, Twitter Emoji, and many more icon sets (100+ icon sets with almost 100,000 icons). The nice thing about Iconify is that designers don't have to go to these icon libraries to download each icon manually. Instead, Iconify will aggregate all these icons, the designer just needs to open the plugin and drag and drop the icon into the design. It's really easy, isn't it?<br>Unlike other plugins that require a fee to use icons in SVG format, Iconify is completely free to use. In addition, Iconify's interface is also extremely easy to use. Iconify's developers showed their understanding when they included a feature that remembers the last icon page the user visited, making it easier to continue using the recently searched icons.<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/iconify_dafa494773.png" alt="iconify.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_iconify_dafa494773.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_iconify_dafa494773.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_iconify_dafa494773.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_iconify_dafa494773.png 1000w," sizes="100vw"><strong>Steps to use Figma Iconify Plugin:</strong></p><ul><li>Search icon</li><li>Choose any icon</li><li>Click the “Import Icon” button or drag the icon onto the Figma designer page.</li><li>The tags above the search results will display the theme of the icon sets, in each card will have icons related to each other.</li><li>Click on any tag, the plugin will only show results from that set of icons</li></ul><p>You can drag and drop icons directly from search results and choose icon color, not available for icons with hard coding. Change icon size, developers can get icon codeReplace icon already previous import (only available if the previous icon's layer is selected in Figma).</p><h2>My impressions</h2><p>It will be difficult and time consuming for designers to handle design problems manually, so designers should use plugins to solve them quickly and accurately. However, we need to be careful when using Figma plugins, such as Find and Replace because if not checked carefully, this feature can replace the wrong text. After all, when choosing to use any plugin, it's still important to consider the product's requirements.<br>Above are my sharing about the plugins I often use for the products I design. There are also countless other extremely good plugins, as well as very high support efficiency that I have not mentioned. Hope my small blog will help readers, especially those who are just starting out UI/UX, will easily approach Figma.</p><p>I'm Hung thanks for following my blog!!!</p><p>&nbsp;</p>

Small blog sharing about the plugins I often use in the process of designing a complete UI.

Popular Figma plugins for UI design

<p>Hi!! My name is Hung from ABC Software Solutions Company.</p>
<p>Applying the UI-UX design process in website/app design is an effective method to ensure that you create a product with a great experience that brings success to your business. So what is the standard UI-UX design process? And how does the UX process help create a good experience? Let's learn the steps of the UI-UX design process in this article to understand why it is important and trusted by businesses.</p>
<h2>Analyze and come up with ideas</h2>
<p><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/ideas_ab0559af00.png" alt="ideas.png"></p>
<p>I believe that any field or profession or job, the analysis process is indispensable. Especially with information systems, it is extremely important to carefully analyze data, habits, habits … of users and create a detailed plan for the project. This helps Designers and Developers firmly grasp the purpose, business, features of the software or features to be developed, thereby avoiding unnecessary errors and misunderstandings that lead to a lot of time and effort to repair. . At this step Designer needs to work with BA (Business Analyst) quite a lot.</p>
<p>The advice for you is to survey business stakeholders, learn and survey different users through User Personas, User Stories, Use cases and User flows.</p>
<p>After having a detailed plan, the task of UI-UX Designer is to come up with ideas through reference to design archives such as Behance, Dribble, Pinterest Freepik… From there, consistently assign the design to the design. Design elements such as color, typography, or design style that best suit the user of the product.</p>
<p><h2>Draw Wireframes</h2><p><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/wireframe_06d4916366.png" alt="wireframe.png"></p><p>Creating Wrireframes is a blueprint for each page, with visual indicators like lines, grids, and boxes that indicate where the type of content, images, and other elements will lead the user. Wrireframe is just a blueprint, not a final design, it may be high resolution or it may be low resolution depending on the tool you use, it doesn't matter, what matters is the wireframe. Provide your team with the things to follow when starting a detailed website design.</p><p>Wrireframe shows a clear and simple way to organize the layout of a web page. Wireframing also serves another important function and that is communication. The common way is to wait until a detailed web design is available before discussing and editing. But doing so makes it difficult to evaluate the effectiveness of the design and risks starting over and over again, leading to time and effort. Therefore, the way in UX design is to build wireframes quickly so that everyone in the team has a rough design to discuss and agree on the necessary things before going to the official design. From there, know how to coordinate smoothly to push the project to completion.</p><h2>Detailed design</h2><p><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/design_890f8c98a8.png" alt="design.png"></p><p>Unlike Wireframe, in this step we need to focus on user interface. This step will create a complete interface for our software, website, creating a good user interface or not will also affect the user experience (UX). That's why it is said that UI/UX goes hand in hand and cannot be separated.</p><p>At this step, components will also be fully designed with states. For example, a node in a wireframe only needs to show up as a rectangle, but in detail design, a node in addition to including metrics like color, border, cornering, shadow… then it is also displayed as button on hover, button on click, button after click, button on disabled…</p><h2>Prototyping and Mockups</h2><p><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/prototyping_215d8d6cac.png" alt="prototyping.png"></p><p>Some people are confused between Wireframe, Mockup or Prototype. But all can have different functions.</p><ul><li><strong>Mockups:</strong> As a step on the wireframe, mockups take what has been established with the wireframe and present it on the graphic design, which may have some functionality like navigation, used to see how the design will look.</li><li><strong>Prototype</strong> Acts as an almost fully realized version of the design, navigating, interacting, and utilizing all the main images and content blocks. It is not necessary that every component has everything for the user to interact and experience. Prototype is closest to the finished web design, it allows you to get the feedback you need and make tweaks and tweaks. edit before moving to code.</li></ul><p>With Prototype, you still have 2 types: Focus on function over design and the other is design for the closest to the final version.</p><h2>Check</h2><p><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/check_e81164c636.png" alt="check.png"></p><p>After you have a prototype, it's time to do usability testing. This means that you have to give someone who has never seen a design before and let them experience it comfortably, live testing can allow you to see clear and actionable feedback when people page experience web. Or their inquiries looking for answers to popular question variable users will likely do with your site. To from that Observe everything is unstable, easy to see the level in the content of the tutorial. All of the above data will give you information about the design's level results and the points that need to be changed.</p><h2>Hand over</h2><p><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/hand_over_0574b3b3b5.png" alt="hand over.png"></p><p>This step is to hand over the complete design to the Front-End Dev team to ensure that the Dev has understood correctly and fully about the entire design. This step is extremely important as it will determine whether the actual product is really what it is intended to be compared to the UI/UX design. Of course, the ability of Front-end dev is something to be mentioned but there are many cases where they do it wrong because they have not read the design properly. This phase needs to coordinate smoothly between the coder and the designer.</p><p>Hope my article will be of some help to you, Currently, all the steps to create a Product design as mentioned above, we can all use Figma tool - A design tool. professional UI/UI design but also free.</p><p>Once again I am Hung, thank you for your interest in my Blog!!!</p></p>
<div id="md2html-converted" style="display:none"></div><div id="md2html-converted" style="display:none"></div>

To create a UI-UX design, it requires UI-UX Designers to spend a lot of time studying and following certain processes and standards. The following are the basic steps to help you create a complete UI/UX product.

What steps does a complete UI-UX design need to go through?

<p>Hi!!</p>
<p>I'm Hung from ABC Software Solutions Company.</p>
<p>Today is a very beautiful day, reminding me of the moment when I first stepped into UI-UX with so many surprises. So on this occasion I would like to share with you a story about my UI-UX learning process and the difficulties I have encountered, hope that everyone will like this little story of mine.</p>
<h2 id="whychooseuiux">Why choose UI-UX?</h2>
<p><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/why_chosse_UI_UX_011efdeded.png" alt="why chosse UI-UX.png" /></p>
<p>For a person who just graduated from a university majoring in information technology like me, why choose a job as UI-UX designer? Yup, I simply want to challenge myself in a new field related to programming. I was very fortunate to be introduced and work at <a href="https://abcsoftwarecompany.com/">ABC Software Solutions</a>, where I had a wonderful time when I experienced the feeling of being an apprentice do real projects. Thanks to that, my design ability gradually improved a lot.</p>
<p>UI-UX helps me connect with everyone in the team, in addition, I can create designs that express my personal creativity. Most tech careers are technical, doing repetitive tasks every day, such as coding. Because I don't like such aridity, UI-UX is "kind" to me, but my creative designs still have to comply with design and programming rules.</p>
<h2 id="thedifficulties">The difficulties</h2>
<p><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/difficult_e497e545da.png" alt="difficult.png" /></p>
<p>At first, I thought UI-UX was the same, but that's not the case at all. UI-UX are two inseparable categories, but they are completely separate concepts. It is impossible to work on the user experience without considering the appropriate interface and aesthetics. On the contrary, if the interface is very eye-catching but builds hard-to-see content, it is also a disadvantage.</p>
<p>UI-UX is easy but difficult? When I first started designing, I only thought how to make the interface beautiful and pleasing to my eyes and I did not follow any design rules at all. It was a very serious mistake, I made very basic mistakes due to my haste, I received a lot of feedback from the brothers and sisters in the company, at that time I felt extremely confused. However, it felt like my product was not well received, at this point I realized that UI-UX is not as simple as I thought.</p>
<p>After that fall, I started to carefully learn about UI-UX more carefully, I spent a lot of time taking courses on Udemy and going to consult other clones of other designs on communities. UI-UX coin. I am fortunate to have Ms. Chi (Senior UI-UX Designer) who has always supported me from afar, specifically evaluating my designs, only tools, plugins… She is also the feedback person for the products. in the future, help me improve. I am very grateful and love you very much.</p>
<h2 id="theexperienceivebeenthrough">The experience I've been through</h2>
<p><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/experience_going_through_e1279d9686.png" alt="experience going through.png" /></p>
<p>In the process of working with everyone in the team, I have learned a lot. When starting out, of course, there will be a little bit of difficulty, as simple as, for example, when I finish the design and give it to the coder, the coder or commenter says the design like this is too difficult, can't be done and requires Change the design to make coding easier. However, easier to code is not always better. Because you coder doesn't understand UI-UX, you don't understand why it is necessary to design it like that, affecting the final product. It was also an experience for me, now that I have overcome this drawback, the work becomes smoother and the product comes out perfectly.</p>
<p>Here are some experiences that I have learned after my UI-UX learning process.</p>
<ul>
<li><strong>Master the most basic knowledge:</strong> When starting something, it should go from easy to difficult, basic to advanced, there must be a clear roadmap. UI-UX design is a new profession and full of opportunities for those who want to enter. Therefore, grasping and possessing the essential skills and qualities for this job will help us build a solid foundation, from which, quickly develop into a professional UI/UX Designer.</li>
<li><strong>Continuously updating new knowledge about UI-UX:</strong> UI-UX is a profession that needs constant updating. Learning new skills and improving technique is essential to keeping up with the market. Those learning resources can come from books, community groups, courses…</li>
<li><strong>Self-learning ability:</strong> UI-UX needs a lot of investment to learn, so it is necessary to allocate time in a tight and reasonable way. In addition, when I have a new design, I can share it with UI-UX groups so that experienced people give direct feedback to help us progress faster.</li>
<li><strong>Put your heart into the product:</strong> Every product we make should be considered as our own child and give it the best. Where has anyone given birth to a child? I have to take care of it since I was pregnant to keep it healthy. It still has to be taken care of so that it looks clean and behaves with others politely. Just like from the stage of code has to be clean, making products must have good UI, good UX, less bugs, less crashes.</li>
<li><strong>Adhere to UX-/UX design principles:</strong> When the design is most important to focus on the user, in addition the design must ensure consistency, responsiveness to the context and content.</li>
<li><strong>Soft skills:</strong> Soft skills are an important factor to help us become a good designer. Specifically, we must have the ability to communicate, think creatively. Must know how to react flexibly and understand users. The foreign language factor is the most important part, good foreign languages ​​will have many opportunities and the ability to advance in work.</li>
</ul>
<p>Actually, I see that every job will have difficulties, when I overcome those difficulties, I will receive extremely worthy results. Up to now, UI-UX is still the thing that makes the most passion and attachment. Now I just want to be good at the job I have, accept the parts that won't turn out the way I wanted, and enjoy the moment when I can forget all about the work</p>
<p>Just that, then in the evening, at the weekend, go chill, don't worry too much, life is in balance, and then find many different ways to make yourself happy, that's all.</p>
<p>Hard work pays off. Work hard to train and equip yourself with the necessary skills and qualities to be stronger on the career development path of a UI-UX Designer, friends!</p>
<p>I'm Hung, thank you for your interest in my Blog!!!</p>
<div id="md2html-converted" style="display:none"></div><div id="md2html-converted" style="display:none"></div>

I want to share with you a little story about my UI-UX learning process and the difficulties I encountered.

My process of learning UI-UX

<p>Hello everyone!</p>
<p>It's me Quoc Hung again from ABC Software Solutions Company.</p>
<p>Most UI-UX beginners when starting to design a new project are often confused about which font to choose, layout colors or reasonable distances to make their designs stand out. … To help answer that question in this article, I want to share with you a very good library that is the Material-UI library in Figma.</p>
<p>MUI (Material-UI) is not a new topic but it is still very hot. When it comes to Material-UI people will think of React, yes the MUI libraries on Figma also mostly follow React's programming rules. Specifically, let's learn more about this interesting and wonderful topic.</p>
<h2 id="whatismaterialui">What is Material-UI?</h2>
<p><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/mui_a8d388dc78.png" alt="mui.png" /></p>
<p>The concept of Material-UI starts from a library of React Components that have been integrated with Google's Material Design. According to the introduction on the homepage, it was built through a strong connection with React and Google's Material Design.</p>
<p>Material UI gives you and your website a completely new interface, with buttons, textfields, toggles… designed in a novel style, instead of the current Bootstrap user's housework. The use of Material-UI helps users save a lot of time from the available Components. With over 20 Components it is probably enough for your website to be lively as well as very easy to maintain the code.
Some noteworthy Components:</p>
<ul>
<li><strong>Layout:</strong> Layout is called the layout for a website. With this part, Material-UI has built very handy Components for us like: Box, Container, Grid, Hidden, Image List.</li>
<li><strong>Inputs:</strong> Inputs are components that are built to receive data and manipulate forms. With Components such as Button, Button Group, Checkbox, Floating Action Button, Date/Time, Radio, Select, Slider, Switch, Text Field, Transfer List.</li>
<li><strong>Navigations:</strong> With built-in components for Navigate or application navigation. It's too convenient and professional when we use this UI library. Framework has built-in Components such as: BottomNavigations, BreadCrumbs, Drawer, Link, Menu, Stepper, Tabs.</li>
<li><strong>Surfaces:</strong> Material has also created for us a frame that contains available content, we can use Components such as: App Bar, Paper, Card, Accordition.</li>
<li><strong>Feedback:</strong> We have Components that help disable custom functions on the screen and wait for the response of those components to be able to work again. There are a number of components like: Progress, Dialog, Snackbar, Backdrop. In it as simple as Cmponent Progress we can create a Loading effect that waits for a response from the backend and then turns off Loading.</li>
<li><strong>Data Display:</strong> Material-UI has supported us with basic data display methods that almost have everything needed on an application with Components: Avatar, Badge, Chip, Divider, Icons, List, Table, Tooltip , Typography format for text).</li>
</ul>
<p>In addition, we can also take advantage of a lot of other Components to help our website become more professional such as: Modal, Poover, Transitions… everyone can go to the homepage for more information.</p>
<h2 id="materialuiinfigma">Material-UI in Figma</h2>
<p>To create a beautiful user interface, it is necessary to follow a lot of rules in design (Color, Typography, Contrast, Spacing, Grid, …) these rules will mostly be numerous and confusing for beginners. I started learning Figma design, so Material-UI in Figma was born, helping designers have a more intuitive view and easier to build designs.
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Mui_for_figma_0b6c981e76.png" alt="Mui-for-figma.png" /></p>
<p>With Material-UI in Figma we can take advantage of the libraries shared by designers around the world on the Figma community, open the Material-UI library right away that will answer all your questions. Like React Components, Figma also has Components to share, Components in Figma have the main function of helping designers easily manage layers as well as help create and manage consistent designs across projects.</p>
<p>When working with a programming team, you should use a unified set of Material-UI that will save time as well as ensure that there will be no minor errors throughout the project implementation process. As a personal designer, after receiving the guidance and help of Mr. Tin Tran (Developer with many years of experience) has launched a UI Kit in the standard style of Tailwind CSS code. With the use of the available resources of Tailwind CSS (color, Spacing, Typography, Borders, Effects, SVG,…) now when embarking on a new project, just using the preconfigured resources is very convenient. profit.</p>
<h2 id="personalopinion">Personal opinion</h2>
<p><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/ui_kit_ce692fd450.png" alt="ui-kit.png" /></p>
<p>Of course, about beauty, everyone's personal opinion is different, you may find the Material-UIs on the Figma community are not eye-catching or do not meet your design goals. Build your own UI Kit and share it with everyone.</p>
<p>As for convenience, it's clear that Material UI has provided more than enough for a project, making our individual or group work faster and more perfect. In addition, you should also refer to the designs on Figma's community to save impressive designs, contributing to your design skills and logical thinking.</p>
<p>Through this article I would like to introduce about Material-UI React as well as Material-UI on Figma and the great benefits it brings to designers. Hope this article helps people to some extent in choosing your design style.</p>
<p>I'm Hung, thanks for your interest in my Blog!!!</p>
<div id="md2html-converted" style="display:none"></div><div id="md2html-converted" style="display:none"></div>

Most UI-UX beginners, when starting to design a new project, are often confused about which font to choose, the layout colors or the reasonable distances to make their design stand out. To help answer that question in this article, I would like to share with you a very good library that is the Material-UI library in Figma.

Material-UI in Figma

<p><span style="background-color:rgb(255,255,255);color:rgb(34,34,34);font-family:&quot;Helvetica Neue&quot;, Helvetica, Roboto, Arial, sans-serif;">Hi!! I'm Hung from ABC Software Solutions Company.&nbsp;</span></p><p><span style="background-color:rgb(255,255,255);color:rgb(34,34,34);font-family:&quot;Helvetica Neue&quot;, Helvetica, Roboto, Arial, sans-serif;">In this article, I want to share with you some orientations about UI design for beginners, the following content is the process of learning about UI, as well as some difficulties encountered when starting design. So how to be a good designer? Let's dig deeper with me. UI designer is a new but very "hot" industry. Large companies in programming and designing websites and mobile applications have a need to recruit UI designers with high salaries, making this job promising. Offers for UI Designers are also increasing year by year. However, this industry does not have a formal training system at universities, so there is a situation where supply is not enough. Especially the students who have not been exposed to much when they are still in the lecture hall. Learning Design UI is difficult and doesn't follow a process. And here are the steps to get you started learning UI from your personal experience.&nbsp;</span></p><h2><span style="background-color:rgb(255,255,255);color:rgb(34,34,34);font-family:&quot;Helvetica Neue&quot;, Helvetica, Roboto, Arial, sans-serif;">Join a design course&nbsp;</span></h2><p><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Rectangle_2_efd140ffbc.png" alt="Rectangle 2.png"><span style="background-color:rgb(255,255,255);color:rgb(34,34,34);font-family:&quot;Helvetica Neue&quot;, Helvetica, Roboto, Arial, sans-serif;"> If you feel that the amount of information on the internet is too much and rambling, you do not know how to systematize that information, then I recommend you to learn and participate in a UI design course. The design course will help you systematize that scattered knowledge into a unified block, teaching you how to work effectively as a team. In addition, you also get help from the course's lecturers - often those with long experience in the industry. In addition, it is also very important for you to learn from books and newspapers.&nbsp;</span></p><h2><span style="background-color:rgb(255,255,255);color:rgb(34,34,34);font-family:&quot;Helvetica Neue&quot;, Helvetica, Roboto, Arial, sans-serif;">Join design communities and learn about UI design through books and magazines&nbsp;</span></h2><p><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/62862fd2335ea321a6b0f76c_Mission_b6014b593a.png" alt="62862fd2335ea321a6b0f76c_Mission.png"></p><p><span style="background-color:rgb(255,255,255);color:rgb(34,34,34);font-family:&quot;Helvetica Neue&quot;, Helvetica, Roboto, Arial, sans-serif;">&nbsp;It is very easy for you to join a UI design community, be it through FaceBook, Instagram, Dribbble,… Joining a design community will help you meet and make new friends. We will share stories, common problems at work,… or share knowledge. In addition, you can access more job opportunities by joining a community.</span></p><h2><span style="background-color:rgb(255,255,255);color:rgb(34,34,34);font-family:&quot;Helvetica Neue&quot;, Helvetica, Roboto, Arial, sans-serif;">&nbsp;Master basics of visual design&nbsp;</span></h2><p><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Graphic_design_basics_85fb8581c5.jpg" alt="Graphic-design-basics.jpg"><span style="background-color:rgb(255,255,255);color:rgb(34,34,34);font-family:&quot;Helvetica Neue&quot;, Helvetica, Roboto, Arial, sans-serif;"> When I was a beginner, I just thought that the design was just beautiful and pleasing to my eyes, of course for a person like me, the design did not follow any rules and was completely wrong. User Interface is the face of the product, it is the place where users see and interact with your design. In order to ensure a good enough interface, you need to master the basics of the meaning of color and the principle of using color.</span></p><ul style="list-style-type:disc;"><li><span style="background-color:rgb(255,255,255);color:rgb(34,34,34);font-family:&quot;Helvetica Neue&quot;, Helvetica, Roboto, Arial, sans-serif;">&nbsp;Typography: types of fonts, font systems as well as rules for using typo in UI design.&nbsp;</span></li><li><span style="background-color:rgb(255,255,255);color:rgb(34,34,34);font-family:&quot;Helvetica Neue&quot;, Helvetica, Roboto, Arial, sans-serif;">Contrast: contrast, build information hierarchy, create emphasis.&nbsp;</span></li><li><span style="background-color:rgb(255,255,255);color:rgb(34,34,34);font-family:&quot;Helvetica Neue&quot;, Helvetica, Roboto, Arial, sans-serif;">Spacing: Using whitespace helps to separate or group information on the interface, making the visual hierarchy clearer.&nbsp;</span></li><li><span style="background-color:rgb(255,255,255);color:rgb(34,34,34);font-family:&quot;Helvetica Neue&quot;, Helvetica, Roboto, Arial, sans-serif;">Grid: the information on the interface is arranged neatly and neatly, helping to increase the uniformity of your interface.&nbsp;</span></li><li><span style="background-color:rgb(255,255,255);color:rgb(34,34,34);font-family:&quot;Helvetica Neue&quot;, Helvetica, Roboto, Arial, sans-serif;">Color: the meaning of color and the principle of using color.</span></li></ul><h2><span style="background-color:rgb(255,255,255);color:rgb(34,34,34);font-family:&quot;Helvetica Neue&quot;, Helvetica, Roboto, Arial, sans-serif;">Understand Design Process&nbsp;</span></h2><p><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/1_33kh_N9zp_FCM_Wn_F8p_Lqe_VTQ_75ecc881ff.png" alt="1_33khN9zpFCMWnF8pLqeVTQ.png"></p><p><span style="background-color:rgb(255,255,255);color:rgb(34,34,34);font-family:&quot;Helvetica Neue&quot;, Helvetica, Roboto, Arial, sans-serif;">&nbsp;A lot of new designers often don't care about the form and the customer's goals, often go to the design step as soon as they receive the request (I used to be). And I realized this is not good at all. We should have a design in a scientific and researched way. The first thing I recommend learning about the product design process. There are several processes you can search on Google with the keyword “design process”. A good product is one that solves a user's problem. To do this, you need to know who you make products for, what problems they solve, how to solve them…&nbsp;</span></p><p><span style="background-color:rgb(255,255,255);color:rgb(34,34,34);font-family:&quot;Helvetica Neue&quot;, Helvetica, Roboto, Arial, sans-serif;">This is the most basic principle in the design industry, which is used for product design. products from physics to technology. Good design thinking will help you answer those questions through this process:</span></p><ul><li><span style="background-color:rgb(255,255,255);color:rgb(34,34,34);font-family:&quot;Helvetica Neue&quot;, Helvetica, Roboto, Arial, sans-serif;">&nbsp;Empathize: Empathize with the user.</span></li><li><span style="background-color:rgb(255,255,255);color:rgb(34,34,34);font-family:&quot;Helvetica Neue&quot;, Helvetica, Roboto, Arial, sans-serif;">&nbsp;Define: Defines the problem the user is facing.</span></li><li><span style="background-color:rgb(255,255,255);color:rgb(34,34,34);font-family:&quot;Helvetica Neue&quot;, Helvetica, Roboto, Arial, sans-serif;">&nbsp;Ideate: Come up with an idea.&nbsp;</span></li><li><span style="background-color:rgb(255,255,255);color:rgb(34,34,34);font-family:&quot;Helvetica Neue&quot;, Helvetica, Roboto, Arial, sans-serif;">Prototype: Design the first prototype.&nbsp;</span></li><li><span style="background-color:rgb(255,255,255);color:rgb(34,34,34);font-family:&quot;Helvetica Neue&quot;, Helvetica, Roboto, Arial, sans-serif;">Test: Test the design.&nbsp;</span></li></ul><p><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/UI_UX_Design_b985bfbb7e.jpg" alt="UI-UX-Design.jpg"><span style="background-color:rgb(255,255,255);color:rgb(34,34,34);font-family:&quot;Helvetica Neue&quot;, Helvetica, Roboto, Arial, sans-serif;"> Based on the above conclusions, I will summarize the main directions that people should pay attention to as follows:&nbsp;</span></p><ul><li><span style="background-color:rgb(255,255,255);color:rgb(34,34,34);font-family:&quot;Helvetica Neue&quot;, Helvetica, Roboto, Arial, sans-serif;">Self-study online by taking foundation courses: Online Web Design Course. Read a lot of books and specialized magazines Take courses in using Figma design software. Update the latest design trends at home and abroad.</span></li><li><span style="background-color:rgb(255,255,255);color:rgb(34,34,34);font-family:&quot;Helvetica Neue&quot;, Helvetica, Roboto, Arial, sans-serif;">&nbsp;Join Community Groups on Facebook: Learn Figma. Train your design thinking by working on your own projects and following the design process.</span></li><li><span style="background-color:rgb(255,255,255);color:rgb(34,34,34);font-family:&quot;Helvetica Neue&quot;, Helvetica, Roboto, Arial, sans-serif;">&nbsp;Identify strengths and build profiles: Each individual has their own strengths and weaknesses, at first you may not realize what your strengths are, what areas you are really suitable for. Analyze your own strengths Develop a plan to develop strengths and improve weaknesses Please do internships at companies to gain more experience.</span></li><li><span style="background-color:rgb(255,255,255);color:rgb(34,34,34);font-family:&quot;Helvetica Neue&quot;, Helvetica, Roboto, Arial, sans-serif;">&nbsp;Understanding the market, recruitment process: Once you have the knowledge, experience and skills in hand, the last thing you need to do is choose a suitable job.&nbsp;</span></li></ul><p><span style="background-color:rgb(255,255,255);color:rgb(34,34,34);font-family:&quot;Helvetica Neue&quot;, Helvetica, Roboto, Arial, sans-serif;">The above is all my sharing as well as my experiences in the process of learning design, I know everyone will have different approaches, but I still hope this article helps everyone to some extent.&nbsp;</span></p><p><span style="background-color:rgb(255,255,255);color:rgb(34,34,34);font-family:&quot;Helvetica Neue&quot;, Helvetica, Roboto, Arial, sans-serif;">Once again, I'm Hung, thank you for your interest in my Blog!!!</span></p>

I want to share with you some orientations about UI design for beginners

UI-UX

Contact Us