Preface: Making games is hard. So any endeavor I applaud. The game I will be writing a few notes on is Stubbs Rebel Without a Pulse.
Boundary Signaling
A simplistic means to convey blocked off area which uses police barriers, and invisible collision heavily in a manner that is immersion breaking.
Modes
Stubb’s showcases a number of modes fairly early to keep things interesting.
Vehicle
An mode where players pilot a vehicle.
Dancing
A minigame where the player engages in a dance office with a boss.
The game begins with simplistic patterns that go around the gamepad. Patterns such as:
2 lefts then 2 ups.
2 downs then 2 rights.
Speed Increase
To increase difficulty the mini game increases the speed of input.
I have mixed feeling about this minigame. It’s very unforgiving. One has to memorize the pattern, and I had great difficulty if I didn’t have the pattern in mind.
To improve this section the game could increase the time for input or better foreshadow the next button press. Other games have done this with visualizing future button presses.
Additionally the mini-game has an unclear end state. When do I know when I win or lose? How many rounds left?
Hand
An alternate mode where the player controls Stubb’s hand. This mode is interesting in that the players:
Scale is changed.
Has a new means to navigate being able to crawl along surfaces.
Is able to mind control enemies
One improvement I would make here is having the surface crawling be connected to a player input rather than automatically occur when approaching a surface.
Preface: Making games is hard. So any endeavor I applaud. The game I will be writing a few notes on is Shadow Warrior.
NPC Implicit Navigation Technique
Nice framing here. Though one can go right devs used the guy to the side who I believe subconsciously pushes you up the main path which is to the left.
Vista at the Fringes
I appreciate how the devs took time to create a static vignette on the fringes of the map. The image though is quite contrasting with the temple road and the bamboo abruptly ends. The transition could have been done better, but I understand a low value return on investment here.
Minor Note
The AOE of the attack of the Warlord was troublesome to dodge. Wish it was something like it created VFX crack projections that if the player wasn’t colliding with it would not damage them.
Steams recent winter sale had Final Fantasy 9 on discount. I saw it as a great opportunity to revisit a beloved franchise. The following are ‘designery’ thoughts from the first several hours of play:
Like
FF9 starts you off in a dark room where it easy to focus on your player and understand movement. It then lights up the wider environment.
Narrative reinforcement – One moment where the player must select the princesses name whilst going over the kidnapping plan.
Level Exploration – In the scene below your character enters the scene from the bottom of the screen. Once you have control of the character the world fulfills the expectation of continuity by providing an area that’s the opposite way the player is encouraged to go (using the crowd who moves forward).
Lots of and easy to find initial pick ups from environment to quickly establish and encourage exploring the environment for rewards.
Storytelling Moments – Initial area showcases poverty/class differences through characters in the scene.
Lots of encouragement to explore through cutscenes. For example Steiner locked in room and the cutscene shows you are treasure chest which encourages you to go there.
Love the variation of activities right from the start such as finding the knights of pluto, and a scene of quick time events of sword fighting.
In this article I will chronicle the design process and lessons learned in creating Trash Traders a multiplayer iPad game aiming to empower a sustainability mindset.
Introduction
At Carnegie Mellon’s Entertainment Technology Center (ETC) multi-disciplinary teams work on projects over a semester to create an artifact. While attending I was the primary designer on the project which created Trash Traders.
In this article I will chronicle my design process in creating Angle Jungle an award winning transformational puzzle. Then how I went creating the puzzles within the experience, and finally lessons learned.
Angle Jungle is an award winning educational puzzle game for fourth to sixth graders studying geometry. At the start of development our requirements were up in the air. Following discussions with our client we settled on the following objectives:
Our ideation process began with brainstorming based on the objectives of our project. We then went through two iterations of paper prototypes.
This slideshow requires JavaScript.
From our paper prototypes, we choose to refine two based on feedback.
This slideshow requires JavaScript.
In parallel we began the process of creating digital prototypes based off these paper prototypes.
Our breakthrough moment came when Jesse Schell, a faculty member at the ETC, posed to us that though these games used angles, both could be played without thinking about angles. We needed to make an angles essential experience. This priceless notion lead us to create Angle Jungle’s progenitor which we called Treasure Hunter.
Treasure Hunters mechanic encoded the relationship between the numeric and spatial representation of angles. This was achieved by having players use numeric representations to create spatial representations in-order to solve a puzzle. We believed this embodied a system where angles were essential. We then began refining Treasure Hunter.
This slideshow requires JavaScript.
After positive feedback from playtesting we next created a digital prototype.
In the above video players slot numeric values into a beam maker which creates a spatial value. A certain spatial value is required to hit an objective to solve a puzzle and receive treasure. This digital prototype then went through many more iterations.
At this point in development we had the foundations for an experience. What was needed next was to design that experience.
Experience Crafting
How does one go about creating an experience? There are infinite ways, but we began with considering the difficulty curve within our experience.
Difficulty Curve
The above graph is an abstract difficulty curve which displays a sequence of tense and release cycles of increasing difficulty. This curve would form the underlying foundation of our experience.
Gameplay Elements
With an idea of what we wanted the experience to look like, next we conceptualized the elements within the greater experience. The inspiration for this process came from a number of sources including the learning materials of our target demographic.
Our aim was essentially to gamify our target demographics learning material. We would achieve this through gameplay elements which attempted to capture aspects of the kind of problems they faced in the classroom. These gameplay elements would form the core components of the experience.
More Motivation
Whilst conceptualizing our gameplay elements we also considered the possibility that the puzzle may not be intrinsically motivating enough for players. Therefore we created two additional supporting motivational factors.
Supporting Actor
A gender-neutral character that needed assistance (inspired by Jesse Schell’s Lens of Help). Given the use of supporting characters in educational experiences is common, and there exists research on the potential beneficial effects for players. We hoped this would augment learning within our experience.
Golden Expectations
In addition we created The Cabin. The Cabin would contain rewards in the form of treasures and trophies. The Cabin would act as motivational element by creating Golden Expectations (expectation of rewards) through the aesthetic use of empty shelves as well as serve as a measure of game progress.
This slideshow requires JavaScript.
We also recognized the need to space out our rewards for better impact. We therefore arranged rewards into evenly spaced intervals.
All Together
Together these pieces could further flesh out the difficulty curve of our experience. The peaks of our difficulty curve would now commonly correspond to the introduction of gameplay elements, and the dips would be periods of rest at The Cabin.
The experience needed more though, it cried out for substance in the form of puzzle content.
Transformational Puzzle Complexity
With a high-level view, and the fundamental elements of the experience in mind we went about crafting a set of transformational puzzles.
This process resulted in a jumbled pile of puzzles. This was a good first step, but it did not fit the experience structure we wanted. We therefore turned to a mighty tool. The spreadsheet.
The spreadsheet consisted of columns of each gameplay element which we incrementally increased to raise puzzle complexity. This tool complemented the design process as we created more puzzles based on these new complexity constraints.
Two additional considerations came to mind during this process:
Include drops in puzzle complexity when introducing new gameplay elements to allow for more effective tutorials.
Have the majority of learning occur early when complexity is low.
The result of this work was a structure of thirty levels which we then playtested.
Although initial playtests were largely positive they revealed two design issues:
Lack of Angle Diversity – High occurrence totals of fewer number of angle values in the total experience meant a lesser exposure to different angle values.
One Gem Solutions – Solutions which required only one angle gem on more complex levels meant less interaction with different angle values.
Both issues were detrimental to our goal of building familiarity with the angle system. Therefore, two methods of analysis were used to solve these issues:
Angle Distribution Analysis – Counts of each angle value used.
Angle Solution Analysis – A comparison of solution angles against angle values used.
These methods revealed a number of such ‘issue’ levels.
The result of iteratively applying this analysis was that both the complexity and angle diversity was maintained and improved. This ultimately meant a better attempt at achieving our transformational goal.
Transformational Objectives
At the end of the project we ended up with a concrete primary transformational objective, and several secondary transformational objectives.
Primary Transformation
Build familiarity with the angle system by having players practice solving puzzles using a mechanic that has an encoded relationship between the numeric and spatial representations of angles.
Sharon Carver – ‘The actual angle choices at the various levels and the angle meter seemed to work well and COULD promote learning of the concepts and spatial relations of angles, as long as students don’t game the system’.
Secondary Transformations
In addition to our primary transformational objective we took the opportunity to introduce a number of secondary transformational objectives in manners that were natural extensions of the core experience (providing the experience with more puzzle content).
Protractor Tool Usage
To solve a puzzle, players had to work out the angle that was required to be made. This was difficult for some playtesters and therefore provided a natural opportunity to introduce a protractor scaffolding tool.
By making this tool available we built in the protractor in a manner that was of a natural clear benefit to our players. We hoped by doing so to build familiarity and appreciation of the tool by creating a puzzle environment where it was undoubtedly helpful. Playtesting showed that this strategy ‘seemed’ to work.
Sharon Carver – ‘I especially like the meter that shows the full 360 degrees while the player is working on selecting angles. It would definitely be worth testing the impact’
Introduce both anticlockwise and clockwise rotation, and angle addition and subtraction.
Angles Above 180
Expose students to angles greater than 180 degrees.
Design Considerations
Whilst exposing students to our core mechanic (an encoding between the numeric and spatial representation of angles), initial levels would allow brute force approaches to be rewarded in order to draw in the player with easy rewards.
Allowing for such ‘brute force’ (choices made without solid reasoning) approaches, resulted in the following criticism being raised:
What if players are not doing the thinking you want?
In the defense of brute force, we responded with the following counter points:
Absolute mindless play is rare, so since the use of numeric angle values are essential even with a brute force approach, players are likely to at least reason about this aspect of the game.
Supporting brute force approaches makes the experience more accessible (we had first graders reach level 22 with help!).
Brute force approaches are only reasonably satisfying in low complexity puzzles (playtesters who solely practiced a brute force approach experienced frustration on more complex puzzles).
Most importantly though, we admitted that when complexity was low players would not have to think ‘much’. This was intentional. The experience allowed it for a deeper purpose.
We intended to combine that brute force motivation together with puzzle complexity as a transformative tool to incentivize a ‘logical’ approach. As puzzle complexity slowly increased the experience would naturally create skill appropriate ‘teachable moments’ for teachers to capitalize on.
Results
The results of this process created an experience that contained:
Suitable learning and puzzle complexity curves
An appropriate pattern of tense and release
Appropriately interspersed rewards
An exposure to a wide variety of angle values
A mechanic where angles were essential (encoded the relationship between spatial and numeric representations of angles)
The transformational puzzle complexity in Angle Jungle can be best exemplified by the following diagram (note it dips at times of gameplay element introduction).
Well what did the games design ultimately translate into? Get a glimpse in the following promotional video (I’m happy to share raw footage on request).
Lessons Learned
So what can we take away from this experience. First some classics:
Paper prototypes are your friend!
Ask yourself can I play this game without thinking about the core subject matter? Is the subject matter essential to the experience?
Consider experience curves from the get go to help structure your experience
Study your target demographics source material, and use it as an additional source of inspiration in your design process
When introducing new gameplay elements introduce it in a low complexity environment to make learning easier
Have most of learning occur early when complexity is low
When designing scaffolding tools try to design them in a manner that is of a natural clear benefit to the experience
If extending your experience is necessary, do so with natural gameplay elements that can serve transformational goals
Guess and check is not the enemy of education. In fact, I believe the availability of simple strategies can create accessibility to larger demographics
Additionally, whilst designing this educational puzzle game one question came to mind.
How can puzzles serve transformational goals?
At present my thoughts are twofold:
Well designed puzzles can create engaging experiences for players which designers can use to piggyback onto to achieve a transformational goal.
Puzzle complexity with brute force motivation can be combined into a transformative tool to create skill appropriate teachable moments at the boundaries of brute force and logical gameplay strategies.
As part of the educational game project my team was working on we were required to build a reward system. This system took the form of a trophy room which would display trophies that players had earned. After playtesting though we found we had created an expectation for treasure which we were not fulfilling. The following is a gameplay video where our players would collect treasure chests at the end of each level.
So in order to fulfill this expectation we created additional art assets which we would use to fill up our empty room. We faced a dilemma in this regard. We did not want to force players to see treasure added to the room at the end of every level. This would be far too disruptive to the game experience. So how does one fulfill the expectation of reward without forcibly having the player see the reward appear?
Well one thing helped us in this regard. We already designed fixed reward intervals through the trophy system which forced players to go to the trophy room and observe the new trophy being added to the trophy room.
Fixed Visitation
In our experience we had periods of fixed visitation where the player would be guaranteed to be seeing the Trophy Room. Looking at the experience more methodically we were giving trophy’s at the following intervals (we had thirty levels).
One and thirty were absolutely necessary since they began and ended the experience. The others were decided based on difficulty curve which was designed in previous weeks. Again we asked ourselves the question. How does one fulfill the expectation of reward without forcibly having the player see the reward appear?
Recently we have been working to create an educational game on angles. Part of that requires designing puzzles that try to provide educational value. The following blog post is a continuation of a look at our process.
Breakdown
The most important part when analyzing our puzzles was first to recognize our puzzle metrics. Initially these metrics were as follows:
Mirror Numbers
Number of slots
Number of gems
Gem Types
Receivers
First Pass
We began our first pass using these metrics to craft the thirty puzzles that would form the core structure of our game. The process essentially boiled down to a table of each of these metrics listed in columns. We incrementally increased metrics until key climax moments which we referred to as ‘boss levels’. Following a boss level we dropped the metrics to allow for the introduction of a new system in a simpler environment.
Second Pass
Our first pass at developing the puzzles allowed us to create the initial structure of the experience. On further examination, points three and four actually had more depth to them. We broke these points into each and every gem value. This additional depth warranted further analysis.
We then went about constructing a meaningful method of presenting what we called ‘angle distribution’. Using this we mapped out each and every gem per level. This method of analysis revealed several levels that were problematic for different reasons such as:
High angle overlap
Had no garbage
Levels that were similarly structured
These key points conflicted with our main educational objective of improving familiarity with both numeric and visual representations of angles. As for one having a large degree of similar angles meant that the exposure to different angle values in the 360 angle system was lower. So for our second pass we went about redesigning certain levels adding in garbage, and choosing angle gems carefully to avoid overlap.
Third Pass
On making a third pass at the we again found a problem. Our third pass took the form of playing the levels. What we found was some gems were included that were direct solutions to problems in hard puzzles.
We needed to weed out as though it is good that players are able to discern such a solution, we felt that doing so would mean engaging less with the angle gems in the level as several other gems were left out entirely in the solution. Thus we weeded such scenarios out during our third pass.
Conclusion
Essentially the process boiled down to a number of steps:
Analyze
Carefully study the components within our structure
Extrapolate areas for further fine grained analysis
Develop a tool for analysis
Adjust
Apply the tool
Identify and address problem areas
Replay the experience
Repeat adjustment
Using this process we iteratively analyzed our puzzles redesigning when necessary to ensure levels had particular solutions to problems with minimal overlap. Now with a clear design process, all thats left to do is playtest and hope the design worked!
I was fortunate enough to be able to attend this years Game Developer Conference (GDC). Whilst there I had the pleasure of attending its Game Design Workshop.
The Game Design Workshop took place over two days. Both days included a general session, and an elective. I attended both Day 1 & Day 2. The following is a brief account of the experience. If you are an aspiring designer, and have the opportunity to attend the workshop this is a must do event!
Day 1
SiSSYFiGHT
On the workshops first day we played SiSSYFiGHT. After playing a few rounds, we were asked to come up with a new theme for the game. This involved each team member writing sticky notes, grouping them then voting on a theme.
With a theme of ‘artists vying for attention in the art world’ we added a steal mechanic. The steal mechanic would allow the attacking player to gain the points the other player lost. We quickly found that this mechanic made the game go on infinitely.
We then changed our chosen mechanic to Favor. The Favor mechanic gave a single point to the player of our choosing. This mechanic was better balanced, and encouraged cooperative behavior.
Game of Games
The first elective I chose was Game of Games run by Marc LeBlanc. For the elective we created a system (we did a card game) with a single rule. Our rule had players first play two cards of the same suite. Then play another two cards which had to add up to the higher of the last played two cards. We then were instructed to merge our game with another.
Fortunately the merge was easy as the other game employed a rule that was similar to ours (it was another card constraint rule where the total of the two cards needed to add up to an odd number). We repeated this system merge process four times, until finally we had to merge sixteen different systems.
During this ‘ordeal’ the hardest part was merging a card based system with a dice based system. Our first attempt to tackle this merge was setting up two asymmetric games which were played simultaneously against each other, but this was not a satisfactory outcome.
We continued to struggle until Marc LeBlanc allowed us to cut from the system during merging the only constraint being to keep the core components (the dominoes, dice, and cards). At that point we brainstormed and came up with a method of dealing with this which was to combine the system through a medium they all shared, which was numbers.
What we created was a game which involved matching numbers based on eleven dice that were initially rolled, and remained fixed throughout the game. Cards, and dominoes played sequentially, and had to get a pair of numbers that matched the dice’s number to be able to claim it. The winner claimed six out of eleven available dice.
By the end of the workshop Marc LeBlanc introduced the MDA Framework, an awesome way of design a game.
As part of my Masters in Entertainment Technology I am working on an educational game project at The Entertainment Technology Center. My team aims to essentially create a living 360 degree angle system for fourth to six graders to interact with whilst solving puzzles. We hope that through our demographics interaction with this system we will:
Clarify misconceptions about the system
Build a familiarity with the system through puzzles which require students to use estimation
In approaching this problem we have gone through an extensive ideation process, and the result is that we finally nailed down a core mechanic that makes considering angles essential. The following is a prototype of what we came up with:
Currently in our project we are at a point where we have to create the puzzles that will make up the heart of our educational game. To do this properly requires the creation of an interest curve; but not just any interest curve! As well needing to be an entertaining experience we must go one step further, and include the element of educational value.
Design Process
With the objective of gamifying the material that our client uses to teach their students we began designing an interest curve. The first part of this process is to study the material which took the form of common core sheets.
We looked at each of the sheets, and broke down the different tasks involved which were as follows:
Create an angle using a protractor
Obtuse, acute, right, and straight problems
Visual identification of obtuse, acute, right, and straight
Identification of obtuse, acute, right within different shapes
Given a protractor diagram identify the angle
Estimate an angle between two points
Find the missing angle given a total angle
Find supplementary angles
Finding complementary angles
Find missing angles in a cross shaped
Find angles in portions of a circle
Find the angles in a triangle
Next with these tasks we looked at what tasks were best suited to the game we have created which was 1, 2, 3, 5, 6, 7, 8, 9, 11, 12.
In parallel we created a number of game elements to help us create these problems:
Clockwise Gem
Anticlockwise Gem
Beam Generator
Power Gem
Receivers & Obstacles
We then identified what is essentially our core gameplay challenges that our player will face:
Dragging angle gems into beam generator/receivers
Remove angle gems from beam generator/receivers
Value deciesions between angle gems
Clockwise angle gem addition problems
Anticlockwise angle gem addition problems
Given our design and students curriculum, we made some assumptions about these challenges:
We consider clockwise movement a more advanced topic
Increasing complexity means increasing challenge, which can be achieved with more mirrors, angle gem slots, and receivers with obstacles
Now with these elements we imagined an interest curve.
How can we build trust as game designers? This is a question I’ve been asking myself, and in doing so came across an awesome video by James Everett, Lead Game Designer at Magic Leap (talking at Game Connect Asia Pacific).
In the above video James discusses the following.
Saruman vs Hobbit
Don’t be a Saruman, someone who ‘dispenses wisdom’ from an ivory tower. Instead be a hobbit. Be a comrade, a facilitator, filter, and collaborator for the people around you.
Trust
Everett breaks down trust into two components.
Logical
The logical component is based on the societal structure that we expect from normal, rational human beings, comprised of:
Contractual obligations
Past behavior
Following social norms
Following the law
Emotional
Emotional trust is:
The default in healthy teams
Reciprocal
Pleasant and efficient
Everett then discusses three ways in which designers can build or break trust.
Last week I designed Grapes of Wrath, a concept for a multiplayer level in Battlefield 1. Reflecting on the experience I will detail my process, and lessons learned in the hope of enriching myself and others.
I initially split design into two segments. Theme & Structure.
Theme
Given an aim to create a post apocalyptic theme I began my research with reference images.
This slideshow requires JavaScript.
In addition to reference images I sought out other forms of media such as movies, book and games that were set in a post apocalyptic setting.
This slideshow requires JavaScript.
What struck me most when reviewing this material was the desolate landscapes, and ruinous infrastructure. I intended to include these elements in some manner in the map I designed.
Structure
In the context of Battlefield 1 I define structure as map objectives, points of interest, unit design, and player flow.
Research
My research into structure began with two of Battlefield 1’s modes, Conquest & Rush, both of which I intended to accommodate within my map design.
Modes
Not only did I experience these modes by playing them, but I used spectator mode to watch the battle play out at a meta level. This allowed me easily see how objective placement, and points of interest affected player flows.
This slideshow requires JavaScript.
Unit
I then looked at Battlefield 1’s units. A study of the different infantry classes, tanks, airplanes, and vehicles revealed sub-categories, each of which had different play styles:
Battlefield 1 is a web of balance, and what I found was their vehicles cater to extreme playstyles with disadvantages, and usually a third averaged option.
Cerebral Design
Combining map knowledge and player elements I created a ‘cerebral map’ for Rush and Conquest. These maps included player flows, and major elements such as the Behemoth route, and an underground bridge.
For Rush mode the map intended to convey that attackers would become weaker over time, and defenders stronger whereas in Conquest it should be balanced strength. I hoped to achieve this experience with various measures such as:
Placing map objectives progressively further from attackers and closer to defenders in Rush
Giving more elite kits and vehicles to defenders as the attackers captured objectives in Rush
Balancing elite kits and vehicle spawns in Conquest
This slideshow requires JavaScript.
My cerebral map was an initial pass at an experience, which was all well and good, but it clearly was not a map! What I had created was akin to a disfigured skeleton which needed a layer of flesh, and its bones tweaked. A location was needed to root these abstract concepts in. Therefore Location became the third segment of my design process.
The most common method in video games is through a menu from which players choose terms to set the difficulty of the game. Such menus generally take the form of the following:
With each term developers have two ‘paths’ they can take. A generic or idiosyncratic term.
Generic – Commonly used terms which have no thematic basis in a game
Idiosyncratic – Terms that have a thematic basis in a game
Generic
The following are examples of generic terms:
Beginner
Easy
Medium / Normal
Hard
Expert
A clear advantage to using such terms is they are established concepts in the gamer zeitgeist making them more likely to be know across cultures, and languages.
On the other hand a number of issues arise when using generic terms such as:
Different Meanings – Nintendo Hard’s easy is harder than Western easy
Different Connotations – There are many interpretations of the term. For example Easy can have negative connotations to a players self sense of skill though it may be appropriate. This may cause them to choose a higher difficulty than is appropriate resulting in a less enjoyable experience.
Not Thematic – Alone they add little flavor to the game
Pocket legends is a multi-platform mobile massively multiplayer online game where players play with a variety of classes which have unique abilities. For this exercise I will be analyzing the ability system in Pocket Legends with a focus on the player vs environment (PvE) tank system for the warrior class.
Classes
In Pocket Legends each class has a role they perform, one such class is the warrior which suits the role of ‘protector’. During gameplay the warrior attracts the attention of enemies, and takes the majority of incoming damage. This role is referred to as being a ‘tank’.
To enact the role of tank, the warrior has an ability system. A tank that is unable to hold the attention of enemies will most likely result in the death of the party. This causes dissatisfaction with the game, which leads to lower player retention. It is therefore important that this system functions well.
Abilities
The fundamental building blocks of the ability system are the abilities. Warriors have unique abilities they can perform such as Vengeful Slash which has usage requirements, and effects when used. These usage requirements are mana, cooldown, and player level which are the primary variables that control this system.
When an ability is enabled it can be cast, and when cast goes into a ‘cooling’ time period. When cooling the ability cannot be used until the cooling period is over. Once the ability has cooled down, the player is able to cast it again. This process repeats as long as the player is able to cast the ability. Disabled abilities cannot be used at all due not meeting usage requirements such as lack of mana, character being dead etc.
We can represent this loop with the following diagram.
The purpose of this project is to further my understanding of good UI design by studying various elements of Shogun 2s User Interface (UI) used in its Sengoku Jidai Campaign Map.
This post will serve to discuss the Campaign Maps UI layout, and be an index post in a multi-post project of non comprehensive personal observations of Shogun 2s User Interface.
Disclaimer: The User Interface (UI) is not quite in its Vanilla form due to having the Steam mod by Radious installed at the time of the study.
The focus of this piece will be mostly on the 2-D elements of the interface such as menus, tabs, pop-up, and icons NOT the ‘3-D’ campaign map itself. So lets start with the general layout of the the Campaign User Interface.
General Layout
We can abstract Shogun 2s User Interface into an approximate layout with the following areas: