Coded Collegiate App Mock-up

In my Multimedia Design Class, we finished off the semester by designing an interactive mock-up of an app, with two functioning buttons, for Wake Technical Community College:

Wake Technical Community College App

I had a lot of fun with this one. I like to get down into the code and play with the bits that I know how to play with. Luckily Action Script is fairly close to other coding syntax’s I’ve used before (VB.net, JS, TI-84) and someone on the net was saying how remarkably similar to PHP it is, which I am not as familiar with as I would like to be.

Any who, the navigation coding was pretty basic: “gotoAndStop(*frame number*);”
So I tested Action Script a bit to see if I could call a function from another frame, using the Home button’s mouse click event handler, which had been previously defined. Low and  behold it could be done! Having successfully reinvented the wheel (as I’m sure this was documented well before the release of AS1.0) I moved on to play with the map code.

We had been give a script for using StageWebView to create a ViewPort that would open up the Google Maps Mobile site on the stage. I copy&pasted it in my map frame AS layer and when I tested it, it worked! So I was happy that I got to play with changing the size and positioning of the view port. I figured out the sizing right away, but brain farted on adjusting the positioning. As I started to google for the AS Rectangle documentation I had a eureka moment and realized I was forgetting the two similarly numbered parameters that were obviously X and Y coordinates. Got to love it when you solve your own problems.

The unfortunate part came when, after thinking all my ducks were in a row, and having waited until the final day or two to export and test the SWF movie outside of Adobe Flash CS5.5 test player. Everything would work flawlessly in AFCS5.5, but when I published it, the player decided that no, I had not typed in any “stop();”s or “gotoAndStop();”s in the code, which simply wasn’t true. The little terminal showed me that my beloved StageWebView was the culprit. Essentially, the tester was able to call the StageWebView library, but the final published result was not able to (AIR 2.6 defaults vs. Flash9 defaults). I thought it may have had something to do with not having an Developer Certificate, so I found one and tested that theory, and having successfully created a WTCC_App.ipa (iPhone Application File) I proved that wrong, which took too long. I searched and found the solution to be a bit too complicated for me to implement with the deadline approaching. It involved using the projects tab (which I don’t have any experience with, seems browser-esque from the little i fooled with it) to force the SWF to call the appropriate player with the appropriate libraries. I had tried the version of this that involved copying and pasting code which involved file paths, since it seemed quick and easy. Unfortunately, it only solved half the problems that StageWebView had created, so to have something that was “average” I screen capped and ‘shopped together and static maps page of Wake Tech main campus.

All in all, I feel very positive about it and had an excellent learning experience with coding apps and app mock-ups.

I *PRETEND* Work For The Raspberry Pi Foundation!

I’ve finished the Web Page Designs! For the page designs, I decided to pretend that I’m working for the Web Design Department of the Raspberry Pi Foundation. Coincidentally, after I had already decided they needed a web design, they had apparently agreed with me. They rolled out an April Fool’s Day Style sheet make over before rolling out the actual new design on the 2nd.

Thought’s on their new design:

Their new design is a well placed attempt to attack some of their design concerns, and problems that certainly face the site. The biggest issue is making navigating an expanse of information more easy and less terrifying to the less technology experienced (those who aren’t already building their own circuits and robots and programs, children). They present a lot of info, which can confuse users.

Their new design has six blocks for navigating, only one of which expands into a sub-menu, which feels crazy unbalanced, especially after you click on some of them and find your self on a landing page with what amounts to a be big sub-menu in the content area below some explanation. I can appreciate offering the explanation for less experienced users. They did get rid of having both a “Help” and “FAQ” link in the navigation, which was something that bothered me about their earlier design.

The colors feel less “Girly Engineer” and more “Elementary Educational”, which is more on point with the identity presented on their about page. This color/vibe change is apparent in the 6 different colored navigation blocks in the navigation bar at the top, and the anti-color versions of the logo which make it look less girly (oddly this is something the tech sector seems to have many issues with as of late, which is part of why I tried to lean into the pink a bit on this one). They also stepped up the homepage with a “Featured Content” slide show, which will certainly help get more kids interested in computer science and engineering.

Overall, good job, but I think some improvement can still be made. They’ve got a lot of information which they’ve already sectioned pretty well, but with as much as they have, a secondary navigation for less important information to the “new user” (a child or a newb) could be implemented quite effectively, and as shown still makes navigation easy. Satisfying both the New  and the Super User.

My Raspberry Pi Home Page Design: Home of the Blog

I figured the biggest navigation items involved getting Users set up and computing at the very least, and getting potential Pi owners to Buy A Pi. Access to the community, from years of living in the hacker culture, will ultimately be of much more use to many users than the typical help screen. And Downloads are absolutely necessary.

