This calls for a bit of backstory: I graduated from Seneca College’s graphic design program in September of 2010. After enduring a less than stellar internship as part of a credit, I naively decided to take some time off to work on my portfolio. This turned out to entail days of perusing the Internet, comparing myself to everyone better than me at everything ever, and getting increasingly discouraged in every sense. I couldn’t even bring myself to apply for anything, making the excuse that I shouldn’t be wasting my time; since I was so craptacular, no one would consider hiring me for anything ever anyway. A couple of months later I was still quite obviously going nowhere, and the prospect of gaining a little Holiday money was too enticing. I took on a full time documentation role I had previously had as a summer student (but only for now, I kept reminding myself). I got far too comfortable (read: lazy) and stayed there for over a year, all the while ungratefully complaining and making excuses while the ever evolving design world continued to pass me by. And because of my lack of motivation and self-confidence, my freelance career was floundering as well. By this January, I was fed up with myself and spent every spare moment searching design job postings. If not now, then when? became my mantra. So when I came across Filament’s, I lit up with the potential promise of gaining experience, progressing as a designer and feeding off a group of such seemingly awesome people.

I worked harder to prepare for the interview than I ever had before. I studied every bit of copy on their website, memorized their process and creeped their tweets and blog posts. I rehearsed presenting my portfolio, studied common design interview questions and encouraged myself to sound confident and overcome my chronic awkwardness. I was told to bring a tablet or laptop to the interview for a bit of an open-book quiz. Freaking out that I was going to be building a small website on the spot or designing a layout or coming up with logo concepts, I studied even harder days before the interview. But when Steve sat me down and gave me a piece of paper with 20 completely unpredictable questions listed front and back, I was initially bewildered. It ended up being more of a hilariously arbitrary assessment of one’s Google/Wikipedia skills that tested the resourcefulness and intuition of a candidate. I won’t spoil the questions for you, potential new interns, but believe me when I say– it was the most unexpected, entertaining and overall enjoyable interview I ever remember having. I, later got a response detailing that I was chosen as the new design intern and couldn’t stop beaming. I forgot that it was humanly possible to actually look forward to going to work, and couldn’t wait to start.

Right off the bat within the first week I had genuinely learned more than I had learned in an entire year on my own. I got to know organizational and productivity tools like Basecamp, Invision, Trello and wireframing tools like Omnigraffle. I was encouraged to read relevant articles and take notes on talks from conferences, ranging from Photoshop tips to breakdowns from design veterans on why being a designer is so important (and awesome). I quickly began to retain a much clearer understanding of expectations, estimation and what would be acceptable and unacceptable as quality work for clients. My first task was to design a website for a faux client with me as the client-facing designer. There were no due dates or essays, but by the end of it I had a much deeper comprehension of client facing work than any school assignment in my experience. I also came to love Filament’s creative process because I thoroughly understood why it works so well. This made-up-client-facing assignment was, so far, one of the most valuable experiences I’ve had during my design career. I learned a ton and was forced to overcome my limitations in the face of productivity, as well as living up to my own standards of quality work. Sitting down and doing the work was eye-opening in terms of my expectations of myself, and the quality of my output. As a general note, thinking that you’ve got the skills to crank out your very first entire web design concept in 8 hours is a hell of a lot different than actually sitting down and doing it —it took me a week and a half.

Within every subsequent undertaking, I would apply the process, becoming increasingly more competent as I went along. I particularly enjoyed creating moodboards, which help map out the direction a design concept will be going in. It’s sort of a scavenger hunt for inspiration that encourages you to find examples of great execution of imagery, colour, behaviour and type throughout the web. And, in another piece of advice from my teammates, the path to unbridled creativity and confidence in your abilities as a designer has got to start out with loads of practice and yes, even forms of imitation used sparingly. Additionally, not only was adhering to professional web design standards something new for me, but designing with varying screen sizes and usability issues was another eye opening lesson. Encouraged to think critically about responsive design was extremely valuable. Within one project, I spent an appalling amount of time working out wireframes for a mobile site, but it was time well spent to help me truly understand optimal functionality. Having realized the potential and capability of a designer to make things better, easier and faster for all users was a eureka moment for me.

