UI/UX Design Beginners Tutorial in Tamil | UI UX Design Full Course Tamil |UI UX Design Course Tamil

The speaker, a UI/UX designer from Beet Systems, introduces the course, outlining topics such as what UI/UX is, the role of a UI/UX designer, how famous brands like Apple, Nokia, and Blackberry utilize UI/UX, typography, logo types, color theory, and color psychology. The course will also cover Figma installation, basic tools, Pen Tool usage, and a practical login screen design.

UI (User Interface) refers to what users see and interact with on a screen, encompassing the look, feel, and interactivity of an application or website. UX (User Experience) is about the overall comfort and satisfaction a user derives from interacting with a product or service. Examples, like the comfort of different chairs, are used to illustrate the distinction. A personal anecdote about a coffee shop highlights the impact of bad user experience.

The section discusses good and bad UI designs using several examples. It emphasizes clarity, visibility, and consistency in design. Common mistakes in login screens, lack of clear labels, and inconsistent iconography are pointed out. The importance of color in appealing UI design is also highlighted, contrasting a purple-themed effective design with a dark, less visible one.

The speaker clarifies that there are no strict eligibility criteria for UI/UX designers, especially for freelancers, emphasizing talent over degrees. For corporate roles, a degree is usually required. Various roles within UI/UX like UX Designer, UI Designer, Design Architect, and UX Writer are explained. Common myths about UI/UX design, such as it being solely about aesthetics, its transient nature, and the role of AI, are debunked.

UI/UX designers are defined as individuals who solve problems creatively. An example involves addressing parking congestion in an East Asian country, where a simple balloon system was implemented to indicate free parking spots, showcasing an innovative, low-tech solution to a real-world problem.

The evolution and downfall of major mobile brands are analyzed through their UI/UX strategies. Apple's continuous innovation, starting from the iPod to the iPhone, Apple Watch, MacBook, and Vision Pro, is highlighted as a key to its success. Nokia's failure to adapt and embrace newer technologies, despite early durability and innovative keypad features, is discussed. Blackberry's initial innovations, like the pager and QWERTY keypad touchscreen, are noted, but their inability to keep up with competitors like Apple ultimately led to their decline.

Case studies are defined as research outputs of a design project, detailing the problem, research, and solution. A portfolio is a collection of these case studies, showcasing a designer's work. The Behance platform is introduced as a community for designers to display their portfolios.

The core design thinking process is explained in five phases: Empathize (understanding users through research and interviews), Define (formulating a problem statement based on research), Ideate (developing creative solutions), Prototype (creating working models of the design), and Test (evaluating the functionality and user experience).

Various aspects of brand strategy are covered: Brand Purpose (beyond monetary gains, focusing on societal impact, e.g., Toms shoes), Brand Vision (company's future aspirations, e.g., Tesla's green initiative), Brand Mission (actions taken to achieve the vision, e.g., Patagonia's environmental efforts), Brand Positioning (differentiating from competitors, e.g., Old Spice), Brand Personality (human-like traits, e.g., Nike's 'Just Do It'), and Brand Voice (communicating through characters or personas).

Typography, interchangeably referred to as fonts in design, is crucial for information visibility and user focus. The concept of hierarchy in typography (e.g., different font sizes for headings, sub-topics, and main content) is explained to ensure readability and visual organization. Professional fonts like DM Sans, Poppins, Helvetica, Roboto, and SF Pro are mentioned.

Five types of logos are discussed: Typographic (text-based, e.g., Coca-Cola), Pictorial (symbol-based, e.g., Apple), Mascot (character-based, e.g., KFC's Colonel and Cheetos' Chester Cheetah), Combination (text and symbol, e.g., Fanta), and Complex (intricate, often resembling emblems, e.g., Starbucks, Harley Davidson). Hidden meanings in famous logos like Amazon (A to Z delivery), Hyde (customer and seller handshake), FedEx (speed arrow), and Adidas (mountain for challenges) are explained.

Color theory delves into how colors work together. It categorizes colors into Primary (Red, Yellow, Blue), Secondary (formed by mixing two primary colors equally, e.g., Orange from Red and Yellow), and Tertiary (formed by mixing a primary and a secondary color, with one color dominating). This process explains the creation of a wide range of colors from just three base colors.

