Dev & Documentation
Dev & Documentation
This is a provisional Menu Page for the Development of TRILITEC's website V2.
This is a provisional Menu Page for the Development of TRILITEC's website V2.
Version notes/documentation is included just under each version.
Click on a version's blue-coloured title to visit the pages latest published state.
Current version is the one at the bottom, unless otherwise specified.
Version notes/documentation is included just under each version.
Click on a version's blue-coloured title to visit the pages latest published state.
Current version is the one at the bottom, unless otherwise specified.
Pages & Versions
Pages & Versions
V1 (OG)
V1 (OG)
V2.1 (Templates)
V2.1 (Templates)
Layout scaffolding 1.0,
built using providing core info from the old website (V1) to Framer's auto web-builder
Layout scaffolding 1.0,
built using providing core info from the old website (V1) to Framer's auto web-builder
Layout scaffolding 2.0
alternate version of V2-1.0
Layout scaffolding 2.0
alternate version of V2-1.0
Layout scaffolding 3.0
alternate version of V2-1.0 & V2-2.0
Layout scaffolding 3.0
alternate version of V2-1.0 & V2-2.0
V2.1 (Core Dev)
V2.1 (Core Dev)
Unedited Framer Template
chosen for
closest similarity to old/current website (V1)
most appropriate for TRILITEC's business type
display all critical information in an intuitive flow that can all fit on a one-page landing site
Unedited Framer Template
chosen for
closest similarity to old/current website (V1)
most appropriate for TRILITEC's business type
display all critical information in an intuitive flow that can all fit on a one-page landing site
General Description
full complete MVP prototype #1
// before August 2024 Review
Target
overview web structure
most copy (text content) structured & filled
functional v1 to review & improve on
Review Notes
… // to add here
General Description
full complete MVP prototype #1
// before August 2024 Review
Target
overview web structure
most copy (text content) structured & filled
functional v1 to review & improve on
Review Notes
… // to add here
General Description
MVP prototype #2
Goal / Target
address feedback from V1 review
own plan
Structure
Refine structure (info architecure)
Componentize elements & frames
Full Componented Frames
Component Variables
Component Variations (hover & press)
Ensure relative structuring
Media
Add media (pictures)
Polish visuals
UX
Improve accessibility
Aria labels (the #'s)
// maybe
Wireframe — craft info-architecture wireframes
Why.1 — for customer journey
Why.2 — preparation for UX analysis
Why.3 — user
CMS — learn & create CMS for easier site updating
Metrics
—
Results
—
Notes
—
Turns out building a website actually takes a long time … who would've known?
General Description
MVP prototype #2
Goal / Target
address feedback from V1 review
own plan
Structure
Refine structure (info architecure)
Componentize elements & frames
Full Componented Frames
Component Variables
Component Variations (hover & press)
Ensure relative structuring
Media
Add media (pictures)
Polish visuals
UX
Improve accessibility
Aria labels (the #'s)
// maybe
Wireframe — craft info-architecture wireframes
Why.1 — for customer journey
Why.2 — preparation for UX analysis
Why.3 — user
CMS — learn & create CMS for easier site updating
Metrics
—
Results
—
Notes
—
Turns out building a website actually takes a long time … who would've known?
——— ——— ———
General Description
MVP prototype #3
——— ——— ———
Goal / Target @ W36-W37
// Polish & Remove Deadweight
Plan (W36-W37)
Structure
Componentize elements & frames
Full Componented Frames
— DONE (m: mostly)
Component Variables
— DONE (fcf: for componented frames)
Component Variations (hover & press) — DONE (fcf)
Ensure relative structuring
Media
Add media (pictures)
— DONE
Polish visuals (remove wrapping & interaction errors)
——— ——— ———
Goal / Target @ W38-W39
Info
Data
Total # of Awards
Total # of past customers
Total # of Number of sensor types
Total # of Sensors made
… designed
… fully built
Story
Name of Ben's brothers
Date of founding
First ever customer
First ever payment
First ever conference
First ever pitch
Packages
What info should be there?
Testimonials
Get at least 1 real testimonial
Member Info
What team member info do we want publicized?
Gather team member info
Member Photos (Individual & Team)
Request or plan photoshoot
Fix / Change
Animation Smoothening
how to do smoother animation transitions project-wide
Solution Cards Horizontal Expansion
make sure parent stacks are not fixed
OR, switch to vertical expansion
Forms
Add Email field on "Share Challenges" form
Package Cards
Turn Package Cards into Expandable Components
Change Package Card Button Text to Learn More
Change Package Card Button to Low Contrast on Default, and High Contrast on Card Hover
Idea : Maybe turn Package Card into a condensed more-square-like card with more info on interaction
Benefits Section
Slightly darken gradient node at bottom right corner
Media
More Real Media
Get / take more accurate pictures of sensors to show in Features section
Get the wireframe version of the sensor
Work With Us Section
Get Pictures to sell the dream
attributes:
smiling,
factory operators,
smiling/shocked customer
handshakes
Feedback
Get 2-3 expert/external feedback sessions
// maybe later
UX & SEO: Improve accessibility
Aria labels (the #'s)
Source Tagging for stock images
Refine Structure
Create site wireframe & info architecure
Wireframe — craft info-architecture wireframes
Why.1 — for customer journey
Why.2 — preparation for UX analysis
Why.3 — user
CMS — learn & create CMS for easier site updating
Later changes
functional
Add a "read more" on About-Cards to redirect to dedicated page
Alt-Media (3D)
Make a few more wireframe renders (& maybe animation for hero section), of the TRAD Sensor
Alt-Media (Content)
Think of a content section for blogs & more
——— ——— ———
Metrics
—
——— ——— ———
Results
—
——— ——— ———
Notes
—
-
——— ——— ———
——— ——— ———
General Description
MVP prototype #3
——— ——— ———
Goal / Target @ W36-W37
// Polish & Remove Deadweight
Plan (W36-W37)
Structure
Componentize elements & frames
Full Componented Frames
— DONE (m: mostly)
Component Variables
— DONE (fcf: for componented frames)
Component Variations (hover & press) — DONE (fcf)
Ensure relative structuring
Media
Add media (pictures)
— DONE
Polish visuals (remove wrapping & interaction errors)
——— ——— ———
Goal / Target @ W38-W39
Info
Data
Total # of Awards
Total # of past customers
Total # of Number of sensor types
Total # of Sensors made
… designed
… fully built
Story
Name of Ben's brothers
Date of founding
First ever customer
First ever payment
First ever conference
First ever pitch
Packages
What info should be there?
Testimonials
Get at least 1 real testimonial
Member Info
What team member info do we want publicized?
Gather team member info
Member Photos (Individual & Team)
Request or plan photoshoot
Fix / Change
Animation Smoothening
how to do smoother animation transitions project-wide
Solution Cards Horizontal Expansion
make sure parent stacks are not fixed
OR, switch to vertical expansion
Forms
Add Email field on "Share Challenges" form
Package Cards
Turn Package Cards into Expandable Components
Change Package Card Button Text to Learn More
Change Package Card Button to Low Contrast on Default, and High Contrast on Card Hover
Idea : Maybe turn Package Card into a condensed more-square-like card with more info on interaction
Benefits Section
Slightly darken gradient node at bottom right corner
Media
More Real Media
Get / take more accurate pictures of sensors to show in Features section
Get the wireframe version of the sensor
Work With Us Section
Get Pictures to sell the dream
attributes:
smiling,
factory operators,
smiling/shocked customer
handshakes
Feedback
Get 2-3 expert/external feedback sessions
// maybe later
UX & SEO: Improve accessibility
Aria labels (the #'s)
Source Tagging for stock images
Refine Structure
Create site wireframe & info architecure
Wireframe — craft info-architecture wireframes
Why.1 — for customer journey
Why.2 — preparation for UX analysis
Why.3 — user
CMS — learn & create CMS for easier site updating
Later changes
functional
Add a "read more" on About-Cards to redirect to dedicated page
Alt-Media (3D)
Make a few more wireframe renders (& maybe animation for hero section), of the TRAD Sensor
Alt-Media (Content)
Think of a content section for blogs & more
——— ——— ———
Metrics
—
——— ——— ———
Results
—
——— ——— ———
Notes
—
-
——— ——— ———
Full, Functional MVP — 85% achieved
Addition One
Tech Solutions Page (for each product/service)
Addition Two
Begin Multipaging
// W39
Full, Functional MVP — 85% achieved
Addition One
Tech Solutions Page (for each product/service)
Addition Two
Begin Multipaging
// W39
——— ——— ———
General Description
—
——— ——— ———
Goal / Target @ W00
// —
0
—
——— ——— ———
Metrics
—
——— ——— ———
Results
—
——— ——— ———
Notes
—
-
——— ——— ———
——— ——— ———
General Description
—
——— ——— ———
Goal / Target @ W00
// —
0
—
——— ——— ———
Metrics
—
——— ——— ———
Results
—
——— ——— ———
Notes
—
-
——— ——— ———
V2.X.X — Documentation Template
V2.X.X — Documentation Template
——— ——— ———
General Description
—
——— ——— ———
Goal / Target @ W00
// —
0
—
——— ——— ———
Metrics
—
——— ——— ———
Results
—
——— ——— ———
Notes
—
-
——— ——— ———
——— ——— ———
General Description
—
——— ——— ———
Goal / Target @ W00
// —
0
—
——— ——— ———
Metrics
—
——— ——— ———
Results
—
——— ——— ———
Notes
—
-
——— ——— ———