IT7 HCI

• Web Design


  The process of creating and designing the visual aesthetics and layout of websites
• Web Design


  • Involves various elements, including the overall look and feel, color scheme, typography, images, graphics, and user interface design
  • Combines creativity, technical skills, and user-centered thinking to create visually appealing and functional websites that meet the needs of both the client and the target audience
• Website


  A collection of web pages from a domain or sub domain that contains various information that can be accessed via the internet
• User Interface (UI)


  The visual elements and layout of a website that users interact with
• User Experience (UX)


  The overall experience and satisfaction a user has while interacting with a website
• Wireframe


  A basic visual representation of a website's layout and structure, showing the placement of elements without detailed design
• Mockup


  A more detailed visual representation of a website's design, often created in graphic design software
• Responsive Design


  Designing a website to adapt and display properly on various devices and screen sizes
• Backend


  The server-side programming and functionality of a website that is not directly visible to users
• Frontend


  The client-side programming and presentation layer of a website that users interact with directly
• Prototyping

  Creating a preliminary model or representation of a website's design or functionality to test and validate concepts before starting full-scale development
• Main Purposes of Web Design

  • Communication & Information
  • User Experience
  • Brand Identity/Business
• Types of Web Design

  • Responsive Web Design
  • Flat Design
  • Minimalist Design
  • Illustrative Design
  • Material Design
  • Typography-Driven Design
  • Parallax Design
• Two Ways to Design a Website


  • Desktop App - Software programs installed on a computer that allow you to design and develop websites locally. These applications typically offer more advanced features and customization options compared to online web builders Examples: Adobe XD, Adobe, Dreamweaver, Pinegrow, Bootstrap, Studio, Webflow, and more
  • Web Builders - are web-based platforms that allow users to create websites without the need for coding or technical skills. They provide a user-friendly interface and pre-designed templates that can be customized to create a website
• Web Design Visual Elements

  • Icons/Symbols
  • Typography
  • Shapes
  • Colors
  • Images and Graphics
  • Spacing
  • Layout
  • Videos
• Icons and symbols are visual representations of concepts, actions, or objects that provide visual cues and help users understand functionality or navigate through the website
• Typography refers to the selection, styling, and arrangement of text on a web page to enhance readability and convey the desired tone and personality of the website
• Shapes are graphical elements used to create visual interest and define the structure of the design
• Colors play a significant role in setting the mood, establishing brand identity, and guiding user attention
• Images, graphics, and illustrations are visual elements used to enhance the overall design and engage users
• Spacing, also known as whitespace, refers to the empty areas between design elements that help create visual separation, improve readability, and enhance overall visual balance
• The layout refers to the arrangement of content, images, and other elements on a web page to create a balanced and organized composition
• Videos can be used to capture attention, communicate messages effectively, and enhance the overall user experience
• There is a web design process/pipeline that involves various steps from planning to implementation
• Flat Design - is a minimalist approach thatemphasizes simplicity, clean lines, andvibrant colors. It avoids the use of 3Deffects, shadows, and gradients, focusingon flat and two-dimensional elements

  
• Minimalist Design - Focuses on simplicity and elegance byusing clean lines, ample whitespace, andlimited color palettes.

  
• Illustrative Design - incorporates hand-drawn or digitally created illustrations as a prominent visual element. Illustrations are used to enhance storytelling, add personality, and create a unique visual style.

  
• Material Design - a design language developed by Google that combines principles of flat design with tactile and realistic elements. It uses subtle shadows, depth effects, and responsive animations to create a more interactive and engaging user experience.

  
• Typography-Driven Design - places a strong emphasis on typography as a central design element. It involves using creative typography choices, font combinations, and hierarchy to convey messages and evoke emotions

  
• Parallax Design - It creates an illusion of depth by moving background and foreground elements at different speeds while scrolling. This technique adds visual interest and interactivity to the website, creating amore immersive and engaging user experience.

  
• User Modelling


  Understanding your target audience and delivering relevant content to them is one of the strategic priorities of any business operation
• Types of user model


  • Psychological theories
  • Task Analysis
  • Cut-down psychological theories
  • Simplistic psychological theories
  • Simplex One as a simplistic theory
• User models and Evaluation


  • Using design principles or heuristics for evaluation
  • Evaluating user requirements with Simplex One
  • Evaluating design options with Simplex One
• Simplex One


  A simplistic theory
• Well-known Design Principles


  • Principles to Support Usability
  • Principles to Support Learnability
  • Principles to Support Robustness
• Learnability


  • The ease with which new users can begin effective interaction and achieve maximal performance
• Flexibility


  • The multiplicity of ways the user and system exchange information
• Robustness


  • The level of support provided the user in determining successful achievement and assessment of goal-directed behavior
• Predictability


  • Determining effect of future actions based on past interaction history operation visibility
• Synthesizability


  • Assessing the effect of past actions
  • Immediate vs. eventual honesty