CreaLingua

Language Creation App Design Guide

by Aaron Murdock
 Table of Contents

Personas 1-3

Concept Model 4-6

Site Map 7-8

Wireframe 9-14

Surface Comps 15

Conclusion 16
 Persona 1: Jared Hall - Tabletop Game Master

Jared’s Interests Jared’s Favorite Features

• DnD/Similar tabletop games
Tutorials
• Anime

• Video games Constraint Chart

• Worldbuilding Dictionary

• Just about anything geeky

Word Creator

Jared’s Sliders Free Account

“The experience of immersion in gaming is the
reason we game. To create a world where oth-
ers can join you in exploring, fighting, and in- Linguistic Knowledge
teracting is why I love being a game master for
Caveman Tolkien
tabletop campaigns.”
Jared’s Summary
Interest in App
Jared has a background in technology from
Age: 30 None Much school and hobbies, and so would know a
well-designed app when he sees one. He
Occupation: IT Projected frequency of app use wants CreaLingua to be functional more than
anything so he can create words quickly and
Hobbies: Gaming, movies Never Daily easily for his games. He wouldn’t mind a learn-
ing curve, as long as the instructions are there
Education: Bachelor Degree Tech Savvy for him. He also does not want to pay for it un-
Bill
less he knows it’s useful to him, and so would
Hermit like a trial period.
Location: Arizona, USA Gates
 Persona 2: John Buckley - Author

John’s Interests John’s Favorite Features

• Writing and Reading
Tutorials
• Traveling and experiencing cultures

• History and Art Constraint Chart

• Worldbuilding
Lexicon Word Creator
• Linguistics

Grammar
“Writing fiction takes a person to another world. John’s Sliders
As a writer, I get to explore new and strange
and wonderful places nobody before me has. Linguistic Knowledge
My goal as a writer is to bring others into that
Caveman Tolkien
world with me.”
John’s Summary
Interest in App
John studied at Wesleyan University, finishing
Age: 38 None Much a Masters degree in English. With that back-
ground, he wants an app that can help him
Occupation: Author Projected frequency of app use track the minutia of creating a language. He
is likely to use the app regularly to help in his
Hobbies: Writing, travel Never Daily writing of fictional worlds. His goal with the app
is to use it as his main tool for conlanging. His
Education: Master Degree Tech Savvy frustrations with whats available is the inability
Bill
to keep it all in one place and still have it mo-
Hermit bile so he can work while traveling.
Location: Maryland, USA Gates
 Persona 3: Philip Brown - Hobbyist

Philip’s Interests Philip’s Favorite Features

• Reading
Tutorials
• Business
Library Glossary
• Biking, Hiking, and the outdoors

• Geography
Dictionary
• Worldbuilding
Word Creator

“Languages and linguistics fascinate me. I fell Philip’s Sliders Lexicon

in love with the idea of creating your own lan-
guage after reading the work of Tolkien. I’m no Linguistic Knowledge
expert, and I do it purely for the enjoyment and
Caveman Tolkien
aesthetics of it.”
Philip’s Summary
Interest in App
Philip is working on his undergraduate at UBC
Age: 23 None Much studying Business Communication. He spends
some of his spare time worldbuilding, or cre-
Occupation: Retail Projected frequency of app use ating cultures, geographies, histories, and
languages for imaginary worlds. He hopes to
Hobbies: Reading, biking Never Daily someday take it beyond a hobby and into the
business world by working for a large creative
Education: Undergrad student Tech Savvy studio such as Pixar or Bethesda.
Hermit Bill
Location: Vancouver, BC Gates
 Concept Models
Concept Models
Concept models allow designers to
start building a structure that will lend
itself later to the construction of the
site map and the wireframes. They
keep the focus on the personas that
were developed beforehand by asking
questions about what the users’ expe-
riences should be, such as why and
how they’ll interact with the app or site.

Here follow 3 iterations of concept

maps for CreaLingua, 2 sketched by
hand and the last done in InDesign.
 Concept Models
Notice how the model begins to take
more shape and have more detail as
the iterations go on.

As a note, this model to the right

included the “Script Editor” before
that particular aspect of the app was
scrapped.

On the next page you’ll notice that the

very center node is has the darkest
background and lightest text. With
each layer outward, the background
lightens and the text darkens. This is
to differentiate among the six layers
that make up the model.

You’ll also notice the numbers near

some nodes. These denote that those
nodes are in a particular order, and are
meant to be used in that order.
 Concept Models
