ossboard-org / ossboard

Public board for oss issues and mentoring

Home Page:http://www.ossboard.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Update design for web app

davydovanton opened this issue Β· comments

We need to update mobile version and also will be awesome to improve UI for all versions

Hey there!

Just prepared rough sketch. We can go in this direction. I didn't change structure of existing website much though.

Landing page sketch
Logo process

wow, @dazzz I like this πŸ‘

Looks really good!

@dazzz and also I really like lifebuoy idea πŸ‘

@dazzz and just ideas for discussion:

  1. What do you think if we make background colors less contrast?
  2. Add top line for header texts ("what is this", "latest issues")
  3. Change background color for footer for greater compatibility
  1. I can work more on colours once we setup with all of the structure. Actually we can even do it once markup is ready. Since it is a matter of one variable, right? That's how I usually do it to be honest. πŸ™ƒ
  2. What do you mean by top line? Can you give me some kind of sketch of your idea?
  3. Compatibility with what? Didn't fully get it. Can you elaborate?

@davydovanton Btw, wanted to sync on site map. Tell me if I forget something:

  • Landing
  • About
  • How to help
  • Task List
  • Task Create
  • Task Show
  • Profile

As for landing page. Can you help me with steps for "I want to contribute" / "I'm a maintainer" section? How about:

  1. View task
  2. Pick up task with suitable language and difficulty
  3. Contact a maintainer

And

  1. Create a task
  2. Specify language and difficulty
  3. Wait for contributors to help you

Also, do you have any suggestions for landing page sections? Should I add something?

πŸ‘»

  1. yep, you're right

  2. I mean something like this:
    screenshot 2016-12-29 23 28 49

  3. I mean footer color (we will fix it in future)

@dazzz yes, your sitemap is correct.

About steps:

Steps for developers good, but I think we need to fix maintainer steps to:

  1. Create a task
  2. Wait for contributors to help you
  3. Help developer to complete your task

I don't have other suggestions for landing page 😊

@davydovanton thanks for corrections. As for heading I think it's quite unusual to add line on top. The point of this line is to push heading away from body text. I will play around with headings and we will settle on most appropriate option. πŸ‘Œ

I just noticed that we kinda missing mentoring part of the website. Maybe we don't advertise it enough that maintainers will be helping contributors and guiding them towards solution. πŸ€”

so, mentoring the most important part of this application that's why yes we should to notice this on the landing page 😁

Wow! Really great start.

I think maybe should copy few things from Cult:

  • Intro is small and user see tasks without a scroll. Content-first UX principle is good.
  • Tasks cards are big and contain most of information.

After playing around with the list of issues here is the latest version of more descriptive kind of cards. I'm also planning to introduce more compact headlines-only layout. We can actually try to put it on the main page similar to Cult which sounds like a good idea to me.

landing cards

@dazzz awesome! 😍

@dazzz great job πŸ‘

Compact view:
landing cards list

@dazzz awesome πŸ‘

@dazzz what do you think, when we can use your work and will update application design? :)

@davydovanton Well I cannot stop you, but I would delay to next week. Something may change. I hope to have most of the pages ready. πŸ˜… At least Landing/Task CRUD/Profile.

@dazzz cool, good news πŸ‘
feel free for any delay what you need :)

Task > Show:
landing task

Task > New:

landing task new

@dazzz you forgot about "export" button in Task > New page ;)

@dazzz Hey, can I ask you update the design for one new page? :)

It's leaderboard page. We need to create this page for users and mentors(task authors). I see it as a simple table with three columns (position, username(with a link to profile and avatar) and points). It'll be cool to separate first three positions (what do you think?).

@dazzz awesome πŸ’š

@dazzz Hey, could you send me logo sketch? :)
I want to create Twitter account and will be great to use logo here 😊

Here is the link to sketch file. You can find all of the designs and logo there. Logo is located on Logo page. πŸ™‚

@dazzz awesome. Thanks!

Also I think you can actually start implementing designs. I could maybe help later with this as well. :)

yep, good idea, I'll start working on index page πŸ‘

@dazzz I added new design πŸŽ‰

You can check it here http://www.ossboard.org

Thanks a lot!

Awesome! πŸŽ‰ You are welcome!

@dazzz could you help with two issues? :)

First

I want to improve UX for task status. I have two different states:

  1. Assign user (by GitHub login) to task
    screenshot 2017-01-30 18 16 25

  2. Select status for task
    screenshot 2017-01-30 18 16 19

Do you have any ideas how we can do it intelligible and simple for users?

Second

I want to create a simple blog for new release posts. And it will be awesome if you help me with design for it πŸ‘

I will work on it πŸ‘Œ Btw, why are there two identical images? πŸ˜…

oh, sorry. I fixed it :)
@dazzz