I was waiting to write this review until I could use it on an actual client site. But since, we are currently working on our own site redesign and I wanted to try it out on that, I decided to use it for our own home page and give you my initial impressions.

First of all, I really like how simple it looks when you first open it up. It’s very easy to see which tools are at the top in the toolbar with the visual icons and the names underneath.  One of the first things I did was change the setting to use system fonts. I can’t stand Comic Sans. I’m also not sure about the overall informal sketchy look, but we’ll get to that later.

I started off making a browser window. I have to admit that the biggest issue I had here is not being able to measure it exactly so I was kind of lost on how big to make it. They have an indicator of size, but the graph lines seem to be unrelated to that. It’d be that way if I drew it on paper, but for some reason I feel the need to have things neat and exact on the computer. This is obviously something I’ll just need to get over.

Getting the top menu in was no problem. I couldn’t figure out how to do a representation of the logo though. What do you use for that? A button, a container, or just text? I ended up just putting text although it doesn’t feel right.

I really like how everything snaps into place without having to put guides up everywhere. Adobe could take a hint from that feature for Photoshop.

Anyway, this is my first initial wireframe using Balsamiq. This took me about half an hour to do and I didn’t have any trouble implementing the rest of the features.

Likes:

1. Ease of use.
2. Simplicity of the program overall and in the main view. Not too many options or features to overwhelm you at first.
3. The snap to grid feature and align with other elements feature.
4. All the choices for icons.  I will have to resist the urge to use the cute smiley faces everywhere.
5. The cute smiley faces!

Dislikes:

1. The little overview edit box kept getting in my way when I was adding and editing elements near the bottom left.
2. I couldn’t resize the playback control button. I think that has something to do with just that button though. Maybe I used the wrong one for this purpose.
3. It’d be cool if you could just delete an element by clicking on it and hitting the backspace key rather than having to hover over the edit box and then click on the cut tool. This is not major, just habit for me.
4. I’m not sure about the hand-sketched styling. I understand why Balsamiq made it this way, but I think I will still feel weird presenting it to the client. I guess I will have to wait and see what reaction I get from clients when the time comes.
5. Although it was my first time using it, I felt it took me quite a bit longer than it would have than just sketching on paper. That said, it might have saved time from sketching on paper and then again in Photoshop.

Overall, I think this is a great product. I will definitely be using it again in the future although I think I will save it for more complex layouts so that I can make more use of the different icons and buttons. I also think it will save me time on more complex layouts, but on the simple ones I may get by with my old way of using graph paper and Photoshop.

For more info about Balsamiq, check out their website.

Naomi Dunford, whom I affectionately like to refer to as my tocaya, approached us because she felt that the original IttyBiz site was no longer representing her thriving business. IttyBiz has grown exponentially since starting and she wanted to focus more on her marketing and small business help products and courses and not mainly on her blog like before, while still keeping the blog visible. She had also made additions to the site as it grew and needed it all to be tied together cohesively again.

IttyBiz has a large following. That makes this type of project challenging because you want the website design to reflect growth and maturity, but also don’t want to alienate existing loyal customers and readers. I have been religiously reading Naomi’s blog since shortly after she started IttyBiz, so I was very familiar with her services and branding. As a reader myself, I put myself directly in the shoes of her target customer and thought about what I would want.

But, the main challenge with her site redesign was finding a way to portray her business biggified-like while still letting her well-known personality shine through and keeping her existing branding mainly intact.

So, we decided (us together with Naomi) to keep her red color and make the rest of the site very clean and high contrast, but add a little punch to emphasize particular areas that we wanted to call attention to. Naomi is very well-known for her candor and straightforward no-nonsense advice, so we decided to play on that. For example, her tagline “Marketing for businesses without marketing departments” is excellent. It’s very straightforward and descriptive, so we made that front and center. When you first visit the site, you don’t have to wonder what it’s all about.

We also decided to do a very clean magazine type layout for the home page so that you can get a quick general idea of IttyBiz’s offerings if you’re a new visitor. And if you’re an existing loyal visitor, you should also have an easy time finding the latest blog posts and news.

