INTRODUCTION TO UI/UX DESIGN BEGINNERS.pdf

INTRODUCTION TO UI/UX DESIGN BEGINNERS.pdf

• 1.
  Introduction to UI/UX UserInterface and User Experience
• 2.
  Who is aUIUX Designer? A UI/UX (User Interface/User Experience) Designer is a professional who specializes in creating digital interfaces and experiences that are user-friendly, aesthetically pleasing, and functional. UI/UX designers work to enhance the way users interact with digital products, whether that be a website, mobile app, software application, or any other form of digital interface. They are responsible for ensuring that the user's journey is not only seamless but also enjoyable, aiming to create a positive and memorable experience.
• 3.
  Responsibilities and rolesof a UI/UX Designer 1. User Interface (UI) Design: ● Designing the visual elements of a digital product, including the layout, colors, typography, buttons, icons, and other graphical elements. ● Focusing on the aesthetics and overall look and feel of the user interface to make it visually appealing and aligned with the brand's identity. 2. User Experience (UX) Design: ● Conducting user research to understand the target audience, their needs, behaviors, and pain points. ● Creating information architectures and wireframes to structure content and navigation logically. ● Developing user personas and user flows to ensure an intuitive and user-centric experience. ● Usability testing to gather feedback and make improvements based on real user interactions.
• 4.
  Understanding Atomic Design Atits core, Atomic Design is a methodology that crafts interfaces from the ground up. Drawing parallels with chemistry, it dissects design elements into their most basic parts and then assembles them to shape intricate, cohesive components. ● Atoms are the basic building blocks of all matter. Each chemical element has distinct properties, and they can’t be broken down further without losing their meaning. (Yes, it’s true atoms are composed of even smaller bits like protons, electrons, and neutrons, but atoms are the smallest functional unit.) ● Molecules are groups of two or more atoms held together by chemical bonds. These combinations of atoms take on their own unique properties, and become more tangible and operational than atoms. ● Organisms are assemblies of molecules functioning together as a unit. These relatively complex structures can range from single-celled organisms all the way up to incredibly sophisticated organisms like human beings.
• 5.
  Grids A grid ismade up of columns, gutters, and margins that provide a structure for the layout of elements on a page.There are three common grid types used in websites and interfaces: column grid, modular grid, and hierarchical grid Columns: Columns take up most of the real estate in a grid. Elements and content are placed in columns. To adapt to any screen size, column widths are generally defined with percentages rather than fixed values and the number of columns will vary. For example, a grid on a mobile device might have 4 columns and a grid on a desktop might have 12 columns. Gutters: The gutter is the space between columns that separates elements and content from different columns. Gutter widths are fixed values but can change based on different breakpoints. For example, wider gutters are appropriate for larger screens, whereas smaller gutters are appropriate for smaller screens like mobile. Margins: This refers to the left and right outermost areas on the screen. Content does not live in the margins of a grid. This space can be fixed or expressed as a percentage of the screen width and can change at different breakpoints.
• 6.
  More on Grids
• 7.
  Responsive and AdaptiveDesign Responsive Design Responsive Design ensures that a website's layout adjusts fluidly based on the screen size. Using flexible grids, fluid images, and media queries, designers can create a single layout that reconfigures itself based on the viewport. Adaptive Design Adaptive Design involves creating distinct layouts for different screen sizes or devices. When a user accesses a site, the server detects the device's properties and serves the corresponding layout.
• 8.
  Margin, Padding, Spacing
• 9.
  1. Margin Margin isthe space outside an element, separating it from other elements. Margins ensure elements aren't packed too closely together, which can make content hard to digest. They help in visually grouping or separating different parts of your design based on their relationship or functionality. 2. Padding Padding is the space inside an element, between its content and its border. Padding ensures the content inside an element, like text inside a button, has room to "breathe" and doesn't feel cramped. Proper padding enhances readability and the overall aesthetic appeal. 3. Spacing While margin and padding are types of spacing, when designers refer to spacing, they usually mean the general use of space in design. Spacing encompasses all the areas in design where space is used to create clarity, direction, emphasis, and visual interest. This includes the space between lines of text, between elements, and even the space inside elements (like padding).Spacing is a silent designer tool. It can make your design feel open and airy or dense and moody. It can guide your audience's eyes, emphasize importance, and ensure content is easily digestible.
• 11.
  Color and styleguide https://www.youtube.com/watch?v=lLsKBJ6Q5eo https://youtu.be/4CbbCnVNn3Q
• 12.
  Introduction to figma https://www.youtube.com/watch?v=bk65XXjWX7k
• 13.
  Set-up Grids, Spacing,Import Icons https://www.youtube.com/watch?v=o2Gq-w8YE7c https://youtu.be/Aq6PLpw9_fc