The Creative Process of Professional Designers

Sep 12 2012 by Tomas Laurinavicius | 16 Comments

The Creative Process of Professional Designers

Have you ever wondered how other designers do their jobs? How do they come up with incredible ideas? What tools do they use to get their tasks done? How do they manage their time?

I had the great opportunity to talk to seven awesome designers from all over the world about their creative process. Whether you’re just starting out in the design industry, struggling on working on your projects or just plain curious about how other designers perform their work, this group interview will hopefully help.

I’d also love to hear your comments about your creative process as well — is it very different from the ones covered here? Share it with all of us in the comments.

I hope you find what you read below to be inspiring.

The Designers

First, I asked each of our designers to introduce themselves. Here they are.

Adham Dannaway

Adham Dannaway

My name is Adham Dannaway and I’m a web designer and front end developer from Sydney, Australia. I especially enjoy UI design and blogging, and I’m a pretty big Star Wars fan too. You can check out my portfolio at adhamdannaway.com and follow me on Twitter.

Kerem Suer

Kerem Suer

My name is Kerem, a San Francisco-based product designer who enjoys sketching, conceptualizing and creating products that I think will make a difference. I got my education on Interactive Media Visual Imaging, and have been in the industry for about 7 years now. Although I don’t live to work, rather I work to live, so I think I mostly enjoy my wife (we recently got married) and my 2-year-old chocolate Labrador dog, who also has a blog (lolathepuppy.com).

Janna Hagan

Janna Hagan

My name is Janna Hagan. I am a 21-year-old web designer and developer originally from Edmonton, Alberta. I am currently attending college in Toronto, Ontario. I am the founder of Student Guide to Web Design and in my spare time I love to practice yoga, write, read, eat and listen to music.

Osvaldas Valutis

Osvaldas Valutis

I’m Osvaldas from rainy Lithuania and I’m a web designer who specializes in website design, typography and front-end development (HTML, CSS, JavaScript). So, to sum it up: I make websites. I regularly blog about this (and more) at www.osvaldas.info and I also tweet about this.

Visual Idiot

Visual Idiot

The name’s Idiot. Visual Idiot. I’m a hybrid designer/developer fellow who hangs around London-ish. I tend to make stupid jokes on Twitter, and I’ve got a blogazine (I hate that word) over at visualidiot.com.

Callum Chapman

Callum Chapman

My name is Callum Chapman and I’m a user interface and experience designer for mobile and web platforms. I’m from the UK, however I have Australian blood and have spent the last 12 months in Melbourne, Australia. I’m off around the world to explore Europe and USA (for the next 2-3 years) whilst working on my start-up iPhone app called Cappture.

Mark Jooste

Mark Jooste

Hi there, my name is Mark Jooste and I am a graphic Designer in Edmonton Alberta, Canada. Although I have only been a web designer for 2 and a half years I have always been artistic and creative since I can remember.

How do you estimate the time for a project?

Kerem Suer

 

If it’s client work, I usually ask tons of questions before we even start the project. I enjoy in-person meetings because it makes communication much easier and efficient.

After talking over the project, seeing more detailed specs and understanding the product, I usually give an estimated time. So far I’ve been pretty spot on, but if things change on the way, I re-estimate the time so that we can all be on the same page. If it’s a personal project, I try to layout things pretty simple with a priority list that would reflect must-have’s, good to have’s and good for future releases.

Callum Chapman

 

This is probably one of the toughest parts of being a designer; trying to figure out how long a project will take is very tricky! I always — no matter what the job is — base my work on hours, and try my hardest to give a good estimate. I usually base my estimates on the type of project (iPhone, iPad or web), whether I have been supplied wireframes, how much user experience work I need to do, what kind of style the client wants the app to be in (modern, minimalist and highly-textured all take different times to perfect), and how many screens and features there are.

Image source: Dribbble

I usually estimate one day for the first screen (which is always the longest, getting styling right, etc.) and then 3-4 screens per day after that.

Osvaldas Valutis

 

Considering every aspect of the project (e.g. size, features, responsiveness, adaptiveness, etc.), I set a rough date of completion of the project. However, it never turns out as expected, mostly because I prefer quality over quantity. I’m a firm believer of the importance of principles in making websites.

Janna Hagan

 

