So you may have noticed that things look a bit odd on my blog these days. I gutted my years old WordPress them and am starting over from scratch. Its about time I gave my own blog and website some love!

I’ll be attempting to ‘design in the browser’ with my little bits of spare time. So stay tuned and feel free to check back and view source.

This is a guest post written by @jimmynotjim

On Monday my feeds, as I’m sure yours as well, blew up with the launch of BostonGlobe.com. It’s been a much anticipated launch both within and out of the design community. I was excited to get home and check it out on a browser other than my iPhone just to see how (and to try and decipher why) they handled the content. It didn’t take long for the Negative Nancy’s to start complaining and cut into that excitement.

A few were unimpressed. With all the hoopla surrounding ‘Responsive Design’ lately the Globe fell short of their expectations. Most though complained about the subscription requirements. The number of people expecting free access was outstanding. One tweet read “The future of web design is behind a paywall, something not quite right about that…” and another “A holy screw you to The Boston Globe for paywalls” and even “I’ve always craved something between a newsletter and an AOL keyword that I can’t show my friends” from one ‘web star’.

Surprisingly, I wasn’t shocked. I myself am a child of Napster and have ‘shared’ more music, movies and software than I care to mention, but at some point I grew up. I realized that if I want to get paid for my hard work, I should be paying for someone else’s. I guess some people never grow up, but I digress. I’m not here to add more noise by complaining about the complainers, but to point out what I believe they are missing in hopes of opening their eyes.

First, this is more than just a responsive layout for a blog. A newspaper as large as the Globe has multiple layers of content, a wide spectrum of readers, and who knows how many stakeholders with their own opinion on what’s important. I think @simplebits tweet said it best, “Congratulating @beep, @scottjehl, & @filamentgroup on their groundbreaking work with 1,659,230 requirements for the new http://bostonglobe.com.”

The fact that they were able to pull this off is frankly a miracle. Did anyone else happen to sign up for a free account and explore the site? If not you really should. You can easily and intuitively access back issues, save articles for later, use swipe gestures on mobile, and connect with the writers and editors directly. I’d like to see these naysayers examples of ‘dime a dozen’ responsive sites that offer as much for as large of an audience, I can think of only a few who come close.

The second issue, about the paywall has really gotten under my skin. When Apple came out with the first iPhone and announced they had changed the game, did everyone complain about the price of admission? No, they stood in lines for hours and shelled out hundreds of dollars for that precious piece of design. Should we expect the people that spent who knows how much time and effort on this project (and all the writers and editors who will publish to it) to go unpaid? We’ve all read the quotes about the average person being more likely to get struck by lightning/eaten by a shark/in a plane crash than clicking an ad, I’m willing to bet everyone at the Globe has too.

How is a paywall any different than a subscription to Netflix, Hulu Plus, Rdio, etc? Why is it were willing to throw our cash at entertainment services (or Apps and even Apple themselves) but aren’t willing to squeeze out a few bucks (basically a large coffee) for well researched, thought out, written and edited news? I’m sure this question was asked and researched at the Globe, I doubt they spent all this effort and said, ‘eh, lets just do a paywall’. I would hope Ethan et al. would have put up a decent fight if it wasn’t.

As I stated before, this isn’t just a responsive layout, it’s a multi-layered service offering a well thought put and executed experience. A premium news service like that deserves a premium price. After all, if all we want is sound bites that barely scratch the surface, we have plenty of crappy sites from AOL, Yahoo and the other failing web giants to look to, or we can always just visit the Globes free version Boston.com (that’s right, they do offer free content).

Just so it’s clear, I’m not saying the Globe site is perfect for me or anyone in particular, but with as broad a viewership and the number of moving elements they had to work with I think they did an exemplary job. So what’s your take? Did the Globe’s design fail to meet your expectations or are you in the “it should be free” camp? Are you as happy with the results as I am? I’m curious to hear everyone’s opinion.

About @jimmynotjim

My name is James, but you can call me Jimmy (and even Jim if you like). I’m a 29 year old carpenter turned web nerd, living and working in Boston MA. In addition to design I enjoy photography, drawing, cooking, camping, hiking, and of course spending time with my loving family.

