Example of a Snakes and Ladders board game | design project

This project is an example of a Snakes and Ladders board game that I had the privilege in being involved in creating!

Many elements of this game, uses the Snakes & Ladders mechanics and adds additional aspects to the gameplay.

Example of a Snakes and Ladders board game - game board

Additional elements included items such as game cards and collectible tokens. Or to be specific, Bones! Which were needed to complete the game and the end of the player journey.

You will find this post helpful if you are looking for ideas and inspiration to create or commission your own Snakes and ladders styled game.

I will cover my creative process and journey in helping to bring my client’s passion project to life – here is an example of a snakes and ladders type game. Which I had the pleasure of helping to create!

Or, as it was actually called in the end.

DINO BREAK

Divider

Creating a Snakes & Ladders type game

It is unfair to say that this is only a Snakes & Ladders game.

For example, when you play Snakes and Ladders, you roll a dice and move around the board trying to dodge the snakes and use the ladders as shortcuts.

With Dino Break, the game combines both challenging questions and token collection to win the game.

When the player lands on the spaces around the board, You ( the player ) must take a card from the deck and read aloud the questions which are themed around dinosaurs (palaeontology).

If the player gets the question correct, they take a token.

You need 6 tokens to win the game and free your friend.

This is an example of what can be done with Snakes & Ladders as a framework and adding to it.

To create the Dino Break game, including the mechanics of the game. It borrowed many of the gameplay elements from snakes and ladders and pushed it to new levels.

Extra parts were added to the game including cards, questions, points, and ‘nasty cards’ that cost the player points.

Divider

Examples of the complete prototype game

This is the printed prototype of the game complete with the outer box, game board, cards, rules, and tokens.

The look and the feel for the game were established once the core design had been created.

Example of a Snakes and Ladders board game - Game Box
Freelance game box graphic design
Example of a Snakes and Ladders board game - bottom

The narrative for Dino Break

Most of the core mechanics of the game were already supplied to me before I itemised what was needed for this jailbreak/snakes and ladder-type game.

Part of my core roll for this game was the creation of the game narrative. I created a story that would be told through the visuals and character design for the game. – The theme.

It was already established that the players would need to save or free a creature at the end of the game to win.

In order to win the game and free the prisoner, something would need to be collected throughout the game. Tokens, that would represent points.

This allowed for plenty of room for experimentation and the direction of the visual narrative. I took down the path of cartoon prehistoric.

Game Prototype - inside contents
Example of a Snakes and Ladders board game - cards
Visual design for game tokens
Divider

Characters for the game | the players

The other part of my involvement in the making of this game was in creating character concepts. As an extra layer, I suggested that there should be a ‘good team’ and ‘bad’ team.

Protagonist and antagonist.

By default, you would assume that a bloodthirsty Dinosaur would be a villain. A big toothy dinosaur that eats little friendly dinosaurs or cave people!

I wanted to make this breakout game a bit different. Instead of villainous creatures. I made the cavemen the villains and the Dinosaurs the friendly ones – or the hunted!

The Players | The Crazy Saurs

As part of the game, I came up with 4 different playable characters ( and 2 blank playing cards ) in which you can play as any of the 4 different Dinosaurs or … Crazy Saurs

Vector Dinosaurs for Board game Copyrighted - Dino Break
Crazy Saur Vector illustration
A character design! More can be read on my character and vector design services on this website
Character Sketches

The Friendly Saurs

The Friendly Saur is the character you need to save from the cavemen. Collect the 6 tokens to free the Friendly Saur. As with the other designs, this character was sketched out and drawn in Adobe Illustrator as part of my contracting service.

The Cave Man

The cavemen were the villains of the peace in this game. I wanted to cast them as villainous thugs that wanted nothing more than to make Dino soup!

All characters are copyrighted.

These characters were created as part of my game design and also my character design services that go into greater detail on this website. You can read more there.

Creative process to making a snakes and ladders board game (Dino Break)

As a further example of making snakes and ladders board game, I wanted to share some of the stages and processes of creating the game.

A “very rough” post-it note prototype of the game was sent emailed to me to inspect and decide and the best course of action.

I broke project down into manageable stages. Considering how I would need to achieve x y z on a budget.

Once the core goal was agreed. I set about roughing out the concept for the characters and the look and feel for the game.

