Plankton
an excerpt

YWP Website Design

Look and Feel

-I would like the site to encompass the following key words: fun, imagination, exploration, adventure, and dream.

-I would like 14-point font minimum throughout the site. Both kids and teens react well to sites with larger fonts. Menu bar items, homepage block titles, and page titles should be at 16 or 18, and the content text on the pages should be at 14.

-We are leaning towards using handwritten and typewriter fonts throughout the site for menu items.

-Fun, but very clean design. Teen users rated websites with a relatively modest, clean design the highest for subjective satisfaction

-Make sure graphics are optimized for fast loading.

-Less text-heavy front page (more images). The blocks should still be big, but they will be filled with images and large text tag lines. Kids like metaphoric imagery/illustrations to help them explore the site. Both kids and teens prefer to scan pages quickly, looking for just the information they need.

-Since kids and teens rarely scroll, we should design the homepage and profiles likewise.

-Profiles are very important to kids and teens, especially teens. Profiles should be dynamic, but easy to read, with many options to individualize themselves. Editing your profile should also be very clear!

-We are leaning towards using realistic-looking paper throughout the site.

-I would like the color scheme to be bolder than the current site’s. Less pastel, but not neon or primary. I think we need to a little bit of the NaNoWriMo’s light blue that is on the site (to tie the main site and the YWP together), but I would like to add colors that are bolder and complimentary to the light blue.

Homepage

I would like the home page to be easy to navigate, but also dynamic, breaking away from using the heavy text, box structure that is prevalent on the current YWP NaNo website. Of course, we would like there to be clear organization to the site, but would like to explore different shaped home-page blocks, less text, larger fonts, and more illustrations. We will be hiring an illustrator to draw the illustrations that will be included on our website, so do not worry about including them in the home page mock up, just include space for them. (Note that the design proposal you sent us included a widget for choosing a “track” but we would like the appropriate track to be automatic after sign-up, so there will be no need for this widget).

**See attached sketch of homepage layout

The Masthead will include:
—Logo (upper left hand corner)
—Large “Sign up now!” and “Sign in!” buttons
—When signed in these buttons will be replaced with a “Log out!” button and the phrase “Hi [username]!” and “Keep writing [username]” from November 1st-30th
—The Phrase: “National Novel Writing Month November 1st-30th”
—A way to turn the website’s sound off: “Sound On” or “Quiet, I’m trying to write”
—Teacher’s Lounge Button (If signed in and signed up as a teacher)

Below the Masthead there will be a Top Menu Bar that will include the following Main Navigation Menu Items:
—Home
—About
—My NaNoWriMo
—Authors
—Forums
—Writer’s Resources
—Fun Stuff

Home Page Blocks:

At least these three Above the Fold:

—The Writer’s Block: This block will lead kids to advice from professional authors about writing. I would like this block to be square(ish) and a bit smaller than the top level blocks on the current YWP NaNo homepage. This block will be much less text heavy. I would like it to have the block’s title, a photo of the author, a 10 - 20 word tag line and intro in large font, a “read more” button at the bottom in smaller font, and a rss feed icon.

**You can use the author photo attached and “Three ways to get over writer’s block by Aimee Bender” and the attached author photo.

—NaNo News: I would like this to be the same size as the Writer’s Block and would like it to have the title of the block, room for an illustration, large text for a 10–15 word news headlines, a “read more” button, and an rss feed icon. I think this would be a cool place to bring in a newspaper look and feel (see J K Rowling’s website below)

**You can use this as placeholder text: Extra! Extra! Set Your Time Zones Before It’s Too Late!”)

—Dare Machine: This is a machine similar to the plot machine on scriptfrenzy.org. It would randomly display a writing prompt and users will be able to push a “Next” button to display another random prompt. We would like this to be much less boxy. We envisioned a small notebook or a torn piece of lined paper with handwritten, but clear, 16-point font that would display a short writing prompt no longer than ten words. “Next” would also be written in this font, but it would stand apart for emphasis. I would like to integrate a sound into this button. After the button is pushed, and before the next prompt is displayed, I would like to hear the sound of someone writing with a pencil on paper.

