Ispirazione

BMercer · Messaggio da **BMercer** » 19/08/2010, 14:28

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?

Gelmo · Messaggio da **Gelmo** » 19/08/2010, 21:41

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'];

BMercer · Messaggio da **BMercer** » 20/08/2010, 14:32

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?

Gelmo · Messaggio da **Gelmo** » 21/08/2010, 11:38

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.

BMercer · Messaggio da **BMercer** » 21/08/2010, 13:24

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.

Haku · Messaggio da **Haku** » 22/08/2010, 23:58

Come posso ricreare un effetto del genere sul banner?
Oppure se avete qualche link dove si possono trovare file in flash da inserire...

BMercer · Messaggio da **BMercer** » 24/08/2010, 16:43

Javascript oppure animazione in gif.

Gelmo · Messaggio da **Gelmo** » 24/08/2010, 20:51

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

Haku · Messaggio da **Haku** » 24/08/2010, 22:45

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.

BMercer · Messaggio da **BMercer** » 25/08/2010, 11:44

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.

phpBB Italia

Ispirazione

Ispirazione

Re: Ispirazione

Re: Ispirazione

Re: Ispirazione

Re: Ispirazione

Re: Ispirazione

Re: Ispirazione

Re: Ispirazione

Re: Ispirazione

Re: Ispirazione

Chi c’è in linea