I Got a Website

I do! It's at www.gregrava.com!

iPad App Development, Phase I: Researching the Idea

I could give you some spiel about how there are no new ideas, but let's face it; you've heard it before. Even the phrase "nothing the under the sun" is terribly cliched. Coming up with new ideas is tough, but you have to try hard, be creative, and most importantly, do your research, to be as original as possible.
This all holds doubly true for apps. As I've been looking into iPad and tablet apps, I've realized that any schmuck with some basic programming skills can make an app, and while they might not all be good ones, the ideas are still out there. Here are some ideas my research turned up:

Need It/Got It

College kids, especially Freshman, find themselves unable to go shopping and get their hands on some things that they might normally want at school. At the same time, they end up with plenty of things they end up not needing or wanting. The goal of this app would be to connect the two ends together.

Need It/Got It is an app focused on setting up small-scale trades between college students, say a box of mac and cheese for some batteries. It would provide an easy space for students to post and search for things they might need and make an offer to whoever has it. There could even be a space for "want it," for longer term listing of larger items, like games or textbooks.

Now, I understand that Craigslist is a thing, but it has some real image issues and has no focus. Need It/Got It would be different in that it would be geared toward students at a particular college (and wouldn't host creepy listings. It would also use a shorter timescale; the goal would be for trades to be executed within an hour of posting.

Competitors for the app would be the aforementioned Craigslist, as well as the hard-to-track-down "swap-meet" type app Anttenna (their site has gone dead). Catering to college kids will set Need It/Got It up and apart from the competition.

Unnamed Jam App (Marmalade?)

Forming a band is tough; you have to find a group of people who can get along well enough to make and play music together. Unnamed Jam App seeks to remove that aspect. Users of this app would log in when they want to make music, and be placed into a jam session with other musicians based on preferences (users can set their genre preference, as well as how willing they are to play with other users of different genres). The users can then use the tablet to share music, lyrics, and chords to jam together from wherever they are.

The premise of this app would be anonymous, near-random groupings of musicians collaborating on a single song together. While there would be options for contacting your grouping afterwards (to share a recording, perhaps), that wouldn't be the focus.

There are tons of apps meant to help musicians jam, especially over distances. Garageband, eJamming, and Ninjam allow for musicians to connect and record over distances, but not randomly or anonymously. This app would aim to be different because it connects you with musicians you don't know, which can lead to some awesome, unexpected music.

Card Table

This app is a card game platform based around the idea of a virtual tabletop. Nearby users would be able to play games together, sharing the "tabletop" of their tablets while being able to have a hand of cards. Users would be able to create custom cards using an in-app editor, or use pictures to create cards (similarly to the Pop App).

The inspiration for this app comes from programs like OCTGN, a computer program that allows users to play custom card games  online, but with a focus on interface and mobility. It could be an excellent tool for game designers, allowing them to test custom card games (with possible options for board games?) easily and in a simple to use format.

My research brought up some copyright issues that a program similar to OCTGN ran in to. Based around the card game Magic: the Gathering, the program Cockatrice (now taken down) used loaded images of the cards and violated the company's copyright. This app could get around that by not coming preloaded with anything besides a basic set of cards, but still allowing users to take their own pictures for personal use.

Errands App Walkthrough

Well, here's the big moment. This is a walkthrough of the Errands To-do List App Redesgin I've been working on. A special thanks to inVision for creating the online prototyping tool I'm using to preview the app.

If you're interested in trying the app out yourself, you can access it on the web here, or, if you have an iPhone with Safari, you can visit and download a preview version of the app (essentially what is shown in the video, but on your phone!) using this URL: http://invis.io/M6PY132X. Comments are enabled, so feel free to leave feedback!

Drawing in SVG, or What I Did With My Spring Break

Today, or rather over the course of the past week, I learned the value of knowing some javaScript in web design. I don't know much (right now), but even the little bit I know at least gave me the confidence to fiddle around with some scripts and jQuery to try and make it work.

So what was I trying to do? Well, this: Codrops Demo. Or this: Vox media review of the Polygon site

I thought that maybe I could have my little whiteboard wanderer character be drawn into the page, and have the rest of the page fade in around him. Seemed simple. Until I fell down the rabbit hole.

The fun thing about that Codrops article is that they don't really tell you how it's all done. They tell you what the effect is, how it's used, and where you can see it, but it's more of a "look how cool this is" than a "let me show you how to do that."So, I found myself picking away though the source files, which look something like this:

Which, after some research, this makes sense to me

And that's just the HTML source, mind you. There were three JS sources and three CSS sources to deal with as well. It was a bit of a maze for me. It's not that it was confusing, I understand the way that JS works, but there was just a lot for me to process and untangle. After I picked around through it for a bit, I decided to see if someone else had already. So I poked around the internet and found this article:
Jake Archibald Animate Line Drawing
Which was exactly what I was looking for. It was all about using CSS styles and JS to draw SVGs, specifically how. Essentially, you create a dashed line along the path of your drawing, with the spaces between the dashes as big as the dash itself. Then, you just shrink the gap, giving the illusion of the line being drawn.

Seeking further clarification, I found an article by the same author, further explaining the technique:  24 Ways animating vectors. This article was a little more recent, and easier for me to understand. After I worked my way through the whole article and thought I had a grasp of the concept, I prepared to buckle down for some JS coding. I would need to open up my SVG and convert it to line points, then plug those points into the html. Using a javaScript function, I would tell those lines to "draw" by adjusting their stroke offset (using a 'for' loop), and then tweak it till it looked nice.

And that's when I noticed a link to this little gem at the top of the comments section for the LazyLine Paitner Method. Now, generally I don't like to associate myself with something labeled "Lazy," but this was a prebuilt JS function that did everything I was trying to do.

So, I downloaded the demo file and began to pick that apart. It didn't take too long to get my little shape being drawn up in HTML, though it did take a good amount of tweaking to get it right (I'll post a tutorial on it later, specifically one geared toward people with little JS experience). Here's what I ended up with:

http://mywebspace.quinnipiac.edu/gtrava/gregRava%20Site/index.html.

Until next time!

Awesome Man and the Minimal Interface!

Near the end of my sophomore year of college, I was part of a three-man team working on a game called "Awesome Dude and the Maze of Doom." It was a short game, only one level long, for a game design course meant to teach us how to program for Flash Actionscript 3.0. I drew the short straw and became our programmer (the group consisted of two graphic designers and a business professor; none of us were, at the time, equipped to be programmers), and quickly began to teach myself Actionscript.  Of course, the program and language is going the way of the dodo, but that doesn't mean everything I learned is obsolete.

One of the enduring lessons I learned as part of the project was just how little information you can get away with giving a user. You see, we were faced with dilemma of teaching our player how to play a game that they'd only be playing for a few minutes at most (the "speed run" of the game clocked in at 0:52:23, a record I set, thank you very much). If the tutorial took too long, it would seem kind of silly in regard to the rest of the game; if the tutorial was too short, players might end up unsure of what to do. So, the three of us brainstormed and brainstormed, and did our research, until we worked out a short tutorial sequence to show the player everything Awesome Dude could do in around 10 seconds.

But of course, nothing ever goes as planned. I couldn't get the tutorial video to flow into the game properly, and our production schedule didn't leave much time to troubleshoot in that direction. So, we went back to the drawing board. We needed a way to teach players in-game, unobtrusively. What we came up with was not only a more interactive, but overall much more effective, method.

We used the up-to-that-point blank space behind the character, the "walls" of the maze, to show the players the controls as they needed to use them.

I'm not claiming this is an innovation; many flash games online use the same technology. It's just something we hadn't considered, since we had a lot to teach the players. We tried to keep everything as simple as possible; everything was depicted visually so players didn't need to process text. We tested extensively to see just how little we could get away with.

So, how does this relate to UI/UX? Well, the same principles apply. Ever since Awesome Dude, I've been of the philosophy that you should keep the "tutorial" aspect of your UI to a minimum; everything should be explanatory and intuitive. Icons should make sense. Pages should flow naturally. A good number of people might disagree with me, but I think that users are intelligent; if things make sense, they can figure it out with minimal effort. Sure, it takes a lot of testing and trial on the part of the UI designer, but it results in a better UI experience in the end.

Building the Site

I'm going to cut right to the wireframes, since my post here covered a good portion of the conceptual side of this. I have three directions I'm working with: fat sidebar, perspective menu, and drawn animation.

Each of them has their own pros and cons. The one I'm most concerned with is the perspective menu, which is also one of my favorite effects. The whiteboard wanderer icon is the link that pulls up the menu, but I don't want to have to hook him up with a neon light halo to convey that. A mouse-over animation might be able to get the job done, but I'm not sure. I'm going to go ahead and develop it, and we'll see where it goes with some user testing.

I also made some basic mockups of each:

fat sidebar - gallery

perspective menu

Website Effects

I like cool websites. I don't find them too much on my own (most of my web browsing consists of reading articles, which tend to exist on pretty straightforward sites), but when I do, I make note of them. So it was that bookmark folder I looked in as I began to plot out my portfolio site.

After some searching and a little help from a friend, I came across Codrops. The rest of my day was completely absorbed. I have a tendency to go on tutorial binges, and this was one of my most productive. I don't want to build my entire portfolio site using material from Codrops, but it might happen.