Color schemes guide designers in choosing harmonious colors. The color wheel is introduced as a foundational tool. Monochromatic (using shades of a single color, e.g., Animal Planet), Analogous (neighboring colors on the color wheel, e.g., Subway), Complementary (opposite colors, e.g., Shell), Split-Complementary (a base color and two adjacent to its complement, e.g., Fanta, Tide), Triadic (three evenly spaced colors, e.g., Burger King, Taco Bell), and Tetradic (two pairs of complementary colors, e.g., Google, Zoho) schemes are explained with brand examples and visual demonstrations.

Color psychology explores how colors influence human emotions and behavior. Each color is associated with specific meanings: Red (power, energy), Yellow (joy, attention), Green (nature, growth), Orange (warmth, creativity), Blue (stability, trust), Purple (royalty, luxury), Black (boldness, mystery), and White (peace). Brand examples like Zomato, Swiggy (red for hunger), Ola, Rapido (yellow for attention), and WhatsApp (green for balance) demonstrate the psychological application of colors in branding.

UX laws are guidelines for effective UI/UX design. Four main types are discussed: Heuristics (based on trial and error/self-learning), Principles (pre-defined rules, similar to physics), Cognitive Biases (based on human tendencies and thinking patterns), and Gestalt (based on psychological perception). Examples for each type are provided.

Fitt's Law states that the time to acquire a target is determined by its distance and size. An Amazon webpage is used to illustrate how easily accessible buttons (like 'Add to Cart' or 'Buy Now') adhere to this law. The Goal-Gradient Effect describes the tendency to increase effort as one gets closer to a goal, explained through progress bars in login processes.

Occam's Razor suggests choosing the simplest solution among equally effective ones, explained through identifying a horse over a zebra. Postel's Law advises being liberal in what you accept and conservative in what you send, illustrated by Google's flexible search bar that accepts various query formats.

The Law of Proximity states that objects near each other tend to be grouped together, exemplified by Spotify's layout of music content and playback controls. The Law of Similarity highlights the human tendency to perceive similar elements as part of a group, demonstrated by grouping numbers, fruits, and vegetables from a mixed list.

The Peak-End Rule suggests that people judge an experience based on its most intense (peak) and final moments, rather than the entire duration, illustrated with a movie example (Vikram's climax) and app feedback screens. The Zeigarnik Effect explains that uncompleted tasks are better remembered than completed ones, used in apps to remind users of unfinished actions or offer premium upgrades to resolve issues.

Figma is introduced as a vector-based design tool that supports collaboration. The process of installing Figma by signing in with a Gmail account is demonstrated. The basic interface upon opening Figma, including the main menu, preferences for theme settings (dark/light), and adding a new design file, is covered.

The tutorial demonstrates how to create frames (e.g., iPhone 13/14) in Figma. Basic shape tools like Rectangle, Line, Arrow, Ellipse (circle), Polygon (triangle), and Star are explained, along with their properties such as width, height, stroke, fill, and corner radius. The use of 'Shift' for proportional resizing and 'Ctrl+D' or 'Alt' for duplicating elements is also covered. Adding and customizing text, including changing font (typography) and font family (thickness), is shown.

The Pen Tool ('P' key) is introduced for creating custom vector shapes and icons. The instructor demonstrates tracing an image with the Pen Tool, explaining how to create sharp points and smooth curves. The utility of the Pen Tool is emphasized by comparing a pixelated icon to a smoothly rendered, custom-drawn vector icon, highlighting its importance for high-quality, scalable designs.

Figma plugins are shown to enhance workflow. Unsplash is used to directly import high-quality images into Figma, either to fill a frame or a specific shape. Content Reel is introduced for populating designs with placeholder text and avatar images, useful for rapid prototyping. The 'Remove.bg' website is demonstrated for instantly removing image backgrounds.

Rulers ('Shift+R') are used for precise alignment and spacing. Image masking in shapes is demonstrated by placing an image within a circle or rectangle. Gradients are explained as a way to blend two or more colors within a fill. The creation of a basic pie chart using circles and shape manipulation techniques is taught.

The process of exporting Figma designs in various formats (PNG, SVG, JPG, PDF) is covered. A practical demonstration then begins for creating a simple login page. This includes setting up the frame, adding text elements for 'Welcome Back,' 'Enter your username and password,' 'Username,' and 'Password,' along with input lines and a 'Login' button. The customization of text size and styling is shown. Additionally, the 'Glassmorphism' effect is introduced, demonstrating how to create a translucent, frosted glass look for elements on the login page.