Home » Blog »

15 Strumenti per Sviluppare un Sito Web d’impatto

Autore

Cristian Perinelli

Consulente marketing per Micro-imprese e Startup

Esperto in analisi dei dati, Campagne pubblicitarie Meta e Google, Posizionamento nei Motori di Ricerca e Sviluppo Siti Web

Tools per sviluppare un sito web

Indice

In questa guida rapida vogliamo mostrarti alcuni strumenti per sviluppare un sito web, utili per velocizzare, migliorare, o rendere più bello il tuo lavoro.

Questi strumenti sono utilizzabili sia da principianti che da esperti, ma non parleremo di come creare dei siti web, quindi se è quello che stai cercando ti consigliamo di leggere il nostro articolo 3 semplici Metodi per Creare un Sito Web (CMS o HTML).

Nota: nei video esemplificativi abbiamo utilizzato WordPress ed Elementor, ma puoi usare qualsiasi altro CMS o editor.

Animista Text Animation

Anima i testi del tuo sito web con effetti predefiniti e facilmente personalizzabili grazie alla semplice barra di controllo di Animista Text Animation.

Anche se non hai esperienza di codice, con questo strumento online potrai creare tantissimi effetti per sviluppare un sito web animato.



<h1 class="focus-in-expand">Titolo da animare</h1>





<style>
.focus-in-expand {
	-webkit-animation: focus-in-expand 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s both;
	        animation: focus-in-expand 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s both;
}

