Giters

BrandonArmand / Binari

Interactive code editor with a live binary tree visual designed to teach new developers the fundamentals of Data Structures.

Home Page:https://binari.dev

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Design Work

BrandonArmand opened this issue · comments

commented

Design Changes

There are a lot of little design issues that could use some touch-up; such as, margin spacing, empty landing page, playground sizing, and probably so much more. This is the issue for all design work, please tag it on PRs related to design changes.

This will be an on-going issues, do whatever you think needs to be done to Binari. I will take any suggestion that you think will help with the overall design.

Anything that changes the UI/UX too drastically will be reviewed by @gigirubi

Suggestions:

  • Landing Page
    • Align sections in a more appealing manner.
    • Add video information.
    • Create a logo to display next to the title.
  • Playground
    • Design the canvas (just white is too basic)
  • About
commented

Hi! I've made a pull request that includes aligning sections for the landing and about page, as well as adding video information to the landing page and fixing any spelling/grammatical errors: #33.

commented

Do we have a moke-up of what the final design should look like? its may be helpful if we could create a Figma.com design so people can start contributing to it. I am not good at design but I can help in implementing it.

commented

Hey @OmarShezan,

As far as design goes, we are working on a mock up for the playground in Figma by @gigirubi, but as for everything else, it is sorta just a free-for-all. The initial design is implemented, so there isn't much to do there, but if you have any ideas that you think will work great, please feel free to pitch your ideas. The playground mockup probably won't be ready for some time as it is currently a very hectic time for us.

A couple current things that need some work is:

  1. Landing page could use more love. It is very basic and although describes Binari well, it doesn't quite hook the user.
  2. When an error occurs in the playground, the error screen no longer fills the entire height of the parent div on some browsers.
  3. When the playground is first opened, I would like an entry screen before it jumps into the code.
    • Animated in some way.
    • Different design than the current playground layout.
    • Leads into an interactive (of sorts) tutorial
    • (This is obviously a big addition to the site, and won't be added until later, but I figured I should include it on the list as it is something that we will get to eventually.)

When we have a mockup going, I will be sure to ping you. You are welcome to make addition as you see fit until then and we will review them and give feedback.

Best of luck!

commented

Hey @BrandonArmand I would like to make changes in the Home page design into a bit of dynamic one.

commented

@Vinamra2009 Sounds great (: Would love to see what you do.

commented

Hi @BrandonArmand, is the mockup ready? If so, do you need any help in implementing it? I'm looking for an open-source issue related to front-end development, so it would be nice if I could help in some way.

commented

hey @BrandonArmand found out that this issue can be solved i have a great idea that can make interface of website more appealing and interactive to users would you assign it to me under hacktoberfest
more things can be added like buttons , gradient colours , light/dark mode toggle