Koldo did the custom illustrations for the site shop banners and items that you see on the home page middle column and store page. And, when it was complete, the design itself was coded by us as a Wordpress theme into the existing site and other small additions were made like threaded comments and related posts. Without getting into too many technicalities, I’ll only mention that we made the code clean and light for fast-loading and SEO purposes.

As far as the general process went, working with Naomi was great. She knew just what problems she needed help with, presented them to us, and then let us help come up ideas on how to resolve them. She said to me during our initial discussion in a light-hearted manner, “Fix my life.” to which I replied, “We can’t fix your life, but maybe we can do something with your site.”.

I hope you all enjoy the new look! Please feel free to leave your comments below.

Designing without a wireframe is like stumbling about blindly. Even if you have a general idea about the design direction and style you want to go in, how do you know where each thing is going to go? Have you stopped to consider where the most important elements on your site design need to be? Where should the eye be drawn? What should visitors read and do?

I know, I know.  That tedious stuff restricts your artistic freedom. How can you let your creative muse flow within all those boxes?

I’ll tell you what. Pretty much all websites should follow some kind of grid and layout. Sorry, that’s the way it works. Have you ever tried to read a flowy text and photos floating all over the place in a hodge podge manner newspaper? I thought not. Same thing (this may be a rant for my next blog post).

So, if you are going to be working on a grid anyway, you might as well start off on the right foot.

Here are some good reasons to start with a wireframe on your next project before you even think about the fancy design stuff:

• Save Time & Costs: I guarantee you will save tons of time by having a blueprint in hand first instead of having to knock down everything and start from scratch when the client asks for revisions to your mockup.
• More Collaboration: You get to spend more time collaborating with the client from the very beginning. This means you can figure out what’s important together. Also, a lot of clients also don’t feel comfortable with the creative aspects of the project, so this gives them room to voice their opinion on what’s important to them early on. That’s so much better than shooting in the dark and then praying the client likes it, isn’t it?
• Good Strategy: Before you even have to worry about what you are going to do with the design, you have the opportunity to focus on what you want the site to do, where everything should be, and how you want the site visitors to react. Taking a little more time to plan in the beginning increases your chances of having a successful project later on.
• Become a Better Web Designer: It’s true. By taking out colors, shapes, and shadows, you allow yourself to focus on the overall composition and layout alone. You may find yourself asking questions like, “Does this make sense?” and “Is this usable?”. That can never ever be a bad thing, no matter what stage of the project you’re in.

In case you are wondering what my process is, it’s actually pretty straight forward. There are a lot of great tools out there, but I like to keep it simple.

First, I draw up a basic and informal wireframe on graph paper. I sometimes make notes about the target audience to the right of the wireframe to help me keep the audience in mind and stay on track. I also sometimes make a list of the elements that need to go on the page so I don’t forget anything and their order of importance. For example, search form, newsletter sign up, rss feed link, banner ads, etc.

This is an example of a very basic wireframe I did for a recent project. The site is not live yet, so I have blurred out identifying information.

After I have done a few revisions of the informal wireframe and gotten it to the point where I think it’s the most logical, I will then do a more formal layout in photoshop to present to the client. Here’s an example of the top fold of the wireframe I did for the Wisebread.com site home page. They later used the layout as a base for their current design.

Want to try wireframing on your next project, but don’t know where to start? Here are a few good resources:

• Wireframes Magazine – Great blog with tons of info not just about wireframes, but also other information for IA’s. I could learn there forever.
• Balsamiq – I haven’t used this tool, but I’ve heard lots of great things about it. Supposedly, it’s just as easy as sketching by hand.
• “Get Wireframing: The All in One Guide” by Grace Smith – Monster list of resources in her article here.
• BoxesAndArrows.com – They also have quite a few wireframe articles.

Fellow designers and IA’s, I’d love to hear your thoughts. What tools do you use and process do you follow during the wireframe stage?

Here are some great advantages of having custom illustration to consider:

1. Get exactly what you want: Want happy flying purple cows? Sure, why not! Now you don’t need to comb through stock photo sites for hours and hours trying to find exactly what you need and feeling frustrated because you couldn’t find anything that represented you well enough.
2. Be memorable: I can’t tell you how many people have told us that they remember our website just because of the illustrations on our home page and the friendly mailman on our contact page.
3. Be unique: It’s yours, all yours. Just for you.
4. Save money: Custom illustration is more expensive than stock photography and stock illustration. But it can be a cheaper option than hiring a photographer and is an excellent way to get the results you want without worrying about props, models, etc.
5. Add personality & quirkiness: Custom illustration is really a great way to add personality to your site and business.
6. Have your own character or mascot: Characters and mascots are a well-known and excellent way to solidify your branding and help create a community around your brand. What do you think of when you think of Geico? That little cute gecko, right? If you get our newsletter, you probably think we’ve been talking a lot about mailchimp lately, but their chimp is hard not to love and is worth a mention too.

We’re currently working on an illustration for a client’s site that we are also designing. This particular client has several competitors, but his business has a particular aspect that sets him apart from the others. We decided to play off of this strength and really help create a personable brand for his business with the use of illustration. We’re very excited about this project and will be talking about it more once it has been completed.

In the meantime, here are some other effective uses of web site illustration that I like in particular:

Intuitive Designs: Yes, this one is ours. It was done by my excellent partner, Koldo. In case I didn’t ever mention how great it is to have a partner/husband who is also a very talented illustrator…well, it is!

For this version of our web site, we really wanted to focus on the collaboration aspect of the design process. We feel that good teamwork between the client and us brings the best results. So, we have the client with their idea, Koldo and I with the client collaborating together, and then the client with the end result of our teamwork.

Navigant Consulting: I fell in love with this the first day I saw it. Serious. Strong. Killer geometrical shapes. Perfection!

Moxie Design Studios: I always loved the retro illustrations on the Moxie Design Studios website. This new version of their site is just as fun as the last one was. Don’t these girls look like awesome and charming hostesses?

Daily Candy: So simple and so chic. I’ve always thought that the illustrations and overall design concept suited their branding to a tee.

Yes Insurance: When you think of any type of insurance, “friendly” isn’t usually the first thing that comes to mind. Yes Insurance looks like they are on a mission to change that. Way to go, Yes Insurance!

We’re guilty of it too. We’ve often asked clients this question in the past: “What do you want your site visitors to see when they visit the home page of your site?”  We would then use this information to determine what should be on that page when we design it. Lately though, I’ve decided to rephrase this question to “What do you want your site visitors to do when they visit the home page of your site?”.

Do you see the difference? The first question is focused on finding solutions and the second is focused on discovering what problems we need to solve before we seek solutions. Instead of asking what we want visitors to see, we are instead thinking about what we want them to do before we decide what they should see. This first step is very important in the process and shouldn’t be skipped.

Once you know what you want your visitors to do, you can then focus on how you will implement your call to action. A call to action on a website is basically an element on your page that shows people clearly what you want them to do next or helps guide them where to go. It could be a button, text, a form, etc. Here are some examples of typical scenarios where you could use calls to action on your website.

• Want new clients to contact you? How about putting up a big brightly colored contact form or button with your phone number? (see our fancy pants call now button above)
• Want customers to sign up for your program? How about a big button that says “Sign up here”?
• Want to sell a particular product? How about featuring that product predominantly near the top of your page?
• Want to increase your subscriber numbers? Move your newsletter form to a more prominent place on your site and offer extra incentives for them.

Take a moment to think about where you are sending your customers. Are you helping guide them? Add a call to action and watch your conversion rates increase. While you’re at it, think about all the other pages on your site too. How about your services page? Do you want people to contact you after they go there? And your blog posts? If you are looking for reader comments, are you asking for them?

What else can you think of that will help your site visitors go where they need to go?

P.S. Want to see another example of another awesome website call to action? Check out Jonathan Fields’ sexy newsletter sign up form on his blog (sidebar, top right). Who knew a newsletter could make you taller, smarter, and sexier?

I bet that a lot of designers who run their own businesses, like me, don’t actually spend a lot of time designing. Most of my day gets divided up into tasks that are decidedly not very “creative”, like administrative tasks, communication, planning, marketing, small touch ups, coding, etc. etc.

When we spend the majority of our time doing such tasks, sometimes we start to forget why we decided to do this job in the first place. And that’s just sad.

