How better to conclude news?

I'm doing an informational website, I started yesterday to fix the design. Faced with a problem, don't know how to make a conclusion of news on the main page, need advice from both an experienced UX designers, and from ordinary users that just your opinion or professional advice.

The format I decided on 100%, it will be square blocks with the picture, but exactly how to make things better not know, there are 2 options.

First:

Pictures here, when you hover over that background is obscured and there is a news headline. To try a live version here https://bkhtn.ru/blocks/

4665eb8d7b7e33e48e8959ed14ea5688.jpg

Second:

Here, too, pictures, but has already darkened, and immediately see the news headline, and when you hover the header is removed, and You can see the picture with almost no dimming. Live version here https://bkhtn.ru/blocks/index2.html

a9a3e14ca5ba834c2b1c609b30986789.jpg

I think the second option is more useful because the header is visible at once and don't need to do extra action to see it, but still can not decide.

Waiting for advice :)

By the way I forgot to mention that it was imposed in a hurry and just to see how it will look, so on some browsers, flex boxes / animation can fly.
July 8th 19 at 16:24
3 answers
July 8th 19 at 16:26
Solution
The first option is generally unhealthy for macevich devices :hover occurs only at the time of Tapa, i.e. users will not see names at all.

The second one is better, but not perfect. All the blocks are the same and if the news much, then the tape will look too uniform, too boring. Homogeneous tape users scroll faster and less read, because the eye does not catch hold.

Would be nice to make modules of different sizes (like the tiles in Windows). Large size can be displayed main news, small — less important. The page should be a hierarchy of information in terms of importance and interestingness. When an inhomogeneous structure of the belt users browse through the pages slowly, pausing to consider the large blocks and at the same time notice the small around.

To hide the title when the mouse is not very. If a visitor wants to see the picture, let click on the news itself and consider the picture inside.

I don't know what you will have a website and what is it the editorial policy, but it is necessary to consider the design of the pictures.

And you have a major problem — you are designing the design using stock images and Lorem ipsum. This means that when filling the site with real content will come out dozens of problems about which you are thinking:
- the name of the news too long
- the name of the news is too short
- the name needs to be explained,
- the picture is too bright — white light contrast,
- the picture is too bright — the background interferes with reading text
- the text covers the face of the person in the picture,
have news no picture
- etc.

If you do not have your news, take content from someone else's site and make a layout with real texts and pictures. It exposes possible future problems. The layout will look not so beautiful, but the design will be more viable.

Related links:
artgorbunov.ru/bb/soviet/20160316
artgorbunov.ru/bb/soviet/20160127
artgorbunov.ru/bb/soviet/20160420
artgorbunov.ru/bb/soviet/20160427
Which is better: vertical list (left image, right text - for example; the news below each other) or tile, as in the subject? I'm asking because I'm surprised by the dominance of the tile. It is much more difficult to read than a list. - Dixie_Quigley commented on July 8th 19 at 16:29
If chronological order is important, the list. - fleta.McLaughl commented on July 8th 19 at 16:32
July 8th 19 at 16:28
Solution
The headers should be right. In the news they are more important than pictures.

On hover it is better not to remove the title and add to it for example lead, sort of:
91149d2fd6c14484a47a836321651c71.png
July 8th 19 at 16:30
In the second version to remove the text do not, you can do this:

6d5d21fa8f3d4032b74fb0067b3865ae.png

And the word, published the garbage.

Find more questions by tags DesignUsability & UX