Some minor suggestions were offered to the “mission” of the game. How to win.

With the concept, I took it as a snake and ‘laddersesque’ game and considered what we could do differently from a design standpoint. Everybody knows Snakes and Ladders – but what could be done differently.

I offered a range of ideas for the core components. Here is a rough list of core components for the game prototype.

Divider

Dino Break rough components and cutting list

  • Create the characters and character cards
  • Playing cards
  • Rules
  • Tokens
  • Game board
  • Top of game box
  • Bottom of game box
  • Other bits and pieces

For milestones for the clients and to keep everybody as involved as possible. I showed the project to the clients to keep them in the loop.

I polished the design until it was complete.

Once the visual design was complete along with the flat mockup, I sent the game artwork away to be printed.

Divider

Example of Snakes and Ladders board game – Dino Break

This game allowed me to flex my design muscles and jump in with both feet.

The project was an example of how you can create a game prototype and how you can create a retail and pitch ready prototype of your game.

You may also feel inspired by this board game example to create your own project.

Thank you for reading.

"I was very impressed with the work itself and your designs were exactly what me and the child had in mind.

You kept to deadlines and were very punctual and took on board any amendments and got these done quickly.

You were a great businessman but also a fantastic person to work with. And you should be proud of the service you provided as you made one little boy's dreams come true." - Anonymous. (Dino break)

If you would like to read more on board game design related articles you can do so by following the links below.

Helpful board game creation articles

How to create a retail ready party game

How do you get into the board game industry

Getting your board ready to pitch to the retailers

Additional Articles – Computer games

Creating STEM products

Example of creating an E-learning computer game (in steps)

Freelance Game Design Services

Board game designer based in the UK
Vector Illustration services (character design)
Creative Direction

Snakes and Ladders board game - Service and design

This article is an example of an educational snakes and ladders board game. All content design, cards, characters are copyright to their respective owners. DO NOT STEAL THIS ARTWORK or claim this game as your own.

Examples of cardboard things & products you can make

This is a list of examples of cardboard ‘things’ and products that I have made and co-designed for retail.

This list of product ideas may be useful if you are looking for ways to create your own cardboard products or STEM/products for your business, home project, or school homework.

Cardboard is a great material to use. It is versatile and generally affordable.

If you are looking for Freelance Cardboard Designer to help you create your product, the links below will take you to my skills and services website where you can read a bit more about my skills and services.

examples of cardboard things - card game net

Skills & Services (external website)

Divider

Examples of cardboard products & things

For this project, I was involved in the creation and the look and feel of the product. I themed the product around space “the final frontier” to try and make it exciting to the target demographic.

You can read more about the stages and the process of this product – how to make a low-cost STEM product. Which goes into deeper detail on ‘how’ to make the product in steps.

examples of cardboard things - VR cardboard
examples of cardboard things - flat next of a product design!

VR Cardboard 2 – “Virtual Goggles”

An alternative VR Cardboard model with a different theme and styling. The die-line was supplied by a factory and I filled the template with the artwork.

I was involved in the concept for the narrative behind the artwork – eg the polygon world, which was inspired by a lot of the walking sims and Smartphone apps available on the market at the time.

Virtual Goggles made from cardboard
Flat next of cardboard product

Most of the artwork was created in Adobe Illustrator – Vector illustration – with some additional tweaks and accents added in Photoshop later on.

“Other things you can create with cardboard! “

Divider

Games

These are not ‘pure’ cardboard products… but most of the contents are either playing card material or regular cardboard. The top and bottom lid is made from card, that has mounted or wrapped in high-quality finish paper.

The colour manual which sits inside the box is made from silk coated flyer paper.

examples of cardboard things - make a game!
playing cards example

So.

With regards to what you can make out of cardboard, card or even paper, a card game or board game may be a viable option.

Although based on my commercial experience in designing a couple of party games, the manufacturing cost for a board game can be relatively low.

On the other hand, creating a game can be a very time-hungry process, though very rewarding if your game is successful.

I have written more about this product here, how to make a party game that you can sell.

Mock ups for a game idea
Divider

Cardboard Smartphone Photo Booth

Officially known as the Memory Capture. The aim of this product was to create a “build your own” product made purely from fluted cardboard.

