Approccio al Web Design

Le vostre creatività migliori

Moderatori: Gattinara, ModiMaccanici

Gattinara
Web&Designer Expert
Web&Designer Expert
Avatar utente
Iscritto il: gio, 11 ago 2011 15:16
Messaggi: 761
Località: Roma
Contatta:

Top

Oggetto del messaggio: Re: Approccio al Web Design

Messaggio Inviato: mer, 03 set 2014 11:35

faxus ha scritto:Ci vorrà del tempo, anche se la parte detta è quasi pronta.
Attendo novelle, con cavasugheri a portata di mano.
404 ha scritto:Il link che ha inserito Gattinara non ha nessun effetto parallasse, sono immagini con posizione fixed.
Indubbiamente: adottando come esempio il primo link ho incautamente esteso il concetto ad effetti erroneamente definiti come tali (non che questa circostanza giustifichi la svista).
404 ha scritto:Gattinara ti ha dato le basi fondamentali per poter essere tu stesso in grado di implementare qualsiasi cosa
Per nulla affatto - siamo ancora agli inizi - ma questo non gli impedisce di sperimentare (fido sia da sempre la maniera migliore per progredire), credo solo che l'approccio migliore stia nel seguire, da un lato, l'evoluzione di una (elementare) struttura portante per appropriarsi dei fondamenti e, dall'altro, orchestrarne altre traverso sperimentazione. Miscelare le due cose all'interno del suo primo costrutto può rivelarsi di molto dispersivo.
ilario_seb ha scritto:Quel sito d'esempio è bellissimo, penso non me lo scorderò mai!
Lieta ti abbia divertito: ogni volta che lo vedo mi stupisco di come il cattivo gusto, se portato ad inconsueti eccessi (l'onda di Kanagawa appaiata ad elementi lignei - con l'aggiunta di boa/faro vettoriale con nuvole ed uccellotti ritagliati è un connubio singolarmente delirante), giunga persino a connaturare bizzarre fascinazioni grafiche.
"Chiunque è degno di un ombrello"
Nikolàj Vsévolodovic Stavrogin

"Chiunque a quarant'anni non conosce emorroidi"
Armand Vedel
ilario_seb
Maccanico attivo
Maccanico attivo
Avatar utente
Iscritto il: dom, 19 ago 2012 23:27
Messaggi: 276
Oggetto del messaggio: Re: Approccio al Web Design

Messaggio Inviato: mer, 03 set 2014 13:52

Ciao, devi fare molta attenzione a cosa inserisci nel tuo sito visto che ti "offri" come web designer.
Ciao grazie delle info, per il momento non mi offrirò come web designer, visto che sono praticamente solo agli inizi, e non potrei offrire un servizio professionale e pulito, ma mi presenterò come grafico
Effetti come il parallasse danno un valore aggiunto, ma anche no, e nel tuo caso rischi un autogol, semplicemente perché saresti l'ennesimo clone di una grande quantità di templates venduti con questo ed altri effetti.
Per come la penso non credo di potermi far autogol, è vero che sicuramente sarà pieno di template che offrono l'effetto parallasse, ma non l'ho visto così diffuso tra i siti, magari sbaglio, ma credo che possa rendere la struttura leggermente più dinamica e interessante, anche perhcè non ho intenzione di farlo diventare invasivo, cercherò di implementarlo senza intaccare la semplicità del layout sviluppato finora, magari una volta messo potrò pur decidere che non mi convince e toglierlo, chissà
Se vuoi dimostrare le tue competenze devi averle, oppure scegli uno dei tanti script jQuery e lo implementi in un tuo prosismo lavoro nel sito di un cliente in cui l'effetto parallasse è fondamentale.

Gattinara ti ha dato le basi fondamentali per poter essere tu stesso in grado di implementare qualsiasi cosa, nel caso dell'effetto parallasse esistono diversi script, il più famoso è Stellar, a questo link trovi documentazione ed esempi:
Sicuramente se in futuro avrò bisogno di implementarlo nel sito di un ipotetico cliente lo farò, ma per il momento non lo voglio mettere per far lo "sborone" ma semplicemente per i motivi detti sopra. Leggerò i documenti linciati il prima possibile
Attendo novelle
Idem :D
Per nulla affatto - siamo ancora agli inizi - ma questo non gli impedisce di sperimentare (fido sia da sempre la maniera migliore per progredire), credo solo che l'approccio migliore stia nel seguire, da un lato, l'evoluzione di una (elementare) struttura portante per appropriarsi dei fondamenti e, dall'altro, orchestrarne altre traverso sperimentazione. Miscelare le due cose all'interno del suo primo costrutto può rivelarsi di molto dispersivo.
Idem 2.0
Lieta ti abbia divertito: ogni volta che lo vedo mi stupisco di come il cattivo gusto, se portato ad inconsueti eccessi (l'onda di Kanagawa appaiata ad elementi lignei - con l'aggiunta di boa/faro vettoriale con nuvole ed uccellotti ritagliati è un connubio singolarmente delirante), giunga persino a connaturare bizzarre fascinazioni grafiche.
Lo trovo veramente uno spunto interessante

