• Home
  • Contact
  • About
  • Search
  • Hypermedia and Education
 
Explaining Everything: Two Important Graphic Sets 12/30/2011
0 Comments
 
In addition to the graphics in the user interface of the application, there are two important graphic designs needed for an iOS app: the app icon and feature screens for the iTunes store.

App Icon

_You will need to create a few versions of the same icon (different sizes) that exist in different places.  The iOS Developer website has all the details, but here are some of the needs and sizes (in pixels) to consider:
  • iTunes Store icon: 512 x 512
  • App icon: 72 x 72 (iPad), 57 x 57 (iPhone/iPod Touch)
  • Spotlight search: 50 x 50
  • Settings icon: 29 x 29
Michael Flarup of PixelResort.com wrote a very helpful set of best practices for iOS application icon design. He also has provided a very cool Photoshop template for designing your own application icons.
Picture
Different sized PNG files of app icon
_If you are not a graphic designer yourself, then this is one area that it is definitely worth spending some money as it is going to be the first thing people see when they find your app initially, and every time they go to launch it. It also will become an integral part of any marketing initiatives (which I will write about later).

There was definitely a lot of communication between me and the designer whom I worked with, and we went through several ideas and iterations before having something that we felt captured the essence of Explain Everything.
Picture
Early ideas of the Explain Everything app icon

iTunes Store Feature Screens

Whenever you go to the iTunes store an look at an app, there are always several feature screens which you can scroll through to get a better idea of what the app is like. Some developers choose to use basic screenshots (home button + lock button on any iOS device). However, there is a great opportunity to highlight aspects of your application by annotating the screenshots and explaining what certain features do or purposes of the application that are better described with pictures and text rather than text or images alone.
Picture
iTunes Store page for Explain Everything with feature screen example
These images are generally 1024 x 768. Once you have a template for your feature screens, you can make new ones as your application gets updated. Just like with the app icon, these graphics can be helpful in marketing the application.
Add Comment
 
Explaining Everything: Product Specifications and Mockups 12/28/2011
0 Comments
 
One of the most important parts of the design process is translating your thoughts and ideas into something that experts in their fields (i.e. programmers and graphic designers) can understand and work with. Two important areas must be covered to get started: the product specification and the mockups.

Product Specification

This artifact can exist as a text outline, flow chart, concept map, or any other organizational structure. The idea is to detail every part of the app in this document. It not only helps the people you work with understand your vision, but it also helps you figure out potential gaps and identify needs.  This also helps you communicate to developers and graphic designers what your requirements are, and thus they can help give you a firmer idea of the costs. Dan Saffer's Designing Gestural Interfaces is a good resource for beginning designers, but I found it was helpful for thinking about every possible way an interaction might take place on a touch screen device.

I chose to do a text outline to organize the different tools in Explain Everything and outline their function, but I then spent a lot more time doing mockups of each tools individual menu.
Picture
Screenshot excerpt from draft of product specification.
The specification evolved over time once the design process began. New feature ideas emerged, and with those new bullet points and corresponding mockups.

Graphic Mockups

_For every detail in your product specification, you definitely want to have a graphic-mockup to accompany it. One thing that can be very helpful is to get familiar with the graphic elements that are standard in the Apple iOS SDK. Many menu items and selection options come standard, so those do not need to be custom made. Check out Geoff Teehan's blog for great resources for iOS Development. He provides (for a voluntary donation) a layered PSD file that you can use to create quick mockups of various popout and pop-over menus.
Picture
iPad GUI .psd file via Teehanlax.com
Using standard elements at first can be helpful for the initial phases of design when you are trying to get the functionality down. Once all of those pieces are sorted out, then you can know for sure which pieces you want to get custom graphics for. Below is an example of the Draw Tool pop-out menu for Explain Everything. On the left is the mockup which I created, and on the right is the actual current Draw Tool pop-out menu.  The Pop out frame, background, header text, 'Set' text options, and slider, are all from the standard SDK. The color palette, the thickness options, and pen tips are custom graphics.
Picture
Draw Tool mockup
Picture
Draw Tool actual
Below is an example of the home screen for Explain Everything.  All of thexe graphics had to be custom made, but at first it was important just to get the functions working, and once happy with how the buttons worked and were position, the graphic designer was able to make something great out of it.
Picture
Home screen mockup
Picture
Home screen actual
This part of the process is definitely the most time consuming, but at the same time its the most important to get right. Front-loading the effort into the details early on will save lots of headache later on.
Add Comment
 