When creating this product, a lot of trial and error was involved with getting this to a working prototype.

examples of cardboard things - Phone Booth
actual cardboard product
Concept for cardboard product
Early concept for a cardboard product

We created various mock-ups from miniatures to life-size models to see whether it could be put together easily and support a smartphone without it collapsing.

It is wise to create mock-up and prototypes before spending the money and going into a production run.

The artwork was created to represent a retro SRL camera with aim of the product appealing to more senior analogue camera user.

Photoshop was used when creating the textures and photo reference to illustrate the retro polaroids!

Divider

Cardboard puppet show for your Smartphone

This product was almost 100% cardboard, aside from the plastic sticks that were supplied in order to move the puppets around.

The Mobile Theatre turns your Smartphone – combined with the kit – into a 2D puppet show, which you can record and share.

The kit comes with an assortment of backdrops, characters, and 2-dimensional props to spark the imagination.

examples of cardboard things - puppet show for smartphones
Puppet show
examples of cardboard things - flat net
Packaging example
Packaging 2
Packaging example for product – cardboard

This product was created with “what can you make for under £1 principle”. The product was created to inspire children to use their creativity. The kits comes with all of the bits and pieces (apart from the phone) to get started.

Enough t keep people occupied for hours.

Divider

Examples of cardboard things (products) | Summary

Thank you taking the time to look at my list of cardboard ‘things’ and STEM products.

Hopefully, this may have given you some ideas on what you can make using cardboard. If you would like me to help with your creating your cardboard product or to design the artwork to sit inside a mesh or die-line I would be more than happy to do so.

You can view more on my cardboard product design services here.

You may also find some of the following product development articles useful.

Divider

Product Articles

Digital Products & Experiences

And lastly, I would like to leave on this quote, what was said about Satzuma LTD, where I had the opportunity to create some of the products show on this page.

“ Truly, when it comes to small business, if there’s a skill, there’s a way.”

Guy Kawaski – One of ‘the’ former Apple Evangilsts.

examples of cardboard things (products) –

All products are Copyright Satzuma Limited

Freelance Designer for the legal industry

In the past, I have been involved in various projects across different industries ranging from legal lifestyle, to gifting to charity. This post focuses on my freelance design work for the legal industry, picking out a handful of projects to show and discuss – my Freelance design for the legal industry.

Most of the projects were created at the time when ‘static’ websites were the norm and responsive design was but a twinkle in tech industries eye.

Freelance designer for legal industry UI
Frame UI for Legal website

Overview | Freelancing for Law & More

Law & More – or what I used to call LAM, was a legal lifestyle platform for all that was to do with the legal industry, be it: jobs, advice and entertainment. Working for Law & More gave me the chance to show how I could approach a brief, whether it was a UI project or an animation.

I was involved in creating micro-sites, animations, UI’s and then building the static HTML websites with the aim to drive traffic to the Law & More platform.

If you would like any advice on your website feel free to send an enquiry and I will get back to you as soon as possible. Questions welcome!

Below are the samples of my work.

Header Animation – Legal Industry

As part of the freelance project to create engaging visuals for my client – I created a set of animated headers that were blended into the UI offering a seamless, functional and a fun web experience.

When these headers were created it was at the time of the ‘static’ website era – when the humble desktop reigned supreme! Smartphones had come to the market but weren’t as mainstream as they are today.

( Many of us had flip phones – or used the classic dial pads on a Nokia, yes – I used to be able to touch text on my phone without looking.)

As this website followed the conventions of a static website, I only needed to concern myself with a single standardised format for browsers and desktops.

Animated header for a website

It would be difficult to replicate this website today, due to it being technically challenging to accomplish the same results on a responsive website. Although, whilst writing this paragraph, I have already thought of a couple of paths that may achieve a similar visual result across all browsers and devices – but that is purely hypothetical.

I found this design strangely refreshing when most websites now are fluid and in essence follow the exact same format of a full-width image that works both well on a smartphone and desktop browsers.

UI Design

With the static website UI’s, I had fun creating something unique that would entice users to engage with the brand. The UI needed to playful and push the users to the main website where they could either read articles, browse jobs or even bag a luxury holiday!

With the brief, I wanted to push boundaries as far as possible.

Thanks guys

Freelance designer for legal industry

Freelance designer for the legal industry