The amount of creative freedom that was afforded me is every designer’s dream. But naturally, each design decision had to have a fully thought out rationalization. It’s fascinating to observe the kinds of creative decision making and problem solving that the team will put their heads together and come up with. Filament’s creative ideation process spawns such great concepts that, as equal parts an observer and actively engaged, my creative itch is scratched just by being in the room. Not once did I feel taken advantage of, unlike what I hear many design interns may have to endure. Never did I consider the work that was assigned to me as bitch work or slave labour. I loved coming in everyday and wanted to be of utmost use to everybody in the office. The enthusiasm that I felt coming in to work was perfectly matched by my teammates’ attentiveness and eagerness to teach. I was consistently excited to come in and work my ass off. There were periods of varying intensity and busyness but almost every day I was hard at work doing something useful. From client-facing deliverables to trying to cram as much useful design-related information into my brain as possible, every day bordered on exhausting but incredibly rewarding.

Like a good intern, I kept my eyes and ears open at all times. I watched as the creatives rationalized including or removing elements of a particular design. I would open up any .psd I could find and study the techniques used so that I would be able to break down the execution. I eavesdropped as hard as I could to every conversation related to design problem solving, from creative strategy to development issues. I wanted to be a sponge that could soak up as much as I could possibly retain. Accordingly, my mini notebooks are filled with scrawls, crammed in to any available space, of Photoshop techniques, shortcut tips, advice on best practices and song titles to download (Rdio/Spotify plus the unrivaled music taste of the Filament team had singlehandedly revamped my entire iPod library in a matter of weeks).

I had some missteps along the way for sure, but the team would never leave me hanging. My self-doubt and insecurity continued to plague me, but there’s nothing better than having such a great support system sitting directly beside and across from you. Answers to questions and advice were there at every turn. Yes, it was unpaid, but they had some pretty awesome perks. Your choice of free lunch twice a week from a myriad of excellent options in the heart of Liberty Village? Sweet. Metropasses? Yes, please. Infinite music library courtesy of Rdio and Spotify? So good. And compensation for certain client-facing deliverables? I certainly took advantage of that!

My internship at Filament has taught me an almost overwhelmingly vast amount of knowledge in such a short time. I had grown incredibly over those 12 weeks, and certainly more so here than I would have anywhere else. Because the Filament team is so small compared to most other design firms, I was truly engrained in every step of the design process for a wide array of clients. I continue to marvel at my co-workers’ expertise and passion for what they do. They remain to be among the most effective, helpful, attentive and truly caring teachers and mentors I’ve ever had. I continue to learn and grow every single day here at Filament and I am truly thankful that I was able to have an opportunity like this to learn from such experienced and supportive people. Hanging out with four (+1 from afar) truly talented, passionate, hilarious and overall awesome geniuses every day only makes you want to work as hard as you can to get to their level.

We’re going to be veering into cheesy territory for a moment here, but my 2012 resolution was to find a job in the design field in which I can honestly say that I love coming in to every morning. I feel so fortunate that I had this chance to spend such an amazing time at Filament, and I can finally say that I have actually achieved my goal. They hired me on full time as a junior designer! It’s such a rewarding feeling. (And now, I guess, to work on that other new year’s resolution– dusting off that gym membership.)

Phew, enough about me. Here are a few tips on how to be the best intern you can possibly be.

Be Humble

So you just got your dream internship and you feel like a champ! You just beat out all of the other applicants to gain a spot as a team member within one of Toronto’s best digital creative agencies. And of course you did; you were at the top of your class, always coming up with brilliant and unique design solutions, and you may have even won some student awards. But check whatever ego you have at the door, and know your role. You may have the freedom and ability to pitch what you think are solid design ideas to your coworkers. Just don’t start thinking that you’ve got the know how to tackle an entire client facing concept on your own. Don’t think that you can slap on your ‘personal signature style’ to every single project because it looks cool. Don’t give everyone outrageous time estimates that you’re likely not to follow through on. Don’t think that just because you’ve spent a hell of a lot of time buried within the Creative Suite, you’re good enough to dismiss or disregard any offerings of advice. And don’t forget that pretty much everyone around you has loads more hard earned industry experience than you. They may remember what it’s like to be you, but don’t think that you know enough to know what it’s like to be them. Be confident, but don’t get cocky!

Have a Good Attitude

Putting in hours on end and not making enough to buy yourself lunch may creep up on you now and then. Poor us, right? It’s hard for now, but don’t let it get to you. If it does get to you, don’t let it show. You’ve got to let your enthusiasm and eagerness to learn shine through. Positivity is infectious, and so is a bad attitude. Seriously, nobody likes a downer, or a jerk.

Remember that You’re With Them, Not Against Them

Since you’re working with people who are more experienced than you in so many ways, use that to your advantage. Seek out criticism from them, and keep an open mind at all times while listening to it. Feedback can often be hard to take, especially if it’s negative, but it’s so imperative for improvement of your skills and the thickness of your skin. You may have to defend your designs by coming up with solid rationalizations, but if you haven’t got one, then don’t take it personally if they recommend that you make some changes.

