Come progettare una splendida pagina di destinazione per un sito Web portfolio con Adobe Muse

0

L'elenco delle cose da fare e da non fare per un sito web di portfolio è infinito. Tuttavia, al di fuori di questi elenchi, ho trovato due cose in comune: evitare di popolare una singola pagina con tutto e mantenere la pagina di destinazione e la navigazione il più semplice, attraente e facilmente accessibile possibile.

Questo è ciò che imparerai con questo tutorial. Oltre a questo, dovrai:

  • Scopri come ottimizzare la grafica per un sito Web Muse utilizzando Adobe Illustrator (essenziale per velocizzare il caricamento dei contenuti del sito)
  • Essere in grado di visualizzare i contenuti in prospettiva utilizzando Photoshop.
  • Scopri come progettare una landing page professionale con Adobe Muse.

REQUISITI DI QUESTO TUTORIAL:

Per una corretta comprensione e per creare esattamente ciò che viene mostrato in questo tutorial, dovrai scaricare determinate risorse da varie risorse gratuite. Tuttavia, puoi comunque continuare senza questi.

  • Vai su https://goo.gl/KVL9r1 e scarica questa immagine per l'intestazione. Le sue dimensioni devono essere 1400 x 750 pixel. Ecco uno screenshot dal sito. Metti questa dimensione in scatole di dimensioni personalizzate e scaricala.

  • Vai su http://goo.gl/ZeHxOF e http://goo.gl/BASRSP e scarica il pacchetto di icone dei social media e l'icona della freccia giù.

  • I loghi utilizzati in questo tutorial possono essere scaricati qui (collegamento ipertestuale – il file ‘assets.rar' è allegato all'e-mail)

  • Vai su http://goo.gl/mzw1Xh e scarica questo vettore dello schermo iMac 27" che verrà utilizzato per visualizzare il progetto di "website design".

  • Apri l'applicazione desktop creative cloud e scarica i mini mockup per iPhone e iPad come mostrato di seguito. Verranno aggiunti automaticamente alla libreria di Photoshop.

PASSO #1: COME OTTIMIZZARE LA GRAFICA PER IL WEB IN ADOBE ILLUSTRATOR:

1. Apri il file "eps" delle icone social in Illustrator. Seleziona l'icona di Facebook (versione quadrata) e premi Ctrl+Maiusc+G per separare queste icone.

2. Fai clic all'esterno dell'area di disegno e seleziona nuovamente l'icona di Facebook. Quindi, vai al pannello di trasformazione situato in alto e metti W=19.5, H=19.5 e premi invio.

3. Premere Ctrl+C e quindi Ctrl+N. In questa nuova finestra di dialogo del documento, inserisci "static_facebook_icon" nel campo Nome, L=20 e A=20. Assicurati che i pixel siano selezionati dall'elenco a discesa delle unità. Fare clic su OK.

4. Premi Ctrl+V per incollare l'icona di Facebook e allinearla correttamente.

5. Vai su File > scegli "salva per il Web" (Alt+Maiusc+Ctrl+S). Scegli PNG-24 dall'elenco a discesa situato in alto a destra. Fare clic su Salva e salvarlo nella posizione desiderata. Inoltre, salva il file dell'illustratore (Ctrl+S)

6. Ripeti i passaggi da 2 a 5 per le icone di Twitter, Google Plus, LinkedIn e Behance e salvale per il Web.

NOTA: abbiamo scelto il formato png perché ha una grande trasparenza, dimensioni relativamente inferiori e sono i migliori per icone e vettori.

7. Allo stesso modo, ottimizza queste cinque icone per l'immagine dell'intestazione. Questa volta, cambia il loro colore in bianco. Per fare ciò, seleziona l'icona, vai al menu a discesa Riempimento situato in alto a sinistra sotto il menu dell'applicazione, seleziona il colore bianco e salva per il web. Ora hai 10 icone: 5 grigie e 5 bianche.

8. Successivamente, ottimizza l'icona della freccia giù (colore: bianco, documento L= 30 px, A= 20 px) e salvala per il Web come PNG-24.

9. Ora, crea un nuovo documento di dimensioni 1400 x 750 pixel e chiamalo come header_image. Fare clic su OK.

