DEV Community

Cover image for DO Hackathon: Phase 2 - The Design
Claro A Briones
Claro A Briones

Posted on

DO Hackathon: Phase 2 - The Design

Now that I have an idea it’s time to work on the design. I usually start by thinking about the UI and how it will flow. So I fired up Figma and created a rough sketch of the UI. For this project I need something simple, 2 or 3 views and a couple of inputs.

The Workflow

  1. User begins at the landing page:
    • A random image will appear for a set amount of time.
    • They will enter a description of what they saw in an input box.
    • They will then click the Submit button, which navigates them to the results page.
  2. User finishes at the results page:
    • The original image will be displayed.
    • The user’s input describing the image will be displayed.
    • They can then click the Share Results button, which will copy the link to the results page.

The Landing Page

Landing page mockup

The Results Page

Results page mockup

See you on the next post!


Photo by William Iven on Unsplash

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay