Is my site layout saveable?
Two years ago I made a custom layout for my website. At a small scale it worked perfectly (only one page) but now the site is hard to navigate, the layout looks esoteric and there are too much elements (see the projects). I tried fixing it with making the background less bright and vibrant but I find that the site is still unpleasant to navigate. My question is: Should I make a complete style rework or can I fix the current style to make it more accessible?
Here is the site: https://afghangoat.hu
Any feedback is appreciated!
Afghan Goat Development
Click here to see projects I worked on!
39 Replies
IMO it's saveable
but you can still work on improving it with the design trends going on these days
IMO it (aethetically) calls for an overhaul. 😄 Tho it really depends on your customers, what they expect and are okay with.
Currently, the only purpose of the site is to host some of my projects.
Sure. But for whatb purpose? For you only (as a storage)? Fine. To attract prospective customers? Showcase your skills? Then consider the viewer. But do not get me wrong, I know of quite ugly eshops that perform surprisingly well, too.
The site hosts some of my THREE js projects, which (in theory) showcases my skills. My main problem is with the bloat. I am afraid that the site is not user friendly enough. For example, a viewer might not notice the buttons because the buttons don't look like too "buttonish". I need to simplify the website design somehow as this is just pure bloat.
I consider making a more lighter site, maybe in a neo-brutalist style. I still want to make the site somewhat unique but I also want to make it more digestable.
My point exactly - it is grosly over the top, personally I would not be engaged in seeking what it is about (an how you could benefit me). Just make it more subtle, focus on your skills and value you offer and be a happy campet. Just my two cents.
You are right. I will make it not so bloated. Thank you.
I agree, and to put it from another perspective: the fact that you are asking about this means that you are not entirely happy with the site itself, which already answers your own question. If anything, starting over can help to practice so it's not a bad thing nor a waste of time regardless.
It actually reminds me of those flaming gifs of the 90s. 😄
Yes, it somewhat looks like a site from the early internet ages.
Perhaps you may build on that minecraft-ish pixelated graphics as in the "bug" thing. That I would find interesting.
Thanks for the idea! I will try some designs and this time try to make them not too bloated.
One piece of advice... if you are trying to showcase your skills you probably want to avoid saying things like this:
Chatgpt helped me a lot because some of the tactics I used before was quite hacky.
Huh, I don't even know, why did I put that there.
Not that I'm encouraging you to lie about it (you should be able to make it happen on your own) but at least don't make it obvious to potential employers.
Heh, I would love to bless you with sime more insights ... but I just do not have the guts to read and click those things. 😄
Normally I don't use chatgpt as it does not generate scalable code but I got so mad in getting the data from the supplied url.
I just wanted to get it done.
For UI/UX feedback for your new design you can create a new post in #showcase
Thank you. I didn't notice there is a separate discussion for that.
But I mostly agree that it should be simpler to read. Doesn't need to be bare bones but the 3 animations at once is too much. I think that I little spacing between the projects and a smaller font size might already come a long way.
Yeah no problem this here was more of a general question so it's fine but if you have doubts about specifics or want overall feedback, I think that's the better place to ask.
Ok. Thank you for the suggestions. I will be back with a hopefully better site design.
Or... to pay homage to Gunnery sergeant Hartman, it is so ugly it could be a modern art masterpiece. o)
I am in good mood, obviously. 😄
Well, that is surely an option.
My bad, it's actually in #showcase.
yo you have the most interesting projects ever man
I think the page is quite readable
Thank you but I've seen sites 1000x more creative than mine. I want to improve something.
Your site looks way cooler and the readability is also better.
I have some advice:
- the fonts: change it to something easy to read, professional, sans-serif. I always recommend "Inter". you can keep the font of the heading if you like it. the text on your project description is too big, try 14-16px. google "typescale generator" it should get you a collection of font size to use
- colors: do not use pure black and white, it cause eye strain. use a color palette generator: https://www.hover.dev/css-color-palette-generator, pick yourself a brand color and make it the primary in the generator
- start using icons, it helps people navigate other pages easier
- spacing: you need to create more space between each sections so that people can scan your website. example: create a empty space between your introduction and your projects (try 80px or more, something multiply by 8 is usually good)
- if you want something really crazy, like animation and stuff, start learning gsap and follow codegrid on youtube
- you can add a contact section at the end, link to your social media, email and stuff too
- try having a hero section at the top (with images of you or illustration), introduce yourself, what you do
- you can have a section that list your skills and your technology
- add more padding to your project card
-
text-align:left on everythingThank you! Noted.
you're using too many white border, it can distract people, try only using it for buttons, remove the rest
can I use a border which is not white? A gray for example?
sure, that's a good idea
this half width thing is really bad for responsive lol, remove it
replace your flexes with my grid
you should be able to achieve any grid layout simply by adjusting the
--min up and downWhat you really need is visual hierarchy and whitespace. And I would kill the black background - it greatly limits use of additional colors (blue or green on black are just nonsense).
What do you recommend for the background? An image or a single color?
In terms of visual hierarchy, on homepge you may want to dedicate each of those project an individual section, distinguished by a different light color (ar lightweight gradient), which can then play role in that project`s dedicated page. Or you can ho all in with white + good contrast ncolor (green?), but that would require some graphics (minecraft-ish, maybe).
...you can have white on nlack in th about-me (skills, yada yada) page, maybe.
Okay, thank you for the suggestion.
You guys helped me a lot, thank you all.
I can even imgine it as a one-pager where for each of the aforementioned sections there would be a toggle to show more details. But it depends, sinhglepagers have both advantages and disadvantages.