EDIT: Tornando al sito, noto che alcune immagine non presentano una risoluzione (a mio parere) accettabile, sarà che avrò il complesso del FULLHD, non dico sgranate ma quasi, posso aumentare la risoluzione senza appesantire troppo il sito?
ilario_seb
Maccanico attivo
Maccanico attivo
Avatar utente
Iscritto il: dom, 19 ago 2012 23:27
Messaggi: 276
Oggetto del messaggio: Re: Approccio al Web Design

Messaggio Inviato: lun, 08 set 2014 00:19

Eccomi qui, un po assente per via degli incombenti esami, il 16 Settembre ho il primo purtroppo.
Ho buttato giù una pagina 404, e sto iniziando a pensare una pagina che faccia capire in modo simpatico a tutti gli utenti con browser preistorici di fare un upgrade.
Ho notato (da iphone, non so da altri dispositivi poiché non ne posseggo) che la pagina di bozza il 90% delle volte che vien caricata mantiene il layout desktop invece che switchare a quello mobile, sia portrait che landscape, è il primo bug che dovrò risolvere? Stranamente la cosa mi entusiasma invece che buttarmi giù!

Allego qui il Jpeg della 404, ci tengo a precisare che l'illustrazione dell'alce non è mia, la trovai sull'internet e l'ho vettorializzata.
Mi piaceva il contrasto che da la pagina con il resto del sito, tutto quel dark fa subito capire che c'è qualcosa che non va (oltre al messaggio bello esplicito con il 404 sparato in grosso)

http://i.imgur.com/YEZ6jWM.jpeg
v2
http://i.imgur.com/JWESr0N.jpeg

Aspetto notizie :D
Gattinara
Web&Designer Expert
Web&Designer Expert
Avatar utente
Iscritto il: gio, 11 ago 2011 15:16
Messaggi: 761
Località: Roma
Contatta:

Top

Oggetto del messaggio: Re: Approccio al Web Design

Messaggio Inviato: lun, 08 set 2014 08:51

ilario_seb ha scritto:EDIT: Tornando al sito, noto che alcune immagine non presentano una risoluzione (a mio parere) accettabile, sarà che avrò il complesso del FULLHD, non dico sgranate ma quasi, posso aumentare la risoluzione senza appesantire troppo il sito?
Massimizzi il browser a risoluzioni ben maggiori di 1800px, deduco.
Tratteremo la specifica/ulteriore ottimizzazione delle immagini (sia per display maggiorati/retina che per Phone) più avanti, non temere; per i background (quali il bannerone, ad esempio) sarà bastante integrare delle query ad hoc mentre, per le immagini inline, le possibili procedure sono un minimo più complesse, ma nulla di preoccupante.
ilario_seb ha scritto:Eccomi qui, un po assente per via degli incombenti esami, il 16 Settembre ho il primo purtroppo.
Ho buttato giù una pagina 404, e sto iniziando a pensare una pagina che faccia capire in modo simpatico a tutti gli utenti con browser preistorici di fare un upgrade.
In bocca al lupo per gli esami, innanzitutto :)
Conviene scegliere la prima delle 404 (integrante menu di navigazione).
ilario_seb ha scritto:Ho notato (da iphone, non so da altri dispositivi poiché non ne posseggo) che la pagina di bozza il 90% delle volte che vien caricata mantiene il layout desktop invece che switchare a quello mobile, sia portrait che landscape, è il primo bug che dovrò risolvere? Stranamente la cosa mi entusiasma invece che buttarmi giù!
Spiacente di deluderti: nessun bug.
L'incorretta visualizzazione dipende dalla momentanea assenza del meta viewport (che integreremo, insieme ai meta tag principali, non appena terminata la index).

A presto (entro domani posterò novelle indettature).
"Chiunque è degno di un ombrello"
Nikolàj Vsévolodovic Stavrogin

