{"id":33,"date":"2024-01-07T17:02:23","date_gmt":"2024-01-07T17:02:23","guid":{"rendered":"https:\/\/www.wendyzhou.se\/books\/?p=33"},"modified":"2025-09-02T12:22:41","modified_gmt":"2025-09-02T12:22:41","slug":"2-software-tools","status":"publish","type":"post","link":"https:\/\/www.wendyzhou.se\/books\/2-software-tools\/","title":{"rendered":"2. Software & Tools"},"content":{"rendered":"\n

There are many design software available for UI design, which have been specially made to help designers create mockups and prototypes. <\/p>\n\n\n\n

UI design software is based on vector graphics, which is a form of computer graphics based on geometric shapes such as lines, points, and curves as opposed to drawn pixels. <\/p>\n\n\n\n

Vector graphics are important because UIs are built upon such geometric shapes, and you\u2019ll often need to export components that need to be re-sizeable without losing quality. <\/p>\n\n\n\n

As a beginner, the exact tool you learn isn\u2019t very important, since they are all fairly similar. Once you have mastered one, you will be able to quickly learn another. <\/p>\n\n\n\n

However, it can be beneficial to learn tools and software that are popular. Popular software has more available tutorials, and guides, as well as may save learning time when you begin working with a company that uses the same software.<\/p>\n\n\n\n

2.1. Most Popular UI Design Software<\/h3>\n\n\n\n

Some of the most popular and recommended UI design software are Figma<\/strong>, Sketch<\/strong>, Invision, Principal, and Framer. They are all fairly easy to learn and you can create wireframes, mockups, and prototypes with all of them.<\/p>\n\n\n\n

Figma<\/strong><\/p>\n\n\n\n

Figma<\/a> <\/strong>is a very collaborative software, designed for teamwork, allowing multiple people to interact with a document simultaneously. For example, you can see other people\u2019s live actions, leave comments, and reply to them, as well as play games and chat inside files.<\/p>\n\n\n\n

In addition, it\u2019s fully cloud-based, meaning that you can access it from any device with the internet, and it also has an offline mode. However, it does work best on a desktop. <\/p>\n\n\n\n

Figma also allows for plenty of plugins made by companies and individual contributors, community files, and features such as auto-layouts and resizing.<\/p>\n\n\n\n

Sketch<\/strong><\/p>\n\n\n\n

Sketch<\/a> is a solid design program that has been an industry staple for a long time. It has plenty of functions offered by Figma as well, and you will have no problems creating designs with it. However, the catch is that Sketch is only available on Mac for editing, which can be restrictive.<\/p>\n\n\n\n

More advanced programs<\/strong><\/p>\n\n\n\n

There are also other more specialized tools, such as Framer and Principal that are more geared towards complex and detailed animations and prototyping, as well as others dedicated to niches such as 3D modeling.<\/p>\n\n\n\n

More specialized software often has a steeper learning curve, which you do not need to directly burden yourself with from the start. Therefore, I\u2019d recommend beginners to first learn easier ones, and then get familiar with additional tools as one’s skills advance.<\/p>\n\n\n\n

2.1.1. Recommendation<\/h4>\n\n\n\n

I recommend beginners to start with Figma <\/strong>since it\u2019s free for personal use! Figma also offers a lot of helpful guides and tutorials to get you started. <\/p>\n\n\n\n

There is also a very active community amongst Figma users, that share plenty of free files, tips, tricks, and tutorials with each other on sites such as Twitter. This online community can be a great deal of fun for anyone who may not be surrounded by many designers in their physical environment.<\/p>\n\n\n\n

In addition, the fact that Figma is entirely cloud-based is great! It will make it easy for you to design more frequently and from different locations and situations in your life. I personally also believe that this is the future way of working with digital design in a remote climate.<\/p>\n\n\n\n

Since Figma is so popular, learning it can also increase your chances of more easily fitting into various companies and organizations that also use it. This can lower the threshold for getting your first job or being able to create your first professional project.<\/p>\n\n\n\n

2.2. Learn How to Create UI Components<\/h3>\n\n\n\n

When you begin learning how to create designs in your chosen software, it can be helpful to start with the basics – common shapes, visual effects, and components.<\/p>\n\n\n\n

Almost all UI design and front-end development are built with a recurring number of components. If you master these basic components and features, you\u2019ll soon be able to recreate any design you might come across. <\/p>\n\n\n\n

Basic UI components to learn how to create:<\/p>\n\n\n\n

    \n
  • Shapes<\/strong> such as rectangles, circles, and triangles<\/li>\n\n\n\n
  • Fine adjustments to shapes<\/strong> such as adding border-radius (rounded corners)<\/li>\n\n\n\n
  • Grouping and layering<\/strong> of elements and frames – For example combining a square and a circle to create a new shape<\/li>\n\n\n\n
  • Adding colors<\/strong> that can be solid or different types of gradients (combinations of colors that are gradually overlapping)<\/li>\n\n\n\n
  • Changing the opacity<\/strong> of components. Lower contrast to make something less visually distinct, and vice versa<\/li>\n\n\n\n
  • Adding shadows<\/strong> with different colors, strengths, and opacity. You may also add multiple shadows on top of each other to create the effect of various elevations and floating<\/li>\n\n\n\n
  • Adding grids<\/strong> as guidelines to help you see where to place UI components for consistency and aesthetics<\/li>\n\n\n\n
  • Adding auto-layouts <\/strong>to groups of elements to get consistent amounts of padding, margin, and other repeated spacing<\/li>\n\n\n\n
  • Various frame and screen sizes<\/strong> to simulate different devices (mobile, tablet, desktop, and tv)<\/li>\n\n\n\n
  • Adding prototyping<\/strong> – practice thinking about the entire user journey and the experience from going from one part of the design to another<\/li>\n<\/ul>\n\n\n\n

    With enough experience with various UI design components, you will be able to start getting creative with how you combine the components you\u2019ve seen or made in the past.<\/p>\n\n\n\n

    While you\u2019re at it, you might as well also try learning some common keyboard shortcuts. I won\u2019t go through them here since different software uses different shortcuts, but I\u2019d recommend you learn how to shortcut:<\/p>\n\n\n\n

      \n
    • Creating a group of elements<\/li>\n\n\n\n
    • Select multiple items in one mouse drag<\/li>\n\n\n\n
    • Deleting one or multiple elements<\/li>\n\n\n\n
    • Zooming in and out<\/li>\n\n\n\n
    • Scrolling vertically or horizontally<\/li>\n\n\n\n
    • Various ways of changing multiple elements at once<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"

      There are many design software available for UI design, which have been specially made to help designers create mockups and prototypes.  UI design software is based on vector graphics, which is a form of computer graphics based on geometric shapes such as lines, points, and curves as opposed to drawn pixels.  Vector graphics are important […]<\/p>\n","protected":false},"author":1,"featured_media":161,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"","ocean_second_sidebar":"","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"","ocean_custom_header_template":"","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"","ocean_menu_typo_font_family":"","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"","ocean_post_oembed":"","ocean_post_self_hosted_media":"","ocean_post_video_embed":"","ocean_link_format":"","ocean_link_format_target":"self","ocean_quote_format":"","ocean_quote_format_link":"post","ocean_gallery_link_images":"on","ocean_gallery_id":[],"footnotes":""},"categories":[1],"tags":[],"class_list":["post-33","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","entry","has-media"],"_links":{"self":[{"href":"https:\/\/www.wendyzhou.se\/books\/wp-json\/wp\/v2\/posts\/33","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wendyzhou.se\/books\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wendyzhou.se\/books\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wendyzhou.se\/books\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wendyzhou.se\/books\/wp-json\/wp\/v2\/comments?post=33"}],"version-history":[{"count":4,"href":"https:\/\/www.wendyzhou.se\/books\/wp-json\/wp\/v2\/posts\/33\/revisions"}],"predecessor-version":[{"id":119,"href":"https:\/\/www.wendyzhou.se\/books\/wp-json\/wp\/v2\/posts\/33\/revisions\/119"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.wendyzhou.se\/books\/wp-json\/wp\/v2\/media\/161"}],"wp:attachment":[{"href":"https:\/\/www.wendyzhou.se\/books\/wp-json\/wp\/v2\/media?parent=33"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wendyzhou.se\/books\/wp-json\/wp\/v2\/categories?post=33"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wendyzhou.se\/books\/wp-json\/wp\/v2\/tags?post=33"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}