[1502shivam-singh]

Fixes: fixes increase in button size due to pull request #213

Changes:

Removed the padding and margin from global button styles and applied them to local styles of specific buttons

Screenshots of the change:

Button size fix

Added padding to "View on Github" on CTA button, for horizontal alignment.

[juzhiyuan]

cc @qier222 to take a look

[qier222]

🤔

[1502shivam-singh]

Oe Oe Oe! 🤣🤣

Run down your scales on this one, then 😅

[qier222]

[1502shivam-singh]

Didn't get the statement "buttons are bigger than logo and slogan" 😕. By slogan do you mean "A...Gateway" ?
And the button widths looks fine to me, they are big enough to drag user attention and support the fact of proper hierarchy after the sub-head "A....Gateway".
Do you have issues with the width of the "downloads" button ?

[qier222]

The height of the "View on GitHub" button is higher than the "A Dynamic Cloud-Native API Gateway" text, and the "View on GitHub" is almost black, attract way too much attention than the slogan text and brand text.

Here is some example how other designers handle slogan and primary button.

[1502shivam-singh]

How about this (initially I was trying not to change too much of the original design as he/she must have had their thoughts behind it, but now I feel you are fine with it. So here we go😄 )

I removed the Apisix title, as it looked repeated (written in navbar too), Increased the font size for highest focus and changed its color to match the color scheme.

Made the text wrap, as the sub head copywriting is too long, reader might lose his eye position in the middle.

Also made the buttons a little thinner, for best results

On mobile -

[juzhiyuan]

Not sure if those two buttons' position is good to view 🤔 Others look good to me

[juzhiyuan]

BTW, I noticed that the picture on our homepage is hard to read (a little small) 🤔

[1502shivam-singh]

Yup, your orgs website is failing on this point of accessibility.
The API architecture image is just not clear to see at the size which it is currently at.
Also the hero section feels empty at the moment 😢, and the copywriting on hero section and other sections can be made smaller and concise.

[1502shivam-singh]

@juzhiyuan what's your feedback to these edits and the mobile screenshot in this one

How about this (initially I was trying not to change too much of the original design as he/she must have had their thoughts behind it, but now I feel you are fine with it. So here we go 😄 )

I removed the Apisix title, as it looked repeated (written in navbar too), Increased the font size for highest focus and changed its color to match the color scheme.

Made the text wrap, as the sub head copywriting is too long, reader might lose his eye position in the middle.

Also made the buttons a little thinner, for best results

On mobile -

[juzhiyuan]

LGTM

[1502shivam-singh]

Wait a bit, just let me push these changes to the branch

[1502shivam-singh]

Guys have encountered a problem while pushing to this branch. Created a new pull request PR for this integration. Please merge that pull request after reviewing. @juzhiyuan @gxthrj

[qier222]

How about this (initially I was trying not to change too much of the original design as he/she must have had their thoughts behind it, but now I feel you are fine with it. So here we go😄 )

I removed the Apisix title, as it looked repeated (written in navbar too), Increased the font size for highest focus, and changed its color to match the color scheme.

Made the text wrap, as the sub head copywriting is too long, reader might lose his eye position in the middle.

Also made the buttons a little thinner, for best results

On mobile -

Sorry for the slow response.

I designed this page, I was planning to make the logo on the navbar hidden when the logo in the hero section is visible, but I haven't done this. I think you can remove the logo in the hero section now.

The "View on GitHub" and "Downloads" buttons are center-aligned inside and left-aligned outside, looks weird to me, I still think make these buttons full-screen wide is a better option. Maybe we can center align the slogan on mobile devices?

[juzhiyuan]

Also, how about making this part align from two sides?

[qier222]

How about this?

[juzhiyuan]

+1 Red & Black (keywords) would be more clear for users 🤔

[juzhiyuan]

@1502shivam-singh What's your opinion?

[1502shivam-singh]

@qier222 This one looks good to me.

How about this?

For the rest, you designed the page previously, and the buttons were left-aligned previously too with text-centered, so you must have had some thought behind it then. I am just following that flow, what I feel your thought would be is to keep the buttons left aligned because the section itself is left-aligned, the best example of a similar website-hero-section is the stripe website -

I guess we should first decide on one layout for the hero, then extend further on it. Full-width CTA buttons I have discussed earlier too for left-aligned sections. This I agree on that a center-aligned hero section would support full-width buttons better Github website is an example, but they also have it because one field requires an email for which it's full width and the button below it is full width to match the field width for uniformity.

Also, something I noticed is when this section is center aligned, the animating text breaks the layout every transition (Try it, you will see), it's just noisy seeing that "A" move around 😣.

[qier222]

Looks good on my phone🤔

[1502shivam-singh]

Also, how about making this part align from two sides?

@juzhiyuan did you mean this -

Justify alignment can mess up things sometimes. 😅
To be honest we are solving an interesting design problem, which is to make a section look good with a minimal number of extra elements added, just typography.

