Approccio al Web Design

Le vostre creatività migliori

Moderatori: Gattinara, ModiMaccanici

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 22:17

faxus ha scritto: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
Son da telefono quindi non potrò far i quote mirati purtroppo :(
Come mai credi che il MOOSE li condizioni l impaginazione?
Faró qualche prova con un viraggio o alcuni dettagli colorati, anche se appena posso cambierò immagine che mi sembra la soluzione migliore.
Rimuovendo il marchio da li non risulterebbe sbilanciato l header? Sinceramente era l unica cosa che pensavo fosse al posto giusto, forse dovrò valutarlo meglio.
Avevo già provveduto nel codice a scalare la font, non capisco però cosa intendi con metti i separatori ad altezza carattere.
Forse più che sulla foto potrebbe andar bene, anche se non capisco proprio come mai credi che il suo posizionamento nell header influisca nel layout, al massimo può fungere da guida per farci appoggiare il testo. Ho forse credi che scendendo con la punta sotto possa diventare un elemento di distarzione?
faxus
Pro-Expert 
Pro-Expert 
Avatar utente
Iscritto il: lun, 02 giu 2014 15:12
Messaggi: 26537
Località: Tra bufale e mare
Contatta:

Top

Oggetto del messaggio: Re: Approccio al Web Design

Messaggio Inviato: gio, 11 set 2014 22:59

Immagine
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 23:29

Mi piace molto la soluzione che hai proposto per il testo, veramente.
Non mi convince però l'header senza barra, quel testo fluttuante proprio non riesco a dargli un senso, sicuramente quel giallo spicca tra i grigi però, sicuramente è un colore che terrò in considerazione da usare, visto che sta bene con quel verde acqua.
Capisco il motivo per cui preferisci il marchio nel footer, in fondo non ha nessun significato particolare, è un nome fittizio di qualcosa che non esiste, anche io a volte lo guardo e mi chiedo perché, forse è solo un "riempi buchi" o forse in futuro mi piacerebbe metterci mano e far qualcosa di professionale con quel marchietto se mai le cose andassero bene.
Anche se mettendolo nel footer si potrebbe ottenere un effetto interessante (immagine sotto) [e che sinceramente non mi dispiace ;) ], e senza contare il bilanciamento del footer che andrebbe rivisto visto che così logo e testo non son per niente allineati, si creerebbe lo stesso problema nell'header, testo e marchi dei social a destra e vuoto a sinistra (nel caso della barra che per il momento vorrei tenere, senza barra e marchio non ci sarebbe il problema).

Immagine
faxus
Pro-Expert 
Pro-Expert 
Avatar utente
Iscritto il: lun, 02 giu 2014 15:12
Messaggi: 26537
Località: Tra bufale e mare
Contatta:

Top

Oggetto del messaggio: Re: Approccio al Web Design

Messaggio Inviato: gio, 11 set 2014 23:40

Lo vedevo anch'io trasparente, ma avrei dovuto ridisegnarlo...
Idem, anche per i social, vanno nel footer.

Va bene la soluzione che proponi col il marchio a sbalzo sulla banda del footer.
Lascia qualche pixel in basso libero.

Per la barra dei menù... È una questione di gusti, devi fare il tuo sito, quindi decidi tu.
Ma non ti affezionare a soluzioni, in queste cose è un peccato mortale
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: ven, 12 set 2014 00:24

faxus ha scritto: Per la barra dei menù... È una questione di gusti, devi fare il tuo sito, quindi decidi tu.
Ma non ti affezionare a soluzioni, in queste cose è un peccato mortale
Purtroppo è proprio questo il punto. Il footer ancora non mi convince, anche se l ultima solizione che ho postato è quella che mi convince di più per il momento, credo di essere più affEzionato a wuesto piuttosto che all header. solo che crea problemi grossi con l header che rimarrebbe vuoto. Forse sarebbe più opportuno lasciare l header così e trovare qualcosa che bilanci il footer. Tu come mai pensavi che l header in alto limiti alcune scelte di layout?
Gattinara
Web&Designer Expert
Web&Designer Expert
Avatar utente
Iscritto il: gio, 11 ago 2011 15:16
Messaggi: 763
Località: Roma
Oggetto del messaggio: Re: Approccio al Web Design

