Vertical Epic Tasting Note Cards

In honor of Stone’s Vertical Epic series coming to maturity on 12.12.12, I am sharing the tasting note cards that I designed for a Vertical Epic tasting party. My tasting note card designs (PDFs) come in two flavors. The first are notes for the complete Vertical Epic series, from the first release of 02.02.02 to the last chapter 12.12.12. The second is a universal beer tasting card. Both sets are formatted to 3.5×5 index card size, great for an analog experience at a tasting party and also have digital fields for easy saving and sharing.

Vertical Epic tasting note cards

Blank Beer tasting note cards

responsive web design

All the cool kids are talking about responsive design. Fixed gear bikes lay in-front of rooms filled with nano brews, scruffy beards, thick glasses, and a raging debate over the validity of the responsive movement. We didn’t have that discussion. Not even close. Our responsive design came up way too late in the project for that. What we did do, was get the right people excited about it at the right time. The stakeholders came onboard as soon as they saw the site in BETA. Simple [ahem - not recommended].

Responsive web design is a solid answer to whether or not we should have a separate mobile site/code-base/framework delivered in a web browser on a mobile device or tablet. Responsive is not the answer to whether or not you provide a separate native app. Its a completely different arena and if business constraints permit, they should co-exist for the benefit of your end user.

Designing the new StockTwits that has come to life using simple media queries to change the layout which modifies the user experience has been very inspiring. Take a step back and consider the simplicity: Allow your content to better fit the device it is viewed. And allow this to happen while using your existing framework and code base. Exciting really. Its not perfect, but its a great way to deliver a better experience to your user. Its a tool that should be used in every design. Now, I am thinking mobile first. I am focusED on the content. And I can only imagine building sites with responsive web design included, even if the platform has native apps and mobile sites.

Special thanks to the front-end heavy lifting done by @christygurga. I love your excitement for responsive design, and that you were so open to rolling with our agile methods, and allows us to iterate so quickly and get the responsiveness rocking. Check out the deck for StockTwits responsive design.

battling designs

It’s been over one year since we released our latest web design for blindsgalore. In that time we have been copied twice, by competitors in our field, that we know of. Good work John & good work to the team involved with the redesign at blindsgalore.

Design theft happens to the best of us. How you react to a stolen design depends on your situation. Onwired has a good article on what steps you should take if it happens to you. In our case, when direct competitors stole our work, we reacted simply. We turned over the offender to our legal council.

The first time it happened, we were copied by a small player in the industry who makes up only a very small portion of the overall sales of window treatments online. Since they were so small, we assumed they lacked the resources to hire a qualified designer or perhaps they just had a hack designer on-staff that could do no better, c’est la vie.

However when we discovered the most recent offender was the largest competitor in our arena, opinions quickly changed. Read the rest of this entry »

Open source content management

So a friend contacted me a while back about a start-up he was really excited about. The main driver of the company would be a retail web store. He needed something that was easy to use and easily expandable and of course had good support.

I designed a whole bunch of high level design items for the company, including the first round of mock-ups for the web store, the logo, etc. But then he turn it right back on me to develop the whole site! I am not a developer (well at least not a back-end developer as the term traditionally refers). So I knew I had 2 choices, hire a freelance developer to write the site or invest less money but more time in a setting up a Content Management System (CMS). I choose the later and quickly found myself reading hundreds of reviews across dozens of sites before finding the right one.

I chose Joomla!, an open source CMS. Its base system was adequate but what really sold me was its available extensions. A good cart via VirtueMart, Additional layouts/templates, CSV upload/download tools, XML site map integrators, Social media tagging, and so much more. The best part? Most of this stuff if open source (free) for users like you and me. However, donations are appreciated, and let me tell you they could use some reward for their tireless efforts to build and support these extensions and components.

Since the original installation of Joomla! I have been working to customize the entire site so that is branded with the look of the company and not the CMS or its standard templates. The entire endeavor is estimated to take about 3 months, from upload of the first custom style sheet, modification of templates, product uploads, adding plug-ins, integrating shipping and payment modules and gateways to final release of the completed site. That time-line isn’t too bad actually when you consider I am one guy, working on the site mostly on weeknights and weekends.

The biggest expenditure thus far has been time. And while my available time has become more scarce lately, its still an investment I’m willing to make, especially in this economy.

Here’s a list of the CMS and components I have been using to get the site off the ground. Good show on their part.

• Joomla!
• VirtueMart
• Back-ups
• AddThis social bookmarking

Gravity SEO web design

So I finished this project a while back for the guys at Gravity SEO. But I didn’t post about it, so here goes.

I had just finished creating their logo and branding, when I submitted 3 different web designs for review as well. They liked the overall design of one of them so much that it was approved with almost no changes. Incredible, I know. But it can happen when like minded people work well to deliver a solid project or product.

