I’ll be attempting to ‘design in the browser’ with my little bits of spare time. So stay tuned and feel free to check back and view source.

This is a guest post written by @jimmynotjim

On Monday my feeds, as I’m sure yours as well, blew up with the launch of BostonGlobe.com. It’s been a much anticipated launch both within and out of the design community. I was excited to get home and check it out on a browser other than my iPhone just to see how (and to try and decipher why) they handled the content. It didn’t take long for the Negative Nancy’s to start complaining and cut into that excitement.

A few were unimpressed. With all the hoopla surrounding ‘Responsive Design’ lately the Globe fell short of their expectations. Most though complained about the subscription requirements. The number of people expecting free access was outstanding. One tweet read “The future of web design is behind a paywall, something not quite right about that…” and another “A holy screw you to The Boston Globe for paywalls” and even “I’ve always craved something between a newsletter and an AOL keyword that I can’t show my friends” from one ‘web star’.

Surprisingly, I wasn’t shocked. I myself am a child of Napster and have ‘shared’ more music, movies and software than I care to mention, but at some point I grew up. I realized that if I want to get paid for my hard work, I should be paying for someone else’s. I guess some people never grow up, but I digress. I’m not here to add more noise by complaining about the complainers, but to point out what I believe they are missing in hopes of opening their eyes.

First, this is more than just a responsive layout for a blog. A newspaper as large as the Globe has multiple layers of content, a wide spectrum of readers, and who knows how many stakeholders with their own opinion on what’s important. I think @simplebits tweet said it best, “Congratulating @beep, @scottjehl, & @filamentgroup on their groundbreaking work with 1,659,230 requirements for the new http://bostonglobe.com.”

The fact that they were able to pull this off is frankly a miracle. Did anyone else happen to sign up for a free account and explore the site? If not you really should. You can easily and intuitively access back issues, save articles for later, use swipe gestures on mobile, and connect with the writers and editors directly. I’d like to see these naysayers examples of ‘dime a dozen’ responsive sites that offer as much for as large of an audience, I can think of only a few who come close.

The second issue, about the paywall has really gotten under my skin. When Apple came out with the first iPhone and announced they had changed the game, did everyone complain about the price of admission? No, they stood in lines for hours and shelled out hundreds of dollars for that precious piece of design. Should we expect the people that spent who knows how much time and effort on this project (and all the writers and editors who will publish to it) to go unpaid? We’ve all read the quotes about the average person being more likely to get struck by lightning/eaten by a shark/in a plane crash than clicking an ad, I’m willing to bet everyone at the Globe has too.

How is a paywall any different than a subscription to Netflix, Hulu Plus, Rdio, etc? Why is it were willing to throw our cash at entertainment services (or Apps and even Apple themselves) but aren’t willing to squeeze out a few bucks (basically a large coffee) for well researched, thought out, written and edited news? I’m sure this question was asked and researched at the Globe, I doubt they spent all this effort and said, ‘eh, lets just do a paywall’. I would hope Ethan et al. would have put up a decent fight if it wasn’t.

As I stated before, this isn’t just a responsive layout, it’s a multi-layered service offering a well thought put and executed experience. A premium news service like that deserves a premium price. After all, if all we want is sound bites that barely scratch the surface, we have plenty of crappy sites from AOL, Yahoo and the other failing web giants to look to, or we can always just visit the Globes free version Boston.com (that’s right, they do offer free content).

Just so it’s clear, I’m not saying the Globe site is perfect for me or anyone in particular, but with as broad a viewership and the number of moving elements they had to work with I think they did an exemplary job. So what’s your take? Did the Globe’s design fail to meet your expectations or are you in the “it should be free” camp? Are you as happy with the results as I am? I’m curious to hear everyone’s opinion.

About @jimmynotjim

My name is James, but you can call me Jimmy (and even Jim if you like). I’m a 29 year old carpenter turned web nerd, living and working in Boston MA. In addition to design I enjoy photography, drawing, cooking, camping, hiking, and of course spending time with my loving family.

Twitter: @jimmynotjim | Web: JimmyNotJim.com

This weekend I gave a talk at WordCamp Boston with my friend Jake (@redlist) on customizing the WordPress admin interface for clients. If you missed the talk this post is intended to be a brief recap of what we covered.

As someone who uses WordPress on a daily basis I tend to ignore most parts of the admin interface. I know exactly where everything is and it takes me a matter of milliseconds to find most things. But lets take a step back for a second and remember who we are making websites for: the end users and our clients. As web designers and developers we spend so much time on the public facing side of a website that we sometimes forget the admin interface and most importantly the client that will hopefully be managing and updating their site.

