Website Design  «Prev  Next»
Lesson 1

Planning Website Design

Welcome to Planning a Website Design!
This course describes the first
  1. three layers of the Web Interaction Model,
  2. signs and metaphors,
  3. information architecture,
  4. and software,
as they apply to the website design of a project.
As the second in a three-part series that teaches you the requirements for planning a Web site, this course teaches the standards and tools Web design teams apply to meet the demands of developing a client's Web site.
The third course in this series, Planning a Web Site Deployment, focuses on networks and hardware requirements, the two remaining layers of the Web Interaction Model.
When planning a website design, the four elements 1) "three layers of the Web Interaction Model", 2) "signs and metaphors", 3) "information architecture", and 4) "software", play a vital role in creating a user-friendly, efficient, and effective online experience. Here's how they should be considered:
  1. Three Layers of the Web Interaction Model

    The three layers of the Web Interaction Model: presentation, behavior, and content, must be addressed to ensure a cohesive and functional website.

    • Presentation Layer: This includes the website's visual design (e.g., layout, colors, typography, and imagery). It should align with the brand identity, appeal to the target audience, and enhance usability by maintaining consistency and clarity.
    • Behavior Layer: This refers to the interactivity of the website, including navigation, animations, and responsiveness to user actions. Effective planning ensures that the website responds intuitively to user inputs and provides a seamless experience across devices.
    • Content Layer: The core of the website is its content, which must be relevant, engaging, and well-structured. Planning should ensure content is accessible and optimized for both users and search engines (SEO).

    Considering these layers holistically ensures the website is aesthetically pleasing, user-friendly, and informative.

  2. Signs and Metaphors

    Signs and metaphors are crucial for intuitive navigation and user engagement.

    • Signs: Visual cues like icons, buttons, and links help users understand what actions are possible and guide them through the site. For example, a magnifying glass icon universally represents a search function.
    • Metaphors: These draw on familiar real-world concepts to make digital interactions more intuitive. For instance, using a "shopping cart" metaphor in e-commerce websites helps users relate the virtual experience to physical shopping.

    When planning, it’s important to use universally recognizable signs and metaphors to minimize the learning curve for users and ensure the interface feels intuitive and accessible.

  3. Information Architecture

    Information architecture (IA) involves organizing and structuring content to facilitate easy navigation and access.

    • Content Hierarchy: Plan how content will be categorized and prioritized to meet user needs. This includes defining a clear menu structure, navigation paths, and breadcrumbs.
    • User-Centered Design: Conduct user research to understand how your target audience searches for information. IA should reflect user mental models to ensure information is intuitive to find.
    • Search Optimization: Include tagging, metadata, and a search function to help users locate specific content quickly.

    A well-planned IA ensures that users can navigate the site effortlessly, reducing frustration and increasing engagement.

  4. Software

    The software used to build the website determines its functionality, performance, and scalability.

    • CMS and Frameworks: Choose a content management system (CMS) or web framework (e.g., WordPress, Drupal, React) that aligns with your technical requirements and skillset.
    • Compatibility and Standards: Ensure the software supports modern web standards (HTML5, CSS3) and is compatible with different browsers and devices.
    • Security and Performance: Consider software that includes built-in security features and optimizes performance, such as caching and load balancing.
    • Integration Capabilities: Evaluate the software’s ability to integrate with third-party tools like analytics, payment gateways, or customer relationship management (CRM) systems.

Choosing the right software ensures the website is robust, secure, and capable of supporting future growth or changes.
Conclusion: By integrating the "three layers of the Web Interaction Model", "signs and metaphors", "information architecture", and "software" into the planning process, you can create a well-designed website that balances aesthetics, usability, functionality, and performance. These elements work together to provide an engaging user experience and support the website’s long-term goals.

Human Computer Interaction

Course goals

  1. After completing the course, you will be able to:
  2. Describe the importance of signs and metaphors for engaging users
  3. Describe the tools and team process for creating effective signs and metaphors
  4. Identify success factors and risks in creating signs and metaphors
  5. Identify how a design team plans a Web site's information architecture
  6. Describe how a client's needs determine information architecture requirements
  7. Describe the various software packages used to design and deploy Web sites
  8. Describe how a design team selects the most efficient software solution to meet the client's needs
In this course, you will learn about design strategies and tools with three kinds of applets:

Importance of Signs and Metaphors for engaging users during Web Design

Signs and metaphors play an important role in engaging users during web design, as they help to create a more intuitive and user-friendly experience. Some of the ways that signs and metaphors can help to engage users include:
  1. Providing Context: Signs and metaphors can provide context and help users to understand the purpose and function of a website, making it easier for them to navigate and find the information they need.
  2. Enhancing User Experience: Signs and metaphors can enhance the user experience by creating a more visually appealing and memorable experience. This can help to make a website more engaging and increase the likelihood that users will return.
  3. Facilitating Navigation: Signs and metaphors can help to facilitate navigation by providing clear visual cues and making it easier for users to understand how to move from one section of a website to another.
  4. Creating a Brand Identity: Signs and metaphors can also help to create a brand identity by reinforcing the brand's values and personality, making it easier for users to associate a website with a particular brand.
  5. Encouraging Interaction: Signs and metaphors can encourage interaction by making it clear what actions users can take and providing visual feedback when actions are completed. This can help to make a website feel more interactive and engaging.
Signs and metaphors are important tools for engaging users during web design, as they provide context, enhance the user experience, facilitate navigation, create a brand identity, and encourage interaction. The use of signs and metaphors can help to create a more intuitive and user-friendly experience, making it easier for users to find what they're looking for and encouraging them to return to a website.

The series

Planning a Web Site Design is the second of three courses in the Internet Development Teams and Technologies Series. The first course in the series is Planning Website Deployment.