Website and Web App Prototyping

# CHAPTER 6

Website and Web App Prototyping #

1. Introduction #

While mobile apps are constrained by physical thumbs and a 4-column grid, Desktop Websites and Web Apps revel in the luxury of infinite space. A 27-inch monitor allows for massive data density, complex multi-tier navigation, and sweeping visual storytelling. However, with infinite space comes infinite opportunity for user confusion. Prototyping for the desktop environment requires an entirely different architectural mindset than mobile. In this chapter, we will master Website and Web App Prototyping. We will engineer the interactions of massive e-commerce Mega Menus, simulate the "Sticky" headers of long-scrolling landing pages, and wire the complex Sidebar routing logic required for enterprise SaaS Dashboards.

2. Learning Objectives #

By the end of this chapter, you will be able to:

• Prototype complex Top Navigation bars with interactive Dropdowns/Mega Menus.

• Build long-scrolling Landing Pages with "Sticky" navigation components.

• Wire the logic for multi-page SaaS Dashboards (Sidebar Navigation).

• Differentiate between Desktop click psychology and Mobile touch psychology.

• Utilize "Overlays" for desktop-specific UI patterns (Tooltips, Modals).

3. Desktop Navigation (The Mega Menu) #

On a mobile phone, navigation is usually hidden behind a Hamburger icon. On a desktop, the navigation is proudly displayed across the top of the screen.

• The Dropdown Interaction: When a user hovers or clicks on a category like "Products," a massive menu should appear.

• The Prototyping Logic: You do not design the dropdown physically *on* the homepage. You design the dropdown as a separate UI component off to the side. You wire the "Products" text link using the logic: On Click (or On Hover) -> Open Overlay -> [MegaMenuComponent]. Set it to appear exactly below the word "Products."

• *Rule:* Always check "Close when clicking outside" to ensure the user can dismiss the massive menu easily.

4. Sticky Headers and Long Scrolls #

Landing pages are often very long vertical documents designed to persuade the user as they read down.

• The Sticky Navbar: If a user reads down 5,000 pixels of content and decides they want to "Buy Now," they should not have to manually scroll all the way back to the top. The Top Navbar must "stick" to the top of the browser window.

• The Figma Fix: Select the Top Navbar frame, go to the prototype panel, and change the Position setting from Scroll with content to Fixed (Stay in place). Ensure it is at the very top of your layers panel (Z-index).

5. SaaS Dashboards (Sidebar Routing) #

Enterprise web apps (like CRMs or Server Panels) do not use Top Navbars; they use rigid, Left-Hand Sidebars.

• The Architecture: The screen is split. The Sidebar takes up the left 20%. The Main Content takes up the right 80%.

• The Prototyping Trap: Beginners will duplicate the entire Dashboard screen 20 times to prototype every single page. This makes updating the Sidebar a nightmare.

• The Professional Fix (Interactive Components/Variants): While creating 20 screens is sometimes necessary for simple prototypes, advanced prototypes utilize "Component States" to swap out the main content area *without* navigating to a new frame, keeping the Sidebar perfectly locked in place. (We will cover Advanced Components in Chapter 7).

6. Desktop Modals and Tooltips #

Because desktop screens are massive, you rarely want to rip the user away to a new page for a simple interaction.

• Tooltips (On Hover): Desktop computers have mouse cursors, which unlocks the On Hover trigger (impossible on mobile). You can wire a tiny [?] icon so that when hovered, a small text box overlay appears explaining a complex feature.

• Modals: For destructive actions (e.g., "Delete Database"), you prototype a massive, centered Overlay (Modal) that grays out the entire background website, forcing the user to focus entirely on the "Confirm" or "Cancel" buttons.

7. Diagrams/Visual Suggestions #

*Visual Concept: The Sticky Header vs. Scrolling Content* Provide a visual diagram demonstrating desktop Z-index layers.

• Layer 1 (Bottom): A long, vertical website landing page (Hero, Features, Testimonials). Arrow pointing down indicating scrolling.

• Layer 2 (Middle - Optional): A dark, semi-transparent overlay (if a modal is open).

