Quali dimensioni sono le migliori per progettare una pagina Web in Adobe Photoshop?

Consiglierei di progettare a 1440px X 900px, in questo modo sei nel
media delle dimensioni del browser (metti alcune guide a 1000 px per dimensioni inferiori
browser e ipad).

Non interrompere la progettazione a 1000 px, interrompere il contenuto a 1000 px.

Di solito inizio da queste dimensioni, quindi aumento la mia altezza in base al mio contenuto. Ricorda che non puoi avere la stessa altezza per tutti gli utenti perché hanno dimensioni del browser / risoluzione dello schermo diverse.

Dovresti usare una griglia all’interno del tuo design, non è necessaria, ma ti aiuterebbe in diverse cose:

  • Hanno la stessa larghezza di colonna tra ciascuna sezione, lo stesso spazio
  • Sarebbe molto più semplice convertirlo in CSS se si prevede di utilizzare un sistema a griglia

(Puoi installare un plug-in di Photoshop per generare una griglia o scaricare alcuni file .psd con tutte le guide)

Puoi avere un riepilogo delle dimensioni del browser del 2014 qui (e assicurati di controllare altri alti).

Non adattare il tuo design a determinate dimensioni, adatta il tuo design al contenuto.

Oggi ci sono centinaia di dispositivi diversi con schermi diversi là fuori. Non puoi progettare tutte quelle dimensioni, quindi devi creare una gerarchia in cui, indipendentemente dalle dimensioni del client, il contenuto viene presentato nel miglior modo possibile.

Ma, potresti argomentare correttamente, alla fine dovrai creare un documento in una certa dimensione per iniziare a progettare digitalmente. Si. Ma non ci andiamo ancora.

In primo luogo, vorrei suggerire di non utilizzare Photoshop per progettare pagine Web. So, lo so, la maggior parte delle persone (anche i professionisti) usano Photoshop per progettare pagine Web. Non ho mai capito il perché. Photoshop non ha strumenti di allineamento decenti. Photoshop utilizza pixel, il che significa che la maggior parte delle cose (oggetti Smart esclusi) non può essere ridimensionata correttamente se necessario. Photoshop non ha metodi rapidi per distribuire uniformemente le cose nello spazio disponibile e, peggio ancora, la tipografia in Photoshop è horror assoluto e puro. E se me lo chiedi, il 99% del tipo di tempo è di gran lunga l’aspetto più importante del design della tua pagina web. È ciò che rende o rompe il tuo design; tipografia.

Usa Adobe Illustrator. Soprattutto se hai intenzione di progettare una pagina web reattiva. Lascia che ti dica perché. In Adobe Photoshop, hai un documento con una risoluzione. Ciò significa che non puoi mai facilmente mettere due disegni uno accanto all’altro. Non puoi lavorare facilmente con le versioni di un disegno: dove in Illustrator copi semplicemente le tavole da disegno, le posizioni una accanto all’altra e lì hai le tue versioni o varianti.

In secondo luogo, in Illustrator puoi avere diverse tavole da disegno per layout diversi in un unico documento, consentendoti di applicare facilmente cambi di colore, cambiamenti tipografici, qualsiasi modifica a tutti i tuoi diversi layout – layout diversi per dispositivi diversi. Con due clic, puoi modificare gli

sia nel layout del desktop a schermo intero, sia nel layout del tablet, del layout dello smartphone e del god-know-what per vedere come funziona. In Adobe Photoshop, ciò richiederebbe cinque minuti, cambiando costantemente le finestre, aprendo i file, entrando nella fastidiosa cosa dello strumento di tipo Photoshop, agitando e gettando roba dalla finestra dell’ufficio.

In terzo luogo, Adobe Illustrator offre strumenti di tipografia decenti, strumenti di allineamento, distribuzione. Quindi, quando hai, diciamo, 5 voci di menu e qualcuno decide che ce ne saranno invece sei, ne aggiungi una e le distribuisci utilizzando lo stesso spazio. In Photoshop, dovresti eliminare le guide precedenti, calcolare lo spazio disponibile, creare nuove guide, copiarle e quindi posizionare le voci di menu. Ciò richiederebbe tra le due o le tre ore almeno, di nuovo perché sei impegnato a urlare contro i colleghi e buttare ancora più roba dalla finestra dell’ufficio.

Ed ecco la cosa più importante: in Illustrator sono tutti vettori. Ora potresti dire: perché dovrei aver bisogno dei vettori? Ecco perché. Un cambiamento sta avvenendo nel web design. Cinque anni fa, qualsiasi dispositivo che visitava una pagina Web aveva una densità di pixel tra 70 e 80 ppi. La maggior parte ovviamente sono 72 ppi.

Oggi, oltre alla risoluzione dello schermo, anche la densità dei pixel è molto variabile. Ciò significa che, quando si progetta solo in pixel, i progetti possono apparire davvero su diverse risoluzioni in scala – per esempio, le cose possono diventare davvero minuscole – o peggio, si potrebbe finire per ottenere immagini di qualità davvero bassa (come nel caso di Safari Mobile quando si utilizzano icone a 72 ppi).

Ecco dove Illustrator è utile: puoi progettare su una certa scala e successivamente esportare tutto in qualsiasi ppi che desideri, assicurandoti che la tua pagina web appaia nitida su qualsiasi dispositivo.

Potrei andare avanti per un po ‘. Ma per rispondere alla tua domanda, progettare a una certa risoluzione non è davvero il punto di partenza. Ti suggerirei prima di tutto di concentrarti sul responsive web design. Non è solo un insieme di regole, è un modo di pensare.

Il miglior articolo per iniziare è Responsive Web Design. In bocca al lupo!

È da un po ‘di tempo che non mi occupo della progettazione di siti Web, ma la mia comprensione da quando Google ha fatto il suo annuncio in merito alla comparabilità dei siti Web con i dispositivi mobili nel 2015 (The Mobile Mobile Update & Mobilegeddon Explained) è nell’interesse di chiunque progettare siti Web utilizzando ciò che viene chiamato un formato “reattivo”.

I design responsive del sito sono quelli che presentano un sito progettato in base al tipo di dispositivo che sta tentando di accedervi.

Desktop e laptop ottengono la versione full size in cui tablet e smartphone hanno un design ottimizzato per i loro schermi più piccoli.

Quindi la risposta alla tua domanda è … “Le sue diverse dimensioni dipendono da ciò che qualcuno la sta visualizzando”.

Esistono 3 tipi di layout fisso, layout ampio e layout fluido.

  1. Layout fisso: la dimensione più utilizzata per questo layout è 980 px, 1000 px.
  2. Layout largo: questo è molto più flessibile del layout a scatola. Qui progetti in 1400px. Una volta che visualizzerai questo disegno nel monitor largo 1366px, questo disegno diventerà un layout fluido che significa 100% di larghezza e se visualizzi nel monitor largo 1920px il design andrà solo a 1400px. In questa opzione di layout puoi definire la tua larghezza come 1200px, 1400px, 1440px, 1600px.
  3. Layout fluido: è possibile rendere qualsiasi dimensione da 1000px a 1920px di larghezza.

Dipende dai dispositivi di destinazione. Di solito le dimensioni sono 1024 × 768 (990x …) o 1200x … per computer desktop e 320x … per smartphone ecc.

320 px * a.

Dipende dal tuo pubblico e dal tuo prodotto, ma le dimensioni che scelgo sono

320 × 480

768 × 1024

1366 × 768