Need help with site design and color combinations

is anyone here good with colour combinations and good design.
I have a website I am building but it’s not having this wow effect.
It’s not as beautiful as it should be.
could you guys help me make this site look more beautiful?
I am making this for a friend and he says it’s looking too plain.
turns out I am not that good with the design part and the color combinations.
here’s the snapshot of the site -


please help out.

Disclaimer: I have no training in design. Below are just things that I personally find helpful in the process of working on my own projects, and also some general comments on how I would feel as a customer on your design:

  • The colour combination looks bland because they look like something that you would from 1970 prints—particularlly the main background colour, title colour (that dried blood red) and the brownish border of the top picture. I think it’s also partly because of the colours in the picture (but I can’t say for sure). These may help (in no particular order and/or combinations):
    • A bottom-up approach is to remove all colours except for those for the footer and header to begin with—only add another colour when it brings out contrast and meaning.
    • Use a colour palette developed by someone—there are many of these sites out there and I’m not sure which is better or worse (Google!). Although I think you should start with an idea first—does the company have a colour scheme already (I hope it’s not those already in the mockup) or something that you can build upon? What is the business about? If it’s an environment-focused business perhaps you could choose a green colour scheme, for example
    • This Medium article by Jonathan White may help, even if it’s for future reference.
  • Comic Sans is not a great idea—I feel that it’s childish font to use in most cases, particular for a business that doesn’t sell services and products that target children. Try this Medium article by Jonathan White.
  • I don’t like some of the photos and I can’t exactly say why. If I were to put my finger on one thing it would be that they are too different. Not in terms of what they are, but more that they are all taken under different settings and conditions and the colours just seem to be screaming at each other.
  • Let’s be honest, it ultimately depends on your friend/client/boss—and they are almost always fickle and don’t know what they want. In fact, usually they will keep telling you to try this and that, and when you show them they will tell you to change this and that or go back to what it was 10 revisions ago. Don’t fall into that trap.

Without being able to play around with it, here are some suggestions for a potentially quick fix:

  • Use one font, say, Helvetica to begin with.
  • Get rid of the brown/yellow/dried-blood-red-ish colours in the main area—try using mostly neutral colours around pictures first.
  • You may need to adjust the black and white slightly to find the right “contrast”. “Contrast” is a bit of a hand-wavey word here and intended to be remotely technical at best, but… you know what I mean! d:
  • Line your elements up properly, such as the social media icons at the bottom and the image captions—align them to the middle vertically and perhaps move them more to the right of the page. You could also try different positions for them; for example, if space allows, try putting the icons below or above the category anchors.
  • Are there other photos you could use? If not try using stock images of objects and builds to mock it up first and see if they feel any differently.

I hope that’s at least somewhat helpful before you get a designer who is able to help. Good luck. :slight_smile:

2 Likes

thanks for the ideas.
at the moment, the idea is to make it look similar to this site


but somehow I am unable to do that because I dont have the same kind of pictures and they have used a picture as the background.
the pictures they are using are all looking good on their own
while my pictures are just taken from their catalog.

anyways, I dont want to make excuses, there could be a design guy who could be making this site look wow, with their ideas, but I know I am not that person.

so, if any of you have some ideas, please help me out.

https://color.adobe.com/create/color-wheel/ is a life saver q:

1 Like

https://dribbble.com/colors/FFE5B5 lets you search by color. There are some web design stuff so it can be useful.

I used these two websites to create my UI for a mobile game I am making.

Google created a site that helps a lot with this: Material Design. There’s lots of design info and a tool to help you pick the colors for your apps and sites. It also suggests which color fonts work best with the them you’ve picked. The direct link to the color tool is: Color Tool - Material Design.

Hope this helps.

Well, I have seen the adobe wheel and the material pallette although I didnt know about driblle, but I am not quite sure how to use these tools.
what do I do with these tools?
at the moment, the idea is to replicate biskfarm.com and I have tried to make it look like that.

but the problem is that biskfarm.com has quite good pictures which are complete by themselves and improve the look of the site, while my pictures are just the product images taken from the catalog and therefore dont help with the overall design of the site.

