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!

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. *

You can listen to the show over at Pagebreakpodcast.com, but we’d love for everyone to subscribe to the show in iTunes! Don’t forget to leave feedback and thanks for listening!

We also launched a new sort of ‘mini’ version of Pagbreak called ‘snippets’. Snippets are 5-10 minute discussions on awesome blog posts we find between recording the monthly podcast. So if you’ve read an awesome blog post send it our way by leaving a comment or sending us an email at listen [at] pagebreakpodcast dot com.

If you want to join us for the next podcast and read along our book this month is Don’t Make Me Think by Steve Krug. So buy the book and tune in to the next podcast!

Remember back when you were in design school and it seemed like all you did was sketch comps for your design projects? (Ok maybe that was just me having to do hundreds and hundreds of typographic sketches per the assignment of an awesome professor @almahoffmann)

How is it that I’ve fallen away from this practice of constantly sketching out my ideas? I blame my computer! Or something like that…

Oh yeah, I remember. Life gets busy. You have real project deadlines to work with and sometimes the sketching phase can get skipped. Luckily the place that I work encourages and includes sketching as part of our design process. I’ll admit that getting used to sketching again was hard for me. I was so used to immediately jumping on the computer and hashing out my ideas.

I just wanted to post something and remind you guys to remember to sketch – even if its nonsense sketched during a client phone call (which is what the ‘tease me’ button sketch is from). Sometimes our ideas need to be fleshed out in analog before we digitize them.

Is sketching part of your design process?

I’d love to hear your thoughts on what role sketching plays in your design process. Feel free to comment below and share your thoughts and sketches!

Typography is the art and technique of arranging type, type design, and modifying type glyphs. Type glyphs are created and modified using a variety of illustration techniques. The arrangement of type involves the selection of typefaces, point size, line length, leading (line spacing), adjusting the spaces between groups of letters (tracking) and adjusting the space between pairs of letters (kerning)

Point ^#1
Typography is difficult

I’ll be the first person to admit that I find typographic design incredibly difficult. Its all about details – small teensy tinsy details. Kerning, tracking, leading, color, visual weight and lots more. The details can be overwhelming. But when you get them right its awesome… just really freaking awesome.

Good typography is difficult – and thats why its worth spending the time and effort.

Point ^#2
Selecting an awesome typeface is the easy part

Typography is more than selecting a typeface. With the recent explosion of emphasis on typography in web design lots of designers out there are selecting awesome typefaces and slapping them on their design. (Myself included… this site uses something I picked from typekit a long time ago)

Selecting the typeface is the easy part. It’s the first 5% of typography. Its just the starting point. I’ve noticed that designers are heading over to typekit or whatever web font embedding service/technology they are using and slapping a fancy typeface on their website. Whammo! Look awesome typography right? WRONG! This is just the beginning. I think people are forgetting this.

Point ^#3
Let’s get back to the basics

Instead of embedding XYZ cool font that everyone and their hamster is using why dont we take a step back and focus on the basics of typography. Go read this 20 min tutorial on typography basics. I just did and its a good refresher!

Now go check out the Seed Conference site. Go do it… NOW! The whole freaking thing is set in times – TIMES FREAKING NEW ROMAN. It looks so pretty I want to lick my screen. Seriously! The attention to detail in the typography on that site is amazing. It shows that typography is so much more than just selecting a typeface. Look at the spacing, the different weights, and the color.

I’d like to see more focus on the basics and less focus on the ‘cool’ flashy stuff.

Point ^#4
Stop bitching and go make something awesome

So I limited myself to write this post in 15 mins or less. Now I’m going to end this quick post and go make something that is typographically awesome. Thanks for reading. < :3)~

Feel free to add to the discussion in the comments

]]> http://www.nikibrown.com/designoblog/2010/09/30/a-brief-rant-on-typography/feed/ 5 http://www.nikibrown.com/designoblog/2010/09/15/unmatched-style-niki-brown-interview/ http://www.nikibrown.com/designoblog/2010/09/15/unmatched-style-niki-brown-interview/#comments Wed, 15 Sep 2010 23:33:23 +0000 Niki Brown http://www.nikibrown.com/designoblog/?p=4387

