I know class is over, but in case you're still out here looking at the blog, I thought this was a pretty good, simple website for a crash course in typography...and a quick and easy reference.
http://practicaltypography.com/
Wednesday, April 30, 2014
Saturday, April 26, 2014
Choosing the right typeface
In 2012, MIT AgeLab studied the impact of typography in user interface design when the researchers Reimer, Mehler, and Coughlin compared whether in-vehicle displays are more readable with humanist or grotesque typefaces. They reached an unexpected conclusion when they found that the effect differs between men and women:
So, what is a humanist typeface? One notable characteristic is that there is very little difference between thin and thick strokes. The apertures of the letters are more open, with ample kerning, making it easier for the eye to move horizontally across a line of text. For examples, visit: https://typekit.com/lists/humanist-sans-serifs
In contrast, grotesque typefaces have less variance between similarly-shaped letters (i.e., i and l, or m and n). The characters have tight kerning, meaning there is little space between letters. The lack of contrast between letters makes text written in grotesque typeface ambiguous. Deciphering the words contributes to high cognitive load. Examples: https://typekit.com/lists/grotesque-sans-serifshttps://typekit.com/lists/grotesque-sans-serifs
For a reliable, versatile, easy-to-read humanist sans serif font, consider Ideal Sans. You can read the description and find suggested pairings at http://www.typography.com/fonts/ideal-sans/overview/
Sources:
Reimer, B., Mehler, B. & Coughlin, J.F. (2012). An Evaluation of Typeface Design in a Text-Rich Automotive User Interface. MIT AgeLab White Paper 2012-12. Massachusetts Institute of Technology, Cambridge, MA. (pdf)
Badger, E. (2014, April 7) A remarkably small idea that could reduce distracted driving. The Washington Post. Retrieved from http://www.washingtonpost.com/blogs/wonkblog/wp/2014/04/07/a-remarkably-small-idea-that-could-reduce-distracted-driving/
Among men, a “humanist” typeface resulted in a 10.6% lower visual demand as measured by total glance time as compared to the “square grotesque” typeface. Total response time and number of glances required to complete a response showed similar patterns. Interestingly, the impact of different typeface style was either more modest or not apparent for women on these variables. (Reimer, B., Mehler, B. & Coughlin, J.F., 2012, p. 1)The study supports the theory that "humanist" typefaces are more readable. As instructional designers, this means that we should use this style when we want to reduce cognitive load. Specifically, we want to use a humanist san serif font, especially for eLearning projects.
So, what is a humanist typeface? One notable characteristic is that there is very little difference between thin and thick strokes. The apertures of the letters are more open, with ample kerning, making it easier for the eye to move horizontally across a line of text. For examples, visit: https://typekit.com/lists/humanist-sans-serifs
In contrast, grotesque typefaces have less variance between similarly-shaped letters (i.e., i and l, or m and n). The characters have tight kerning, meaning there is little space between letters. The lack of contrast between letters makes text written in grotesque typeface ambiguous. Deciphering the words contributes to high cognitive load. Examples: https://typekit.com/lists/grotesque-sans-serifshttps://typekit.com/lists/grotesque-sans-serifs
For a reliable, versatile, easy-to-read humanist sans serif font, consider Ideal Sans. You can read the description and find suggested pairings at http://www.typography.com/fonts/ideal-sans/overview/
Sources:
Reimer, B., Mehler, B. & Coughlin, J.F. (2012). An Evaluation of Typeface Design in a Text-Rich Automotive User Interface. MIT AgeLab White Paper 2012-12. Massachusetts Institute of Technology, Cambridge, MA. (pdf)
Badger, E. (2014, April 7) A remarkably small idea that could reduce distracted driving. The Washington Post. Retrieved from http://www.washingtonpost.com/blogs/wonkblog/wp/2014/04/07/a-remarkably-small-idea-that-could-reduce-distracted-driving/
Monday, April 21, 2014
Final Blog Post of the semester
I thought this article might be helpful as we all begin working on our final projects.
http://www.presentationadvisors.com/ten-tips-for-delivering-a-kickbutt-virtual-presentation
http://www.presentationadvisors.com/ten-tips-for-delivering-a-kickbutt-virtual-presentation
Final Photo Book
Thanks to everyone for all their helpful advice. Here is my final product
Sam Dowell
Sunday, April 20, 2014
Sarah Peachey- Final Picture Book
Below is the link to my final picture book. I used Picaboo to create this recipe book for Vegan Oatmeal Cookies. I changed my original draft by adding boarders and shadows to the pictures, and changing some of the font sizes. Let me know what you think!
http://www.picaboo.com/?share=9b43a819b8d686a012326d59ba6fddb7&version=445515&siteID=ViaPreview
http://www.picaboo.com/?share=9b43a819b8d686a012326d59ba6fddb7&version=445515&siteID=ViaPreview
Amanda Dudley Final Picture Book
Hello all,
Here is the link to my finalized picture book: http://www.picaboo.com/?share=4b9b6433c720631fb14c6cb75759055b&version=445509&siteID=ViaPreview
I followed my peer feedback and changed the background to a light blue gradient image instead of just the solid color. Thank you also for finding that one typo in there :)
Thanks,
Amanda
Here is the link to my finalized picture book: http://www.picaboo.com/?share=4b9b6433c720631fb14c6cb75759055b&version=445509&siteID=ViaPreview
I followed my peer feedback and changed the background to a light blue gradient image instead of just the solid color. Thank you also for finding that one typo in there :)
Thanks,
Amanda
Thursday, April 17, 2014
S. Simpson Website Draft
I am still doing edits to my website and adding content. Here is the link to my website if you want to see where it is right now.
Wednesday, April 16, 2014
Rust - Picture Book assignment - Final
Updated:
After many iterations and lots of questionable artwork, I decided to go with vectors drawings and shapes as well as a 5x7in size for the book (200dpi so plenty of zoom available on the font types for digital copies). I liked the idea of a 5x7in booklet to give out to friends or audience members at our games. It wouldn't be too cumbersome at that size, and would probably be bound with one ring in the top left corner. Using vector graphics was much easier than hand drawn pencil/ink images solely based on the reuse factor. I have attached a link to my final picture book (in pdf format, found on Google Drive): Rust_RollerDerby_PictureBook.pdf
Draft Comments:
So I decided to go ahead and make the first comic for that roller derby interface I made in the last assignment. I am attempting to explain a complex sport in a generalized, comic, way. I had also decided to take a step away from the computer, and hand draw/ink the pages, but am finding it very taxing to draw out layouts AND type AND images. I will likely create the layouts and type on the computer, and continue the images as hand drawn. I'll scan them in for the final, but right now these are photographs of some of the storyboard and mocks I currently have.
I decided to create the layouts reminiscent of comic books, this will help me chunk information together, adding alignment, repetition, and proximity to my designs. I am also trying my best to use the golden ratio on all pages. I found some information on the golden ratio that was quite interesting (used in many popular company's logo creations, on websites, and even in fashion design!), so I'm trying it out in my page designs. I am also consciously choosing images that are representative (of gear), interpretive (player cards), organizational (explaining time in the game), and transformational (skater penalties).
My storyboard is handwritten/drawn, and I've mocked up many different ideas which basically helped me understand the scope of my story. So my final "storyboard" reads more like a script explaining scenes. The scenes may be out of order (logically), so if you are confused at a point, let me know and I'll rearrange the order of the information.
- [cover] What is Roller Derby?
- [written intro] This story is for the audience and future players- it provides an overview of modern flat-track roller derby, league structures, and the people who participate in this sport.
- Roller derby is a competitive team sport played on quad skates [image of quad skates]
- With some practice and dedication... [image of random people in line at grocery store]
- ... anyone can play! [same image of random people in line now with derby gear and skates on, or super hero capes and masks]
- The game consists of 2, 30 minute halves; each half contains plays, called jams; jams can last up to two minutes each. [organizational image representing time of game-half-jam]
- Two teams field five players in each jam. [see image above]
- These five players are made up of 3 blockers, 1 pivot, and 1 jammer
- [player card] Blocker
-blocker moves: play defense; play offense
-special move: Star Pass, pivot can become jammer.
-[player card] Jammer
-jammer moves: score points; fight through pack; skate around track
-special move: Lead Jammer, can call off the jam.
- The track is an uneven oval with out-of-bounds areas.
- The pack determines where the in-play action can occur.
- Any engagement outside of the pack is out-of-play and may result in a penalty.
- Each penalty costs a player 30 seconds in the penalty box. [image of timer and player looking at game]
- Penalties consist of illegal hits, misconduct, and illegal procedures. [images showing possible infractions with relevant ref signals]
- A player will be ejected from the game if she accumulates more than 7 penalties. [show player covered in chairs or lifted by 7 chairs, rocket ship ejection?]
- Except for the initial pass, which determines who the lead jammer is... [image of LJ and ref signal]
- ... a jammer earns a point every time she passes an opposing player. [image of location of skaters and point numbers tallied above their heads]
- Most leagues operate as a 501(c)(3) non-profit organization, this means the members pay to play and volunteer in their local communities.
- Teams hold fundraisers and hope to gain sponsors in order to raise money for practice space, travel funds for away games, and local charities.
- Spending 3-6 nights a week with your league tends to develop a second family!
- Through the skills learned and the strategies practiced, these women gain more confidence, strength, and perseverance! [image of pyramid of skills, strategies, teamwork, with strong woman on top]
-The best part about this sport is that it is all inclusive. There is men's roller derby, co-ed roller derby, even junior roller derby for the little ones! [images of man, woman, old, young, androgynous in derby gear and skates]
After many iterations and lots of questionable artwork, I decided to go with vectors drawings and shapes as well as a 5x7in size for the book (200dpi so plenty of zoom available on the font types for digital copies). I liked the idea of a 5x7in booklet to give out to friends or audience members at our games. It wouldn't be too cumbersome at that size, and would probably be bound with one ring in the top left corner. Using vector graphics was much easier than hand drawn pencil/ink images solely based on the reuse factor. I have attached a link to my final picture book (in pdf format, found on Google Drive): Rust_RollerDerby_PictureBook.pdf
Draft Comments:
So I decided to go ahead and make the first comic for that roller derby interface I made in the last assignment. I am attempting to explain a complex sport in a generalized, comic, way. I had also decided to take a step away from the computer, and hand draw/ink the pages, but am finding it very taxing to draw out layouts AND type AND images. I will likely create the layouts and type on the computer, and continue the images as hand drawn. I'll scan them in for the final, but right now these are photographs of some of the storyboard and mocks I currently have.
I decided to create the layouts reminiscent of comic books, this will help me chunk information together, adding alignment, repetition, and proximity to my designs. I am also trying my best to use the golden ratio on all pages. I found some information on the golden ratio that was quite interesting (used in many popular company's logo creations, on websites, and even in fashion design!), so I'm trying it out in my page designs. I am also consciously choosing images that are representative (of gear), interpretive (player cards), organizational (explaining time in the game), and transformational (skater penalties).
 |
image of cover
|
 | ||
Jam page
|
 |
| Player Card layout (shows strength and weaknesses, like video game rpgs) |
 |
| Player Card layout zoomed in on data (strengths and weaknesses) |
 |
| Page about league information |
 |
| Page on rules, icons denoting type of penalty |
My storyboard is handwritten/drawn, and I've mocked up many different ideas which basically helped me understand the scope of my story. So my final "storyboard" reads more like a script explaining scenes. The scenes may be out of order (logically), so if you are confused at a point, let me know and I'll rearrange the order of the information.
- [cover] What is Roller Derby?
- [written intro] This story is for the audience and future players- it provides an overview of modern flat-track roller derby, league structures, and the people who participate in this sport.
- Roller derby is a competitive team sport played on quad skates [image of quad skates]
- With some practice and dedication... [image of random people in line at grocery store]
- ... anyone can play! [same image of random people in line now with derby gear and skates on, or super hero capes and masks]
- The game consists of 2, 30 minute halves; each half contains plays, called jams; jams can last up to two minutes each. [organizational image representing time of game-half-jam]
- Two teams field five players in each jam. [see image above]
- These five players are made up of 3 blockers, 1 pivot, and 1 jammer
- [player card] Blocker
-blocker moves: play defense; play offense
-special move: Star Pass, pivot can become jammer.
-[player card] Jammer
-jammer moves: score points; fight through pack; skate around track
-special move: Lead Jammer, can call off the jam.
- The track is an uneven oval with out-of-bounds areas.
- The pack determines where the in-play action can occur.
- Any engagement outside of the pack is out-of-play and may result in a penalty.
- Each penalty costs a player 30 seconds in the penalty box. [image of timer and player looking at game]
- Penalties consist of illegal hits, misconduct, and illegal procedures. [images showing possible infractions with relevant ref signals]
- A player will be ejected from the game if she accumulates more than 7 penalties. [show player covered in chairs or lifted by 7 chairs, rocket ship ejection?]
- Except for the initial pass, which determines who the lead jammer is... [image of LJ and ref signal]
- ... a jammer earns a point every time she passes an opposing player. [image of location of skaters and point numbers tallied above their heads]
- Most leagues operate as a 501(c)(3) non-profit organization, this means the members pay to play and volunteer in their local communities.
- Teams hold fundraisers and hope to gain sponsors in order to raise money for practice space, travel funds for away games, and local charities.
- Spending 3-6 nights a week with your league tends to develop a second family!
- Through the skills learned and the strategies practiced, these women gain more confidence, strength, and perseverance! [image of pyramid of skills, strategies, teamwork, with strong woman on top]
-The best part about this sport is that it is all inclusive. There is men's roller derby, co-ed roller derby, even junior roller derby for the little ones! [images of man, woman, old, young, androgynous in derby gear and skates]
Sam Dowell Picture Book
I used shutterfly to create my picture book but was not super happy with it. I couldn't find a theme that fit my topic. Because of this, I purposely tried different backgrounds and objects in my slides to see which ones people thought were appropriate and which ones are not. I can't wait to hear everyone's feedback. I also need to add a couple more pictures because I ran out of zombie gear in my house.
share.shutterfly.com/action/welcome?sid=0AbtWbhw5bOG7io
Sam
share.shutterfly.com/action/welcome?sid=0AbtWbhw5bOG7io
Sam
Marcia's Picture Book
I can't post a PPT or PPS in Blogger, so I've saved it in my Google drive. You can access it via this link:
Bandon Interactive Picture Book
I still have some changes I want to make, and I know that all of the links to future pages don't work...but I think most of them do.
Looking forward to any and all comments and suggestions!
Thanks!
Bandon Interactive Picture Book
I still have some changes I want to make, and I know that all of the links to future pages don't work...but I think most of them do.
Looking forward to any and all comments and suggestions!
Thanks!
Sarah Peachey's Visual Literacy Picture Book
Below is the link to picture book I created for the final project. Please let me know what you think of the colors, fonts, and instructions. Thank you!
http://www.picaboo.com/?share=
http://www.picaboo.com/?share=
Class Photobook
Click here to view this photo book larger
Turn your favorite photos into a photo book at Shutterfly.com.
I did my photo book on Shutterfly. It is primarily based on some of my favorite family photos, as the main goal of this project was to visually depict some sort of idea. In this case, I chose to base my instruction on the abstract concept of putting happiness into a family, rather than physically displaying how to do something.
I did my photo book on Shutterfly. It is primarily based on some of my favorite family photos, as the main goal of this project was to visually depict some sort of idea. In this case, I chose to base my instruction on the abstract concept of putting happiness into a family, rather than physically displaying how to do something.
Amanda Dudley Picture Book
Hi All,
I used Picaboo to create my Picture Book for the final assignment. I would like some feedback on my background and how to make it look engaging but not too busy.
Here's the link: http://www.picaboo.com/?share=9e2754bc074943f33d806d16dca95f9f&version=444527&siteID=ViaPreview
Thanks,
Amanda Dudley
I used Picaboo to create my Picture Book for the final assignment. I would like some feedback on my background and how to make it look engaging but not too busy.
Here's the link: http://www.picaboo.com/?share=9e2754bc074943f33d806d16dca95f9f&version=444527&siteID=ViaPreview
Thanks,
Amanda Dudley
Andee's soccer website
Andee's Simply Soccer site
Here is the link to my soccer website. Many of the picture are placeholders, as the weather is still not being my friend and I need to dig through my archives of soccer pictures. I am pretty happy with the green on white,but would love any feedback. I am hoping to include a few YouTube videos and have a few placeholders around, so thoughts on this would be welcome as well.
Here is the link to my soccer website. Many of the picture are placeholders, as the weather is still not being my friend and I need to dig through my archives of soccer pictures. I am pretty happy with the green on white,but would love any feedback. I am hoping to include a few YouTube videos and have a few placeholders around, so thoughts on this would be welcome as well.
Tuesday, April 15, 2014
Katie - Website draft
I tried, I really did, with wordpress.com. But unfortunately, I couldn't get the forum plugin, bbPress, to install and time was precious so I left WordPress for my old standard, Weebly. I haven't given up on WordPress - my site is still up - but I feel much better with my site on Weebly right now. I chose a very simple template and I like the minimalist look and feel. I might one day spend the money and buy some domains for my sites too...
In the meantime, here's my link to my website on dog tricks. Feel free to look around, watch some dog trick videos and post some comments on the forum page. If you have dogs, try the Trick of the Week and let me know how it goes.
http://anatomyofadogtrick.weebly.com/
Thanks!
In the meantime, here's my link to my website on dog tricks. Feel free to look around, watch some dog trick videos and post some comments on the forum page. If you have dogs, try the Trick of the Week and let me know how it goes.
http://anatomyofadogtrick.weebly.com/
Thanks!
Sunday, April 13, 2014
E. Anderson Photo Book Draft
I made it in Shutterfly and you should be able to review it here: https://eandersonvisualliteracy.shutterfly.com/pictures/8
Wednesday, April 9, 2014
Virtual Reality and Immersive Environments
Most of all of the work we have done in this course is about immersing the viewer within the instruction. The classic example Dr. Wilcox shows are slides full of large ducks and small cats existing in space next to the content the learner is trying to absorb; those slides are quite disorienting to the viewer! Well, take this idea one step further, and you've got virtual reality (VR).
Besides the hardware/software genius of the Oculus Rift, there are some basic fundamentals needed in order to provide the learner with an immersive experience. If you are interested in creating an immersive experience (via a simulation or role-playing game), these tips will help extend belief in your learners:
Just as with our interface design projects, a virtual reality project would need to follow similar guidelines when designing for the user experience (UX):
Here is a video showing how virtual or augmented reality can become a true reality. The video is only 3 minutes long and shows many uses, but there is a specific section devoted to a Just-In-Time training tool:
How about the instructional design of such devices.
My personal impression, at least for the smart glasses and Oculus Rift, is that voice and image recognition (think QR code scanners, or Aurasma) will lead the input of these devices. The interfaces will need to be minimalist, possibly showing only one option at a time (think of the singular physical iPhone button), which means the software will have to be developed to intuitively present options based on what the user is doing from moment to moment. This is different from our current expectation in that we tend to lead our learners through modules/tools; whereas in VR/AR, the interface will need to follow the learner.
Information
The Oculus Rift (OR) is the current VR frontrunner, boasting "the ultimate interactive experience with a 90 degree field of view in a headset that fully obscures the wearer’s view". With the 3-dimensional head tracking sensors (for yaw, pitch, and roll), the headset is able to pinpoint where the user's head exists within the software environment. |
| Excerpt from OR manual |
Besides the hardware/software genius of the Oculus Rift, there are some basic fundamentals needed in order to provide the learner with an immersive experience. If you are interested in creating an immersive experience (via a simulation or role-playing game), these tips will help extend belief in your learners:
- Include heavy storytelling, with good speed of the world/storyline is crucial
- Include a complete, continuous experience; no cut scenes or black fade outs
- Develop the scale, and provide detail to help maintain the believability of the scene
- Spend a good amount of development on the movement, visuals, and reactions of the body of the player
Just as with our interface design projects, a virtual reality project would need to follow similar guidelines when designing for the user experience (UX):
- Clearly detail the requirements of the module
- Develop the user flow
- Have a strong understanding of not just how a user will progress, but why they will make specific choices
- Create alternate design mockups
- Create wireframes and presentation decks for iteration loops between the design team (including UI, UX, Art Director) and engineering teams (front and back end developers)
Here is a video showing how virtual or augmented reality can become a true reality. The video is only 3 minutes long and shows many uses, but there is a specific section devoted to a Just-In-Time training tool:
- Minute 2:10- 2:30 http://www.youtube.com/watch?v=9Wv9k_ssLcI
- “If there are needed adjustments or preventative maintenance required, the technician can be provided with step-by-step instructions on how to make the required adjustments, or if maintenance is needed and part replacement is required, the technician might be provided with 3D work instructions.” [link to article]
More Research
I've completed some research regarding other VR hardware/software offerings and have a few notes about them here. Feel free to investigate further, if you are interested:- Virtualizer (omnidirectional treadmill [ODT])
- 360-degree locomotion
- Virtuix Omni VR treadmill (omnidirectional treadmills [ODTs])
- 360-degree locomotion
- a platform that’s just 48 inches (1.2m) across.
- Vuzix M100 (smart glasses)
- hands free operation
- alliance with Wikitude (SDK for AR apps)
- a geo-based AR engine
- image recognition/tracking services
- 3D model presentation capabilities
- Leap Motion (gesture recognizing device)
- Your hands need to be directly in front of the Leap
- The range of detection is limited (must stay centered to the device)
- Review against the current iteration of the device
- Wii Remote (infrared sensor/controller)
- Motion sensing capability allows the user to interact with and manipulate items on a screen
- Gesture recognition through the use of an accelerometer and optical sensor technology
- Ted Talk on Wii Remote Hacks
Questions
Given all of this background knowledge, where do you think the Virtual and Augmented Reality fields are going? Is education a viable VR/AR environment?How about the instructional design of such devices.
Is there some overlap between website/tool interfaces and virtual interfaces?
Which design elements will likely not work in virtual reality?
How can you overcome the input shortcomings of these tools (no option for mouse clicks or touch screens)?
My personal impression, at least for the smart glasses and Oculus Rift, is that voice and image recognition (think QR code scanners, or Aurasma) will lead the input of these devices. The interfaces will need to be minimalist, possibly showing only one option at a time (think of the singular physical iPhone button), which means the software will have to be developed to intuitively present options based on what the user is doing from moment to moment. This is different from our current expectation in that we tend to lead our learners through modules/tools; whereas in VR/AR, the interface will need to follow the learner.
Monday, April 7, 2014
Andee Final Interface
This is my final interface,with changes made based on feedback. I changed the background (after fooling around for hours with dozens). Not sure if I like the plain color better than a photo and will have to think on this for the website. I did reduce the number of page formats as well. The Ball, Fields and Goalie pages will be links to documents and these are what I am thinking the docs will look like (keep consistent with web page design). They still have a pictures background. Wanted there to be slight difference to identify web page and document. May change that.
Sunday, April 6, 2014
Sam Dowell Interface Design Final
Hi Everyone,
Here is my final design for my web interface. The text for each slide is not a complete representation of what will be shown on the exact website. Since ppt slides don't scroll down I only included a snippet of info for each slide.
Here is my final design for my web interface. The text for each slide is not a complete representation of what will be shown on the exact website. Since ppt slides don't scroll down I only included a snippet of info for each slide.
Amanda Dudley Final Interface Design
Hello,
Based on my peer review feedback, I lightened the background so that my work would stand out more. I also altered my title alignment to left and added the JMU seal and color block at the top of my navigation, to add more color. Below are images of my interface design (all of the links work properly). Thanks!
Based on my peer review feedback, I lightened the background so that my work would stand out more. I also altered my title alignment to left and added the JMU seal and color block at the top of my navigation, to add more color. Below are images of my interface design (all of the links work properly). Thanks!
Thursday, April 3, 2014
Wednesday, April 2, 2014
Rust- User Interface Design [Updated with Final]
UPDATED: New text in RED; updated post with final mocks; Still hoping for final art in the future!
So I had a grand idea about a roller derby picture book and mocked all the characters, outlined parts of a story, and asked all the derby people I know what should be included in such a learning device. Well, my mind got carried away with the possibilities of the final project, so you'll have to excuse the sketchiness of these mocks. I already know I will be fixing the menu font type (it needs to fit in the stadium seating's perspective). I am unsure of what I'd like to do with the background of the site. Leave it as an image of the track/stadium, or leave it blank- some sort of color.
Anyways, the idea is to teach people about roller derby through a whimsical site/picture book illustrating the sport as a portal to a world full of super heroes.
Introduce the learner to:
So I had a grand idea about a roller derby picture book and mocked all the characters, outlined parts of a story, and asked all the derby people I know what should be included in such a learning device. Well, my mind got carried away with the possibilities of the final project, so you'll have to excuse the sketchiness of these mocks. I already know I will be fixing the menu font type (it needs to fit in the stadium seating's perspective). I am unsure of what I'd like to do with the background of the site. Leave it as an image of the track/stadium, or leave it blank- some sort of color.
Anyways, the idea is to teach people about roller derby through a whimsical site/picture book illustrating the sport as a portal to a world full of super heroes.
Site Map and Outline:
 |