I would love to paste the entire 10th chapter of Mike Monteiro’s Design is a Job here if I could (read it, it’s so good), but to quote from it:

As the person being critiqued, you need to realize that the feedback is not about you, it’s about the work. And you need to be open to good ideas that come from places other than your own head. There’s a balance between defending your work and remaining open to better ideas that takes a long time to develop. It takes confidence, intelligence, and an open mind to allow others to help you make your work better. It takes a thick head not to.

Ask Questions

You’ve been assigned a to-do, and you want to prove to everyone how spectacular your initiative and can-do attitude is. You don’t need to slow everyone down with any questions that have clearly obvious answers. You kind of already assume the direction that they’re going in with this assignment, so you’re good to go. This project takes you a good 20 hours and you’ve finally got it polished and perfect. You smugly ask your coworkers to come on over and give you some quick feedback before posting it for review. Expecting a ‘Wow, you’ve got the entire project finished, you’re hired!’ instead you hear a ‘Hmm…we actually wanted the complete opposite of this, you should have come to us for some clarification’. And that’s when you feel like a complete idiot.

Yup, I’ve done it. I still have a bit of a phobia of interrupting people and or potentially wasting their time by bothering them with my stupid questions. But asking questions benefits everybody. Taking the inconvenience of an extra 30 seconds to have a question asked and answered is far more beneficial than taking an extra 30 hours to revise everything you just spent 20 hours working on, which won’t be used whatsoever. Working independently as a student, whether choosing to procrastinate and accept a late mark or taking your time for days, is far different than working as a team meeting strict deadlines. You may not be getting paid for it, but every hour counts, and if you’re not striving to be the most efficient with your time then you’re not benefitting anyone– least of all yourself.

Work and Study Your Ass Off

You’ve got to put in the work. It’s not just so that your employer can take advantage of your free labour of course. You’re learning loads along the way. And you’re probably not as great as you think you are. The harder you work, the better you’ll be. The more feedback, advice and criticism you receive, the better you’ll be. The more blood, sweat and tears you put in (and there may be plenty), the better you’ll be. The only way to get better is to sit down and do the work. Be a sponge and try to soak up everything that you possibly can. Take notes on everything, follow through on your tasks and be consistent.

And don’t think you’re out of school just yet. You may not have any electives to sit through anymore, but don’t think you should be going home and wiping your brain of everything design. Read awesome design blogs. Stir up some conversation online with fellow designers. Go over your notes that you jotted down throughout the day from work. Do some of those free Photoshop tutorials. Do self initiated projects. Then come in early to work the next day and leave late.

If you are unfamiliar with style tiles, there’s a handy website that will give you an idea of what they’re all about. For us, they’re proving to be useful—really useful. Which is why I was so annoyed by the commenters on the alistapart article.  Some missed the point all together and showed a tremendous lack of respect towards clients.  I posted my comments, but as it turns out, I’ve got a little more left in the tank.

You can call style tiles whatever you want, though “Style Tile” is catchy and to the point. Commenters on the ALA article, argued that the use of a board with groupings of stylistic elements isn’t a new idea. Fine, you win, I’ll concede that the idea isn’t revolutionary. However, its not always the tool that matters, it’s the application. In an age where brand and content are consumed across multiple channels, the inclusion or application of the style tile in the web design proces has never been more appropriate.

Just as it made our lives infinitely easier to separate presentation from markup with CSS and HTML, the idea of getting granular and identifying that style is just a part of the greater design problem, achieves similar benefits.  Separating stylistic preferences from design goals—while involving the client early on—frames a discussion on stakeholder personal preferences in a way that doesn’t negatively impact the final design outcome.  It starts to build consensus and trust that propels the rest of the process along a smoother tack.

Having a process is great—having one that works is better. The ones that do usually involve plenty of communication and respect. Clients want to be heard and involved. Designers want to do great work that emotes, inspires and solves problems; the two goals are not mutually exclusive.   Typically, clients will be really involved in the beginning, while we discover and research.  But, as we progress, somewhere between wireframes and visual design comps, clients feel the creative process becomes nebulous. Likely, this is a result of legacy; the way ‘we’ve always done it’ or, a lack of respect for the what a client can bring to the table to ensure success. One commenter already proved that point when he said that a client wouldn’t know design element if it jumped up hit them in the head.