[1502shivam-singh]

Looks good on my phone🤔

I don't have any issue with keeping the buttons, not full width. It's just that we have to decide on one thing and follow it, not deviate from it. You designed the website previously and I was just respecting your judgment 😅. If all agree, and this is final then I am fine with it completely 😄.

[qier222]

[1502shivam-singh]

Also, sometimes we should not just focus only on making the stuff "look good". Don't get me wrong, beautiful UI is Paramount, but I feel we should hit the middle ground between top-class UI and top-class UX.

The reason I gave for not to put full-width buttons is a UX focussed decision, mistouch is possible on full-width buttons, (Especially when you have a phone with a bad touch screen, as my brother's phone 😒, and you just don't change it for some weird reason and you code too. This leads to a bad UX for that person) and more chances when you have 2 of them.

We should try to avoid these issues, especially when they feel minimal. This is one reason why we don't see full-width buttons more often, if used they have some special reason for usage.

Also, the fact that we have to focus on button widths to make our hero section look good, is an indicator that our hero section lacks a focal point.

[qier222]

Also, sometimes we should not just focus only on making the stuff "look good". Don't get me wrong, beautiful UI is Paramount, but I feel we should hit the middle ground between top-class UI and top-class UX.

The reason I gave for not to put full-width buttons is a UX focussed decision, mistouch is possible on full-width buttons, (Especially when you have a phone with a bad touch screen, as my brother's phone 😒, and you just don't change it for some weird reason and you code too. This leads to a bad UX for that person) and more chances when you have 2 of them.

We should try to avoid these issues, especially when they feel minimal. This is one reason why we don't see full-width buttons more often, if used they have some special reason for usage.

Also, the fact that we have to focus on button widths to make our hero section look good, is an indicator that our hero section lacks a focal point.

I get your point, but I don't think use full-width buttons will have a large impact on UX. Your example is your brother's phone has a bad touch screen, it does not make much sense to me, is the phone make the UX worst, not the application.

Email app has an email list, and every list item is clickable. If a phone with a bad screen can cause mistouch the full-width buttons on a website, then it definitely can cause mistouch on an email list or any clickable list, does it mean we should stop using clickable list?

[1502shivam-singh]

No no no, you are getting my point wrong here, I am not saying it that we should stop using clickable lists or surface that can click and we have to scroll over them. I am saying that if we can solve the problem for that particular person easily without much loss (phone has bad touch) then why not do it? The email list example is actually a problem for that user, but we can't do much about it as its designed already, and also this doesn't mean the app has bad UX.

There is a simple solution for the above problem, give user space with non-clickable elements, and this solution doesn't really hurt the structure of the hero section.

Sure, users can have the worst phones, with the worst problems and we will surely not be able to solve all of them. "But if we can solve the problems that are visible to us then why not solve them?" This is my point

[1502shivam-singh]

Also, if I am right you have issue that the button is left aligned but the text is centered.

How about this (initially I was trying not to change too much of the original design as he/she must have had their thoughts behind it, but now I feel you are fine with it. So here we go😄 )

I removed the Apisix title, as it looked repeated (written in navbar too), Increased the font size for highest focus, and changed its color to match the color scheme.
Made the text wrap, as the sub head copywriting is too long, reader might lose his eye position in the middle.
Also made the buttons a little thinner, for best results
On mobile -

Sorry for the slow response.

I designed this page, I was planning to make the logo on the navbar hidden when the logo in the hero section is visible, but I haven't done this. I think you can remove the logo in the hero section now.

The "View on GitHub" and "Downloads" buttons are center-aligned inside and left-aligned outside, looks weird to me, I still think make these buttons full-screen wide is a better option. Maybe we can center align the slogan on mobile devices?

then I have a solution that can serve both of ours's needs.
Which is to Center align the buttons with some more top margin. Then your issue is solved and I have my white space too.
You like this @qier222 😁

[1502shivam-singh]

Extra top margin to separate the left aligned slogan and subtitle with the centered buttons. Keeping them distant will make the hero section look better, as then alignment-flow wouldn't be a problem (both sections are separate now).

[qier222]

In my opinion, use full-width buttons in this hero section will improve 20% of UI, not use full-width buttons will improve 3% of UX, I won't trade 20% UI improvement for 3% UX improvement.

[1502shivam-singh]

In m- y opinion, use full-width buttons in this hero section will improve 20% of UI, not use full-width buttons will improve 3% of UX, I won't trade 20% UI improvement for 3% UX improvement.

Those numbers are actually pretty ambiguous and biased towards your case. For some user they can be reversed too.

@qier222 By the way did you try my centered button solution above with some top margin. As I said, it solves of both ours's problems.

Still if you insist, so much I don't really have much of objection with full-width CTA, it's your call.

[juzhiyuan]

Let's hear from more contributors :) cc @imjoey @liuxiran @membphis @Yiyiyimu