3 files changed, 497 insertions, 0 deletions
diff --git a/docs/html/design/get-started/creative-vision.jd b/docs/html/design/get-started/creative-vision.jd
new file mode 100644
index 0000000..792b97d
--- /dev/null
+++ b/docs/html/design/get-started/creative-vision.jd
@@ -0,0 +1,48 @@
+page.title=Creative Vision
+@jd:body
+
+<img src="{@docRoot}design/media/creative_vision_main.png">
+
+<div class="vspace size-1">&nbsp;</div>
+
+<p>Ice Cream Sandwich (Android 4.0) marks a major milestone for Android design. We touched nearly every
+pixel of the system as we expanded the new design approaches introduced in Honeycomb tablets to all
+types of mobile devices. Starting with the most basic elements, we introduced a new font, Roboto,
+designed for high-resolution displays. Other big changes include framework-level action bars on
+phones and support for new phones without physical buttons.</p>
+<p>We focused the design work with three overarching goals for our core apps and the system at large.
+As you design apps to work with Android, consider these goals:</p>
+
+<div class="vspace size-1">&nbsp;</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-4">
+
+<h4>Enchant me</h4>
+<p>Beauty is more than skin deep. Android apps are sleek and aesthetically pleasing on multiple levels.
+Transitions are fast and clear; layout and typography are crisp and meaningful. App icons are works
+of art in their own right. Just like a well-made tool, your app should strive to combine beauty,
+simplicity and purpose to create a magical experience that is effortless and powerful.</p>
+
+  </div>
+  <div class="layout-content-col span-5">
+
+<h4>Simplify my life</h4>
+<p>Android apps make life easier and are easy to understand. When people use your app for the first
+time, they should intuitively grasp the most important features. The design work doesn't stop at the
+first use, though. Android apps remove ongoing chores like file management and syncing. Simple tasks
+never require complex procedures, and complex tasks are tailored to the human hand and mind. People
+of all ages and cultures feel firmly in control, and are never overwhelmed by too many choices or
+irrelevant flash.</p>
+
+  </div>
+  <div class="layout-content-col span-4">
+
+<h4>Make me amazing</h4>
+<p>It's not enough to make an app that is easy to use. Android apps empower people to try new things
+and to use apps in inventive new ways. Android lets people combine applications into new workflows
+through multitasking, notifications, and sharing across apps. At the same time, your app should feel
+personal, giving people access to superb technology with clarity and grace.</p>
+
+  </div>
+</div>
diff --git a/docs/html/design/get-started/principles.jd b/docs/html/design/get-started/principles.jd
new file mode 100644
index 0000000..0b7147b
--- /dev/null
+++ b/docs/html/design/get-started/principles.jd
@@ -0,0 +1,300 @@
+page.title=Design Principles
+@jd:body
+
+<p>These design principles were developed by and for the Android User Experience Team to keep users'
+best interests in mind. Consider them as you apply your own creativity and design thinking. Deviate
+with purpose.</p>
+
+<h2 id="enchant-me">Enchant Me</h2>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-7">
+
+<h4 id="delight-me">Delight me in surprising ways</h4>
+<p>A beautiful surface, a carefully-placed animation, or a well-timed sound effect is a joy to
+experience. Subtle effects contribute to a feeling of effortlessness and a sense that a powerful
+force is at hand.</p>
+
+  </div>
+  <div class="layout-content-col span-6">
+
+    <img src="{@docRoot}design/media/principles_delight.png">
+
+  </div>
+</div>
+
+<div class="vspace size-2">&nbsp;</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-7">
+
+<h4 id="real-objects-more-fun">Real objects are more fun than buttons and menus</h4>
+<p>Allow people to directly touch and manipulate objects in your app. It reduces the cognitive effort
+needed to perform a task while making it more emotionally satisfying.</p>
+
+  </div>
+  <div class="layout-content-col span-6">
+
+    <img src="{@docRoot}design/media/principles_real_objects.png">
+
+  </div>
+</div>
+
+<div class="vspace size-2">&nbsp;</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-7">
+
+<h4 id="make-it-mine">Let me make it mine</h4>
+<p>People love to add personal touches because it helps them feel at home and in control. Provide
+sensible, beautiful defaults, but also consider fun, optional customizations that don't hinder
+primary tasks.</p>
+
+  </div>
+  <div class="layout-content-col span-6">
+
+    <img src="{@docRoot}design/media/principles_make_it_mine.png">
+
+  </div>
+</div>
+
+<div class="vspace size-2">&nbsp;</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-7">
+
+<h4 id="get-to-know-me">Get to know me</h4>
+<p>Learn peoples' preferences over time. Rather than asking them to make the same choices over and
+over, place previous choices within easy reach.</p>
+
+  </div>
+  <div class="layout-content-col span-6">
+
+    <img src="{@docRoot}design/media/principles_get_to_know_me.png">
+
+  </div>
+</div>
+
+<h2 id="simplify-my-life">Simplify My Life</h2>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-7">
+
+<h4 id="keep-it-brief">Keep it brief</h4>
+<p>Use short phrases with simple words. People are likely to skip sentences if they're long.</p>
+
+  </div>
+  <div class="layout-content-col span-6">
+
+    <img src="{@docRoot}design/media/principles_keep_it_brief.png">
+
+  </div>
+</div>
+
+<div class="vspace size-2">&nbsp;</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-7">
+
+<h4 id="pictures-faster-than-words">Pictures are faster than words</h4>
+<p>Consider using pictures to explain ideas. They get people's attention and can be much more efficient
+than words.</p>
+
+  </div>
+  <div class="layout-content-col span-6">
+
+    <img src="{@docRoot}design/media/principles_pictures.png">
+
+  </div>
+</div>
+
+<div class="vspace size-2">&nbsp;</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-7">
+
+<h4 id="decide-for-me">Decide for me but let me have the final say</h4>
+<p>Take your best guess and act rather than asking first. Too many choices and decisions make people
+unhappy. Just in case you get it wrong, allow for 'undo'.</p>
+
+  </div>
+  <div class="layout-content-col span-6">
+
+    <img src="{@docRoot}design/media/principles_decide_for_me.png">
+
+  </div>
+</div>
+
+<div class="vspace size-2">&nbsp;</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-7">
+
+<h4 id="only-show-when-i-need-it">Only show what I need when I need it</h4>
+<p>People get overwhelmed when they see too much at once. Break tasks and information into small,
+digestible chunks. Hide options that aren't essential at the moment, and teach people as they go.</p>
+
+  </div>
+  <div class="layout-content-col span-6">
+
+    <img src="{@docRoot}design/media/principles_information_when_need_it.png">
+
+  </div>
+</div>
+
+<div class="vspace size-2">&nbsp;</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-7">
+
+<h4 id="always-know-where-i-am">I should always know where I am</h4>
+<p>Give people confidence that they know their way around. Make places in your app look distinct and
+use transitions to show relationships among screens. Provide feedback on tasks in progress.</p>
+
+  </div>
+  <div class="layout-content-col span-6">
+
+    <img src="{@docRoot}design/media/principles_navigation.png">
+
+  </div>
+</div>
+
+<div class="vspace size-2">&nbsp;</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-7">
+
+<h4 id="never-lose-my-stuff">Never lose my stuff</h4>
+<p>Save what people took time to create and let them access it from anywhere. Remember settings,
+personal touches, and creations across phones, tablets, and computers. It makes upgrading the
+easiest thing in the world.</p>
+
+  </div>
+  <div class="layout-content-col span-6">
+
+    <img src="{@docRoot}design/media/principles_never_lose_stuff.png">
+
+  </div>
+</div>
+
+<div class="vspace size-2">&nbsp;</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-7">
+
+<h4 id="looks-same-should-act-same">If it looks the same, it should act the same</h4>
+<p>Help people discern functional differences by making them visually distinct rather than subtle.
+Avoid modes, which are places that look similar but act differently on the same input.</p>
+
+  </div>
+  <div class="layout-content-col span-6">
+
+    <img src="{@docRoot}design/media/principles_looks_same.png">
+
+  </div>
+</div>
+
+<div class="vspace size-2">&nbsp;</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-7">
+
+<h4 id="interrupt-only-if-important">Only interrupt me if it's important</h4>
+<p>Like a good personal assistant, shield people from unimportant minutiae. People want to stay
+focused, and unless it's critical and time-sensitive, an interruption can be taxing and frustrating.</p>
+
+  </div>
+  <div class="layout-content-col span-6">
+
+    <img src="{@docRoot}design/media/principles_important_interruption.png">
+
+  </div>
+</div>
+
+<h2 id="make-me-amazing">Make Me Amazing</h2>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-7">
+
+<h4 id="give-me-tricks">Give me tricks that work everywhere</h4>
+<p>People feel great when they figure things out for themselves. Make your app easier to learn by
+leveraging visual patterns and muscle memory from other Android apps. For example, the swipe gesture
+may be a good navigational shortcut.</p>
+
+  </div>
+  <div class="layout-content-col span-6">
+
+    <img src="{@docRoot}design/media/principles_tricks.png">
+
+  </div>
+</div>
+
+<div class="vspace size-2">&nbsp;</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-7">
+
+<h4 id="its-not-my-fault">It's not my fault</h4>
+<p>Be gentle in how you prompt people to make corrections. They want to feel smart when they use your
+app. If something goes wrong, give clear recovery instructions but spare them the technical details.
+If you can fix it behind the scenes, even better.</p>
+
+  </div>
+  <div class="layout-content-col span-6">
+
+    <img src="{@docRoot}design/media/principles_error.png">
+
+  </div>
+</div>
+
+<div class="vspace size-2">&nbsp;</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-7">
+
+<h4 id="sprinkle-encouragement">Sprinkle encouragement</h4>
+<p>Break complex tasks into smaller steps that can be easily accomplished. Give feedback on actions,
+even if it's just a subtle glow.</p>
+
+  </div>
+  <div class="layout-content-col span-6">
+
+    <img src="{@docRoot}design/media/principles_sprinkle_encouragement.png">
+
+  </div>
+</div>
+
+<div class="vspace size-2">&nbsp;</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-7">
+
+<h4 id="do-heavy-lifting-for-me">Do the heavy lifting for me</h4>
+<p>Make novices feel like experts by enabling them to do things they never thought they could. For
+example, shortcuts that combine multiple photo effects can make amateur photographs look amazing in
+only a few steps.</p>
+
+  </div>
+  <div class="layout-content-col span-6">
+
+    <img src="{@docRoot}design/media/principles_heavy_lifting.png">
+
+  </div>
+</div>
+
+<div class="vspace size-2">&nbsp;</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-7">
+
+<h4 id="make-important-things-fast">Make important things fast</h4>
+<p>Not all actions are equal. Decide what's most important in your app and make it easy to find and
+fast to use, like the shutter button in a camera, or the pause button in a music player.</p>
+
+  </div>
+  <div class="layout-content-col span-6">
+
+    <img src="{@docRoot}design/media/principles_make_important_fast.png">
+
+  </div>
+</div>
diff --git a/docs/html/design/get-started/ui-overview.jd b/docs/html/design/get-started/ui-overview.jd
new file mode 100644
index 0000000..34cdd06
--- /dev/null
+++ b/docs/html/design/get-started/ui-overview.jd
@@ -0,0 +1,149 @@
+page.title=UI Overview
+@jd:body
+
+<p>Android's system UI provides the framework on top of which you build your app. Important aspects
+include the Home screen experience, global device navigation, and notifications.</p>
+<p>Your app will play an important part in keeping the overall Android experience consistent and
+enjoyable to use. At the end of this chapter we introduce the main elements for achieving this goal
+in your app.</p>
+<p>Read on for a quick overview of the most important aspects of the Android user interface.</p>
+
+<h2 id="home-all-apps-recents">Home, All Apps, and Recents</h2>
+
+<div class="vspace size-1">&nbsp;</div>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-4">
+
+    <img src="{@docRoot}design/media/ui_overview_home_screen.png">
+
+<h4>Home screen</h4>
+<p>Home is a customizable space that houses app shortcuts, folders and widgets. Navigate between
+different home screen panels by swiping left and right.</p>
+<p>The Favorites Tray at the bottom always keeps your most important shortcuts and folders in view
+regardless of which panel is currently showing.</p>
+<p>Access the entire collection of apps and widgets by touching the All Apps button at the center of
+the Favorites Tray.</p>
+
+  </div>
+  <div class="layout-content-col span-4">
+
+    <img src="{@docRoot}design/media/ui_overview_all_apps.png">
+
+<h4>All apps screen</h4>
+<p>The All Apps screen lets you browse the entire set of apps and widgets that are installed on your
+device.</p>
+<p>Users can drag an app or widget icon from the All Apps screen and place it in any empty location on
+any Home screen.</p>
+
+  </div>
+  <div class="layout-content-col span-4">
+
+    <img src="{@docRoot}design/media/ui_overview_recents.png">
+
+<h4>Recents screen</h4>
+<p>Recents provides an efficient way of switching between recently used applications. It provides a
+clear navigation path between multiple ongoing tasks.</p>
+<p>The Recents button at the right side of the navigation bar displays the apps that the user has
+interacted with most recently. They are organized in reverse chronological order with the most
+recently used app at the bottom.</p>
+<p>Switch to an app by touching it. Remove an item by swiping left or right.</p>
+
+  </div>
+</div>
+
+<h2 id="system-bars">System Bars</h2>
+
+<p>The system bars are screen areas dedicated to the display of notifications, communication of device
+status, and device navigation. Typically the system bars are displayed concurrently with your app.
+Apps that display immersive content, such as movies or images, can temporarily hide the system bars
+to allow the user to enjoy full screen content without distraction.</p>
+
+<img src="{@docRoot}design/media/ui_overview_system_ui.png">
+
+<div class="with-callouts">
+
+<ol>
+<li>
+<h4>Status Bar</h4>
+<p>Displays pending notifications on the left and status, such as time, battery level, or signal
+  strength, on the right. Swipe down from the status bar to show notification details.</p>
+</li>
+<li>
+<h4>Navigation Bar</h4>
+<p>New for phones in Android 4.0, the navigation bar is present only on devices that don't have
+  the traditional hardware keys. It houses the device navigation controls Back, Home, and
+  Recents, and also displays a menu for apps written for Android 2.3 or earlier.</p>
+</li>
+<li>
+<h4>Combined Bar</h4>
+<p>On tablet form factors the status and navigation bars are combined into a single bar at the
+  bottom of the screen.</p>
+</li>
+</ol>
+
+</div>
+
+<h2 id="notifications">Notifications</h2>
+
+<p>Notifications are brief messages that users can access at any time from the status bar. They
+provide updates, reminders, or information that's important, but not critical enough to warrant
+interrupting the user. Open the notifications drawer by swiping down on the status bar. Touching a
+notification opens the associated app. <a href="{@docRoot}design/patterns/notifications.html">More on Notifications</a></p>
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-4">
+
+    <img src="{@docRoot}design/media/ui_overview_notifications.png">
+
+  </div>
+  <div class="layout-content-col span-9">
+
+    <img src="{@docRoot}design/media/notifications_dismiss.png">
+
+<p>Most notifications have a one-line title and a one-line message. The recommended layout for a
+notification includes two lines. If necessary, you can add a third line. Timestamps are optional.</p>
+<p>Swiping a notification right or left removes it from the notification drawer.</p>
+
+  </div>
+</div>
+
+
+<h2 id="app">Common App UI</h2>
+
+
+<div class="layout-content-row">
+  <div class="layout-content-col span-7">
+
+    <img src="{@docRoot}design/media/ui_overview_app_ui.png">
+
+  </div>
+  <div class="layout-content-col span-6 with-callouts">
+
+<p>A typical Android app consists of action bars and the app content area.</p>
+<ol>
+<li>
+<h4>Main Action Bar</h4>
+<p>The command and control center for your app. The main action bar includes elements for
+  navigating your app's hierarchy and views, and also surfaces the most important actions.</p>
+<p><a href="{@docRoot}design/patterns/actionbar.html">More on the Action Bar</a></p>
+</li>
+<li>
+<h4>View Control</h4>
+<p>Allows users to switch between the different views that your app provides. Views typically
+  consist of different arrangements of your data or different functional aspects of your app.</p>
+</li>
+<li>
+<h4>Content Area</h4>
+<p>The space where the content of your app is displayed.</p>
+</li>
+<li>
+<h4>Split Action Bar</h4>
+<p>Split action bars provide a way to distribute actions across additional bars located below
+  the main action bar or at the bottom of the screen. In this example, a split action bar moves
+  important actions that won't fit in the main bar to the bottom.</p>
+</li>
+</ol>
+
+  </div>
+</div>