Skip to content

Enhance get tickets button design#362

Merged
inesoaresilva merged 1 commit intomasterfrom
enhance-get-tickets-button-design
Sep 8, 2022
Merged

Enhance get tickets button design#362
inesoaresilva merged 1 commit intomasterfrom
enhance-get-tickets-button-design

Conversation

@inesoaresilva
Copy link
Copy Markdown
Collaborator

It closes #324
I increased the padding-bottom of the hero image, so that the text stays more on top of the Eiffel Tower.
I also added a shadow behind the button so it stands out more.

@inesoaresilva inesoaresilva self-assigned this Sep 7, 2022
Copy link
Copy Markdown
Collaborator

@oscard0m oscard0m left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍🏽 to increasing the size of the button
👍🏽 adding a shadow to give more importance to the button

I still see some opportunities to improve the importance of this button a little bit:

Improve the contrast ratio

The contrast ratio can reach better numbers. I found an interesting website where we can play with the colours of the background and the button to achieve a better contrast score:
https://buttonbuddy.dev/#generator

The values I introduced:

--surface: #8a83c7;
--background: #2a3b90;
--color: #f9ead4;

image

Social Buttons still are bigger

When checking the page, the Social Buttons still are bigger. Some ideas we can experiment with are:

  • 💁🏽💡 Increase the font-size for the GET YOUR TICKET button
  • 💁🏽💡 Increase the area (padding) for the GET YOUR TICKET button
  • 💁🏽💡 Decrease the area (padding) for the Twitter and Mailing List buttons.
  • 💁🏽💡 Make the icons appear in the same line with the text to make the button smaller.

@oscard0m
Copy link
Copy Markdown
Collaborator

oscard0m commented Sep 8, 2022

Actually, we can merge what you did and we (I can do it) can do another iteration in a different PR.

@inesoaresilva
Copy link
Copy Markdown
Collaborator Author

Actually, we can merge what you did and we (I can do it) can do another iteration in a different PR.

Seems good to me, I will merge it and I can take a look again on this tomorrow

@inesoaresilva inesoaresilva merged commit 9bdaaed into master Sep 8, 2022
@inesoaresilva inesoaresilva deleted the enhance-get-tickets-button-design branch September 8, 2022 10:23
@balinterdi
Copy link
Copy Markdown
Collaborator

Thank you, that's an improvement, the box shadow really lifts it out. It still blends in with the Eiffel Tower behind it – if could dim the background somehow, I think that would solve it but there might be other ways to achieve the same.

@oscard0m
Copy link
Copy Markdown
Collaborator

oscard0m commented Sep 8, 2022

Thank you, that's an improvement, the box shadow really lifts it out. It still blends in with the Eiffel Tower behind it – if could dim the background somehow, I think that would solve it but there might be other ways to achieve the same.

I created a new issue where we can keep iterating the button: #363

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Increase contrast of "buy tickets" button to background and de-emphasize social media buttons

3 participants