Agency/Client trust is built on shared responsibility and accountability—I’ll hold up my end of the bargain, you hold up yours.  We’ll deliver on what you ask but you need to articulate your ‘ask’ in a mutually understandable vocabulary.  I’d love to meet the designer who knows exactly what a client means when they say ‘this needs to be more ‘corporate’ or ‘funky’.

But, there’s the problem, how do you come up with a mutually understandable vocabulary? Style Tiles help to bridge this gap. It also focuses the client on discussions on personal stylistic preferences which, when understood, moves us closer to quicker approvals,  a smoother process, and solid execution of the proposed solution.

You have to start somewhere and becoming a little more granular in visual design approach helps to involve the client, build trust and understanding while, at the same time (and this is the awesome part of using style tiles) reducing the likelihood of jeopardizing the final design outcome.

We, as designers, do things meticulously and try to make choices that help accomplish a goal; to solve problems.  If we isolate the discussion of style and design only when evaluating full design comps, we’ve already painted ourselves in a corner. Clients start to focus on the stylistic elements of each, rather than the solution as a whole. Non-verbally, we imply that its okay to mix and match from each comp. Most of the time, its not. Doing this takes away from the real discussion—does our design solution accomplish the goal that we set out to reach? Further, the next question on their minds is ‘Well, what about mobile?’ If we’re truly being responsive web designers/developers, do we really want to be creating multiple concepts for each channel or do we want to create a consistent framework that espouses the brand and the stakeholder style preferences, which can then be applied across channels? I’d like to think that most of us, clients included, would choose the latter.

Again, it’s not about the tool that’s used. if you want to go down that road, it’s obtuse and pedantic. Its the application of the tool that allows us to strike a dialogue where client and designer can speak the same language. Quick iteration to get at an agreed upon style and then applying that style to a proposed solution—in any channel—will save time and money for any shop.

We have always wanted a light-weight app to rapidly create polished wireframes and present them, as an interactive prototype, to clients, right in the browser.  We felt that a app like this would help us close the feedback gap and also educate the client without lecturing them on the point of testing a user experience against defined objectives.   A lot of the apps and tools already on the market do just that but with some drawbacks.

At times we’ve felt like a wireframing app whore–going from one to the next, never really feeling satisfied.  The ones that we got most cozy with are Balsamiq, Omnigraffle and Invision. And, to a lesser extent, MyBalsamiq and Notable.  Each has their good points and bad.  In the end –or more appropriately–as of late, we’ve fallen in love with Invision and currently enjoying a wholesome yet open relationship.

It’s important to note that initially, we were really looking for one app to do it all; hi-fidelity wireframing and prototyping, client integration and feedback right in the browser.  Like in any good relationship, compromises need to be made.  We lessened our demands and netted out pretty well by leveraging the good points of Omnigraffle on top of Invision.

One of the major gripes about most of the wireframing apps was that you were at the mercy of its stencil library.  You had to use what their app provided.  Most of the time that was ok because who doesn’t love sketchy looking interface items and a comic sans default font?

Balsamiq

Balsamiq really did a great job early on by making a stencil library with UI elements that looked like paper/pen sketches.  The philosophy behind it was that something too neat and straight looks more rigid and less approachable from a client perspective–and we wanted something that looked warm and more human. Extensive keyboard shortcuts and a fairly easy to use object inspector made creating a single wireframe screen a breeze.  It was only when we had to generate multiple screens and create interactivity did we start to notice the shortcomings.

• Massive file size when creating big projects with  many wireframes.
• Lack of templating for repeating elements or navigation making editing and creating interactivity a pain.
• Presentation Mode only available on local machine, where balsamiq is installed.  This works fine if all your client presentations are done at your office, but most of the time, that doesn’t happen.
• Exporting to an Interactive PDF requires all .bmml files to be in the right order otherwise the ‘page’ view in the resulting PDF creates an awfully disordered  linear navigation.
• Interactive PDF export doesn’t highlight the hotspots where the PDF is clickable, which can cause frustration for us and for clients.
• Forced to use app specific stencil library.

Notable

Notable, from Zurb, looked really great. One of the things that we liked most about it was the notion of getting feedback from the client, right on the browsers, in the exact spot where the client had issues. In that sense, Notable was brilliant–get the feedback and iterate quickly to speed up the approval process.   In the end, we found it to be less of a wireframing app and we were just re-purposing it for our needs.  Even so, when we did have a single screen available for client feedback, the frustrations mounted.

• Comments disappearing for no reason
• Clients frustrated by the notion of creating yet, another online account during their relationship with us (we already use Basecamp and Freshbooks)
• Confusing interface with no way to mark comments complete
• Lots of up-sells to white label the notable app for a branded client experience
• Really costly ($49/mo for a reasonable plan for most studios)