could you guys just give me some ideas about a few quick changes i could make to the site to make it look better? that will help a lot.
and yeah, I’d love it if you could explain a bit about how to use the sites like adobe color wheel, material pallettes as well as dribble. these will help in building sites in the future.

Hey there! I totally understand that you might be getting overwhelmed by design - I feel the same way a lot of the time. Just try to break the problem down into pieces like you would with coding! I’ll show you an example of what I mean…

One resource I’m starting to like is Patterntap. It’s basically a place where designers show screenshots of page layouts they’ve designed and it can be helpful in trying to figure out the placement of things. How I would use this for your page:

  1. Visit the link and, under the Type dropdown, select Services Page. You’re doing this because you want to see how designers have organized pages with a few different category options.
  2. Browse the results and try to get some ideas about what makes these look good.

You’ll see that a lot of these pages have a centered, bold header instead of a large image as the header. From that observation, I might choose to remove the images of the plastic baskets from the page you made and just keep the header text that says Categories.

Then, look at the text people use for their category names. Usually, it’s bold, large, or has a very distinct color that sticks out from the background page so that people know exactly what the logo/picture represents. One thing I learned from the book Don’t Make Me Think is that, in general, website users generally muddle around pages not reading much of anything, getting lost and frustrated along the way. You want to make it very easy for them to navigate the categories. (It’s a fantastic book BTW - really helps you take your site usability to the next level so pick it up if you can.)

I’d probably go for a white background on this page and see if I could find icons that fit with the categories, and to make the text really stick out. Try using the site Vecteezy to see if you can find some simple icons that fit with the categories.

For example, search ‘water’ to look for an icon set with something that could be used for the water storage solutions category. (The icons can be separated out and resized in Photoshop or Illustrator, give it a try!) You could use this set for the environmental and green solutions icon.

Those are just a couple of my thoughts. Let me know if you have any more questions.

Thanks @gcamacho79,
your reply really helped.
I was really getting overwhelmed, especially when the person doesnt like my design.
and to be fair it is bad.

I looked at patterntap and it does give me some ideas.
the vecteezy idea about using icons is quite good and I can see site will look better when i use icons instead of the images, which arent quite good in quality.

I have heard the name of the book Dont make me Think, but havent read it yet.
will try and get it from a library.

1 Like

You need to mockup your design on Photoshop (or similar photo editor/graphics program). It’s easier to make changes and experiment with layout/design/colors using Photoshop.

Then you can present that proposed design to client for approval.

Once approved, only then do you start coding that image layout/design into a working HTML/CSS code. That way, you’re not wasting time and work coding something that will be rejected by the client.

If you go straight ahead into coding HTML/CSS a design without following any roadmap/design guideline, then you end up with what you have… a website that looks like a programmer did it.

I’ve always thought it’s really hard to be both a designer and developer? I mean it’s doable, but this way you’ll likely never be a master of both. Of course in this case the OP is making a website for a friend, but I would assume that as a professional front end developer working in a company you won’t be asked to also handle the design part, no?

It really depends on the company. I think in a bigger company or design studio, there’ll be more delineation of duties (not my job). Some people will be only doing UI/UX, some graphic designs, some front-end coding, some backend, and another group for the hardware, security and maintenance.

In a smaller shop, there may be a few overlaps. If you’re freelancing, self-employed, or solo-business operation like mine, then you’ll be doing everything… pre-sales, closing, graphics design, video, front, backend, hardware, software, billing, etc. i.e. you’re also the CEO and janitor at the same time.

That is so true about the smaller shops having overlaps.
you are kinda doing everything on your own.
But as I was doing it, I really felt the need for a designer.
I mean, I do know the coding part of front end development,
I dont think I can be a designer anytime soon.

Yeah, give me a good design and I’ll be able to code it,
but I wont be able to do the design on my own.

I hope when I get a front end job, I am not expected to do the design work.

material design color codes

A cool plugin you could use for the background images is backstretch.js.

Alternatively you could give the div these CSS properties:

background: url("putYourUrlHere") center center no-repeat;
background-size: cover;

Edit: for the mock-up software I advise Adobe XD mostly because it is free