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.

Four Elements of Website Design to Consider

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 is 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 the help of diagrams, exercises and quizzes.
  • 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.

SEMrush Software 1 SEMrush Banner 1