I usually estimate how much time a project will take based on similar projects I have worked on previously. Usually, a project never goes according to plan, so I usually add a few buffer days to give me time to deal with unexpected revisions or unforeseen circumstances. I rarely work with clients who need "rush jobs" because it doesn’t allow me to do my job properly.

Visual Idiot

 

I’m lucky in the sense that I don’t get a typical freelance/client project. Right now, I work at a lovely startup in London, so I just work on their core product and marketing site.

When I’m doing my own projects, I usually give myself an ultra-strict, unrealistic deadline (say, two hours). When it comes to estimating for clients, though, I like to take a rough punt at how long doing the work will take, and multiply it by five.

How do you start a project?

Visual Idiot

 

Depends.

If it’s a personal project, I just dive right in (remember, I’ve only got two hours), and go into Photoshop, trying out fonts, colours, and anything else that needs to be sorted.

Any other project, I start out a bit more formal, seeing what the site’s aiming to achieve, trying a couple of sketches on my special pad, getting all the resources beforehand (copy, logos, colours, any brand guidelines; I’ve found you can’t design anything properly without it).

After sketching, I’d dive right in to Photoshop; my sketches on one side, graphic tablet on the other, and I just try stuff out until I have something I’m happy with.

Then I start the whole process again a few more times, and then I show the mockups around to see the favourite.

Callum Chapman

 

If I have wireframes, I jump straight into Photoshop and get going! I normally have a good understanding of what the client wants from talking to them and asking them about what applications and websites they like the styling of — this speeds the process up a lot.

If wireframes are a part of my job, I start with a long discussion with the client about every single feature the app will have make 100% sure that we are on the same page.

I then sketch out options for any complicated areas of the design in a grid notepad, and once we’ve agreed on a good solution, I use Illustrator (making use of their artboards feature) to design the wireframes.

If required, I sometimes put a working prototype together using Invision App.

Kerem Suer

 

It really depends on the project. I usually have a product designer role in projects, however I do have visual design skills as well, so I think majority of the projects start on the whiteboard.

Image source: Dribbble

Next phase is usually sketching out ideas, low fidelity wireframing followed by high fidelity wireframes and the final step, visual design.

Actually there is no final step. Almost all my projects are ongoing and are based on iterations, iterations, iterations.

Janna Hagan

 

I start every project with pen to paper. Even if it’s just doodles and random ideas, it helps me brainstorm and think of possible directions I want to take with the project. I look at other websites. I search for possible colour palettes. I browse Dribbble.

From there, I usually create a mood board and a wireframe with a general style that I want the site to emulate.

Mark Jooste

 

I typically start the project in my head, thinking of different designs for a few days.

Once I have a direction in mind, I start putting pen to paper and sketch out a bunch of rough designs.

Can you describe the most important parts of a typical project?

Visual Idiot

 

Sketching (if you need to), mockups (some do them in-browser now, but I prefer the fine level of detail you get from Photoshop), slicing/coding, and reviewing (this bit takes the longest, but it’s arguably the most important).

Osvaldas Valutis

 

As a website maker, I emphasize the following things as the most important ones in my craft:

Typography. Because kerning in web design is kerning too. Luke Wroblewski once said: "if your type is bad, your design fails." Choosing the right typeface is only half the job. The other half is implementing it.

Aesthetics. Using shadows, rounded corners, gradients, animations, etc. only when they’re needed is a real art. Being simple is the most difficult process.

Accessibility. From adaptiveness to responsiveness, a good website is a website which is accessible on every widely used device.

Adham Dannaway

 

I think the most important part of a project is the initial project plan. The project is driven from the initial plan so it needs to be thought out in enough detail to ensure the project runs smoothly.

You need to make sure that you allocate enough time to each task in the project. I usually give myself a little bit of extra time for each task in case there are any complications. This also allows you to finish the project before the deadline in some cases, which clients love.

Mark Jooste

 

Important parts of the design process are: having a clear understanding of what the client is looking for, making sure you keep to the deadlines, keeping the client informed, and delivering a product you are both happy with.

Kerem Suer

 

I think it depends on the project, but for me, the most important part of the project starts on the whiteboard, brainstorming and thinking out loud.

I think it’s extremely important to think a project through. It is the foundation of the pyramid. Without a thought-out product, it’s hard to get to the finish line.

Do you use any special project/time management tools or techniques?

Osvaldas Valutis

 