10. Vai su File > Inserisci e cerca l'immagine che abbiamo scaricato da pexels.com. Fare clic sulla tela per posizionarla e regolarla all'interno della tela.

SUGGERIMENTO: premi "Z" sulla tastiera, tieni premuto il tasto Alt e fai clic sulla tela un paio di volte per ridurre leggermente lo zoom in modo che tutto sia visibile contemporaneamente.

11. Selezionare lo strumento rettangolo dalla casella degli strumenti situata sul lato sinistro della finestra dell'applicazione. Crea un rettangolo e trasformalo in W=1400, H=750px. Quindi, trascina questo rettangolo sull'immagine posizionata.

12. Con questo rettangolo selezionato, vai al menu a discesa Riempi, seleziona il menu delle librerie di campioni situato nell'angolo in basso a sinistra. In questo elenco, vai su "Gradienti" e scegli "Earthtones".

13. Selezionare Earthtone 30 come indicato nello screenshot qui sotto e chiudere questo pannello.

14. Con il rettangolo ancora selezionato, vai alla scheda gradiente situata sul lato destro della finestra dell'applicazione. Se non è presente, premi Ctrl+F9. Fai clic, tieni premuto e trascina il cursore del gradiente centrale all'estrema sinistra.

15. Quindi, all'interno del campo "Opacità" (situato in alto), inserisci 87% e premi invio.

16. Salva questa immagine per il web. Questa volta, scegli JPEG e qualità=86%. Inoltre, salva il file Illustrator.

FASE #2: PREPARAZIONE DELLE RISORSE IN PHOTOSHOP:

17. Apri Adobe Photoshop CC. Vai su File> scegli "Nuovo". Inserisci il nome come ‘ecommerce_design', W=619px e H=310px.

18. Dal pannello Librerie (che si trova sul lato destro), seleziona il mockup di ipad mini che abbiamo scaricato e trascinalo sulla tela.

19. Tieni premuto il tasto Maiusc e aumentane le dimensioni trascinando gli angoli e regolandolo all'interno della tela come mostrato di seguito.

NOTA: potresti voler utilizzare lo strumento zoom. Per passare dallo strumento di zoom a quello di selezione, premi i tasti "Z" e "V" sulla tastiera. Inoltre, se non riesci a trovare il pannello delle librerie (o qualsiasi altro pannello), vai al menu Finestra> seleziona Librerie.

20. Seleziona lo strumento rettangolo e crea un rettangolo di qualsiasi dimensione all'interno della tela (non preoccuparti del suo colore di riempimento). Apparirà una finestra delle proprietà. All'interno di questo, inserisci W=1024px e H=768px e assicurati che l'icona della catena non sia selezionata.

21. Ora, fai clic sull'icona della catena per selezionarla. Metti W=290px e premi invio. Comprimi questo pannello delle proprietà.

22. Nel pannello Livelli situato sul lato destro, seleziona "Rettangolo 1", fai clic con il pulsante destro del mouse e scegli "converti in oggetto avanzato".

23. Quindi, vai al menu di modifica> scegli "Trasformazione libera". Ancora una volta, apri il menu di modifica> trasforma> seleziona ‘distorsione'.

24. Tieni un angolo del rettangolo e fallo coincidere con un angolo dello schermo dell'ipad. Fallo per tutti e quattro gli angoli e premi invio. Avrai il seguente risultato. Utilizzare lo strumento zoom se necessario.

25. Nel pannello Livelli, fare clic con il pulsante destro del mouse sul livello di sfondo ed eliminarlo. Inoltre, rendi invisibile il livello "rettangolo 1" facendo clic sull'icona a forma di occhio alla sua sinistra.

26. Ripeti i passaggi da 18 a 22 per creare un altro rettangolo, convertilo in oggetto intelligente e fallo coincidere in ogni suo angolo con gli angoli dello schermo dell'ipad e premi invio.

27. Rendi visibile il livello "rettangolo 1" e invisibile il livello "ipad".