Explaining Everything: Develop-ers/ment 12/22/2011
0 Comments
 
Finding a way to get an idea developed into an actual usable product was probably the biggest challenge in the entire process. I didn't (and still don't) really have any coding experience and my knowledge of the iOS coding language is limited to know that it is done using something called Xcode. I also did not know where to start as far as finding developers and really having a sense of what things cost.

Non-Disclosure Agreements

One of the best pieces of initial advice I received from an entrepreneurial friend was to create a non-disclosure agreement (NDA). The purpose of the NDA is to protect you and your idea when you are having discussions with potential developers. It is hard for developers to give a sense of costs without knowing the details of your plan, but it is also hard to feel safe divulging information because you don't someone else to steal your good ideas. You can do a Google search for "Sample NDA" to get a sense of the types of wording that exist.  There are also things called "mutual non-disclosure agreements" for which both parties in the conversation mutually agree not to violate any trust - this definitely allows for richer conversations about what might be possible.

Connecting with Developers

Picture
There are lots of people out there doing things with iOS programming and iOS devices. Finding the right people to work with is not easy. One of the first things I did was do searches for what might be reputable development shops and try to get a sense of what their past projects are like as well as their pricing. This can be an exhausting process, especially when you realize that you may be managing multiple discussions with dev-shops situated across the globe.

A better strategy might be to find apps that you think are well designed, but that also might have some features, functions, styles, and audiences that are in the same ball park as your ideas. You can look in the fine print on an app's iTunes store page to find information about the seller/developer.

I just came across a really well designed website called "TheyMakeApps.com".  This site may give an idea of who is out there and what the costs might be.
Picture

Multiple Development Models

There are three development models that I encountered in my discussions with developers, and as expected the model variance was directly correlated to costs.

The first model is where you simply contract the developers to write the code, but you are responsible for paying for all of the development costs, graphic costs, project management, marketing, bug fix costs, and future release costs. The good thing about this is that you retain 100% ownership of the product and process. The bad part is that this can be extremely expensive and time-consuming.  Neither are good things if you are working full time as an educator.

A second model is where you yield your idea to the developers (assuming they think it is worth the risk of investing their own time and money), and they develop, produce, and publish the app under their name, with you receiving some small percentage of any revenue once initial costs are recouped by the developers. You can still put your name on it somewhere and know that your idea is being turned into something tangible with very little risk on your part.  The bad part of this model is the loss of control and total ownership, and this might not sit well with you.

The third model I encountered was one of entering a partnership with developers, sharing the risk but also sharing the ownership of product. This hybrid model was the most appealing to me (and the one I went with for Explain Everything) By sharing the risk, both the developers and myself were mutually invested in the success of the product.  It also enabled for the app to be developed quickly.  The most important thing was outlining who would be responsible for what aspects of the production (graphics, development, marketing, project management, beta testing, etc.). 

It's inevitable that unforeseen things may arise once the process has started, but this is where maintaining good communication and an open and honest dialogue are extremely important.
Add Comment
 
Explaining Everything: Conceptualization 12/21/2011
0 Comments
 
I can identify two broad categories into which new software and hardware tools fit, especially in educational settings. The first category is tools that do things that are way out there, but someone has taken the time to develop it and it unfolds tons of new possibilities. From the past 15-20 years I would say that in this category fits things such as the iPhone, iOS, the iPad, the Wii, the XBOX Kinect, ColdFusion, Flash, Java, AOL, Facebook, Twitter, etc. The creators and designers probably had ideas about end products that may emerge from use of their tools, but the possibilities that were opened up have proven to be quite endless.