Twitter: @jimmynotjim | Web: JimmyNotJim.com

A few months ago I did something crazy: I QUIT MY JOB. I had noticed a growing trend in my attitude towards my work in general. I was more excited about what I was working on before and after the hours of 9-5. So I took a bit of a leap of faith and decided to strike out on my own.

If you follow me on twitter, I’m sure you know how things are going for me since I’ve been doing the freelance dance. This blog post is a bit of ‘status update’ that is more than 140 characters. I’ll talk a bit about running a business, organization, income, friends, sanity and the future.

(Awesome illustration of me by my friend Jimmynotjim)

Business Stuff

At my last job I was surprised by the amount of meetings and phone calls my boss had scheduled on a daily basis. It seemed as if he was always running from meeting to meeting. Well guess what?!?! This is happening to me, but I’m keeping things in check.

I am keeping in person meetings to a minimum. While they may be helpful for some clients, most times an email, phone call or skype screen sharing session with an agenda will suffice. Point here is that I always ask or set an agenda before a call.

I’m also surprised by the amount of time I spent writing estimates, tweaking contracts and attempting to get invoices paid. Not that I have had any huge problems, but this is stuff that just takes time. Probably more than you realize. This is why I’ve accounted for some ‘admin hours’ in my estimates. Just a bit of padding to cover this time.

Organization

At the core of all this business stuff is organization. I’m not a hugely organized person by nature so I have to work hard at staying organized. Emails, invoices, contracts, multiple versions of designs, coded templates, wordpress installs, version control, OH MY! Luckily I’ve found some super awesome web apps that help save my ass on a daily basis:

• CurdBee – Invoicing & Time Tracking
• Basecamp – Collaboration, Client Corralling
• Git & Github – Saving my ass, Collaboration, Version control
• Mint – Keeping track of finances
• Kodery – Saving all those wordpress code snippets I can never remember!
• Gather Content – Getting specific content from clients

Income

One of my biggest fears after making the jump was income. I had a pretty decent salary at my last job, so my goal was to try to make at least the same wages. As you all know freelancing income tends to come in waves. $2,000 here $6,000 here $500 there. This is all fine and dandy, but my expenses are regular and need to be paid. This freaked me out a bit so I was on the lookout for a steady gig.

Luckily a friend recommended that I inquire about a part time teaching job at a local school. (CDIABU). I’ve done some public speaking in the past and survived (and rather enjoyed it!) so I gave it a try!

I managed to impress someone (or convince them I was sane) and now I’m teaching a few classes on nights and weekends. (HTML & CSS, WordPress, Illustrator). This part time job (~6-10 hours a week) allows me to chill a bit about money and at least pay my rent and buy beer. This has been great for me so far! Teaching is awesome and incredibly rewarding.

Friends

One of the reasons I was able to make the jump to full-time freelance was because of my awesome designer / developer friends out there. You know who you are! There seems to be no shortage of web work out there and every web designer and developer tends to be busy. Luckily my friends are all busy and have passed on several clients and project leads to me. I can’t tell you guys how thankful I am for this. Seriously! If you are looking to make the jump to freelance I would recommend having a network of awesome friends that do what you do.

That being said I hope to return the favor or pass work along in the future to my friends. Right now I am so busy and its the best thing in the world!

Happiness and Sanity

One of the biggest things I’ve noticed since making the jump is that I am much much happier! Not that I was unhappy when I had a job, but now I’m in control of my own schedule. If I want to work from 2pm-10pm I can! If I want to get up and drink coffee and write a blog post before working – I CAN! And thats what I’m doing right now!

Freelancing has provided me the freedom to control my own schedule and control which projects I work on. I can’t emphasize how enjoyable (or sometimes scary) this is. No more working on powerpoint slides because someone ‘told me so’.

Aside from the work side of things I’ve been able to spend more time on myself. I’m one of those crazy runners – so when I get the urge to run I run! No matter what time of day it is!

The Future