In this talk we discussed 4 things you can do to simplify the WordPress admin and make it more usable for non-technical clients.

Our Fake Client:

For example purposes we will be making a site for a fake client. Their site requirements are pretty simple:

• Movie Review Site
• About Us Page, Contact Us Page
• Links in the sidebar

Custom Post Type

If you look at the default WordPress admin screen you notice a slew of options in the left hand side bar. Most of these options are useless to a client. Posts, Pages, comments, links, media appearance, settings, plugins OH MY! Luckily we can simplify this pretty easily based on our clients specific content.

Since our client’s site is primarily for movie reviews we will create a custom post type of ‘Movies’ which will appear as an option in the left hand sidebar. This makes it pretty clear to the end user that this is where you go to add movie reviews to your site.

Adding a custom post type is actually pretty easy with the help of the nifty Custom Post Types UI plugin. The plugin page has a helpful short screencast and overview of the plugin.

Once we add the custom post type it shows up in the left hand menu as ‘Movies’.

Custom Fields

Along with adding a custom post type we will also add some custom fields to simplify the writing experience for the client. Our clients movie reviews have 3 specific pieces of content:

• Movie Cover / Screenshot
• 1-5 star rating
• A brief review

We will be using these custom fields instead of the main WordPress WYSIWYG interface to avoid confusion on the clients part and to free them from the burden of styling and placing the content. Floating and styling elements in the write editor can be a pain for clients.

We have also found that the default custom field panel in WordPress to be confusing to non-technical users. Instead we will be using a plugin called Custom Field Template that allows us to simplify and make things easier for the end user. This will make the expierence of writing a movie review much like filling out a simple web form:

1. Upload thumbnail movie image
2. Rate movie
3. Write a brief review

Here’s what our writing screen looks like after adding a custom post type and custom fields:

Here’s what our post looks like when the custom fields are inserted into our template:

Admin Menu Editor

Now that we have simplified the option for adding a movie reviews and writing the review itself, let’s focus on cleaning up the WordPress menu system.

With the Admin Menu Editor plugin we can remove, rename, customize and assign access levels for menu items per user. For this example our client only needs access to pages, media, links, comments and movies. We will hide everything else to make things much simpler. I’ve assigned administrator only access to everything but these 5 options so when a user with the access level of contributor or author etc logs in they will only see what they need!

We will also rename a few things: change media to upload photos, Comments to manage comments and links to manage links.

Admin menu editor also has some advanced options for changing icons for the menu items as well as more granular access levels.

Custom Admin Branding

Along with simplifying the menu and customizing the content types we also need to spend a bit of time customizing the color scheme of the admin interface. These customizations can make the backend of the site feel less threatening and foreign to your client and hopefully make them feel like this is their website. The whole goal of simplifying and customizing is to encourage your client to take ownership and control of their website.

The Custom Admin Branding plugin allows you to easily customize several aspects of the WordPress admin: login screen, admin header, admin footer, and also allows custom css.

Our WordPress login screen with a custom logo:

We spent a few minutes adding logos, colors as well as digging around in the WordPress admin css. Custom admin branding also allows for custom css that will override the default WordPress css.

Since our clients site is light blue we have utilized the same color scheme in the admin. We have also added the clients logo to the login screen as well as header and footer of the site.

Fluency Admin Theme

If all else fails and you don’t have time to make a custom admin theme you can always find a pre-made theme out there and tweak the colors a bit. The Fluency Admin Theme seems to be one of the better WordPress admin themes out there. It comes prebuilt with a variety of colors schemes and allows for adding a logo to the login screen etc.

Cleaning up the dashboard

Along with simplifying the number of menu options the end user has access to we can also customize the dashboard of our WordPress site. The dashboard is the first thing a user sees after they log in, and the default screen can be pretty busy.

Selecting screen options in the top right corner allows you to turn the dashboard widgets on and off. We have turned off all of the default widgets and installed two widgets that are relevant to our imaginary client:

Google analytics dashboard widget

Dashboard twitter widget

We added these two widgets so our client can see how their posting schedule corresponds to their site traffic, as well as encouraging them to manage their social media presence.

In the upper right corner of the screen you will notice a screen options tab that allows you to customize the WordPress dashboard widgets:

The Final Product

Here’s what our WordPress admin interface looks like after all the customizations:

Hopefully this looks much less intimidating to a non-technical user vs the default admin screen.

Slides and your thoughts!

