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. Yes, I still feel flattered that they could do no better than follow in our footsteps. But I also feel slighted that all our work, all our behind the scenes work, our research, wire-frames, IA, user testing, multiple design iterations are completely ignored and just our final design was copied. There’s no regard for the effort we put into how we arrived at our design. And to think the largest company in our field did this. Surely they could afford talent, surely they could afford user testing, or an agency to help them. Maybe they did pay lots of money for our design, I don’t know. All I know is our work is on their site and nobody on my team has been compensated for it.

A quick look at theivery

And now all I can do is wait to hear back from legal and to see if one day they change the design.

If this happens to you, consider yourself the innovator. The rest are just trying to keep up. Some will adapt fast, others may improve on your work, and some will just be so late to the game all they can do is copy your work - and do it badly.

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. “Hum okay, how to we do that?” I explained the application developer he was using could do it, but it would probably cost more than a front-end developer (someone he wouldn’t have even considered looking for). Being a friend and in a position to help I told him I’m quite proficient in making the web page look just like the design and I proceeded to give him a recent example.

It’s clear to me that a gap between designer and developer can exist but the encounter with my friend made me realize that there is also a gap between what we do and how everyone else perceives what we do. The proper title may be front-end developer, but many outside of our world don’t realize that there is a difference in what a front-end developer does and say an application developer or web designer. My current title is Senior Web Designer, however I do plenty beyond that singular role. Front-end development is just one of those tasks I handle, along with site metrics & analytics, usability, marketing, art production, creative direction and even photography.

And here’s the kicker. When I finished the HTML, I forwarded him a link to the page and a link to the original jpeg so he could compare the two and let me know if he wanted anything else from me. All he could say was, “Wow they look the same.” I said, “Thanks”, but thought to myself, “Why wouldn’t they? After all I am a professional.”

• See the original web page design
• Compare it to the actual html page

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.

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.

Logo: Gravity SEO choice #2

Take a look at the beginnings of logo development. At this stage I have designed about 20-30 versions of logos, presented about 4 or 5 to the client, and they have narrowed them down to these 2 front runners to start developing in greater detail.

The circle/spheres were supposed to have a dual representation. One as planets and moons all gravitating around each other, and two as web users getting pulled into your site. We know large, dense planets have a greater gravitational pull and can have moons in their orbit. Similarly a large foot print on the web helps sites gain more traction in S.E.O. and will bring in more people. The original idea for Gravity SEO’s logo played off both these ideas.

Well we have moved about 4 rounds deep into development since these original roughs and the dual meaning may become less apparent in the final versions. The team at Gravity SEO is ‘gravitating’ towards #2 and the designs are getting more detailed as they want actual planets for the heavily bodies. They want the logo to be bright and eye catching. The colorful and vibrant appearance is of greater focus for them then a dual representation of meaning. I definitely understand where they are coming from and while it seems like the slippery slope towards ‘make the logo bigger’ I think it falls outside of that marketing pitfall. The planets looks bright and colorful and will work in a multitude of situations including both black and white backgrounds.

Look for more posts on the progress of the project here in our news section as well as updates to our projects and clients pages once the project wraps up.

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.

15 hours in javascript tutorials…

14 hours developing standards compliant, cross browser compatible web pages…

3 hours loading the site via FTP…

And still not even close. Stay tuned for full update upon launch.