WIAW! Bolder and Brighter with a Cheerful New Design

November 28, 2010 By 54 Comments

(Reading time: 5 – 8 minutes)

Long time readers might notice something a little different this morning.

Ok, a lot different!

Welcome to the new Website In A Weekend.

Bolder!

Brighter!

More cheerful!

I’ve always been a fan of bright colors. Most of the art I have is bright and cheerful, with oranges, purples, greens, blues, reds and golds. Websites I really like include Laura Belgray’s Talking Shrimp and Kristi Hines’ Kikolani, both with bold, cheerful colors.

(Kikolani? Talking Shrimp? What the hell do talking shrimps have to do with copywriting? Does it matter? NO! Keywords my shiny red…)

Anyways, it’s loud, it’s proud, and I’m running this design for the next six months.

By the way, if you don’t like the new look, that’s ok. Some people will love it, others will hate it. (What’s important is how it converts. More on that later.) I’ve already been informed that the size of the logo indicates a certain “anatomical inverse relationship,” and from someone else that “I don’t like your colors.” With respect to this second remark, that particular gentleman programmer is most definitely not in my audience. The first assertion gives me a bit of pause, coming from my colleague Al, a brilliant, professional Web 2.0 designer.

Given the new Google Instant Preview, maybe it’s a good thing I’m not a Web 2.0 blog. Larger banners such as those on Corbett Barr’s ThinkTraffic, Annabel Candy’s Get In The Hot Spot and Copyblogger will certainly stand out in Google’s preview. As will Website In A Weekend.

However, I value Al’s advice, and I suspect you will hear more wisdom from him in the future (He’s really, really good). But we’ll table that for later.

Both the redesign and the launch have been a team effort with Roberto Koci and Teresa Deak. If you haven’t yet met these talented folks, let me introduce them.

Roberto Koci – Red Diamond Studio

I’ve worked with Roberto Koci since December 2007, nearly 3 years. Roberto consistently delivers high-quality work. Having worked professionally in print graphics, he has a great eye for color as well, and isn’t afraid to take design risks.

For this particular project, the constraints were staying within a nominally GPO (green-purple-orange) color scheme, and increasing contrast by darkening accents while increasing white space.

Furthermore, the whole implementation is in Thesis theme. As explained below, we used Github for version control and distributed development. Roberto could add a set of changes which I pulled to my local server, modified, then pushed back to Github for Roberto’s use. Very convenient.

The Social Butterfly Solution

Teresa Deak of Social Butterfly Solutions played a critical role in the success of this launch. One of Teresa’s core business services is providing uniform branding across related websites, or “outposts.”

Uniform branding in this case means propagating the banner and color scheme to Website In A Weekend’s outposts. Teresa provided branding for:

  • Amplify: provides a stream similar to Twitter, with posting similar to blogging (including tags and categories), and clipping similar to Clipmark. That turns out to be a powerful combination. I use Amplify to support certain links (it’s do follow), and as a sort of “super-bookmarking” system. Even more cool, Amplify is built on WordPress MU.
  • Gravatar: Most people log in to Gravatar.com exactly once, to register and upload a photo. As it turns out, there’s more you can do at Gravatar. Did you know you can set a collection of links to various websites and social media profiles? That these will appear on any blog implementing Hovercard? You can see Hovercard in action on Website In A Weekend, just roll your cursor over my Gravatar in any comment.
  • Posterous: is another so-called microblogging site, useful in part because it’s easy to post by email. Often, when you send me a question by email, I’ll cc: (or bcc:) my reply to Website In A Weekend’s Posterous account to use for a future blog post. Posterous also accepts clipping, which is useful for grabbing comments and excerpts for quoting in blog posts.
  • Twitter: There’s not a lot new I could say about Twitter. Find me here: @websiteweekend.

All these outposts went live a couple of weeks ago. These had to be done manually; can’t just switch themes as with WordPress. That’s more difficult to synchronize so we pulled trigger on each when ready.

Relaunching Website In A Weekend

Anyone in this business long enough figures out that “getting it right” is a little more involved than shoving a new theme on the web server.