They had been using a side navigation for recent blog posts, which I thought would allow for some lovely repetitively themed sub-navigation bars for taking the user to specific parts of pages/articles/sub-sections of sections of the site.

My Raspberry Pi FAQs Page Design

As mentioned earlier, I pretended to be in their webdesign department. This means I wanted to keep their already produced content for the most part and try to make their colors and design hit the target. They want it friendly and targeted at kids, so bright colors were a must. Since girls aren’t often targeted for technology and engineering “toys” like this, I decided to lean into the pink from the original site design so it would feel more inviting to the New Female User. I also wanted to keep from alienating the hordes of male users by balancing the pink with some boyish green and some neutral brown and white.  I did my best to avoid an Ice Cream sort of feel.

My Raspberry Pi Quick Start Page Design

I decided to use a fairly organic feeling but geometrically influenced font for the logo type/home link. The copy type is done in Helvetica Neue, and the titles are done in Gautami.

Final App Design

The In Situation and Menu screens for the Spectrum Cypher

The Spectrum Cypher was a success when I presented it, people could see this jumping off. The In Situ screen was easy to build, thanks to a template that rendered it for me once I edited the icon Smart-Object. The menu was a vision that just came to me, which I know can be a bit of a no-no in design. The logo was really the hard part; I wanted to do something cool and never seen before as far as the way an S and a C inter-relate in space. I also liked the idea of a lock and a key, which helped get the tight fitting look down.

Encode screens for the Spectrum Cypher

Here we see the Encode/Encoded screens, not much change from last time, now set in the iPhone 5.

The Decode Screen for the Spectrum Cypher

Flushing out the Decode screens was fairly simple, just a backwards version of the encode. Still it was important to remember what the user’s purpose and intention would be on each screen.

The Options and web Integration screens for the Spectrum Cypher

I like the Integration screen. It shows how on a browser or in your image collection you can open the image into the app and immediately decrypt it. You can also do the same thing for notes from the notes app. The Options screen I feel needs to be flushed out a bit better, but as far as proof of concept is concerned I have, by audience consensus, achieved the goal.

As stated the class really loved it, but the presentation showed me some holes in the visual presentation. A bit more description could be useful, and perhaps some numbers to indicate order of operations and what not. Also, that I need to not speak so fast about tech stuff, and potentially use less jargon.

App Design In Medias Res

At this point I have some of the screens for the Spectrum Cypher complete. In particular, you will notice the encode and encoded screens; I had to take the sample message from the first pic and hand encrypt it into the you will see in the third pic. If you don’t remember, the app takes a message and encodes it as differently hex valued RGB colors, or as pixels of color. each pixel is effectively 3 separate letters.

Design for the Spectrum Cypher App Encode screen.

Trying to design flat has been a bit of a challenge. There was a lot of it that flowed with my instinct, but there were definitely times where it seemed completely counter intuitive. Over all I am pleased with the simple design I have started making.

The Spectrum Cypher Menu

Here we can see the menu shining. The whole app should favor a retro Terminal/Command line feel that ought to blend well with the flat stylings. Note the electronic road sign font as well as Inconsolada, a favorite amongst Terminal/Command line users. The Terminal/Command line and programming/scripting would be what one would be using if they more seriously ventured into encryption, which is why this app is supposed to be more of a toy for the encryption newbie, a learning tool for kids to learn about encryption, and a chance for teenagers with overbearing parents to communicate secretively.

The Spectrum Cypher after encrypting a message.

And here is the encoded sample message from the first picture, now stored as an image.

The Spectrum Cypher

Our latest project in Graphic Design IV is to design our own iPhone App. While other students are making Sandwich, Party-Planning, and Wildlife Saving Research apps, I have chosen to create a fun little cypher, the would be Decoder Ring of the 2010s.

How it works: The user may enter text or select a note file to encode. The app then cuts the message into as equal as possible thirds; beginning, middle, and end, though you can think of them as Red, Green, and Blue. Each character and space is encoded as a value between 0 and 255, three characters (one from each third) make up a pixel in an image that will be generated and can then be messaged, emailed, and shared however the user chooses.

Originally, I had wanted to code this, about a year ago. But now I am thankful to get to design a mobile GUI for it. Currently I really only have the color scheme and logo built.

Spectrum Cypher iPhone App Icon

Trying to run with the flat design style, but it is proving harder to muster that I thought. Instincts often run in opposite directions of it, besides the minimalism. Wish me luck.

16 Week Project Blues

Or: Reflections On Time Management

It is at this point in the semester that I must admit regretfully that I haven’t been planning out time to do some of the 5 projects that go into the sixteen week project and haven’t got much more that light sketching and the other projects to show for it.

