---
schema_version: "1"
id: 1211cd80b97bc603943a8cdc98a87360119e5b33afd84ff775c725931d0d9f28
title: Designing App UI
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/platform/aura-platform/guides/aura/apps/apps-layout-design.md
canonical_url: https://developer.salesforce.com/docs/platform/aura-platform/guide/apps-layout-design.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: f026abaae73d15dcde28e8286520e03ba8eecd65e5a9e07812abf790acaddd01
products:
  - Lightning Aura Components Developer Guide
  - Platform Developer Content
---

# Designing App UI

Design your app's UI by including markup in the .app resource. Each part of your UI corresponds to a component, which can in turn contain nested components. Compose components to create a sophisticated app.

An app’s markup starts with the `<aura:application>` tag.

**note:** Creating a standalone app enables you to host your components outside of Salesforce for Android, iOS, and mobile web or Lightning Experience, such as with Lightning Out or Lightning components in Visualforce pages. To learn more about the `<aura:application>` tag, see [aura:application](https://developer.salesforce.com/docs/platform/aura-platform/ref/ref-aura-application.md).

Let's look at a sample.app file, which starts with the `<aura:application>` tag.

<!-- otherprops: set_clipboard -->
```nolang
<aura:application extends="force:slds">
    <lightning:layout>
        <lightning:layoutItem padding="around-large">
            <h1 class="slds-text-heading_large">Sample App</h1>
        </lightning:layoutItem>
    </lightning:layout>
    <lightning:layout>
        <lightning:layoutItem padding="around-small">
            Sidebar
            <!-- Other component markup here -->
        </lightning:layoutItem>
        <lightning:layoutItem padding="around-small">
            Content
            <!-- Other component markup here -->
        </lightning:layoutItem>
    </lightning:layout>
    
</aura:application>
```

The sample.app file contains HTML tags, such as `<h1>`, as well as components, such as `<lightning:layout>`. We won't go into the details for all the components here but note how simple the markup is. The `<lightning:layoutItem>` component can contain other components or HTML markup.

**See Also**  


-   [aura:application](https://developer.salesforce.com/docs/platform/aura-platform/ref/ref-aura-application.md)