28. Fai clic con il pulsante destro del mouse sul livello "rettangolo 1" e scegli "modifica contenuto". Verrà aperto in una nuova scheda. Vai su File > Inserisci incorporato, cerca "screen1.webp" che si trova nella cartella Logos che hai scaricato. Fare clic su posto e premere invio. Premi Ctrl+S. Questa modifica verrà aggiornata sul rettangolo 1 nel nostro file principale. Chiudi questa scheda.

29. Allo stesso modo, fallo per il rettangolo 2 con ‘screen2.webp' e salvalo. Sposta i livelli su o giù nel pannello dei livelli in base alle tue preferenze. Elimina il livello ipad.

30. Fai clic con il pulsante destro del mouse su qualsiasi livello rettangolare e scegli "Opzioni di fusione". Apparirà una casella di stile del livello. Seleziona l'ultima opzione che è ‘ombreggiatura' e inserisci i valori come mostrato di seguito.

31. In questa finestra di dialogo, proprio accanto alla modalità di fusione, c'è una casella di colore. Fare clic e scegliere i seguenti valori di colore.

32. Applicare lo stesso effetto ombra esterna anche al secondo livello. Premi Alt+Ctrl+Maiusc+S. Seleziona PNG-24 e fai clic su Salva. Avrai il seguente risultato.

NOTA: Questo è il modo in cui puoi posizionare un sito web o qualsiasi immagine in prospettiva. Devi solo conoscere la risoluzione esatta del dispositivo su cui lo posizionerai. Fallo per i mockup di iphone e imac per la visualizzazione di progetti di "design del logo" e "design del sito Web" come mostrato di seguito.

PASSAGGIO #3: IMPOSTAZIONE DELL'AREA DI LAVORO IN MUSE:

33. Apri Adobe Muse CC. Sarai accolto con una schermata di benvenuto. In "Crea nuovo", fai clic su sito e verrà visualizzata una nuova finestra di dialogo del sito.

NOTA: un altro modo per creare un nuovo sito è andare su File > Nuovo sito o Ctrl+N.

34. In questa finestra di dialogo, c'è un menu a tendina che dice ‘larghezza fluida'. Aprilo facendo clic su di esso e seleziona "Larghezza fissa" e modifica i valori della larghezza della pagina e delle colonne come mostrato di seguito. Il valore del campo ‘gutter' cambierà automaticamente.

35. Espandi l'opzione delle impostazioni avanzate e assicurati che la casella di controllo ‘sticky footer' sia selezionata. Inoltre, assicurati che il sito sia "allineato al centro" all'interno dell'area del browser. Fare clic su OK. Muse ti porterà alla modalità PLAN.

36. Premi Ctrl+S e salva il tuo sito nella posizione desiderata. Ti consiglio di creare una cartella separata per il tuo sito e di salvarla ogni volta che apporti una modifica.

NOTA: la larghezza fluida serve per creare un layout reattivo. Abbiamo scelto la larghezza fissa perché creeremo un effetto di scorrimento che non funziona con i siti fluidi.

37. Fare doppio clic su "A-master" situato in basso in un'area grigia. Dalla casella degli strumenti situata sul lato sinistro della finestra dell'applicazione, selezionare ‘strumento di testo'.

38. Crea una casella di testo sulla tela. Premi Ctrl + T per aprire il pannello di testo e sotto il menu a discesa dei caratteri, cerca i caratteri web e scegli "aggiungi caratteri web".

39. Apparirà una nuova finestra. Seleziona la scheda ‘edge web fonts', cerca e scarica i seguenti font uno per uno:

  • Monotono
  • Telex
  • Numeri
  • Raleway
  • Lato
  • Questioni

Dopo aver scaricato questi caratteri, elimina la casella di testo.

40. Apri il pannello "Livelli" situato sul lato destro o vai al menu Finestra> scegli "Livelli". Fai clic sulla piccola icona della carta con il bordo piegato situata in basso a destra. Fare clic due volte per creare altri due livelli.

41. Fare doppio clic su "livello 1". Apparirà la finestra delle opzioni del livello. Sotto il nome, inserisci "home_header" e fai clic su OK. Ripeti questo processo per altri due livelli e chiamali rispettivamente come "static_header" e "content".