Even though the team at Zurb was helpful, the app wasn’t exactly what we needed and the costs were really high.

Omnigraffle

Despite the, at times, baffling user experience,  omnigraffle is nothing short of amazing. Site maps, wireframes, mind maps – it can handle it all. With an incredibly rabid and evangelical community,  there’s no shortage of stencils or resources to extend the capabilities. With the help of the Konigi template, we were already delivering great looking Omnigraffle sitemaps, personas, mental models etc–so using Omnigraffle for client facing wireframes was a no brainer. The downfalls were easy to spot when it came time to present those wireframes.

Omnigraffle isn’t a cloud app so you need it compiled on all machines that wish to view the .graffle file type. Not ideal.  Sending an export of JPGs or PDFs of wireframes was a no go and Omnigraffle didn’t offer any interactivity–at least none that I could see.   Even though it solved part the puzzle–rapidly creating wireframes–we shelved it for a while. It came off the shelf when we found that gathering client feedback through the browser quickly and easily, was solved with Invision.

There are also some really unintuitive object inspector, formatting pallets, and keystrokes that you just have to get used to before they become part of your wireframing lexicon.  i.e. it took me a while to figure out how to get the hang of master objects, vs. master layer items vs. paste as PDF–which is to say nothing of trying to figure out how to increase the size of a canvas.  Eventually, it all makes a lot of sense but not without a fair share of head-shakes.

Invision

The Invision philosophy is simple. Do what you do best, however you do it and we’ll hold up our end of the bargain by providing you and your clients a simple way to create interactive prototypes and get feedback.   Unlike most wireframing or prototyping apps, Invision doesn’t force you to use any particular library.  If you love using illustrator for wireframes – keep on keepin’ on. If you dig on Omnigraffle, Vizio, Photoshop or Paint–awesome, Invision won’t hold you back.

Invision lets you decide on hi-fidelity mockups or low-fidelity wireframes, generated from whatever platform you want–heck you could even do pencil and paper sketchs, scan and dump em into a project.  The point is, you’re not limited to any one stencil library. Invision really becomes the apparatus for presenting prepared screens to clients or internal teams, with a unified user experience that bakes in the feedback loop.

The team has also been incredibly responsive–we’ve had skype calls with them and exchanged tweets, too. They are actively engaged with their user base through Olark and always seem to be improving the experience based on our feedback.

Feeling like we play a vital role in the success or adoption of an app, no matter how little an impact our suggestions may actually have is what made us love Freshbooks so much, back in ’07.

What’s more is that Invision just worked. Clients don’t have to create an account, just a simple link to the prototype build and off they go.  Once clicked, a lovely interstitial page that tells them their experience is loading–which is a really great way of putting clients, unfamiliar with wireframes,  into the right frame of mind.  Soon, they are able to click about and focus on the user experience, which is really the whole point.  And, the best part is that navigating the learning curve is so quick, the feedback starts rolling in before we even have a chance to let clients know how to engage ‘comment mode.’

Creating interaction between screens is where most apps start to breakdown in some way or form.  Invision does have some issues to sort out but it nails a few key elements.  File upload is a simple drag-and-drop.  Interactive availability isn’t dependant on which UI element you use, like in Balsamiq. Rather, when you enter build mode you can plot a hotspot anywhere on your file and choose a navigation path–either to another screen or previous screen.

Finally, templates will make your life really easy.   I’m sure a ton of UX people out there can sympathize with me or have cried in the corner at the thought of relinking global nav elements on a large balsamiq project.  Templates can be applied anywhere and you can have as many as you want.

Invision also has some other great aspects

• You can replace an existing file with another of the same name without overwriting the interactive hotspots.
• Mark comments or feedback as complete
• Create a password protected prototype staging area
• Filter through all uploaded screens for a given project to make replacing or finding a file that much quicker – handy when you’ve got a project with 72 wireframe screens!

There are also some drawbacks – though not many.

• Template objects must stay in the same coordinates. Annoying when you’re footer is lower down on the screen because a particular page has more content.
• Not being able to duplicate a hotspot (like alt+drag in most design applications)
• View all comment conversations for a given screen in context of that screen
• Better version control for replaced files.
• Better way of marking a project status

If you’re anything like us, you’re always looking for ways to improve your process and be respectful of your client’s time and inclination.  If you’ve struggled with a great way to present wireframes and get feedback, take a peek at Invision app–it’s like the friend, your friend wanted you to meet because you’d get on like a house on fire.

If you’ve got some ideas as how you’ve handled this part of the agency workflow, I’d love to hear ‘em.

