Blubolt has moved to 25 Queen Square! It’s just around the corner from our previous office, but it is quite a bit larger so we have lots of room to expand, as we have been doing at an alarming rate!

Check it out, I’ve got the best desk:

Check out my view of the park! I sometimes stare out here and imagine what life would have been like in the 1800s when 25 Queen Square was brand new and residential. I picture myself in one of those big dresses, going out for my three turns around the park with a handsome Mr. Darcy on my arm. I love daydreaming about the 1800s…

Anyways, back to reality. On the other side of the room sit Daniel, Max, Krzych and Trevor.

Here’s a panorama of the front-facing windows, including a very shy  or scared Trevor. You can also see that we’ve hung the auction painting (it’s a Dominic Hills) on the wall near my desk.

Spinning 180 degrees, we’ve got Saud and Deividas separated by a small partition. Off to the right is our tea station, currently stocked with seriously amazing teapigs tea [new website coming soon!].

Further back, we have Duncan and Craig.

Vito and Alan also work back here.

Behind them is the small meeting room, which I didn’t really photograph as we had some clients working with us the day I took these photos and I wasn’t sure how they’d feel about being paparazzi’d.

From the small meeting room, looking towards the front windows, you can see how long this space is. Craig sometimes even has to use a loud speaker to get Max’s attention!

Despite the continuous stream of ambulances and car horns, we’re loving this office. It’s so nice to have room to stretch our legs – literally! We’ve even got another large meeting room and smaller storage room on the 2nd floor which aren’t photographed yet as they’re in need of a paint job.

As much as I loved my pink office, it’s just so nice to be part of the office banter again.

1. Take a photo of my sketchbook

2. Email photo to myself

3. Open in Photoshop

4. Crop & Fix

Quickly, I crop out the other crap. Then I desaturate the image (CMD + SHIFT + U) and manually correct the levels (CMD + L). You’ll see that the levels look like something like this before: Ideally, the whites need to be white and the blacks black. Afterwards, my levels looked like this: I’ve never really thought about how I do this step, but I guess I drag the dark slider to the right of its mountain and the light slider to the left of its mountain, then play around with the midlevels until it looks right to me. These four steps are quick as anything for me and beats mucking about with a scanner, in my opinion.

Figure out your branding

I can’t tell you how much easier it is to design a website when provided with catalogues, past advertising campaigns, copy that is indicative of your company’s voice, etc. When you know where you’re going, it’s much easier to follow you there. Occasionally, I’ll be given a “go nuts with it” or “we’ll provide the logo later” spec, but chances are good that I’ll go in a completely different direction than you were envisioning. If there’s a disconnect between your designer and your brand image, your website will stick out like a sore thumb.

Done poorly

In my opinion, the Laura Ashley redesign is a great example of what happens when the designer doesn’t fully understand your brand image. If you have a look at their catalogue, Laura Ashley is all about texture, traditional British patterns with a touch of shabby chic. The website now looks too “John Lewis” and not enough “Cath Kidston.”

Other branding confused sites are Ted Baker, The White Company (post-redesign), and Gucci. I won’t expand on these, but feel free to ask me about them in the comments if you’re interested.

Done well

Kate Spade is one of my absolute favourite online stores right now. Not only do they have a “Play” catalogue section that they keep updated, but the colours of the entire site change seasonally to relate to the product line. The website screams “utility, wit and playful sophistication” which is coincidentally how they describe themselves on the about page.

Other noteworthy sites that relay the brand well are Joules, Hollister Co., and Habitat.

Get your photography done first

This kind of goes hand in hand with branding. You can ramble off the usual adjectives (clean, simple, organized) to your designer, but if you show your product lifestyle photos and/or some creative photos of your shop interior, we will be way more likely to get the design right the first time. Plus, isn’t it so much nicer to look at a design mockup with your lovely images in place?

A lot of the time, clients will have us whip in some stock images while they get their photography together. This works, but hunting down appropriate stock images is not really great use of my time. I’d rather be laying nice typography over your actual lifestyle images!

The entire web design can hinge on the photography; this is especially true of fashion stores. How boring would the Reiss layout look with grey boxes in place of the photos?!

Bornshoes.com is another excellent example. The lifestyle shots define the brand, own the layout and make this website. The photography in the background scales with the window, too (which is kind of hard to illustrate from this little thumbnail so go and have a play with it). If you’re interested, they also have a behind-the-scenes page about the photography team.

Know your competition

What is your competition doing well? What could be improved upon? What will drive users to your store, as opposed to theirs? Does your product have a specific feature that theirs doesn’t?