**You can use this as placeholder: Your character has the most embarrassing day ever. What happens, and how does your character react?

Below The Fold:

—Word War Game: This is less of a block and more of an announcement link that leads people to the Word War Game. I would like this as close to the center of the site as possible. It would be a stamp/sticker/announcement that says: “Word Wars Happening Now! Best Noveling Game on the Internet!”
—Countdown Clock: This will be all flash, and we did not talk about this before. The clock would do two things
1. Count down to the event: NaNoWriMo begins in . . . (days, hours, minutes, seconds). It would count down from October 1 (eventually from December 1) to November 1.
2. NaNoWriMo ends in . . . (days, hours, minutes, seconds). This counts down from November 1 to December 1. I would like this to be a dramatic ticking clock. The block that this is in on the current YWP NaNo site is the block that says “NaNoWriMo 2007 has ended!” I like the size of the block, but I would like the numbers to fill up the block, and for the font/look to mimic a digital alarm clock. Let’s talk about this if it is not in the current design proposal. The game ticking clock will be just like this, so perhaps it can be included in that proposal. Some examples of clocks I like:
--http://www.bushslastday.com/index.html: I like this size.
--http://www.officialbushcountdown.com/?gclid=CMznqav90JICFQqiiQodT2uKCA: I like how it looks like an alarm clock.

—Participant Stats: We would like this to be a pie chart graph with four or five labeled sections and corresponding numbers that I could swap out.

**You can use the following as placeholder text/numbers: Young Writers 18,000, Werewolves 450, Pirates 37, Ninjas 339, and Zombies 2 as the placeholder text. The numbers I would like to be in the actual pieces of pie on the pie chart. Is this at all possible? I would love the pie chart to be functional.
http://www.grahamdobson.com/apparel/apparel03.asp

—Young Novelist Workbooks: This is a link to the Young Novelist Workbooks that are going to be redesigned this year. As of now, we do not have a cover design, but we will soon. We would like this “block” to look like a book—three dimensional, with a shadow.

—Rotating Picture Testimonial Block: This is going to be a very small block at the bottom of the page. Our original idea was to have rotating pictures in this block, but we changed out mind. Instead a random picture will display each time the page is refreshed. There will also be a link that says: “What is the NaNoWriMo Young Writers Program?” It is less for kids and more for teachers/funders, so we would like it to be kind of low profile. This block can be a box and a little smaller than the “What is NaNoWriMo?” block that is on the site now with a cool frame around it.

**You can use the photo that is attached as the placeholder image.

Home Pages we Like and Why:

1. http://www.pigsanonymous.com/
I really like this site’s organized, box-like structure that also breaks out of the box with differently shaped home-page blocks below the fold. I like the size and look of the logo and how it looks a bit three dimensional, like a sticker slapped on the site. I like the paper backdrop, the bold colors, the slow moving animation (would like the rotating pictures to move slowly), and the way you can turn off the sound in the upper right hand corner.

2. http://www.startheregoplaces.com/
Though I do not like this site below the fold (the font is too small and the layout is boring), I like the masthead and the use of the typewriter fonts on the Main Nav. Menu Bar. I like the size and look of the logo. I like the creative use of old-looking fonts and more modern ones. I enjoy the images that have a more realistic feel, though this is probably Flash-based on this site.

1. http://www.barbican.org.uk/canihaveaword/
Though I know this is very flash-centric, I love the bold colors and love the hand drawn font on the top of the page. I enjoy the illustration heavy home page, and how this site “breaks out of the box,” but is still organized. I do not like that there is no top menu bar, though.