So here's what I found.

First up is the first tutorial on the site: a stack gallery. It's a simple, but fun, transition for a gallery that takes the images and shuffles them around. Maybe it just appeals to the part of me that likes playing Magic, but I think it' an interesting effect to fancy up a part of the site that would otherwise just have a boring old transition. I'm not sure that this is necessarily what I need for my site; it doesn't necessarily fit in with the whiteboard theme.

The demo of the effect

Next is the so called "YouTube menu"effect. This is a tidy way to condense categories, and it's something I might utilize on my gallery tab (clicking gallery would cause the different categories to expand out in this way). When it's condensed, the bar looks very clean, and as long as you have the room for the expansion, it can transition nicely.

The codrops guy really likes green

Then there's my personal favorite, the SVG Drawing animation. The first thing I thought of when I saw this was having my little whiteboard wanderer logo be drawn in. This is by far the most confusing tutorial for me so far; it uses an SVG, CSS, and some javascript. All things I'm fairly comfortable with, but things that are going to require a lot of work on my end. I'm a little concerned about browser limitations when it comes to svg and css transitions, but that's a bridge I'll have to cross soon.

The animation effect mid-transition

The last effect I'm considering is the Off-canvas navigation. It's an odd effect, but I can see it playing into the whiteboard aspect. I'm just concerned that having my navigation not always on screen will have a negative effect on the website itself. I've gotten a mixed bag of answers from people about if they like it or not; as long as I make the navigation pull-up an obvious thing, I think it can work. I've tried to reflect this in my wireframe sketches.

the scale back and rotate object. it could give a cool effect as if it were a whiteboard!

Either way, I've got my work cut out in getting these effects to apply to an actual site! Stay tuned!

Deliberate Practice

I don't do nearly enough research outside of projects. Some of my design friends will spend hours looking through Behance, deviantArt, or Dribbble, percolating ideas and admiring work, but that's not me. Don't get me wrong, when it comes to doing projects, both personal and professional, I'm all over the place researching, looking at ideas and inspiration. But in my downtime, I find it difficult to sift through it all.

Of course, if I do want to get better at design research, I need to practice.

And as always, the things I read manage to shame me. One of the sections in the 99U book Maximize Your Potential, is all about building your expertise. One article in particular, Developing Mastery through Deliberate Practice, scolded me fairly effectively. "Practice undeniably lies at the heart of mastery," it reads. This isn't anything new to me; as a guitar player for six years now, I've seen the value of practice and the improvement it yields. Heck, if you want to see the value of deliberate practice, look at the harmonica, which supposedly takes only ten hours to 'master.' I've put the time in on that, and it shows.  I want to be a designer more so than a guitarist or a harmonica player, so I need to put in the work to prove it.

So, if I want to hone my creative mind, I have to start taking the deliberate practice to my design. One thing I've done toward that end is something I've taken to calling "tutorial binges." These are like the productive side of a Netflix binge, when I come across a neat tutorial on a site, I do it. Then, I hop to another one on that site and do it, and so on and so on, etc., etc. I've spent hours on sites like Tuts+ or the tutorial section of Creative Bloq, trying out little techniques and styles I can use in my projects. It's an ongoing process, and I won't be able to tell how much it helps until years down the line when I can hopefully look back and see improvement.

But rather than a corny line, I'll leave you with my favorite gif

(courtesy of colleghumor.com)

Paper Prototyping with Friends

Getting hands on with the Errands redesign! A prospective user does a guided run-through of the app on my paper prototypes.

A special thanks to Reid for being the unsuspecting user, and to Carl for filming on his phone, that way the whole thing didn't look like it was coated in vaseline.

Hands On Prototyping

I love it when design becomes hands-on. Computer are great and all, but there's just something so satisfying about using your hands! (This is part of the reason why I'm so in love with whiteboards , but that's another rant for another day). So it makes sense that the paper prototyping aspect of UI design really appeals to me. It's a chance to get the mockups off the computer and into the hands of users.

I've found that when you paper prototype UI, you need to have good mockups. One of my favorite tools for this (back from when I was a wee lad designing UI for business student's apps last year) is NinjaMock. This has really everything you could ask for in an UI mockup app: it's simple to use, has all of the system pre-made UI elements, allows you to import your own images, and can export as a printable pdf. And most importantly, it's free (at least for three projects). Okay, that's enough of a plug for that.

So, I've printed out my mockups at fairly the right size (one of the downsides of the program is that when you go to print, it makes them nearly 8.5x11) and trimmed them properly (it's amazing how your trimming skills improve with time after you've cut out 36 screens of an app). I'm currently working on getting some users to handle the screens. I'll post some videos with results in a bit!