Welcome welcome!
What can we help you with?

Writing Designing SVG CHECKER

Example Flowers

Designer Instructions

Follow these instructions to make a kick ass Flower. It will come alive from a carefully grouped, and labled file. Click on these examples to download the ai. files for reference.

1

Lay it out

PROGRAM: Adobe illustrator. Do not imbed images, or non vector assets.

FONTS: Proxima Nova and Freight.

CONSISTANT STYLING OF COMPONENTS: Keep the styling consistant for the different elements. For example all questions should look similar, all choices should look similar, all options should look similar.

Terms

1

QUESTIONS

2

CHOICES: the multiple choice style answers corresponding to each question

3

NODES: Each question and its choices. Also the final answers. Each node will fill the phone screen

4

PATHS: the vector paths that connect one node to the next

When laying out the file think mobile! Make sure each node is legable within the aspect ratio of an iphone. It could be helpful to draw out a rectangle and use it as a template to double check it fits nicely.

Please check out examples on your phone.

2

Labeling party!

The key to making flower come alive is how you group, and lable your layers. It is easier to start by laying the chart out and then group everything, using the standards bellow.

NODES n.start

Each node needs to be grouped. They should contain all visual elements excluding paths. Be careful not to leave any illustration or decoration un grouped.

Each node should have a unique ID with no spaces or special characters. Name the group “n.” followed by the node ID (`n.raining, or n.start`). Choose an ID that relates to the question/answer for example n.raining labels a raining question. The first question of the Flower must always be n.start.


CHOICES c.start--rainingc.start--far

Within each node group, choices should be sub-grouped. They must be named starting with “c.”, its starting node ID, “--“, and its ending node ID (`c.start--raining`).


PATHS p.start--raningp.start--far

Paths should exist on their own layer. A single path must exist corresponding to the choice, but prefixed with “p.” (`p.start--raining`). You will notice the name is the same as the corresponding choice just with a p!

You must use the pen tool to create these, using the brush tool will not work.

The computer uses the direction of the path to guide the flowchart, so make sure you draw the path the correct direction. See blue path in the example.

Drop your svg in the SVG checker to make sure everything is labled correctly!

3

Deliverables

A pdf, and an svg of the flower with all text outlined. When exporting the file, do not Preserve Illustrator Editing Capabilities.

A 1500 x 1300px image with no text on it. This will be used to socialise flower and will exist on other parts of the site. Here are some great examples.

Writer Instructions

Follow these instructions to make a kick ass Flower. Use Draw.io to layout your flower. Click on these examples to explore.

1

Lay it out

1

Each path should have at least 3 questions before the user gets to a final result. The user should feel like she is 'exploring' the chart, and coming up short after 1-2 questions can be a bad user experience. Please feel free to add more questions to each path! The more complex the Flower is, the more fun it is for the user.

2

Keep the copy relatively simple - 12 words max in each bubble/box. Answers to questions, in particular, should be short and sweet calls to action.

3

There should be at least two answers to every question. There can definitely be more if you want!

4

Answers to the same question shouldn't lead to the same next question.

Please follow each path to every result before submitting, and check the following…

2

Frequent Issues/Concerns

SEE RULE 1 - not enough Qs before a result. Add another question after "Are you sure?" before you get to the result (purple box).

SEE RULE 3 - only one answer to a question. Please add another option (white circle) following the question.

SEE RULE 4 - both answers going to the same next question. Create another question so each answer takes on on a separate path!

3

"Quiz"-Type Executions!

When you're dealing with a yes/no question ("Should I Go On That Tinder Date?"), the above should be pretty self-explanatory. If it's more of a quiz-type question ("What Should You Be For Halloween?") you're likely dealing with at least four final results, which makes things much more complex.

Some helpful Hints:

  • Figure out your results and accompanying descriptions first. Assign them personalities that would align with the reader. (OK, so the preppy girl gets "straight-leg jeans" and the chill girl might get "jeggings.")

    Classic Skinny — Classic, Polished, Preppy You know what you like and have a knack for getting what you want. You take “perfectionist” as a compliment, and your denim is just as polished as you are.

  • In a separate doc, brainstorm a bunch of questions & accompanying answers, as if you're writing a regular quiz. Assign each answer a personality / result!

    Pick a senior superlative:

    • Mostly Likely To Become A Reality TV Star (jegging)

    • Most Likely To Be Asleep In Class (boyfriend)
    • Most Likely To Succeed (classic skinny)
    • Most Unique (flare)

  • It helps to view the personalities as a spectrum -- usually, some results will be closer in personality than others, so I'd put them next to one another on the template. That way, you can direct the reader to one side of the spectrum and then narrow down their 'personality' through follow up questions.

    Which is more appealing?

    • Going out on the town! (flare, classic)
    • Going to town on chips + guac, in bed. (jegging, boyfriend jean)