I'd appreciate some feedback about my website design

[foxclone]

I'd appreciate it if someone would provide some feedback about my website design. The site in question is https://foxclone.com.

[Strider64]

I don't like the yellow text and text directly on an image. I like the image of the foxes, but the I don't care for centered text (should be left-aligned in my opinion), plus heading should be higher with it not directly on the image. I'm assuming this website is just being constructed? If that is the case changes shouldn't be too hard to implement once you get enough feed back. I would also design for smartphones first and work you way out to larger screens with it comes to responsive design. Though I didn't see any grids and flex was limit in scope?

I would look at other websites to get better ideas for this website. That's what I try do for my own.

Edited April 2, 2022 by Strider64

[foxclone]

Thanks for the feedback. Most of our users are using laptops or desktops, that's why the site wasn't designed for smartphones. The site has been online for about a year, but I'm always looking for ways to improve it.

Thanks again for your response.

[kicken]

Your links on the upper right are easy to overlook on the home page, I didn't notice them for a bit.  I agree with the color not being ideal either for having them directly on the image.  I'm not sure any color would work.  I would suggest keeping the black bar like you have on the other pages.  It would make them more noticeable, easier to read, and the site more consistent.

The home page overflows the window content for me on 1920x180 due to your copyright footer.  This results in scrollbars which make the whole thing just look poor.  Make your footer overlay the image rather than show below it so the scroll bars do not appear.  I'd also suggest using a solid color background that spans the page width for the footer similar to the black header you have on the other pages.

You have some HTML errors on various pages.  I'd suggest running them all through the validator and fixing the problems found.

 

[foxclone]

@kicken - thanks for checking the website. I appreciate your suggestion regarding black bars for header & footer. All pages were put thru validator as they were created. It's possible that changes introduced errors, so I'll put them back through. 

Again, thanks for the suggestions and for taking the time to look at the website.

[gizmola]

The site just has a dated feel to it, that could use a good freshening.

The real sign of professional design starts with consistency and each of your pages has something that's a little bit different, which undermines the consistency.  

While I like the fox picture, I would make that more of a hero image or something at the top of the page, that then combines the other pages via scroll.  A visitor shouldn't have to investigate your menus in order to find out what the product actually is, or why you should care about it.

The buttons on the download page look like something you would find on an early 90's ebay page.  The first thing you should do is replace those with some decent markup, css and button code that has hover effects.  

 

[foxclone]

@gizmola - I've revised the front page. I'd appreciate some feedback before I continue revising the website. URL:http://test.foxclone.com

[gizmola]

This is moving in the right direction. 

Use a CSS reset.  If you're not sure about how to approach that, while it might be a bit of an overkill for your project, normalize.css has been adopted by major css framework projects like bootstrap, so it will accomplish what you want.  https://necolas.github.io/normalize.css/

In regards to your color palette, I think you need to either lean fully into the "warning sign" yellow on black of the menu and footer, or use something that goes with the light blue background of the panels. The colors do not go together at all.  

I'd suggest a color reboot.  There are a couple ways you can go.  First you can try out one of the numerous color palette generators to find a set of colors that are harmonious and utilize various color theory algorithms to generate the palette. One I like is Paletton:  https://paletton.com/  It shows you a color wheel where you can choose from monochromatic, adjacent, triad and other schemes, and with a click or 2 include or exclude things like "complementary colors".  

There are also sites like css drive where you can start with an image, and let their software analyze the image to extract a palette for you. Here's one example, but there are others that might be as good or better:  http://www.cssdrive.com/imagepalette/

I would also advocate making sure that you don't have odd alignment issues like you now do with the fox image.  That should fill the entire panel, or at least be in the middle of the panel.  There's really no reason not to have it fill the entire panel as you now have it.

There's also that weird vertical line between the panels, that should go away, along with other things.  If you make use of css variables, then you can recode your css so that it's easy to change the core colors you are using, which will allow you to try out a few different palettes quickly to see what ultimately looks the best to you.

 

[foxclone]

@gizmola - Major changes made to the index.php. See what you think at http://test.foxclone.com. That black line top and bottom looked terrible, so I softened the colors to be more in-line with the new palette. 

[gizmola]

Yes definite improvement.  Don't use any colors that aren't in your palette other than black or white, which are neutral and sometimes necessary for legibility and accessibility.  The ugly yellow color that seems to persist in the menus needs to go.  You have the option of making the top menu black with white or off-white lettering, or going with a color combo from your palette.  

 

I'd also suggest taking a look at fontawesome and trying to find some icons that you can use to accent your sections.   The mockup has examples that should give you some ideas.  You want to find an icon for each section that visually illustrates what the section text is saying.

 

I extracted a palette from your image and applied it to colormind.io, which has a nice prototype screen showing you different ways the palette could be assembled.  My advice would be to use some of the darker or lighter shades of the palette, and then use the green for your windows.  The mockup here should help you get a better idea of what you like.

The top is the color palette.  You then have a summary, that also works to show you what a light overall background color for your site would look like.  The next section is what a dark color background would look like.  I would suggest you start with that.  I also provided the "Dark on light" mockup.  I'd suggest trying the "main brand color"  #8c8f38 color for your menu and footer background.  

 

[foxclone]

@gizmola - Many thanks for your input.

[foxclone]

@gizmola - I uploaded the actual picture to colormind.io and they came up with a different palette. Which do you think is better, your's or the one derived from the actual photo? Here's what they selected for a palette:

[gizmola]

There is some variation in regards to the palette extraction.  I used the picture from your mockup.  There is very little difference between the one you have and the one I added.  The order of the colors is not important either.  If you like the mocks I posted, use the colors I posted, or use the ones you posted.  You're going to get similar results with either palette.  My inclination is that I would use the brown for the background, the muddy green for the menu and bottom bar, and the tan for panels.  With tan for panels, you can use the brown for your text inside the panels as in the mocks, and you can also the darker green for another panel type if you want variety.  

[TrishaG]

You need to work on the font colors and font styles.
For eg: on the top right corner due to the grey background I was not able to notice the other pages link were there.
Secondly, the style of the fonts can be better, as there are many font types available.
Overall the website is good!