Not completely on-topic, but I wish more designers would consider using some kind of gradient or custom vector graphics for their landing page designs instead of defaulting to multi-megabyte stock images that, for the most part, don't even add anything of value to what they're trying to convey.
They do convey something very important: credibility.
Or, at least, they coerce the fast pace internet viewer into having that first impression.
I know its silly, but the average viewers mind will subconsciously attribute more effort and quality - thus, credibility - to a polished photo than to any gradient.
It sadly does not make a difference if its merely a stock photo bought for a few bucks. It still works.
Also, a photo gives a more "real", less abstract impression, so the target customer can relate. You can't relate to a gradient.
So the photo should be chosen according to the target customer.
I agree though that some effort should also be put into technical aspects, e.g. making the photo file size as small as possible.
I personally believe credibility at first impression has more to do with the overall polish and quality of your design than the existence of a photo.
Sure, adding a photo might be an easy shortcut to fabricate the illusion of quality, but it's a shortcut that also has severe adverse effects on UX in bandwidth constrained environments, which actually has the opposite effect on perceived quality, and thus credibility, than the designer intended. This is why I believe it's worthwhile to explore alternative designs that don't rely on photos, at least once you're past that MVP phase where you just want to put something together as quickly and easily as possible.
RE: You can't relate to a gradient. This is true enough, but there's no reason why you need to make users relate to a background image, when you can have them relate to something in the foreground like some kind of feature showcase of your app/service (with screenshots and such). A busy stock photo in the background is actually detrimental to this kind of design compared to something simple like a gradient. And in my opinion, this kind of design is much more directly relatable for users because you're presenting your value proposition to users explicitly rather than relying on your users being naive enough to fall for some subliminal mind trick.
Stripe's landing page is one good example I can recall of such an approach: https://stripe.com
Stripes target group is developers. Developers, designers etc are special groups, predispositioned in certain way that may make them assess the trustworthyness of an offering differently, i.e. more analytically than most other users.
"Normal" users buy more in the spirit of "no one was ever fired for buying Microsoft": since they lack other means of assessment, or have no time to carefully read the actual content, they fall back on things like nice photos.
And they are a good proxy, as they compare it to advertisements of their local shops or yard sales.
They dont know about stock photos. They just see a professional photo.
And to be clear: Even me as developer would take such things into account. I have incomplete information, so I use proxies. Especially if I am in a hurry.
Sure, but now look at Highrise's visual approach. We know that they have A/B tested in the past, so I am going out on a limb to say that they continue to do so. They have a human element in their hero image on their homepage, and they include an image of a smiling influencer near the top. I'd reaffirm what others have said and test for your audience! I am not affiliated with business of the case study in the link you posted.
https://highrisehq.com/
Correct. They say "If truth was self evident, eloquence wouldn't be needed." Unfortunately most websites could be reduced to just text and no images, external css files, jquery, and more. However when the average consumer lands on such website they will not trust it or take it seriously.
I'm not sure an arbitrary gradient would add much value either, at least without another image or graphic (e.g. https://www.mapbox.com/).
A splash image doesn't add much either, I agree, unless you layer other pieces on it so it looks more sophisticated and sets a mood (e.g. https://www.onelogin.com/).
But yes, just a simple splash image with centered tagline text and CTA buttons is very cliche at this point. My mind is too warped by being a developer to know whether average consumers care or not, but most techies will assume it's a weekend prototype, not a serious project.
There's also the CSS property `filter: blur(<length>)` which basically has the same effect with a high enough length value. Not every browser supports it yet, of course (i.e., IE). Still, kudos to the author for the clever idea.
I would suggest using this in conjunction with the scaled-up image technique in order to get the same blur effect cross-browser (see the posts elsewhere in the comments about bilinear vs. bicubic scaling)
In Firefox the gradient is not as smooth as in Chrome, looks like they are using different scaling algorithms. It's more noticeable with higher sample area settings:
For me, Firefox renders boxy pixels on OS X and smooth gradient on Windows. I filed a Firefox bug for this difference in scaling: https://bugzil.la/1238304
Clever idea to use a dramatically zoomed image to allow for a variety of "stops" in the gradient!
I've used random CSS gradient backgrounds on my personal blog for some time [1]. The "background options" at the left includes a couple grays and a random colors option. The randomness is recomputed each time you click on one of the options.
In IE 10 and 11, the only browsers that I am aware of that do gradient transitions, they slowly animate.
In the meantime, you can always just load the html and delete the div elements for text and controls (to take a screenshot). Obviously this makes the "arbitrarily sized" part harder but now I have a nice wallpaper for my phone.
This used to be a well known technique by windows users to save memory and resources, back in the day when the desktop background could have an impact on system performance. The trick was to have a background of an image of a few pixels square and use the "Stretch to fit" option, which created beautiful soothing backgrounds, but only take a few bytes of memory.
It's actually a very low resoluton image (3x7 by default), stretched using the bilinear filtering provided by the browser.
Chrome and Safari produce smooth images. Firefox for Mac produces a mosaic (source each pixel gets a ~10x10 grid, it looks pretty good IMO). Firfox for Android may not do any smoothing.
I don't think there's a way to control how the browser does the filtering.
The gradients look nice, but a nitpick about the site: Alt+LeftArrow and Alt+RightArrow are hijacked by the site to scroll! This is a shortcut for back/forward in browser history, and apparently I use it without thinking, because I just had a rather jarring experience trying to get back to the HN comments page.
Good job on this- very cool. I think it'd be a nice addition to have a "randomize settings" button, or perhaps allow a "travel" mode where the x/y positions change in smaller increments (so the background changes a bit slower).
The x/y increment resolution is a limit of the technique used. It uses overzoomed images, you scroll one source pixel at a time. Since it uses `background-size: cover;` for rendering, you cant scroll by fractions of pixels.
Ah, that makes sense. I thought it was just that the dat.gui step was set to '1' not '0.01'. Didn't realize the step was set that way puposely due to a limitation of the technique being used.
Trying to add a randomize() function that edits topX, topY, and sampleArea. Might add a button to dat.gui or maybe just call it based on pressing the 'r' key.
I've read about that before, so there's a chance it planted a seed in my brain, but the idea for the tool came from a codepen experiment I did a few months ago.
Does anyone know; is the smoothing guaranteed to be consistent across multiple browsers (I'm guessing it's done on GPU when possible with a software fallback and is probably just a bilinear filter)?
i often shoot pictures of the sky, a forest canopy, or
other natural phenomenon, to get this kind of gradient.
but this is even better, in many ways.
one suggestion is to feather the edges into each other,
a la the "seamless" background patterns of yesteryear,
to soften them if/when the background repeats, because
background-size:cover doesn't handle very long elements,
like "body", without having the background-image repeat.
I just tried this adding it to a page. When I drag the window so the width is not very large compared to the height the image clips/repeats. Is that the intended behavior (Chrome)? Added the CSS directly to the body of the page. Example here: https://jsfiddle.net/r1ueprrz/
This is wonderful. I hope gradients become more regular in web design. I wrote an image -> css gradient converter last year https://github.com/fraser-hemp/gradify
This is really nice. It could be interesting to also add a thumbnail of the chosen image on the page. That would instantly give the effect that the background color/gradient had been chosen to match the image (which of course it had :) ).
Lovely app, I like this type of gradient backgrounds.
Came to my mind the decision you made to not be able to generate a custom link for uploaded images, and I wonder, is there a way to achieve this? Considering that the base64 length hits the URL size limit.
Thanks :)
It can be done, but the because of URL limits, the image should be saved. I plan to allow full scale downloads and I might just store custom uploads too.
Can the sample size be done in percentage points (of the source image)? I think some of your example images are higher resolution than others so it takes a lot of fiddling to find similar results.
That's a good idea, I'll add it soon. Yes, example images vary in resolution, I scaled them to have a dense visual complexity. The idea is a bit revolving around chaos, you never know what you discover :)
Neat tool, I'll probably use it on my next website. I like the keyboard controls to move the image, but I also found myself intuitively trying to drag the image around with my mouse.
This is a really great idea. In addition to using existing images, would it be possible to create interesting patterns and textures procedurally using canvas.toDataURL()?
The image is a derivative work; it's derived from the original stock image.
If the stock image is protected by copyright, and you don't have a license to use it (for anything), is it copyright infringement to use it like this on your website?
The "title" attribute of each image contains a link to the source. The second image (lightning) that I've randomly followed is licensed CC0.
(It's an interesting question, though, whether copyright protection can be expected to "scale" down to a 3×7 pixel subset of an image. At what point does it stop being a derivative?)
Indeed, but it is derivative, not fair use. If the source can be used and modified freely (public domain, appropriate Creative Commons subtype), then it is also the case for the gradient.
If the source image is copyrighted, then the gradient can't be used without a license from the original owner.
