Free to use photo site - Need feedback!

Design & UX
1

Hi,
I’m Michael and about three weeks ago I have created a website called www.picnshot.com where I give away FREE high resolution photos for commercial & personal use. You can use them in your client works, templates, themes, demos and other.

I would love to have opinion of as many people as possible as to the website’s design, build and most importantly the photos themselves. In general, what to better or change.

The main point is that I love to share my photos with others helping them on the way. I didn’t find the free photos I wanted for my works on the internet, so I started to make them myself.

Please let me know, I am open to any ideas. Also if you have any comments about the photos, critics or anything, please let me know, if I’m doing it right or what should I change.

Thanks, Michael J.

1 Like
2

I personally don’t like the actual structure. I think that you could take as an example the current websites that does the same as you do, eg: https://pixabay.com/. As you can see it is more focused on images, it clearly show an image list in the homepage (scroll down), and obviously the most important thing: a big search box as primary element you see on the page.

1 Like
3

Great feedback, thanks a lot for the comment! The layout actually was different about a week ago, there was one photo per row. I changed it to two, so you can browse much easier. I still want to keep the right box though.

I’m gonna look into the search field thing, it’s true it would be better if bigger and more significant.

1 Like
4

Why not 4 per row? I think would be better.
You could add an effect to images on mouse-hover. Something like a magnifier. Her you’ll find a good list: http://www.html5templatesdreamweaver.com/hover-effects.html. :smile:

1 Like
5

First observations: The site isn’t quite responsive. As the screen resizes bits get cut off at the ends. As I’m looking at the moment, the word Categories appears without the es. In fact the header doesn’t seem to be responsive at all.

Also Posted by Michael overlaps with the download button.

1 Like
6

Hey gandalf,
excellent point, I’ve been fighting with this for two days now, I’m working on making it fully responsive.

Where does the text overlaps with the DL button? I mean on a phone, tablet, or…?

Thanks,

Michael

1 Like
7

Thanks for the tip! :slight_smile: the possibilites are awesome, I need to look into that!

I’m a bit afraid though about the thumbnail size, if there were four. Even now, I feel its quite small :smiley: What do you think?

8

Mhh, still with CSS on mouse hover you could create an effect that enlarge the images at a bigger size.
Just check how I did it here:

Just mouse hover there on my avatar and you’ll see.
Optionally you could make the right-navbar invisible (visible on click) and then use the current size that you have for images but with 3 images per row.

9

That’s a great idea with resizing the pics on hover! I could possibly make three a row, with the resizing and still keep the right bar, you think that could be a solution?

10

Sure! What you prefer!
For that effect you might add this code for the images thumbs in home:

.css_class {
backface-visibility: hidden;    
box-shadow: 0 0 1px rgba(0, 0, 0, 0);    /* if you want the shadow effect */
display: inline-block;    
transform: translateZ(0px);    
transition-duration: 0.2s;    
transition-property: transform;    
vertical-align: middle;
}

.css_class:hover {
transform: scale(1.85);
}
11

desktop. I’ve not tried other devices.

12

Thanks a lot! :slight_smile: Although I’m a bit confused, don’t have the same experience, which browser do you use?

Michael

13

Using Firefox, for me it’s only between the “wide enough” and “narrow enough”

14

It’s only in my main browser that I get the overlap problem. Given that it’s a beta Chrome/Opera derivative I guess it’s my browser. I’ve tried it in Chrome, Opera and Vivaldi and I “only” get the problems Mitt identifies above.

16

Thanks a lot, working on it right now! Will post an update ASAP.

BTW where does this exactly show up? I checked it out in FF and works alright for me.

17

Alright, thanks for the info, I’m glad that’s not an issue anymore. :smile:

I’m open to any other ideas/comments/critics, so let a rip!

20

It happens for me using Edge too.

Granted most probably won’t change their browser width, and it will only be noticeable to those that land on the page at that middle range.

If you have Chrome. dev tools shows the pixel width and you’ll be able to get the numbers to use.
Or maybe making the container inline-block would help.

998×212 1.7 MB

1 Like
21

Wow, thanks so much Mittineague! You shouldn’t have gone through all the trouble, but the view of the error is amazing! :smile:

I need to find a way to actually get rid of that once and for all…

1 Like
22

It might not work, but it would be bit easier than doing a media query. At least worth a try. i.e.

a.download-button {
  display: inline-block;
}
23

Tried it but I can’t see the difference, so if you’d be so kind and have a look.

Also I’d be happy for even more comments/ideas/critics towards the site or the photos.

Thanks,
Michael