Julia from Unmatched Style caught up with me after the Front-end Design conference managed to get me to ramble on video for a few minutes. I gave a basic recap of my talk (Design is in the Details) as well as chat a bit about what is currently exciting me in the web world. Watch the video and head on over to their site at unmatchedstyle.com. Thanks for taking the time to interviewing me!

]]> http://www.nikibrown.com/designoblog/2010/09/15/unmatched-style-niki-brown-interview/feed/ 2 http://www.nikibrown.com/designoblog/2010/09/13/listen-to-the-pagebreak-podcast/ http://www.nikibrown.com/designoblog/2010/09/13/listen-to-the-pagebreak-podcast/#comments Tue, 14 Sep 2010 01:23:33 +0000 Niki Brown http://www.nikibrown.com/designoblog/?p=4378

So the wait is finally over, Liz and I have been scheming about this for a long time now and then over the last couple weeks pulled it all off…

PageBreak is a design, business and marketing-themed book club and podcast, started by Liz Andrade and Niki Brown. The main goal of the club is to build a strong online community of designers, developers, freelancer (like ourselves) and to discuss and enjoy books about the stuff we love to do!

We’re starting out with the plan to pick a new book and record a show at the end of each month, so if you have a suggestion we’d love to hear them! You can subscribe to the show via iTunes or stream the show at pagebreakpodcast.com

Book #1? Rework by 37Signals Jason Fried and David Heinemeier Hansson. Make it through the show (or download it and skip to the end) to find out what we’ll be reading for September, maybe you’d like to read along? If you’ve read Rework and you want to discuss it with me and Niki or other listeners of the show – head over to the GoodReads PageBreak group!

]]> http://www.nikibrown.com/designoblog/2010/09/13/listen-to-the-pagebreak-podcast/feed/ 0 http://www.nikibrown.com/designoblog/2010/09/10/design-feedback/ http://www.nikibrown.com/designoblog/2010/09/10/design-feedback/#comments Fri, 10 Sep 2010 22:13:55 +0000 Niki Brown http://www.nikibrown.com/designoblog/?p=4369

Just a quick post about design feedback since its been on my mind recent. I’m wondering where you get feedback on your designs? I know there are tons of sites out there that offer this service, but I’m interested in learning about the ones that YOU, dearest blog reader, have used and found valuable!

In Person Feedback

I’m lucky enough to have a workplace that values design feedback. Often times in a project someone will be stuck and we will gather everyone (all 6 or 7 of us) around and give feedback or throw out ideas. Our design crew ranges from interns, co-ops, full time designers, an office manager and art director, so a smattering of ideas and opinions come from this type of critique. I find this to be the most helpful since everyone at work is clued in on the project and its goals.

Feedback From The Intertubewebz

When I do freelance work at night I often tweet about my designs asking for feedback which I’ve found to be very helpful as well. (Thanks to my twitter friends, you know who you are!)

I’ve also found sites like Dribbble or Forrst. Although I have to say that these sites aren’t always geared towards feedback.

I have also been using a site called Concept Feedback for helping critique others work. I’m an expert reviewer at the site (meaning I get kicked a few bucks for my awesome design wisdom & feedback) but I’ve noticed that the community is very large, helpful and prompt on providing actionable design feedback.

Where Do You Go For Design Feedback?

So I’m wondering where you go for design feedback: Online? Offline? I’d love to round up a bunch of resources and share them with other designers. Leave a comment and let me know!

]]> http://www.nikibrown.com/designoblog/2010/09/10/design-feedback/feed/ 4 http://www.nikibrown.com/designoblog/2010/08/23/sxsw-panel-design-code/ http://www.nikibrown.com/designoblog/2010/08/23/sxsw-panel-design-code/#comments Tue, 24 Aug 2010 03:33:50 +0000 Niki Brown http://www.nikibrown.com/designoblog/?p=4356

So here’s the deal: I’m going to SXSW this year and hopefully giving a talk with my friend @unruthless. She’s the genius developer/designer and I’m the awesome designer/developer and we will hopefully be giving a talk titled: “Connecting Concept to Code: Tips for Designer/Developers”. We will be exploring the why’s of design and connecting them with the how’s of code. We’ll cover all the fun stuff like web typography, colors on screen, webpage visual hierarchy, grid systems, and making the logo bigger (it’s Texas right?). Read more about our panel over at the SXSW Panel Picker site and consider giving us a vote if the topic peaks your interest!

Thanks!

]]> http://www.nikibrown.com/designoblog/2010/08/23/sxsw-panel-design-code/feed/ 1