Kevin Powell - Community•4mo ago

I am not happy with the visual appeal of this UI design.

Can you suggest any changes that I can make. So it look more cool

13 Replies

KRITIX•4mo ago

mobile version looks grate but i am not happy with desktop version.

vince•4mo ago

Quickest improvement would be to center (vertically) the text

Shane•4mo ago

set a max width for the navbar

Aoi•4mo ago

Some minor improvements 1. Text is really long. Try breaking it into more lines. eg: break it from the comma in the tagline. 2. The contrast between text and background is a bit low. Maybe add a dark gradient to the image. Or blur the background a bit. 3. The purple text doesn't really match the background. Good logo

KRITIX•4mo ago

<div className="home-container"> <h1>You got the travel plans, we got the travel vans.</h1> <p> Add adventure to your life by joining the #vanlife movement. Rent the perfect van to make your perfect road trip. </p> <Link className="link-button" to="vans"> Find your van </Link> </div> this is the Home page React code

.home-container{
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.46), rgba(0, 0, 0, 0.46)), url("../assets/homepagebackground.png") no-repeat center center;
    height: calc(100vh - 180px);
    background-size: cover;
    background-repeat: no-repeat;
    color: white;
    padding: 45px 23px;
}


.home-container  h1 {
    font-weight: 700;
    font-size: 2.25rem;
    line-height: 42px;
    margin: 20px 0;
}

.home-container  p {
    line-height: 24px;
    font-weight: 500;

}

.home-container   a {
    background-color: #FF8C38;
    width: 100%;
}



@media (min-width: 800px) {
    
    .home-container{
        text-align: center;
        min-width: none;
    }
    
    .home-container a
    {
        width: 494.33px;

    }
}

.home-container{
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.46), rgba(0, 0, 0, 0.46)), url("../assets/homepagebackground.png") no-repeat center center;
    height: calc(100vh - 180px);
    background-size: cover;
    background-repeat: no-repeat;
    color: white;
    padding: 45px 23px;
}


.home-container  h1 {
    font-weight: 700;
    font-size: 2.25rem;
    line-height: 42px;
    margin: 20px 0;
}

.home-container  p {
    line-height: 24px;
    font-weight: 500;

}

.home-container   a {
    background-color: #FF8C38;
    width: 100%;
}



@media (min-width: 800px) {
    
    .home-container{
        text-align: center;
        min-width: none;
    }
    
    .home-container a
    {
        width: 494.33px;

    }
}

css for the Home page display: flex; flex-direction: column; justify-content: center; align-items: center; is there any other way to center that without using display flex

KRITIX•4mo ago

Now it looks lot better than eariler version

KRITIX•4mo ago

why we have to set max-width for navabar

Shane•4mo ago

bc it will look bad on extra wide screens, and also visually it looks bad in the current view you have. Also standard practice in web design afaik

KRITIX•4mo ago

I'll fix this contrast between text and background. but I am not getting what you mean by breaking text to the next line

Shane•4mo ago

set a max width for the text container as well

KRITIX•4mo ago

ohh extra wide I forgot about it. thanks I will set the maximum width for all containers.

Aoi•4mo ago

You got the travel plans,
 We got the travel vans

You got the travel plans,
 We got the travel vans

Max width on text container will take care of it as recommended by shane

KRITIX•4mo ago

okey got it thanks 💜

Gaming

Programming

I am not happy with the visual appeal of this UI design.