So now that I’ve been on my own for a bit I’d like to plan where I see my business going. I have been working on a variety of things here and there and I’m getting a good idea of what I like best. I’ve worked on a few iPhone apps as well as with a few startups. These tend to be my favorite projects because entrepreneurs are just so damn excited about what they do! That enthusiasm tends to rub off. I love hearing people pitch their biz and try to excite others.

Besides my ‘ideal’ client, I’m planning on doing some of my own ‘non-client’ work. Here’s a few things I have in the works:

• posters / prints
• writing a small ebook
• custom wordpress themes? themeforest?

So this is my ‘state of things’ post a few months in to freelancing. I’ll do another post at the 6 month mark and hopefully I’ll be doing some of the things I mentioned and business will be good!

This weekend I gave a talk at WordCamp Boston with my friend Jake (@redlist) on customizing the WordPress admin interface for clients. If you missed the talk this post is intended to be a brief recap of what we covered.

As someone who uses WordPress on a daily basis I tend to ignore most parts of the admin interface. I know exactly where everything is and it takes me a matter of milliseconds to find most things. But lets take a step back for a second and remember who we are making websites for: the end users and our clients. As web designers and developers we spend so much time on the public facing side of a website that we sometimes forget the admin interface and most importantly the client that will hopefully be managing and updating their site.

In this talk we discussed 4 things you can do to simplify the WordPress admin and make it more usable for non-technical clients.

Our Fake Client:

For example purposes we will be making a site for a fake client. Their site requirements are pretty simple:

• Movie Review Site
• About Us Page, Contact Us Page
• Links in the sidebar

Custom Post Type

If you look at the default WordPress admin screen you notice a slew of options in the left hand side bar. Most of these options are useless to a client. Posts, Pages, comments, links, media appearance, settings, plugins OH MY! Luckily we can simplify this pretty easily based on our clients specific content.

Since our client’s site is primarily for movie reviews we will create a custom post type of ‘Movies’ which will appear as an option in the left hand sidebar. This makes it pretty clear to the end user that this is where you go to add movie reviews to your site.

Adding a custom post type is actually pretty easy with the help of the nifty Custom Post Types UI plugin. The plugin page has a helpful short screencast and overview of the plugin.

Once we add the custom post type it shows up in the left hand menu as ‘Movies’.

Custom Fields

Along with adding a custom post type we will also add some custom fields to simplify the writing experience for the client. Our clients movie reviews have 3 specific pieces of content:

• Movie Cover / Screenshot
• 1-5 star rating
• A brief review

We will be using these custom fields instead of the main WordPress WYSIWYG interface to avoid confusion on the clients part and to free them from the burden of styling and placing the content. Floating and styling elements in the write editor can be a pain for clients.

We have also found that the default custom field panel in WordPress to be confusing to non-technical users. Instead we will be using a plugin called Custom Field Template that allows us to simplify and make things easier for the end user. This will make the expierence of writing a movie review much like filling out a simple web form:

1. Upload thumbnail movie image
2. Rate movie
3. Write a brief review

Here’s what our writing screen looks like after adding a custom post type and custom fields:

Here’s what our post looks like when the custom fields are inserted into our template:

Admin Menu Editor

Now that we have simplified the option for adding a movie reviews and writing the review itself, let’s focus on cleaning up the WordPress menu system.

With the Admin Menu Editor plugin we can remove, rename, customize and assign access levels for menu items per user. For this example our client only needs access to pages, media, links, comments and movies. We will hide everything else to make things much simpler. I’ve assigned administrator only access to everything but these 5 options so when a user with the access level of contributor or author etc logs in they will only see what they need!

We will also rename a few things: change media to upload photos, Comments to manage comments and links to manage links.

Admin menu editor also has some advanced options for changing icons for the menu items as well as more granular access levels.

Custom Admin Branding

Along with simplifying the menu and customizing the content types we also need to spend a bit of time customizing the color scheme of the admin interface. These customizations can make the backend of the site feel less threatening and foreign to your client and hopefully make them feel like this is their website. The whole goal of simplifying and customizing is to encourage your client to take ownership and control of their website.

