Skip to content

Commit 5f9c35f

Browse files
authored
Merge pull request #275 from orionrobots/copilot/fix-274
Create visual text-based wireframe for front page layout in docs folder
2 parents 58979ae + b1c8070 commit 5f9c35f

File tree

2 files changed

+159
-0
lines changed

2 files changed

+159
-0
lines changed

.eleventyignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,6 @@
33
./_drafts
44
./tests
55
./.github
6+
docs
67
Dockerfile
78
DOCKER_OPTIMIZATION.md

docs/front-page-wireframe.md

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
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

Comments
 (0)