Picture
via OpenClipart.org
_The second broad category are tools that take many separate components that can be cumbersome to pull together and weaves them into a singular space, allowing people to do what they already wanted to do in a more accessible way. I see this category existing most often in education settings, where tools are used to make prior tasks more efficient, but not necessarily revolutionize the way things are done (as is the case in the first category). Things in this category include interactive white boards (i.e. SMART or Promethean Boards), web sites and e-texts with analytics and data tracking, instant response systems, content or learning management systems, etc.. Now, I realize that how these tools are used can vary from setting to setting and person to person, but that is usually a result of the beliefs and practices of the institution or the person, not a result of the tools' projected influence.

Given limited time and resources (as was my case) I think that finding a balance of the two categories is extremely important. Working full time and also being in graduate school does not allow me to run a separate company that is doing prototyping, R&D, development, marketing, and distribution on the scale that the tools mentioned in the first paragraph required to be as successful as they have been. To the same end, coming up with something that only solves one small problem or is only applicable to a limited audience is not going to be worth the time taken out of an already busy day to produce something to be proud of.
_The video above was made using Explain Everything, but when I first started thinking about the app I did not think that this was a possible use.

I think there are two things to try and achieve with any app geared for an educational setting. First, in the short term it should solve an existing problem or have some other immediately accessible entry point for users. Second, it should not be so limited in scope that the short term possibilities don't eliminate unthought of possibilities.

When thinking about Explain Everything, I personally wanted to be able to make screencasts on my iPad. But I also knew that screencasting as an educational tool had not hit any major strides at that point, despite the many amazing tools available for creating screencasts (including Jing, my personal favorite). Recently, there has been a lot more attention projected towards teachers and students creating screencasts, though much of that has been due t the rising popularity of the Khan Academy and flipped classrooms. I am still quite skeptical of the proven increased learning and understanding that comes via a 'flipped class' but I will say that if something comes out that starts to get people thinking differently about lecture-based, information delivery, and drill-based learning, then I am ok with that outcome.
Add Comment
 
Explaining Everything: Influences from the Past 12/18/2011
0 Comments
 
Before Xmas, Explain Everything will cross 10,000 downloads. This is about 9,700 more than I would have predicted when I started putting together ideas for an iPad app around a year ago. Now that I am on break for the next two weeks (and I finished a draft of Chapter 2 of my dissertation), I thought I would use the time to write all about the process I went through - from conceptualization to development to design to marketing (of you can call it that) and more. This post is purely an introduction.
Picture
I think it's important for teachers and students to be involved in the design of tools that might have a place in educational settings. That being said, I am not a programmer/developer/coder.  The only programming class I have taken is an Introduction to Java that is a requirement for my degree program.  However, I have taken the time to foster an understanding of object oriented programming which has been invaluable for my entire process, especially when communicating with developers and thinking about what might be possible based on already existing elements within a design.

I also have always believed that the best tools are usually commercially made for entertainment and consumer audiences, and creative educators then appropriate those tools for teaching and learning environments. Some of my favorite pieces of software and games growing up were not explicitly designed for school settings, but the combination of an open-ended environment and problem solving required to succeed or use the tool well were a huge part of my learning.

Explain Everything is not at all game. However, it is a helpful exercise for me to reflect on those things from the past that may have helped my interest in software and design.

King's Quest I (for PC)

Picture
via Wikipedia
I remember when we bought the 5.25 inch floppy disk program from Radio Shack and got it to run on our IBM PC jr. computer at home. King's Quest (and many of the games originally produced by Sierra) featured an open world that required exploring, thinking, finding objects, and using items to solve problems.  Most objectives in the game had multiple solutions, and the type-command based interface left things open so the user had to try different combinations of commands in order to make things happen (e.g. "open door" or "give bowl to man"). A company called AGD Interactive has produced remakes of several Sierra games which are available for free (Mac and PC) and they also sell their own commercial games.

The Legend of Zelda (for Nintendo)