| The story page will add more episodes as time goes on (hence the dashed lines/boxes), all other page growth is static. |
- The Characters of the stories
- Explaining positions on a team (plus referees), as well as basic rules
- Informing the learner about our volunteers and how to be an audience member
- The intricacies of the Derbyverse
- Arena
- Showing the details of the track, and seating area, while explaining more rules
- Outlines the Merch table and why roller derby teams are usually non-profit organizations
- The Locker Room page will highlight some of the social issues in roller derby and the views of women in sports; also highlight the community of this grass-roots sport
- Gear
- Explains the different types of gear used in the sport
- Rules
- Explains basic rules of the game
- Highlight legal/illegal hit zones
- Highlight referee signals
- The Story (picture book or comic being drawn in the same style as the site)
- This page is a landing page for a growing list of links/episodes.
- Episode 1 would feature the picture book, or a drawn comic, based on the information given in Characters and Derbyverse
- The creators of the stories, in About
- Outline the purpose of the page and stories
- How to get in touch with the creator and web admin
Mocks [updated]:
 |
| Home/Landing page; Final mock |
 |
| Original mock |
 |
| The Characters page (leads to more children pages- as seen in the site map); Final Mock |
 |
| Original mock |
 |
| This mock shows the Jammer image on-hover; if a user clicks on the Jammer image, they are taken to the Jammer page; Final Mock |
 |
| Original mock |
 |
| Jammer page with information about that position. Final mock |
 |
| Original mock |
 |
| This mock is of the Rules page, and shows how a page full of text might look. The top, white, underlined words are links that load different information into the page's content area (the grey box). Final mock |
 |
| Original mock |
 |
| Story page; Final Mock |
 |
| Creators page; Square with X in it is for a picture of the "Creators"; Final mock |
 |
| Legend/Key explaining colors, numbers, and details of pages/fonts/margins. |
Questions:
- Am I using too many types of menus?
- How might I change that? (Maybe for the text-heavy pages, like Rules above, I should place Gameplay, Hitting, and Referee Signals as children pages- similar to the Characters page.)
- Should I change anything in the menu?
- Does the linking between pages seem intuitive?
- What could make it better?
- Is there a way to display the content in a better way?
Thank you!
-Becca
Subscribe to:
Posts (Atom)