risposta-alla-domanda-sullo-sviluppo-web-bd.com

Le immagini sembrano cattive con una larghezza di paragrafo perfetta

Sto lavorando su un WordPress e sto cercando di mantenere larghezza della linea perfetta di ~ 70 caratteri . Il mio blog ha molti post e la maggior parte dei post contiene almeno un'immagine per paragrafo, di solito più. Quindi il sito è piuttosto pesante per i media.

1. CATTIVO

enter image description here

La schermata sopra mostra la visualizzazione del contenuto del post con wrapper impostato su una larghezza di 1140 px, è estremamente difficile da leggere poiché ci sono fino a 150 caratteri per riga. Forse all'inizio tutto sembra a posto ma in realtà è estremamente stancante leggere solo dopo poche righe.

2. BUONO (?)

enter image description here

E qui i paragrafi sono ridotti a 700px, il che dà 50-80 caratteri abbastanza piacevoli per riga.

Secondo me sembra abbastanza bene ma non sono sicuro se va bene se le immagini sono molto più larghe del testo (sono ancora a 1140px)? All'inizio sembra a posto, ma quando sto scorrendo 10 immagini per post i miei occhi saltano dal centro della pagina (testo) a sinistra (immagini) e questo diventa irritante rapidamente. O forse sto reagendo in modo esagerato e tutto è in ordine?

3. MISTO (?)

enter image description here

Giustificare il testo potrebbe aiutare un po 'qui, ma nessuno vuole leggere un testo giustificato. Inoltre sento che le immagini sono troppo piccole con una larghezza di 700 px, tutto sembra davvero compresso. Penso che potrebbe essere anche peggio del punto 1, ma non ne sono sicuro.

La mia domanda è: come affrontare questo problema? Secondo te, il numero 2 va bene? Forse dovrei cambiare qualcosa? La tipografia è davvero dura e ogni suggerimento sarebbe molto apprezzato!

4
Wordpressor

Non è facile proporre una risposta senza vedere tutto il contenuto della pagina visiva. Questi sono alcuni concetti generali.

Il problema di progettazione non è il testo, in realtà l'affermazione della domanda afferma che ha già una soluzione: un massimo di 50-80 caratteri per riga. Il problema è la cornice del contenitore e le linee strutturali create dalle immagini.

C'è un frame contenitore definito dalle ombre laterali e una partizione centrale a tre colonne data dai frame immagine. Ciò stabilisce una struttura forte che condiziona l'intero progetto, che fa fluttuare la colonna di testo non rispettando nessuna di queste righe.

structure

In questo disegno come viene ora proposto, il testo è subordinato alle immagini e dovrebbe esserci un equilibrio tra entrambi. Questo equilibrio si ottiene rompendo l'egemonia di queste forti linee strutturali. In effetti, la soppressione del telaio del contenitore aiuta molto alla qualità visiva:

container


Gli esempi seguenti sono proposte esagerate per spezzare queste linee strutturali verticali.

Ridurre la resistenza degli assi strutturali verticali

Un robusto telaio contenitore orizzontale elimina qualsiasi asse emergente del suo contenuto.

horizontal container

Sopprimere la "cartesianità"

Un modo estremo per eliminare qualsiasi asse strutturale

enter image description here

Aggiungi dinamismo

La rottura del modello di ripetizione creato dalle tre immagini uguali porta benefici al design. In questo esempio, non solo sopprime le linee strutturali emergenti, ma aiuta anche a definire la cornice di testo:

  • L'asse centrale dell'immagine sinistra corrisponde al margine di allineamento sinistro del testo

  • La seconda immagine a sinistra Edge corrisponde all'allineamento a sinistra del testo

  • Il terzo asse centrale dell'immagine corrisponde alla linea di allineamento a sinistra del testo.

dynamism

10
Danielillo

Non c'è nulla di sbagliato nel rompere le immagini al di fuori della larghezza del paragrafo, infatti, in molti modi, migliora l'appeal estetico. Immagino che sul cellulare sarebbe tutta la stessa larghezza. Ma questa tecnica per spezzare le cose dalla larghezza del paragrafo - Ho visto molte famose piattaforme di notizie fare questo.

0
mastablasta