I’d love to hear about how you customize the admin interface for your clients. Leave a comment and let me know what you think!

If you were at our WordCamp Boston talk please take a second and rate how we did! I’m always looking for feedback on how I am doing when rambling in front of a group of people. If you leave feedback I’ll give you a hi-five! Use the button below:

Slides from the presentation:

Hey guys! Long time no post… I’ve been busy working on awesome client projects as well as crafting an identity for my new company: Rocket Mouse Design. Over the weekend I wanted to whip up a simple landing page with some simple CSS3 animation. I learned a few things along the way and wanted to share.

Not So Simple…

So I have a rocket in my logo (which is still a work in progress). I wanted my rocket to launch on my ‘launching soon’ landing page. Sounds easy right? I can picture the code in my head. I ran into some snags along the way and learned a few things.

What I wanted to do was translate the position of the rocket after a few seconds (or on hover) and make it fly off the screen. So I did something like this:

#rocket {
-webkit-transition: 1s;
}

This makes the animation take 1 second.

And then on hover make it fly off the screen. I chose to use the body element because its the whole thing!

body:hover #rocket {
-webkit-transform: translate(0,-600px);
}

Check it out in action:
http://jsbin.com/agicu4/5

Wait… Rockets Don’t Do That…

You will notice that after the hover the rocket comes back! (what kind of rocket does that?!?!?1)

I needed the animation to run its course and then stop. After a bunch of googling I gave up and tweeted about it.

Luckily I have some awesome and helpful friends on twitter that pointed me in the right direction.

After some reading and research, it looked like animation-fill-mode in conjunction with animation-iteration-count was what I needed. Here’s the most succinct explantions I’ve found:

“The animation-fill-mode property allows you to define the styles of the animated element before and/or after the animation executes. A value of backwards causes the styles in the first keyframe to be applied before the animation runs. A value of forwards causes the styles in the last keyframe to be applied after the animation runs. A value of both does both.”

From http://www.smashingmagazine.com/2011/05/17/an-introduction-to-css3-keyframe-animations/

The ‘animation-iteration-count’ property defines the number of times an animation cycle is played. The default value is one, meaning the animation will play from beginning to end once.

From http://www.w3.org/TR/css3-animations/#the-animation-iteration-count-property-

So here’s what the code looks like:

#rocket {
position:relative;
top:0px;
-webkit-transition: 1s;
-webkit-animation-fill-mode: forwards;
-webkit-animation-iteration-count: 1;
}

Check it out in action:

http://jsbin.com/omowi5

This Isn’t Working! WTF?!?!??!

Well it seems that I’m kinda dense (derp!) and didn’t realize that animation-fill-property only works with keyframes. So lets get some simple keyframes in there!

I don’t know about you, but looking at complex css animations with keyframes is kind of overwhelming. Lucky for me I really only have 2 frames in this animation. So I can use the from and to syntax, which basically created a 0% keyframe and a 100% keyframe.

#rocket {
position:relative;
top:0px;
-webkit-animation-name: rocket;
-webkit-animation-fill-mode: forwards;
-webkit-animation-iteration-count: 1;
-webkit-animation-delay:5s;
-webkit-animation-direction: normal;
-webkit-animation-duration: 2s;
}

@-webkit-keyframes rocket
{
from {top:0px;}
to {top:-600px;}
}

See it in action: http://jsbin.com/efoni5/10

Don’t Forget To Clean It Up!

And with some nifty css shorthand properties here’s the cleaned up css:

#rocket {
position:relative;
top:0px;
-webkit-animation:rocket 2s 5s 1 normal forwards;
}

@-webkit-keyframes rocket {
from {top:0px;}
to {top:-600px;}
}

I’ve always been kinda iffy about css animation – because things get complicated really fast. In this case I think the animation adds a bit of fun and context that will help make my site memorable.

Check out the landing page and subscribe if you want to know when its launched!

http://rocketmou.se

How About You?

So thanks for making it to the end of this post! I’d love to hear about how you guys are using CSS3 animation in your web design work and what snags you have run into. Chances are others out there are running into the same problems.

I tweeted out of frustration one morning about the common occurrence known as Franken-Comp Syndrome. This happens when you show a client multiple ‘finished’ mockups for a project and they combine elements from design A, design B, and design C into one design.

I know that everyone out there in design-o-land has encountered this phenomenon at some point in their careers. It’s frustrating, time consuming and makes the design process less enjoyable. So how do we put an end to this?

