#btconf Berlin, Germany 07 - 09 Nov 2016

Mike Kus

Mike is a UK based designer specialising in Web/UI Design, Graphic Design, Branding, Illustration & Photography. He has a worldwide client roster and his work is regulary featured in design related publications.

Want to watch this video on Vimeo directly? This way, please.

Be the Black Sheep

It's human nature to follow the crowd, but in order to stand out, you sometimes need to stand-alone. Mike Kus believes that every client is unique, yet many websites are starting to look the same. In this fascinating 30 minute talk, Mike will share the secrets of how to extract an organisation's identity, and use it as the inspiration for crafting truly distinctive web design.

Transcription

Be the Black Sheep

Mike Kus: I’m trying to think of a witty statement to open with, but I just can’t think of anything to say, so let’s just talk design.

Right. Visual graphic design on the Web is becoming standardized. Trends are being adhered to like rules. The Web is starting to (Indiscernible, 00:00:30) the world over and many companies are losing their identity online. You’ve got companies like Squarespace, Wix, and other website builders who are sort of encroaching on our business, and they’ll continue to do so as their solutions become ever more sophisticated. And so Web design is becoming a commodity. For many it’s like the fast food of design.

Where are we in 2016 with the supply and demand chain? We have platforms like Dribbble and Behance. There are thousands of great designers out there. The competition is high, and supply is high. For many, for some people that will ultimately push prices down.

How do we survive as Web designers beyond 2020? Why should anyone hire us? What makes us unique?

Be the black sheep. We need to remove ourselves from this sort of rat race. We need to stop chasing the crowd. We need to create distinctive and engaging Web design that builds our clients’ identities and also builds your own.

For the remainder of this talk I want to take you through a five-stage process. It’s a process that use on pretty much every project I work on. It sort of shapes the visual identity, visual design of the website I work on. To me, it’s the key to the success of those projects and ultimately the key to winning more exciting work for the future.

This first stage is recognize. Help your client recognize their identity is unique and it’s key to creating distinctive and engaging design. We need to have a conversation with our client straight up. We need to establish common ground and get them to understand that their identity is going to be the backbone of this visual design and identity online.

We need to discourage emulation. I don’t know about you guys, but I get a bunch of links at the beginning of most projects of sites that the client likes or sees themselves in. Normally it’s Apple and Stripe. The thing about that is it’s great to be inspired by other people’s work, but if you’re following someone’s footsteps, you never lead and, ultimately, your identity is diminished.

We also need to sort of avoid getting into the pattern of ambiguous feedback from clients. You know you’re sort of in trouble when you start hearing things like, “Go crazy. You’re the creative. I can’t wait to see what you come up with.” Or, “I’ll know it when I see it.” Or, “Well, I know what I don’t like.” These pieces of feedback are hugely unhelpful as a designer because they give you no direction, but it’s also an alarm bell to tell you that your client doesn’t know what they want. They don’t necessarily know who they are or how they visually want to tell their story.

Herein lies opportunity. This is our opportunity to help them discover their identity and who they are and how they want to sell their product or service. It doesn’t really matter what they do. There is an opportunity in 99% of the projects to do something exciting and engaging in design.

The second stage after you’ve established this common ground is to extract. Extract as much information as possible from your client. We need to build a picture of our client. We need to understand the product, the service, the mission, the reason for being, the values and attitudes, the goals and their long-term vision.

To do this, we sort of need to interview them via Skype or in person, maybe over a few occasions. But we need to emphasize. We need to sort of understand, you know, step into their shoes, be a method actor and sort of understand what it’s like to be them. What I do is I basically write down a collection of headings, just have a conversation, and start to write things down that I hear them say under all the multiple headings.

Slowly, but surely, you start to see common threads. This discovery sort of process is not only useful for you as a designer, but it’s also useful for your client in many cases because it’s at this point where they realize that they start to understand who they are and how they want to tell their story in their own unique way and they don’t need to rely on looking like anybody else. That’s a really exciting thing to see. If you can get to the end of this sort of second stage when you have that understanding with your client and this sort of totally reinforces stage one, then you’ve got a great platform to move forward and potentially create something really exciting for them.

Distil: This is really Distil and Storify. What I do here really is I take the common threads that have started to come up in our early conversations, and I also want to boil all this down to a few keywords and create really what I call sort of their movie title strapline or tagline. I do this because it sort of creates a scene and tone for a design. It creates. It’s sort of the compass. It gives you direction and helps you sort of – yeah, it gives you direction through the process. It helps you build a story and really will shape, be key to shaping their visual identity.

A really simple example of this is a movie poster. This is a movie poster that I designed for an upcoming vampire movie called Eat Local. It’s set in a farmhouse over a 12-hour period at night. It’s surrounded by trees. It’s about vampires, and it’s due out in 2017, directed by Jason Flemyng.