42. Disporre i livelli nell'ordine mostrato di seguito semplicemente trascinandoli verso l'alto o verso il basso e salvare le modifiche.

NOTA: abbiamo inserito i livelli in questo ordine perché vogliamo che la nostra intestazione sia in cima a tutto il resto. I livelli sono un modo efficiente per organizzare e impilare il contenuto del sito, specialmente quando il layout diventa complesso.

43. Selezionare il layer ‘static_header' e comprimere questo pannello.

FASE #4: STABILIRE UN'INTESTAZIONE STATICA:

44. Nella parte superiore della pagina, vedi due guide. La prima è la guida ‘inizio pagina' e la seconda è ‘guida intestazione'. Fai clic, tieni premuto e trascina la guida dell'intestazione in basso e impostala su 80 pixel. Puoi farlo con l'aiuto dei righelli. Questa è la nostra area di intestazione.

45. Seleziona lo strumento rettangolo o premi ‘M' sulla tastiera. Crea un piccolo rettangolo sulla tela e assicurati che il colore del bordo sia "rosso", il che indica che questo oggetto si trova all'interno del livello "static_header".

46. ​​Vai su "Ridimensiona" (o "Trasforma" nelle versioni precedenti di Muse) situato in alto a destra, fai clic e inserisci H=80.

47. Trascina questo rettangolo e mettilo all'interno dell'area dell'intestazione in modo tale che si agganci con le guide ‘parte superiore della pagina' e ‘intestazione'.

48. Ora aumenteremo la larghezza del rettangolo e lo renderemo al 100% per renderlo scalabile per ogni dimensione dello schermo. Espandi il rettangolo su entrambi i bordi e assicurati che si agganci con i bordi della pagina. Quando raggiungerai il bordo, apparirà una guida di colore arancione che indica che l'oggetto è stato agganciato e un messaggio dirà W=100% o W=1400.

49. Con il rettangolo selezionato, fare clic sull'elenco a discesa Riempi sotto il menu dell'applicazione e selezionare il colore bianco.

50. Fare clic sulla parola "tratto" accanto a riempimento. Fai clic sull'icona della catena per spezzarla e inserisci "1" nel campo del peso del tratto inferiore.

51. Successivamente, fai clic sull'elenco a discesa del colore del tratto, inserisci i valori per R, G e B come 235 ciascuno. Quindi, fai clic sull'icona della carta con bordo piegato per creare un nuovo campione. Apparirà una casella di opzioni del campione. Fare clic su OK e salvare le modifiche.

52. Vai su File > Inserisci. Cerca "static_logo.webp" e fai clic su Apri. Il cursore cambierà il suo aspetto in una pistola posizionata caricata con un'immagine. Fare clic sulla tela per posizionarlo.

53. Quindi, sposta questa immagine sul rettangolo dell'intestazione e allineala al suo centro verticale (una linea blu indicherà quando è centrata) e agganciala al bordo sinistro come mostrato di seguito.

54. Ancora una volta, vai su File> posiziona e seleziona tutte le icone statiche dei social media che abbiamo ottimizzato utilizzando Illustrator. Fare clic su Apri. Vedrai che la pistola del posto avrà un numero (5) che indica cinque immagini caricate. Se vuoi passare a un'altra icona per posizionarla prima, puoi utilizzare i tasti freccia sulla tastiera. Posizionali uno per uno.

55. Seleziona tutte le icone e vai al pannello "Allinea" situato accanto a Ridimensiona in alto a destra. Nel menu a discesa "Allinea a", seleziona "allinea all'oggetto chiave".

56. Quindi, inserisci 11 nel campo fornito sotto l'opzione "Distribuisci spaziatura". Fai clic sulle opzioni "A" e "B" come mostrato nello screenshot qui sotto.

57. Con queste icone selezionate, fai clic con il pulsante destro del mouse e scegli ‘gruppo' o Ctrl+G. Sposta questo gruppo sul rettangolo dell'intestazione e aggancialo al bordo destro in allineamento con il logo come mostrato di seguito.

58. Crea una casella di testo e digita HOME al suo interno. Premi Ctrl+T e seleziona Font: Telex, Dimensione: 13, colore: nero, allineato al centro e 120% in avanti. Regola la larghezza e l'altezza di questa casella di testo in base alla dimensione del carattere.