The Custom Admin Branding plugin allows you to easily customize several aspects of the WordPress admin: login screen, admin header, admin footer, and also allows custom css.

Our WordPress login screen with a custom logo:

We spent a few minutes adding logos, colors as well as digging around in the WordPress admin css. Custom admin branding also allows for custom css that will override the default WordPress css.

Since our clients site is light blue we have utilized the same color scheme in the admin. We have also added the clients logo to the login screen as well as header and footer of the site.

Fluency Admin Theme

If all else fails and you don’t have time to make a custom admin theme you can always find a pre-made theme out there and tweak the colors a bit. The Fluency Admin Theme seems to be one of the better WordPress admin themes out there. It comes prebuilt with a variety of colors schemes and allows for adding a logo to the login screen etc.

Cleaning up the dashboard

Along with simplifying the number of menu options the end user has access to we can also customize the dashboard of our WordPress site. The dashboard is the first thing a user sees after they log in, and the default screen can be pretty busy.

Selecting screen options in the top right corner allows you to turn the dashboard widgets on and off. We have turned off all of the default widgets and installed two widgets that are relevant to our imaginary client:

Google analytics dashboard widget

Dashboard twitter widget

We added these two widgets so our client can see how their posting schedule corresponds to their site traffic, as well as encouraging them to manage their social media presence.

In the upper right corner of the screen you will notice a screen options tab that allows you to customize the WordPress dashboard widgets:

The Final Product

Here’s what our WordPress admin interface looks like after all the customizations:

Hopefully this looks much less intimidating to a non-technical user vs the default admin screen.

Slides and your thoughts!

I’d love to hear about how you customize the admin interface for your clients. Leave a comment and let me know what you think!

If you were at our WordCamp Boston talk please take a second and rate how we did! I’m always looking for feedback on how I am doing when rambling in front of a group of people. If you leave feedback I’ll give you a hi-five! Use the button below:

Slides from the presentation:

Looking back on this past month of work and freelancing I’ve noticed a trend in how my work turns out. I’m noticing a relationship between the amount of time I spend sketching and scribbling in my notebook and my satisfaction with the end product. Take a minute and listen to my little audio ramble and let me know if you guys are the same way.

A quick audio post from a little while ago, but still on my mind this morning. What sort of relationship do you set up with clients before beginning a project? What sort of expectations do you establish upfront? How much time do you invest in this phase of a project?

Listen to the audioboo and then share your thoughts!

And @107designs awesome audioboo reply:

Would love to hear what you guys think!

Leave a comment and chime in!

Hey guys! Long time no post… I’ve been busy working on awesome client projects as well as crafting an identity for my new company: Rocket Mouse Design. Over the weekend I wanted to whip up a simple landing page with some simple CSS3 animation. I learned a few things along the way and wanted to share.

Not So Simple…

So I have a rocket in my logo (which is still a work in progress). I wanted my rocket to launch on my ‘launching soon’ landing page. Sounds easy right? I can picture the code in my head. I ran into some snags along the way and learned a few things.

What I wanted to do was translate the position of the rocket after a few seconds (or on hover) and make it fly off the screen. So I did something like this:

#rocket {
-webkit-transition: 1s;
}

This makes the animation take 1 second.

And then on hover make it fly off the screen. I chose to use the body element because its the whole thing!

body:hover #rocket {
-webkit-transform: translate(0,-600px);
}

Check it out in action:
http://jsbin.com/agicu4/5

Wait… Rockets Don’t Do That…

You will notice that after the hover the rocket comes back! (what kind of rocket does that?!?!?1)

I needed the animation to run its course and then stop. After a bunch of googling I gave up and tweeted about it.

Luckily I have some awesome and helpful friends on twitter that pointed me in the right direction.

After some reading and research, it looked like animation-fill-mode in conjunction with animation-iteration-count was what I needed. Here’s the most succinct explantions I’ve found:

“The animation-fill-mode property allows you to define the styles of the animated element before and/or after the animation executes. A value of backwards causes the styles in the first keyframe to be applied before the animation runs. A value of forwards causes the styles in the last keyframe to be applied after the animation runs. A value of both does both.”

