Free Resources to Help You Design Great Digital Signage Content

  • 10
  • Article
  • Updated 1 year ago
  • (Edited)
Designing content can be difficult, below are some resources to make it a little easier for you!

Typography

Design Tools

Picking Colours 

Stock Photos and Video

Icons

Let us know what you use to design content in the comments!
Photo of Shea

Shea, Official Rep

  • 5,188 Points 5k badge 2x thumb

Posted 3 years ago

  • 10
Photo of Javier Gomez

Javier Gomez

  • 902 Points 500 badge 2x thumb
Great list of resources, Shea!
I'll add to the Design Tools section Snappa.io, it is similar to Canva but with a very simple interface.
Photo of Shea

Shea, Official Rep

  • 5,188 Points 5k badge 2x thumb
That's a great tool, thanks for sharing!
Photo of Jordan Winthrop

Jordan Winthrop

  • 450 Points 250 badge 2x thumb
Simply fantastic! Thanks!
Photo of Darius - PRODO.us

Darius - PRODO.us, Champion

  • 26,850 Points 20k badge 2x thumb
http://kuler.adobe.com for color picking/matching/mixing...
http://dafont.com
http://www.awwwards.com/100-greatest-free-fonts-collection-for-2015.html over there you can find lots of nice fonts, and other cool resources for designers.
(Edited)
Photo of Shea

Shea, Official Rep

  • 5,188 Points 5k badge 2x thumb
Here's two I just stumbled across these today.

One is a UI movement inspiration site. I don't think they have any digital signage examples, but movement is pretty effective at getting the attention of people as they walk past a screen. It would be interesting incorporate some of these ideas into DS content. http://uimovement.com/

The other is a photo editor (mind you this is not free) called Acorn. https://itunes.apple.com/us/app/acorn-5-image-editor-for-humans/id1019272813?ls=1&mt=12 I haven't tried it out yet but it looks a lot simpler to use than illustrator or photoshop and it's only $25.00. 
Photo of J Juno

J Juno

  • 1,564 Points 1k badge 2x thumb