Picture
via Wikipedia
I remember the original Legend of Zelda commercial on TV (Octorocks! Tektites!) but also remember I still had no idea what the game was about. I knew it came in a fancy gold cartridge, and that everyone in my 4th grade class was talking about it.  Once my brother and I got it, we soon learned it was unlike any other Nintendo game in scope and design.  There was no set order in which things had to be done (maybe with the exception of the dungeons) and the world was loaded with secret stores and goodies. I haven't played another Zelda game since the Nintendo 64 "Majora's Mask," but as I write this I am tempted to get the new one that is available for the Wii.

Hero's Quest / Quest For Glory I (for PC)

Picture
home.comcast.net/~ervind/qfgnames.html
The original Hero's Quest game has since been renamed Quest for Glory due to a lawsuit and also remade as VGA version. Even though I had a Nintendo and lots of games I liked playing (even with better graphics), I was usually more happy playing Hero's Quest, another gem from Sierra, on my IBM PS/2 computer. In this game, you chose your character type (Fighter, Magician, or Thief) and sought to complete the quests available in the world in no predetermined order.  Like King's Quest, there were many ways to solve a puzzle even within character types. There are now 5 Quest for Glory Games, and the second one was made into a free VGA download, again by AGD Interactive.

Streetfighter 2 & Mortal Kombat 2  (for Sega Genesis)

Picture
www.fightersgeneration.com
It will be a stretch to say I had any real learning from playing hours and hours of playing fighting games.  What these two particular games represent for me is a shift of things only being accessible in arcades to high quality games being accessible at home. My friends and I used to have to go to Sportsworld in Paramus, NJ and go through rolls of quarters in order to play these games.  While the arcade audio and video was always higher than their console counterparts, my friends and I still were plenty happy playing Streetfighter 2 at all hours of the night.

Picture
Streetfighter 2 via Wikipedia

Goldeneye (for Nintendo 64)

Picture
I did not get into Doom or Quake since by the time I was near the end of high school and early college I was not into computer games. However, I was aware that people at college were playing multiplayer games across the network (like Quake 2 and Worms).I did get a Nintendo 64 to keep at home (mostly to buy and play the new Mario game and The Legend of Zelda: Ocarina of Time). During the winter break of 1997 at a friend's house, I learned about how much fun multiplayer games are, especially well-designed FPS. Goldeneye was incredibly unique at the time, especially being able to support 4 players (a 2x2 split screen) playing in the same game at once. 

Counterstrike (for PC)

Picture
It should be said that I was actually not that good at the fighting and shooter games. I just really enjoyed being engaged in the environments created by the developers. Counterstrike, a multiplayer mod for the game Half-life (surprise surprise, another game by Sierra) was my first foray into team-based multiplayer interactions. Instead of being every-man for himself, you had to work with a team of others to defeat another team (defend an object, rescue hostages).  I loved the social element of this game, including the trash talk of which I was usually on the receiving end.  I still enjoy these types of games, including the Call of Duty series, but I don't have the time to dedicate to becoming really good at them.

Grand Theft Auto III (for Playstation 2)

Picture
I just realized that the latter half of games I describe might be categorized under 'violent' video games. I would venture to say that it is the accessible and familiar design and the realism that makes them so interesting. Despite the publisher's wanting to push the boundaries of what is appropriate and how games are marketed to young people, I am still most captivated by the open environments in the Grand Theft Auto games. When GTA3 came out, it was like Legend of Zelda - I had never experienced a computer-simulated environment quite like it before. The subsequent versions, including the HD GTA IV and upcoming GTA V only build upon those experiences and environments.

End of Introduction

That reflection is just a small slice of the experiences that have directly or indirectly contributed to my design and function aesthetic. Next, I will write more specifically about the conceptualization process for Explain Everything.
Add Comment
 
Take-aways from #NEIT2011 11/15/2011
0 Comments
 
One of the coolest themes that emerged from the NEIT2011 Unconference was "making."  Therwe were lots of great sessions on making programs (Scratch), making apps (GameSalad, App Inventor), making virtual scapes (MineCraft), and making physical objects (Makerbot). Below are some of my favorite parts of three of the sessions which I attended.

GameSalad

GameSalad is a free application that lets you design games and activities for mobile devices. The block-style programming can fit nicely in a progression from things like Pico Crickets and Scratch. @jsambuca and @agrill are doing really interesting things in their computer classes at Browning.
Picture