Particles Ergativity Head
Syllabary Requries IPA
Mark- keyboard down-
ABC
loaded
Abugida Search
Cases Featural
Gender Articles Counting Types
Date
Organize
Punctuation Consonantal
Video Instruction
Nouns
Negation Morphology
Alphabet Medium Length
3 4 How did the
Verbs Grammar
language
5 evolve?

Pulls up screen
Usage Dictionary View/Edit to edit all fields
Requries IPA

Entry of entry w/save

keyboard down-
New Conlang
Word Order Syntax Brief overviews loaded

Nav Menu
button.
Pragmatics Semantics
My Conlangs
Tutorials Profile Login
Morphemes
To be taken in
Nav Menu CreaLingua Top Right Button
Requires email Forums

Nav Menu
order
2
Dictionary Lexicon Settings
1
Sounds New Word
Lexemes Friends
Video Instruction
on first time
IPA Email, First Name,
Create Account Username, Password
Create Input IPA Choose Part
Consonants Diacritics Vowels Lexeme 2 of Speech
Requries IPA Support FAQ
Video Instruction Video Instruction 1 keyboard down- 3
loaded
5 4
Finalize Define Contact Us
Voicing Manner Place Diphthongs Place Voicing
 Site Map
 Site Map
3. Conlang Editing

3. Conlang Editing
1. Landing Page Buttons

2. Main Pages
3. Conlang Editing

3. Conlang Editing

3. Conlang Editing

CreaLingua Site Map 1. Landing Page Buttons 2. Main Pages 3. Conlang Editing

This proposed site map for the Crea- After signing in, the Landing Page is These 6 main pages lead to other The areas surrounded by dotted lines
Lingua Conlang Creation App shows the default home page for the app. It sections of the app where creation can are portions of the app where the user
the navigation of the app, from the title includes 6 buttons for quick navigation happen. organizes, assembles and edits the
or Home screen, to deeper areas of to the main areas of the app, as well as building blocks of the conlang.
creation. a profile pop-out menu at the top right.
 Wireframe

Wireframe Sketches
These wireframe sketches show a few
of the primary screens that CreaLingua
will have in a very basic form.

Creating a language can be messy,

so one of the main design aspects is
aesthetics so users feel like the app is
easier to use than it may actually be
for an app. Since there are so many
aspects of a language to create, some
functions that were initially desired in
the app, such as the script editor, were
scrapped. Including them would have
made the app even more inflexible,
despite its increased functionality.

On each page of the app is the pop-

out Nav Menu, which is seen on the
next page. It is a hierarchal menu.
When the user taps once, it drops
down the menu to a lower level.

Notice on a number of pages the small

arrow pointing to the side. That ar-
row returns the user to the previous
screen, like a back button.
 Wireframe
 Wireframe
As mentioned, the app aims to be aesthetic. Hence there is white
space between such elements as the Friend profiles, and around
the logo on each page. The buttons on each page provide feed-
back by changing colors slightly when pressed. And when the
page transitions, depending on the menu hierarchy, the page will
swipe to the left or right.

One thing to mention is that the disclosure of information on these

particular pages is all up front, not progressive. However, on pag-
es such as the Tutorials, the information would not be a block of
text, but rather separated into groups and presented a chunk at a
time, making it easier for users to remember and apply, and keep-
ing them from being overwhelmed by all the information.

With these sketches, I feel there is too much noise with the lines.
But in the vector based iterations below, those lines become less
distracting and more free-flowing. The fonts are clearer, and infor-
mation areas are less blocky.
 Wireframe
 Wireframe

Wireframes for LOGO

CreaLingua

Tablet and Mobile
LOGO
CreaLingua The Landing Page for the app is basic. Search
Six buttons are laid out in a small 2x3
grid that each lead to a main portion of
Search
the app: Dictionary, Lexicon, Grammar,
Tutorial, My Conlangs, and Library. Dictionary Lexicon
Dictionary Lexicon The Search function on this screen will
search the whole app for the query, in-
cluding the dictionary and lexical entries
as well as the grammar rules input by the
user previously.
GrammarT
Grammar utorials
Tutorials Grammar Tutorials
The tablet has an additional functionality
at the bottom of the screen that leads to
Contact, About Us, and Settings.

My Conlangs Library The logo will be static on each page of

the app.
My Conlangs Library
The search function will change accord-
ing to the page. Hence, if the user is on
the Dictionary page, it will only search
Dictionary entries. Contact Settings About Us
 Wireframe
Navigation

The menu to the left is the Profile menu, which
CreaLingua pops out when the user touches the circle
Home
CreaLingua
LOGO LOGO
LOGO

UserName profile picture at the top right of any screen. It