This is a small piece of work, but it’s something I did pretty quickly, but it was essential I use this similar sort of process, this way of thinking. I spoke to Jason. Got the lowdown on the movie. I read the script and then just started to make notes, make notes of things that stand out to me from the script and my conversations with Jason to try and think of something to – you know, sort of think of something to hang the design of, design around. I just keep typing notes, thinking of all sorts of different possibilities just into a text pattern or computer, and eventually boil it down to a line I think is going to work and is going to give me enough and, for me, get enough sort of ammunition, if you like, to create something interesting.

In this case, the strapline I came up with was from the farm to the fork. It works on a number of levels. Obviously it relates to eat local and the whole concept to getting your food locally from a farm and straight to your plate. It relates to the fact it’s set in a farmhouse. But also it gives me this great opportunity to use a fork in the design.

Ultimately, I’m thinking, well, if I break out the two middle prongs of the fork, I’m left with what looks like two vampire teeth. Also the negative space in the fork gives sort of like a looming figure in there. By using this sort of simple technique and bringing the strapline to the movie title, it gives me a way of creating this visual design I wouldn’t have otherwise had.

I want to share with you a couple of sites I’ve designed that I’ve used this way of thinking and to come up with a sort of identity for my clients that can hopefully help them stand out on the Web.

The first site is a site I designed a couple of years ago now. It is a site for a company called Mixd. Mixd are a Web agency based in the U.K. They have the same makeup of most website agencies. They have people, a body of work, an office, a foosball table, bikes hanging on the wall, all the usual stuff.

The thing is there are thousands of Web design agencies fighting for the same work, and so it’s a challenge to think, well, how can I give them an identity, an identity that sets them apart? I spoke to them, went through the first few stages I’ve just described to you. I make a whole load of notes. I look for the common threads.

In my conversations with them the thing that was standing out to me was that they were an agency that could do quite complicated backend sort of Web work for big organizations. They talked to me at length about this, but there was always this caveat that they still valued visual design as well, and obviously good UX, et cetera. This was a repeating theme that came up in our conversations.

I just started making some notes, writing down some keywords. I’m writing down words like quality, simplicity, good function, it works, performance, esthetics, perform mixed function. Essentially, in the end, I decided on beautiful form, perfect function. This is going to be their sort of backbone of this visual design and identity online.

The next stage from here is to think, well, how do I use that? How do I use this sort of mission statement to help me design something for them? What I did was think, well, I’m going to do it through objectives, objects I feel embody that statement, very simple objects. I chose a pencil, a chair, a bicycle wheel, and a spoon. When you land on their homepage, you are randomly delivered one of these objects along with the strapline: beautiful form, perfect function.

This instantly gives them a unique sort of bold visual identity. But it also gives me then a sort of theme that I can take through the entire site and just come back to it and use at any given opportunity. For example, when I’m talking about their sort of about page. I can use other phrases like design simplicity or quotes like, “The best design is the simplest one that works.”

The entire site has this story behind it, this sort of beautiful form, perfect function storyline that runs right the way through it. Obviously this is then married up with the actual content of who they are, what they do, their body of work, et cetera.

The next site I want to share with you is a site I designed this year. It’s for a company called Beliyf. Beliyf are a culture, an identity specialist. They help companies articulate who they are and why they matter.

In a funny way what Mark, the founder of Beliyf, does is he goes into companies and does a similar thing to what I’m talking about here, but he does it with people, teams and, ultimately, companies. In our early conversations, Mark and I saw eye-to-eye very quickly. We both had the sort of same philosophy here.

We very quickly realized that dealing with something like culture and identity is a concept that’s sort of relatively abstract. The most obvious way that you would see this sort of thing visualized online are pictures of people leaning over desks, swiping iPad pictures and stuff, and teams through glass office walls, et cetera, which is just exactly the sort of thing you would expect and is not going to give Mark’s company a visual identity that is recognized, but unique for him.

What we did was we took the idea of the companies he works for and created a metaphor for them. That metaphor was a tree. The tree, the trunk of the tree being the core of that company, the sort of founder’s initial idea. The branches being all the different sort of parts of that company, departments, et cetera, and the leaves being the people. This then gave me a concept to design around to explain the process with what a company goes through when they do this program with the Beliyf process.

I actually then went out and collected a cross-section of a tree trunk. Went to the park. Picked up a load of leaves and painted. Took them back to the office, painted them. Then sort of took them into Photoshop and colored them, et cetera, and had all these sort of handmade assets to use to tell his story.

On this secondary page it’s talking about – it’s sort of an introduction to what Beliyf is. Then there’s a page called the journey page, which is a much longer page, which I’ll show you over the next few slides here, which explains the process a company goes through if they take on one of these courses. And so using the assets I’ve created for these pebbles, leaves, pieces of wood, et cetera, I create these assets.

