GDD
Link to view and download GDD : https://drive.google.com/file/d/0BwWF57RYaLmYcEdZX0Vldms1VmM/view?usp=sharing
2025 on Tumblr: Trends That Defined the Year

roma★
tumblr dot com
i don't do bad sauce passes

Product Placement

JVL
Keni

❣ Chile in a Photography ❣

No title available
Cosimo Galluzzi
h
$LAYYYTER
we're not kids anymore.
KIROKAZE

Kaledo Art
One Nice Bug Per Day
Peter Solarz
YOU ARE THE REASON
I'd rather be in outer space 🛸
No title available

seen from Malaysia
seen from Türkiye
seen from United States

seen from United Kingdom

seen from Malaysia

seen from Malaysia

seen from Malaysia

seen from United States

seen from Morocco
seen from Hong Kong SAR China
seen from Vietnam

seen from United States

seen from United States

seen from Brazil
seen from United States
seen from United States
seen from Japan

seen from United States

seen from Türkiye
seen from United States
@olisemester1-blog
GDD
Link to view and download GDD : https://drive.google.com/file/d/0BwWF57RYaLmYcEdZX0Vldms1VmM/view?usp=sharing
Tree Ideas
Here’s an idea for how the trees could look, I started off with the tree on the right, even though I really like how it looks i wanted them to be a bit more simple, so i did a couple designs with different shapes sizes and ages
This is a possible way the title screen could be animated. I want there to be a little movement somewhere because the flat design and letters looks too static and dull
possible layouts
Possible Sliders
I got influence for these sliders by looking at existing ui for mobile platforms, more directly looking at flat design.
the top left 3 sets of sliders take inspiration from slider you would see on a music mixing deck, I dont particularly like these as much as the others as it would fill up too much of the frame. I thought of the design at the top right just to use as little complex shapes as possible whilst trying to illustrate what the ui is, I think it’s worked out well. The designs beneath take inspiration from ui elements like brightness scales on android and iphone. the aspect which makes the scale below them different is that I want to animate the wolf to run when you’re sliding it. Below are the inspirations from Metro ui, i decided to iterate on them a little more below to the left, my favourite one of the iterations is the icon second from the bottom, this is because of the use of a serif font as they aren’t usually seen with modern flat graphic design. The designs to the right I feel are most innovative but completely go again the view of a lot of ui design recommendations because they’re quite bold . When you scroll/swipe up then they’ll fill up and representing the corresponding species increasing.
this is a couple of iterations on the bear icon, varying from more flat to more realistic
Here’s some ideas for the icons on the slider, I wanted to give them more detail than my first icons/sprites as it’s concentrating more on their face, each design doesn’t contain more than 4 colours, we want to keep it like that for the final project to keep with the theme of the whole app being as simple as possible
Nick Slater Artist Research
Cameron and I think this image should be what we should be striving for when it comes to our art style, we both like how much depth the image has whilst keeping it a flat design. Even though the shapes are basic you can tell exactly what everything is.
This is my response to his image, I think that if we do a few more iterations of this we’ll be able to fully portray what we want with the art style, i’ve added assets I’ve made to make it apparent that this image is for our app.
First Flat Design Terrain Idea
This is my first go at what our game screen could look like, whilst i feel this is in the right direction, the shading/depth of it is more disney than flat design. I’m going to have to look at more flat designs and see what i find most aesthetically pleasing about them and implement them into my designs
Mechanics and Info Boxes
Mechanics and info boxes
We need to decide how many info boxes to have on display and how many/what should be dynamic. For example when the population of wolves reached around 171 in 2007 we saw a dramatic drop in the number of wolves for the next 2 years dropping down to around 124 in 2008 and 96 in 2009, this could mean that the limit of wolves should be around that number as in the Yellowstone area there isn’t enough Elk to support them, we’re going to need to think of what we could put in the info boxes. E.g. when we find a limit for the amount of Wolves, if you put the slider to that limit the info box will change saying that there isn’t enough Elk to support the amount of wolves and show how that can affect the other animals and plants. In code we may have to find a percentage/ratio for the maximum amount of wolves compared to the amount of Elk, for example the ratio for number of wolves:elk based on our research in 2007 was 1:36.8 therefore when the variables are equivalent to this then the number of wolves should drop.
Asset list
Visual assets:
UI:
Screens: Start screen and instructions screen
Sliders
Icons for different animals and plants
Scales
units
Data values (eg list of populations of predator prey and plants)
Sound toggle
- Dynamic pop-up fact boxes, these will be directly linked to the variable you select on screen, possibly saying the population of said species and how your choice in moving the slider is affecting it.
- Static fact box, giving an overview of what’s happening in the scene and explaining the consequences of the player’s actions.
Environment:
- The fore, mid and background base layers
- Clouds of a mixed variety and temperament
- Long grasses
- Short grasses
- Water
- Shrubs in various stages of growth
- Pine trees in various stages of growth
- Aspen trees in various stages of growth
- Cottonwood trees in various stages of growth
- Willow trees in various stages of growth
- Predators: Wolves, Bears, Eagles
- Prey: Elk, Rabbit, Beaver, Songbirds
- Beaver dams
- Boulders and rocky outcrops
- Completely dead trees
- Bugs: Butterfly, Dragonfly, Bumblebee
Working out how to model our mechanic
To find our variables i took the research and date that ripple and beschta has found and put them into tables. What I found and worked out from these was the ratio for each year for amount of wolves to elk, hopefully i’ll be able to create an equation and code to link these together so when inputing a value it will spit out a corresponding value, for example if the average amount of wolves to elk is 1:50, when wolves = x then Elk =50x, this would be an initial prototype code and we’d be able to input this into a simple unity file to visualise it. If we were to use this example then when changing the input value via the slider then the other sliders would change correspondingly. In 2004 I’ve found that there’s 171 wolves to 9500 elk to 20 trees, this is just a generic level of trees as the only graph i could find doesn’t specify clearly what the levels are. I’m probably going to have to link percentage of rate of change to the ratio so wolves can link to the tree level for example in 2006 there was one wolf to 49.2 elk, the percentage rate of change of the Elk was -28% and the cottonwood trees was 50%, in second semester I’m going to need the help of Dr James to create the code for these as I understand the maths but im going to need help with the scripting.
Another mechanic we need to implement is that in the static info box we cant have too much writing in at a time, from researching fonts best for readabilty and children i found that having big bodies of text can be intimidating so the reader can lose certain information by just skimming over it so we need to make it so when the user is done reading the info box they tap it to reveal different information, if we break up it up to show information on a different topic each time you tap it.
also a mechanic we have to figure out is time, seeing as I have information in yearly intervals we think it’d be a good idea to make it so you can only change one variable per year so it gives time for the viewer to see/take in what is happening on screen.
Another thing I’ve found through creating the tables and ratios is that it may be more important to model a code that doesn’t have a fixed ratio, for example when the ratio hit around 1 wolf: 43 Elk then the wolves population level would drop, but when the ratio was higher than 1:60 then the wolf population would increase. In order to model something like this from elk to the cotton wood level I’d have to find the statistics from when the wolves were first removed from Yellowstone and seen how long it to for the elk to ravage the vegetation.
If we were to do the mechanic with dynamic ratios and only being able to use the sliders once a ‘year’ then I’d like to implement a simple play button where every time you pressed it another year would pass and the player would be able to see what would happen over a certain amount of time naturally without changing sliders themselves.
Flat Design Sprite/Slider Icon Ideas
I decided to have a go at creating some visuals that could look similar to what we use in our final game, these could be used to base our sprites on or to use on the sliders. I thought if we make simple sprites like this it would great for keeping our app looking as clean as possible when sorting out the animation. The colours are very soft which I think is good for our target age group as they would have just grown out of extremely bright and bold colours.
Design Languages/ Frameworks
METRO UI DESIGN LANGUAGE
When looking at UI designs I came across metro UI. This is the epitome of creating a simple ui without overdoing the icons and layout. The main aspact is to concentrate more on the content, using typography more than relying on the graphics. It’s very easy to see that this UI framework strongly uses grid systems to determine what goes where. Because the majority of icons are rectangular/quadrilaterals it uses size to determine the importance of each object. Because our project is aimed towards younger people I feel trying to implement aspects of metro ui into our project.
QUANTUM PAPER/ Material Design: Design language
Quantum paper is a design language used and created by Google. The material of the surface takes inspiration from paper and ink. “Our material is grounded in tactile reality, inspired by our study of paper and ink, yet open to imagination and magic.”The surfaces “are intuitive and natural”, subtle shadows can be found at the edges, it’s still flat design but it has aspects like shadows which creates some dimension in the screen. The contents are bold, by using large scale typography and specific colour palettes. I also like how they use shadows and lighting to hint what each icon is used for, for example if something is supposed to be a button it’ll subtly use a shadow bellow a circle to hint to the user that they should press it to get rid of the shadow as the ui normally looks like 2d flat design.
To show aspects of this we can use them on our sliders, like the buttons on the sliders and the rectangular shapes and grid systems to separate each variable
For these examples I managed to combine aspects from both Metro UI and Quantum Paper. Both the sliders layout and the minimalist icons take inspiration from the grid system that metro ui uses and the slider bar and ‘button’ with the slight shadow takes inspiration from Quantum Paper
UI Research
An inspiration I have for the UI design is the app, Authentic Weather, I like this because of how straight to the point and blunt it is. The creator of the app wanted this app to be straight to the point, the app only has 3 controls, swipe up to share, swipe down to look at tomorrow and pinch to see temperature. The app uses “Akzidenz-Grotesk” for it’s type face and simple line drawings for illustration. I want our UI to take aspects of this, being able to get the message across with minimal instruction, the user has an understanding of the app without getting spoonfed.
Meter.me is an exercise app. Meter.Me has a minimal, typographical user interface design that relies on necessarily simple swiping gestures to enable users to navigate through the different options while in the process of exercising. This is innovative because of how it makes it easier for people to exercise and use the app at the same time because of it’s lack of fiddly menus and buttons and just uses swipes which is easier to do whilst you are running. The creators have thought about and modelled their UX/UI on who’s going to be using the app. Me and Cameron should aim to do this with our project.
Facebook’s UI is great, it’s simple and easy to navigate. It has a clear blue and white colour scheme and is consistent between desktop and mobile. There’s no gimmicks with the icons, they’re very clear in what each one does and don’t need text. With our UI we should strive to be as clear as possible without using too much typography to look as clean as possible.
Possible Fonts
When looking for fonts for this project, I researched font’s that’re good for children and are good for reading/ easy to read. I found that typefaces with a larger x-height and infant characters (letters like ‘a’ and ‘g’ with one story, like how it’s written when one first learns to write) are what makes it most legible. Serif fonts work well on print, making it more readable but it makes no difference on screen. You should avoid non-traditional typefaces, bold weights, hairline weights, condensed or expanded typefaces. Open, round and warm shapes are encouraged. Line lengths should be short as big chunks of text can be intimidating to younger readers. My favourite serif fonts I’ve looked at are Bembo infant, Century Schoolbook and plantin regular, I feel like these are a good choice because these typefaces were designed to be used with children, it could be a better idea to use Bembo infant because it uses one-story characters, making it easier to be read. I thought Times New Roman could be used because it’s such a well known font which everyone is familiar with, but some people have said that if you use a font people are familiar with and are too easy to read that they’re more likely to skip over and miss/take in less information as when you’re using a font that’s a bit harder to read, it makes you concentrate on the text more. I like Courier New because from what I’ve seen when researching more modern design and infographics is that light typefaces are in fashion/popular at the moment and courier new is a light typeface but that also contradicts what has been previously stated, which is that you should avoid hairline weights as it can be harder for children to read. Century Schoolbook could also be a good font to use as it’s X-height is large without being condensed. My favourite sans serif fonts are Century Gothic Regular, Arial Nova, Lexia Readable and Open Dyslexic 3. Century Gothic because of how basic and round the typeface is without being too simple, like how the ends of the characters aren’t rounded. Arial nova because of it’s large x-height, it’s only flaw is that it’s not an infant typeface/ doesn’t have infant characters. Lexia readable and Open Dyslexic 3 because they’re made for dyslexics to be able to read easier. I like Gill Sans but it’s characters seem too bold. Comic Sans could be a good typeface for legibility but I feel as if it could be a bad idea as on the internet it has a bad reputation and this game/project would be on the internet. Amatic SC could be good because of its resemblance to handwriting and its large X-height but it’s a bit too condensed and it’s weight is a bit too light, in my opinion. When looking for fonts for this project, I researched font’s that’re good for children and are good for reading/ easy to read. I found that typefaces with a larger x-height and infant characters (letters like ‘a’ and ‘g’ with one story, like how it’s written when one first learns to write) are what makes it most legible. Serif fonts work well on print, making it more readable but it makes no difference on screen. You should avoid non-traditional typefaces, bold weights, hairline weights, condensed or expanded typefaces. Open, round and warm shapes are encouraged. Line lengths should be short as big chunks of text can be intimidating to younger readers. My favourite serif fonts I’ve looked at are Bembo infant, Century Schoolbook and plantin regular, I feel like these are a good choice because these typefaces were designed to be used with children, it could be a better idea to use Bembo infant because it uses one-story characters, making it easier to be read. I thought Times New Roman could be used because it’s such a well known font which everyone is familiar with, but some people have said that if you use a font people are familiar with and are too easy to read that they’re more likely to skip over and miss/take in less information as when you’re using a font that’s a bit harder to read, it makes you concentrate on the text more. I like Courier New because from what I’ve seen when researching more modern design and infographics is that light typefaces are in fashion/popular at the moment and courier new is a light typeface but that also contradicts what has been previously stated, which is that you should avoid hairline weights as it can be harder for children to read. Century Schoolbook could also be a good font to use as it’s X-height is large without being condensed, but it’s counters aren’t rounded (counters are the enclosed shapes within a letter). My favourite sans serif fonts are Century Gothic Regular, Arial Nova, Lexia Readable and Open Dyslexic 3. Century Gothic because of how basic and round the typeface is without being too simple, like how the ends of the characters aren’t rounded. Arial nova because of it’s large x-height, it’s only flaw is that it’s not an infant typeface/ doesn’t have infant characters. Lexia readable and Open Dyselxic 3 because they’re made for dyslexics to be able to read easier. I like Gill Sans but it’s characters seem too bold. Comic Sans could be a good typeface for legibility but I feel as if it could be a bad idea as on the internet it has a bad reputation and this game/project would be on the internet. Amatic SC could be good because of its resemblance to handwriting and its large X-height but it’s a bit too condensed and it’s weight is a bit too light, in my opinion.
Chalkboard Slider Icon Idea
I decided to experiment with chalk brushes on photoshop to create some Icons based on classroom blackboards, this is to emphasize that this app can be used as a teaching tool. The drawings are quite basic and could be seen to be drawn by an 11-16 year old, like our target audience.