Update design for web app

[davydovanton]

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

[tikhonbelousko]

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

[davydovanton]

wow, @DaZzz I like this 👍

[FanaHOVA]

Looks really good!

[davydovanton]

@DaZzz and also I really like lifebuoy idea 👍

[davydovanton]

@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

[tikhonbelousko]

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:

• [x] Landing
• [ ] About
• [ ] How to help
• [x] Task List
• [x] Task Create
• [x] Task Show
• [x] 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?

👻

[davydovanton]

1. yep, you're right

2. I mean something like this:

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 😊

[tikhonbelousko]

@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. 🤔

[davydovanton]

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

[ai]

Wow! Really great start.

[ai]

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.

[tikhonbelousko]

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.

[ai]

@DaZzz awesome! :heart_eyes:

[davydovanton]

@DaZzz great job 👍

[tikhonbelousko]

Compact view:

[davydovanton]

@DaZzz awesome 👍

[davydovanton]

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

[tikhonbelousko]

@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.

[davydovanton]

@DaZzz cool, good news 👍 feel free for any delay what you need :)

[tikhonbelousko]

Task > Show:

[tikhonbelousko]

Task > New:

[davydovanton]

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

[davydovanton]

@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?).

[tikhonbelousko]

@davydovanton on it!

[tikhonbelousko]

[davydovanton]

@DaZzz awesome 💚

[davydovanton]

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

[tikhonbelousko]

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

[davydovanton]

@DaZzz awesome. Thanks!

[tikhonbelousko]

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