|
| 1 | +# Archive Page Layout Wireframe |
| 2 | + |
| 3 | +This wireframe shows the visual layout structure of the Orionrobots archive pages (Robot Building, Robot News, Robotics at Home) as they appear 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 (Two Column Layout) │ |
| 15 | +├─────────────────────────────────────────────┬─────────────────────┤ |
| 16 | +│ CONTENT COLUMN (col-md-8) │ SIDEBAR (col-md-4) │ |
| 17 | +├─────────────────────────────────────────────┼─────────────────────┤ |
| 18 | +│ [Tags: robot-building, electronics, etc.] │ [📚] │ ← Tag & Social Row | Book Sidebar |
| 19 | +│ [🔗📧📱] │ Robotics at Home │ |
| 20 | +├─────────────────────────────────────────────┼─────────────────────┤ |
| 21 | +│ Robot Building │ with Raspberry Pi │ ← Page Title | Book Promotion |
| 22 | +├─────────────────────────────────────────────┼─────────────────────┤ |
| 23 | +│ │ Pico │ |
| 24 | +│ FEATURED POSTS (First 4 with excerpts) │ │ |
| 25 | +├─────────────────────────────────────────────┼─────────────────────┤ |
| 26 | +│ [📷] 30 Aug 2025 » Building Your First │ [Book Cover Image] │ ← Featured Post Item |
| 27 | +│ Robot │ │ |
| 28 | +│ A comprehensive guide to getting │ Learn to build │ |
| 29 | +│ started with robot building using │ robots at home... │ |
| 30 | +│ basic components and tools... │ │ |
| 31 | +│ [more...] │ [Buy Now Button] │ |
| 32 | +├─────────────────────────────────────────────┼─────────────────────┤ |
| 33 | +│ [📷] 25 Aug 2025 » Advanced Motor Control │ │ ← Featured Post Item |
| 34 | +│ for Robotics │ │ |
| 35 | +│ Deep dive into servo and stepper │ │ |
| 36 | +│ motor control techniques for precise │ │ |
| 37 | +│ robot movement... │ │ |
| 38 | +│ [more...] │ │ |
| 39 | +├─────────────────────────────────────────────┼─────────────────────┤ |
| 40 | +│ [📷] 20 Aug 2025 » Sensor Integration │ │ ← Featured Post Item |
| 41 | +│ Made Easy │ │ |
| 42 | +│ Learn how to integrate various │ │ |
| 43 | +│ sensors into your robot projects │ │ |
| 44 | +│ for enhanced functionality... │ │ |
| 45 | +│ [more...] │ │ |
| 46 | +├─────────────────────────────────────────────┼─────────────────────┤ |
| 47 | +│ [📷] 15 Aug 2025 » Robot Programming │ │ ← Featured Post Item |
| 48 | +│ Fundamentals │ │ |
| 49 | +│ Master the basics of programming │ │ |
| 50 | +│ robots with clear examples and │ │ |
| 51 | +│ practical exercises... │ │ |
| 52 | +│ [more...] │ │ |
| 53 | +├─────────────────────────────────────────────┼─────────────────────┤ |
| 54 | +│ │ │ |
| 55 | +│ ADDITIONAL POSTS (Title and Date Only) │ │ |
| 56 | +├─────────────────────────────────────────────┼─────────────────────┤ |
| 57 | +│ 10 Aug 2025 » Robot Chassis Design Tips │ │ ← Additional Post Item |
| 58 | +├─────────────────────────────────────────────┼─────────────────────┤ |
| 59 | +│ 05 Aug 2025 » Power Supply Considerations │ │ ← Additional Post Item |
| 60 | +├─────────────────────────────────────────────┼─────────────────────┤ |
| 61 | +│ 01 Aug 2025 » Wireless Robot Communication │ │ ← Additional Post Item |
| 62 | +├─────────────────────────────────────────────┼─────────────────────┤ |
| 63 | +│ 28 Jul 2025 » 3D Printing Robot Parts │ │ ← Additional Post Item |
| 64 | +├─────────────────────────────────────────────┼─────────────────────┤ |
| 65 | +│ 25 Jul 2025 » Arduino vs Raspberry Pi │ │ ← Additional Post Item |
| 66 | +├─────────────────────────────────────────────┼─────────────────────┤ |
| 67 | +│ 20 Jul 2025 » Robot Safety Guidelines │ │ ← Additional Post Item |
| 68 | +├─────────────────────────────────────────────┼─────────────────────┤ |
| 69 | +│ │ │ |
| 70 | +│ │ │ ← End of Sidebar |
| 71 | +│ │ │ |
| 72 | +│ │ │ |
| 73 | +│ │ │ |
| 74 | +│ │ │ ← Bottom of Content |
| 75 | +├─────────────────────────────────────────────┴─────────────────────┤ |
| 76 | +│ Events │ ← Additional Sections |
| 77 | +│ Robot Events │ |
| 78 | +│ │ |
| 79 | +│ Policies │ |
| 80 | +│ Terms And Conditions │ |
| 81 | +│ │ ← Bottom of Content |
| 82 | +├───────────────────────────────────────────────────────────────────┤ |
| 83 | +│ FOOTER (Below the Fold) │ |
| 84 | +├───────────────────────────────────────────────────────────────────┤ |
| 85 | +│ 💬 Discuss robot building on Our Discord Server! │ ← Social Links |
| 86 | +│ 📺 Youtube │ |
| 87 | +│ 📘 Facebook │ |
| 88 | +│ 🔒 Privacy and Cookies │ |
| 89 | +├───────────────────────────────────────────────────────────────────┤ |
| 90 | +│ © 2025 OrionRobots. Orionrobots is a registered trademark. │ ← Copyright |
| 91 | +│ with help from Bootstrap │ |
| 92 | +└───────────────────────────────────────────────────────────────────┘ |
| 93 | +``` |
| 94 | + |
| 95 | +## Layout Sections Breakdown |
| 96 | + |
| 97 | +### Above the Fold (Initially Visible) |
| 98 | + |
| 99 | +``` |
| 100 | +┌─ NAVIGATION BAR ─────────────────────────────────────────────────┐ |
| 101 | +│ Logo + Brand Name | Menu Items | Search Box │ |
| 102 | +└─────────────────────────────────────────────────────────────────┘ |
| 103 | +
|
| 104 | +┌─ TWO COLUMN LAYOUT ─────────────────────────────────────────────┐ |
| 105 | +│ CONTENT (col-md-8) │ SIDEBAR (col-md-4) │ |
| 106 | +│ │ │ |
| 107 | +│ ┌─ TAG & SOCIAL ROW ────┐ │ ┌─ BOOK SIDEBAR ─────────────────┐ │ |
| 108 | +│ │ [Tag Buttons] | [📧📱] │ │ │ [Book Cover Image] │ │ |
| 109 | +│ └───────────────────────┘ │ │ Robotics at Home with Pi Pico │ │ |
| 110 | +│ │ │ [Buy Now Button] │ │ |
| 111 | +│ ┌─ PAGE HEADER ─────────┐ │ └─────────────────────────────────┘ │ |
| 112 | +│ │ Robot Building │ │ │ |
| 113 | +│ └───────────────────────┘ │ │ |
| 114 | +└─────────────────────────────────────────────────────────────────┘ |
| 115 | +``` |
| 116 | + |
| 117 | +### Below the Fold (Requires Scrolling) |
| 118 | + |
| 119 | +``` |
| 120 | +┌─ FEATURED POSTS SECTION ────────────────────────────────────────┐ |
| 121 | +│ ## First 4 Posts (with thumbnails and excerpts) │ |
| 122 | +│ │ |
| 123 | +│ [Thumb] Date » Title │ |
| 124 | +│ Post excerpt text describing the content... │ |
| 125 | +│ [more...] │ |
| 126 | +│ │ |
| 127 | +│ [Thumb] Date » Title │ |
| 128 | +│ Post excerpt text describing the content... │ |
| 129 | +│ [more...] │ |
| 130 | +│ │ |
| 131 | +│ [Thumb] Date » Title │ |
| 132 | +│ Post excerpt text describing the content... │ |
| 133 | +│ [more...] │ |
| 134 | +│ │ |
| 135 | +│ [Thumb] Date » Title │ |
| 136 | +│ Post excerpt text describing the content... │ |
| 137 | +│ [more...] │ |
| 138 | +└─────────────────────────────────────────────────────────────────┘ |
| 139 | +
|
| 140 | +┌─ ADDITIONAL POSTS SECTION ──────────────────────────────────────┐ |
| 141 | +│ ## Remaining Posts (title and date only) │ |
| 142 | +│ │ |
| 143 | +│ Date » Title Link │ |
| 144 | +│ Date » Title Link │ |
| 145 | +│ Date » Title Link │ |
| 146 | +│ Date » Title Link │ |
| 147 | +│ Date » Title Link │ |
| 148 | +│ Date » Title Link │ |
| 149 | +│ ... │ |
| 150 | +└─────────────────────────────────────────────────────────────────┘ |
| 151 | +
|
| 152 | +┌─ ADDITIONAL NAVIGATION ─────────────────────────────────────────┐ |
| 153 | +│ ## Events │ |
| 154 | +│ Robot Events │ |
| 155 | +│ │ |
| 156 | +│ ## Policies │ |
| 157 | +│ Terms And Conditions │ |
| 158 | +└─────────────────────────────────────────────────────────────────┘ |
| 159 | +
|
| 160 | +┌─ FOOTER ────────────────────────────────────────────────────────┐ |
| 161 | +│ • Discord Link │ |
| 162 | +│ • YouTube Link │ |
| 163 | +│ • Facebook Link │ |
| 164 | +│ • Privacy & Cookies Link │ |
| 165 | +│ │ |
| 166 | +│ © Year OrionRobots | Powered by Bootstrap │ |
| 167 | +└─────────────────────────────────────────────────────────────────┘ |
| 168 | +``` |
| 169 | + |
| 170 | +## Key Layout Characteristics |
| 171 | + |
| 172 | +**Two-Column Design**: Unlike the front page, archive pages use a sidebar layout with main content in a 8-column area and sidebar in a 4-column area. |
| 173 | + |
| 174 | +**Content Hierarchy**: |
| 175 | +1. Navigation & Branding (sticky header) |
| 176 | +2. Tag & social sharing row (main content area) |
| 177 | +3. Page title (specific to the archive type) |
| 178 | +4. Featured posts section (first 4 posts with full details) |
| 179 | +5. Additional posts section (remaining posts with title/date only) |
| 180 | +6. Book promotion sidebar (persistent throughout page) |
| 181 | +7. Additional navigation (events, policies) |
| 182 | +8. Footer with links & copyright |
| 183 | + |
| 184 | +**Post Display Format**: |
| 185 | +- **Featured Posts (first 4)**: Thumbnail image, date, title, excerpt text, "more..." link |
| 186 | +- **Additional Posts**: Date and title link only (compact format) |
| 187 | + |
| 188 | +**Tag-Specific Content**: Each archive page shows content filtered by its specific tag: |
| 189 | +- Robot Building: `robot-building` tag |
| 190 | +- Robot News: `robot-news` tag |
| 191 | +- Robotics at Home: `robotics-at-home` tag |
| 192 | + |
| 193 | +**Visual Flow**: Designed to showcase the most recent and relevant content prominently at the top, with quick access to older content below, while maintaining book promotion visibility in the sidebar. |
| 194 | + |
| 195 | +**Responsive Breakpoints**: On mobile/tablet, the sidebar stacks below the main content, and the navigation collapses to hamburger menu while maintaining the same content order. |
0 commit comments