Pagina 1 di 2
Ispirazione
Inviato: 19/08/2010, 14:28
da BMercer
Avrei bisogno di un bel pò di ispirazione per un web design pulito al massimo e un pò minimalista. Ho cercato su internet ma trovi sempre e solo quelle liste di 50- 100 siti che non ti dicono un bel nulla e nella quale trovo sempre e solo 3-4-5 siti che meritano davvero. Qualcuno ha anche solo un sito per l'ispirazione? Se volete vi posto i 5 che ultimamente più mi sono piaciuti.
http://www.heartworker.com/
http://cliframework.com/ // come diavolo ha fatto a fare quell'effetto nello sfondo? gif?
http://www.arcinspirations.com/kobe/ // effetto di prima, il design non mi ispira particolarmente
http://aviary.com/home
http://wpcoder.com/
Ma per dire a me piace un botto anche come ha gestito ogni cosa grafica facebook, quel tipo di stile minimalista ma non troppo minimalista come magari questo sito:
http://www.scaracco.net/it/ che comunque ha un bellissimo stile anche lui.
Oppure vasti guardare Wordpress.org quello ha uno stile che mi ispira davvero tanto s*sso. Si insomma qualcosa del genere. Idee?
Re: Ispirazione
Inviato: 19/08/2010, 21:41
da Gelmo
questo è la immagine di BG del secondo sito:
Codice: Seleziona tutto
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>PHP CLI Framework</title>
<meta name="keywords" content="php command line cli framework" />
<meta name="description" content="The PHP CLI Framework is a small open source command line framework making CLI programs extremely easy and fast to create." />
<meta name="robots" content="index, follow" />
<meta name="googlebot" content="index, follow" />
<meta name="language" content="en-us, english" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="app.js"></script>
<style type="text/css">
body {
margin: 0;
background: #080808 url(images/bg.jpg) 50% 0 no-repeat;
font: 11px "Calibri", "Arial", sans-serif;
text-align: center;
color: #4b3e47;
}
#container {
position: relative;
margin: 0 auto;
width: 800px;
height: 500px;
}
#download {
top: 245px;
right: 105px;
}
#footer {
top: 271px;
right: 105px;
opacity:.50;
filter:alpha(opacity=50);
-moz-opacity:.50;
}
#footer:hover {
opacity:.99;
filter:alpha(opacity=99);
-moz-opacity:.99;
}
.button {
position: absolute;
z-index: 200;
padding: 0 12px 0 0;
width: 135px;
height: 21px;
line-height: 21px;
text-align: right;
background: url(images/button.png) top left no-repeat;
text-decoration: none;
outline: none;
color: #601b48;
}
.button:hover {
color: #d0a2c0;
}
</style>
</head>
<body>
<div id="container">
<a href="archive/phpcli-0.1.zip" id="download" class="button">Download</a>
<a href="http://vision-media.ca" id="footer" class="button">Web Design</a>
</div>
</body>
</html>
se clicci su
APP.js
Codice: Seleziona tutto
<script type="text/javascript" src="app.js"></script>
ti rinviano a questo codice CSS
Codice: Seleziona tutto
var Spark = function() {
var self = this;
this.b = 'http://cliframework.com/images/';
this.s = ['spark.png', 'spark2.png', 'spark3.png', 'spark4.png'];
this.i = this.s[this.random(this.s.length)];
this.f = this.b + this.i;
this.n = document.createElement('img');
this.newSpeed().newPoint().display().newPoint().fly();
};
Spark.prototype.display = function() {
$(this.n)
.attr('src', this.f)
.css('position', 'absolute')
.css('z-index', this.random(20))
.css('top', this.pointY)
.css('left', this.pointX);
$(document.body).append(this.n);
return this;
};
Spark.prototype.fly = function() {
var self = this;
$(this.n).animate({
"top": this.pointY,
"left": this.pointX,
}, this.speed, 'linear', function(){
self.newSpeed().newPoint().fly();
});
};
Spark.prototype.newSpeed = function() {
this.speed = (this.random(10) + 5) * 1100;
return this;
};
Spark.prototype.newPoint = function() {
this.pointX = this.random(window.innerWidth - 100);
this.pointY = this.random(350);
return this;
};
Spark.prototype.random = function(max) {
return Math.ceil(Math.random() * max) - 1;
}
$(function(){
// Sparks
var totalSparks = 40;
var sparks = [];
for (i = 0; i < totalSparks; i++){
sparks[i] = new Spark();
}
});
io pero penso che l'effetto sia gestito dal javascript che ti si ritrova a cliccare sul link App.js hai notato questo comando...
Codice: Seleziona tutto
this.b = 'http://cliframework.com/images/';
this.s = ['spark.png', 'spark2.png', 'spark3.png', 'spark4.png'];
Re: Ispirazione
Inviato: 20/08/2010, 14:32
da BMercer
Si si, infatti avevo notato che le palline che si muovono sono immagini, basta aprire un rettangolo di selezione con il mouse e vengono selezionate le immagini dei pallini. Pallini che sicuramente sono gestiti da javascript.
Hai qualche cosa per l'ispirazione?
Re: Ispirazione
Inviato: 21/08/2010, 11:38
da Gelmo
io non capisco che cosa intendi per ispirazione...
dal canto mio. per ispirazione intendo prendere le cose che ti piacciono dal mondo che ti circondano.. Publicità,libri e video musicali, disegni, caricature ecc ecc...
per farti rendere l'idea un bella iscpirazione per qualce lavoro grafico è questo pubblicità
http://www.youtube.com/watch?v=OmCCrFglzAA
pero capisci che l'ispitazione per qualche cosa che non ho ben capito non te la possso dare.. si dovrebbe sapere qualche info in più.. tipo argomento del sito e altre info..cosi si può capire se renderlo più simpatico o più professionale.
prova a mandarmi il link del sito.
Re: Ispirazione
Inviato: 21/08/2010, 13:24
da BMercer
Ispirazione per il web design. Solo ed esclusivamente web design. Non ha importanza che cosa tratta il sito, l'importante è che abbia un bello stile. Non ho un sito ora come ora. Sto creando un cms e sono a corto di idee per la grafica, quindi se proprio meglio uno stile professionale, pulito e minimalista.
Re: Ispirazione
Inviato: 22/08/2010, 23:58
da Haku
Come posso ricreare un effetto del genere sul banner?
Oppure se avete qualche link dove si possono trovare file in flash da inserire...
Re: Ispirazione
Inviato: 24/08/2010, 16:43
da BMercer
Javascript oppure animazione in gif.
Re: Ispirazione
Inviato: 24/08/2010, 20:51
da Gelmo
BMercer ha scritto:Ispirazione per il web design. Solo ed esclusivamente web design. Non ha importanza che cosa tratta il sito, l'importante è che abbia un bello stile. Non ho un sito ora come ora. Sto creando un cms e sono a corto di idee per la grafica, quindi se proprio meglio uno stile professionale, pulito e minimalista.
è si che centra l'argomento..
un esempio? puo essere non puoi trattare l'argomento anime e fumetti senza avere uno stile un pò strano dal punto di vista grafico
un altro? non puoi avere un forum che tratta argomenti di guadagno on-line con la setta grafica che si userebbe per un sito che tratta di anime e manga
non so se hai capito il mio ragionamento..
se vuoi minimalista. puoi pensare anche a uno stile tipo quello di questo sito.. linne rette e angoli retti.. tre colori al massimo 4
Re: Ispirazione
Inviato: 24/08/2010, 22:45
da Haku
Io ho capito il concetto,infatti ogni tanto pernso se il mio forum,in stile,acchiappi minimamente l'argomento che si tratta sul forum...ma per questo bisogna fare mille prove fino ad ottenere un risultato =)
@BMercer: cosa scrivo esattamente?avevo un effetto flash simile sul banner una volta (preso mi sembra da phpbb.com),ma non ricordo più dove è,e non trovo nulla.
Re: Ispirazione
Inviato: 25/08/2010, 11:44
da BMercer
Si ho capito cosa vuoi dire ma non hai capito cosa mi intendo io. Lo stile che sto cercando è per un cms che ho creato io. E' come se quelli che hanno creato phpbb venissero qui e ti dicessero che stanno cercando uno stile per la loro prossima versione. Diciamo che sarà il tema principale per il mio cms, come prosilver lo è su phpbb.
Non so se mi spiego. Io voglio creare un cms come phpbb e sto cercando il tema di default.
Quindi deve essere un pò astratto, professionale e io preferirei minimalista.
Per il banner: Non conosco molto javascript e non mi è mai piaciuto. Mi pare che per avere delle gif animate ti serva come minimo photoshop o flash. Cerca dei tutorial, ne è pieno internet.
