Redesign "welcome message dialog"

[perriefidelis]

The current welcome dialog doesn't look to good with the colours and all. So made a redesign in a mockup of a much better look.

current look

redesign

In my honest opinion we don't have to indicate the move with an icon, once the user uses the mouse on the blue div he/she should be able to change the location of the helpDiv

here is how it looks

[quozl]

Looks better to me. Please also make the change to Turtle Blocks JS, on which Music Blocks is based. Here's what it looks like at https://rawgit.com/sugarlabs/turtleblocksjs/master/index.html

[perriefidelis]

I’ve been able to make changes(mock up) on TB using your screenshot. But the welcome dialog doesn’t show when I open Tb on my browser. I tried using 3 browsers (chrome, Firefox and Safari).

[quozl]

The dialog did not show until I pressed the question-mark button. It was with Firefox 64 on Ubuntu 16.04 Xenial LTS.

[perriefidelis]

Okay, seen. I'll create an issue right away on tb. but I think the tour should appear the way it does on mb, without having to click on the "?" first

[pikurasa]

What I see in these pictures looks very nice. Great work!

I do not see a PR for this, nor do I see it in your repo on GH (https://github.com/perriefidelis/musicblocks). Please send a PR with this change.

An aside, it seems from the pictures like the turtle in Turtle Blocks has unintentionally become a mouse. Maybe this needs fixed?

[pikurasa]

@perriefidelis Any PR for this?

[perriefidelis]

Not yet. I’m not really good at writing codes, I’m trying to look for ways to implement it though but if anyone wants to work on it, they should

[pikurasa]

How did you make the mockup without changing the code?

[perriefidelis]

I used a design tool for the mockup

[quozl]

Which design tool?

[jshreyans]

@pikurasa @quozl Hi!
Would it be okay if I worked on the welcome tab as suggested by @perriefidelis
The mockup design looks really nice and I think it would be a great enhancement

[jshreyans]

Btw kudos @perriefidelis that's a really subtle and simplistic design yet it suits the website nicely 👍

[perriefidelis]

@quozl I used “FIGMA” (a design tool that helps you to prototype before writing actual codes)

[perriefidelis]

@jshreyans551, that would be great! You can pick from where I stoped: https://github.com/perriefidelis/musicblocks
branch: fix-helpdiv-container

Thanks.

[jshreyans]

Great! Thanks a lot

[jshreyans]

@perriefidelis I've worked on the welcome tab but I'm facing certain problems:

1. Navigation buttons: I tried to position them as you suggested but as soon as they move out of the helpDiv border, that part is automatically cut out. it seems the canvas element in the background is creating the problem

2. Layout: the layout you suggested involves making an entire new div strip but that means I have to modify the help.js quite a bit since the entire logic is based on the fact that the code renders the buttons div as a table. I'm not sure whether the maintainers would be comfortable with this

I tried to make it look better with some temporary mods:

I tried of thinking for alternative placements for the navigation buttons and I think placing the, on the top strip but both at the left and right extremes would be suitable. Inputs?

[pikurasa]

I tried of thinking for alternative placements for the navigation buttons and I think placing the, on the top strip but both at the left and right extremes would be suitable. Inputs?

I like the idea of putting it on the left or right side.

/me wonders if "up/down" arrow makes more sense than "left/right"...?

[jshreyans]

/me wonders if "up/down" arrow makes more sense than "left/right"...?

I don't think that would matter too much at this stage since there are no animations (like sliding right/left or up/down) when the page content changes. If for instance, there would have been a horizontal slide animation for the content, then the arrow direction would have mattered.

I like the idea of putting it on the left or right side.

Should I implement it?

[walterbender]

I think the charm and simplicity of Perrie's design is what we are striving for. If the buttons on the side cannot extend outside of the div, then expand the div to make room for them???

[perriefidelis]

the drop shadow is as well too dark, I'm thinking maybe this could help?

https://www.figma.com/file/0ntRQHqYNilzMzSBpOBaUK0J/Musicblocks?node-id=0%3A1

gives you the properties of every element.

steps:

1. CLICK on the element you want to check it's property
2. On the right part of the where you have "design, prototype and code", CLICK on Code
3. SELECT css

[jshreyans]

@perriefidelis Corrected shadow in latest commit

[jshreyans]

@walterbender Sure I will try to reach as close as possible to the design. Thanks!

[jshreyans]

@perriefidelis Are the rounded corners looking fine? I thought it would be good addition but I'm not sure. Since it your design after all.

[jshreyans]

Hi! Done with the final view of the welcome tab.
Although there is a slight problem. The drag button image file fails to load. Preview:

It seems to be a trivial issue but I can't find a solution. Maybe its because I used relative paths for the address.
Please provide inputs!

[perriefidelis]

Hi @jshreyans551 sorry for the late reply.

design observations:

• I think you should reduce the corner radius of the rectangle a bit.
• The colour of the texts should be #505050 not #000000
• The font you used for the "take a tour" and "skip" isn't Roboto
• font sizes should increase a bit

[walterbender]

We should be consistent with the fonts used everywhere else.

[jshreyans]

@perriefidelis Not a problem, thanks for the feedback.
I've made all the listed changes. Although the 'skip' button is no longer there as suggested by @walterbender. This is the latest version:

[pikurasa]

As far as I can tell, we have merged all the pertinent changes for this issue -- is there something remaining? If so, can someone please enumerate them for clarity?

[jshreyans]

All features have been merged by @walterbender. You can refer to the pull request thread here.
I don't think any changes are remaining

[walterbender]

I think there is still the issue of white icons on white background not being visible.

[walterbender]

Should be all set.