MPU’s

If you would like to see other UI projects you can see this collection of UI’s here.

MPU for older website 2009
MPU Design

In this instance – a Multi-Purpose Unit. Is space you could use to either display a banner, upload an animation or create an interactive piece navigation. In this case, I created an interactive carousel in Adobe Animate.

If this was to be made again now, it would be published as HTML5 or probably wouldn’t exist at all as this project was very much something of it’s time and was heavily dependant on flash.

You can look at some of my other projects that were created in flash (animate) such as this STEM/Elearning game or examples of what you can create in Animate.

Freelance designer for legal industry | summary

Thank you for reading this post. If you are in need of any freelance services and you are based in the legal industry feel free to get in touch for a quote.

“Proving himself to be an excellent problem solver delivering creative and innovative solutions to our web ideas which we have not always been able to provide a detailed spec for.”

– D Goodridge, Law & More

All visuals, designs, and ideas are copyright Law & More. Please do not share or use this content without prior permission.

Other useful links

UI design projects projects
Creating an E-learning game
Example of what you can create in Adobe Animate
My design process
Photoshop tips for removing noise

External Website Locations

Website design London
– Graphic UI Designer Yorkshire
Website Design Cornwall

Examples of what you can create in Adobe Animate

To answer the question of what can you create in Adobe Animate there is a large list of applications and uses for this program which I have included in this post.

With Adobe Animate you can create; cartoons, animations for web, games, apps, interactive media and so much more with a bit of thought and creativity.

I have used Adobe Animate to create Indie games, animations, introductions and small pieces of motion graphics that have been used on websites for numerous purposes.

what you can create with adobe animate

2 significant projects I have created using Adobe Animate are: an interactive Museum and an e-learning game, which I shall mention further on in a bit more detail.

Adobe Animate is a good program and shouldn’t be dismissed too quickly.

Adobe Animate is still a viable program in certain situations and can offer great results – it comes down to what you want to achieve and how you would like to get there.

A plus to using Adobe Animate is the way you can use keyframes and a timeline similar to traditional 2D animation skills.

It also comes as part of the Creative Suite (CC) if you are already a subscriber to the whole package.

I have attached my showreel demonstrating what you can do. Many of these projects were of a commercial nature, and if you still wish to read the rest of this post for more information then please do!

What I created in Adobe Animate.

Animation Showreel

Psst, are you looking at making a game?

If you are here because you are intending on making a game or interactive story, I would advise reading this post that covers some of the principles of creating a game in Adobe animate.

This may also prevent – “I wish I knew that earlier” syndrome when you come to create your game.

Best of luck.

How to make a game in Animate (in principle)

Divider

List of examples of what you can create in Adobe Animate

These are some of the projects I have been involved with creating for both personal and professional purposes.

These are all ‘real’ projects and actual examples of what you can make, and what has been made in Adobe Animate by myself or as part of a team.

Product Simulation – Browser and Desktop App

This app was part of a larger project that I was involved in from the beginning.

In order to demonstrate the product without the physical product needing to be sent directly to the buyer, the app demonstrates how the product works through the computer screen.

This was a virtual demonstration for a product called Idesign.

I was involved in coming up with the concept, planning, designing and development of the application and it was all put together in Adobe Animate, what was then known as Flash then.

Much of the trimming work and cutting out of the PNG’s was performed by a colleague – also the chief bug tester.

Idesign Browser App Animate
Created in Adobe Animate (Flash)

Using Adobe Animate to create an application

With the Idesign project, it wasn’t just a browser application that was created.

A desktop application was created too so that both buyers and “end users” could download the software and play it from their own computers.

These are the icons that were created to sit on the taskbar or desktop.

Idesign landing page
Website application icons
.icons

I used Adobe Animate to create an interactive museum

What else can you do with Adobe Animate? You can create an interactive museum, it’s great for e-learning projects.

This was a detailed project that involved using Adobe Animate to create an interactive museum for a local charity.

The interactive museum, after it was treated and prepared was developed in Adobe Animate.

More can be read on how I used Adobe Animate and the rest of the creative suite to bring this project to life. Creating an interactive museum.

But in essence, it was Adobe Animate that breathed life into the static imagery and made it all interactive and fun!

Aside from the topic itself.

Museum created with Adobe Animate