MakerBot Thing-O-Matic

Another great session led by @jsambuca was all about MakerBot. MakerBot's Thing-O-Matic is a 3D printer that creates plastic objects designed in computer programs like SketchUp. There is definitely a learning curve for setting it up, and once it is working there are a ton of variables and settings to tinker with.  However, the satisfaction of watching the gears turn and seeing a plastic toy being printed is probably worth the effort!
Picture

App Inventor

App Inventor started as a channel for developing native apps for Google Android devices. Google has stopped supporting it but now MIT is working to take over the project. Dan R. from Nightingale-Bamford showed some apps he had designed himself using the tools available in App Inventor. This program also might fit well into a continuum that goes from Pico to Scratch to GameSalad/AppInventor to traditional object oriented programming.
Picture
Add Comment
 
Flat Stanley for iPhone (Free) 08/24/2011
1 Comment
 
The Flat Stanley Project is "The international literacy and community building activity for students of all ages, teachers and families." It started as an exercise of writing a letter and sending a "Flat Stanley" cutout to a friend or family member, sometimes asking them to send it to someone else with a letter and so on. There can be a notice that says  "after this date please send back to" the student. There are many opportunities to teach writing with a purpose when engaging in a pen pal type activity, but recently teachers have begun to introduce new ways of conducting a Flat Stanley project. I have seen it done with email, on blogs, and even on a shared custom Google map.
Picture
Flat Stanley group map
I'm not sure how old the app is, but I think they must have just done a big update because I saw several people tweeting about it. There are a bunch of fun features for creating Flat Stanleys (and Stellas), taking pictures with a Stanley overlay, and sharing the pictures and text on a variety of social media platforms including Facebook and Twitter.  The app is a great example of taking something that was grounded in solid learning intentions and then integrating technology to enhance and expand the possibilities of that learning experience.
1 Comment
 
Reflecting on @LaptopInstitute #li11 07/13/2011
0 Comments
 
Picture
I recently attended the Lausanne Laptop Institute for the first time. It's a pretty big international gathering of educators in Memphis, TN. Despite the crazy heat it was a very enjoyable experience.

Four educators about whom I learned

Jeff Utecht
http://www.thethinkingstick.com/
Jeff is a talented presenter and an educator with great perspective on global and social education. He gave a great keynote address and his breakout sessions were almost like mini-keynotes. If he is presenting at a conference that you are attending I highly recommend listening to him. The point that I found most interesting was when Jeff mentioned that independent schools in the US do not take enough advantage of international schools when exploring other cultures and countries. He continued to say that there are connections waiting to be made and that they should be leveraged.

Julene Reed
http://www.julenereed.com
The interesting organizations and projects which Julene is involved in are too numerous to list. She is a great resource on environmental and sustainability issues, but is also an educator who really understands how to make learning experiences meaningful. She is also an Apple Distinguished Educator who is very keyed in to iPads in educational settings.

Lynn Mittler
http://lynnmittler.wikispaces.com/
Lynn is an educator from a school in St. Louis. All of the tools and instructional ideas she presented were grounded in current educational theory and research. I appreciate how she made the connections meaningful for her participants. There a lot of great resources and ideas on her wiki.

Elizabeth Helfant
http://helfantpd.wikispaces.com/
Elizabeth is from the same school as Lynn and is also a wealth of information and resources. A colleague of mine attended a session where she presented information about the Technology Toolkit, a framework for the tech integration at their school. Elizabeth also has lots of information about games that can be used in educational settings.

And two things about Memphis that I loved...

Picture
National Civil Rights Museum
http://www.civilrightsmuseum.org/
This is one of the best museum experiences I have ever had. You genuinely feel as if you have been transported back in time and the museum curators have done a great job of telling a story as you walk through the different displays.  The photo above was taken by me looking at the balcony where Martin Luther King, Jr. was shot. The museum is in the hotel and the room where MLK was staying has been reconstructed and preserved to look exactly as it did on that day.

