Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

GTHell's avatar

What are some killer tips for designing a website?

I design a website for company and it's look like a scam website. I'm focusing on backend and that left all the front-end full of mess. Is there any general tips about the design? One thing I just learnt recently is that keep thing simple and make thing consistent.

0 likes
12 replies
bobbybouwmann's avatar

Well keeping things simple is easy when using a framework like Bootstrap. They have a consistent style and it's very easy to create bigger layouts.

You can also find a lot of free bootstrap themes that are fully designed with lots of features online which you can use for your project.

2 likes
AshboDev's avatar

As @bobbybouwmann said, start off with a framework such as Bootstrap. To make things a lot easier and nicer in the long run, instead of using compiled assets, compile them yourself and learn SASS. It'll make things much easier :) There are other frameworks, which can do the same plus more, but start with Bootstrap to get the idea how frameworks are built, and how to use them.

The next step is to look into the flow of users around your site(s). It all adds up to make a well designed, well thought out site. Consider who will be using the site, and how they'll use it. For instance a car dealer site would differ in user flow to a corporate site.

Look at adding in third party libraries to enhance the design. A lot of frameworks will have most things (Like modals, tooltips etc) but when needing more complex things like graphs then a third party jQuery library will be helpful.

Work smarter not harder - by this I mean use DRY code. Again, most frameworks will have your back here, but basically, you have one class with common CSS (Such as a class of mt-3, to add margin-top: 3em;) and use it on multiple elements.

Minification is a must too. A design is just part of the user's experience on the site. Minifying files helps reduce load times, and with the help of plugins from task runners you can even remove unused CSS you may not have noticed is there. Also great when using a framework!

Learn about typography! This is a very important step. The right fonts, font weights and colours help set the tone for the site. A corporate site would have a different set of fonts and what not than a kids play house or something.

As you've already mentioned, think simple. You don't need to go over the top with animations, effects, big bold headings etc, just something easy on the eyes, and well laid out.

Content is another key thing. Don't mislead people, and don't make things sound like a scam. Spelling mistakes can put people off, as can bad grammar.

If you leave a link to the site (I know sometimes you can't) we can give you more specific guidance for the project you're working on to make it look less scammy :)

GL with the project :)

1 like
GTHell's avatar

I was started with Materialize and now every css is written by hand. I was hand over this project from other people too who start it at 1% and using materialize and I didn't care because it's also has grid system. It find it hard to DRY css code.

Here's the website that I'm working on: https://aoecoin.io/

1 like
biishmar's avatar

Bootstrap and Foundation gives a nice layout for good start, you need to read a lot about animation, transition and transform function to do a complex designs and dynamic design...

1 like
Web Confection's avatar

Dear god, you weren't exaggerating. That is one bl**dy awful website.

1 like
AshboDev's avatar
AshboDev
Best Answer
Level 7

@CJJ Wow. Err, yeah lol

@GTHell I'll be honest, it needs a lot of work to make it look more legit.

Have a look at this: https://wrapbootstrap.com/theme/spacial-responsive-bootstrap-4-theme-WB0P249P1

While it costs $16 (Which is not a lot really) you can then customise that to your needs and understand how it works.

If you wanted to work on this in its current form, then try the following:

  • Lose the background image and set your bg colour to #f9f9f9, text colour #333
  • Put the content in containers so they sit central, and a fixed width (around 1400px max width)
  • Get rid of the text shadow
  • Only have the headings bold
  • Tidy up the dropdowns
  • Shorten the homepage

Have a look on YouTube too. For a crypto currency site, I'd look at keeping it clean and minimal. Look at stripe.com for some inspiration.

Without taking the time to learn some design practices, you won't get anywhere. Also think about going to teamtreehouse.com - it's like Laracasts for frontend dev so you can learn about typography, layout, colours etc. They have a free trial too so use that and get what you can out of it, and if you still need help, stick with it. You'll get there in the end :)

1 like
Web Confection's avatar

@GTHell Apologies for my initial response, not constructive or helpful. You are right, looks like a scam website. I would abandon the design and start fresh using a template as suggested by @AshboDev. We have all been there, it's a learning curve. It also appears to be one in a suite of sister websites with similar styling.

If you are going to refactor the current design I would also remove the majority of images.

1 like
GTHell's avatar

Thank for the feedback. I'll try to improve it. Note that I can't use the original container class that come with it because the boss said that it left a lot of space and he said the the font is too small. I think I should file a complain and if he disagree with this then I will abandon the project.

1 like

Please or to participate in this conversation.