Video Sketching Firefox Metro Start Page


Recommended Posts

Starting this February, I began to work on a challenging but super exciting project: designing Firefox on Windows 8. As you may know, Windows 8 will employ a new user interface based on Microsoft?s Metro design language. This Metro environment is a tile-based, touch-optimized, cross-platform system.

To make Firefox shine on this unique environment, the UX team on MetroUI project has been focusing on solving some design challenges, such as: delivering a consistent ?Firefoxy? experience and also making it native on Metro; designing an equally awesome experience of Firefox Metro on desktop using mouse and keyboard.

Another challenge for me as a UX designer is prototyping and testing a product that has a brand new touch language. I found it hard to simulate the W8 touch experience in a quick and dirty way, withouting building a functional product. In order to get the experience out and gain enough feedback to iterate, I decided to ?video sketch? the Start Page of Firefox Metro by just using Keynote.

Making a video sketch by Keynote is simple:

  • Step 1: Create a user story. Write a script with scenes.
  • Step 2: Place your mockups into Keynote, put them in sequence to match the scenes you created.
  • Step 3: Link your mockups together(create animations, page transitions, or maybe just hotspot link)
  • Step 4: Record your slideshow
  • Step 5: Export as Quicktime movie

I will be posting more video sketch demos on Firefox Metro?s main features, such as browsing web pages, searching via awesomescreen, using app contracts, etc. Also stay tuned for more awesomeness about Firefox Metro from Stephen Horlander, Brian R. Bondy, and Asa Dotzler.

source: http://blog.mozilla....tro-start-page/

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Posts

    • This is listed as a preview in WU for me. I usually don't grab them as previews; what's your opinion on it so far?
    • Pale Moon 34.3.1 by Razvan Serea Pale Moon is an Open Source, Goanna-based web browser available for Microsoft Windows, Linux and Android, focusing on efficiency and ease of use. Make sure to get the most out of your browser! Pale Moon offers you a browsing experience in a browser completely built from its own, independently developed source that has been forked off from Firefox/Mozilla code, with carefully selected features and optimizations to improve the browsers speed, resource use, stability and user experience, while offering full customization and a growing collection of extensions and themes to make the browser truly your own. Features: Optimized for modern processors Based on proprietary optimized layout engine (Goanna) Safe: forked from mature Mozilla code and regularly updated Secure: Additional security features and security-aware development Supported by our user community, and fully non-profit Familiar, efficient, fully customizable interface Support for full themes: total freedom over any elements design Support for easily-created lightweight themes (skins) Smooth and speedy page drawing and script processing Increased stability: experience fewer browser crashes Support for many Firefox extensions Support for a growing number of Pale Moon exclusive extensions Extensive and growing support for HTML5 and CSS3 Many customization and configuration options Pale Moon 34.3.1 changelog: Pale Moon will now exclude local resources from CSP checks, aligning it with the rest of CSP handling. Fixed an issue where the devtools JSON viewer would, in some cases, make erroneous requests to remote servers. Updated libpng to 1.6.58+apng. Updated NSS to 3.90.12 (UXP), addressing multiple security issues. Fixed several intermittent and rare crashes. Security issues addressed: CVE-2026-12318 (CWE-125), CVE-2026-12322, CVE-2026-12292 (DiD), and multiple other issues that did not have a CVE designation at the time of patching. Download: Pale Moon (64-bit) | Portable 64-bit | ~40.0 MB (Freeware) Download: Pale Moon (32-bit) | Portable 32-bit Links: Pale Moon Homepage | Add-ons | Themes | Extensions | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • Onwards to Windows 12 then lol.
  • Recent Achievements

    • Grand Master
      Jaybonaut went up a rank
      Grand Master
    • One Year In
      Philsl earned a badge
      One Year In
    • Dedicated
      Scoobystu earned a badge
      Dedicated
    • First Post
      Tom Schmidt earned a badge
      First Post
    • One Month Later
      D0nn13 earned a badge
      One Month Later
  • Popular Contributors

    1. 1
      +primortal
      425
    2. 2
      +Edouard
      177
    3. 3
      PsYcHoKiLLa
      124
    4. 4
      Michael Scrip
      77
    5. 5
      Xenon
      76
  • Tell a friend

    Love Neowin? Tell a friend!