We use GIMP (http://www.gimp.org/) instead of photoshop.
Photo of mlm

mlm, Official Rep

  • 4,624 Points 4k badge 2x thumb
This is awesome Shea!

Regarding stock photography here is another great complied list of resources: 
http://www.producthunt.com/@brandonjgeo/collections/stockstuff

Kuler and Dafont as Darius mentions are great, I use them frequently.

And if anyone is looking for inspiration, https://dribbble.com/ is always good for layout and color ideas.

We've also started our own portfolio there: https://dribbble.com/risevision
Photo of Shea

Shea, Official Rep

  • 5,188 Points 5k badge 2x thumb
Here's a guide I found really helpful for typography http://johndjameson.com/blog/guidelines-for-letterspacing-type/
Photo of Mylife614 .

Mylife614 .

  • 2,326 Points 2k badge 2x thumb
Thanks! Question wanting to dive into more dynamic content to display, I was checking out Google.com/webdesigner/ Tool..... Is there any resources to learn up on how to use to creating "templates" that will fit dimensions of the displays etc? Or tutorials for how to incorporate the functionality with digital signage? Sorry if this is very elementary, I am trying to wrap my own head around it before I look for some assistance. Any help or direction would be greatly appreciated
Photo of Shea

Shea, Official Rep

  • 5,188 Points 5k badge 2x thumb
Hey Mylife,

I just wanted to share a good example of what is possible with GWD, another user put this together https://community.risevision.com/rise_vision_inc/topics/portrait-presentation-using-google-web-desig... 

Thanks,
Shea
Photo of Tri-C Metro

Tri-C Metro

  • 1,642 Points 1k badge 2x thumb
Hey all, 
Google Web Designer has become my "go to" for so much of the content that I create.  It really is simple to use, and despite the possibility of it being deprecated at some point, all the HTML created is yours to keep.  I have been trying to organize a folder of templates I will offer for free that people can use to incorporate into Rise.  Basically, create a "generic" banner ad in whatever dimensions you like then publish it to google drive.  Currently, Google Drive allows for hosting webpages for free (this is ending next year).  Then add the URL to the web page widget.  When changes are made to theGWD file, the web page will reflect any changes instantaneously after it is published.  Check out this one i just made - all in GWD, and all free,:
http://preview.risevision.com/Viewer.html?type=presentation&id=658c8101-30d0-424b-88b5-ec2adca47...
This is portrait mode so it looks much better on a  big screen.  

You can check out some other designs i posted in this thread:https://community.risevision.com/rise_vision_inc/topics/some-new-content

Simple banner ads like this are a breeze too.  http://preview.risevision.com/Viewer.html?type=presentation&id=888cd559-c675-474a-8278-1310e589b...

If GWD frightens you, check out Adobe Edge animate as an alternative.

  
Photo of Shea

Shea, Official Rep

  • 5,188 Points 5k badge 2x thumb
Just to add to that if you are looking for hosting options you can also host web pages in Rise Storage now. See this thread for more info: https://community.risevision.com/rise_vision_inc/topics/host-your-html-page-on-rise-storage
Photo of Mylife614 .

Mylife614 .

  • 2,326 Points 2k badge 2x thumb
Tri-C Thank You thank you for the links, content looks great, I have been able to create some basics in GWD, Question is when I publish to folder in Google Drive folder it is providing me with a an HTML file and a PNG file of the image I added in... from there i am stumped.... 
Side not I would love to get some "templates" if at all possible...
Photo of Tri-C Metro

Tri-C Metro

  • 1,642 Points 1k badge 2x thumb
Mylife614 - 

First, make the published folder "public"

Second, go to the folder of the published file on Google Drive, copy the folder ID - it should look like 0B4C_tHXXXXXXXPejZfakZtNjQ

Third, Append it to the end of this URL: https://googledrive.com/host/ (or store the folder in Rise Storage, See Shea's comment above)

Lastly, use web page widget to run content.
Photo of Shea

Shea, Official Rep

  • 5,188 Points 5k badge 2x thumb
Couple more things to add to this list: 

http://mitchmartinez.com/free-4k-red-epic-stock-footage/ Free 4k stock footage
https://www.filmsupply.com/ Premium stock footage (not free)
https://stock.tookapic.com/ More stock photos 
Photo of Shea

Shea, Official Rep

  • 5,188 Points 5k badge 2x thumb
Hi Guys, 

Another addition https://www.weld.io this tool is for designing websites. But can be used to design for digital signage. To use it for DS I picked a blank canvas template then set width and height to 1920x1080.

What I created was super simple I created a mockup in Sketch, exported it as an image and then imported that image into Weld, took the Weld URL and put it in the web page widget and here is the final result: http://preview.risevision.com/Viewer.html?type=presentation&id=9aa4678b-b47b-4b7f-998a-2ee73c792...

You could definitely make more complicated things than this and it looks like a pretty cool tool for creating responsive websites. Some notes on pricing: it's free, but the weld badge is always on the content. If you pay you can use custom domains and a few extra features.

If you try it out please share what you create here. 

Thanks! 
Photo of Shea

Shea, Official Rep

  • 5,188 Points 5k badge 2x thumb
More resources:

Gesture Icons: https://dribbble.com/shots/2181099-Gesture-Icon-Freebie?1438764950


Awesome JQuery: https://github.com/peterkokot/awesome-jquery. A curated list of awesome jQuery plugins, resources and other shiny things.

ContentTools: http://getcontenttools.com/ The ContentTools WYSIWYG editor can be added to any HTML page in a few simple steps. 

Popmotion.io: A 12kb JavaScript motion engine http://popmotion.io/
 
Project Apollo posts a lot of public domain images from NASA to Flickr: https://www.flickr.com/photos/projectapolloarchive/
Photo of Shea

Shea, Official Rep

  • 5,188 Points 5k badge 2x thumb
Vectr: Is a free design app, it looks pretty cool https://vectr.com/

Corpus: If you like flexbox and frameworks check this out http://corpuscss.com/
Photo of Darius - PRODO.us

Darius - PRODO.us, Champion

  • 26,850 Points 20k badge 2x thumb
Not sure if this was listed, take a look... http://flattyshadow.com/
Check this out too,  some more cool stuff in there... http://www.awwwards.com/flat-long-shadows-step-by-step-tutorial-resources-and-examples.html
Photo of Shea

Shea, Official Rep

  • 5,188 Points 5k badge 2x thumb
Looks cool! Thanks Darius
Photo of mlm

mlm, Official Rep

  • 4,624 Points 4k badge 2x thumb
Thanks for sharing definitely handy.
Photo of Shea

Shea, Official Rep

  • 5,188 Points 5k badge 2x thumb
This is pretty cool http://colinkeany.com/blend
Photo of Shea

Shea, Official Rep

  • 5,188 Points 5k badge 2x thumb
A collection of tools for web animations https://medium.com/@vilcins/handy-web-animations-tools-8faff4790b1c

A beginners guide to SVG http://designshack.net/articles/graphics/the-practical-beginners-guide-to-svg/

Bootstrap Studio: A desktop web design tool for creating responsive websites using the bootstrap framework http://bootstrapstudio.io/
Photo of Shea

Shea, Official Rep

  • 5,188 Points 5k badge 2x thumb
Slides http://designmodo.com/slides/ this is not free although it is pretty cool for those that are not web designers but know some HTML. 
Photo of Shea

Shea, Official Rep

  • 5,188 Points 5k badge 2x thumb
Open source UI components from the U.S. government: https://playbook.cio.gov/designstandards/

Responsive typography with CSS: http://codepen.io/mosne/pen/Qjgmmp This is really cool and very handy if you're building HTML content that will display on mobile, desktop, and digital signage.

Upup is a script that makes sure your site is always there for your users: https://www.talater.com/upup/ 

jQuery plugin for drawing SVG paths. http://lcdsantos.github.io/jquery-drawsvg/ 

A massive UI kit http://www.baianat.com/resources/stark/

Smart cropping tool: https://github.com/jwagner/smartcrop.js
Photo of HSuarez

HSuarez

  • 11,896 Points 10k badge 2x thumb
http://www.freeimages.com/ is a good resource.  
Also recently found http://www.rgbstock.com/
Photo of Shea

Shea, Official Rep

  • 5,188 Points 5k badge 2x thumb
Create simple bar charts http://chartico.com/
Photo of Shea

Shea, Official Rep

  • 5,188 Points 5k badge 2x thumb
A very hand tool for optimizing your images: https://imageoptim.com/ Optimizing your images will make them download more quickly and use less of your bandwidth. And for video you can use handbrake https://handbrake.fr/.
Photo of Ashleigh

Ashleigh

  • 3,740 Points 3k badge 2x thumb
For anybody who wants to make their presentation snow for the holiday season:

<style>
* {margin: 0; padding: 0;}
}
canvas {
display: block;
}
</style>
<script>
    window.onload = function(){
//canvas init
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
//canvas dimensions
var W = window.innerWidth;
var H = window.innerHeight;
canvas.width = W;
canvas.height = H;
//snowflake particles
var mp = 25; //max particles
var particles = [];
for(var i = 0; i < mp; i++)
{
particles.push({
x: Math.random()*W, //x-coordinate
y: Math.random()*H, //y-coordinate
r: Math.random()*4+1, //radius
d: Math.random()*mp //density
})
}
//Lets draw the flakes
function draw()
{
ctx.clearRect(0, 0, W, H);
ctx.fillStyle = "rgba(255, 255, 255, 0.8)";
ctx.beginPath();
for(var i = 0; i < mp; i++)
{
var p = particles[i];
ctx.moveTo(p.x, p.y);
ctx.arc(p.x, p.y, p.r, 0, Math.PI*2, true);
}
ctx.fill();
update();
}
//Function to move the snowflakes
//angle will be an ongoing incremental flag. Sin and Cos functions will be applied to it to create vertical and horizontal movements of the flakes
var angle = 0;
function update()
{
angle += 0.01;
for(var i = 0; i < mp; i++)
{
var p = particles[i];
//Updating X and Y coordinates
//We will add 1 to the cos function to prevent negative values which will lead flakes to move upwards
//Every particle has its own density which can be used to make the downward movement different for each flake
//Lets make it more random by adding in the radius
p.y += Math.cos(angle+p.d) + 1 + p.r/2;
p.x += Math.sin(angle) * 2;
//Sending flakes back from the top when it exits
//Lets make it a bit more organic and let flakes enter from the left and right also.
if(p.x > W+5 || p.x < -5 || p.y > H)
{
if(i%3 > 0) //66.67% of the flakes
{
particles[i] = {x: Math.random()*W, y: -10, r: p.r, d: p.d};
}
else
{
//If the flake is exitting from the right
if(Math.sin(angle) > 0)
{
//Enter from the left
particles[i] = {x: -5, y: Math.random()*H, r: p.r, d: p.d};
}
else
{
//Enter from the right
particles[i] = {x: W+5, y: Math.random()*H, r: p.r, d: p.d};
}
}
}
}
}
//animation loop
setInterval(draw, 33);
}
</script>
Paste the above code into the HTML widget between the <body> tags. Stretch that placeholder to fit the entire screen in the editor.
Preview: http://preview.risevision.com/Viewer.html?type=presentation&id=8116aa79-7c08-42b0-b4bc-cae682027...

