UX designers and front-end developers
Starting a new web application project and need to decide on page layout patterns.
Use cases
About
This Page Layouts 1/2 mind map template, containing 57 nodes across 8 branches, provides a structured overview of UI layout patterns for web and mobile applications. It covers essential components such as 'Split screen', 'Full screen', 'Parts', 'Floorplants', 'Data visualization', 'Responsible table', 'Buttons', 'Colors', and 'Size of controls'. The template is designed for UX designers and developers who need a quick reference for common page layouts and UI elements. Key nodes like 'Header' (used primarily for navigation) and 'Foot' (actions for the whole page) are detailed within the 'Parts' branch, while 'Size of controls' distinguishes between 'Cozy' (touch devices) and 'Compact' (mouse & keyboard) modes. This Page Layouts 1/2 cheat sheet serves as a practical guide for planning and implementing consistent interface designs.
Terms and ConditionsWhen to use this template
UI/UX auditors and product managers
Reviewing an existing UI for consistency across different page types like list reports and wizards.
Responsive design specialists and mobile developers
Planning a responsive design strategy that adapts to both mobile and desktop devices.
How to use this template
Step 1
Launch and Explore Layout Categories
Open the .xmind file to browse the primary branches covering layout patterns like Split screen, Full screen, and Data visualization.
Step 2
Review Detailed UI Component Specifications
Expand sub-nodes such as Parts or Size of controls to understand specific navigation elements and device-specific interaction modes.
Step 3
Customize and Expand Your Design
Edit existing node text to match your project requirements and add new branches to incorporate additional UI components or patterns.
Frequently asked questions
The template includes 57 nodes covering split screen, full screen, parts (header, footer, tabs), floorplans (create, edit, list, wizard, object page), data visualization (charts, maps, timelines), responsive table, buttons, colors, and control sizes (cozy/compact).
Focus on the 'Split screen' and 'Full screen' branches, which include a 'Mobile' node. Also refer to 'Size of controls' > 'Cozy' for touch-optimized sizing. Customize the nodes to match your app's specific screens.
Yes, you can open the .xmind file in Xmind and edit any node. Add new branches, change text, or rearrange the structure to fit your project needs.
The 'Floorplants' branch lists common page types like 'Create page', 'Edit page', 'List report', 'Dynamic side content', 'Wizard', and 'Object page'. It helps designers plan the layout for each type of application page.
Absolutely. The 'Responsible table' node describes a table optimized for viewing one line item at a time. You can add sub-nodes with specific column definitions, filtering options, or responsive breakpoints.
Got an inspiring template?
Share your mind map templates with creators around the world and start earning from your work.
Free template