@-webkit-keyframes focus-in-expand {
  0% {
    letter-spacing: -0.5em;
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}
@keyframes focus-in-expand {
  0% {
    letter-spacing: -0.5em;
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}
</style>

Oltre alle animazioni di testo, Animista permette di ottenere velocemente effetti da applicare a sezioni, pulsanti e qualsiasi altro elemento del tuo sito web, il tutto usando del semplice CSS da copiare e incollare:

Awwwards

Un punto d’incontro dove i professionisti del design digitale di tutto il mondo trovano ispirazione, trasmettono conoscenze ed esperienze, si connettono e condividono critiche costruttive e rispettose.

Diamo sempre uno sguardo su Awwwards prima di sviluppare un sito web, poiché è una ricca fonte d’ispirazione a livello di Web design e ultime tendenze.

Potrai infatti visualizzare migliaia di siti web reali “concept design” da cui prendere spunto per sviluppare i tuoi siti web.

Blobmaker

Questo utilissimo strumento consente di creare forme astratte da salvare come SVG e usare per sviluppare un sito web.

E’ molto intuitivo nell’uso grazie a semplici controlli, ed è simile a Fancy Border Radius (di cui parliamo più in basso).



<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<path fill="#01ACA4" d="M30.3,-44.9C39.8,-41.1,48.4,-33.6,49.2,-24.6C50,-15.6,43,-5.2,44.6,8.7C46.1,22.6,56.2,40,53.2,49.4C50.2,58.7,34.1,60.1,21.3,56.4C8.6,52.7,-0.9,44,-9.7,38.8C-18.5,33.6,-26.7,31.9,-39.2,28C-51.7,24.2,-68.5,18.2,-70.6,9.6C-72.7,1,-60,-10.3,-52,-22.1C-44.1,-33.9,-40.8,-46.2,-33,-50.7C-25.1,-55.2,-12.5,-52,-1.1,-50.3C10.4,-48.7,20.8,-48.6,30.3,-44.9Z" transform="translate(100 100)" />
</svg>


La differenza consiste nel fatto che con Blobmaker puoi esportare dei file SVG, oppure il CSS, mentre Fancy crea del CSS da incollare nelle colonne/box. L’effetto finale ottenuto è comunque molto simile.

Sei un imprenditore?

Entra nel nostro canale Telegram!

Pubblichiamo 1 post a settimana da leggere in 2 minuti, nel quale sintetizziamo le ultime notizie riguardanti (Green) Marketing, Social Media e Business. E’ gratuito, non richiede registrazione e potrai uscire dal canale in qualsiasi momento:

Coolors

Se non hai una Brand identity definita, o almeno una palette di colori da usare per sviluppare un sito web, questo strumento online ti sarà fondamentale.

Su Coolors potrai esplorare palette di colori in trend, oppure creare la tua personale palette partendo da un singolo colore, o ancora generarne una “casuale” con la certezza di abbinare perfettamente tutti i colori degli elementi del tuo sito web.

Clippy

Trasforma immagini in forme scegliendo tra le 27 predefinite.

Nello sviluppo di un sito web capita spesso di voler dare a un’immagine una forma differente dai classici quadrati, tondi o rettangoli.



<img width="1200" height="630" decoding="async" class="forma-immagine" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20630'%3E%3C/svg%3E" alt="tools per sviluppare un sito web" title="15 Strumenti per Sviluppare un Sito Web d&#039;impatto 2" data-lazy-src="https://greenmarketing.agency/wp-content/uploads/2022/08/tools-per-sviluppare-un-sito-web.jpg"><noscript><img width="1200" height="630" decoding="async" class="forma-immagine" src="https://greenmarketing.agency/wp-content/uploads/2022/08/tools-per-sviluppare-un-sito-web.jpg" alt="tools per sviluppare un sito web" title="15 Strumenti per Sviluppare un Sito Web d&#039;impatto 2"></noscript>





<style>
.forma-immagine {
  clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}
</style>

Ad esempio, se vorrai darle una forma triangolare o poligonale, ti basterà inserire la URL della tua immagine (che deve essere sul web, poiché su Clippy non è possibile caricare le immagini) e successivamente selezionare la forma desiderata tra le 27 disponibili.

A quel punto, non ti resterà che copiare il codice CSS, assegnare una classe all’immagine nel tuo sito web e impostare come classe il CSS copiato.

CSS Gradient

Hai delle sezioni del sito a cui vuoi applicare uno sfondo gradiente di due o tre colori?

Con CSS Gradient potrai farlo facilmente modificando una serie di opzioni e guardando in anteprima il risultato finale, per poi limitarti a copiare il codice CSS e incollarlo nella sezione che vuoi colorare.



<div style="width:100%; padding:100px;" class="gradient"> </div>





<style>
.gradient {
  background: rgb(131,58,180);
  background: radial-gradient(circle, rgba(131,58,180,1) 5%, rgba(253,29,29,1) 67%, rgba(252,176,69,1) 100%);
}
</style>

Decisamente utile per sviluppare un sito web colorato!

CSS Stripes Generator

Durante lo sviluppo di un sito web, generare delle linee da utilizzare come sfondo di una sezione non è sempre così immediato (se dobbiamo scriverle in CSS).



<div style="width:100%; padding:100px;" class="stripes"> </div>





<style>
.stripes {
    background-image: linear-gradient(161deg, #0a0a0a 33.33%, #e30c0c 33.33%, #e30c0c 50%, #0a0a0a 50%, #0a0a0a 83.33%, #e30c0c 83.33%, #e30c0c 100%);
    background-size: 92.15px 31.73px;
}
</style>

CSS Stripes Generator mette a tua disposizione uno strumento semplice e intuitivo, che consente di avere un’anteprima in tempo reale delle modifiche che stiamo apportando.

Utile anche per creare quei background che fanno incrociare gli occhi 🙂

CSS Triangle Generator

Questo strumento consente di creare triangoli di varie forme e colori in modo semplice e intuitivo.

Perché creare delle immagini quando puoi farlo in un minuto con CSS Triangle Generator?



<div class="element"> </div>





<style>
.element {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 94px 64px 0 64px;
  border-color: #1a1a1a transparent transparent transparent;
}
</style>

Nello stesso sito web troverai anche altri “generatori di CSS” che sicuramente potrai utilizzare per sviluppare siti web, tra cui un color shades, page dividers, gradient, generatori di lorem ipsum, cursori per il mouse e molto altro.

Fancy Border Radius

Uno strumento utilissimo se il tuo sito web deve contenere forme astratte.

Fancy Border Radius consente di creare facilmente le forme più stravaganti da usare per sviluppare un sito web ad alto impatto visivo.



<div class="fancy gradient"> </div>





<style>
.fancy {
    border-radius:65% 35% 70% 30% / 30% 30% 70% 70%;
    padding:100px;
}
    
.gradient {
  background: rgb(131,58,180);
  background: radial-gradient(circle, rgba(131,58,180,1) 5%, rgba(253,29,29,1) 67%, rgba(252,176,69,1) 100%);
}
</style>

Ti basterà infatti spostare gli angoli, trovare la forma che più ti piace, copiare il codice CSS e incollarlo nel tuo box assegnandogli la giusta classe.

Get Waves

I separatori di sezione vanno sempre più di moda nei siti web, ma la maggior parte sono generati da Plugin; il che, per quanto parzialmente personalizzabili, li rende quasi tutti uguali.



<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#e7008a" fill-opacity="1" d="M0,64L60,32L120,64L180,0L240,224L300,128L360,320L420,256L480,96L540,256L600,288L660,256L720,96L780,32L840,256L900,160L960,160L1020,32L1080,64L1140,224L1200,224L1260,0L1320,128L1380,256L1440,128L1440,320L1380,320L1320,320L1260,320L1200,320L1140,320L1080,320L1020,320L960,320L900,320L840,320L780,320L720,320L660,320L600,320L540,320L480,320L420,320L360,320L300,320L240,320L180,320L120,320L60,320L0,320Z"></path></svg>


Get Waves consente di creare dei separatori sagomati super personalizzabili in modo semplice e veloce, per poi esportarli in formato SVG da usare per sviluppare i tuoi siti web, oppure puoi copiare il codice CSS e incollarlo nel tuo HTML.

HTML Table Styler

Stilizzare una tabella può sembrare cosa “noiosa” durante lo sviluppo di un sito web, ma spesso è utile sia per renderla più leggibile sia graficamente più carina.



<table class="blueTable">
<thead>
<tr>
<th>head1</th>
<th>head2</th>
<th>head3</th>
<th>head4</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4">
<div class="links"><a href="#">&laquo;</a> <a class="active" href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">&raquo;</a></div>
</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>cell1_1</td>
<td>cell2_1</td>
<td>cell3_1</td>
<td>cell4_1</td>
</tr>
<tr>
<td>cell1_2</td>
<td>cell2_2</td>
<td>cell3_2</td>
<td>cell4_2</td>
</tr>
<tr>
<td>cell1_3</td>
<td>cell2_3</td>
<td>cell3_3</td>
<td>cell4_3</td>
</tr>
<tr>
<td>cell1_4</td>
<td>cell2_4</td>
<td>cell3_4</td>
<td>cell4_4</td>
</tr>
</tbody>
</table>





<style>
table.blueTable {
  border: 1px solid #1C6EA4;
  background-color: #EEEEEE;
  width: 100%;
  text-align: left;
  border-collapse: collapse;
}
table.blueTable td, table.blueTable th {
  border: 1px solid #AAAAAA;
  padding: 3px 2px;
}
table.blueTable tbody td {
  font-size: 13px;
}
table.blueTable tr:nth-child(even) {
  background: #D0E4F5;
}
table.blueTable thead {
  background: #1C6EA4;
  background: -moz-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
  background: -webkit-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
  background: linear-gradient(to bottom, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
  border-bottom: 2px solid #444444;
}
table.blueTable thead th {
  font-size: 15px;
  font-weight: bold;
  color: #FFFFFF;
  border-left: 2px solid #D0E4F5;
}
table.blueTable thead th:first-child {
  border-left: none;
}

table.blueTable tfoot {
  font-size: 14px;
  font-weight: bold;
  color: #FFFFFF;
  background: #D0E4F5;
  background: -moz-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
  background: -webkit-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
  background: linear-gradient(to bottom, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
  border-top: 2px solid #444444;
}
table.blueTable tfoot td {
  font-size: 14px;
}
table.blueTable tfoot .links {
  text-align: right;
}
table.blueTable tfoot .links a{
  display: inline-block;
  background: #1C6EA4;
  color: #FFFFFF;
  padding: 2px 8px;
  border-radius: 5px;
}
</style>

Senza conoscere il codice HTML/CSS, con HTML Table Styler potrai creare velocemente tabelle davvero molto belle.

Neumorphic

Neumorphic consente di creare dei box con effetto “Wow”, utilissimi per sviluppare siti web seguendo le ultime tendenze, restando però nell’ottica nel Minimal design.



<div class="neuro" style="max-width:300px; margin:0 auto; padding:120px;">
    <p style="text-align:center">prova</p>
</div>





<style>
.neuro {
    background: #D2DBEE;
    border-radius: 100%;
    box-shadow: inset 9.61px 9.61px 10px #B8C0D0, inset -9.61px -9.61px 10px #ECF6FF;
}
</style>

Ultimamente infatti, questi effetti sono di grande tendenza, anche se ancora poco utilizzati in ambito del web design.

Particles.js

Gli effetti animati sono una parte importante per sviluppare un sito web. I clienti sono sempre più esigenti in merito e pur dovendo puntare prima di tutto sulla velocità, spesso non possiamo fare a meno di usarli.

Purtroppo, soprattutto in ambito wordpress, la maggior parte degli effetti animati generati dai plugin non sono all’altezza in quanto a prestazioni, ne in compatibilità con i dispositivi mobili.



<div id="particles-js" style="width:100%; padding:300px; text-align:center;"> Prova particles.js </div>





<style>
.particles-js-canvas-el {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 0;
    top: 0;
}
</style>





<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> 

<script>
particlesJS("particles-js", {"particles":{"number":{"value":80,"density":{"enable":true,"value_area":800}},"color":{"value":"#0d71b9"},"shape":{"type":"circle","stroke":{"width":0,"color":"#000000"},"polygon":{"nb_sides":5},"image":{"src":"img/github.svg","width":100,"height":100}},"opacity":{"value":0.5,"random":false,"anim":{"enable":false,"speed":1,"opacity_min":0.1,"sync":false}},"size":{"value":3,"random":true,"anim":{"enable":false,"speed":40,"size_min":0.1,"sync":false}},"line_linked":{"enable":true,"distance":150,"color":"#0d71b9","opacity":0.4,"width":1},"move":{"enable":true,"speed":6,"direction":"none","random":false,"straight":false,"out_mode":"out","bounce":false,"attract":{"enable":false,"rotateX":600,"rotateY":1200}}},"interactivity":{"detect_on":"canvas","events":{"onhover":{"enable":true,"mode":"repulse"},"onclick":{"enable":true,"mode":"push"},"resize":true},"modes":{"grab":{"distance":400,"line_linked":{"opacity":1}},"bubble":{"distance":400,"size":40,"duration":2,"opacity":8,"speed":3},"repulse":{"distance":200,"duration":0.4},"push":{"particles_nb":4},"remove":{"particles_nb":2}}},"retina_detect":true});var count_particles, stats, update; stats = new Stats; stats.setMode(0); stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; document.body.appendChild(stats.domElement); count_particles = document.querySelector('.js-count-particles'); update = function() { stats.begin(); stats.end(); if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) { count_particles.innerText = window.pJSDom[0].pJS.particles.array.length; } requestAnimationFrame(update); }; requestAnimationFrame(update);;

</script>


Particles.js ti consente di creare degli effetti animati di sfondo davvero “Wow” e che renderanno felice te o i tuoi clienti.

E’ facile da usare e da integrare in qualsiasi sito web, non incide sulla velocità ed è davvero molto scenografico.

Transition.css

Uno strumento fantastico per creare animazioni “Wow” durante lo sviluppo di un sito web.

Transition.css consente di creare effetti di sfondo animati con una semplice toolbar che ti permette di cambiare velocemente gli effetti semplicemente cliccandoci sopra.



<div transition-style="in:circle:hesitate" style="width:100%; text-align:center; background-color:green; color:white; height:800px;">
    <span style="display: inline-block; margin-top:20%;">Prova transizione</span>
</div>





<style>
@keyframes circle-in-hesitate {
  0% {
    clip-path: circle(0%);
  }
  40% {
    clip-path: circle(40%);
  }
  100% {
    clip-path: circle(125%);
  }
}

[transition-style="in:circle:hesitate"] {
  animation: 2.5s cubic-bezier(.25, 1, .30, 1) circle-in-hesitate both;
}
</style>



Una volta copiato il codice CSS ti basterà incollarlo nel tuo sito web e assegnare la classe corrispondente all’elemento che vorrai animare.

Uiverse Button

Con Uiverse Button hai a disposizione oltre 200 bottoni già pronti all’uso per sviluppare un sito web.



<button>
  <div class="svg-wrapper-1">
    <div class="svg-wrapper">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
        <path fill="none" d="M0 0h24v24H0z"></path>
        <path fill="currentColor" d="M1.946 9.315c-.522-.174-.527-.455.01-.634l19.087-6.362c.529-.176.832.12.684.638l-5.454 19.086c-.15.529-.455.547-.679.045L12 14l6-8-8 6-8.054-2.685z"></path>
      </svg>
    </div>
  </div>
  <span>Send</span>
</button>





<style>
button {
 font-family: inherit;
 font-size: 20px;
 background: royalblue;
 color: white;
 padding: 0.7em 1em;
 padding-left: 0.9em;
 display: flex;
 align-items: center;
 border: none;
 border-radius: 16px;
 overflow: hidden;
 transition: all 0.2s;
}

button span {
 display: block;
 margin-left: 0.3em;
 transition: all 0.3s ease-in-out;
}

button svg {
 display: block;
 transform-origin: center center;
 transition: transform 0.3s ease-in-out;
}

button:hover .svg-wrapper {
 animation: fly-1 0.6s ease-in-out infinite alternate;
}

button:hover svg {
 transform: translateX(1.2em) rotate(45deg) scale(1.1);
}

button:hover span {
 transform: translateX(5em);
}

button:active {
 transform: scale(0.95);
}

@keyframes fly-1 {
 from {
  transform: translateY(0.1em);
 }

 to {
  transform: translateY(-0.1em);
 }
}
</style>



Alcuni bottoni contengono animazioni complesse, mentre altre sono meno evidenti. Ti basterà posizionare il mouse sopra ognuno di essi per vedere quale è più adatto alle tue esigenze.

L’editor integrato permette non solo di copiare il codice, ma anche di personalizzarlo (ad esempio nei colori) prima di copiarlo e incollarlo nel tuo sito web.

Oltre ai bottoni, nello stesso sito web troverai checkbox, toggle on/off, cards, loaders di pagina, e input box, tutti belli e pronti per essere copiati e incollati, oppure personalizzati.

Siamo alla fine di questo articolo e siamo certi che potrai utilizzare al meglio questi strumenti.

Se invece vuoi affidarti a un’agenzia specializzata nello sviluppo di siti web, mettiamo a tua disposizione il nostro preventivatore in tempo reale:

Esempio di preventivo per creare un sito web
Esempio preventivo sito web

FINE

Condividi

La prima consulenza è gratuita!
Raccontaci il tuo progetto

Cliccando sul pulsante INVIA RICHIESTA acconsento all’utilizzo dei miei dati nel sistema di archiviazione secondo quanto stabilito dal regolamento europeo per la protezione dei dati personali n. 679/2016, GDPR e dichiaro di aver letto l’ informativa sulla Privacy

WhatsApp

+39 340 82 15 366

Secured By miniOrange