59. Allo stesso modo, crea altre quattro caselle di testo per LAVORO, SERVIZI, CONTATTO e INFORMAZIONI. Selezionali tutti, vai al pannello di allineamento e ripeti ciò che abbiamo fatto con le icone dei social media. Questa volta, modifica la spaziatura di distribuzione in 50. Raggruppali e spostali sul rettangolo dell'intestazione come mostrato di seguito.

60. Ora, fisseremo questi oggetti nella parte superiore del browser che renderà statica la nostra intestazione. Significa che verrà sempre visualizzato nella parte superiore del browser indipendentemente dallo scorrimento. Per fare ciò, seleziona il rettangolo dell'intestazione, vai su "Pin" situato in alto a destra e fai clic all'interno del suo quadrato centrale superiore come mostrato di seguito.

61. Allo stesso modo, fissa il logo in alto a sinistra, il gruppo di menu in alto al centro e il gruppo di icone social in alto a destra. La nostra intestazione statica è pronta.

PASSO #5: STABILIRE IL PIÈ DI PAGINA:

62. Vedrai tre guide nella parte inferiore: piè di pagina, parte inferiore della pagina e parte inferiore del browser. Fai clic, tieni premuto e trascina la guida "parte inferiore del browser" e impostala a 770 pixel con l'aiuto dei righelli. Quindi, trascina la guida "a piè di pagina" e agganciala alla guida "in fondo alla pagina". Questa è la nostra area a piè di pagina.

63. Crea un rettangolo all'interno di quest'area di H=270 e L=546, fai coincidere i suoi lati superiore e inferiore rispettivamente con il piè di pagina e la parte inferiore delle guide del browser.

64. Con questo rettangolo selezionato, fai clic sulla parola "tratto" e applica solo il tratto superiore del peso "1" (valori del colore del tratto: R=235 G=235 B=235). Vai al pannello "allinea" e sotto allinea oggetti, seleziona "allinea centri orizzontali" (è la seconda opzione).

65. Posiziona static_logo.webp e aggiungi il testo all'interno di questo rettangolo come mostrato di seguito. (Font testo: Arimo, Dimensione: 14, Colore: R=37 G=37 B=37, Allineato al centro e 120% in avanti).

66. Il simbolo del copyright che vedi prima del 2016 può essere aggiunto dal pannello "Glifi" situato sul lato destro della finestra dell'applicazione. Se non è presente, vai su Finestra> Glifi. Il nostro piè di pagina è pronto.

PASSO #6: CREAZIONE DELL'INTESTAZIONE DELLA HOME PAGE E DELL'EFFETTO DI SCORRICOLO:

67. Chiudi la pagina principale e torna alla modalità di pianificazione.

68. Aprire la pagina "Home" facendo doppio clic su di essa. Apri il pannello dei livelli, seleziona il livello ‘home_header' e comprimi il pannello.

69. Fai spazio qui trascinando il livello del piè di pagina a 4000 pixel con l'aiuto dei righelli.

70. Ora, crea un rettangolo di larghezza 100%. L'intera larghezza, come abbiamo fatto in precedenza, può essere ottenuta espandendo il rettangolo dal suo bordo sinistro e destro e agganciandolo a entrambi i bordi della pagina.

71. Espandi il rettangolo verso l'alto trascinandone il bordo superiore e aggancialo alla parte superiore della guida della pagina come mostrato di seguito.

72. Vai al pannello di ridimensionamento, metti H=750px.