Messaggio Inviato: ven, 12 set 2014 00:31

Eccomi di nuovo, anche se per poco e non troppo lucidamente (ho la febbre).
Piccola premessa: sono sempre favorevole alle sperimentazioni sul layout (rammento che, specie all'inizio e sul proprio sito personale, è pressoché inevitabile modificarlo in continuazione), ma converrebbe tenere a mente alcune minuzie:
  1. prima di riassemblare il costrutto sarebbe bene avere un minimo di dimestichezza con il codice. Suggerisco almeno attendere di avere terminato la index secondando l'originale bozza di partenza e la conseguente presa di familiarità con i "nuovi" tag HTML5/proprietà CSS prima di stravolgerne il layout (parlo di codice, non di grafica);
  2. conviene pensare anche al fattore SEO: i contenuti sono fondamentali.
    Creare una index pressoché priva di contenuti testuali equivale ad un suicidio sui motori di ricerca;
  3. pensare non solo da grafico ma anche da fruitore: che interesse potrebbe suscitare una pagina di apertura contenente una singola immagine? Avrebbe senso nel caso di un portfolio fotografico e, anche in tale circostanza, una slide di (notevoli) immagini a tutta pagina risulterebbe maggiormente accattivante rispetto ad una singola fotografia impalata.
faxus ha scritto:Ma per questo è meglio che segui il dettato della maestra
E' crudele burlarsi di una Signora influenzata!

In soldoni: trovo costruttivo (oltre che inevitabile :) continuare a modificare la grafica del sito finché non saraine soddisfatto, seguitando a vagliare soluzioni traverso raffronti diretti (l'Hello maggiorato nell'intestazione suggeritoti da Faxus è gradevole assai, e di molto avveduto il consiglio di non affezionarsi a specifiche soluzioni), ma attendi di avere maggiore familiarità con il codice prima di volere direttamente/ciclicamente alterarne il costrutto HTML (altrimenti si rischia di dover cambiare il titolo del thread in "Approccio al web design traverso codice mutaforma").
"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: 26537
Località: Tra bufale e mare
Contatta:

Top

Oggetto del messaggio: Re: Approccio al Web Design

Messaggio Inviato: ven, 12 set 2014 01:12

Gattinara ha scritto:
faxus ha scritto:Ma per questo è meglio che segui il dettato della maestra
E' crudele burlarsi di una Signora influenzata!...
Proprio no...

Maestra è nel senso di master, esperto e specialista.
Termine usato per webmaster, che traduco nell'italiano, mastro artigiano, maestro del web.
Qualifica di chiunque, quali che siano le sue conoscenze nelle numerose discipline, che per mestiere crei siti completi e funzionali.

Per l'influenza, che sto ancora faticosamente cercando di superare negli strascichi, ti fornisco una ricetta.
È estrapolata da un'antica ricetta adattata all'uso moderno.

Fai una cena leggera ma sapida con tanto peperoncino (p.e. un po' di matriciana), prendi un leggero febbrifugo/antinfiammatorio.
Stappa una bella bottiglia di rosso tannico a cui non difettino i gradi.
Sdraiati dopo aver messo il tappo in fondo al letto e la bottiglia con un bicchiere sul comodino.

Pensa che domattina starai benissimo e rifletti sulla forza delle convinzioni, sorseggiando il vino e guardando il tappo.
Quando vedrai due tappi posa il bicchiere e addormentati
Gattinara
Web&Designer Expert
Web&Designer Expert
Avatar utente
Iscritto il: gio, 11 ago 2011 15:16
Messaggi: 763
Località: Roma
Oggetto del messaggio: Re: Approccio al Web Design

Messaggio Inviato: ven, 12 set 2014 01:33

Ricetta commovente, che spero adottare a breve.
Purtroppo non possiedo il vino adatto, al momento (in estate le mie scorte difettano), ché l'Aglianico (ho solo del Taurasi in domo) genera un effetto crespo/astringente sul palato che non allevia il coevo stato riarso delle mie fauci.
"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: ven, 12 set 2014 09:42

per poco e non troppo lucidamente (ho la febbre).
Riposa, e segui i consigli di faxus ;)
Piccola premessa: sono sempre favorevole alle sperimentazioni sul layout
è difficile che mi accontenti da solo purtroppo , farò del mio meglio promesso:(
  1. prima di riassemblare il costrutto sarebbe bene avere un minimo di dimestichezza con il codice. Suggerisco almeno attendere di avere terminato la index secondando l'originale bozza di partenza e la conseguente presa di familiarità con i "nuovi" tag HTML5/proprietà CSS prima di stravolgerne il layout (parlo di codice, non di grafica);
Aspetterò allora, mentre assembleremo la versione 1.0 cercherò di migliorarla così che una volta finito di scrivere il codice cercherò di implementare i cambiamenti da me, continuando ad aggiornare questo post in modo tale da avere i vostri riscontri e magari di contribuire a mia volta.

[*] conviene pensare anche al fattore SEO: i contenuti sono fondamentali.
Creare una index pressoché priva di contenuti testuali equivale ad un suicidio sui motori di ricerca;
Fattore SEO?
Quante possibilità ci sono che la gente mi cerchi ed effettivamente mi trovi sui motori di ricerca? Magari non la lascerò vuota vuota, ma son sempre più convinto che in futuro lascierò tutto il pappardone al di sotto dell'immaginona iniziale nella sezione works.
[*] pensare non solo da grafico ma anche da fruitore: che interesse potrebbe suscitare una pagina di apertura contenente una singola immagine? Avrebbe senso nel caso di un portfolio fotografico e, anche in tale circostanza, una slide di (notevoli) immagini a tutta pagina risulterebbe maggiormente accattivante rispetto ad una singola fotografia impalata.[/list]
Capito, ci devo lavorare sopra ;)
Per l'influenza, che sto ancora faticosamente cercando di superare negli strascichi, ti fornisco una ricetta.
È estrapolata da un'antica ricetta adattata all'uso moderno.
Me la segno anche io per quandò servirà, dispiace?
faxus
Pro-Expert 
Pro-Expert 
Avatar utente
Iscritto il: lun, 02 giu 2014 15:12
Messaggi: 26537
Località: Tra bufale e mare
Contatta:

Top

Oggetto del messaggio: Re: Approccio al Web Design

Messaggio Inviato: ven, 12 set 2014 13:44

ilario_seb ha scritto:... Fattore SEO?
Quante possibilità ci sono che la gente mi cerchi ed effettivamente mi trovi sui motori di ricerca? Magari non la lascerò vuota vuota, ma son sempre più convinto che in futuro lascierò tutto il pappardone al di sotto dell'immaginona iniziale nella sezione works...
Il SEO è una mentalità, non solo delle tecniche.

Pare bizzarro, ma tanta gente si fa un sito o un blog e non si cura di evidenziarlo per i motori di ricerca.

Tanto vale che scriva a penna su carta: "Caro diario..."
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: ven, 12 set 2014 16:24


Pare bizzarro, ma tanta gente si fa un sito o un blog e non si cura di evidenziarlo per i motori di ricerca.

Tanto vale che scriva a penna su carta: "Caro diario..."
Dipende anche un po dalla tipologia di sito no? Se fosse un sito a scopo commerciale o simili sicuramente essere tra i primi risultati sui motori di ricerca sarebbe fondamentale, ma con un sito così penso che più che sia più gente che magari ci capita tramite link sui social o perché magari lo trova su un biglietto da visita piuttosto che persone che googlano il mio nome o "cercasi grafico...". O forse no, non so spiegamelo se sbaglio
Gattinara
Web&Designer Expert
Web&Designer Expert
Avatar utente
Iscritto il: gio, 11 ago 2011 15:16
Messaggi: 763
Località: Roma
Oggetto del messaggio: Re: Approccio al Web Design

Messaggio Inviato: gio, 18 set 2014 23:26

Arieccoci: io sopravvissuta all'influenza e tu reduce da un 30 (complimenti assai :)
La struttura nella quale organizzeremo i contenuti della index sarà (stringatamente) la seguente:

Codice: Seleziona tutto

<section>
  <h2>Titolo</h2>
  <p>descrizione</p>
</section>
<figure>
  <img>
</figure>
<section>
  <h2>Titolo</h2>
  <p>descrizione</p>
</section>
<figure>
  <img>
</figure>
<section>
  <h2>Titolo</h2>
  <p>descrizione</p>
</section>
Se hai letto attentamente gli articoli/guide precedenti risulterannoti evidenti i motivi per i quali non utilizzeremo, al momento, il tag article (o l'annidamento section/article o section/section).

Prima ancora di addentrarci tra i quadrelloni interni (e conseguenti fix IE) tratteremo, nello specifico, gli stili dell'intestazione provvista degli elementi decorativi laterali (le linee mediane che l'affiancano, per intenderci) traverso l'utilizzo degli pseudo elementi ::before ed ::after:

Immagine

La classe .width-mini (applicata al paragrafo) consente di arginare l'ingombro testuale alla specifica larghezza esposta nella tua bozza (ché utilizzare gli a capo risulterebbe rovinoso nelle risoluzioni Phone).

Come vedi ho provveduto ad integrare l'icona di background all'interno della classe .ico (connaturante specifica numerazione per distinguersi dalle restanti intestazioni - ché ciascuna ne cinghierà di proprie) concatenandola a quella del suo "contenitore" .line (a sua volta correlato agli ::after/::before.
Visioniamoli nel dettaglio:

Immagine

I margin (speculari negli pseudo elementi) sono fondamentali: se non li applicassimo le linee si posizionerebbero (da bravi absolute) al 50% (left/right) dell'elemento .line/h2: ovvero il loro lato "interno" si piazzerebbe esattamente nel mezzo dell'intestazione, apparentemente "fondendole":

Immagine

(i valori dovranno essere rivisti non appena risolverai adottare una font differente dalla coeva)

CSS di base (da inserire prima delle media queries):

Codice: Seleziona tutto

.back, .line {
	padding: 125px 0 20px;
}
.line {
	position: relative;
	display: block;
}
.line::before, .line::after {
	position: absolute;
	top: 138px;
	width: 230px;
	border-top: 1px solid #59BCBC;
	content: '';
}
.line::before {
	right: 50%;
	margin-right: 150px;
}
.line::after {
	left: 50%;
	margin-left: 150px;
}
.width-mini {
	width: 540px;
	padding: 0 0 40px;
	margin: 0 auto;
}
.ico-01 {
	background: url(../img/fondi/simbolo-01.svg) no-repeat center 35px;
}
.ico-02 {
	background: url(../img/fondi/simbolo-02.svg) no-repeat center 35px;
}
.ico-03 {
	background: url(../img/fondi/simbolo-02.svg) no-repeat center 35px;
}
Varianti da integrare nella query 300/479:

Codice: Seleziona tutto

h2 {
	font-size: 18px;
}
.line::before, .line::after {
	display: none; /* nasconde gli elementi */
}
all'interno della 480/767:

Codice: Seleziona tutto

h2 {
	font-size: 19px;
}
.line::before, .line::after {
	top: 130px;
	width: 100px;
}
.line::before {
	margin-right: 110px;
}
.line::after {
	margin-left: 110px;
}
nella 768/1023:

Codice: Seleziona tutto

.line::before, .line::after {
	top: 138px;
	width: 180px;
}
.line::before {
	margin-right: 140px;
}
.line::after {
	margin-left: 140px;
}
e, in ultimo, nella 300/767:

Codice: Seleziona tutto

body {
	font-size: 14px;
	line-height: 17px;
}
.width-mini {
	width: auto;
	padding: 0 25px 30px;
	margin: 0;
}
.back, .line {
	padding: 115px 0 10px;
}
.ico-01, .ico-02, .ico-03 {
	background-position: center 25px;
}
Il codice HTML è il seguente (da inserire dopo la chiusura dell'header):

Immagine

E, al solito, la bozza online da usare come riferimento.

N. d. F.: Gli pseudo elementi sono in grado di generare meraviglie: tutti i webdesigner li amano (o dovrebbero farlo).
"Chiunque è degno di un ombrello"
Nikolàj Vsévolodovic Stavrogin

"Chiunque a quarant'anni non conosce emorroidi"
Armand Vedel
Uno_qualunque
Expert
Expert
Avatar utente
Iscritto il: lun, 12 lug 2010 09:32
Messaggi: 3099
Oggetto del messaggio: Re: Approccio al Web Design

Messaggio Inviato: gio, 18 set 2014 23:39

Ogni tanto mi reintrufolo.

Voglio dire la mia:

1) Mi piace molto l'approccio di Ilario, giovane, curioso, umile e intraprendente! Aiutare una persona con il suo modo di porsi deve far sentire bene :-)
2) Il mix di perle di saggezza, informazioni preziose e cazzeggio fra Faxus e Gattinara è veramente esilarante.
3) Intanto in tutto questo ho un malloppo di informazioni in più che mi fanno capire quanto sega io sia e quindi non mi estorcerete mai la URL del sito che gestisco per conto di una mia associazione ;-)
Fate il backup, fate il backup, ricordate di fare il backup, non dimenticate di fare il backup.