2. http://www.jkrowling.com/
I know this is all flash, and way too complicated, but I love the look/feel of this. I also do not want our site to have an overlying theme like this site (the theme of the site being a desk), but I like the typewriter fonts and realistic looking animation, especially when it comes to paper. I like that the news paper looks like a news paper. I think our NaNo News Block should have a similar look and feel.

5. http://www.dreamit-doit.com/content/campaign/index.php
I like the larger font on the Main Nav. Menu Bar, and the warm, bold colors. I do not like the very boxy nature of this site, nor that you have to scroll and scroll to get through all the information on the home page.

9. http://www.larklight.com/
Again, this is all flash, but I like the paper and fonts on this site. Very pretty. I think this is the direction the curriculum/FAQ pages should go in.

Artists/illustrators we like and why:

To give you an idea of our general aesthetic for potential illustrators for the site, we have put together a few examples of illustrators we like.

1. Christopher Buchholz: http://www.threadless.com/profile/315136
http://www.threadless.com/submission/101219/Pre_Columbus
http://www.threadless.com/product/744/Star_Men_in_Moon_s_Milk
http://www.threadless.com/product/720/The_Captain_s_Dream
I really love the crisp lines of his illustrations. They have a perfect balance of fun cartoon and serious illustration. His images are full of imagination and dream, which is something I would love to tie into the site design. I love his use of color. The Captain’s Dream even uses the light blue that is on the current site.

2. Allen Faustina: http://www.threadless.com/profile/223712
http://www.threadless.com/product/1000/Runnin_Rhino
http://www.threadless.com/submission/125682/A_Warm_Bath
His style may be a little too cartoon-like for the older kids, but he does have a sense of humor that an older crowd might appreciate. I really like his use of color also, and again, the clean crisp lines of his illustrations.

3. Graham Dobson: http://www.grahamdobson.com/apparel.htm
http://www.grahamdobson.com/apparel/apparel18.asp
http://www.grahamdobson.com/apparel/apparel02.asp
http://www.grahamdobson.com/apparel/apparel07.asp
Again, this artist’s designs are clean, and the colors are crisp and fun. Graham represents the sense of humor that Allen has, but is a better artisan like Christopher. It lacks a bit of the dream and imagination that Christopher has.

Typical Internal Content Page:

I would like the minimum font size to continue to be 14 point in the internal pages. I would like the page to be more stylistically typical since I would like the content of the pages to be the most important aspect. If it is too fancy, the information may get a little lost. I am interested in making the side menu bars more dynamic. I am interested in the menu bar mimicking the FAQ/Curriculum “table of contents” style with a cool border.

Profiles:

This is the “profile state” that visitors will see. See attached profile screen shots.

I think it would be cool if the profile has a papery book feel. We really like the current profile that is on the site now. (View the attached screen shots of the current profile), but would like the new profile to integrate with the new color, look, and feel of the new site. I would like to keep the tab options (Author, Novel, etc.), and the ability to view the author photo and other information no matter what tab you are viewing. I am not sure you need all of the information below, but I have included all that will be included on the profile.

Main items that appear no matter what tab is chosen (see current profile):
1. Author Photo
--if there is not photo uploaded then use the image we use on the Script Frenzy site now.
2. Novel title
3. Genre
4. Progress bar: We would like to make the progress bar more dynamic, bigger, more three dimensional, similar to this (have a percentage in the progress bar is also helpful!)
http://www.rottentomatoes.com/m/atonement/
5. Add as buddy
6. Send NaNoMail
7. View forum posts