Project/time management tools are not for me. Probably because they need management too.

Just a pen, a notebook and a personal slave (Siri) makes sure I have all of my ideas for new blog posts in one place.

Kerem Suer

 

Yes, absolutely! I’m an organization freak, so everything has to be organized and available on multiple devices.

My essentials are Basecamp for project management, Harvest for invoicing and time-tracking, Dropbox for file-sharing and file-syncing. I don’t know what I would do without this trio.

I also use my iCal religiously and I think I use it a little differently than others. I can have up to 8-9 projects at a time, mostly smaller projects, but some very big ones, so it’s very important for me to use my time efficiently.


Image source: Apple

I make an hourly schedule for my workload at least a week ahead, usually on Sundays, so I know what I will be working on that week and won’t waste any time planning things during the week.

Callum Chapman

 

I always track my time because I charge my clients on an hourly basis, and it also helps me keep track of whether I have charged for those hours I did 2 months ago or not (when you work on as many projects as I do, it’s easy to lose track!). I use web-based Toggl for this.

As for project management, I sometimes use Wunderlist, however, for smaller projects, I just use my head and emails between the client and I.

Mark Jooste

 

Simple projects like logo design don’t require any fancy time management tools. Basically I keep track of my hours in a spreadsheet so I can break down the time spent to the client on the invoice.

How do you come up with new ideas? How do you choose the best one?

Mark Jooste

 

Sometimes they pop up in my head but other times you need to do a bit of research online. Either doing photo research, competitive analysis or even just researching the actual product and reading up on it.

I get a lot of sketches down, and then I usually narrow it down and let the client look to see if I’m on the right track.

Adham Dannaway

 

Inspiration for ideas can come from anywhere. Sometimes I’ll be browsing the net and a new idea will pop into my head, and other times I’ll be out with friends and something they say might spur an idea.

If I’m looking for design inspiration, I like to check out CSS galleries like Awwwards along with blogs like Smashing Magazine. Dribbble is also great for UI ideas.

Kerem Suer

 

I think ideas are everywhere; so are interfaces, products and design. Everything we look at out there has been designed by someone, has been thought-out, and brainstormed by people.

So I think we shouldn’t just look at things, we should see things and question everything.

For example, when we go out and walk around, we can see parking meters. A parking meter has an interface, and is a well-thought product.

The car you drive, the Vespa you ride — they have extremely complicated systems, interfaces and advanced designs.

I’m not sure if this makes sense, but I try to see everything as design, and when you look at it that way, it’s easy to see what’s missing or what can be done better.

Osvaldas Valutis

 

Thinking, literally, is the best method I know to come up with new ideas. Rejection principle helps choose the best one (I studied informatics).

What do you use for sketching/wireframing? Any tips from your experience?

Visual Idiot

 

Ah, my sketch pad. Most people have Moleskines or the like (aside: Are they made from moles? I thought so, which is why I’ve never bought one), but I have my UI Stencils, which are just bits of paper, shaped like a browser, with some grid-lines. You also get a neat stencil/ruler, which is just awesome.

Image source: UI Stencils

Kerem Suer

 

I use the Dot Grid Book for wireframing and a pretty heavy pencil called Graph Gear 1000.

Image source: Creatives Outfitter

I think what you use doesn’t matter much. It’s a very personal experience, so I would suggest whatever pencil you feel comfortable sketching with, and whatever kind of paper you feel comfortable sketching on, is your answer.

Janna Hagan

 

For sketching, I use plain old paper and pen. These sketches are usually just for me to organize my thoughts and ideas.

I do wireframes from scratch in Photoshop. Although there are probably great wireframing tools I could use to save time, the wireframe isn’t just for the client. It helps both me, as the designer, and the client figure out what would be the best way to layout the content on the website to best suit their customers. This is just a personal preference, though.

Mark Jooste

 

For sketching out ideas, I like to use a mechanical pencil so I can sketch out the rough shape, and then go in and refine it with darker detail.

Once I have a few designs I like, I will then scan or even just take a photo with my iPhone, and then clean them up in Photoshop.

After that, I will send a few to the client. Once they have approved a couple, I will go and "vectorize" it quickly in Illustrator.

When the client finalizes the logo they want, I will do final tweaks and touchups in Illustrator, and also do up a "stylized" version in Photoshop.

Do you use any tools or particular techniques for creating visual mockups?