• Layer 3 (Top): The Top Navbar (Logo, Links, CTA). Locked in place. The content from Layer 1 is visually shown sliding *underneath* Layer 3.

This visual explains the literal structural physics of a modern website.

8. Best Practices #

• Active States in Navigation: When prototyping a web app with 5 pages, ensure that the Top Navbar or Sidebar visually highlights the page the user is currently on. If they click "Pricing" and navigate to the Pricing page, the word "Pricing" in the Navbar on that specific screen MUST be bolded or underlined. This is critical UX Wayfinding.

9. Common Mistakes #

• Applying Mobile Transitions to Desktop: A junior designer wires a desktop website prototype so that when the user clicks "About Us," the entire new webpage slides in aggressively from the right side of the monitor (like a mobile phone). *The Failure:* This violates desktop web psychology. Websites don't slide; they load instantly. *The Fix:* Desktop page-to-page navigation must almost always be set to Instant or a very subtle, lightning-fast Dissolve.

10. Mini Project: Prototype a SaaS Sidebar Interaction #

Let's wire a B2B application shell.

1. 1. The Canvas: Draw two Desktop Frames. Name them [DashHome] and [DashSettings].

1. 2. The Layout: On both frames, draw a dark gray Sidebar on the left (20% width) and a light gray Main Canvas on the right (80% width).

1. 3. The Sidebar Links: Add two text links in the Sidebar: Home and Settings.

1. 4. The Active States: On [DashHome], make the word "Home" bold white, and "Settings" dull gray. On [DashSettings], do the exact reverse.

1. 5. The Content: Put a massive [H1: Welcome Home] on Frame 1, and [H1: Account Settings] on Frame 2.

1. 6. The Wiring: Wire the "Settings" link on Frame 1 to Frame 2 (On Click -> Navigate To -> Instant). Wire the "Home" link on Frame 2 back to Frame 1.

1. 7. The Test: Hit Play. Click the links. The Sidebar appears completely static, but the active states and the main content swap instantly. You have built a flawless web app illusion.

11. Practice Exercises #

1. 1. Define the UX concept of "Wayfinding" regarding the "Active State" of a navigation bar. If a user navigates to the "Contact Us" page of a prototype, what visual change must occur in the Top Navbar to ensure they do not get lost?

1. 2. Explain the psychological reasoning behind using an Instant or Dissolve transition animation for Desktop website prototyping, as opposed to the Push or Slide animations commonly used for Mobile apps.

12. MCQs with Answers #

13. Interview Questions #

• Q: A client wants you to design a highly complex, 20-page SaaS dashboard prototype. Walk me through the structural layout of a standard B2B "Sidebar" web app, and how you would prototype the navigation so the sidebar remains visually locked while the content changes.

• Q: Explain the mechanical difference between designing for a Desktop environment (Mouse) versus a Mobile environment (Touch). Which specific prototyping Trigger is heavily utilized on Desktop interfaces but is physically impossible to execute on a touchscreen?

• Q: Walk me through the exact Figma logic required to build a "Modal" (a pop-up warning box) on a desktop prototype. How do you ensure the background dims, and how do you allow the user to easily close it?

14. FAQs #

Q: Should my prototype account for responsive design (e.g., resizing the browser window)? A: Standard click-through prototypes do not dynamically resize like live code. If you want to show a client how the website looks on a phone versus a desktop, you must physically design two separate prototypes (one using Desktop frames, one using Mobile frames) and present them separately.

15. Summary #

In Chapter 6, we expanded our architectural scope to the massive canvas of the Desktop web. We abandoned mobile touch psychology, reintroducing the precision of the mouse cursor and the On Hover trigger. We mastered the Z-index layering required to build Sticky Headers that follow the user down long-scrolling marketing pages. We engineered the robust, static Sidebar routing required for Enterprise SaaS Dashboards, and we utilized Overlays to create massive Mega Menus and Modals, ensuring the user can access complex data without ever leaving the primary application view.

16. Next Chapter Recommendation #

We have wired entire pages together. Now, we must zoom in and wire the micro-interactions of the individual buttons and form fields themselves. Proceed to Chapter 7: Components and Interactive States.