First, a disclaimer: Franken-Comps are not the client’s fault. Most clients don’t know what to do or say when presented with multiple options. That’s why our knowledge and direction are so important.

A flaw in our design process

I think Franken-Comps are the result of a flaw in the design process that many designers follow and many clients have come to expect. This design process looks something like this:

1. Initial contact with client, discussions about the project, scope defined, deposits paid, contracts signed.
2. Designer does visual research, sketches several design ideas. Internal critique by co-workers or peers.
3. Designer takes selected sketches to the computer, produces high fidelity mockups. Spends most of the budgeted time on one design concept and then bangs out two alternative designs concepts that are less than stellar.
4. Designer presents multiple designs to the client, and the client selects the worst design or select elements from each design to combine into a ‘Franken-Comp’.

I think the flaw in the process is investing time and energy into multiple comps. This is where (I believe) designers are shooting themselves in the foot! We have followed this process for such a long time that clients expect it.

Designers, you know you spend more time getting one polished design, and the other designs suffer. (Note: this may not apply to studios that have multiple designers working on multiple comps.)

Clients are hiring us for our design expertise and presenting several solutions appears that we can’t make up our minds.

So how do we change our design process?

Take a step back

Let’s sketch more!

Take a step back from the typical design process above, and let’s think about how it could be improved. Maybe it’s not that multiple design concepts are bad, but the time is much better spent presenting and discussing ideas in the sketching or research phase of a project.

Lately I have been including my clients in the process of sketching. We discuss multiple ideas in the beginning of the project and I explore different design directions in the sketches and show it to the client. I explain each sketch in detail and ask for specific feedback.

While this may not prevent the Franken-Comp from happening, it will ensure that it happens in an earlier stage of the design process. Sketching is much more low-fidelity, and takes up less time than producing high-fidelity design comps.

I believe that at least for me and my freelance clients, this process works much better. Clients get to see ‘behind-the-scenes’ work that goes into the design process and feel included in the early stages of the project. Sketching and getting critique and feedback also helps start the feedback cycle earlier in the project process.

I’ve also found several iterative rounds of sketching to be a huge time-saver and very fruitful for my web design projects.

More research, mood boards, less design comps

Another approach I have taken to this problem is to provide only one design comp. Take the time you would have invested in producing multiple design comps and invest it in more exploratory research time instead. This time could also be invested in the mood board process.

Walk the client through several design styles that are appropriate to their project, do some research on their target market and what sorts of design they respond to. Nail down these things and then focus on the design phase.

What do you think?

Have you you dealt with Franken-Comps? I would love to hear how you handle this situation with your clients and any tips or suggestions you have.

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

Get rid of unused CSS selectors

I just found this AWESOME Firefox extension called Dust me. Its a cool little duster to your bottom right bar in the browser. Click the duster and it animates and then magically shows you which css selectors are not being used on your page. Removing unused selectors might make your site load a bit faster as well as making your code easier to read, edit and maintain. Go download Dust Me and freshen up your css!

Link: http://www.sitepoint.com/dustmeselectors

Bring on the HTML5! New form input types

Did you know that HTML5 has a vast array of new form inputs? I know they can seem overwhelming and some of them have yet to get alot of browser support, but you can use some without hurting those poor old souls who use crappy browsers.

One of the things I’ve geeked out about on The Pagebreak Podcast is the email input type. So the simple upgrade is instead of using < input type="text"/> use < input type="email"/>. That was easy!

Good browsers will recognize the email type and the bad browsers just ignore it and default to the text type.

Link: http://diveintohtml5.org/forms.html

Contact info & Microformats in your footer

Add micro formats to contact info, events. This involves a class name or two, and allows people to add contacts to address book, outlook etc – ical etc.

Link: http://html5doctor.com/microformats/

The Dreaded IE6

As all web designers and developers would probably like to say: F**k IE6!!! Ok… so now thats out of my system why not just say *screw ie6* and give them a basic stylesheet. I recently read Hardboiled Web Design by Andy Clarke. He mentions the basis of a website being the content, so ie6 retains that content and gets minimal styling. Why not just give IE6 users Andy’s IE6 stylesheet!

Link: http://stuffandnonsense.co.uk/content/demo/2009/05/21/ie6.0.3.css

Typography facelift

Use @font face for headlines and/or spruce up your fontstacks. If they have the good fonts they show up. If not no big deal! Font squirrel has a font-face generator as well as a large selection of free fonts for web use. Alternatively there is a lovely and relatively affordable companion site called Font Spring that has a good variety of @font-faceable fonts for sale.

