Immagini in scala su mobile e piccoli schermi

Graphic Design

Il problema: Immagini grandi su schermi piccoli

Problema Soluzione
Immagini grandi su schermi piccoli 1. Rimuovere l'immagine se non funziona bene su schermi più piccoli o se non aggiunge valore. 2. Ridimensionare l'immagine in modo da adattarla allo schermo più piccolo. 3. Modificare o spostare il testo associato all'immagine.
Evitare che le immagini appaiano troppo grandi su schermi più piccoli Ridimensionare e ritagliare le immagini per adattarle allo spazio disponibile sullo schermo più piccolo.
Cosa succede se l'immagine viene ridimensionata senza ritaglio? L'immagine potrebbe perdere nitidezza e impatto visivo sullo schermo più piccolo.
Cosa devo fare se il testo sovrapposto all'immagine diventa difficile da leggere? Modificare o spostare il testo associato all'immagine per renderlo più leggibile su uno schermo piccolo.
Quante immagini dovrei inserire nel mio sito web? Dovresti limitare le immagini solo a quelle che aggiungono un valore reale al tuo sito web. Evita di sovraccaricare il sito di immagini.

Le tue immagini sono senza dubbio un elemento importante del tuo sito web. Attirano l’attenzione, ispirano inviti all’azione e aiutano a raccontare la tua storia o a vendere i tuoi prodotti. Quindi, naturalmente, vorrai che abbiano il maggior impatto possibile su tutti i dispositivi. Ma prima ancora di iniziare a selezionare le “immagini dell’eroe” che utilizzerai nel tuo sito, è fondamentale capire come il contenuto, le dimensioni e il layout delle tue immagini possono essere modificati quando il tuo web design viene ridimensionato a una dimensione dello schermo più piccola.

Una delle domande più comuni che riceviamo dai clienti durante i nostri progetti di creazione di siti Web riguarda il motivo e il modo in cui le loro immagini appaiono in modo diverso su schermi più piccoli.

Per ottenere l’effetto completo delle tue immagini di grandi dimensioni devi visualizzare l’immagine su uno schermo più largo di 800 pixel, il che significa che probabilmente selezionerai le immagini chiave del tuo sito Web con il design del desktop in prima linea nella tua mente.

Tuttavia, c’è un motivo per cui le agenzie stanno lavorando sempre più a un protocollo “mobile first” quando si tratta di web design ed è che le immagini di grandi dimensioni non si traducono sempre bene su schermi più piccoli. Il ridimensionamento di immagini di grandi dimensioni può causare ritagli inappropriati e può anche significare che alcune immagini perdono il loro significato del tutto insieme.

 

Cosa succede esattamente alle tue immagini?

A seconda del contenuto dell’immagine, possono accadere diverse cose quando le immagini vengono ridimensionate, il che fa sì che l’immagine abbia un impatto completamente diverso da quello previsto.

Esempio 1: ridimensionamento senza ritaglio
È logico che un grande banner orizzontale in stile orizzontale sul desktop non appaia allo stesso modo su uno schermo mobile verticale in stile verticale. La stessa immagine rimpicciolita per adattarsi a un piccolo schermo potrebbe essere ancora visibile, ma è probabile che si perda molta nitidezza e molto probabilmente perderà l’impatto visivo desiderato.

ridimensionamento immagine senza ritaglio

Esempio 2: ridimensionamento con ritaglio
L’immagine viene ritagliata per adattarsi allo schermo più piccolo, ma così facendo una parte dell’immagine viene persa e l’immagine non ha più alcun contesto in relazione al resto del contenuto della pagina.

Ridimensionamento immagine con ritaglio

Esempio 3: leggibilità del testo
Il testo è spesso sovrapposto o incorporato in “immagini eroi” su un sito web. Ciò può causare diversi problemi quando visualizzi queste immagini su un piccolo schermo. Quando il testo è incorporato, si ridurrà insieme al resto dell’immagine e potrebbe diventare illeggibile.
Se il testo è stato sovrapposto, le dimensioni e il colore del testo utilizzato possono rendere il testo difficile da leggere e l’immagine difficile da vedere, poiché il testo viene regolato per adattarsi allo schermo.

 

Quali sono le soluzioni?

1. Rimuovere l’immagine
In alcuni casi, potresti dover accettare che un’immagine che funziona su un grande schermo, semplicemente non si tradurrà bene su tutte le dimensioni dello schermo nel modo desiderato. In questo caso potresti decidere di scambiare un’immagine diversa o, a seconda dello scopo dell’immagine, potresti decidere di rimuoverla tutta insieme,
In ogni caso, è buona norma non sovraccaricare il tuo sito di immagini, poiché le immagini possono occupare una quantità così grande di spazio sui dispositivi mobili. Le immagini dovrebbero essere limitate solo a quelle che aggiungono valore reale per evitare uno scorrimento eccessivo e creare un’esperienza utente ottimale.

Prendi in considerazione la rimozione dell’immagine se:

  • La chiarezza è scarsa a una dimensione più piccola
  • Il significato dell’immagine viene perso quando viene ritagliata
  • Risulta in una quantità non necessaria di scorrimento
  • Non aggiunge valore intrinseco o contesto ai contenuti della tua pagina