Our most successful clients have done this well. Sometimes it can be as simple as an uncluttered design or approaching the main navigation differently, but other times clients have had to offer additional services or add extra functionality (such as interactive catalogues or liquid layouts) to their site.

Inject personality

Does your brand have a unique voice? A character, perhaps? An interesting and relatable personality is far more likely to get sales. Same old, same old is boring! Be brave!

An obvious way of injecting personality is through a blog. Any lifestyle store should definitely have a blog accompanying it. A blog will also help with your SEO and returning visitors as well as refer readers to relevant products. I think that Lilly Allen’s Lucy in Disguise store website leaves much to be desired, but the blog posts written by fictional character Lucy are interesting, unique, and enough to persuade me to keep visiting the site.

Done well

Marie Catrib’s is just so dang adorable. The personal touches and handwritten copy draw you in.

Don’t be too vague or too specific when briefing your designer

When it comes to explaining what you like and what you don’t like, keep in mind that you’ve hired a professional for that very reason: they are a professional. Don’t stifle their creativity.

Try not to limit yourself to one inspiration website (cough, John Lewis, cough) but be careful not to provide too many.

In fact, these days I actually prefer to work from a list of adjectives and lifestyle photos, when possible. Inspiration websites are fine and I do like to discuss which sites you like and why, but the why is the important bit. There’s nothing more confusing than receiving a long list of websites with contradicting styles and not knowing how to interpret them. You need to say what you like and why.

Equally important when briefing your designer are sites and styles you do not like. I find this probably more useful than just hearing about sites you do like. No left navigation? No problem. No dark backgrounds? Cinch.

What style do you like? Grunge? Clean? Collage? Grid-focused? What layout style suits your brand and why? Figure out what you’re after and make us designers understand you, but give us room for creativity. If we’re meeting face to face, I actually like to scribble up layout wireframe ideas right then and there. I think most designers will probably happily do this with you. It’s good to start off the project on the same page.

Know your statistics

What’s your conversion rate? What age range are your current shoppers? Are you looking to expand your target market? How will you market to them? What browsers do current shoppers use? Do they abandon their carts? Are they likely to become loyal customers?

Knowing a lot about who your customers are and how they shop will help you immensely in redesigning your store. Adding loyalty cards, referral campaigns, recommendations, etc are all do-able, but are they worth their while?

Be social

Build up your fan base by being active on Twitter & Facebook. An easy trick would be to hold contests & giveaways, tweet about them with links shoot potential customers off to your blog. Offer exclusive discounts through your email newsletters and tweet like crazy about this. Create conversations by asking questions with the new Facebook Questions feature.

Stay relevant and tech-savvy by any means necessary, and use your brand’s developed personality to really sell it. It really depends on your product, but you could send SWAG to YouTube weblebrities or relevant bloggers in hopes that they will promote you. (Hint, hint!)

Hopefully this is helpful. There’s probably a lot that developers could add to this; feel free to comment below!

I got thinking about how that applies designers as well. The designer ego is essential and we all have it. If we thought our design skills were crap and that our work wasn’t worth being proud of, we wouldn’t make websites.

The trick is, then, to keep our swollen heads from exploding. I’m no saint, but here’s how I handle it.

When clients tweak our designs

Paul Boag mentioned in his talk at FOWD Bristol that clients often focus on the solution rather than the problem. For example, a client might say “The button should be blue and make it bigger” (solution) instead of “The button needs to be more prominent” (problem).

When a client tweaks our design as such, our initial reaction is, “I’m the designer-what do you know?!” and that can make us want to ignore the request just to spite the client.

In this situation I take a time-out, especially if my ego has flared up. Then I think about what the client has requested and 95% of the time I try it. Sometimes I realize the client was right after all and stop there.

But sometimes I try what I want to try and then show both options to the client. If I feel really strongly, I’ll explain why the second option is better using the Elements and Principles of Design or Don’t Make Me Think or some other credible source. Often they say “Oh, I never thought about doing it that way,” and then everyone is happy and life goes on.

Occasionally I’ll really lobby for my option and they’ll choose the big blue button anyway, at which point I remind myself that they’re paying and I’ve done all I can. I see this sort of thing on Miami Ink all the time.

When we have to work as a team

This one is a constant stuggle for me. Chris and I often have to collaborate on designs and it’s extremely difficult for us both. The important thing is that we have mutual respect – without this things would unravel quickly.