Create a point and click game (Graphic Adventure)

This is an example of a game that was designed and developed by me, in AA.

After drawing the level with a pencil and then proceeded to trim all the artwork in Photoshop and then bring it all to life in Adobe Animate I playtested this small graphic adventure with friends and family.

This was a ‘small’ self-initiated project in which I challenged myself to create a one-level game – or to be specific – a graphic adventure in under a month. That included the artwork and the programming on my own.

what you can create with adobe animate
Point and click game
Created in flash - pencils drawing of game assets
Pencil drawing / game assets

Developing an e-learning game

You can use Adobe Animate to make interactive experiences and this also includes e-learning experiences applications.

This E-learning game was created to make learning fun for young children! Whist traveling through a set of levels, the player would have to answer questions to complete the game.

E-learning game create with adobe animate

You can read more about how I created an e-learning game inanimate and learn from my mistakes.

You can make a viral game

This game was created in Adobe Animate – as is the theme with everything listed in this post.

This game combined a mixture of using animation, artwork, and coding in Action Script 2 to create a twitchy game where the player had to jump over spears.

The purpose of this flash game was to promote a comic and music score for a client.

(I had no part in the artwork or the concept of this game – only its construction and its build)

Viral Game
what you can create with adobe animate
Divider

Using Adobe Animate for ‘Animation’

You can use Adobe Animate for – you got it, creating animations! Adobe Animate is a good tool for creating not only games but frame by frame animations too. You can use tweens and keyframes to create motion graphics.

What you decide to do with these animations and how you plan to distribute them is down to you.

You can place these animations on Youtube or publish then to HTML5 – I would strongly advise against using Animate and publishing to.SWF.

The SWF format is already disappearing and will only continue to diminish in the future.

I have used Adobe Animate numerous times in the past to animate characters, typography, parts of games and many other interactive and moving elements that sit somewhere between all that is listed above.

animations created in Adobe Animate.

Animated 2D painting created in Adobe Animate

This painting, the one shown in the image below was sent to me as is.

Animated painting

The purpose of animating this interesting painting of the Yorkshire reservoir was to capture the attention and drive traffic!

A link to the website can be found at the bottom of this post.

Divider

Using Adobe Animate for interaction

You can use Adobe Animate to create interaction within games, banners or videos. In order to do so, you will need to use a language called ActionScript to make it all work.

Many of the games and applications I have used in the past have required me to use Action Script to make them work. Action Script 3, along with 2 has been around since Adobe Animate was called Flash.

You can create interactive ‘wound damage’ UI’s

This is an example interactive project showing what you can make with the time and bit of Action Script 3.

This is an experimental piece of work showing a wound gauge that can be applied to a hypothetical game UI.

About the interactive timeline

The code and ‘states’ are relatively simple to create in principle for this project.

  • I created create 4 keyframes on the root timeline.
  • Added 4 Action Script frames above the keyframes
  • wrote ‘Stop();’ in the ActionScript layer which then enabled application to jump to the next frame when triggered eg – takes damage.

Or, a simple button click.

In this project, I have also added a ‘Healed’ state at the very end so theoretically if you wanted the player to heal when trigged, it would be the case of jumping the animation to that frame on the timeline.

This would make a great addition to a game UI or interactive adventure.

What can be created in Adobe Animate

There is nothing stopping you from creating something similar in Unity using the state engine.

So what else can you create in Adobe Animate?

I have added my last couple of projects towards the bottom.

Divider

You can use Adobe Animate for making video’s

Yes, not only can you just create Animations and make little HTML5 videos or enclosed apps that can be downloaded as part of an Adobe Air Package – but you can also create stand-alone videos and intros.

I have used Adobe Animate to create animated headers on websites, animated videos and intros and also starter clips that have been uploaded to Youtube.

Minor detour alert …

Many years ago, whilst studying, I used Adobe Animate a lot – it was part of my major and it was around this time I was shown a brilliant animation on “Bitey castle” if you have time I would advise paying the website a visit.

I have attached a link at the end of this post so you can look.

Back from Flash nostalgia…

Here are some of the live animations created in Adobe Animate.

Animated Intro – The Gadget Factory

The purposes of this animated intro were to promote a brand theme – the Gadget Factory as part of a marketing push to promote a new line of cool, fun and exciting products.

