I made a website recently, and I'm reallising that it looks a little odd. I've only been coding for about 6 months, so I'm not great at styling. Here's a screenshot.
And here's a link if you want to try the other pages.
https://script-robot.tiiny.co
I feel like it looks really weird compared to other sites. Any ideas to help it look better?
Top comments (24)
Hello @michaelstamps , I'm fairly new to web dev too. It took me a while to get ahold of design. Looking at your web page, I would say one big thing is, no borders. They're not in style, so to speak. Also, rounded borders are in style, instead of sharp, right angle borders. Transparency, used in the right places can ad class to a web page. Also, I would style the color of you links if I were you, and get rid of the underlines. You might get a few google fonts and change some of you pages fonts. Also, neutral colors are easy on the eyes, but I had to learn, daring to make a few of your elements a brighter color, that still fits, can really pay off.
If you want to discuss further, privately, and in more detail, here's my email: Ben_Leevey@proton.me.
I would also love, if you were willing, to stay in touch, and see if, as new devs, we could help one another out.
Oops! My email is Ben_leevey@proton.me.
Hmmm. That didn't work either. My email has an underscore in it, and the forum's text editor won't show it. I'll send it in a code snippet and see if that works:
Great! That worked. That's my email.
That advice helped a ton! My Tests look so much better.
Here's a screenshot of one.
image.png
I'm still working on it, but the round corners and thinner borders look a lot better.
wait, that image isn't right. let me try again.
Yes, that is looking better. And the box shadow is good to. Do you know how to use CSS variables?
I didn't know that CSS variables even existed
Here, you should contact me by my email. I think we could be of benefit to one another. Just as I know about CSS variables, I'm sure you know about things that I don't. After all, I've only been coding six months.
I prefer little framework like pico or miligram instead of Bootstrap, Tailwind etc.
If you're annoying like for me for UI ^^
I make design on Figma before code it, I did for my portfolio.
And the big subject is : dark mode or not ^^ ?
Just keep it simple, clean and smooth. Trust me, I am a UI designer. I always design something or the other. The best way to make something look class is maintaining transparency, no borders and simple colours. For reference check out my website
My website is Citeal
If you want any more help let me know. Comment in any of my posts
Looking at other sites suggested here can be a good starting point, but to truly understand how to create good looking sites takes an understanding of web/graphic design principles - there are several places you can check out, but I suggest Udemy. If you haven't heard of it, its an online education platform that you can purchase highly structured courses from. They almost always have sales going on, so you can pick up a course anywhere from $9.99 to $29.99 typically. If you see a course price that's in the hundreds, just wait a few weeks or a month - you'll see sale prices - usually between $10 and $16. A udemy account is free, and you have access to the courses for life. Another helpful thing is each course has a Question and Answer forum for every single lecture, so you can ask for help from the instructor or the teaching assistants. Course students also post comments, so you get lots of free help. This is a much quicker more focused way to learn than trying to watch random youtube vids. Courses range from 3 hrs of vids to over 40 hrs.
In addition to graphic design principles, you really DO NEED to understand basic CSS - this really isn't as intimidating as you might think -- and until you understand it, my suggestion is to avoid ALL frameworks
since most frameworks cause a lot of bloat and many give you pre-designed options that DON'T WORK for your specific design - you need to understand CSS to know how to make those frameworks bend to your will!
If you're looking for specific options on udemy, there ARE free options - do a search with the filter set to FREE. However, I can suggest a couple of the top most frequently purchased instructors.
For graphic design, you might try Lindsay Marsh
For general good web design/html/css, I strongly suggest John Smilga or Jonas Schmedtmann
Taking the time to truly learn this content will go a LONG WAY to understanding HOW to create good design - not just merely try to copy with variations the stuff you see online. Good luck and remember to HAVE FUN!!!💪💪
You can try using any css frameworks, like bootstrap or tailwind CSS,
For bigger and complex UI and styling,
I you want to create small website,
Then you may use lightweight css frameworks, like litestyle.CSS or any other frameworks.
You can read this post for more information on litestyle.css:
litestylecss-docs.netlify.app/docs...
This is a great start! I remember when I first started and my production looked alot like this. The biggest tips I was told was to learn Bootstrap. Bootstrap is a framework that makes things better in the Front-End. The moment I learned it, the nicer my UI's became. Take the time to learn more about it!
I'd recommend taking a UI/UX course to get an idea of what makes a good UI.
Then, I would suggest visiting dribbble.com and attempt to recreate one of the website designs showcased there. Alternatively, you can attempt to recreate one of your favorite websites that you like to visit. This is a great way to gain experience in building professional UI's.
In addition you can read articles from smashingmagazine.com/ which contain a lot of great information on UX/UI design.
Idk why people are saying things like borders are bad that is not good advice at all and borders can be extremely useful.
Don’t focus on what is “in” at the moment focus on good design principles. An awesome resource for this is refactoringui.com by the guys behind TailwindCSS
That will teach you a lot but here are some key takeaways to get you started. Don’t use too many font sizes, it looks messy I can tell your website only needs 3.
Don’t be scared of space increase the margin and paddings between elements to more than what you think is necessary always start with more and reduce it as necessary, it will lead to less clutter.
Use a colour palette like the ones from Radix UI, that will ensure proper colour contrast for legibility for your text and backgrounds and they use a system of different colours for different purposes. Check it out it will help a lot.
Hello, @michaelstamps I am mince and I thought it would be cool to remake your website so I made it, Here try my version of your upgraded website: SCRIPT ROBOT STUDIOS
I REDESIGNED A WEBSITE FOR MICHEAL ( SCRIPT ROBOT STUDIOS )
Mince ・ Apr 21
Hope you liked it micheal😊
Follow me 😉
In other to make better designs, you need to look up websites that have nice designs like the one's recommended in the comments, they will help you build your eye for how websites are designed. Another resource that could really help is dribbble.com
Here's a good basic resource that I always recommend to those looking to build up their aesthetic sense: scrimba.com/learn/design
If you need some examples on how professional pages look today, here is a great ressource that provides a well sorted list of examples:
nicepage.com/website-design
There is also some background on the concepts behind modern pages.
Siteinspire.com for inspiration
Try a CSS framework like Bootstrap which is beginner friendly. Also you can try drag and drop solution like bootstrapstudio.io/