Qualifications

• A great portfolio
• A related degree or diploma from a university or college

What We‘re Looking For

• A great eye for visual design (layout, color and typography) and the ability to create compelling visual design elements.
• Great Common Sense
• Understanding of Usability, User Centered Design, and UI best practices
• Ridiculous attention to detail
• Excellent understanding of composition, color, imagery, typography
• Ability to explain and defend your design decisions
• Good attitude and strong desire to learn from and share with the design team
• Ability to work in a fast-paced (not chaotic) environment
• The ability to communicate clearly. With words. Typed with fingers. Which is not to say that we don’t value exceptional oral communication as well.

Need To Have’s

• Experience presenting your work to others, including clients
• 2+ years experience in digital
• Strong working experience with Adobe Photoshop, Illustrator
• Experience creating and working with other creative individuals including but not limited to copywriters, designers, developers
• Excellent understanding of user experience and how it relates to a client’s overall objective
• Ability to self-manage projects and work within deadlines
• An enthusiastic, eager and honest disposition with a killer work ethic. (We saved the most important for last).

Nice To Have‘s

• Good Knowledge of HTML/CSS a plus.
• Preference of an editor other than adobe dreamweaver also a plus
• Some wireframe development experience
• Good drawing/sketching skills are a plus
• Omnigraffle experience would be nice
• Respect for good coffee – if you take it black, that would be great.
• Love for music – do you have a last.fm profile?
• Dry wit

The discussion got me thinking a lot about rules. As web designers, we labour endlessly and continuously make choices about layout, colour, typography, texture and everything else that goes into a design; our creative design. When working with a blank canvas, a design can take any shape, any form and draw from any number of influences including our own passions and desires. In most cases, the beautiful and wonderful results of this free and liberating exercise are celebrated, interpreted, discussed and consumed. The role of a web designer, however, comes with many constraints; a broad but defined set of rules to create within. Constraints do not diminish creativity–many would argue that constraint offers an unparalleled opportunity for growth and innovation.  Because of all the constraints, we’re forced to make better decisions.  However, without a solid understanding of what those constraints or rules are, success is hard to come by.

Every day we’re forced to evaluate and make sound judgements based on browser capabilities, accessibility, web-fonts, screen-size, analytics and best-practices. With each project, we garner a greater understanding of what is and isn’t possible in this ever-changing landscape, and push the envelope that much more. Successful ideas and concepts don’t only emerge from a solid understanding of the constraints. I need to understand my client, their audience, the capabilities of my team and the scope of what can and can’t be accomplished in development in a direct relationship with the allotted budget. We’ve said this before, but designing for the web is so much more than making things look pretty.

Web work involves team work (Attention: free t-shirt idea). Although parts of a project can be done independently, depending on the size of your team, we don’t work in a silo and we don’t make decisions based solely on our own experience, goals or personal preferences. The work that I do inevitably effects how efficiently and effectively my team members can do their jobs, which in turn effects the outcome of the entire project.

Content strategy, content management, business objectives, proposed measures of success and desired user experience all play an important role in how we design for web. Being a good designer is a great start, but knowledge, as in most cases, is power. Knowing what works in HTML and CSS, understanding load time, responsiveness and how to properly prepare a photoshop document for front-end development are skills that allow us to be better designers, and even more importantly, better team members.

It’s been said that an actor can’t truly act without learning his or her lines and I think that applies here. We can’t push the limits of a medium if we don’t know what they are. At the end of the day, much of what we do revolves around content–understanding what message is trying to be communicated and choosing the best content to engage an audience. Just as a guitarist learns chords in standard tuning before venturing into open tunings and effects, it’s our duty to beceome grounded in the basic principals of web design, then innovate. Whether your medium involves die-lines or div tags, it’s understanding that adds value.

The web is always changing, which means the rule book is too. It’s an exciting time for us and as our medium evolves, we’re presented with more opportunities to do some pretty amazing things. Learning, growing, failing and improving are all part of this ongoing process. Regardless of the changes, however, one thing seems to always stay the same–we need to learn the rules first. Only then can we effectively communicate with our audiences. Only then can we be great web designers.

Ahh, the Holidays. A time to reflect and share with friends & family; a season of over-stuffing, over-stressing and inevitable awkward family moments. We love the holidays and every year we try and send something out to our clients that infuses a little bit of charity amidst all of the seasonal madness.

Each day, we’re given the freedom and opportunity to think, create, build and most importantly, play. We get to do all of this alongside our wonderful friends and clients and as a way of saying thank you this year, we put together a two-part gift that we hope will help create opportunities for those who need them the most.

