|
| 1 | +# Front Page Layout Wireframe |
| 2 | + |
| 3 | +This wireframe shows the visual layout structure of the Orionrobots front page as it appears to visitors, from top to bottom including what's above and below the fold. |
| 4 | + |
| 5 | +## Desktop Layout View (Full Page Structure) |
| 6 | + |
| 7 | +``` |
| 8 | +┌───────────────────────────────────────────────────────────────────┐ |
| 9 | +│ HEADER (Above the Fold) │ |
| 10 | +├───────────────────────────────────────────────────────────────────┤ |
| 11 | +│ 🏠 Orionrobots [Menu] [Menu] [Menu] [Menu] [Search Box] │ ← Navigation Bar |
| 12 | +├───────────────────────────────────────────────────────────────────┤ |
| 13 | +│ │ |
| 14 | +│ MAIN CONTENT AREA (Full Width - No Sidebar) │ |
| 15 | +├───────────────────────────────────────────────────────────────────┤ |
| 16 | +│ [Tags: robot building, robotics at home, making robots] [🔗📧📱] │ ← Tag & Social Row |
| 17 | +├───────────────────────────────────────────────────────────────────┤ |
| 18 | +│ Welcome to Orionrobots │ ← Page Title |
| 19 | +├───────────────────────────────────────────────────────────────────┤ |
| 20 | +│ │ |
| 21 | +│ At Orionrobots, Danny and his team build robots, electronics, │ |
| 22 | +│ gadgets and stuff that moves. We aim to make robots easy for │ |
| 23 | +│ anyone to build, and push the boundaries of what is easy. │ |
| 24 | +│ │ |
| 25 | +│ ┌─────────────────────────────────────────────────────────────┐ │ ← Book Banner |
| 26 | +│ │ [Large Book Cover Image - Robotics at Home with Pi Pico] │ │ (Featured Content) |
| 27 | +│ └─────────────────────────────────────────────────────────────┘ │ |
| 28 | +│ │ |
| 29 | +│ Discuss robot building on Our Discord Server! │ |
| 30 | +│ You can see my latest videos on Orionrobots Youtube. │ |
| 31 | +│ You can reach me on Facebook, Discord and LinkedIn... │ |
| 32 | +│ │ |
| 33 | +├───────────────────────────────────────────────────────────────────┤ |
| 34 | +│ Recent Posts │ ← Section Heading |
| 35 | +├───────────────────────────────────────────────────────────────────┤ |
| 36 | +│ [📷] 30 Aug 2025 » Post Title One │ ← Recent Post Item |
| 37 | +│ Post excerpt text about robotics and electronics... │ |
| 38 | +│ [more...] │ |
| 39 | +├───────────────────────────────────────────────────────────────────┤ |
| 40 | +│ [📷] 25 Aug 2025 » Post Title Two │ ← Recent Post Item |
| 41 | +│ Another post excerpt describing robot building projects... │ |
| 42 | +│ [more...] │ |
| 43 | +├───────────────────────────────────────────────────────────────────┤ |
| 44 | +│ [📷] 20 Aug 2025 » Post Title Three │ |
| 45 | +│ More content about electronics and maker projects... │ |
| 46 | +│ [more...] │ |
| 47 | +├───────────────────────────────────────────────────────────────────┤ |
| 48 | +│ [📷] 15 Aug 2025 » Post Title Four │ |
| 49 | +│ Additional robotics content and tutorials... │ |
| 50 | +│ [more...] │ |
| 51 | +├───────────────────────────────────────────────────────────────────┤ |
| 52 | +│ [📷] 10 Aug 2025 » Post Title Five │ |
| 53 | +│ Electronics projects and robot building guides... │ |
| 54 | +│ [more...] │ |
| 55 | +├───────────────────────────────────────────────────────────────────┤ |
| 56 | +│ [📷] 05 Aug 2025 » Post Title Six │ |
| 57 | +│ Latest robotics news and project updates... │ |
| 58 | +│ [more...] │ |
| 59 | +├───────────────────────────────────────────────────────────────────┤ |
| 60 | +│ │ |
| 61 | +│ Events │ ← Additional Sections |
| 62 | +│ Robot Events │ |
| 63 | +│ │ |
| 64 | +│ Policies │ |
| 65 | +│ Terms And Conditions │ |
| 66 | +│ │ ← Bottom of Content |
| 67 | +├───────────────────────────────────────────────────────────────────┤ |
| 68 | +│ FOOTER (Below the Fold) │ |
| 69 | +├───────────────────────────────────────────────────────────────────┤ |
| 70 | +│ 💬 Discuss robot building on Our Discord Server! │ ← Social Links |
| 71 | +│ 📺 Youtube │ |
| 72 | +│ 📘 Facebook │ |
| 73 | +│ 🔒 Privacy and Cookies │ |
| 74 | +├───────────────────────────────────────────────────────────────────┤ |
| 75 | +│ © 2025 OrionRobots. Orionrobots is a registered trademark. │ ← Copyright |
| 76 | +│ with help from Bootstrap │ |
| 77 | +└───────────────────────────────────────────────────────────────────┘ |
| 78 | +``` |
| 79 | + |
| 80 | +## Layout Sections Breakdown |
| 81 | + |
| 82 | +### Above the Fold (Initially Visible) |
| 83 | +``` |
| 84 | +┌─ NAVIGATION BAR ─────────────────────────────────────────────────┐ |
| 85 | +│ Logo + Brand Name | Menu Items | Search Box │ |
| 86 | +└─────────────────────────────────────────────────────────────────┘ |
| 87 | +
|
| 88 | +┌─ TAG & SOCIAL ROW ──────────────────────────────────────────────┐ |
| 89 | +│ [Tag Buttons] | [Social Share Icons] │ |
| 90 | +└─────────────────────────────────────────────────────────────────┘ |
| 91 | +
|
| 92 | +┌─ PAGE HEADER ───────────────────────────────────────────────────┐ |
| 93 | +│ Welcome to Orionrobots │ |
| 94 | +└─────────────────────────────────────────────────────────────────┘ |
| 95 | +
|
| 96 | +┌─ INTRO TEXT ────────────────────────────────────────────────────┐ |
| 97 | +│ At Orionrobots, Danny and his team build robots... │ |
| 98 | +└─────────────────────────────────────────────────────────────────┘ |
| 99 | +
|
| 100 | +┌─ FEATURED BOOK BANNER ──────────────────────────────────────────┐ |
| 101 | +│ [Large promotional image for "Robotics at Home with Pi Pico"] │ |
| 102 | +└─────────────────────────────────────────────────────────────────┘ |
| 103 | +``` |
| 104 | + |
| 105 | +### Below the Fold (Requires Scrolling) |
| 106 | +``` |
| 107 | +┌─ CALL TO ACTION LINKS ──────────────────────────────────────────┐ |
| 108 | +│ • Discord Server Link │ |
| 109 | +│ • YouTube Channel Link │ |
| 110 | +│ • Social Media Links │ |
| 111 | +└─────────────────────────────────────────────────────────────────┘ |
| 112 | +
|
| 113 | +┌─ RECENT POSTS SECTION ──────────────────────────────────────────┐ |
| 114 | +│ ## Recent Posts │ |
| 115 | +│ │ |
| 116 | +│ [Thumb] Date » Title | Post excerpt... [more...] │ |
| 117 | +│ [Thumb] Date » Title | Post excerpt... [more...] │ |
| 118 | +│ [Thumb] Date » Title | Post excerpt... [more...] │ |
| 119 | +│ [Thumb] Date » Title | Post excerpt... [more...] │ |
| 120 | +│ [Thumb] Date » Title | Post excerpt... [more...] │ |
| 121 | +│ [Thumb] Date » Title | Post excerpt... [more...] │ |
| 122 | +└─────────────────────────────────────────────────────────────────┘ |
| 123 | +
|
| 124 | +┌─ ADDITIONAL NAVIGATION ─────────────────────────────────────────┐ |
| 125 | +│ ## Events │ |
| 126 | +│ Robot Events │ |
| 127 | +│ │ |
| 128 | +│ ## Policies │ |
| 129 | +│ Terms And Conditions │ |
| 130 | +└─────────────────────────────────────────────────────────────────┘ |
| 131 | +
|
| 132 | +┌─ FOOTER ────────────────────────────────────────────────────────┐ |
| 133 | +│ • Discord Link │ |
| 134 | +│ • YouTube Link │ |
| 135 | +│ • Facebook Link │ |
| 136 | +│ • Privacy & Cookies Link │ |
| 137 | +│ │ |
| 138 | +│ © Year OrionRobots | Powered by Bootstrap │ |
| 139 | +└─────────────────────────────────────────────────────────────────┘ |
| 140 | +``` |
| 141 | + |
| 142 | +## Key Layout Characteristics |
| 143 | + |
| 144 | +**Full-Width Design**: Unlike other pages, the front page uses the entire container width (no sidebar) |
| 145 | + |
| 146 | +**Content Hierarchy**: |
| 147 | +1. Navigation & Branding (sticky header) |
| 148 | +2. Content tags & social sharing |
| 149 | +3. Welcome message & intro |
| 150 | +4. Featured book promotion (prominent placement) |
| 151 | +5. Community links (Discord, YouTube, social) |
| 152 | +6. Recent posts grid (main content discovery) |
| 153 | +7. Additional navigation (events, policies) |
| 154 | +8. Footer with links & copyright |
| 155 | + |
| 156 | +**Visual Flow**: Designed to capture attention with the book banner above the fold, then guide users to recent content and community resources below. |
| 157 | + |
| 158 | +**Responsive Breakpoints**: On mobile/tablet, the navigation collapses to hamburger menu, and content stacks vertically while maintaining the same content order. |
0 commit comments