Picture
Photo from www.holyturf.com
Rendevous' Charcoal Ribs
http://www.hogsfly.com/TheRestaurant.php
The other three things I am going to list here have to do with food. Rendevous' ribs are by far the most delicious pork ribs I have ever eaten. They are seasoned with a special dry rub, broiled in a charcoal oven for 2-3 hours. and then rubbed again in seasoning before being served.
Add Comment
 
Two Dissection Apps for #iPad #edtech 07/11/2011
0 Comments
 
I remember dissecting both a rat (on a 6th grade nature retreat) and a frog (in 9th grade biology). Punflay.com has two dissection apps available for the iPad which I think do a great job of recreating the physical and visual experiences of performing an animal dissection. I was actually happy that they did not include realistic sounds when using the scissors or scalpel (yech!), but now I wonder if the sounds would have contributed to the experience.

Frog Dissection ($3.99)

Picture
From pinning the specimen down to drawing the incision lines with a marker to lifting folds of skin and organs, every aspect of a frog dissection has been thoughtfully and realistically replicated in this app. The dissection is guided with text, audio, and visual prompts. I made the mistake of playing with the app right after eating lunch. If you get squeamish about these things, the realism might actually get to you!

The program has received recognition from PETA (probably for saving some frogs) and from some sustainability and "green" groups. Kudos to the developers for creating a virtual experience that has impact larger than just flashy design.

There are additional features included in the purchase such as 3D demos and guided activities and it looks like they add more with updates every now and then.

Rat Dissection $3.99

Picture
Poor rat! The interface in the Rat Dissection app is slightly different than the Frog Dissection app (I happen to prefer the Frog interface to the Rat interface).  The visual and kinesthetic experiences are very powerful and like the Frog app, it helps keep a few more rats a live.

The realism (click the iTunes store link above) is pretty solid.  Some people may complain that you are not allowed to stray from the prescribed instructions, but I think it could be detract from the goal if kids were allowed to mutilate their virtual dissection specimens (which is what usually happens in an actual science class).
Add Comment
 
Some resources from TCETC 2011 #edtech #edhat 05/23/2011
0 Comments
 
Vialogues, States with Online School Initiatives, Culturally Situated Design Tools.  This past weekend I attended (and presented at) Teachers College Educational Technology Conference. My presentation (click here for Prezi) was about a project using mobile phones to leverage opportunities for formative assessment in a math class. Below is information about a couple of interesting projects/resources/tools.

Vialogues (free)

Some folks from EdLab at Teachers College have built a really nice interface that supports asyncrhonous dialogue about videos (user uploaded or linked from YouTube).  It is a nice way to engage in commenting and idea exchanges without worrying about outside chatter that may happen on the regular comments section of YouTube. A nice feature is that you can easily attach comments to specific time codes, and during the course of playback the relevant comments become highlighted as their time stamp is crossed.

Keeping Pace with K-12 Online Learning

This group produces an annual report on US online schools and state supported online school initiatives, broken down by state. I haven't had a chance yet to read the whole report, but I do like how they make some of their infographics readily available.
Picture
Courtesy of Keeping Pace with K-12 Online Learning, 2010

Culturally Situated Design Tools

A group at Rensselaer Polytechnic Institute have been doing research on tools that they have developed to connect mathematical concepts to the cultures of particular students.  The tools themselves can be a little tricky to get used to, but I really like how each subset provides the cultural information, classroom activities, and the tool itself.
Picture
Iterative 3D Pyramid Building applet from CSDT group at RPI.
Add Comment
 
<< Previous

    Follow

    Enter your email address:

    Delivered by FeedBurner

    RSS Feed


    Categories

    All
    Art
    Collaboration
    Design
    English
    Geography
    Google Apps
    Ipad
    Iphone
    K 12
    K 12
    Language
    Literacy
    Math
    Mobile
    Multimedia
    Music
    Productivity
    Programming
    Project Based Learning
    Science
    Social Media
    Social Studies
    Web 2.0
    Web Based
    Websites


    Archives

    August 2011
    July 2011
    May 2011
    April 2011
    March 2011
    February 2011
    January 2011
    November 2010
    October 2010
    September 2010
    August 2010
    July 2010
    May 2010