Part one – Coffee. Everyone drinks it, but not everyone knows that the majority of our coffee is grown, harvested and imported under poor working conditions with unfair wages. Now, the same can certainly be said about a number of things we use daily, but here in the office, a day just isn’t a day without a good morning cup. As a way of making sure farmers get a fair deal for the work they do and that our clients can start the day with some caffeinated inspiration, we sourced some delicious organic, fair trade coffee from our good friends at White Squirrel. We even designed a custom stamp to use on our own special blend.

The second part to this years gift was a donation to an organization that celebrates youth and facilitates their ability to do something that so many children can’t do – just be kids. Right To Play’s mission is to improve the lives of children in some of the most impoverished areas of the world by using the power of sport and play for development, health and peace.  What better way to show our appreciation for our ability to explore, learn and grow than by helping children do the same.

On a more design-related note, we wanted the final package to have that old-time parcel feeling. Craft paper, jute twine and a custom tag fit the bill as did our one-sided card complete with pearlized foil printed by the awesome people at CJ Graphics.  We wanted the simplicity and honesty of the gift to be reflected in the packaging and we’re all really happy with the way things turned out.

It’s been a great year. Thanks again to all of our wonderful clients. We truly couldn’t have done it without you.

Happy Holidays and all the best for 2012.

What We’re Looking For:

We typically look for students that are in their last year of a university or college level program in web design or graphic design.  You will have a portfolio, as limited as it may or may not be, and it will be online for us to take a peek at (no, not a link to your twitter profile embedded in a single html page). You will be a nerd. We’re not judging – honestly, we’re not.  If you’re utterly content to be designing and building things online, we’d like to hear from you.

What You’ll Do:

As our intern, you’ll be working on pretty much everything. Too vague? We expect that you’ll be an integral part of our process from beginning to end. You’ll be participating in IA sessions, wireframes, Content Strategy and ultimately become a resource we can count on. You’ll be working on a number of deliverables, which could include websites, application design, identity systems, email campaign templates, integrated marketing campaigns, social media management. You WILL be exposed to working with clients and working on multiple projects. You should also tell us if our job description should be more of a bulleted list rather than paragraphs

Required Skills

• 1-2 years designing for the web (mobile web experience a plus)
• Great Common Sense
• Understanding of Usability, User Centered Design, and UI best practices
• Understand of or will look up the terms Workflows, Wireframes and Information Architecture.
• Ability to work in a fast-paced (not chaotic) environment
• A great eye for visual design (layout, color and typography) and the ability to create compelling visual design elements.
• Strong knowledge of Adobe Photoshop and Illustrator
• Good attitude and strong desire to learn from and share with the design team
• The ability to communicate clearly. With words. Typed with fingers. Which is not to say that we don’t value exceptional oral communication as well.
• Has an enthusiastic, eager and honest disposition with a killer work ethic. (We saved the most important for last).

Additional Skills

• Good Knowledge of HTML/CSS a plus.
• Preference of an editor other than adobe dreamweaver also a plus
• Some wireframe development experience
• Proactive and results driven
• Good drawing/sketching skills are a plus
• Omnigraffle experience would be nice

Nice-to-Have

• Respect for good coffee – if you take it black, that would be great.
• Love for music – do you have a last.fm profile?
• Dry wit.

Find out how to apply

Having attended Interlink Conference in June of 2011 and found it, by all accounts, a fantastically well-run event, we chose to sponsor Shawn Johnston and his new Interlink Workshops. As an attendee, I think I got more than I gave for the price of admission–and that’s the mark of a great conference. In fact, the same can be said about Build and Andy McMillan.

In an effort to start returning the favour and building relationships with the people and organizations that inspire us so much, we’ve decided to get involved and we couldn’t be happier. The fact that we’re going to be sponsoring Simon Collison’s workshop is just icing on the cake.

If you haven’t had the chance to attend a carefully curated and limited-attendance conference, like Build or Interlink, I would recommend that you give them a shot rather than blowing your entire conference budget on something like SXSW. As a web designer or developer, you’ll feel a greater sense of community and an even greater sense of responsibility at smaller events than you would otherwise.

Now, the next thing you should do is go convince your boss that you deserve to be at one of these workshops or conferences. Tell him its in his/her best interest because, in all honesty, it really is.

Congrats Shawn – We hope the workshops are as successful as the conference. We know they will be.

But creating a uniform, one-size-fits-all process isn’t really the point, is it?  We all have different ways of working and getting things done.  Whether you work within a team environment or as a solo freelancer the issue isn’t how we work rather, the issue, as always, is how can we work more effectively.