Before I started designing, I didn’t know what I wanted to do career-wise. Like many young people, I spent a lot of time in high school and in the university dedicated to trying to find a career, learning lots of new things in different subjects, but not really finding anything that I felt totally passionate about.

When I discovered design, it was like I had finally found something that made me want to jump out of bed every morning. For someone like me who is both creative and analytical by nature, design is the perfect fit. So, this post is dedicated to my main passion and what makes this job worth doing for me.

Why I love design:

1. Problem Solving: This has to be the number 1 reason I love design. Being presented with a problem and finding a solution to that problem is really what this is all about. That’s why we always say to clients “Give us problems, not solutions”. It’s our job to solve problems!
2. Organizing: I never thought I was an organizational freak, but taking a bunch of information and placing it a way that’s it’s both usable and easy to understand is just so satisfying. It’s like when you spend a week reorganizing your whole house and then feel so great afterward. Totally awesome.
3. Fixing Stuff: Who doesn’t like to fix stuff that’s broken? Is your shop not selling products, are potential customers not contacting you, is your form not working? Come to me and I’ll help you fix it! I’m like a handy (wo)man.
4. Helping Clients: I love being able to help a client from start to finish on their website project and then see their business take off. Business and new product launches are so exciting and I really love to be a part of that.
5. Trends: The fast moving trends and staying on top of things make a design career an exiting place to be. There’s pretty much a guarantee you will never get bored because you ran out of new things to try and learn.
6. The Challenge: This is pretty much a culmination of all of the above things. This work is more complex and challenging than it appears on the surface. Between problem solving, researching, keeping up with new trends, constantly improving your skills, etc., there’s not much time to sit around and get comfortable. People in this industry who are slow to react, adopt new technologies, and adapt their businesses fall behind. A one year break would most likely place you out of the game. I like it that way.
7. Planning: Sometimes I think the planning and research phase is funner than the actual design stage. It’s just fun to start laying things out, organizing, and thinking of all the possibilities. The design itself is just a visual culmination of all these things to me. If you do your research and lay the groundwork properly, the design will reflect that and there’s a good chance of success.
8. New Technology: Web 3.0, HTML 5, trying new apps, working “in the cloud”? Bring it on!
9. Making Pretty Stuff: There seems to be a general misconception that this is only what designers do. To be honest, it’s not the highest on the list of priorities for me. I believe the main objective of a web site shouldn’t be to be the most beautiful, because that means nothing if it isn’t easy to use, straightforward, and effective. But, if you have all of the above and then a catchy and eye-pleasing design, you have it made. That said, there’s isn’t a good excuse for an ugly website that hurts your image and branding, ever.
10. Inspiration: Inspiration is all around us. Seriously, just go outside in nature and tell me that’s not inspiring. I also love looking for inspiration at magazines, television ads, art, furniture, packaging…the possibilities are limitless!
11. Giving Back: Ok, I know I said 10, but this one had to be included. Every once in awhile, we get to work on something that inspires people or maybe we can even hope to inspire people directly. It may be for our own side projects, may be for a pro-bono project, or may be just helping out for a cause we believe in. It just feels good to be able to contribute to something meaningful.

How about you? Why do you love your job?

This is the main reason we ask what your budget is for the project in the RFP worksheet. This helps us determine what we are able to do for you. Without it, we’re shooting in the dark trying to estimate within a magic number that may or may not be the one you have in mind. This wastes a lot of time going back and forth for both us and for you.

That said, there are ranges that may help serve as basic guidelines to help determine a general budget if this is your first site and you have no idea how much it may cost. Redesign projects may be similar depending on the individual requirements of each.

These are general price guidelines you could expect while working with us. All studios charge differently based on a large number of criteria. As a small studio limiting the number of projects we take on, we are able to work quickly with small overhead, thus keeping our prices reasonable.

• Basic Wordpress Website: A basic Wordpress site with a custom design, up to 10 pages of basic content, a blog, and very few extra bells and whistles will usually run between $1800-$2400.
• Larger Wordpress Site With Bells & Whistles: A Wordpress site with extra features like a small shop, forums, lots of content or other advanced features will usually run $2500+.
• E-Commerce: E-Commerce sites with custom designs generally run $3000+
• Large Sites: Large complex sites for organizations built in more advanced content management systems like ExpressionEngine or Drupal usually run $4000+. These sites generally have advanced features, a complex information hierarchy, and user interface design that need to be planned out very carefully.
• Logos: Logo designs are not included as part of a website design unless requested and will usually run anywhere from $600-$1100.
• Illustrations: Custom Illustration can also be added to the web design, but is estimated based upon how many illustrations are needed and the complexity of the concept and style needed.

