Modern Design Principles
Prioritizes seamless navigation across devices, eliminating resizing or compatibility barriers. It has a high level of interlinking with tags, categories, and other metadata, and prioritizes viewing the footage. The design reflects the site’s legacy of earned media, links, and high search rankings during its peak.
The adage “Designing for everyone means designing for no one” holds particular relevance for marketing and product design professionals. The homepage title of the website—Royalty-free timelapse of our skies in perpetuity—may not resonate universally, but it likely appeals to the intended target audience: media buyers over 30, possibly European, who were in their 20s during the 2000s. This insight stems from observing initial orders in 2005 and identifying clear demographic trends. The most challenging part of prototyping was incorporating what could be gleaned from the statistics of yesteryear and how they can be discerned into data-driven elements and layouts in the current day.
It’s true that the target audience for the site has evolved, so it’s reasonable to question whether the original phrase should remain as the site’s title. However, preserving the “original experience” is important, rather than positioning the site solely as a video portfolio. While the site has adopted more modern design style and functionality, it still maintains much of its original ethos, aesthetic, and brand identity overall.
An Inspiration to Others, Inspired Again.
Key site change since 2008: Fully “Web 2.0”
All to give an experience where users instantly perceive my product’s scope, diversity, beauty, and usefulness—maximizing impact before the critical eighth second, when the first impression window closes.
Using new web technologies like the latest in CSS and browser media queries for video, as well as my evolving skill-set in content, UX and visual design, the site faced (and faces) challenges, but persists because it embraces key principles of modern design and serves as the sum of the experience- useful for today.
In addition to using the latest in media queries with video, the template adopted a clean-slate design starting point, not relying on third-party themes. This ensures originality and adaptability, as well as better long term reliability with CMS updates. I use multiple, small customized scripts that gently notify the visitor of the video with adaptive bitrates if they are is on a mobile network (old iteration, no longer implemented).
Advanced Media Features.
Key change since 2008: Integrated shopping cart removed.
Enabled automatic 4K video playback on the homepage for those with the screens for it, complemented by responsive search widgets and seamlessly interconnected post pages. When moving to the CDN (Cloudflare) 4K was removed.
Custom JavaScript enhances navigation by implementing intuitive features. Tailored CSS improves mobile experience by increasing ‘tap areas’ and shifting grid columns for responsiveness all the way up to and including 4K resolutions.
Videos are optimized across multiple resolutions for device compatibility and balanced bitrates, while large images utilize modern formats for faster loading.
Adaptive bitrate video is now used.
Key new features: ability to download video from individual clip’s pages. Ability to select resolution and speed on other videos. Scrub previews with some longer videos,
Enhanced Usability.
Key change since 2008: Data-driven design.
Responsive layouts feature maximum paragraph widths, scalable font sizes, and accessibility-focused adjustments, all using ‘media queries’. Mobile video player timelines are taller to improve touch interaction on mobile (‘tap-targets’). A bespoke checkout experience minimizes maintenance compared to traditional WooCommerce setups.
Additionally, a dynamically generated download button on each individual clip page for every video allows for better user consideration, as well as a custom tag scrolling widget, and of course hero scroller, which perhaps is unique in its implementation.
Leveraging both post and media queries, users with high-resolution displays (above 2K) can browse autoplaying videos arranged in two columns, with the option to switch to fullscreen mode at any time. This creates an experience that closely resembles a modern app interface, while being targeted towards desktop users, the original persona’s main device.
Alternate source for introductory videos
Info: time-panorama
These videos blend visuals from a single clip, creating a visual experience that is very brief and loops on completion.
Info: 4-up, all-in-one video
View all clips in one video. The quality selector is for various connection speeds below these two videos. 4K with YouTube is now available.
For instances where no CDN is available, and from a previous iteration: A custom JS implementation for site hosted videos, with quality selector and AV1 options. The same two videos are available on this site using Cloudflare, as seen at the bottom of this page.