Website Background
Hello! Ever since I started making websites I've mainly used solid or gradient colors. I've been wanting to get more experience into making websites with the same vibes/background as the attached images, but I'm not sure where to start and how to implement it. Would the workflow for designing something like this be photoshop and then having it as a background image, or what would be the best?
13 Replies
not qualified to answer about the design side of images like this but those definitely look like non-content images so should at least in theory be done through CSS
background-image. These types of images are often referred to as "hero images"Man dw any helps appreciated so thank you!! Also, that's what I was thinking too as for the most part im just taking up the full viewport (object-fit or something). I guess what I'm struggling to wrap my head around is if I were to use the design on a scrollable page. For example one of the pages could be a projects page with a list of project cards. The design would carry onto this page. However, since this design would be an image, I might run into issues where its stretched out, designs look funny/cut off (maybe mismatched dimensions), or if I keep adding cards it might get blurry (haven't tested this yet but I should to see if it does lol). Basically, regular colored/gradient websites don't run into these issues (the browser handles all that), but if I wanted a background image how do I handle the design at different viewport sizes (media queries? but it feels like theres a better way...).
i would worry more about the image itself rather than the size of it
those images have huge contrast differences, making it difficult to have readable text on top of them
and they go from very dark to very light or vice-versa
your design would have to either mostly obscure the image, have opacity so the image is somewhat visible or something else
Is the image for the entire website background? Or just a small section? If for the entire site then you really need to think about visual contrast, as epic pointed out. If it's just for one specific section than it sounds like a hero image and there's a lot of resources on how to do that well.
If it's for your entire site, then image size becomes a problem. You don't want to server a 200MB HD4k image to someone browsing on a mobile device. But you also don't want to server a 40kb dinky image to someone browsing on an 80" smart TV.
yeah, the ux will be absolute hell in both cases
but the worst is the 200mb 4k raw image on a mobile
Yeppers
anytime a user on mobile visits your site, you are eating up their money - literally
Cloudinary or Cloudflare Images could help immensly with that issue
nextjs already does a lot of the optimizations for you, if you just use their image thingy
for background images you'll need the
background-size property instead of object-fit which only works with the <img> tag. Probably what you'll want specifically is background-size: cover;: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size.
on file size: yes it's definitely a concern. Off the top of my head bing is the first site that comes to mind that does this sort of thing. So i went too have a look and today's image for me is 234k which isn't bad for what they are doing.
They have the background image reference in the HTML through a style attribute. And then are using this in the css file:
in terms of code, it's childsplay
but in terms of user experience, it's a pain
Valid point and it'd have to be something I keep in mind while creating the design. Im not thinking of making it as complex as the pictures but itd still have that vibe
It will be for the entire site. The sites going to be a personal portfolio so I'm not doing anything too extensive. Also, there will be different designs the most complex design would be the landing page while the other pages might have certain elements of that design but less distracting so that the content is readable/user friendly. However, you are right with the size of the photo being a problem which is one of my main concerns and what Im struggling with
I think the main point of what I'm struggling with at this point is just as you all said handling the experience on different viewports, making sure that user experience is optimal (especially for mobile phones) and making sure the design is consistent (probably different designs for mobile, tablet, desktop, etc.). The other part which is why I posted this in UI/UX is just any tips on the general workflow of creating designs for this site as a designer (what tools, etc. This is more open ended). Basically I just need design tips as I think I understand how to make the designs but I dont understand how to make the design for the web especially with it being a more complex design.
Im not sure if Im conveying what I'm asking right so let me know if I need to clarify
how about you start with what you have in mind?