Ticket Counter App

Great work, I have a few tips on how to improve the page.

The color scheme needs to be reworked. The background orange color is too bright and the black text with a white shadow is not user friendly.

Fix this by making the counter container have a background of white, add a box-shadow: 2px 2px 5px black, then add a less bright background behind it.

The main control buttons could use some hover and click animations. The button colors themselves are too bright especially with white text. On smaller screens the buttons should be farther apart to prevent the user from accidentally hitting the clear button.

Remove the offset white shadow behind the text elements.

Make the incrementText font much bigger, as it should be the main attraction to the page.

Ok thanks, I made almost all the changes except the background container.

I forgot that codepen doesn’t show the image I picked. Here is the completed : https://competent-lumiere-715888.netlify.app/

I really like this cartoony train image and would like to keep it, what else can I do to keep this background while still making it user friendly?

The idea of a background is good, but it can be improved.

By putting the cartoon image inside the counter container, all the attention is drawn both on the counter and on the background image. The red background does not get any attention besides just being somewhat bright to the user trying to focus on the main container.

I would suggest spreading out the attention of the webpage by replacing the red background with the cartoon background image.

background-size: cover;
background-attachment: fixed; 
background-repeat: no-repeat

This code will ensure the image gets formatted correctly behind the image. One issue you might notice is that the image will be stretched. As a result, you should look into 4k wallpapers (link). I would download the image you like, upload it to imgur, right click on the image on imgur, open in new tab, and then use that image link.

For the ticket container, you can either have a white background or use a transparent background. For example, I my product landing page (link) I used a blurred transparent background to separate text and a background image. Keep in mind the webpage is still a work in progress and not responsive.

This was done with:

backdrop-filter: blur(3px);

on the text container with a box shadow →

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.