73. Con il rettangolo selezionato, fai clic sulla parola "Riempi" (non sull'elenco a discesa dei colori) e fai clic su "aggiungi immagine". Cerca "header_image.webp" che abbiamo scaricato da Pexels e ottimizzato in Illustrator. Nel menu a discesa "adattamento", seleziona "ridimensiona per riempire" e posizionalo nell'angolo in alto a sinistra.

74. Nella stessa casella delle opzioni ‘Riempi', accanto al riempimento, c'è un'opzione chiamata ‘Scorri'. Fare clic e inserire 0 nei campi di movimento iniziale e finale. Ciò significa che l'immagine rimarrà ferma e il contenuto si sposterà creando un effetto di scorrimento piacevole e visivamente accattivante.

75. Crea una casella di testo e digita "INFORMAZIONI SUL NOSTRO TEAM". Font: Telex, Dimensione: 13, Allineato a sinistra, colore: bianco e iniziale: 120%. Spostalo e posizionalo nell'angolo in alto a sinistra dell'immagine come segue.

76. Posiziona tutte le icone social che abbiamo ottimizzato per la nostra immagine di intestazione. Allineali alla stessa distanza come abbiamo fatto per l'intestazione statica. Raggruppali e posizionali nell'angolo in alto a destra dell'immagine come segue.

77. Crea una casella di testo. Dovrebbe essere di L=944, H=92. Digita "WE DESIGN THE WEB" al suo interno. Carattere: monotono, dimensione: 72, allineato al centro, 120% in avanti. Cambia il colore della parola ‘WEB' in R=41 G=171 B=226 e bianco per il resto.

78. Crea altre tre piccole caselle di testo per SERVIZI, CONTATTI e BLOG. Carattere: telex, dimensione: 13, colore bianco, allineato al centro e 120% in primo piano.

79. Posiziona l'immagine ‘header_logo.webp'. Regola il logo e queste quattro caselle di testo come segue.

80. Vai alla libreria "Widget" situata sul lato destro. Espandi la sezione "Pulsanti". Seleziona "Pulsante di stato" e trascinalo nell'area di disegno. Chiudi il pannello dei widget.

81. Seleziona attentamente il piccolo cerchio all'interno di questo pulsante e premi Elimina.

82. Fare doppio clic all'interno della casella di testo Lorem Ipsum, selezionare l'intero testo, eliminarlo e digitare ‘PORTFOLIO'.

83. Selezionare lo strumento di selezione (strumento freccia) dalla casella degli strumenti. Vai al pannello di testo (Ctrl+T) e modifica la formattazione del testo "portfolio" come segue.

84. Ora seleziona il pulsante dello stato e ridimensionalo a L=177, A=43. Regola correttamente la casella di testo all'interno del pulsante.

85. Selezionare il pulsante. Vai all'opzione "raggio d'angolo" (che si trova accanto al tratto). Fai clic su tutti e quattro gli angoli per renderli piatti.

86. Con il pulsante selezionato, guarda nell'angolo in alto a sinistra, sotto il menu dell'applicazione. Noterai che ‘state button' è scritto in grassetto. Questa è nota come "area di selezione corrente". Ti permette di sapere cosa hai selezionato.

87. Proprio accanto c'è ‘Normale'. Fai clic e avrai quattro stati.

88. Per lo stato Normale, cambia il colore di riempimento in "nessuno" e il colore del tratto in bianco.

89. Seleziona lo stato ‘rollover', cambia sia il colore di riempimento che quello del tratto in R=41 G=171 B=226.

90. Per lo stato "mouse down" e "attivo", le modifiche richieste verranno applicate automaticamente.

91. Seleziona di nuovo il suo stato normale, espandi il pannello "Transizione" situato in basso. Seleziona la casella di controllo che dice "Dissolvenza" e inserisci i valori come mostrato di seguito. Salva le modifiche.

92. Posiziona l'immagine ‘down_arrow.webp' sotto il pulsante. Dovresti avere il seguente risultato.

93. Il nostro colpo di testa in casa è pronto. Vai a File > Pagina di anteprima nel browser (Ctrl+Maiusc+E) e controlla se tutto funziona correttamente.

PASSO #7: AGGIUNTA DI CONTENUTO:

94. Torna a Muse, apri il pannello dei livelli, seleziona il livello "contenuto" e comprimi il pannello.

95. Scorri verso il basso fino allo spazio bianco sottostante e crea una casella di testo di L=464, A=60. Digita "IL NOSTRO LAVORO RECENTE". Carattere: Raleway light, dimensione: 46, colore: nero, allineato al centro e 120% in avanti. Ora seleziona la parola "RECENTE" e cambia il carattere in "Raleway Bold".

96. Crea altre due caselle di testo. Uno con L=376, H=165 e l'altro con L=376, H=363.

97. Fare doppio clic all'interno del primo e digitare ‘WEBSITE DESIGN'. Carattere: Raleway Extra Light, dimensione: 77, colore: nero, allineato a sinistra, 100% iniziale.

98. Fai doppio clic all'interno del secondo e incolla del testo fittizio da lipsum.com come segue.

  • Per l'intestazione principale – Carattere: Lato Bold, dimensione: 30, colore: R=33 G=42 B=52, allineato a sinistra e 120% in avanti.
  • Per il paragrafo principale – Font: Lato light, dimensione: 21, colore: R=57 G=57 B=57, allineato a sinistra e 120% in avanti.
  • Per l'intestazione "Testimonianza del cliente", uguale all'intestazione principale ma la dimensione è 21.
  • Per il paragrafo della testimonianza: come il paragrafo principale ma il carattere è "Lato Light Italic"

99. Seleziona il pulsante di stato ‘portafoglio', copialo e incollalo sotto la casella di testo che abbiamo creato nel passaggio precedente. Cambia il testo da portfolio a "VISUALIZZA SITO"

  • Per stato normale – Riempimento: nessuno, tratto e colore del testo: nero.
  • Per lo stato di rollover – Colore di riempimento e traccia: R=41 G=171 B=226 e colore del testo: bianco.

100. Posiziona l'immagine ‘imac con mockup del sito web'. Disporre l'immagine, le caselle di testo ei pulsanti come segue.

101. Scorri verso il basso fino allo spazio bianco e crea un rettangolo di L=1200, A=5. Applica il tratto superiore di peso ‘1' e colore R=235 G=235 B=235. Posizionalo come segue. Questo funzionerà come separatore.

102. Copia le caselle di testo e i pulsanti che creiamo nei passaggi da 92 a 95, incollali sotto il separatore. Cambia il testo della prima casella in ‘LOGO DESIGN' e il testo del pulsante in ‘VISUALIZZA LIVE'.

103. Posiziona "iphone with logo mockup" e disponili come segue.

104. Copia e incolla il separatore dopo questo.

105. Allo stesso modo, copia e incolla le caselle di testo e il pulsante sotto questo separatore. Modifica il testo della prima casella in "E-COMMERCE".

106. Posiziona "ecommerce_design.webp" che abbiamo creato e ottimizzato nei passaggi da 15 a 30 con Photoshop. Disporre tutto come segue.

107. Ora, crea un rettangolo di L=1004, H=363 senza riempimento e tratto superiore di peso ‘1' e colore: R, G, B=235 ciascuno.

108. All'interno di questo rettangolo, crea due caselle di testo. Nella prima, digita – ‘WHAT WE BELIEVE IS' (Font: Raleway light, dimensione: 35, colore: R, G, B=37 ciascuno, allineato al centro e 100% iniziale). Seleziona la parola ‘CREDI' e cambia i caratteri in ‘Raleway grassetto'.

109. Nella seconda casella di testo, digita la famosa citazione di Milton Glaser come mostrato di seguito (Carattere: Lato Light Italic, dimensione:70, colore: R,G,B=37 ciascuno, allineato al centro e 120% in avanti.

110. Copia e incolla uno qualsiasi dei pulsanti di stato di cui sopra e cambia il testo in "GUARDA IL NOSTRO LAVORO". Disporre tutto come segue.

PASSO #8: COLLEGAMENTO:

111. Dalla casella degli strumenti, seleziona ‘link anchor' o premi ‘A' sulla tastiera. Il cursore cambierà il suo aspetto in una pistola posizionata caricata con un'ancora. Posiziona questo ancoraggio sopra la casella di testo "IL NOSTRO LAVORO RECENTE" come mostrato di seguito.

112. Apparirà una finestra di dialogo con le opzioni di ancoraggio. All'interno del campo del nome, inserisci ‘recent_work'.

113. Seleziona il pulsante down_arrow image place below portfolio. Vai al menu a discesa "Collegamenti ipertestuali" situato in alto e seleziona "lavoro_recente". Salva le modifiche e visualizza l'anteprima del sito (Ctrl+Maiusc+E).

PASSO #9: AGGIUNTA DI TESTO ALTERNATIVO, METADATI, LEVEL TAG E FAVICON:

114. Il testo alternativo è un modo per far capire ai motori di ricerca il significato della materia contenuta in un'immagine e deve essere fornito ad ogni singola immagine che aggiungi al tuo sito. Per fare ciò, fai clic con il pulsante destro del mouse su una delle tre immagini che abbiamo inserito e scegli "modifica proprietà immagine".

115. Apparirà una finestra di dialogo delle proprietà dell'immagine. Vedrai due campi qui. Uno è ‘tool tip' e l'altro è ‘alt text'. Le differenze fondamentali tra i due sono le seguenti:

SUGGERIMENTO PER GLI UTENSILI TUTTO IL TESTO
  • Questo è il titolo che appare quando passi con il mouse sopra un'immagine nel browser.
  • In HTML, questo è indicato come <title>tag.
  • Queste sono le informazioni sul soggetto dell'immagine.
  • In HTML, questo è indicato come <alt>tag.
  • Dovrebbe essere breve ma descrittivo.
  • Non compare nel browser ma viene scritto automaticamente all'interno del codice.

NOTA: dovresti cercare sul Web metodi e considerazioni importanti per l'aggiunta di testo alternativo e metadati poiché sono aspetti cardinali per una migliore SEO.

116. Per aggiungere metadati, torna alla vista in pianta, fai clic con il pulsante destro del mouse sulla home page e scegli "proprietà pagina". Apparirà una nuova finestra contenente tre schede: layout, metadati e opzioni. Passa da una scheda all'altra, esplora le opzioni e aggiungi parole chiave pertinenti.

117. Un altro fattore importante da considerare prima di portare il sito online è modificare alcune proprietà del testo per aggiungere tag di livello.

NOTA: Normalmente, quando aggiungi contenuti scritti su un sito web, rendi i titoli in grassetto e più grandi dei paragrafi (o altro testo) per illustrare la differenza tra loro. Noi, come esseri umani, possiamo riconoscere questa differenza. Ma il problema è che il browser non capisce quale parte del tuo testo è l'intestazione e quale è il paragrafo a meno che tu non assegni tag di livello designati a ciascuno di essi.

Sicuramente presenterà la tua pagina online come l'hai progettata, indipendentemente dal fatto che tu abbia applicato i tag o meno (a causa dei CSS), ma per creare un sito SEO friendly è necessario utilizzare questi tag descrittivi.

118. Per fare ciò, seleziona il testo, vai al pannello del testo (Ctrl+T) e in basso vedrai un menu a discesa contenente tutti i tag. Selezionali di conseguenza e salva le modifiche.

119. Vai su File > Proprietà del sito. Nella scheda contenuto, l'ultima opzione è "Favicon" (nelle versioni precedenti di Muse, è nella scheda Layout). Quando passi il mouse sopra la parola "Favicon", apparirà un suggerimento che descrive di cosa si tratta e quali dovrebbero essere le sue dimensioni appropriate. È vantaggioso aggiungere una favicon in quanto serve a far risaltare il tuo marchio e a rendere il tuo sito facilmente identificabile se gli utenti lo hanno aggiunto ai segnalibri.

PASSO #10: ESPORTAZIONE DEL SITO:

120. Alla fine, vai su File > Esporta come HTML (Ctrl+E). Nel campo dell'URL del sito, inserisci www.squaremaze.com e seleziona la posizione in cui desideri esportare il sito. Fare clic su OK. La nostra Landing Page è ora pronta. Puoi visualizzarlo in anteprima (file ‘index.html') in qualsiasi browser desideri e testarne l'aspetto e le prestazioni.

RISULTATO FINALE:






CONCLUSIONE

L'utilizzo di altre applicazioni come Illustrator, Photoshop, Fireworks, Fuse e Animate per creare risorse di qualità per un sito Muse si è sempre dimostrato vantaggioso e ha ottenuto risultati eccezionali. Questo era solo un approccio alla progettazione con questo fantastico strumento. Vai avanti ed esplora di più. Grazie.

Fonte di registrazione: instantshift.com

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More