"Il backup è quella cosa che andava fatta prima" (antico proverbio cinese)
Gattinara
Web&Designer Expert
Web&Designer Expert
Avatar utente
Iscritto il: gio, 11 ago 2011 15:16
Messaggi: 763
Località: Roma
Oggetto del messaggio: Re: Approccio al Web Design

Messaggio Inviato: ven, 19 set 2014 00:11

  1. Immemorizzasti "entusiasta". E sì, è davvero un piacere interagirci; oltre questo non dimentico il fatto che, diversi anni orsono (avevo appena iniziato ad interessarmi al codice, ed all'epoca le guide online scarseggiavano), sono stata aiutata da un (bravissimo) webdesigner incontrato casualmente in un macforum. Ne rammento la pazienza e la disponibilità pressoché infinite;
  2. avere a che fare con Faxus allieta di molto anche le mie giornate;
  3. prima o dopo olocausteraila (fino ad allora non fiderò effettiva la tua professata mancanza di competenza :)
"Chiunque è degno di un ombrello"
Nikolàj Vsévolodovic Stavrogin

"Chiunque a quarant'anni non conosce emorroidi"
Armand Vedel
a-mac
Unix Expert
Unix Expert
Avatar utente
Iscritto il: ven, 21 dic 2012 10:32
Messaggi: 4500
Località: fsf.org
Contatta:

Top

Oggetto del messaggio: Re: Approccio al Web Design

Messaggio Inviato: ven, 19 set 2014 10:41

Uno_qualunque ha scritto: 2) Il mix di perle di saggezza, informazioni preziose e cazzeggio fra Faxus e Gattinara è veramente esilarante.
:shock:

:D :D :D
Andre “...è complicato, ma semplice”

_ UNIX: Live Free or Die
_ With great power comes great responsibility
_ You may say, I'm a dreamer, but I'm not the only one, I hope some day you'll join us, And the world will live as one!
Rispondi