• Ask questions. Why is that there? Why did you do that? What would it look like if we were to try this? Every designer has a reason for why they’ve done things a certain way but you often can’t empathize until you ask them why.
• Realize that you have different, unique design styles. Right now I’m into minimalism. Chris is into grunge. The buttons he likes aren’t necessarily the buttons I will like, and we often have to step back and go, “Okay, are we nit-picking? It’s a matter of personal taste” rather than arguing over it. Pick your battles!
• Don’t make it a competition. Chris and I break this rule all the time. We’ll each have a concept design that we’re proud of and then pitch both to the client. The client will inevitably want bits and pieces from each design and then neither of us will be happy. To reference another annoying cliché, there is no ‘I’ in ‘TEAM’. Work together!

When we have to self-critique

It’s easy to look at something I did yesterday and be quite chuffed with it only to look at it several months down the road and go “What was I thinking?!”

Self-critiquing is incredibly difficult when you have put so much thought and effort into your design that you feel you should be proud of it, even if it didn’t turn out very nice.

Here are some things I do when self-critiquing:

• Put myself in the position of the end user. Would this make sense if I were a first-time visitor? Where would I look first?
• Check contrast & balance. First I take a screen shot of the website and desaturate it, then zoom out and squint a bit. Overall, is it too grey? Is there enough white space? Is there a clear visual hierarchy?
• Question the colour. Does the colour scheme fit with the brand image? Do any of the colours compete (too much contrast)? Would the colours look as good on a non-mac screen?
• Can I make anything better? This goes hand in hand with “Is the design finished?” and involves taking time away from the design. Do something else: check out design galleries, flip through some magazines, go for a walk, sleep on it, etc. Then have another look at the design with your gained perspective.

General Rules

• If your design gets added to a gallery or someone’s blog post, give yourself a much deserved pat on the back and then move on. Don’t obsess about it! There are so many design galleries these days that it’s not a supreme honour to get a mention.
• Bookmark (Or Littlesnap, if you’ve hopped on the bandwagon) the most innovative web designs you come across and use those as motivation to design outside of your comfort zone. Try a different style genre. You’ll probably suck at it, but you’ll learn lots!
• Read up on web typography. It’s so flipping interesting, and seeing good typography humbles you fast.
• From time to time, look at work from several years ago and cringe.
• Look at magazine design and wish you were that good. Then try to apply some of the design techniques to web!

I hope this didn’t sound too preachy. It’s hard to stay critical and objective of your own work and I know it all too well. Having said that, some really great design is born from confidence and gut-instinct.  It just doesn’t come that easily to all of us.

Freelance Pros

• Setting my own schedule. I often worked long hours throughout the week so that I could have one or two ‘sleep-in’ days.
• Bragging rights. I used to love saying “I work for myself,” at 22 years old!
• Wearing pajamas to work. Casual Friday was every day! You should have seen my hair…
• Being picky. I didn’t always have the luxury, but when things were busy, I could pick and choose which projects most interested me.
• Travel! This was a huge deal for me as I was flying to the UK every couple of months. Working remotely gives you the freedom to work from anywhere!
• Writing off things. When tax season rolls around, you’ll have a lot of expenses. Phone, cable, computer costs, and even a portion of your rent!
• Meeting new people. Freelance designers have a ‘secret club’ in which they share project ideas, inspirational sites, CSS tricks, fonts, and more.  When a fellow freelancer contacts you, RESPOND!
• Personal projects. When things are slow, you’ll have spare time to work on personal things which will help keep you motivated and interested.

Freelance Cons

• Not knowing when work is coming in. It’s a little stressful worrying about not getting enough work in to support yourself.  It got hectic at times
• Not knowing when money is coming in. This makes life ultra complicated when you have to spend a weekend eating Kraft Dinner and not going out just in case that client’s cheque doesn’t arrive.
• Being unable to trust clients. I learned this the hard way! Be wary of in-betweeners: the ones who outsource client work to you.  Some you can trust, some you can’t.
• Instant messaging. When your clients know you’re a click away, they’ll waste so much of your time by interrupting you with Skype messages and not letting you get properly ‘in the zone’.
• Lack of holidays. As a freelancer, most of my holidays turned into working holidays.  I didn’t work I didn’t get paid, and my work would pile up.
• No benefits. You better get used to paying for dental, meds and whatever else an extended healthcare plan would cover!

Full-time Pros

• Steady pay. It’s nice to be able to budget accurately with a salary you can rely on.
• Better pay. I spent too many freelance hours doing things I wasn’t getting paid for, which meant that I was working less than full-time and quite often invoiced clients for less time than I spent.
• Holidays. It’s nice to get away on long weekends and relax!  I feel a lot more relaxed now.
• Steady work. In an agency you don’t have to reel in your own clients!
• No more invoicing! It’s such a relief not to have to do the administrative side of things anymore.
• Social interaction. It’s nice to have people to talk to during the day!