Link: http://www.fontsquirrel.com/ & http://www.fontspring.com/

Use HTML 5 elements

Welcome to the future! It’s in your browser. It’s time to start using HTML5 elements. Not only are they freaking cool… they make your ‘div soup’ I mean… code easier to read! New elements like

One of the things I love most about the design community is the willingness to help other. Often times if I have a graphic design or web development question I turn to twitter, dribble, or forrst for help. In a matter of minutes I usually find the answer or the feedback I was looking for. In order to contribute to this ‘helpfullness’ I’ve started to answer questions via Formspring. And If I can’t answer your question I’ll try to find someone who can!

So if you have a graphic design, web design or freelancing related question? I’d love to answer it!

Some of the questions I’ve answered

What percentage of your clients are great to work with, and what percentage represent the typical inflexible, unreasonable, client from hell?

I’ve never really had a ‘client from hell’ but I do have clients that need some more ‘hand holding’ and convincing than others. I’d say that the majority of the few freelance clients I have (I freelance on nights and weekends) are great clients. I’m also pretty picky about the projects I take on so weeding out the non-interesting projects and spotting unreasonable requests and personality conflicts early on helps.

A little ramble on ‘bad clients’:
I think the picky, inflexible clients just need a bit more time. I’ve had clients that demand more attention, but I’ve found that explaining everything and anything really helps. I’m really open with my freelance clients about my design process. I snap pics of sketches to run by them. I remind them when their feedback is due. I’m upfront about time schedules, delays etc. I think ‘bad clients’ are due to a combination of lack of knowledge, understanding and communication.

I see a lot of vector packs and icon sets and other such items out there to buy. Some of these look really good and a useful way to enhance your designs. I wondered what a more experienced designer like yourself has bought and like?

The only icons i’ve purchased recently are @gedyrivera ‘s social media icons: http://lifetreecreative.com/icons/ and the glyphish pro icon set + font for iPhone app designs: http://glyphish.com/ Both are great sets of icons that serve a lot of different needs and are pretty cheap! Thanks for asking !

I recently found 2 designers who completely stole my website design and content. Do you ever come across this problem with your work (website/blog specifically) and have you any advice on what to do about preventing it besides the copyright symbol?

The first thing you need to do is contact the ‘designer’ that stole your work and send them a copyright infringement letter. Von Glitschka has a good blog post about this with a sample letter: http://artbackwash.blogspot.com/2009/04/writing-copyright-infringement-letter.html Other than that, you need to ask them to remove the artwork or design from their website, portfolio etc. If they don’t you need to get in contact with a lawyer.

I haven’t had that many problems with people stealing my work (aside form a few things on logopond.com) but I have run into other websites stealing my blog content. It’s progressed to the point that I don’t do anything about it anymore. I have better things to worry about at this point in my design career.

Thanks for asking a question!

When freelancing – do you have separate contracts for web-design based projects as opposed to packaging or layout work? I’ve always wondered this, I am in the process of writing my contract and don’t really have motivation to do a second one (I’m lazy)

I use the same basic contract for all design/dev/illustration work I do. It’s a modified version that originally came from rookiedesigner.com You can download the text file of my contract and modify to your hearts content: http://nikibrown.com/sample-contract.txt

*Note that this hasn’t been reviewed by a lawyer and I’m not responsible for anything in the contract. That being said I’ve never had a problem with the contracts language.*

Maybe you don’t have this problem, but… How can i get past my own self-criticism? I’ve been dabbling for years but want to go freelance. Sometimes I feel like my designs are not good enough, and I’ll never make it.

Hey – All designers (myself included) have the ‘self-doubt’ problem. The trick is to not let this stop you from making work. Do your best. Put your work out there and ask for critique on twitter/dribble/forrst etc. You can never get better unless you try. If you’d like my feedback on your work shoot me an email at hi [at] nikibrown.com

How much PHP do I need to know before diving into Drupal?

I did’t know much about PHP when I started using wordpress – I just jumped right in and tinkered and learned. The thing I’ve run into the most is simple syntax issues. For Drupal the same thing applies – I’d say jump right in and figure it out as you go.

Also – I’ve found the Diving into php video tutorial series on theme forest to be extremely helpful http://blog.themeforest.net/screencasts/diving-into-php-video-series/

Just discovered a nifty little :hover option in firebug today! Very useful, but annoyingly hidden! I tweeted about this earlier today and it seems that lots of front end developers did’nt know about this either! (So maybe im not that slow!!!)

If you guys have any tips for using firebug leave a comment and share!