User experience - New look and feel for Composer-Home

[mareekuh]

Composer Welcome / Start Page

Refresh of Composer Home to align with our Build release.

References:

• Visual Studio - http://dotnetmirror.com/Resources/Uploaded-Files/fe0c4c6e-4fcc-49b6-bb35-376b009317b2/visual-studio-2017-Start-Page.png
• Visual Studio Code - 2019-02-28-14_44_29-Welcome-Visual-Studio-Code.png (1912×1040) (qlikfix.com)
• See also (Gary's email/doc):

Content

• Recent bots list
• Featured videos
• Tutorial

Functionality/tasks

• New bot
• Open existing bot
• Open/install Emulator

Access to:

• What’s new
• Release notes
• Composer docs (Learn / Help) - Short list (maybe 3?) of links (title & brief sub title), blog posts, preview features etc.
• Composer GitHub repo
• Bot Builder Community? (Given our likely push for package building?)
• Stack Overflow

Related products?

• PVA?
• Health bot?
• LUIS?
• QnA?
• AI Studio?

Remove from current design:

• examples list –

Future idea

• Bundle Emulator
• Pin your favorite projects to the home screen

[xiyangdesign]

FYI: homepage Figma

[xiyangdesign]

@zhixzhan @srinaath

Hi Zhixiang, here are my comments based on the working version from this branch: homepage-refine

1. remove fixed header - make the header scrollable
   

2. Add 24px spacing to the right of what's new - border radius sets to 5px

3. Responsive design: expand card width to fill the space
   

4. Text overflows to the purple area:) set height to auto may solve the issue? - see padding specs in no.5
   

5. Padding spec for cards

• All spacing: 12px (except below)
• Padding between header and text description: 8px

6. When image is shorter than card width - image background blurred and opacity to 30% (something like below) Figma

7. when no image is available in the feed, take the design as below. Figma

8. Icon (stack overflow) has changed to height 48px, same with other icons. link

THANK YOU!!

[mewa1024]

Hello, I noticed a couple other things that I hope can be adjusted:

There is some additional padding around the Resources and Latest Videos/Tutorials sections: looks the padding is set to 25 px overall:

But the first tile in the "Resources" sections has additional 12px margin on the left:

Same with the leftmost tile in the "Latest Videos" and "Tutorials":

Lastly, is it possible to remove the 8px of padding on the left of the "Latest Video" pivot:

It causes the text to not be aligned:

[xiyangdesign]

Just checked this morning. The current nightly doesn't have the latest code merged. That's why some bugs still appear or seem not right.

Will follow up on design suggestions with the latest build.

[mewa1024]

thanks!

[zhixzhan]

Hi @mewa1024 @xiyangdesign , I made a PR fix this.