From http://www.smashingmagazine.com/2011/05/17/an-introduction-to-css3-keyframe-animations/

The ‘animation-iteration-count’ property defines the number of times an animation cycle is played. The default value is one, meaning the animation will play from beginning to end once.

From http://www.w3.org/TR/css3-animations/#the-animation-iteration-count-property-

So here’s what the code looks like:

#rocket {
position:relative;
top:0px;
-webkit-transition: 1s;
-webkit-animation-fill-mode: forwards;
-webkit-animation-iteration-count: 1;
}

Check it out in action:

http://jsbin.com/omowi5

This Isn’t Working! WTF?!?!??!

Well it seems that I’m kinda dense (derp!) and didn’t realize that animation-fill-property only works with keyframes. So lets get some simple keyframes in there!

I don’t know about you, but looking at complex css animations with keyframes is kind of overwhelming. Lucky for me I really only have 2 frames in this animation. So I can use the from and to syntax, which basically created a 0% keyframe and a 100% keyframe.

#rocket {
position:relative;
top:0px;
-webkit-animation-name: rocket;
-webkit-animation-fill-mode: forwards;
-webkit-animation-iteration-count: 1;
-webkit-animation-delay:5s;
-webkit-animation-direction: normal;
-webkit-animation-duration: 2s;
}

@-webkit-keyframes rocket
{
from {top:0px;}
to {top:-600px;}
}

See it in action: http://jsbin.com/efoni5/10

Don’t Forget To Clean It Up!

And with some nifty css shorthand properties here’s the cleaned up css:

#rocket {
position:relative;
top:0px;
-webkit-animation:rocket 2s 5s 1 normal forwards;
}

@-webkit-keyframes rocket {
from {top:0px;}
to {top:-600px;}
}

I’ve always been kinda iffy about css animation – because things get complicated really fast. In this case I think the animation adds a bit of fun and context that will help make my site memorable.

Check out the landing page and subscribe if you want to know when its launched!

http://rocketmou.se

How About You?

So thanks for making it to the end of this post! I’d love to hear about how you guys are using CSS3 animation in your web design work and what snags you have run into. Chances are others out there are running into the same problems.

I tweeted out of frustration one morning about the common occurrence known as Franken-Comp Syndrome. This happens when you show a client multiple ‘finished’ mockups for a project and they combine elements from design A, design B, and design C into one design.

I know that everyone out there in design-o-land has encountered this phenomenon at some point in their careers. It’s frustrating, time consuming and makes the design process less enjoyable. So how do we put an end to this?

First, a disclaimer: Franken-Comps are not the client’s fault. Most clients don’t know what to do or say when presented with multiple options. That’s why our knowledge and direction are so important.

A flaw in our design process

I think Franken-Comps are the result of a flaw in the design process that many designers follow and many clients have come to expect. This design process looks something like this:

1. Initial contact with client, discussions about the project, scope defined, deposits paid, contracts signed.
2. Designer does visual research, sketches several design ideas. Internal critique by co-workers or peers.
3. Designer takes selected sketches to the computer, produces high fidelity mockups. Spends most of the budgeted time on one design concept and then bangs out two alternative designs concepts that are less than stellar.
4. Designer presents multiple designs to the client, and the client selects the worst design or select elements from each design to combine into a ‘Franken-Comp’.

I think the flaw in the process is investing time and energy into multiple comps. This is where (I believe) designers are shooting themselves in the foot! We have followed this process for such a long time that clients expect it.

Designers, you know you spend more time getting one polished design, and the other designs suffer. (Note: this may not apply to studios that have multiple designers working on multiple comps.)

Clients are hiring us for our design expertise and presenting several solutions appears that we can’t make up our minds.

So how do we change our design process?

Take a step back

Let’s sketch more!

Take a step back from the typical design process above, and let’s think about how it could be improved. Maybe it’s not that multiple design concepts are bad, but the time is much better spent presenting and discussing ideas in the sketching or research phase of a project.

Lately I have been including my clients in the process of sketching. We discuss multiple ideas in the beginning of the project and I explore different design directions in the sketches and show it to the client. I explain each sketch in detail and ask for specific feedback.