We’ve taken a good long look at our process and how it, and our business, has evolved over the past 10 years.  Like most, when we were first starting out, we didn’t we know what we didn’t know. Nor, did we have a clue how to manage a workflow.  We just got the work done all willy-nilly and, eventually, as our clients got larger, our budgets and timelines grew too. All of a sudden we found ourselves with multiple projects at various stages of completion.  We just got to a point that we knew a responsible method for delivering client work was necessary.  That or, we’d soon be uttering words that can be so hard to say.

We introduced various stages to our workflow and all were very well received – Things which, now, seem like a no-brainer. Concept reviews, production reviews etc. All things that that made the creative process less and less nebulous.  They also provided an opportunity to include our clients early on and it really helped us get on the right track quickly. We took this same approach with wireframes. Not only were they a great tool to get the client to see how relationships between types of content created a hierarchy but, it also helped by removing a lot of decision forks that previously slowed down the design stage–making life for designers infinitely easier.

About 4 years ago we made wireframes a mandatory part of all web and app design and, internally, it was a great success. At first, we used pen and paper sketches and then quickly moved to Balsamiq as it offered us a way to present wireframes and quick site prototypes to clients.  And this is where we started running into friction.

Because we presented the wireframes as a deliverable that required client sign-off , it created a sense, rightly or wrongly, that  it should look polished.  No matter how much we tried to explain to clients that what they were seeing was a prototype and wasn’t what their site will eventually look like they couldn’t get their heads around it. For us, it was a quick way to determine if we’ve captured all the technical requirements, user goals and content interactions for each page.  For them, it was the first glimpse of their website that they are paying good money for.

After asking some trusted clients how they felt about our process and about wireframes in particular, they all said that everything was fantastic but when they saw the wireframes of their website, their hearts sank.  This lead us to the conclusion that wireframes shouldn’t be a client deliverable.  At least not for us. But, I just can’t escape how powerful and helpful they are.

The truth is, wireframes, when a client gets it, can be a god-send.  Not only do they involve the client early but also gives them a sense that the website or application is approached from a logical and methodical perspective rather than a nebulous ‘creative process’ – which for most clients, gives them the warm and fuzzies.   Just as important as the client warm and fuzzies, our team gained a greater sense of what each of us needed to do in order to bring a project to completion.  So, we decided to pull an about-face and keep wireframes in as a client deliverable but, client education was going to be key.  We were going to really have to explain the ‘why’ behind using them. We did this by showing clients past examples of wireframe prototypes and finished projects side by side.

Ultimately, we’re glad we’ve stuck with it because the ‘wireframe’ has become the quintessential planning tool. What good is creating interesting layouts and beautiful concepts if you can’t do so without the proper content? It’s like asking a builder to construct a house with out a set of plans from the architect. If the content doesn’t exist, neither does the design. Let me say that again – if the content doesn’t exist, neither does the design.  Getting the proper content at the wireframing stage or prior is the best way to get through design and development, with minimal scope creep and headaches. In the end,  clients can see how their content actually works and if it is in line with the overall objectives of the site–providing we’ve done our job and they understand the purpose of wireframes in the first place.

After some time, clients have really come around to the idea and purpose behind wireframes.  It also helps that, from a presentation perspective , there are now so many options to get wireframe sketches or interactive prototypes in the hands of clients and solicit feedback. We’ve recently run the gambit of these tools (which deserves its own post)–some of our favourites being myBalsamiq, Notable App and Invision.  We’ve landed on the amazing Invision because it’s so flexible and feature rich.

We’ve had success and failure with wireframes. We’ve won our clients’ hearts and lost substantial pitches because of them.  While I wouldn’t say we live and die by them, but if done right  they can be compelling, a huge time-saver, and a great way to get early client buy-in.  We’re still evolving our process and getting it perfect is a nice thought but its more of an endless pursuit than anything else and that, at the very least, is something that experience teaches.

Since we opened our doors in 2001, we’ve been fortunate enough to work with some pretty awesome people. They, in turn, have recommended us to more awesome people and that, along with some elbow grease and good old-fashioned hard work, has led us to where we are today. In an effort to meet and work with even more awesome people, we felt it was time to tear ourselves away and update the “temporary-slash-unintentionally-permanent” site we launched 4 years ago.

So here it is. The new Filament site. We’re proud of the work we’ve done and can’t wait to show you what we’re working on now. Thanks to everyone who’s helped us get this far and thanks to everyone who we’re bound to meet as we move forward.

-Team Filament.