"Chiunque a quarant'anni non conosce emorroidi"
Armand Vedel
faxus
Pro-Expert 
Pro-Expert 
Avatar utente
Iscritto il: lun, 02 giu 2014 15:12
Messaggi: 26207
Località: Due Sicilie
Contatta:

Top

Oggetto del messaggio: Re: Approccio al Web Design

Messaggio Inviato: lun, 08 set 2014 15:08

Gattinara ha scritto:... Tratteremo la specifica/ulteriore ottimizzazione delle immagini (sia per display maggiorati/retina che per Phone) più avanti, non temere; per i background (quali il bannerone, ad esempio) sarà bastante integrare delle query ad hoc mentre, per le immagini inline, le possibili procedure sono un minimo più complesse, ma nulla di preoccupante.)...
Ecco questo interesserà anche me, più che altro per chiarirmi le idee, invece che andare a metterci le mani vedendo che qualcosa non va....

Finora non me ne ero preoccupato molto, non avevo tenuto presente la cosa, semplicemente.
O, forse, inconsciamente, mi rifiutavo di prendere in considerazione di andare a implementare i fogli stile e raddoppiare le foto sui lavori già fatti...
Poi mi sono accorto che in effetti le immagini che compaiono su i vecchi siti non appositamente preparati per il retina, quando vengono visualizzati su questi, non presentano bordature ben definite.

Adesso sono disponibili anche template già ottimizzati o anche un apposito java script.
In questo modo si evita di caricare le immagini in doppio formato, caricando soltanto quelle x2.
Ma vorrei capire bene la differenza tra i CSS preparati per i retina e l'uso di retina.js
Gattinara
Web&Designer Expert
Web&Designer Expert
Avatar utente
Iscritto il: gio, 11 ago 2011 15:16
Messaggi: 761
Località: Roma
Contatta:

Top

Oggetto del messaggio: Re: Approccio al Web Design

Messaggio Inviato: lun, 08 set 2014 16:55

