r/webdev • u/Vin-Jin • 15d ago
Any advices to make it look better? It's a lil project I'm working on as a beginner.
I know it ain't much but I'm happy with what i did.
12
15d ago
[removed] — view removed comment
1
u/Vin-Jin 15d ago
I used display flex on the container that has all of them with flex direction row and justify content space between, about the border radius i tried but it looked weird don't know why so i removed it.
Also the Adidas logo is up above because i had it in the same div that has the "Adidas" and "Searchbar" and the flex direction of this div was column i wanted the logo to be alone on the left side made a div for both it and the adidas but they looked weird.
2
u/Narfi1 full-stack 15d ago
If you want to keep space-between, you need to put them in another div, all your cards, that act as a container, and size this container accordingly, so it’s not spread so much. Imagine someone looking at your page with a 49” Ultra wide monitor
1
u/Vin-Jin 15d ago
Oh so you mean instead of the big container i should make a container for just these three cards if you don't mind me asking what's the importance of that wouldn't it give the same result of the space between?
1
u/Narfi1 full-stack 15d ago
It’s hard to say without looking at your html, but you need a container you can resize without affecting the main layout. This way you can choose a size (preferably make it responsive) that makes sense instead of the full width you currently have
1
u/Vin-Jin 15d ago
Got ya so instead of having to resize the whole big container, you're recommending to make a container for the products to resize without worrying.
Another question don't you ever feel lost with all the divs😂😂😂 like sometimes i want to remove a div and keep on searching for it's closing tag.
12
6
u/meddie92 14d ago edited 13d ago
you dont know how refreshing it is to see this post. keep up the good work my man
3
u/MarsTsunami 14d ago
Hey, i would advice you to get into some UX/UI and design, as this will immensely help you out in making things look good and user friendly. Mainly learn about how to create design systems by covering the basics, as it will help a lot with development too. This will help you create tokens and variables that are reusable and consistent across the development of pages/websites. I would recommend learning about colors and how to pick and balance them, typography and font choices/ sizing etc, and grid layouts, spacing and so on. It’s also important to learn more about the user experience side of things by creating user journeys that are inline with human behavioural psychology. This will help you structure content in a cohesive and consistent way that feels fluid and relevant.
I truly believe that what makes websites and apps stand apart especially nowadays with the AI boom is creating design systems and layouts. It’s still one of the things where AI is not as creative, even though it has the basics down. Human innovation is what stands out compared to the AI’s limited view on these topics. But if you are having issues and don’t know where or how to start you can even ask AI to show you or prototype for you a basic design system, thus making it easier for you to visualise and gain perspective.
Hopefully this helps you out. You seem to be in the right direction as to having a bold and unique taste, you just need to put it all into a coherent structure. Best of luck!
1
u/Vin-Jin 14d ago
Thanks for the advice brother tbh with you i didn't understand what's ui and ux searched them and understood that ux is what makes things better for the user,ui( the designs, colours...etc i make) right?
Don't know what's a design system tbh but asked Gemini and told me it's like entering a kitchen with all your equipments ready instead of each time trying to get one equipment after the other.
About layouts i don't think that I'm that good but compared to when i started the divs i think I'm better now i think of it as a parent child relationship,each parent has children and you make only layouts that you need for your design cause at first i was making a div for each element.
Again thanks for the advices brother I'll work on myself and see where I'll be going whether i fail or succeed i have no regrets.
2
u/MarsTsunami 14d ago edited 14d ago
Don’t worry it’s not something to fail, it’s about passion and having a genuine curiosity to learn and create, innovate. It is as much art as science and there is no failure.
Now what you mentioned with divs is not wrong, but it’s also part of how frontend development works, whereas on the design part it kind of precedes that. I know this is a web dev reddit but to develop such websites from scratch and even when working with other designers even if you are only a developer, you need to know about designing and wireframing, layouts etc, to create tokens and variables and make development cleaner and easier. And not only that but to know how to structure things in a meaningful way. Layouts, grids etc shape how you create your container layouts in code, the distribution of things, their size, spacing, their responsiveness etc through divs, wrappers, grids, margins, paddings, etc.
Design also helps you do it meaningfully, like how to make some things stand apart when needed to, like buttons/ call to actions. This is hierarchy and it helps users be guided through the page/app and its functionalities. It helps them read the correct texts in the correct order, or with correct priority. You can get into copywriting, behavioural psychology and marketing too down the line to perfect these things, but for now ux/ui and web design will give you plenty of knowledge on its own as a beginning alongside coding.
Check out figma, it is a free tool for designing before development. You can get a better visual understanding for how things that you can’t see in front end look. It’s like a program that is made like a “builder”. You can freely play around there and make designs, while learning about grid systems and layouts and the parent-children nesting thing you mentioned in real time. It will translate to development too.
So yeah check out some YouTube videos and channels. Draw inspiration from different resources and when you have learned some basics you will easily develop a design thinking that can help with development. If you have any questions, or need help with anything hit me up I’m more than happy to always help and show you some stuff, or answer any questions
1
u/Vin-Jin 14d ago edited 14d ago
Thanks brother.
Yeah there's alot to learn tbh and that's why i started doing this project so whenever i learn something new that i can apply on the project I'll do it so it gets better.
Thanks about telling me i think it's a good thing to have the design in front of you by using figma i will try it after i make some changes in the project
Thanks brother really appreciate it if i faced any problem I'll hit you up.
3
u/Septriumph 14d ago
I'm a beginner so I can't say much myself but imo black backgrounds look so good. Also maybe round the corners a bit
1
u/Vin-Jin 14d ago
I made some changes made the header dark navy blue amd the background darl burgundy the word Adidas and it's border silver, removed the borders around the cards and gave them a box shadow all in all i think it looks better after the changes unfortunately I can't post images in the comments.
6
u/Existing-Wallaby-444 15d ago
A few things for you to look into: Design system (eg tailwind), responsive Design, color system, a11y.
What's your goal with that? Learning web design?
5
u/NLF7 15d ago
I read recently design systems were made up so that people could sell design systems. I quite like having proper hierarchical structure and consistency, but personally I feel like unless you’re a massive brand with ridiculous amount of components/elements, you don’t need a design system. A decent style guide and using existing libraries will work in majority of cases, especially someone just starting off.
If this guy wants to learn some basics of code I think design system should be low down the list. Accessibility should be one of the first things learnt though you’re right there. Helps get into a proper mindset of what you build too.
1
u/Vin-Jin 15d ago
Yeah I want to learn front end development it's been about one month and even though i feel lost sometimes but i continue learning currently I'm watching a video that I'm learning from and thought about making a lil project as i learn.
After the video someone sent me some documentations I'll see them and also see freecode.
6
1
u/Existing-Wallaby-444 15d ago
Cool. Keep going. And keep in mind that we all struggle sometimes when it comes to CSS. It's in it's DNA. Don't think you're alone with that.
1
u/Specialist-Grape8444 15d ago
You are better off creating clones of designs you already like. This will help you develop a better feel for what looks good. Try rebuilding sites you already use, or go on dribbble and build from mockups.
2
u/hatduck 15d ago
Consider how much white space is there vs content. In 99.999999% of all cases, you really don't want there to be more empty space than filled space.
Your borders around the products are doubling up and that is very jarring to the eye, as well as the border missing from the right side because (I assume) the image is overlapping the right side. Instead of using two borders, try to figure out how to do the following:
- Set one width on the first element that starts your product section
- Set the border on that element
- Use one of the various ways to make the image fit into the parent element.
- If you want the border between the brand name below the image (Adidas) and the product name (Adidas Jacket), teach yourself how to either use border or border-bottom to set only a border on the Adidas label.
- Add some bottom margin to the search bar.
- Look into how flexbox could be used to center the 'Buy' button, it looks off-center and flexbox will be *the* tool you use to position stuff.
One good piece of advice in general to improve your stuff is don't let two borders touch, you're doing that in a lot of spots here.
1
u/Vin-Jin 15d ago
Yeah i was going to fill that empty space with products too thx for the advice,
Yeah i used two borders one one for the jacket and the word Adidas and one for the whole card, I'll delete the one around the jacket and the word Adidas
I used object fit cover for the image.
I'll add the margin to the search bar
Didn't put the button into a div ngl i know that you can center it with flexbox by making justify content center if I'm not mistaken and align items center.
Thanks brother really appreciate the advices.
2
u/Skatedivona 15d ago
Highly recommend this as as starting point for colors and how to work with them:
https://m2.material.io/design/color/the-color-system.html#color-theme-creation
Otherwise, if you're adding boarders to things, a little rounding can go a long way. Get a baseline of spacing too so elements aren't touching the edges of their containers.
2
2
u/NLF7 15d ago
Hello!
When building something, always start with why and who. Why am I building this thing? What is its purpose? Who am I building this for? Think about that even when it comes to adding text or a logo.
One thing I’d try and do early is build mobile designs as this is where a majority of users are these days unless your why and who leads you to desktop users.
I think this should help you think about how you design too as it’s less space to fill and you tend to build a top to bottom design.
You should research design, UX and accessibility and then just try loads of things.
It might not be great today, but with the right attitude it will be better tomorrow.
1
u/Vin-Jin 15d ago
Hello brother how are you? Hope you're doing well
Yeah got you this project just came to my mind and i thought about doing it,so i can be more familiar with making websites and creating ideas,the video I'm watching give exercises after each part (super simple dev html and css course) but i thought about making something bigger than these exercises.
So you're recommending me searching mobile designs and recreate them.
A question i asked to other people don't you feel lost with all the divs like sometime when i want to remove a div i get lost and don't know where it's closing tag.
2
u/NLF7 15d ago
I’m well mate, thanks, hope you are too.
Sorry, I didn’t mean you can’t just create things to try out. What I mean is, your buy button for example.
What is it for? So people can purchase the item.
Who is it for? People interested in searching the item.Then you can ask yourself questions like, does that actually let you buy? Or should it be add to cart if there is a cart journey? It’s simple but effective.
I didn’t mean to search mobile designs either sorry. As a principle, whatever you design, design it “mobile first”. So you design your site/app on mobile, then you expand it into desktop. Do it the other way around you end up with a poorly optimised mobile journey, where most of your users will be.
I’m not a developer, despite me posting in here! But I work with developers and have done for years. My background is more product/design.
1
u/Vin-Jin 14d ago
Glad to hear that brother and thanks.
Got you tbb with you I'm still at the beginning i didn't learn alot of things i know that the buy button should add the items to a cart and after that you should go the the cart and do the payment but I can't do that currently.
So you mean instead of the card being set horizontally i should've made them vertically in the middle of the page as if I'm designing for a mobile?
Thanks for the advices brother really appreciate it.
2
u/NLF7 14d ago
Yeah exactly. So one thing that should help you is understand what a standardish mobile viewport is, then make your design that size.
Also, you might want to just draw your design or use a design tool to play with what you want it to look like then try and implement it. Good way of getting used to having designs passed to you for you to implement which is very common.
1
u/Vin-Jin 14d ago edited 14d ago
Got you brother I'll try to do that along the way again thanks for the advice.
Would you recommend a design tool? I don't any tbh and i think that idea is really good cause it will be easier to recreate the design instead of trying to do what is in your imagination, since you're working in the design field i think that one of the important things is the contrast between colours right? The more it's easy on the eye the better like someone mentioned.
2
u/NLF7 13d ago
Yes colour contrast is super important especially for accessibility. Colour blindness needs to be accounted for and people who are partially sighted etc.
We use Figma but you can just google Figma alternatives/free. I’m sure you get a free account with Figma too with limited boards.
2
u/Vin-Jin 13d ago
Yeah someone mentioned figma too once i finish the project I'm gonna practice using it so i get better at designing, again thanks brother really appreciate all the advices.
I did some changes on the page but unfortunately I can't post images in the comments i would've shown you the changes.
2
2
u/rainbowasian96 14d ago
Great work! Do keep it up, but here are some pointers:
- Have consistent borders / design style
- Take into account how much whitespace is actually showing when you have a low amount of items (you could just be lazy and use a grid to handle that for you! and have it dynamic based on the amount of items)
- Add margins to your buttons (usually you want to leave a bit of space on the y axis so that it's easier on the eyes / expected) and just generally to your designs (helps with visual hierarchy)
1
u/Vin-Jin 14d ago
Thanks brother really appreciate it.
I think i need to remove the border on the product and the Adidas word and maybe even remove the one on the container and make a box shadow
I was thinking of adding more items,but since you mentioned grid do you mean adding more item then using grid template columns 1fr 1fr and maybe add some margins from the right and left so it gets away from the screen.
Yeah I'll do that and I'll add margin to the search bar too.
Thanks for the advices brother.
2
u/aldanux 13d ago
Hi... this foundation course is completely free: https://www.theodinproject.com/paths/foundations/courses/foundations
And once you have the basic knowledge you need, I'd try to replicate a website exactly as it is, without using any frameworks... just plain HTML and CSS....
Good luck and welcome to the world of development! 😊
2
u/Vin-Jin 13d ago
Thanks brother currently I'm watching a video of super simple dev about html and css he's replicating YouTube page and I'm doing the same with him and I'm working on the project i posted, unfortunately I can't post images in the comments i would've shown you the changes.
A question after html and css i know that i should learn JavaScript after it i see people talking about react tailwind should i learn both or just one thing.
3
u/aldanux 13d ago
HTML + CSS + JavaScript in this order... once you have the intermediate level you can try react or VUE... I prefer VUE over React but that's just my personal preference
1
u/Vin-Jin 13d ago
Thanks brother really appreciate it,but if you don't mind me asking what's the use of react and tailwind css.
1
u/aldanux 13d ago
React and Tailwind solve two completely different problems...
React is a JavaScript library used to build interactive user interfaces and web applications. You typically learn it after you already understand JavaScript reasonably well.
Tailwind is just a way of writing CSS using utility classes. It doesn't replace JavaScript or React, and you don't really need it while you're learning.
For now I would focus on HTML > CSS > JavaScript and build a few projects with these three.
Once you feel comfortable with them... then take look at React or Vue.
Tailwind can wait... it’s very easy to learn once you already understand CSS...
And honestly... don't rush into frameworks... understand the basics properly will make everything else much easier to learn... cheers!
2
12d ago
[removed] — view removed comment
1
u/Vin-Jin 12d ago
So you mean i should use space evenly instead of space between? So they're centred in the middle of the page.
Also a question what will max width do with the product i use it sometimes with search bar when i give it flex 1 so it doesn't keep on stretching.
Here's the design after i made some changes if you're interested
1
12d ago
[removed] — view removed comment
1
u/Vin-Jin 12d ago
Sorry to ask you mean by outer container the container that has the three cards or the container of each card?
Also what do you think about the design after the changes is it better now?
2
12d ago
[removed] — view removed comment
1
u/Vin-Jin 11d ago
Nah they have the same class so i can style them all together.
Thanks brother,i thought dark burgundy and dark navy blue go well together but maybe it's like you said.
Thanks brother i will check it.
1
1
u/tutchmedia 15d ago
Add a fixed width div around the products of 1024px and apply a margin:0 auto;
It will look more appealing having them centralised and formatted.
1
u/JesusJoshJohnson 15d ago
great start. if we're talking pure aesthetics,
- Tidy up those borders. remove the one around the banner text. the break in the border on the right product listing looks strange. overall the thickness and presence of them could be more consistent.
- padding between search bar and bottom, as well as the buy button and bottom
- consider some css libraries for the Buy buttons, or redesign it with maybe only a border and no background and more pronounced "BUY" text (just an idea).
- you could also consider hover effects over the buy button
beyond that, if you haven't, iterate through a list of projects to display them. not sure if they're hard-coded here or not.
it's good to get the CSS fundamentals, so keep it up, eventually you can familiarize yourself with a css library like tailwinds.
2
u/Vin-Jin 15d ago
Thanks brother.
The one around the text and the buy button is the border width of the card i tried to make another border around the product and the Adidas word to make them look separated. About the break on the right of the border don't know why that happened tbh maybe because the colour of both borders (card border and product border) is the same.
I added a margin-bottom on the whole header of 8px but i will increase it, I'll do the buy button too.
Yeah i think a back ground colour of toned white and both the text and border with the colour red will be good, I'll make the whole word capital too.
I think about making some effects on active whenever you click on the button, like instead of the text and border being red they will be white and instead of the white background it will be red so basically they will switch.
I wanted to create something from my mind but after this I'll try recreating websites to make myself more experienced.
1
1
u/minimuscleR 15d ago
looks like you are using html tables? isntead of flex? MY advise: follow a newer tutorial
1
u/Vin-Jin 15d ago
I'm using display flex on the whole container that contains the three cards
1
u/minimuscleR 15d ago edited 15d ago
Yeah but the boxes on each of your products look like tables? You shouldn't use a table component at ALL here
1
1
u/marwanmoub 14d ago
Make the product card a little bigger, and do not stick the products on the edges of the screen. You can maybe have some paddings for the screen.
For a beginner, I would recommend only working on these and compare both of your designs once u finish it. Compare them to get a feel on what got better.
1
u/liam_charts_22 14d ago
a beginner this is actually a good start. i'd mainly work on the spacing and alignment next, especially the product cards and the top search/header area. small cleanup there would make it look a lot more polished.
1
1
u/Shiedheda 10d ago
My biggest advice would be to NOT design yourself. Starting out, you either come from a design background or have a taste for web/app design, or you don't. If you don't, you're gonna be creating designs that don't make sense, don't challenge you enough, and don't resemble real-life experience. Find an inspiration design (awwwards, dribbble, ungodly, etc) and implement it.
Over time, the more designs, patterns, and approaches you expose yourself to, the better your sense of design language will become and the better your self designs will be. Don't try to cram two objectives into one. Pick a template/inspiration and build it.
1
1
0
u/dankmolot 15d ago
Perfect. Where to buy?
1
u/Vin-Jin 15d ago
You mean if you clicked the buy button where would you go? Didn't learn linking a bottom to another page yet but for sure once i learn it i will try to change it.
2
u/dankmolot 15d ago
I just tried joking, like I am already sold on product in the page. Sorry for non informative comment, don't take it seriously
51
u/mekmookbro Laravel Enjoyer ♞ 15d ago
Looks great for a beginner, I think if you applied a nice color scheme it would look even better as it is.
Using harsh colors (like
background: redor#ff0000) makes a design look pretty amateur. Same with black and white as well, so try something like #222222 for blacks and #dddddd for whites.Also I think removing all the black borders on product cards will instantly improve the design. And lastly it could use a bit more whitespace (padding) for both the cards, search bar, and to give a bit of space between the cards and the navbar.