Visit LEDU token page

How to design kubernetes/containers website wireframes using Axure

How to design kubernetes/containers website wireframes using Axure

  • English
  • Design
  • UX designUX design
  • (1495)
  • Project length: 6h 14m

In this project, we are going to design a kubernetes/containers website using Axure. We will focus on designing an advanced and yet easy to use an interactive accordion system that even your grandma could use!


Project Introduction:

This tutorial will go through the process of designing the UX Wireframes of a kubernetes/containers website using Axure. The tutorial will focus on creating a great user experience coupled with learning how to create an advanced accordion system. First, we’ll look at how to set up the project, and then how to design the individual accordion steps starting with the project level. We'll finish off with the pages where we can add and edit our projects and pipelines.

What are the requirements?

To get the most out of the tutorial, viewers should have some basic knowledge or understanding of:

  • Axure
  • UX design principles
  • Website design

What is the target audience? Anyone who wishes to learn more about:

  • Axure
  • Wireframes
  • Clickable prototypes
  • UX design principles

Project Outline

Session 1: Project setup

  • Setting up the background color
  • Designing the login page
  • Creating the header
  • Adding a custom chart and overview panes for the homepage

Session 2: Projects page

  • Designing the base accordion
  • Adding snippets of information on the accordion
  • Creating accordion close / open effect with dynamic panels

Session 3: Pipelines open state

  • Designing the builds list open state
  • Adding the open state of a build
  • Creating the terminal

Session 4: Builds open state

  • Creating advanced dynamic panel interactions
  • Adding edit and add project buttons
  • Designing the edit project overlay

Session 5: Close button for the overlay

  • Adding a close icon from the material icon set

Session 6: Interactive overlays

  • Adding a project overlay
  • Creating a pipelines overlay state
  • Adding a and removing variables

Session 7: Additional interactivity

  • Adding a build interaction
  • Using the delayed interactivity

Session 8: Profile page design

  • Adding an upgrade option
  • Creating a team module
  • Designing authentication options


Average rating

5(1495 Reviews)