Full-time Cons

• Answering to a boss. This is particularly a difficult thing for me as my boss is also my boyfriend.  But he forgives my occasional attitude and we make it work.
• Work you’re not interested in. You can’t be picky in an agency; you sometimes have to do things you don’t want to do.
• Set hours. I’m not a morning person, and thankfully blubolt is flexible with this one because I’m generally more productive after 10am.
• Planning meals gets a bit trickier. You have to plan your lunch (or buy it) and prep dinner if you want to eat right when you get home.
• Teamwork. As a freelancer YOU call the shots – it’s a lot more difficults to work as part of a team.  But also a lot more rewarding.

For me, freelance was the right thing to do at the time and working for an agency feels right now. It all depends on your place in life, I guess. Despite all the ups and downs, I’ll always think fondly of my freelance days!

Web Fonts

You’d think that print designers who regularly use the web would notice that fonts like Arial Rounded or Bank Gothic can’t be used for large portions of body html text. They’ll sometimes complain when their designs came back not looking exactly like the PSD, and I have to explain to them that using images in place of text kills SEO and makes the site near impossible to update.

Screen Size and Pixel Perfection

There is nothing worse than taking a look at a PSD and realizing the sizing is all off. The width of the page is 2400px and the font sizes are all half-point sizes as though the PSD itself has been a high res Illustrator file that has just been scaled down. My heart sinks when I see edges of photos anti-aliased and what should be 1 pixel lines are 2 or 3, anti-aliased. Some designers don’t understand that vector shapes in Photoshop will have antialiased edges if you’re zoomed in to more than 100% while creating them. It drives me nuts.

Grid Layouts? What are they?

Often times a web design from a print designer will have wacky spacing and unbalanced columns. I suppose this has to do with their lack of understanding of reusable CSS. What looks good to them might not be practical for web, because while print typography is static, content on websites is dynamic. In web design, you have to consider the length of the content that will be posted. What if a leftnav link is long and wraps to two lines? How will your rounded border coupled with gradient background work then, huh?

Graphics Heavy

Okay, okay, I admit, I’m somewhat guilty of this myself. I’m often pwnd by the developers here at blubolt for having background images that are too large, but on the whole I try to keep my web designs CSS focused rather than the 1990s graphics-overkill movement. This speeds up load time and the time it takes to code the design as well.

Recycling

Occasionally I’ll receive a PSD that has a submit button looking one way on one part of the site, and entirely different on another. This is usually where I step in and consolidate the styles.

In conclusion, most of the issues discussed have to do with the importance of usability in web fonts, screen size consideration, grid layouts, graphics sizes, and continuity. When designing for web, you can’t make things frustrating for your end user or they’ll x out your site and find something simpler.

Designers: Developers don’t like you because you represent Work and don’t see why said work is wholly necessary. Developers: Designers are scared of you because you are the gatekeeper. This is the dynamic. Discuss.

There is a bit of a struggle between what will look nicest / be most usable and what is actually practical given the timescale and budget. I think developers have a better grasp on reality and designers tend to dream big.

How can stronger communication be developed not only between designers and developers, but also between designers, developers, and creative teams (art director, copywriter)? How can a team bring them into the fold more effectively?

I think working with people you feel comfortable with helps a lot. I spent some time working with my brother (developer) and neither of us hesitated when we felt the other was doing something that ‘sucked’. We were brutally honest but both respected each others’ criticism and worked hard to try to impress each other. Big teams need project managers to keep things on track. Unfuddle is good for this!

How soon should a developer be engaged to sense-check a design? At design brief? Before it goes to the client?

It helps to collaborate with the developer about what types of things are do-able before any of the design stages – perhaps in the initial client meeting. The developer should definitely sense-check before the design goes to the client so as not to give false promises. I think the best point would be wire-frame stage, although it doesn’t always work out that way.

Is it a mistake to make the lead developer the project manager?

Not necessarily. I think the lead developer has a good sense of the scope of work involved but it depends on their personality.

It seems that designers are under pressure to design an exceptional and unique experience and developers are under presssure to produce sites with high performance and little/no errors. Designer’s goals add pressure to developers and vice versa. How can our goals work together intead of causing pressure on each other?

Know when to compromise. A website is never going to be as perfect as you dream it to be when there are clients involved, but make sure you satisfy their basic expectations before trying to go above and beyond. For designers this sometimes means leaving things out in the initial phases of the design and filing them under the “if we have time” category. Don’t set the client’s expectations higher than you can deliver.