La differenza nel gestire query ottimizzate per retina risiede semplicemente nella sintassi (integrante specifiche pixel-ratio) ma, a parte alcune eccezioni (come il nostro lenzuolone), fido convenga evitare il più possibile l'integrazione di immagini tramite CSS background.
Uno dei moventi è il conseguente suicidio SEO e l'altro (non legato all'indicizzazione, ma semanticamente importante) è l'inappropriata "simulazione" di contenuti HTML traverso CSS.
Per le immagini inline le soluzioni JS rimangono al momento le migliori (vista la scarsa compatibilità coeva dei browser - sia desktop che mobile - verso l'attributo srcset).
"Chiunque è degno di un ombrello"
Nikolàj Vsévolodovic Stavrogin

"Chiunque a quarant'anni non conosce emorroidi"
Armand Vedel
ilario_seb
Maccanico attivo
Maccanico attivo
Avatar utente
Iscritto il: dom, 19 ago 2012 23:27
Messaggi: 276
Oggetto del messaggio: Re: Approccio al Web Design

Messaggio Inviato: lun, 08 set 2014 18:39

Massimizzi il browser a risoluzioni ben maggiori di 1800px, deduco.
Lo schermo più grande che utilizzo è un 2550x1440, ma anche sul 1400x900 del MbP da 15" le vedo con risoluzione un po bassa, ma ripeto, son un po' complessato con la risoluzione massima, quindi magari quello che per me si vede male si vede bene per il resto del mondo.
Tratteremo la specifica/ulteriore ottimizzazione delle immagini (sia per display maggiorati/retina che per Phone) più avanti, non temere; per i background (quali il bannerone, ad esempio) sarà bastante integrare delle query ad hoc mentre, per le immagini inline, le possibili procedure sono un minimo più complesse, ma nulla di preoccupante.
Non son mai stato così entusiasta di dover studiare qualcosa, davvero grazie mille per starmi appresso!
Conviene scegliere la prima delle 404 (integrante menu di navigazione).
Ok per la versione col nav, son ancora indeciso se farla col background bianco o nero però.
Spiacente di deluderti: nessun bug.
L'incorretta visualizzazione dipende dalla momentanea assenza del meta viewport (che integreremo, insieme ai meta tag principali, non appena terminata la index).

A presto (entro domani posterò novelle indettature).
Arriverà, ne son sicuro!
Gattinara
Web&Designer Expert
Web&Designer Expert
Avatar utente
Iscritto il: gio, 11 ago 2011 15:16
Messaggi: 761
Località: Roma
Contatta:

Top

Oggetto del messaggio: Re: Approccio al Web Design

Messaggio Inviato: lun, 08 set 2014 20:35

ilario_seb ha scritto:Lo schermo più grande che utilizzo è un 2550x1440, ma anche sul 1400x900 del MbP da 15" le vedo con risoluzione un po bassa, ma ripeto, son un po' complessato con la risoluzione massima, quindi magari quello che per me si vede male si vede bene per il resto del mondo.
Scrivendo "complessato con la risoluzione massima" intendevi dire che sei solito far occupare al browser l'intero spazio disponibile sullo schermo o che la sua finestra supera in larghezza la misura che abbiamo adottato per il bannerone (1800px) rendendo l'immagine sgranata?
Nel primo caso capisco il massimizzare la finestra del browser a tutto schermo in un notebook da 15" (retina o meno), ma mi sembra un poco atipico tenerla a pieno ingombro anche in un desktop da 27" (al quale, immagino, appartenga la risoluzione 2560x1440); persino nei 21" (perlomeno in modelli con minima risoluzione 1920x1080) si è solitamente usi lasciare il desktop a vista, lateralmente.
Difatti la maggioranza dei siti occupa solo apparentemente il 100% della larghezza del browser integrando, in realtà, una griglia interna atta ad arginare l'eccessivo svaccamento orizzontale dei contenuti (in particolare testuali).

Probabilmente ho capito male e, in ogni caso, la mia non è una contestazione (ci mancherebbe) ma una semplice curiosità: ciascuno è libero di massimizzare i browser a piacimento.
ilario_seb ha scritto:Ok per la versione col nav, son ancora indeciso se farla col background bianco o nero però.
Io proverei un fondo grigio (ché bianco si confonderebbe con il nav).
"Chiunque è degno di un ombrello"
Nikolàj Vsévolodovic Stavrogin

"Chiunque a quarant'anni non conosce emorroidi"
Armand Vedel
ilario_seb
Maccanico attivo
Maccanico attivo
Avatar utente
Iscritto il: dom, 19 ago 2012 23:27
Messaggi: 276
Oggetto del messaggio: Re: Approccio al Web Design

Messaggio Inviato: lun, 08 set 2014 21:08

Io proverei un fondo grigio (ché bianco si confonderebbe con il nav).
Esattamente quello che ho detto alla mia ragazza, ma lei lo preferiva in bianco, si sa, non è carino chiedere un consiglio e non seguirlo poi :P
3f3f3f sia allora!

intendevi dire che sei solito far occupare al browser l'intero spazio disponibile sullo schermo o che la sua finestra supera in larghezza la misura che abbiamo adottato per il bannerone (1800px) rendendo l'immagine sgranata?
Non intendevo nessuna delle due in realtà, intendevo dire che sono solito scaricare filmati in 1080p, salvare e lavorare sempre a 300 di risoluzione e così via, anche se so che in molti casi non è necessario/corretto.
Anche se in realtà si, massimizzo la finestra anche sul 27", colpevole!
Difatti la maggioranza dei siti occupa solo apparentemente il 100% della larghezza del browser integrando, in realtà, una griglia interna atta ad arginare l'eccessivo svaccamento orizzontale dei contenuti (in particolare testuali).
Questo mi interessa molto
faxus
Pro-Expert 
Pro-Expert 
Avatar utente
Iscritto il: lun, 02 giu 2014 15:12
Messaggi: 26207
Località: Due Sicilie
Contatta:

Top

Oggetto del messaggio: Re: Approccio al Web Design

Messaggio Inviato: lun, 08 set 2014 22:03

ilario_seb ha scritto:... Esattamente quello che ho detto alla mia ragazza, ma lei lo preferiva in bianco, si sa, non è carino chiedere un consiglio e non seguirlo poi...
Anche lì dovrai studiare ancora molto...
ilario_seb
Maccanico attivo
Maccanico attivo
Avatar utente
Iscritto il: dom, 19 ago 2012 23:27
Messaggi: 276
Oggetto del messaggio: Re: Approccio al Web Design

Messaggio Inviato: lun, 08 set 2014 22:15

faxus ha scritto: Anche lì dovrai studiare ancora molto...

Come non darti ragione :oops:
Gattinara
Web&Designer Expert
Web&Designer Expert
Avatar utente
Iscritto il: gio, 11 ago 2011 15:16
Messaggi: 761
Località: Roma
Contatta:

Top

Oggetto del messaggio: Re: Approccio al Web Design

Messaggio Inviato: lun, 08 set 2014 22:56

ilario_seb ha scritto:Questo mi interessa molto
Esempio mirato (capai appositamente un layout provvisto di quadrelli): estendendo, in questo sito apparentemente al 100%, la finestra del browser a più di 1600px la griglia interna contenitiva farà la sua comparsa.
Il movente è evidente: guarda come diventerebbe la tua index in assenza di griglia a risoluzione 2560: un delirio con testi dispersi in immensi riquadri (nella primissima bozza immemorizzai di integrare il max-width interno per via dell'orchestramento frettoloso, non certo intenzionalmente).
E a nulla varrebbe ingrandire background e font delle intestazioni ché, secondando questo intendimento, si dovrebbe incrementarli proporzionalmente anche nella navigazione/footer/et cetera per ritrovarci in un inquietante costrutto maggiorato a scrollare tra quadrellotti connaturanti altezze di 1500 e più pixel cadauno.
ilario_seb ha scritto:Anche se in realtà si, massimizzo la finestra anche sul 27", colpevole!
Vergogna Immagine
"Chiunque è degno di un ombrello"
Nikolàj Vsévolodovic Stavrogin

"Chiunque a quarant'anni non conosce emorroidi"
Armand Vedel
ilario_seb
Maccanico attivo
Maccanico attivo
Avatar utente
Iscritto il: dom, 19 ago 2012 23:27
Messaggi: 276
Oggetto del messaggio: Re: Approccio al Web Design

Messaggio Inviato: mar, 09 set 2014 09:26

Ok ok lo ammetto, sarebbe un delirio ahahahah
ilario_seb
Maccanico attivo
Maccanico attivo
Avatar utente
Iscritto il: dom, 19 ago 2012 23:27
Messaggi: 276
Oggetto del messaggio: Re: Approccio al Web Design

Messaggio Inviato: gio, 11 set 2014 15:25

Sto cercando di rendere la index un po' più raffinata, avrei bisogno di consigli grafici sia da te che da faxus se possibile, volevo togliere tutto quel lenzuolone dalla index e lasciarlo SOLO al posto in cui dovrebbe, cioè nella sezione works cliccando sull'apposito bannerone.
Per la index volevo lasciare una sola immagine principale che prende tutta la schermata, la scritta purtroppo sull'immagine in bianco e nero sparisce, mi sto avviando per trovare una foto che sia adatta e che diventi la definitiva, ma per il momento questa è l'unica che ho a disposizione, è stata scattata in bianco e nero, se pensate possa guadagnarne potrei darle il colore con PS, non so magari poi la scritta ne esce un po' di piu.
Ho cambiato anche il future, ho usato un #3F3F3F, mi sembra davvero che spicchi in questo modo, anche se torna il fatto che con l'immagine in bianco e nero almeno nella index, si confonda un po', forse con un colore chiaro è meglio?
Mi piacerebbe che il il footer sia sempre al di fuori della schermata, e che quindi si debba per forza scrollare in giu per vederlo, l'ho notato ieri sul sito apple.com e mi è piaciuta molto come idea.
Voi cosa ne pensate e cosa fareste se fosse la vostra index? Son aperte a critiche.
Si vede un po' quadrata, non ho modificato le dimensioni della tavola su cui lavoro, ma confido che con il formato 16:9 sia più d'effetto

http://i.imgur.com/OPhO6zE.jpeg
faxus
Pro-Expert 
Pro-Expert 
Avatar utente
Iscritto il: lun, 02 giu 2014 15:12
Messaggi: 26207
Località: Due Sicilie
Contatta:

Top

Oggetto del messaggio: Re: Approccio al Web Design

Messaggio Inviato: gio, 11 set 2014 20:59

Veramente non capisco cosa intendi per lenzuolo.

Secondo me quello che ti crea problemi è l'insistere con quel MOOSE in quella posizione e farti condizionare nell'impaginazione.

Metti la foto, può andar bene a pagina intera.
Eventualmente studiati un viraggio (al colore del marchietto o, eventualmente al giallo, leggi sotto).
Togli del tutto la banda bianca sopra.
Inserisci il menù bianco o a colore (ma cambia stile della font) e metti i separatori ad altezza carattere, scala un po' il corpo e > roman (normal) o semibold.

Metti MOOSE Design leggermente più piccolo in basso a destra sulla foto (o nel footer).

La scritta bianca va bene così.
(Se vuoi introduci un giallo, anche per il menù, ma non cambia molto la leggibilità, è solo per dare un po' di colore al nero)

Per il footer sticky o a comparsa si usa wrapper.
Ma per questo è meglio che segui il dettato della maestra
Rispondi