]

Just Launched – oinkandmoobbq.com

May 8th, 2012

As I alluded to a few weeks back, the last few months I’ve been working on a logo, website and truck design for Oink and Moo BBQ and I’m very happy to announce that the site is live! You can check it out at oinkandmoobbq.com. I’m going to have a full write up about the design and build process in the portfolio section in the next few days and I’ll be sure to update this post with the link.

In the mean time, check out the website and mark your calendars for the Oink and Moo BBQ truck, hitting the streets of New Jersey this September!

Update 5/14:
I’ve added a write-up on the creation of Oink & Moo to my portfolio section. There’s lots of good information about the logo, website and design of the truck. If I were you, I’d take the time to read it.

February 11th, 2012

As creatives we are always challenged to find new solutions to the same old problems. Often times for web designers we look to CSS galleries, which rarely leads us to new ideas, just our own slightly modified version of what some has already done. An article this week at 1stwebdesigner.com called “Stop Stealing from Design Gurus” talked specifically about this and got me thinking about what I use for inspiration. Below are some of the websites that I use when looking for inspiration.

  • Dribbble.com – First things first, I don’t have a Dribbble account. I’m thinking that it must’ve gotten lost in the mail (if you have an extra invite and want to help a brother out, please send it to brian @ brianjschneider.com). The site allows users to submit 400×300 pixel “shot” of their work and users in the community can comment. This allows designers to get feedback, but also allows them to keep the complete design under wraps until their project goes live. Another nice social feature is that you can follow different designers and keep tabs on what they are posting.
  • PatternTap – Similar to Dribbble in that it shows parts of a design, not the entire piece, but these examples are strictly web examples. The folks that run the site do a fantastic job of categorizing and highlighting different elements of web design and user experience patterns on the web. When looking for inspiration you can search by tags or categories. Say you’re looking for a some ideas for creating navigation for a new site, you can go to PatternTap, click on the navigation tag and see some inspiring screenshots of well-executed navigation.
  • Adobe Kuler – What designer doesn’t love playing with color? None that I know. Kuler is a great way to create color them based on analogous, complementary, and tertiary color relationships. You start with one color and let Kuler do the rest, or you can play with and tweak the settings and come up with custom color combinations based on certain constraints depending on the method of theme creation you choose.

Those were all pretty pretty specific to the web and graphic design field, but sometimes you just need to go outside the realm of what you’re designing for and get some other ideas.

  • Jackthreads.com – I found out about this site from the Diggnation.com podcast, which had Jackthreads.com as one of their sponsors. It’s a deal site for hip independent clothing companies to sell clothes to men, offering a few special daily deals with limited quantities at a significantly discounted rate. Since the site is aimed at men in their 20s and 30s, that timeless, go-to fashion staple, the t-shirt, is sufficiently represented. Many of these t-shirts have interesting takes on typography and iconography making them very relevant to the work I’ve been focusing on lately. Plus when you check out the website, you never know when you find a nice addition to the wardrobe.
  • Polyvore.com – This is a new find for me. It’s another fashion website, but this more of a community where users are able to create fashion moodboards and combine clothes, type and color. I haven’t played around with the social features of the site, but like many others, it allows to follow and favorite other people and their work.
  • SportsLogos.Net – I’m a sports fan, but more than that I’m a sports logo and uniform fan. Even since I was a kid I was always fascinated with logos, jerseys, and the histories of teams and team names. This website has a very thorough archive of sports teams from all the major American leagues, to minor leagues, olympics, and international leagues. It also has a very active message board where users debate logo and uniform trends and updates, as well as holding uniform and logo design contests, as well as having a dedicated graphic design section.

That’s what sites are currently inspiring me. I’d love to hear what you guys have been using for inspiration on your latest projects!

November 26th, 2011

This site has been live since about July 8th but ever since I’ve been making little tweaks and changes to improve the content, layout and user experience. There came a point a few weeks after I launched that I just didn’t want to look at the site any longer. I knew there were problems but I had been looking at the site everyday for the past few months and just didn’t want to deal with them and were focusing on other projects.

After reading the Steve Jobs book and repeatedly hearing about Steve’s attention to every single little detail, it occurred to me that I had to get back to the site, make a list of all the things that weren’t right and get back in there and fix them. Many of the changes were related to how the site reacted when being scaled down to different resolutions. It’s still not perfect and even as I check items off my list, new items also get added.

The Big Problem

After purchasing an iPhone back in October, I was excited to test my site on the new device. First I checked it out in landscape and it looked great, then again in portrait also great, then I flipped it back to landscape and everything had been pushed out, so that you had to scroll to the right to see the rest of the content.

WTF?

My first thought was that something in my updated theme had caused this, so I reverted back to an older theme, but it was doing the same thing with the older theme. Why did it work the first time the site rendered, but after going to portrait then back to landscape it didn’t? I went and checked it out on my iPad and sure enough it did the same exact thing. I went into my theme and started stripping out margins and changing widths to “auto,” but nothing was fixing the problem.
First photo of my website in landscape mode on an iPadPhoto of my website in portrait mode on an iPadPhoto of my website in landscape mode after having been in portrait mode on an iPad which has the scaling problem

Reading is Fundamental

I broke out my copy of Responsive Web Design by Ethan Marcotte and tried to see if there was something that I was doing wrong. Based on how my viewport and media queries were set up, everything should’ve been working correctly. Next, I went to the website that was associated with the book responsivewebdesign.com/robot and put it through the same test on my iPad.

It did the same thing as my site!

In Tweet We Trust

This made me extremely happy because if Ethan’s website was screwing up in on the iPad, my site was in good company. To double-check, I went to another respsonive site that I know is set up correctly – simplebits.com, the site of Dan Cedarholm. It also had the same problems as my and Ethan’s site so I was sure that the problem wasn’t in my code. I knew it was now time to go to Twitter.

My first tweet just reiterated the problems I was having, while in the second one, I tweeted at @rwd and @simplebits that their sites were having the same problems. When I awoke the next morning I was pleasantly surprised to see a respsonse from @rwd. The response pointed me to the report of a known iOS scaling bug posted by the Filament Group.

The bug states that when switching from portrait to landscape, the viewport zooms past the 1.0 (100%) causing the content to be too large and require scrolling.

The Fix

After doing a bit more searching on this bug I was able to find a javascript solution at github. After pointing to this in the header file of my theme, the site started functioning just as it should and it was glorious!

Conclusion

Twitter is a tool that so many people just don’t understand. In the web design/development community it is such an invaluable tool that allows to connect and tap into the wisdom of so many amazing professionals who are often so kind and willing to help you out. Thanks to @rwd for their help in pointing me to a solution!