The top of this stage, this is sort of this kaleidoscope of leaves and autumnal colors is just sort of Mark is talking here about reflective. This is a stage where the company is sort of reflecting where they’ve come from, what they’ve learned to date, and looking back and sort of learning from their past. The pebbles take you down to this reimagine section where it describes the company and sort of reenergizing themselves and refocusing themselves for the future. I used sort of a phoenix rising from the ashes type of arrangement here and using the color green to signify sort of new life. Then finally, it takes you down to this sort of tree in full bloom with all the colors and the sort of different assets a company would have and people and departments, all sort of ready to take on the future.

There are two examples of how I am using sort of stories and metaphors to sort of create a unique sort of idea of how to explain and convey a message of any given company.

Characterize: Once we have this sort of story in place and you have the information for all the content for the site that you’re designing, we get to characterize it. We get to look at typography. We get to look at the layout, the colors, the texture. All these things go into create sort of a tone of voice, and style can create, can convey meaning in a matter of microseconds. How you style your site and your design can actually help convey your message without actually using words.

This sort of gives the application style meaning. It therefore essentially has a function. I think this is cool because it sort of takes – it can take a creative weight off your shoulders as a designer because you’re not just choosing style elements that you’re like. You’re choosing style elements that actually go some way to helping convey the message you’re trying to tell your users.

I’m going to take you through a couple of other designs I’ve done where I’ll explain my application style.

I designed a site very recently for a company based in San Francisco called Weekend Sherpa. Weekend Sherpa are like an adventure blog, so they send out three stories every weekend for people to go out and explore in their local area in different parts of California. The first thing here you can see is that this is their strapline, which they already had, but it’s, “How do you Adventure?” I hand painted that to give it a sense of exploration, adventure, spontaneity. Then it’s combined with sort of epic outdoor photography.

The color palette is sort of like really all based upon nature, so it’s colorful, but it’s dusty and outdoorsy. I created a set of hand painted iconography sort of inspired by trail signs and also those sort of national park badges you might find. This sort of smaller iconography was again hand painted. I’m using textural marks for horizontal dividers and, again, combined with more sort of epic outdoor photography.

But when it comes to the actual content, the content is uncompromised. It’s actually a very conservative layout. It is designed to be easy to read. The style application, I just sort of like axes, just hints of their rough dividers, the small icons, and the continued use of the sort of dusty color palette.

In contrast to this, another site I designed was a site for a French-based digital agency called Craftsmen. Craftsmen, the sort of story we crafted around them, it all boiled down to a few straplines, which were very simple, which is digital visionaries–hence the glasses–digital scientists, and digital explorers. Hence gave me the reason to use these illustrations.

In terms of style application, it was all about digital. I really wanted to convey this sense of digital. For me, that meant what was the simplest way I could convey that, and that was through the use of these pixel illustrations.

I combined that with an ultra simple color palette, just black and white and one other color. Then used Helvetica for the title because it was a classic sort of old Web font and a sort of more coding looking type of typeface for the body copy. This was applied through all the pages of the site.

You can see how both of those sites have a completely different visual outcome because they’re unique companies. They do their own thing, and they have their own identities. Whilst it’s not always obvious, you can use these identities to create these unique, different results.

Finally, we want to build. Be the black sheep. Elevate yourself from the competition and build a portfolio that uses your client’s identity in ways to build your own. This is not really a stage, really. It’s like a continual, a continuous stage, a stage that doesn’t end, and it’s almost an outcome for you, an outcome that you’ll keep building upon.

By using this process you will hopefully start to build a body of unique and diverse work that shows logical thinking and will ultimately build you a portfolio that demonstrates you can treat every company as an individual. I think this has never been really more important in this climate being faced with the sort of competition you’re faced with. I mean computers, for example, I mean creativity will be the last thing computers steal from us. Having this sort of creative process for the application to Web design is something in 2016, I think, is super important.

To sort of summarize these points, if any of this has sort of resonated with you, is applicable to your work, I’ve put together this simple poster, which sort of highlights the five stages of this process. Marc very kindly got a whole load printed up for me and, in the break, you’ll be able to get one behind the stage in the breakout area there, so please take one. If any of you have got any questions for me, I’ll be around for most of the day, so feel free to come and chat and say hi.

I’ll leave you with one last thought. On this side of Web design I like to take photographs and post on them in Instagram. The reason I love to do that is because I love the idea of conveying what it’s like to be somewhere at any point in time. I love the idea of sharing moments with people.

And so if I happen to be in a place where I want to do that, I’ll get my phone out and take a picture. Then later on I’ll go back and have a look at that, have a look at my pictures. As you know, if you take shots on a camera phone, they never really come back like it felt at the time because it has limitations of a small camera lens.

But if you sort of use the lens in here and re-crop that picture, look at the color, the contrast, the saturation, you can recreate it. You can recreate what you saw at the time. For me, this is really similar in design. No matter what your client comes to you with, no matter how little information, by sort of focusing that lens that you have as a designer and looking a bit deeper, you can uncover things about a company or an organization that weren’t immediately obvious and produce work that far exceeds their expectations and builds them a strong online identity that ultimately builds yours.

Thanks very much.

Audience: [Applause]

Speakers