2. Ridimensiona l’immagine
Potrebbe essere necessario ritagliare le tue immagini di grandi dimensioni in un modo particolare per adattarsi a uno schermo più piccolo e ciò potrebbe richiedere un po’ di sperimentazione per trovare la migliore combinazione di ridimensionamento e ritaglio al fine di creare l’immagine più adatta allo spazio disponibile sullo schermo . È importante essere consapevoli che durante questo processo sarà necessario un compromesso su alcuni aspetti, al fine di creare l’immagine più ottimale possibile.

3. Modifica o sposta il testo
Il ritaglio delle immagini, il ridimensionamento e il rimescolamento del testo vanno tutti insieme per creare un design che funzioni su schermi più piccoli. È quasi certo che dovrai apportare alcune modifiche al testo associato alle tue immagini. Ad esempio, il testo può essere visualizzato in un’area secondaria dell’immagine su uno schermo di grandi dimensioni, ma potrebbe essere necessario ritagliare quest’area su schermi di dimensioni inferiori. Pertanto, il testo dovrà spostarsi in una posizione diversa o potrebbe essere necessario modificarlo per adattarlo.

 

Per concludere…

In poche parole, ci saranno sempre alcuni ritagli, ridimensionamenti e modifiche necessari per le tue immagini e il testo che li accompagna, e in alcune aree potrebbe essere necessario un compromesso per creare un’esperienza utente positiva per schermi più piccoli.
Quando esamini le tue immagini, poniti questa domanda chiave: la tua immagine aggiunge valore al tuo sito ed è significativa per gli utenti. In caso contrario, rimuovere l’immagine, in caso affermativo, modificare con attenzione l’immagine in modo da consentirle di mantenere significato e valore e essere consapevoli del fatto che sarà probabilmente necessario un compromesso.

post recenti

Dominio nome dell'attività PIANIFICALO

Questo è più un consiglio che un obbligo, ma è importante che tu abbia un nome ben pensato per il tuo sito web o attività e questa è la prima voce della lista di quanto costa un sito web.

Prima di decidere, fai queste 4 cose:

  1. - Cerca su Google - Questo può sembrare ovvio, ma è importante vedere cosa esce su Google quando cerchi il nome che hai in mente per il tuo sito web o marchio. Ho visto molte persone e aziende che, dopo aver investito tempo e denaro nella scelta di un nome, si rendono conto che esiste già un sito web con grande autorità su quel nome. Analizza i primi 3 risultati, la loro rilevanza con il nome che hai scelto, e la loro autorità: l’autorità del dominio è un buon indicatore https://moz.com/learn/seo/domain-authority. Se trovi un sito con alta autorità e un nome simile, pensa se vale la pena cambiare o adattare il nome che hai scelto.
  2. - Controlla la disponibilità del nome di dominio - Usa un registrar di domini per vedere se il nome che hai scelto è disponibile.
  3. - Verifica la disponibilità del nome dell’azienda - Se hai intenzione di registrare la tua attività come società, controlla se il nome che hai scelto è disponibile.
  4. - Marchi registrati - Assicurati che il nome che hai scelto non sia già registrato come marchio in settori pertinenti.
Dominio nome dell'attività

Logo e branding BRAND IDENTITY

Il design del logo e il branding sono strettamente collegati al design del sito web.

Tuttavia, è importante distinguere tra i due: il design del logo e il branding devono essere sviluppati prima di procedere con il design del sito web, in quanto influenzeranno l’aspetto di quest’ultimo.

Prima di iniziare con il design del tuo sito web, assicurati di aver pensato al design del logo e all’identità del brand e di aver definito i requisiti per questi elementi.
Potrebbe anche essere che il branding e il design del logo non siano la priorità per il tuo progetto, e che tu sia più concentrato sugli aspetti tecnici e funzionali del tuo sito web.

Tuttavia, avrai comunque bisogno di un logo e di alcuni elementi di branding per il tuo sito web. Tieni questo in considerazione e, se necessario, posso offrire un semplice logo basato su testo come parte dei miei servizi.

LOGO E BRANDING

Preparazione del testo PIANIFICALO

Un aspetto che spesso viene trascurato quando ci si domanda quanto costa un sito web è la creazione del contenuto. È facile concentrarsi sull’aspetto e sulle funzionalità del sito, ma bisogna ricordare che un sito web ha bisogno di contenuti.

Se hai intenzione di scrivere i contenuti da solo, inizia il prima possibile, anche prima di iniziare il progetto del sito web.

Più del 60% dei progetti di siti web subisce ritardi a causa della mancanza di contenuti.

Anche per un sito piccolo, avrai bisogno di scrivere un buon numero di parole. Vale la pena considerare di utilizzare servizi di copywriting. Avere un esperto che ti aiuti nella creazione di contenuti di qualità, e ottimizzati per i motori di ricerca, non solo renderà il tuo sito più efficace ma ti aiuterà anche a evitare ritardi nel lancio del tuo sito web.

Offro servizi di copywriting come parte dei miei progetti di creazione di siti web e puoi selezionarlo come opzione con il mio calcolatore dei costi.

Quanto costa un sito web - CONTENUTO PREPARAZIONE DEL TESTO

Brief