The owner of the profile will not see 6 or 7, and will see a side bar menu on the left with:
-NaNoMail Inbox
-Edit Settings
-Edit Profile
-My Workbook (lead them to the online workbook page)
-My Classroom (lead them to the “virtual classroom” which will mimic the main sites regional lounge: if they are not signed up for a classroom, it will prompt them to do so and explain what it is.

The “Author Interview” Tab
I would like this page to look like an interview in a magazine. The text at the top of the page would say: “NaNo News Magazine’s Q&A with [username].”
The rest of the page would look like a Q&A
1. Q: What authors and books inspired you to write?
A: [List of authors]
2. Q: What is your favorite music to novel by?
A: [List of music]
3. Q: Do you have any survival methods on how to get through the 30 days of November?
A: [List of incentives, etc.]
4: Q: What do you do when you’re not noveling?
A: [List of hobbies]
Also on this page there would be a little box with a few stats about them. The box could look like a post-it note and include:
1. Years done NaNoWriMo
Icons will appear underneath this (we will provide these icons)
2. Years won NaNoWriMo
Icons will appear underneath this (we will provide these icons)

Novel Tab:
1. Book Cover image. I would love this to mimic—in look and size—the workbook block that will be on the home page in that it will look like a three dimensional book and the image they upload will be on the cover. If no image is uploaded the same typewriter image that will appear if a photo is not uploaded will appear.
2. Book summary: This would be a text only quote in a box next to the book cover with a border.
3. Novel excerpt: Below both the front and back cover of the book, I would like a paper looking box where an excerpt would go. I really like the look of the current one (See excerpt page shot attached).
4. Praise: Below the excerpt is a section where you can see how visiting users rated this novel. For example, if someone awarded the excerpt as funny, there would be an icon of someone laughing, and the word funny below it. Beside this would be the number of users who awarded the novel this “Praise.” Below the “Praise” box a visiting user would see a prompt to “Praise this Novel” where they can select as many from a list and then hit a submit button. Examples of what would be on this list.
--Funny
--Page turner
--Awesome characters
--Look out Harry Potter
--Nobel Prize worthy
--Upcoming New York Times Bestseller
--Breathtaking setting
--Great use of detail
--Needs more unicorns
--Can’t wait for the movie
--Creepy. In a good way.
--
Buddy List Tab:
1. Show 5 - 10 buddies on the landing page of this, along with a smaller version of the progress bar (see screen shot of current buddy list page), and their profile picture if they have one. The profile picture is an addition to the current “Buddy List.”
2. Have a “See all buddies” button that would link to a separate page with all the buddies.
3. The 5 – 10 friends would be random, the users will not be able to chose who is on this page. If we can, we will rotate them randomly.

Stats Tab (see screen shot of the current profile) we will provide the following
1. Their word-count progress graph
2. Classroom progress graph (this shows if the user has affiliated with a classroom, if not it is absent)
5. Genre graph (absent if user hasn’t chosen a genre)
6. “Do you want to know how your class ranks?” link at the bottom. This will link to the Geeky Stats page under “Fun Stuff” (absent if not affiliated)

FAQS and Curriculum/Ajax Pages:

I would like this page to look like a real table of contents that would be in the beginning of a classic work of fiction. I would like it to look realistically papery, and have clear typewriter font that is a bit old-timey. I would also like there to be a black border with a little bit of filigree in the corners and a small space at the top (center) for an illustration that we will provide that would overlap the border.

2.http://www.hymnsandcarolsofchristmas.com/Hymns_and_Carols/Images/Bramley_Stainer/Table_Contents_1.gif
I like the old-timey paper look of this table of contents, the yellowing paper is nice, but I would like a more modern typewriter font used. I also like the space for an illustration here.

4. http://www.larklight.com/
Again, this is all flash, but I like the paper and fonts on this site. Very pretty! Maybe too stylistically old-timey.

Edit User Profile:

I would love for the edit user profile to be very clear and easy to navigate. I think that the font, as it is throughout the site, needs to be bigger, and the page should be simple in look and feel. All that should be on these pages is the prompts/questions/and form boxes. It would be great to leave room for an illustration (that we will provide) in the upper right hand corner of each of the following tabs to make the pages a little more fun.

Edit User Profile will have 3 tabs:

1. Account Settings:

—Join your virtual classroom option: The first thing this page will have is a way for a user to “affiliate” with a classroom if they are participating as a group. They will get this prompt: “If you are doing NaNoWriMo as part of a teacher lead classroom, search for and select your teacher here” Below this prompt will be a field, and below that field it will say: “Enter your teacher’s username” and next the field there will be a search button. Below the search field, there will also be some way for the user to choose the classroom from a list. Once they find their teacher, and click on the link, they will be able to “Join [teacher’s name’s] Virtual NaNoWriMo Classroom.” This option then appears as a link that says “Leave [teacher’s name’s] Virtual NaNoWriMo Classroom. They will not have the option to join a different classroom unless they “leave” the one they signed up for.

—Author Profile Settings (these would be check boxes, and default to unchecked?)
□ Do not send me emails from NaNoWriMo Headquarters
□ Only my classmates, buddies, and teacher to view my profile
□ Turn off NaNoMail. NaNoMail is not attached to your personal email. NaNoMail allows you to send and receive messages from other NaNo YWP users.

—Time zone: This is a really important one, so it should have a big note below the box that says: Don’t forget to set your time zone! This is really important!”

—Signatures: This will be a form box. Below the box it will say: Your signature will be publicly displayed at the end of your forum posts.

—At the bottom of the page there will be this prompt that would link to the Author Info Tab”: “Would you like to tell us a little bit about yourself and your novel? Head on over to the “Author Info Page.”

2. Author and Novel info:

This form will include:

You

—What years have you done NaNoWriMo?
--with buttons from 1999 - 2007 you can check
—What years have you won NaNoWriMo?
--with buttons from 1999 - 2007 you can check

—Word-Count Goal: This would be a form box with this below it: “Remember to set your word-count goal before November 15. If you don’t, your word-count goal will be locked at 50,000 words. If you are having trouble decided what your word-count goal should be check out this nifty chart. It will help you set a challenging, yet reachable goal!”

Apart from November 1 – November 30 these blocks will be grayed out with a caption to let users know that this is where this will be during the event:

—Update Word Count: This will be a form box with this below it: Enter your word count in the box above.
—Word Count Validator: This will also be a form box (but big enough to show a paragraph). Below it it will say: Cut and paste your novel in the box above and our robotic word count validators will update your word count for you! This one will only be open from November 25 – November 30. This message will display in the window all other times: From November 25 – November 30, upload your novel here to win!
—Upload Excerpt: This will also be a form box big enough to show three paragraphs. Below it will say: Cut and paste an excerpt from your novel in the box above so other users can get a sneak peak of your book.

—Upload Your Author Photo: This is a form box with this below it: Upload your avatar or picture.

—Author interview: The page should break somehow to let kids know they are moving onto something new, their Author interview. It would begin with: Thank you so much for taking the time to talk with us today! We heard you’re writing a novel this November and are eager to hear all about it.

Then would have the following questions:
—What authors and books inspired you to write? (form box)
—What is your favorite music to novel by? (form box)
—Do you have any survival methods on how to get through the 30 days of November? (form box)
—What do you do when you’re not noveling? (form box)
—Could you tell us a little bit about the main characters in your upcoming novel?
—I know you’re not supposed to give away too many secrets about your upcoming book, but could you give us a one sentence summary of what it’s going to be about? (form box)

—Novel Name: Form box.
—Upload a Book Cover Image: This is a form box with this below it: Upload a digital book cover or an illustration. Maximum dimensions are ?x? and the maximum size is ? kB.
—Novel Summary: Larger form box with “Tell us what your book will be about in 300 words or less. Ready, set, go!”
—Novel Genre: Drop down menu
—Novel Excerpt: Larger form box with “Starting November 1 you be able to enter a

3. Forum Subscription Tab:

The Final Tab will be a page that will contain a user’s Forums Subscriptions. No one else can see this tab but them. It will contain this message: This area will hold all your bookmarked forum threads. You can bookmark a forum thread by visiting the thread and clicking on the “Subscribe” button. One you do, the link to that thread will show up here! If there are subscriptions in this box, they will show up as links. (See attached subscription tab.) I would like font to be bigger on this also.

List Content

We will be using list content for the “NaNo News” and “The Writer’s Block” I really like the way the list content is laid out on the Script Frenzy Main Site: http://www.scriptfrenzy.org/eng/thebeat. I like the size of the articles on the list and the layout. I would also like to use Ajax on this page, so when you click on “Read full article” it would open the article on that page. You can open as many articles on that page as you would like. Once an article is open there should be a “Close” link on the bottom.

Forums

I like the look and feel of the forums as they are now. Everything that is on them now, I would like to have on the new forums. I would like to up the font-size on all the text on the Forums View Topic and Forums Main. We are planning on keeping the icons we have been using in the forums and using them on the new site to cut down on icon design time.

Icons:

We would like the following icons designed. I really like the look and feel of the merit badge icons (See attached merit badge image), and would like our icons to follow this design style. Very iconic with strong colors:

1. Progress Bar: We would like to make the progress bar more dynamic, bigger, more three dimensional, similar to this (have a percentage in the progress bar is also helpful!)
http://www.rottentomatoes.com/m/atonement/
2. Winner Bar: This is a different state of the progress bar. Once a user “wins” their winner bar will look much more awesome and say “Winner” below it.
3. Winner’s Banner: This is a banner that will go over the author photo after a user “wins.” This is more of a different state of a profile, where it changes visually to let people know of the user’s amazing feat. Is this an icon?

http://ywp.nanowrimo.org/participanticons
4. Participant Icon: 2 One big and one small
5. Winner Icon: 2 One big and one small
6. Pie Chart

Website Map:

I am not sure if you need our entire site map, but it may be helpful to you in making the mock-ups or in understanding the functions of our website.

Homepage

Main Navigation Top Menu Bar
—Home
—Authors (Search)
--authors tab
--content tab
--winners (after the 25th) tab
—About/FAQs
--What is NaNoWriMo?
--How it Works for Young Writers
--FAQs (One page of Ajax Drops downs)
--Educator’s Guide to NaNoWriMo
--Media Page/Press Clippings
--Staff
--Friends of the YWP
--Brought To You By
--Contact
—Writer's Resources
--Printable Student Workbooks
-Elementary
-Middle
-Highschool
--The Writer’s Block
--Pep Talks
--Amber’s Virtual Library (Updated)

—Fun Stuff
--Word War Game
--Geeky Stats
--Flyers for Downloading
--Participant Icons
--Participant Certificate

—Forums
--NaNo Tips and Strategies
-Character
-Plot
-Reaching Your Word-Count Goal
--Young Writers Lounges
-Elementary
-Middle
-High
-Home
--Resources and Inspiration
-The Library
-Procrastination
--NaNoWriMo, etc.
-Rules
-Site Feedback
--Teacher’s Lounge
-Wisdom
-Lesson Plans
-Councilor’s Office
--Private Forums
-Principal’s Office
-Classroom Region if subscribed will show here)
—My NaNoWriMo (See Profile breakdown above.)

—Teacher's Lounge Button on Masthead
--Welcome Message
--Elementary School Curricula
--Middle School Curricula
--High school Curricula
--Order Your Noveling Kit
--Teacher’s Forum
--The Educator Press Kit
-Press Kit for parents and administration
-Letter to Parents
-Permission Slip for use of photos on our site
-Press release to help get the word out to local papers etc.
--Alphasmart Loaner Program
--Participant and Winner Certificates

Bottom Links
—Home
—About
—Authors
—Forums
—Writer’s Resources
—Fun Stuff
—Contact
—Brought To You By
—Privacy Policy
—Terms and Conditions
—Donation Station and Store
—Script Frenzy Young Writers Program
—This is on the bottom of every page: “Copyright © 2008 the Office of Letters and Light:: All posted novel excerpts remain copyright their authors.
Powered by Drupal”