So the design was painless, but the development turned out to be a different story. The site uses a content management system (CMS) to deliver its web content. Usually working with something like this isn’t too difficult, they have documentation and forums you can go to for help. Only problem was this CMS was from Iceland, and written completely in Icelandic! And with no documentation from the creator or users (at least none I could find in English) I was left on my own to decipher the ins and outs of the CMS, site architecture, modules, extensions and so on. Luckily we’re dealing with a fairly straight forward informational site.

After banging my head into the wall for a bit, I devised one final method that could work to create the old site. Only issue was it would completely overwrite the current site, so there was no going back. Its the last approach I would ever want to use, but I was out of other options. So after the back-up, I deployed the new site right over the existing files, gulp.

Turns out, I planned for all the pitfalls of doing this and was able to roll out a smooth deployment. Phew. It also turns out that this project is a great example of how you can execute HTML to match your designs near exactly. It just takes a good sense of design, reasonable expectations and a foundation in web standards.

• See the original web page design
• Compare it to the original HTML
• Take a look at the live site

UI design: Surfinside report page

As a young designer, I viewed learning HTML as a necessary evil. Many entry-level jobs for Designers required knowledge of both web and print, so there wasn’t really a way around it. But a problem existed (at least according to my critical eye) where my designs weren’t coming to exacting fruition on the web. So out of necessity comes evolution. I worked at first creating good usable designs and then accurately render that same design in HTML.

The trick is following standards recommendations and best practices. I got some tutelage from a really good developer, read a few books, tested a few tutorials and before I knew it, I was ripping out bloated code and separating the pieces of the document object model.

I recently had a friend come to me looking for some website design work. When I finished the requested mock-up he asked, “okay, now what?” Well I said, “you need to implement the design on your site”. His follow up question was predictable and expected. Read the rest of this entry »

Gravity SEO logo design, absolute version

We have finalized the designs for the Gravity SEO corporate I.D. package.

The final logo incorporates three heavily bodies which all tend to ‘gravitate’ toward each other. In the end, two versions of the logo emerged, one is an abstract version and one a specific or more absolute version. The abstract version has reversed out simplified circles in the mark. The absolute version utilizes identifiable objects of the sun, earth and moon in place of the abstract circles.

The absolute version has become the official logo, however I tend to lean toward the abstract version. I continue to work it in to the branding on the web site and it is the version I submitted to logo pond.

The business card, printed 2-sided, does use both versions of the logo. This inclusion of both on the cards will relate well to the online images and collateral used on the web site. Letterhead and PowerPoint templates were also created rounding out the complete package.

The next phase of design for Gravity SEO is well under way. We have an approved design for the web site and will be working on web development and implementation in the next couple weeks.

Lets see, the to-do list remains quite long, but I decided it may never get all crossed off, so I went ahead with the push to live.

New features include the news section blog that you’re reading, updated and expanded projects with the new larger pictures and details, and new ways to filter those projects (by type ie: web, logo, etc or by client). Reviews and recommendations are welcome.

The site design dramatically changed half way through development, as I was sick of looking at the original design and I knew I’d never be able to accomplish what I set out to do in a timely manner. So it will have to wait for later development.

The next phase of development will include more dynamic content (I am including the latest blog posts on the homepage now but I’d like to expand on the content and their sources even further) like adding flickr and twitter updates. Additional projects will be added and current projects will get expanded. The new home page design will help alert you to those additions with our ‘latest project’ section.

If you’re interested in any of the code I have used here feel free to drop me a line. Let the good times roll.

Logo: Gravity SEO choice #1

The year has just started and we’re busy as usual. We’ve started design work for an emerging consulting company in San Diego called Gravity SEO. They provide Search Engine Optimization, guidelines, advice and management to clients in the US and abroad.

They have a concentration of clients in San Diego as well as Iceland, so the new designs for their company will meet a range of different audiences. We are contracted to work on corporate branding as well as web design and development for the company.

Read the rest of this entry »

So the idea for my new site is based on flexibility as well as versatility. I wanted to keep the site graphics simple and clean (much like my last design portfolio website) and present the projects/design work so they have the most emphasis on the page. I feel this design accomplishes this task well, however getting it to behave it IE6, 7, 8 and Firefox 2, 3 for PC and MAC along with Safari is less than easy.

Limitations appear quickly when you are trying to consider each browser’s quirks going back as far as IE6 (original release date August 2001). The two main ideas I wanted to work with is using less and less floats and I wanted someone with a 800 x 600 screen will have the same experience as someone who is on a 1920 x 1200 display. All while being w3c compliant of course. Tasks that seem simple in theory but become more difficult to accomplish in practice.

Because of cross browser issues that have been appearing the site development has been going much slower than I anticipated. I also have to do all of the production work in prepping my projects for the new site, which will also take a large chunk of time. Roll into the fact that I am busy with other projects, another business, design consulting and a 9-5 desk job as a senior designer, well the time line keeps extending. But I have been diligently working on the site on the weekends and after work.

Once the new site is released I’ll be compiling some links and tutorials on how I got the beast going and looking good in older versions of IE, your mobile device, up to the latest version of Firefox. Stay tuned.