Profile allows them to go directly to Profile, Settings,
Search Settings Forums (Which opens in an external browser), Dictionary
Search
Forums Friends, Support, and Contact Us. Lexicon
Friends
Support Grammar
Dictionary Lexicon
Touching the small triangle or touching off the Dictionary Lexicon
Contact Us Syntax
menu will close it.
Morphology
Grammar
My Conlangs
Grammar
GrammarT Tutorials
utorials The menu on the right is the Navigation Menu. Library
Grammar
GrammarT Tutorials
utorials
It functions much the same way as the Profile
menu, but with an additional feature. Touch-
ing the small triangles next to each option will
reveal more options tiered beneath. Here,
My Conlangs Library touching Grammar has revealed the two main My Conlangs Library
pages within the Grammar section: Syntax and
Morphology.

While either menu is open, the background

screen becomes lighter and more transparent.
 Surface Design - Phone

Surface Composition

The Landing Page shows the CreaLin-
gua logo at the top, with the letters in
CreaLingua Home
CreaLingua
LOGO

P P
Goudy Thirty DemiBold.

Search Below is the search bar that searches Dictionary

Search
through the whole app. Lexicon

D L The tiles have a large initial letter in the

top center (in the case of Library, two
D
Grammar
Dictionary
Syntax L
Morphology
Dictionary Lexicon letters) in Goudy Thirty again. They each Dictionary Lexicon
have the name of the tile in Arial below. Tutorials
My Conlangs
G T To the left we see that touching the navi-
gation pop out menu at the top left caus-
G
Library
Grammar T
Grammar rTutorials es the landing page to go shadowy while GrammarT
Grammar utorials
Tutorials
the menu is active. The logo is featured
again in this menu, with the name of the
C Li current page in Goudy Thirty again. Be-
low are the same options as the landing
C Li
My Library My
M Library
Conlangs page. The reason for this is quick navi- Conlangs
gation that allows the user to jump to a
page lower in the hierarchy. It is also a
static function across each page of the
app, again for quicker navigation.

The small arrows collapse or expand the

menus.
 Conclusion & Documentation
Conclusion Style Guide

From the Personas to the Surface Comps, each CreaLingua Logo Color Swatch
item in the steps to designing this app were es-
RGB Hexidecimal CYMK
sential. The CreaLingua logo is a simple orange and yellow candle
flame. The flame was chosen because from one small candle 000 000 0 0 0 100
The personas allowed me to consider who the a raging fire can grow. Likewise, as one begins to learn and
main audiences were that would use this app, and expand in knowledge, the mind grows. 30 30 31 1E1E1F 3 3 0 88
start right from the bat to design it with their back- The logo may sit next to the name, or above it. If above, it must 66 65 67 424143 1 3 0 74
grounds and knowledge in mind. be above the L, to invoke the idea of it being on a wick.
The shape of the flame with th line in the middle is supposed to 103 102 106 67666A 3 4 0 58
The concept map helped me to start getting ideas be similar to the initials of the app: C and L.
128 127 131 807F83 2 3 0 49
down on papers about what Iw anted to actually
include in the app. 102 36 15 66240F 35 87 100 50

137 149 115 899573 49 31 61 5

The site map greatly improved my vision of how I
wanted information structured in the app, as well 122 81 33 7A5121 39 62 100 33
as how the user might consider the easiest form
of navigation. 202 149 61 CA953D 21 42 91 2
CreaLingua Color & Type Schemes 215 183 103 D7B767 17 25 71 0
The wireframes helped be set up the basic layout,
look, and feel of what the users would be interact- 231 215 173 E7D7AD 9 12 35 0
The colors chosen are meant to recall a couple of ideas: maps
ing with. I was a great base. and candles. When I think of languages, I often picture old doc- 251 249 215 FBF9D7 2 0 19 0
uments covered in Latin or other ancient languages. Therefore
The surface composition was the polishing touch, the design of the app was meant to invoke similar thoughts.
and was perhaps the part I was most looking for- The yellows, browns, and grays are reminiscent of old maps Fonts
and books.
ward to because I finally got to see what the app
would look like in the audiences’ hands. The typeface of each main page is an old style with serifs, as
one might see handwritten on a colonial or medieval document.
Goudy Thirty DemiBold
Overall, the process took a while for me to un- However, in keeping with simplicity and ease-of-use, the main This font is used for the “CreaLingua” logo and the headings of
derstand. I did not know what I was supposed to typeface of the app is the sans serif Arial, both bold and regular. each main page.
do for the first few weeks after starting this proj-
ect, but as I watched and re-watched the videos Arial Regular, Arial Bold
countless times, I began to see what I was sup- This is used everywhere else in the app, from navigation to
posed to do. CreaLingua subheadings to input.