Enjoy!
Photo of Shea

Shea, Official Rep

  • 5,188 Points 5k badge 2x thumb
40 material design backgrounds (not sized for digital signage but it wouldn't be difficult to get them to work) http://www.oxygenna.com/news/brand-new-set-of-40-material-design-backgrounds

Cool falling leaves animation http://codepen.io/at80/pen/tqdmv
Photo of Ashleigh

Ashleigh

  • 3,740 Points 3k badge 2x thumb
Reminds me of sakura or falling hearts. T-hee.
Photo of mlm

mlm, Official Rep

  • 4,624 Points 4k badge 2x thumb
Great resource for all things Material Design: http://www.materialup.com/
Photo of Yinan Chen

Yinan Chen

  • 70 Points
Hi, Nice list.Please also check out http://www.goodfreephotos.com for thousands of unique public domain photos, especially travel photos. Appreciate it if you could add it to your list. Let me know, I always blog about lists that include my site. Thanks!
Photo of Robb

Robb, Official Rep

  • 76,676 Points 50k badge 2x thumb
Darth Binks...blasphemy!
Photo of Shea

Shea, Official Rep

  • 5,188 Points 5k badge 2x thumb
Open source tool for creating web templates without coding http://grapesjs.com/
Photo of Shea

Shea, Official Rep

  • 5,188 Points 5k badge 2x thumb
Photo of Jim Coyle

Jim Coyle, Champion

  • 1,494 Points 1k badge 2x thumb
Hahaha - check the Unicorn - http://tympanus.net/Development/Animocons/
Photo of Shea

Shea, Official Rep

  • 5,188 Points 5k badge 2x thumb
Haha It's awesome. I think the Unicorn icon as a button on some interactive signage would be very funny (maybe not professional but definitely funny).