Please keep in mind that a professional web site design and development is a business investment and should be treated as such. The process works best if you have clear goals before you start and decide on which terms it would provide a good return on investment for your business. If you are starting a personal project or an individual starting out with a very small side business, this type of service may not be a good investment for you at this moment.

I hope this helps clear things up a little! Please feel free to contact us if you would like to discuss the requirements of your project or schedule an initial consultation and we will be more than happy to help!

Note: Prices posted are subject to change at any moment and may not reflect our current prices since the original date of publication. Please check with us if you need a solid idea of what your project may cost.

Well, just 7 months after the second redesign of Koldo’s site, we decided to redesign it again! After a few long talks, we decided that he needed a new design to fit with his new store and that the design wasn’t working for him as well as it could have been.  We purposely made the last design simple in order to leave focus on his work, but we both felt it was lacking something. This new design is also simple, but we feel it has more character  and represents Koldo’s work and style better.

Koldo did the design himself  including all of the small illustrated elements throughout. I love how he integrated his little creatures into places like the newsletter form and search box. You can tell they are having fun, can’t you? One of the most apparent talents I think Koldo has is his ability to create awesome and original creatures. He’s so imaginative and is one of those people who is constantly coming up with new ideas. Most of the time I don’t know how it does it, but they always fascinate me and make me smile! I hope you enjoy them too.

Any comments or feedback you might have about the site are very very appreciated, as always. Thanks so much.

BluePrint Balance is now live, whoopee! BluePrint Balance is run by Laurie Gay, a writer, lawyer and coach who helps burnt-out corporate employees discover the energizing careers that they are meant for and express the best of themselves in work and in life.

I have to say, working with Laurie was just so easy. She knew exactly what she wanted and gave us lots information to get us started in the right direction. Just what we love! Besides that, Laurie is a great person and I think it shows through in her writing that she loves helping people.

If you are a struggling corporate employee or know someone who is, you should definitely check out her blog, especially her post “Welcome! I’d Like to Introduce Yourself. “. I think a lot of us might find a little of ourselves in there, even if we aren’t a burnt out corporate employee.

We custom designed her site design and logo and built it into the Wordpress content management system so that she can manage her site content and blog herself.

Visit the site here.

1. If they are available and interested in working on your project (logically!).
2. If they have any other clients that are in your industry. A lot of times, it isn’t necessary for a designer to have experience in your industry because there should be a research phase where they study your industry before starting on your project, but some designers do cater to specific niches.
3. If they have a team of people and capacity cover your needs. Some designers are just one or two man shops, but work with other professionals to provide whole website solutions (programming, SEO, copywriting, photography, online marketing, etc.) It’s good to get a general idea of how they work so that you know what to expect.
4. What their process is. Are they willing to collaborate with you and keep you abreast of updates in a timely manner?
5. What information they need from you. Often designers will get back to you after reading your RFP document and have additional questions about your project.
6. Who will you be in contact with throughout the project? It’s good to know if you will be in contact directly with the project manager or the designer. You should expect to be in contact with just one person throughout the process in order to avoid unnecessary communication complications.
7. If they offer maintenance and training services. Some designers don’t handle maintenance after the project is done. If they don’t provide maintenance services, are they willing to train you to update and maintain your own site?
8. Will they provide ongoing support of your site after it has launched? If so, what is the support period for bugs and fixes?

That wraps up the planning your website series. If you have anything to add or any questions, please leave a comment below and discuss.

Other articles in the planning your website series:

Part 1 – Before You Contact a Web Designer
Part 2 – Preparing Your RFP Document
Part 3 – Finding Potential Web Designers
Part 4 – What to look for in a Web Designer
Part 5 – Questions to ask your potential web designer

Some related resources you may also find helpful:

Example RFP
The Web Design Process
What to Expect
How to get the best out of your web designer