Skip to content
← All work

SteamAcademy

Landing page

SteamAcademy home page
Client
SteamAcademy
Role
UX/UI designer
Year
2023
Tools
Figma
Type
Landing page

About the project

Landing page for the EdTech arm of Robotikos Akademija.

Visit the live site

One landing page that welcomes parents and educators, equally.

How I designed SteamAcademy

  1. Discover

    • Academy and brand
    • Parents and educators
    • Reference sites

  2. Define

    • One clear goal
    • Page structure
    • Key messages

  3. Design

    • Wireframes
    • UI design in Figma
    • Mobile first

  4. Deliver

    • Figma handoff
    • Developer support
    • Design review

The Brief & My Response

Brief

SteamAcademy, the EdTech arm of Robotikos Akademija, needed a page that explains its afterschool programmes and gives each visitor a clear next step.

My response

A playful, orderly page with one headline, two clear entry points (I’m a Parent, I’m an Educator), programmes by age group and a row of partner logos for trust.

Site Map

Landing page
  • 01Hero
  • 02Programmes by age
  • 03Why STEAM
  • 04Video
  • 05Our values
  • 06Partner schools
  • 0721st-century skills
  • 08Classrooms
  • 09Testimonials
  • 10For schools
  • 11Get started

One page, read top to bottom: promise, proof, then the two ways in.

Complete Interface Preview

SteamAcademy on a phone
SteamAcademy on a phone
SteamAcademy on a phone
Programmes by age group, with one clear action on every card.
Programmes by age group, with one clear action on every card.
Why STEAM matters, in one statement
Why STEAM matters, in one statement
Video introduction
Video introduction
Partner schools with search
Partner schools with search
The 21st-century skills children develop
The 21st-century skills children develop
Classrooms, shown with real children
Classrooms, shown with real children
Closing call to action for both audiences
Closing call to action for both audiences
SteamAcademy on a phone
SteamAcademy on a phone
SteamAcademy on a phone

Visual Language

TitleAcid Grotesk specimen
Usage
Headlines
Weight
Light 300
Category
Sans serif
Body textAcid Grotesk specimen
Usage
Body and interface text
Weight
Regular 400
Category
Sans serif

Colour palette

  • #572FBFPrimary
  • #2F176EDeep
  • #8364D9Light
  • #D5CDF4Tint
  • #F7F5FFSurface
  • #F9CE88Highlight

Adaptive grid framework

Desktop · 1440px12 columns24 gutter120 margin
Tablet · 768px8 columns20 gutter32 margin
Mobile · 390px4 columns16 gutter20 margin

Thanks for watching

See the page live. ↗