While this may not prevent the Franken-Comp from happening, it will ensure that it happens in an earlier stage of the design process. Sketching is much more low-fidelity, and takes up less time than producing high-fidelity design comps.

I believe that at least for me and my freelance clients, this process works much better. Clients get to see ‘behind-the-scenes’ work that goes into the design process and feel included in the early stages of the project. Sketching and getting critique and feedback also helps start the feedback cycle earlier in the project process.

I’ve also found several iterative rounds of sketching to be a huge time-saver and very fruitful for my web design projects.

More research, mood boards, less design comps

Another approach I have taken to this problem is to provide only one design comp. Take the time you would have invested in producing multiple design comps and invest it in more exploratory research time instead. This time could also be invested in the mood board process.

Walk the client through several design styles that are appropriate to their project, do some research on their target market and what sorts of design they respond to. Nail down these things and then focus on the design phase.

What do you think?

Have you you dealt with Franken-Comps? I would love to hear how you handle this situation with your clients and any tips or suggestions you have.

The Pagebreak Podcast book for March has been selected and we’ll have our noses in it all month.

The book doesn’t officially release until March 8th, but you can pre-order your copy of Thank You Economy by Gary Vaynerchuk on Amazon or get it for your Kindle and read along with us! You could also try and get your hands on the copy we will be giving away! That’s right, we’re giving one away!

Head on over to Pagebreakpodcast.com to find out how to win the book!

Drunken Stumble: Plan your pubcrawl: http://drunkenstumble.com

I had the opportunity to participate in the Boston Hack Day Challenge this weekend. The gist of the event was to get a bunch of designers, devs, geeks, etc in one place, form teams and see what they can make in less than 48 hours.

I met up with my friend @unruthless at the kick off event and we milled around until we met @bensheldon who is a drupal/php/backend guy. We were discussing our skills and what sorts of apps we could make. The subject of beer was mentioned and our ideas started *brewing*…

A little bit later the official team forming started (after a few beers and awkward attempts at socializing… hey we are geeks!!!) Thats when we happened to meet @mikemiles86 who’s name tag just happen to say ‘Will dev 4 beer’.

Mike was definitely a good fit for team Drunken Stumble!

Team ‘Drunken Stumble’

Brainstorming and getting off the ground

We’re all fans of pub crawling, which for those who don’t know, is a lovely way to spend an evening hopping from one bar to another, sampling adult beverages as we go.

So we decided to build an app to facilitate the planning of a pubcrawl by helping the user choose bars and navigating bar to bar.

With this topic in mind we sat down and got to work. Brainstorming was up first: names, functionality, target audiences etc. The iphones were whipped out and http://domai.nr was used to see if there were any cool domains for the ideas we had:

Pubcrawlr, Beer Beer Beer.me, Drunken Stumble, Drunkin Stumblin etc

The mobile web all is live and fully-functional at http://drunkenstumble.com.

After the idea and name was settled on we planned out all the steps we needed to take to get the app up and running:

• Branding
• Typography
• Colors
• Wireframing
• Visual design
• Templating
• Database setup
• API integration
• Drupal stuff etc (see Mike’s blog post about the back end details)

Our timeline/todo list

After we had the plan we decided to head home – the next 36 hours were going to be intense.

Lets get down to biznass

Saturday morning we got to work. Ben and Mike started hammering out the back end stuff (see their blogs for a possible write up of the magic under the hood of this app) and Ruthie and I got to work on the front-end elements.

Branding & Research

So this app is about pub crawling, but i wanted to give it a touch of ‘beerness’ to the design. So one of the first I did was research beer related design. Good thing our team decided to help facilitate this research by bringing in several different types of fine lagers, stouts and ales for this reason. I did some tasting as well as inspecting of the design and labels.

Beer labels tend to feature badge type design with ribbons – so I decided to take this design approach with the logo and branding.

Sketching

See some of my sketches of the design process below. Keep in mind that this needed to happen lightening fast so I skimped a bit on this part of the design process:

An early sketch from friday night when we were toying with the name ‘Pub Crawlr’. Using a beer mug to replace the ‘U’ in Pub.

Badge type sketches featuring a a pint, ideas for integrating foot steps because you walk from bar to bar. Sketches also show possible integration of city name into the logo. Another consideration was the size and format of the logo. In order to show other important elements of the app on the homescreen (search location, get started button) The logo needed to be horizontal and not very tall. I kept this in mind when sketching.

Variation of the beer mug(s) in the center of the logo. The idea with this sketch was to show the social aspect of drinking/pubcrawls.

The winning/refined sketch showing all the important elements:

Beer, stumbling, ribbons that are reminiscent of beer labels, oh and the name, yeah thats in there as well!

Refining The Logo

From these sketches I moved on to work on the logo in illustrator.

Work in progress version of the logo

Different pint glass, jagged tracks, shows ‘drunken’ progress

Idea for showing the progress of stumbling, blurry jagged letters

Possible background for the app? Trying to think of those tiny little UI details that will help brand the app.

Final version of the logo

Typography

Early on in the design process Ruthie and I were discussing typographic possibilities for the app. We knew that mobile safari supported @font-face but we weren’t sure for android phones so we decided to go with the clean and simple Droid Sans. This is a system font for the Android OS so it was a safe bet for most smart phones. I also decided to set the type in the logo in this typeface for consistency.

I was also thinking that the combo of Droid Sans/Serif could be used to make the app a bit more refined and beer label like. However text at smaller sizes on phones looks like crap to me so we opted for larger sans text. Remember – we are designing an app for drunk people. How’s that for a target market?

Color

Another consideration for the design of the app is what environment it was going to be used in. Bars tend to be dark and bar crawls tend to happen at night (most times). Ruthie pointed this out and suggested we used a darker color scheme for our app so the light from the smart phone wouldn’t be so blinding. When designing we did some ‘field testing’ of the colors. Imagine two geeks drinking beer huddled under a desk with smart phones. Yeah…

Drunken Stumble Color Scheme

Icons

In order to keep things consistent (and deal with the time crunch) I decided to use the Glyphish icon set for use in our app. I modified some of the icons and gave them the ‘Drunken stumble’ touch.

Wireframes and Layout

Wireframe/screen sketches

As I was working on finalizing the logo and working on icons Ruthie was working on the layout/wireframes/flow of the app. We wanted to keep things as simple as possible due to the fact that people will be drinking while using the app. We decided that buttons should be big, very visible and easy to tap to navigate.

Layouts for each page:

Screen 1

Screen 2

screen 3

screen 4

screen 5

A close up of the interface

As we hammered out the details of each screen Ruthie went to town coding with the help of the HTML5 boilerplate https://github.com/shichuan/mobile-html5-boilerplate and coded the templates for the site. Since everyone in the group had a smart phone we all pitched in and tested on our devices while doing more market research… (translation drinking beer!)

Market Research aka Breakfast

More ‘Market Research’

Getting Into the Guts of the App!

I can’t speak in much detail about all the other magic that went into the app. Ruthie rocked the front end html, css, media queries, and JS stuff while Ben and Mike rocked all the back end magic that involved Drupal, Simple Geo API, Google Maps & Directions API and some sprinkling of magic geek dust.

Testing on a Droid X

Mike has a blog post that explains some of the Drupal Magic behind Drunken Stumble over at his blog “Miles Per Hour’.

Hard at work!

Conclusion

Boston Hack has been one of the best weekends I’ve had so far this year. Taking a project from concept to working product with the help of an awesome team in 36 hours is intense, but really really freaking awesome and rewarding!

Video of the event

We Won!!!

Oh yeah… did I mention that we won? Drunken Stumble won ‘Best Mobile App’ as well as the ‘Audience Favorite’.

So that was my weekend in a gist. Want more? Check out the awesome photos @LaCapoise snapped of us throughout the weekend. and also check out the other groups and winners. Thanks to everyone for such an awesome weekend!

*I should note that I was not drunk the entire weekend, I just had a beer in my hand in every single photo that was taken. *