With about 5 weeks left in the semester, this leaves me needing to complete one a week each week until the semester is over. First up is the website re-design, which now has most of its theme constructed, so mostly I just need to construct the rest of the page for 3 pages: Home, Contact, and FAQs/Quickstart.

Since my time management skills have not been the best, I’ve decided to commit to “at least 30 minutes of work” on the 16 week project every day, if not more time. As long as I plan for it, I will do at least 30 minutes, and usually once I get going that long I want to keep going or “reach a good stopping point.” I am trying to remember where I read about this trick, commit to at least a bit. I’ve used it before to get exercise done, so I think it will work out well here.

A Nice Slice of Pie!

I probably should have posted about this sooner, but for my 16-week-long “A little bit is more than enough” project I have settled on using the Raspberry Pi, a really small and nifty computer, to show that in today’s world of technology “A little bit is more than enough”

An excellent size comparison of the version II Raspberry Pi.

Originally intended to be of great use to educate young minds about computers, the Pi has ethernet out, 2 USB ports (though most people add a USB Hub), HDMI out, RCA video out, an audio jack, GPIO (General Purpose Input Output, which is excellent for electronics engineering), uses an SD card as a solid state replacement for a hard drive disk, and on top of that it is powered completely through a micro USB plug.

Just Add Peripherals! Most of the money seems to be won by selling “starter kits”. Sometimes they include the Pi, but are largely making money from packaging and selling peripherals. Mostly used for low-budget computers/super computer setups, programming, Electronics engineering, art projects and mostly by techy kids, hobbyists, nerds, geeks; you know, the people I live for!

Pi users get creative with their cases and peripherals.

The Hobbyists have really taken over this piece of technology that was originally meant to teach kids. Heck I wish we had this when I was in elementary school! My plan is for most of the project to center around ways to get kids and schools amped up for their own slice of the pie!

We also have a five-page paper to write explaining in brutally simple terms everything about our subject (Pi). I am going to attempt to use this space to outline some of the things I may wish to cover while writing this paper:

• What is a Raspberry Pi and why do people want to buy it? This will include component description, popular uses, differences between version one and two, LINUX and operating systems, and perhaps more
• To Whom is the Raspberry Pi sold? Demographics. Schools, hobbyists, Their typical interests, why certain groups might buy them (schools = low-cost computers, hobbyists = fun, everybody = learning and convenience), Newbies vs Veteran super users, etc.
• How is the Raspberry Pi sold? Including individually, wholesale, different bundle packaging, NOOBS SD cards, SWAG (printed cases, shirts, etc),
• Original intention of creators vs. how hobbyists have taken over, slow implementation in schools/sitting on shelves gathering dust, community ideas on how to fix this education problem
• Is anyone making money off their Pi creations? Pi in Swedish subway ad, other innovations/uses, need to google more

As you can see, this paper will practically write itself given a day or two of dedicated work, some tea, and motivation (that thing I keep losing and finding and losing and finding).

Until next time, know that Raspberry Pi is on my wish list!
*hint, hint, wink, wink, nudge, nudge*

Another Psychonauts Project!?

As you will undoubtedly remember, the last time I did a Psychonauts project was a pro-school-hearted poster for a contest, which admittedly was not the most creative or successful venture  on my front.

This  year the chance for redemption has come. Having been assigned a Video Game Launch Set project, where-in we have to design at least a five piece package to come with the release or re-release of our chosen games.

Picking a game was rather challenging. Top contenders included:

• Street Fighter
• Tomba
• DigDug
• and dozens more!

But I settled on Psychonauts as this would let me do a good bit with the time and money I will be putting into it. 1) I will have some pieces for a Halloween/con costume that will totally kick butt! 2) My brother’s birthday is coming up, and he was the one in our house who bought the game that melted our minds. 3) REDEMPTION!

It is still pretty conceptual at this stage, though I have solidified a flight pilot’s cap and goggles to get Razputin’s headgear going. Other ideas for items to hide inside include camp badge buttons, soundtrack, Mind door key chain, capNgogglez, candy figments, hacky sack, Bottle of “milk”, etc.

#cantwaittoworkwonders

Blank Book Final Digitals

I did it! I made it! I got through this one!

Who’s Got The VOODOO? You Do!

I’ll say that I wasn’t 100% on my photshoppe skills going into this, but I’m feeling a whole lot better now. The class presentation could have gone better, but when you’re running on no sleep that can be rather trying.

One snafu was the white lines that PDF readers choose to throw in to separate objects from a distance. Everyone got see the white lines and the quality of my work was called into question.

I had to go back and double-check to make sure I didn’t do a horrendous job (at this point my attention span and memory had been reduced to equal that of a gold-fish). Sure enough, I did an excellent job and received a nice grade.

For another grade I have to print the book from lulu.com, which thankfully is just a completion grade. Stay tuned for pictures of the printed book in the next blank book update.