Adham Dannaway

 

Once I’m at the stage of creating a mock-up in Photoshop, I usually start from scratch with a 960 grid.

I then create folders in Photoshop to ensure that my layers are organized. I usually split up the website interface into folders such as header, footer, navigation, etc. I often also create a folder for all the hover states for different elements. This "hover" folder stays on the top layer.

COLOURlovers is a great resource for creating colour schemes but I usually base the colour scheme on the brand guidelines.

Visual Idiot

 

This is my favourite part of making something. I have my grid generated from grid calculator, which is usually around 900-1000px wide, but the colours and fonts are just trial and error.

I have a massive Photoshop document full of them for each project.

Janna Hagan

 

I always use grids. Grids are important for making designs precise and pixel-perfect. I don’t really use any tools, but I like to have all my resources (such as textures, icons, plugins, etc.) all numbered and labeled so it’s easy to browse through and get ideas when I’m creating in Photoshop.

Callum Chapman

 

Not really. When designing for web, I sometimes use the 960 Grid System, however with high-resolution screens becoming ever more popular (my 13", probably the most popular small-screen laptop on the market, has a width of 1280px) this system is becoming less and less standard every day.

Generally I like to keep my work very precise (even numbers, i.e. instead of a button being 203.5px wide, I make sure it’s 202 or 204px) to keep things easy for the developer.

If I’m stuck for ideas with colors, I use COLOURlovers.

How do you deal with different file versions?

Janna Hagan

 

I am fairly good at organizing my files. I’ll usually have a folder for first revisions, second revisions, etc. Sometimes a client may like a previous version of your design, rather than the latest one you just did.

Once you delete something, you can’t get it back! I learned this the hard way, so I always keep backups of files (in Dropbox). It’ll save you a lot of time.

I also number and label all invoices, contracts, client content, etc. to keep things readily available when I need to access something.

Mark Jooste

 

Throughout the whole process, you will end up with a few different file types and versions. I tend to keep the file names with …-sketches-page1.jpg and then …-Logo-V1.ai. And in the end I will have …Logo-Final.ai.

Visual Idiot

 

If I’m designing, I have a folder for my particular project in my "projects" folder (unsurprisingly) in my Dropbox.

If I’m coding, it’s Github all the way. They’re popular for a reason.

Kerem Suer

 

I think I live in my Dropbox. And I came up with a rule after almost losing gigabytes of wedding, engagement and puppy photographs: "Don’t delete anything, just archive it."

What do you do to test your production?

Osvaldas Valutis

 

In web design, testing is firstly keeping eye on marketshare of devices, web browsers, and then testing with them.

Personally, I pay most of my attention to marketshare leaders and make sure websites are accessible on them.

The interesting thing is that testing on "less important" devices/browsers can possibly reveal mistakes you’ve missed in HTML/CSS/JavaScript code because modern browsers sometimes dismiss or handle these mistakes for you, compared to older browsers.

In the end, though, the best test are users.

Kerem Suer

 

For iOS apps, I use Testflight.

For web projects, I usually test locally.

If we’re talking about beta testing, I usually ask designer friends, because they tend to have the eye for detail. Also, my wife has been super helpful for certain apps I’ve worked on since she’s not super savvy with technology (hope she’s not reading this).

Callum Chapman

 

Usually this is down to the client because, at the end of the day, they’re the boss and have the final say.

I normally use Dribbble or ask friends — both designer friends, and friends who have no idea what I’m going on about most of the time — for advice or to see if they can get from A to B without too much thought.

Adham Dannaway

 

When building a website interface for an application that has a specific purpose, the only way to know if it’s working as intended is to test it on real people.

Services like UserTesting.com are great to get feedback from real users. I find that you’ll often only need to test your interface on a small amount of people (5 to 10) as they will help you discover most of the flaws in your design.

It’s also important to get the client to test the interface as they have a strong understanding of their user-base and will be able to come up with new ideas and insights.

Your Turn!

What do you think about these techniques and methods? How do you work to achieve the best results in specified time span? Please share your experience about working as a designer in the comments below.

Related Content

About the Author

Tomas Laurinavičius is a blogger and designer from Lithuania who’s currently studying Multimedia Design & Communication in Denmark. Check his work at his personal portfolio site and follow him on Twitter.

16 Comments

Shana-Kay Barnett

September 12th, 2012

Thank you. This was very useful information. I found new tips here as well. As a web developer I am very thankful for this information that will help me to enhance my business.

Damian Herrington

September 12th, 2012

Great article.

I’ve been using the processes above since I first started in the web industry and after recently reading Smashing Magazine’s Redesign The Web I’m now wanting to try a more content first approach/workflow whereby I can structure and style the content directly in the browser and let the layout be dictated by the flow, then I can design the other components to suite the overall atmosphere. That’s the plan anyway!

Adham Dannaway

September 12th, 2012

Great article Tomas, interesting to see how other designers work.

Josh

September 13th, 2012

Super article. I really appreciate it. I’ve got some more researching and purchasing to do.

Maija

September 13th, 2012

I’m really pleased I was following Adham Dannaway’s Facebook page and therefore spotted this article.

It’s really nice to get some insight into how others work. When you work so much on your own it helps to know what others are up to… and stencils!? I had no idea they existed!

A question for Kerem, (sorry this is a boring one) but do you sync your Basecamp Calendar with iCal? Basecamp events aren’t editable in iCal and because they go into iCal without an end date you can’t block out a period of time from within the Basecamp Calendar. Have you noticed that or is it just me?

And Osvaldas I like the sound of the way you do things and would like to talk to you some more about Typography – my favourite design element!

Greg

September 14th, 2012

Functional wireframes are the way to go. I have a WordPress theme that is based on a blue line grid, not as a replacement for sketching, but as an intereim phase.

This way we can test UI flow and content priorities on a real site. I make the link available to the client.

In this way the rough draft becomes the final, and you are done.

Also, I will often prepare some art assets at the beginning, or after the sketch phase, because often your visual language can affect how you structure your wireframes, and it gets the client excited.

Dan

September 17th, 2012

I would recommend checking out Gtdagenda.com for an online task & project manager.

You can use it to manage your goals, projects and tasks, set next actions and contexts, use checklists, and a calendar.
Syncs with Evernote, and also comes with mobile-web version, and Android and iPhone apps.

Richard Bland

September 17th, 2012

This was really good. It’s nice to see most using DropBox for file organisation. Will definitely be checking out some of the links provided. Colour Lovers looks pretty cool.

I use Dot Grid Notebooks too for my mockup sketches. I fricking love them so much so I am selling them here in the UK. You can see them on eBay: http://bit.ly/UJlMUZ

Rumjhum

September 17th, 2012

thanx for this useful article,I’m a graphic designer by profession(11 years in this field)but my stream is genetics(bio):).So i’ve no technical knowledge about design of any university.But I’m a tremendous lover of graphics.Blogs rather internet is my teacher.
There are 3 points I always try to follow..
1)Be logical
2)Take Inspiration from nature(colors/form of design etc)
3)Be trendy.
This article is very much useful for me.