For example, if you’re reading this on 1:25 pm November 28, 2010 Pacific Time, you may notice this blog post isn’t exactly finished. Turns out I accidentally hit “Publish” instead of “Save Draft,” and didn’t catch it before it went into the RSS feed. Once it’s in the feed, it’s impossible to get it out (show me I’m wrong, I’ll thank you for it).

In any case, a few more notes:

Collaboration: We used github for synchronizing files. This made it far easier to determine who had the correct version of each file, and to merge in changes when both of us worked on the project’s PHP and CSS files.

Testing: first round of testing is moving from Roberto’s private server to my private server. This exposed a number of issues, primarily in plugin modifications. (Some of which hasn’t been deployed yet.)

Tweaking: Final tweaking occurred on my local server, where I have an entire hosting and development system installed.

Roll out: was pretty simple. Since git branch management is so convenient, the existing design (violetminded) was maintained in parallel with work on the new design (reddiamond). Deployment reduced to a single rsync command:

$ rsync -essh -vta --cvs-exclude custom myusername@myhost.com:public_html/websiteinaweekend/wp-content/themes/thesis_18

Thesis 1.8 doesn’t have child themes, which is becoming a serious handicap for quickly rolling out an updated design, so this combination of git and rsync worked well.

Because there were so many changes (mostly beneath the hood), the roll out has been proceeding for several days. What you see today are the last pieces: the banner, background and footer.

How did your last redesign and roll out proceed? Any bobbles, or smooth sailing?

Filed Under: Blogging Lifestyle Tagged With:

Where Good Design Begins: Getting to know your customer

January 4, 2010 By 12 Comments

(Reading time: 3 – 4 minutes)

What do you call a millwright turned carpenter turned chainsaw sculptor turned internet marketer and website design professional? Around here, we call him William Muncrief. That’s the beauty of the web: it draws an amazingly diverse cross-section of humanity from every profession and occupation. (I’m going to prise more information out of William in the future about these sculptures. There has to be pictures!) William now owns and operates Logistics Studios, a boutique web design studio in the sublime Shasta region of Northern California.

Where Good Design Begins

-by William Muncrief, Logistics Studio

Designing a website for someone can be simple or complex.

Determining factors for website design complexity are influenced by a variety of conditions, and of course the budget. There are sometimes that creation cannot be all about the money. Consider charity work for example, where they still deserve the best you can offer.

Finding the right design for someone else is a complicated procedure at best. Investigative work is of the utmost importance to achieve what the customer is looking for in their site. As designers we suggest, show, but never push our ideas down someone’s throat. This can be hard for the creative mind to get a real handle on, but it is necessary to let the customer steer unless they relinquish all control. I try to keep in mind I may or may not see the site again, however, they are stuck with it. Design is a very personal aspect and should never really be about ornamentation.

This is where many people get it wrong. They design code-bloated beasts, with no SE,O that only serve their own desire to display their masterpiece. Good design is the marriage of written content, images, multimedia, and a solid web application foundation. When the design is good these aspects harmonize with the client,search engines, and visitors as well.

Getting to know the customer is beneficial from every aspect. Frequently we learn a great deal just from the e-mail exchange. Ask for ideas, resources, and input early on to save the embarrassment of someone who cannot stand your design.

Designing the site should always start in a concept form prior to starting with any software. The use of the pencil and graph paper allows for some quick layouts complete with measurements. This initial step helps tremendously when creating the CSS. Like all math make sure the numbers add up to what they are supposed to by adding all borders, margins, padding, container width and height, etc. Remember not to make things to tight other wise they can blow apart in different browsers and I am not naming names. These sketches work wonders for getting into the prototype, comp phase fast.

Design is all about accuracy, focus, and laying the proper foundation of trust with the client. By taking the time necessary, to EARN client trust we gain incredible value in their eyes. Value reflects competence and creates the environment where our great ideas may come to life.

William Muncrief spent most of his life as a millwright & building contractor. In 2006, William tackled internet marketing to sell chainsaw sculptures, and was quickly sucked into the world of web design. Visit his company Logisitics Studios.
Filed Under: Website design Tagged With: ,
« Older Posts