This 20 / 30-second clip was created using a variety of motion tweens, keyframes, and experiments with visual effects to get the desired results.

The still keyframes below have been pictured to show the animation in action.

what you can create with adobe animate
Animation

Guess Poo

I was in two minds as to whether to add this project but I felt as it was so infantile, fun and had a lot of TLC with the design I felt that it deserved some love.

Guess Poo…

For this project, I created an animated indent for a video clip that was featured at the start of the Kickstarter on the Crowdfunding page.

It was crass.

Silly,

Fun.

And it was created in Adobe Animate.

For the Guess Poo clip, I animated a character falling from the heaven’s and plopping down into the dark waters below.

It was arguably (although fun) too much TLC that the game deserved but hopefully, the animated clip that was added to the start of the video turned a few heads.

You can read more on my crowdfunding design service or read more on creating a Kickstarter page. That article goes into all the details on how to format a Kickstarter page for your campaign.

This was created in Flash / Adobe Animate
Divider

What can you create in Adobe Animate | list of ideas

Here is a summary / quick list of what you can create in Adobe Animate.

  • Create a frame by frame animations
  • Games
  • Graphic Adventures
  • Motion graphics for websites
  • Stand-alone games for browser and desktop
  • Slideshows
  • Interactive videos
  • Video indents and short clips
  • Rich media, and interactive elements
  • Elearning experiences

It is not limited to that list. There are many other creative ways in which you can use Adobe Animate to create something entertaining or useful.

I feel that I should mention.

For myself, in the future, I intend to use more programs such as After Effects and Unity for my commercial projects. But I shall always keep the loyal tool of Animate in my belt!

What can you create in Adobe Animate | Summary

Thank you for reading my post and looking at work samples. If you felt that this post was useful, feel free to share on social media or on your blog.

I have written a list of useful posts that are related to games created using Adobe Animate

Principles of creating a game in Adobe Animate

Creating an interactive Museum in steps

Creating and Elearning game in Animate

Alternative Software

Why unity is awesome

Free game engines

How to create a cursor in Stencyl

– Digital drawing – create digital art

Design Services (external website)

Motion Design

Crowdfunding pages design and Guess poo

Credentials

If you would like to know more or need assistance with working with Animate get in touch.

All design and visuals are Copyright Jimmsdesign and their respective owners. Please do not use these images without explicit written permission.

Bitey Castle – Yorkshire Reservoir by Julia Odell

Free Stock Vector Skull | Sideways

So this is the first post on the blog that is offering a free give away, and there is no catch apart from acknowledging where you found the artwork and perhaps sending a link back to this page.

This post | Free Stock Vector Skull | is what it says on the tin. A selection of free skulls that you can use in you is work be it commercial or not. There is no catch!

It is a simple case of copy and paste the jpgs – and they are all yours!

Free Stock Vector Skull
Free Stock Of Skull – Created in Adobe illustrator
Divider

Free Skull Stock Graphic

This skull has been created in Adobe Illustrator. This is in preparation for some Artwork that will be available to purchase soon on websites in which you can use it for your project, game, business or anything that is relevant to your purpose.

This stock image is completely free – use as you wish but please refer back to this page saying where you got hold of the artwork.

Graphic Vector Badge
Link with this! thanks! \
Or | https://blog.jimmsdesign.co.uk/free-stock-vector-skull-sideways/

I took my time to create these visuals for you.

Enjoy

Free Stock Graphic skull profile

Side view of screaming skull with mouth open – SCREAMING!

Free Stock Vector Skull
Skull on Purple Grey

These are Free to USE!

Skull on red
Free Stock Vector Skull
Skull on black

FREE Skull Graphic – PNG – Isolated

Free Stock Vector Skull
Skull PNG

Free Stock Graphics – Vector Skull Profile – Free

There is very little to say, apart from ‘thanking’ you for either looking at or reading through this post. If the Free Skull Stock Graphic comes in handy for what you need then great! I am happy in the knowledge that this is serving some purpose out there on the world wide web!

Watch this space to see if there are any other handy projects, tips or FREE stuff. You never know if you come back and look.

Other useful links

How to create vector art like this on your computer

Create a photoshop brush

How to get the black you want in photoshop

External link to services

Freelance Vector illustration

Design