I am creating a website for a client. Does it look bad? How can it be improved?

How can I improve the aesthetics to make it more visually appealing and modern?

I am not the best designer.

Just a constructive criticism: Your webpage has a lot of images which is more or less covering 70 percent of estates. I would look for opportunities to improve on CSS styles like rounding the edges of images. (Be creative here, for instance, you can use CSS for making your image borders of Ice cream shape. That’s just one from the top of my head.

1 Like

i like ur design.

one thing i notice is that all images are ‘topped’ / it seems like the top is sliced off.

1 Like

Would you say it is professional? It is pure CSS.

to be honest, no, i would say its not. you can do better. but, in the end…it all depends, if people want icecream and its the only shop around, its good enough to know “that the icecreambar is there”. people google, find icecreambar, go there, buy ice. job done.

also: that girl-image, really…just pull it down. now we see a lot of red-plate, and no head-top. its weird

I think the design is okay for mobile devices. There could be some padding between the images, and some kind of navigation would be normal to include. The two sections for the map and address are a bit big. I think contact info and maps woud logically appear at the bottom of the page. However, I’d be more concerned about how the page is going to rank in search results. Where is the copy for the search engines to crawl?

1 Like

@leebut
In all honesty, does the design (colors, fonts, etc) look professional? Does the contrast make sense? Overall, does it seem professional (excluding the things you mentioned) or should I completely redo it?

Just think, this is something I am releasing to the public for a popular business in a city.

Hi Hjb1694
My thoughts:

I would go for the good old: Less is more. As in a less images on the opening page. Just a statement on the front saying what you are looking at. Then links to pages containing the icecreammenu, with small pics to top of the description of each icecream.

Check out other websites with similar content for inspiration like: https://www.giovannil.com/de/
(Its in German but just click about a little).

Hope you can use this input.

Good luck and congrats on landing a client :slight_smile:

Use popular fonts from Google fonts- but no more than 1-3 tops- you have like 4 or more here. Use a lighter color for the ‘hero text’ where it says Sno Cream’- that could be nice in pale blue maybe or even white so it looks like negative space. I was a graphic designer before becoming interested in coding hence all the aesthetics comments! Good luck!

2 Likes

Instead of asking lots of people with varying degrees of skill, try searching for what current professional design trends are.
https://www.qwant.com/?q=professional+web+design or https://www.qwant.com/?q=web+design+2019

We can make a few assessments from a couple screenshots, but if you really want it reviewed, host your site somewhere and post a link to it.

1 Like

If you can, get a designer to design the site for you, then you build it. That’s the optimal solution.

If you can’t do that, find a good looking website that sells ice cream. Don’t copy, but borrow good ideas that website does. How is it organized? Where is the map? Does it have an About section? How are they using their images? What about the menu? Etc. I would spend a LOT of time on how the site is organized before even getting to building anything. Get feedback on organization before building.

For the design, there are a lot of design choices out there. First, do they have brand colors and styles? If so, you should use those not your own. Is that blue “Sno Cone” label theirs or yours? Find websites that help you find colors that go together, but make sure you use their brand colors as much as possible. Black and White are also colors and are perfectly fine to use.

You’ve got a lot of fonts that don’t complement each other. Some are display fonts, some are sans-serif, some are serif. There are websites that can help you choose complementary fonts.

Also your site has no global navigation or logo.

My overall advice to you is: less is more. I recommend finding a CSS theme and start from that, then modify the base styles to incorporate the brand identity.

I’ll be honest because that’s what you’re looking for, to improve it.

The purple background and the top image make me throw up.

The google maps and the card beside look good. The images below are pretty good, only thing is it’s a LOT of images.

If I want something to look very professional, I go to fiverr.com and hire an actual artist.

Another thing to do is show the client what you have so far and ask for honest critique and recommendations. They like that.

Good luck.

In the future, try to just take a screenshot in-browser of the entire page (Firefox has this built in). That way, we can see your work without the bars in the middle.

Aside from that, it’s ok for a basic websites. I definitely would expect some content at the top, talking about who they are, what they do, etc. There are a few too many fonts on the page and I would probably place the map on the right, not the left.

My advice would be to find similar pages and see how they have approached the design part. This might give you some ideas for improvements.

Since you’re not a designer and this is for a professional client, I’d suggest the following:

  1. Install adobexd (its free)
  2. Install Zeplin (free for 1 project)
  3. Download free restaurant sketch landing page templates like this or this one. But any other free sketch template you like is valid as well.
  4. Using adobexd, modify it to fit the brand as you feel best works.
  5. Mark the components you want individual access to in zeplin. Instructions here
  6. Export to zeplin
  7. Code it up.

This will get you to deliver a contemporary, decently designed site. If you prefer to purchase better templates, look at places like themeforest. The standard license is all you need since it’s for 1 client. You can even add that to their bill if you want.

It may seem like a lot of extra work, but all you really need to do is google how to make any edits in adobexd that you want, and follow the steps I laid out. This process took me about 6 hours the first time I did it. Now it’s second nature.

Why do i recommend this? Someone is paying you money to deliver a product, not to practice. It’s better to focus on satisfying them since freelancing requires good word of mouth.

2 Likes

I’d suggest to remove the header image, I personally find it to dark. Maybe use a lighter one such as the one with the strawberries.
Also, I would not put a google map picture in the center of the page. Maybe this is where you could have the company’s name instead. Or the picture with the “ice cream girl”.

@ManBearPigg

http://hbtest1019.000webhostapp.com/

Does this look better?

http://hbtest1019.000webhostapp.com/

Does this look better?

@JM-Mendez

It’s definitely alot cleaner, light, and playful. You didn’t post the job specifications, so I can only comment on the professionalism of the design, and I personally think it looks nicer with more personality.

One minor nitpick, are you using a design grid system? Not css grid, but a measurement system? Because it looks like you have varying spacing. I’m on mobile so can’t check devtools to verify at the moment.

In case you don’t know what one is, a commonly used system is the 8pt grid. All that means is that all your measurements should be a product of 8. So 8, 16, 32, etc. Having consistent padding and spacing really adds to the cohesiveness of the layout.

But overall it feels like a move in the right direction. And might be ready for a round of client adjustments.

If you’re looking for more to focus on, I’d say continue telling the brand story experience as you scroll down.

Just like how you moved the headline “Come see us for a unique experience” to its own section, giving it more focus. And the way you’re tilting the text makes me feel I learn more about this being a light, playful shop the further I go down.

I think you could have a link to the map open up in a new tab or on a second page. Perhaps try adding some text and create some white space.