Free Resources to Help You Design Great Digital Signage Content

Comments

68 comments

  • Avatar
    Javier Gomez
    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.
  • Avatar
    Shea Darlison
    That's a great tool, thanks for sharing!
  • Avatar
    Jordan Winthrop
    Simply fantastic! Thanks!
  • Avatar
    Darius Aleksas
    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.
  • Avatar
    Shea Darlison
    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. 
  • Avatar
    J Juno
    We use GIMP (http://www.gimp.org/) instead of photoshop.
  • Avatar
    Mat Meiers
    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
  • Avatar
    Shea Darlison
    Here's a guide I found really helpful for typography http://johndjameson.com/blog/guidelines-for-letterspacing-type/
  • Avatar
    Chad Pepper
    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
  • Avatar
    Shea Darlison
    Hi Mylife,

    Definitely not elementary, it's a fairly confusing tool to use.

    Google Web Designer was built primarily to create HTML5 banner ads. I'm pretty sure it was Google trying to get people away from Flash. Therefore, I don't think they have any digital signage templates and I haven't created any templates personally. 

    I also don't think there are any tutorials on how to incorporate it into digital signage because of it's original purpose. My best suggestion would be to build in it at your desired presentation size for example 1920x1080 and then publish it to your desktop, host the files, and then insert that web page. 

    I'll look into possibly creating a web page in it and posting how I did it. I can't make any promises though. 

    Thanks,
    Shea
  • Avatar
    Chad Pepper
    Shea, thanks for the prompt reply man... I am looking for ways to really offer more of a visually appealing experience and love some of the dynamic things i have seen posted with HTML5  content etc. I know creating a webpage and dropping it into the schedule is likely the way to go about it, My lack of knowledge on the web design side is shinning through lol. 
    If you get around to looking into it I would appreciate it with any feedback, gaining the basic knowledge before I reach out to several connections I have on the implementation side is key....
    Nontheless Thank You!
    Cheers to you and the Rise community
  • Avatar
    Darius Aleksas
    Mylige614,

    You also can use existing website building tools such as WordPress or Joomla. They are not complicated, but do require some learning curve. There are tons of visually appealing templates for them and most of them are extremly customizable. Here is an example I have put together real quick: http://preview.risevision.com/Viewer.html?type=presentation&id=aa57f65a-5bae-4201-a6ed-22fc22ed9...

    It's just Joomla CMS website with one of the awesome RocketTheme templates. I chopped it down to fit within standard vertical full HD resolution. I removed menu navigation, but it can be activated there for an interactive digital sign.

    Give it some time to load because it is on really crappy server. On a downside (in addition to learning curve) you would need web hosting that supports your CMS of choice and that is $$$. On an upside you get lots of  functionality including interactive digital signage capabilities.

    Also, I like using Dreamweaver CC for simple one-page digital sign webpages. All you need to know is HTML and CSS basics.
  • Avatar
    Chad Pepper
    Darius, 
    Thank you for the insight! We use word press and self host content through Blue host. So it seems we already have a solid base. I will need to just dive in further it seems 
  • Avatar
    Darius Aleksas
    Here you go! The only thing you need to be concerned about is your content fitting within a display. I mean it would not be nice to see scroll bars, right? The way I see it (just an idea), especially if you already have existing website, all you need to do is to create additional page (not accessible by the internet users) and retrofit it for display resolution. Pull it to your RV platform with custom URL link. That is it. This way you would get sort of uniform and professional appearance across all the platforms for the same company.
  • Avatar
    Shea Darlison
    Hey Mylife,

    So I had some time on my hands last night and decided to try out making some DS content with google web designer (GWD). Personally I much prefer building with HTML, GWD is kind of a pain. But once you get the hang of it it's not terrible and i'm sure you could make some really cool content. 

    For the sake of time and simplicity I just made a poster for a movie theatre. You can check it out here http://sheadarlison.github.io/ds-test/ds-test.html (Note: disable ad block or it will never load) The only animation I have with it is a slight fade in of the text on the right which I did by changing the opacity in GWD. 

    I just started simple and read through this documentation which is pretty clear. https://support.google.com/webdesigner 

    Let me know if that helps.

    Thanks,
    Shea
  • Avatar
    Mat Meiers
    Looks good Shea!

    One thing to note is GWD has been in beta for years. So not sure if it's something that Google plans to keep around...

    It might be worth checking out Hype as it is very similar and is updated regularly.
    But like Shea, Id just prefer html and animating with css keyframes...
  • Avatar
    Chad Pepper
    Shea, thank you for the visual example it looks great! I share the hesitation in GWD now that i've looked into things further an see it is still in beta and risk of loss of support. I am not a "Programmer/Web Developer/Design" and this functionality is and learning curve is something I am trying to close ground on with basic knowledge etc. I do have several individuals that have help with content creation so Knowledge for me is key, specially with minimal budget at the moment. If I could find a solution similar to GWD in which allows ease of operation with design without necessity of Mass code knowledge that would be a home run..... 

    mlm, I will look into Hype further I appreciate the link, although it appears to be strictly for Mac users, Is there any similar recommendations for cross platform?

    Another quick question... If one was to create creative HTML content as an active "webpage" and pulls to URL to distribute to rise vision to be displayed.... Will update to the content on the page be shown via the Display (Maybe using widget to set when it checks back?), Also is there coding or functionality to can be added to the webpage so that it can be resized to match the resolution/dimensions of different displays Full screen say to 1920x1080 display along with 1280x720 etc etc??

    Guys I apologize for the 21 questions, but your knowledge and insight is truly appreciated!
  • Avatar
    Shea Darlison
    Hi Mylife,

    No worries regarding the questions. GWD doesn't require much code knowledge I would suggest watching a few youtube videos of people building something with it and you'll be able to understand how it works. 

    Also if Google removes support for it I don't believe it will affect anything you have built because really what you are exporting is non proprietary HTML code. 

    If you created a website with HTML you could pull it into Rise Vision either through the web page widget which has a refresh option or by scheduling the URL. The scheduling by URL option would refresh the content fairly regularly. 

    You can build web pages to fit any size display, I have played around with that in the past this pages content changes on mobile, desktop, and display (http://sheadarlison.github.io/content-template-2/). However, I made some changes a while ago that broke some things so it is very far from perfect..  And this one is designed to look good on most landscape displays (http://sheadarlison.github.io/content-template/university.html). 

    These web pages are built using responsive design so that they will fit full screen on most resolutions. There is a ton written on the topic of responsive design, and it's something that can take a while to get the hang of as you need to understand HTML and CSS. But once you're able to do it you don't have to create 3 different presentations you can just make one that scales depending on the resolution. 

    Let me know if you have any other questions.

    Thank you,
    Shea
  • Avatar
    Shea Darlison
    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
  • Avatar
    Nicholas Yoho
    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.

      
  • Avatar
    Shea Darlison
    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
  • Avatar
    Chad Pepper
    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...
  • Avatar
    Nicholas Yoho
    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.
  • Avatar
    Shea Darlison
    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 
  • Avatar
    Shea Darlison
    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! 
  • Avatar
    Shea Darlison
    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/
  • Avatar
    Shea Darlison
    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/
  • Avatar
    Darius Aleksas
    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
  • Avatar
    Shea Darlison
    Looks cool! Thanks Darius
  • Avatar
    Mat Meiers
    Thanks for sharing definitely handy.

Please sign in to leave a comment.