The Ultimate Landing Page

Kyle A. Hoover

ITGM 230 Information Design for Dynamic MediaSavannah College of Art and DesignProfessor David C. Meyers

04/25/10

Ultimate landing page concept:There is no one page that can be perfect for everyone. NetVibes does a great job of being very extensible and customizable. I feel that to the average user, it is a bit overwhelming and over complicated. Also, even tech savvy people often like to save their brain power for other tasks in their lives.

I propose a more simple approach that still allows for personalization as well as a term I made up called fractilization. This is fitting since the landing page brand is black fractal. What fractilization does is pull the data you want from various networks like facebook and twitter and presents it in a uniform and stylized format. Obviously, this idea is not unique as I believe some smart phones are already providing a similar feature as a base function of their factory state; but I think they are onto something.

Features/Rational-Breakdown:

Layout: The page is organized around a central viewport. As a default apps such as facebook and twitter are fed through this port. The idea is that most people will keep this low number of apps. For power users more can be added. This is done by modifying your app rings --more on this later.

Accessibility: The idea is to maintaining a persistence of vision of all data areas. Smaller modules, which can not be changed, exist around the outside of the central view-port.

Clicking on the blue square in the corner of a module takes you to the edit area. Depending on the amount of options available for the individual module they are displayed within the module area or in the main viewpoint.

There should be no more additional layers for customization. Scrolling is available for more option intensive apps.

There shall be no separate advanced options, however basic option rows can be highlighted for emphasis.

Customization:

Black Fractal offers several areas of customization...

-Chosen Apps-Data Pulled/Presented can select from predefined templates, create new, modify existing. -Overall Theme Style-Dynamo

Dissecting the page Left to Right.

Left column multi-view port... Calendar navigation and medium range view

Note: The detail view can be viewed within the footer and in the main view-port.

Dissecting the page Left to Right.

Left column multi-view port... Mobile Manager

Detail: Choose what sections are immediatelyvisible when you visit from your phone or mobile device. Send text to others, and choose text alerts for your phone. Possible future info could include battery life, contacts, location.

Dissecting the page Left to Right.

Left column multi-view port... History pulled from browser or network sync.

Note: This search-able history can help youlaunch to the web after your done “landing.”

Dissecting the page Left to Right.

Left column multi-view port... Bookmarks pulled from browser or bookmark sync.

Note: The blue information bar just above the footer is where full link info and more is displayed if cursor is moved over link etc.

Dissecting the page Left to Right.

Left column single-view port...RSS feeds flow through this area.Tan dots represent multiple pages andallow a direct jump.

Affordances : Refresh...Share...Scroll...Auto-Cycle switch...Newer...Older...Blue edit tab...

Note: You may choose the feed by selectingfrom the favicons below. Detail is shown inblue bar upon mouse-over. Clicking on white-space will flip main view to RSS mode.Again blue tabs switch to edit mode.

Dissecting the page Left to Right.

Center Column top “Dynamo”...The “Dynamo” is a revolutionary new mixed reality promotion and entertainment standard under development by Black Fractal Inc.

Note: Think of the Dynamo as a visual,object oriented RSS feed. This feed isdynamically integrated into a them youcan choose or create.

You choose what sites and informationare important to you, Dynamo does the rest.

You are left with a cycling interactive worldbringing you links to sites, products, news,and games in a seamless thematic environment.

Objects may carry sound, AI, Blending modes,and 3D data and animation.

Dissecting the page Left to Right.

Center column main view-port ...Here is the main view-port where facebook,twitter, gmail, and other web-apps are displayed.

These are determined by your current app-ring.You may want one for home with facebook, andyour personal email. You may want another withLinked-in and corporate email. One with apps forplanning trips and one with games for your kids.

Dissecting the page Left to Right.

Center column main view-port ...By clicking on the “fractilize” buttonin the upper left area all feeds becomeuniform in display theme.

Note: The scroll-wheel on the mouse can be usedto scroll all app info at once while the viewportscroll bar remains static. (possibly change)

Dissecting the page Left to Right.

Blue information bar... This bar shows information details that

will not easily fit into other view-ports.This bar is largely mouse-over driven.

Center column bottom view-port ... This could be used for music, photo, or video libraries,

maybe previews of your history/favorites, or Stickies!

Center column footer ...

This area is a scrollable calendar-bar used for your daily schedule.

Dissecting the page Left to Right.

Right column top view-port...This is your global data feed. It can be used just for the weather, or you can addemail notification, stocks, alarms etc.

Right column App-Ring view-port...These determine the current apps shownin the main view-port. As mentioned earlier“You may want one for home with facebook, andyour personal email. You may want another withLinked-in and corporate email. One with apps forplanning trips and one with games for your kids.”

Dissecting the page Left to Right.

Right column Secure View-port...This final view-port is where you log-in toyour secure sources of information. Onesthat you do not want your computer to remember. You must always log-in to activate this area, although multiple sources can beshown from your single log-on. Then all youhave to do is click on the desired icon.

The Final Concept.