Landing page look and feel

[atapas]

@bharati-21 and @mverissimo Could you please check the landing page together.

As @mverissimo is revamping the look and feel of the app, the landing page should have a similar look and feel.

Related issue: #27

[mverissimo]

Nice, I saw the wireframe, and looks very good! I'm using the tailwind design tokens, they work perfectly, I think that we can use them across the app pages, what do you think?

[atapas]

Yep, I looked into design tokens recently. Sounds promising.

[bharati-21]

Oh okay, I am not aware of design tokens, I shall check out about them.
If possible, do share a good resource that you have for it! :)

[mverissimo]

Yep:

• Colors
• Font Size
• Spacing

[atapas]

@mverissimo I've merged the search improvement PR. What are you planning to start next? Demo list page?

So we have,

• Demo list page
• New landing page
• Individual demo page(Here we want to make typescript conversion of common files. But the demo files created by the Plop tool, let's leave as JSX as is but style it to improve)

Cc: @max-programming

[mverissimo]

Good!

I intend to follow this order:

• Demo list page
• Individual demo page
  Here I suggest focusing on a complete redesign and migrate these demos to typescript soon.
• Landing page

[atapas]

@mverissimo The order looks acceptable to me.

Here is my thought about the individual demo pages:

• The source files for individual demo pages are auto-generated using the PLOP utility. In that case, we need to change the templates too to make it TSX-based instead of jsx.
• We should modify the existing demo pages to adopt typescript only when we change the PLOP template for the demo pages. Otherwise, the new demos will be still in JSX
• If we do the above, then the demo pages will constantly be on the typescript. The API files for a demo should still be flexible for plain JavaScript.

@mverissimo @max-programming @niteshseram, do you see things in different ways?

[mverissimo]

I get it, makes sense! So we can update the plop file after the new design update?

[atapas]

@mverissimo Update one of the existing demos and complete it with the new design update. We can test, review and base it for the template update. I can do the template update in the same repo where we would update all existing demos. Again, no changes to the API template files, only demo files template changes. Does it sound good to you?

[mverissimo]

Yep, looks good.

[atapas]

@bharati-21, hope you are finding this thread useful?

[bharati-21]

Hi Tapas,
Yes.
So according to my understanding-
once I complete the high level design for the landing page, and the front end design using HTML and tailwind CSS, @mverissimo will work on the dynamic content after finishing with demo list page, and individual demo page?

Did I get it right?

[bharati-21]

So if what I interpreted is right, does it also mean that I have control over the design choices I make w.r.t font, themes, colors, etc. for the landing page?

[atapas]

Hi Tapas,
Yes.
So according to my understanding-
once I complete the high level design for the landing page, and the front end design using HTML and tailwind CSS, @mverissimo will work on the dynamic content after finishing with demo list page, and individual demo page?

Did I get it right?

That's right.

[bharati-21]

Cool, now it's clear. I shall then start working on it right away.

And sorry for replying late. Apologizing in advance if it happens again in the next few days, since I am unwell.

[koustov]

Hello All,
I was running through some ideas for a different purpose however stumbled upon one particular aesthetic which would make a lot of sense for webapi-playground.

Principle:

1. Modenernize look
2. Interactive cards
3. sneak-pick of the contributor
4. Maximum realestate

Note: This is not mockup, I actually tweaked the styling to achieve it. Based entirely on `tailwind.
If we conclude on this , I can push my snippets, and the rest of the magic can be carried out by anyone here.

[atapas]

@mverissimo @niteshseram @max-programming Your thoughts?

[niteshseram]

The design looks cool but we can make minor customization to this like we can add picture with the name of the author of the api below like we are doing already and color also be something which align with current design.

[mverissimo]

I enjoy this proposal, but when I designed the new Card I do them to be cleaner, and enforce user access to the content, maybe we can think of something like a blog in the future, the amount of demos tends to grow with time.

Edit 1:
I think that switching emoji to svg is a downside, we will need a package of icons with a variety of themes.

[koustov]

yes, that's the magic we need to add :). I have created dummy PR you can refer to understand it a better way

https://webapis-playground-git-fork-koustov-ui-update-i-98-thoughtdump.vercel.app/

Pending:

1. More usable by expanding the details to the full card on hover
2. add git image
3. here the icons are used from react-icons. Need to identify a clean way to incorporate the icons.
4. wiring up the links
5. update demo page accordingly

[atapas]

Guys, Let us not divert the discussion here. This discussion was opened to conclude a design for the landing page of the product/app. The related issue is: #27

@bharati-21 has come up with a wireframe. Here it is:

Here's the first draft of the design for the landing page.
https://www.figma.com/file/aL4GRZpZrtoVjmj75SLDUo/Web-APIs-Playground?node-id=0%3A1

Please review and get back with comments.

About a better look-and-feel of the demo list page(that @koustov started), we can conclude it along with the categorization issue here: #112 (comment)

Please let me know if any questions.

P.S. We need to freeze the design of the landing page faster to start the implementation.

@bharati-21 I have provided a few comments. Could you please make the wireframe available to @koustov @niteshseram @max-programming @mverissimo for them to review and comment?

[niteshseram]

The figma design looks great @bharati-21. I think we can finalize this design and may be give a second thoughts for the colors like some eye cooling color. These colors are also looking great.

[mverissimo]

Looks great, maybe we can use the same header from the demo list, with a change color if necessary, what do you think?

[bharati-21]

Guys, Let us not divert the discussion here. This discussion was opened to conclude a design for the landing page of the product/app. The related issue is: #27

@bharati-21 has come up with a wireframe. Here it is:

Here's the first draft of the design for the landing page.
https://www.figma.com/file/aL4GRZpZrtoVjmj75SLDUo/Web-APIs-Playground?node-id=0%3A1

Please review and get back with comments.

About a better look-and-feel of the demo list page(that @koustov started), we can conclude it along with the categorization issue here: #112 (comment)

Please let me know if any questions.

P.S. We need to freeze the design of the landing page faster to start the implementation.

@bharati-21 I have provided a few comments. Could you please make the wireframe available to @koustov @niteshseram @max-programming @mverissimo for them to review and comment?

@atapas yes, I've noted down your comments and will look out for a better color combination that's pleasing to the eye as well as increases readability.

[bharati-21]

Looks great, maybe we can use the same header from the demo list, with a change color if necessary, what do you think?

Sure, I can do that as well if @atapas is okay with the combination. 👍🏼