Steve

September 17th, 2012

Great article. I went through to each and every designers site and profile, each of them are very talented. Being new and self taught I find there work inspirational. The tips are great. I have a question for them. Are most of them developing on the web using Javascript Frameworks now..? There sites are super…!

sabrina raket

September 18th, 2012

drop box is a awesome not only for designers but for clients. easy to upload for them and easy to access for us!

Adrian Moga

September 19th, 2012

I use flairbuilder for the last few years and I am very happy with it.

Michael

September 20th, 2012

I’m curious. None of them seem to mention research, except Mark Jooste, but even then he’s only talking about it in terms of coming up with ideas.

Surely every big client web project needs to start off with some form of research? For instance, instead of designing blindly for the visitors, why not research them first? For example, you’re creating a website for an estate agency. In that case, you might conduct a survey of house-hunters, or even conduct an actual focus group. This allows you to identify the needs of the actual people that will visit the website, rather than just guessing or going by what the client says.

Seems all too often, people design primarily for the client. But if you conduct some initial user research before you start designing, you can make sure you’re designing for them too.

Just my two pennies.

Kozan

September 25th, 2012

great post, I really appreciate it. I’ve got some more researching and purchasing to..

UrbiCZ

September 28th, 2012

Really helpful article. But how to correctly choose colors? I have created few designs but sometimes I dont like it because of bad colors.

kim kizyma

September 30th, 2012

interesting! glad i read this article, got a lot of useful sites to use

Leave a Comment

Subscribe to the comments on this article.