Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

May 02 2011


Preparing For a Web Design Project

There are several stages during the process of a web design project, and every stage is important to achieve a positive end result. In order to proceed to the research phase, you need to gather information and know what the project is about, which technology is required, the target audience, goals, content, etc.

There are great articles out there explaining theory aspects of a web design process, stages, and how you should proceed. Those articles (which I recommend reading) can give you a good understanding of this matter and they are usually very theoretical, which is not the purpose of this article.

Do you ever felt curious about how other designers build their web sites? How do they organize things while working? What tools do they use beside Photoshop?

Every professional designer or developer work in different ways, however, the goal is to give you good insights about how you can prepare and deal with some practical aspects of a web design project.

The points that you will read about are:

  • Folder Structure
  • Inspiration
  • Wireframes/Structure
  • PSD
  • Layers
  • Tools

Folder Structure

So you have 150 projects on your hard drive, and most of them have a folder structure that you decided to use according to your mood, so some have PSD files mixed with AI files, and you have 3 CSS folders named “CSS_old[1]”.It will take some time to organize, now that some of those clients are interested in a redesign process.

Having a nice and organized folder structure, and getting used to it in every project can really speed up your work flow, you also receive positive points if you start working with a team, and it keeps your sanity intact.

Folder Structure

I like to have my folders named correctly and everything separated.

Site – Everything related to the web site implementation. It contains assets folder described below and HTML/PHP files, or other type of files depending on the language it is being used.

Assets – Contains “css” folder for stylesheets, “js” for JavaScript files, “imgs” for images, “classes” is used usually for PHP classes, “includes” for some other PHP files, and “fonts” are used for @font-face purposes.

PSD – It is pretty self-explanatory. It will contain all PSD files of your project.

AI – Same thing as “PSD” folder but for Illustrator files.

Ref – I always like to have a “Ref” folder, which I use to store Image prints of web sites that will later be used for inspiration and brain storming.

Data – I use this folder to store documents, old logos or other files that will be needed for the project, usually the ones provided by the client.


Inspiration is mandatory and a key factor for every project, no matter of what nature. However, since this is a practical article, the goal is to give you work methods and not theoretical points, so let’s get started.

Now that you know how I organize my folder structure, you can see that I have a folder called “Ref”, which is where I store all the references I like and consider important for the project I’m currently working on. First thing is to open your favourite showcase galleries, and google keywords related to the work you are looking for. Let’s assume you are looking for nice portfolios, in this case I would do a google search with keywords like  ”portfolio web design inspiration“, and if you try it you will see hundreds of expected results showing up. Keeping my folder “Ref” open, I just need to take a screen print or drag (if available) the web site image to my “Ref” folder.


I usually dedicate 30min or more to research and inspiration, no distractions allowed. This is something I always do, even if I already have the design in my mind. Storing your favourite designs on your “Ref” or “inspiration” folders, can also give you a great collection of layouts and ideas for your future projects.


Most designers care less than they should when it comes to wireframes, which I consider underrated. A wireframe illustrates the layout of a web site, representing its structure in terms of content and usability. If you’re dealing with clients, wireframes can be particularly useful to communicate and define some ideas.

Wireframes and Structure

Personally, I love to create wireframes in my Moleskine, however, when needed, I also like to use iPlotz which is a nice and very complete web application, but I am pretty sure that there are dozens of other great tools out there.

Last year, Dainis wrote a very useful article where you can find useful tools for Wireframing – 18 Wireframing, Mockup And Prototyping Tools To Plan Designs


1. Save potential time lost

2. Easily revised

3. Fix and study usability flaws


For the sake of simplicity, let’s assume you use Photoshop, as most of us do, if not, the general idea is the same.

When I am designing and creating a project’s layout, one thing I do is having an extra PSD file open. This PSD file is essential in big and small projects, and can increase your work performance tremendously. I usually call it Elements.psd, and it’s where I store common elements of every layout page, like text, colors, buttons, lines, and all the other graphic elements which can be of common use. It becomes easier to edit, especially if you have more than one template color in your project.


When you start designing a sub-page and you have every element organized in your Elements.psd file, than you just need to drag the layer you want to your sub-page, instead of having to open the homepage to look for the file and copy to the new sub-page.


This is probably the most time-consuming mistake that beginners, and some advanced designers, still do. The reason is because designers immediately start creating their concepts keeping their focus on the design, and nothing else. Believe me when I say that having three layers named “Layer 1 copy” among ten other layers named “layer 2 copy”, isn’t very helpful for future edits.

Before start designing the layout, I like to organize my layers by folders and colors.


I do not use colors on all projects, however, it only takes a few seconds to make and can be useful later on. Every designer have different uses for colors, so if you are going to use colors, be sure you find a good use for them or don’t use them at all.

Layer Colors

Let’s say you have colors for different sections of your Content like I have on the image above, if I drag by mistake a layer from “Image slider” inside “Top bar”, I will have a yellow layer between orange layers. This is particularly useful for big projects where you need to have your layers in order.


This is one of those topics that could generate a new article. I will tell some tools, web applications, and frameworks that most designers and developers (including me) use for their projects. If you any have suggestions, feel free to comment.

Adobe Suite

No need for introductions.

URL: Adobe

Adobe Suite

Coda (Mac Only)

URL: Coda

Top Web development application for Mac OS X.



jCodeCollector is a multi-platform application that helps you to manage your code snippets.

URL: jCodeCollector



EasyPHP is a WAMP package including the scripting language PHP, the web server Apache, the SQL server MySQL, as well as easy development tools such as the database manager PhpMyAdmin and the debugger Xdebug.



Adobe Kuler

Web-hosted application for generating color themes.

URL: Adobe Kuler

Adobe Kuler


Gives designers and developers a subscription-based library of hosted, high-quality fonts to use on their websites.

URL: Typekit



With iPlotz you can create clickable, navigable wireframes to create the experience of a real website or software application.

URL: iPlotz



jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.

URL: jQuery


March 22 2011


Copper Project -The Webs Best Project Management – Giveaway

Copper is a project management software tool that helps you and your team manage projects, tasks, clients, contacts, and documents online. Thousands of businesses in over 50 countries and across numerous industries choose Copper as their preferred PM tool.

Screen shot 2011-03-22 at 7.33.19 AM

Copper is made for teams that need to plan and execute their projects quickly, efficiently, and cost-effectively. It’s like having a full time project manager keeping you and your team on track.

If you run any kind of design or web-related business, an internal marketing team, ad agency, medical team, education department, or any other special project team, once you’ve used Copper you’ll wonder how you ever did without it

Features Include:

  • Manage Clients, Projects & Tasks
  • Drag & Drop Timeline (This tool allows you to create and manage your project timelines, in seconds)
  • Allocating People and Booking Time & Resources
  • Logging Hours and Comments
  • Storing Files & Folders Pertaining to Specific Projects
  • Tracking and Managing your budgets & Invoices
  • Importing and Exporting Data (including your MS Project XML files, Syncronization of your Outlook or iCal calendars, Import and export of your Contacts via vCard, CSV & PDF exporting of Reports, Quotes and Invoices, or full backup & restore of your entire Copper database via the Admin console.)
  • Project Timesheet Reports
  • Plus Many More (take a full tour here)

“What do we think of Copper? Its super!!! Currently our whole creative team (online and offline), our data/crm dept, and our client service team use it. We’re now working with Ben and the crew at Element Software to tailor the product to suit our unique requirements, what other software company is so responsive?” – Yannis Piperakis-Papadakis, CIO OgilvyOne Worldwide

“We have a complex creative pipeline that includes everything from commercial shoots to software development and Copper is flexible enough to handle it all. The tools are intuitive, very well thought out, and best of all backed by developers who are committed to supporting their customers. It’s great!” – Neil McBean Rival Schools

The Goods

20 Free Copper Accounts

How To Win

Tell us the reason you think you deserve a free account. We love real answers. “I really need this account to further my design career by helping me keep track of my work”. Something like that is always a winner over “OMFG I NEED THIS STUFF NAOWZ”.

When Will I Know

Winners will be chosen next Monday (March 28th 2011)

Sponsored by

Made By Tinder

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

Copper Project -The Webs Best Project Management – Giveaway

Sponsored post
Reposted byLegendaryy Legendaryy

March 18 2011


Freelance Series Wrap-Up: Moving Through the Project

As we finish up this freelance series, I thought it would be great to go through the phases that every project needs to be successful. I’ll touch on things like analysis, sketching, design, development, content, and testing. Now, remember that I’m coming from a web design perspective so there will be some phases in here that wouldn’t be applicable to a graphic designer or someone who’s project doesn’t require development. But all in all, I think that the majority of freelancers would use a very similar process. Here we go.

Projection and Timeline

We’ve talked about project scope in the previous post but we didn’t mention the timeline to make sure this thing gets done smoothly and on time. I personally don’t create a timeline until the client has accepted the project because of these reasons:

  1. It may take them a month to accept it, then you have to rework all the dates
  2. It takes up too much time to invest before you know you have the project
  3. If they choose to not go with you, it’s all wasted time

So I tend to veer away from doing a formal timeline until I know I have the project. Then I’ll provide them with something that will show them how long each phase will take, specify dates, specify their involvement, and tell them what is expected of them throughout the process. Something similar to the below.

  • Week 1 – Analysis, Wireframes, Sitemaps – I will need your assistance thoroughly this week to insure we are nailing down the correct links and structure for your site. It’s important that I get feedback from you within 24 hours.
  • Week 2-3 – Design – This will be where the actual design takes place. I’ll be using what we completed in the first week to help us through this process. I need feedback within 48 hours, sooner if possible.
  • Week 4-5 – Development – This process will be a break for you where backend development will be completed before we move into the content implementation phase. Little communication will be needed during this time.
  • Week 6-7 – Content Implementation – This will be a very hands-on phase. I will be providing training during this phase and much of the work will fall on you to be putting content in and learning the system we’ve built it on. I do this because it’s much easier for you to learn the site and system while we are still in development instead of working on a live site and making changes.
  • Week 8 – Testing and Launch – This final week will be for testing, tweaks, final content input, and project launch. I’ll be working closely with you this week as well.

Something like the above provides the client with a very specific outline and information for each section without taking up too much of your time. I usually also put in there that the timeline is not set in stone and will vary depending on client communication and/or if the project scope changes at all. I then also ask them to note any days or weeks they will not be available so we can allow for that.

NOTE: The timelines never look the same. It depends on the project scope as to what can be accomplished in 6 weeks or 3 months. The complexity of the project and availability of resources can and will change this.


Website Analysis

by karola riegler photography

As for the analysis, I mostly just take what the client wants to push about their company and help them to make that idea a reality. Every client has an image or a message they want to promote on the site so you can almost center the site around communicating that message. Make sure that you’re focused on what the end user will get, how they will navigate it, and remind the client that their users are the ones that need to find the information. Since I work with mostly small companies, it’s very common for me to end up working directly with the owner. The owner could very well have some great ideas, and you must listen to them if nothing else, but remind them that they need to target their audience above themselves. They know their product, their potential customer may not. I like to use the illustration of how I am with computers to help them understand what I mean. I do something like the following:

“I understand what you’re going for here, but lets remember that the users may not understand your product like you do. For instance, I understand how to navigate websites like the back of my hand. I know what should be on one, and mostly what should not. I also quickly recognize if a site is going to be worth my time or not. And, since I’m on a computer so much, I often forget that others may not understand how something works when it’s second nature for me. The same is true with your business. Remember that your customers may be as foreign to your products as you are to mine.”

Most of the time, it’s a variation of that and I say it very light-hearted so they know I’m not coming down on them. It’s important to get your message across without making them feel stupid…that’s no way to run a project. Well, that’s all for this section.


Website Sketching

by ajleon

There’s a lot of thoughts on whether sketching is necessary, if wireframes are worth the time it takes to make one, and if sitemaps are truly needed. I’m still fine-tuning this section of my work but I’ll give you what works for me at this point.


Do it. Sketch everything out. I often take a sketch pad and marker to meetings…helps to make them realize I can work without a computer. I’m not just a robot they can tell exactly what to do in Photoshop or whatever. It simply helps to establish that I know what I’m doing and I’m serious about it. For the most part, the sketch is my wireframe…and no, you don’t have to know how to draw to be able to sketch. Sketching also removes the constraints of  “perfection” that many of us designers fall prey to when using a computer. There is no need for details, just keep it simple and map out how things should basically look and flow.


Like I said, my sketch is a wireframe. I don’t use some fancy program to do this, I simply lay out where I feel the links need to be and where the content is going, 1, 2, or 3 column, all those sort of things. I typically sketch out a few pages of thumbnail layouts (4 to a page or so) and then I’ll go from there to make one “final” wireframe. Just send it to them as a PDF or jpg for review. Be sure to go over it with them so they know what they’re looking at. Just sending them a sketch with no explanation will make them question what the heck they hired you for. Seriously though, don’t waste much time on this unless it’s a huge project and then you’ll probably need to get some outside help to understand what level of effort is required to complete the project.


Now the sitemap really goes hand in hand with the two above and, in all honesty, these 3 flow perfectly together for me. I will often end up doing a content flow in place of the sitemap to help them understand how I think the site needs to be setup. Remember to double check with them that you understand everything they offer and aren’t putting it in some random spot on the site where it doesn’t make sense. Working with them closely on this is important.


Website Design

by KillerBeeCreative

Well, we’re finally here. I bet you didn’t know there was so much to it before you actually get to be the designer. Well, you probably did actually. So, in the grand scheme of things, the designer in us actually plays a pretty small part if you’re talking about making things pretty. Being a designer encompasses much more than that though. We have the duty of making sure things work how they need to be for the end user. It’s our job to be user experience designers as well as visual designers. I won’t get into the whole user experience design definition but I do feel it’s thrown around a lot today. The gist of it is to make sure things work great and make sense.

So, back to the visual design. While it’s important to make it functional, it should make sense, and of course be beautiful. You also have to take into account that the client likely wants their personal spin on it. This is where you often have to stand up for yourself as a designer and explain to them that they hired you to do this because of your expertise. You are the expert in this field and you need to inform them of that. Unfortunately, some clients need to hear it more often than others. But make sure you’re not a jerk about it. Sometimes it is best to relate it back to their business. Just spin it to where it reminds them in a light-hearted way.

During this phase I usually end up doing the homepage design first, then some iterations of that. I’ve yet to go past 2-3 different designs but often have 4-5 revisions on the one they choose. Some people put this in their project scope to define it, and that’s not a bad idea at all. The second page I do is a style-guide for the site. I lay out how every type of content will look. It will be everything from basic paragraphs to images floated left and right to block quotes. Basically, if it’s something they will be using in the content, it needs to be designed out for approval. Then I finish up by applying those styles to some different inner pages to show them what they will look like with real content. And if there’s any special pages like for pricing packages or something along those lines, we’ll nail down the look of that.

Finally, I remind them that once we leave this phase, it makes changing the design of things much more difficult so we need to make sure they are happy with it. Once they’ve approved, we move onto the development phase.


Website Development

by schoschie

Development doesn’t really require much for me to write here. It’s basically a hands-off time for the client while I work through getting it built out. Sometimes, I will do the front-end development myself; others I’ll outsource it to local freelancers. If I’m going to need some back-end development done, I will have already setup the time frame with my developer and get the files they need to them during this time. Now, I mentioned in the timeline at the top that there are two weeks for development. This will vary, actually. If it’s just a WordPress theme or something simple, I can do it in a week. If it’s more complex, I’ll need a couple weeks up to a of couple months. So the timeline it self will vary depending on project and it complexity.

Content Implementation

About 95% of my projects are built on a CMS platform. It’s usually WordPress but I also have sites on Magento and CS-Cart. Since there is a way for clients to add, and manage, their own content, I have them put in their own content for the most part. I take this time to do some training, usually over the phone or Skype unless they are local, and I follow behind them to do some clean up and make things look prettier. This also usually involves me adding some more styles or changing a few things in the CSS that may or may not be to my liking after we actually get the real content in. This also varies greatly depending on how much time the client wants to dedicate to the project. They are often the deciding factor on how long a project will actually take.

Testing and Launch

Website Launch

by jurvetson

Now for the final phase of the project. The notorious and not so glorious testing phase. If you’re new to development, accept the fact that IE will display your information wrong, somewhere. I’ve yet to develop a site without an IE issue. They can be resolved, but they’re almost always the culprit. Also remember to test multiple versions of the browser and cross-platform as well.

Once you’ve gotten approval that everything is a “GO” from the client, it’s time to get that project launched! There are tons of ways to launch a site depending if it’s WordPress or Magento or some other platform. My advice here is to research how to take a site from development to production for whatever platform you are using.

Best of Luck!

I hope this series has encouraged you and helped you through this process. It’s been a real growing experience for me to write it all down and be able to share it with all of you. Keep up with me following this article as my next several articles are going to be much more related to design. Take care!

July 23 2010


How To Find A Qualified Designer for your next Project

Whether you are just starting out as an internet marketer, a seasoned business person or just a mom-and-pop shop you will eventually need a designer to create a whole plethora of designs for you. You may even be a veteran designer yourself, but there comes a time when out sourcing some designs is the only answer.

But how do you find a quality freelance designer who knows his, or her, stuff and won’t screw you over? Read on to find out how to get top class designers begging you for work, how to qualify them all, how to weed out the bad, how to finally choose one and how to handle payments properly and safely.

Before you begin

This isn’t a course on project management, but there are a few things you have to know before you can even start looking for a designer.

1) A high-class (aka: a good designer you can trust) will not even look at poorly written job proposal. It simply isn’t worth their time.

Think about it: if the designer is already a successful freelancer, then they know what to look for and they know which jobs will pay. Therefore, they know to look for quality written job proposals because then they know exactly what the client wants. And when the client knows what they want, it makes the designers job a lot easier. Which brings us to the second point.

2) Make sure you have a complete project description.

This doesn’t mean post the whole project idea and description up on the web for the whole world to see, but make sure you have the completed idea somewhere in your notes.

You have to know everything that needs to be done and in the way you want it to be done. If you have examples of the style you want used, make sure you keep links or copies of them that you can give to the designer. Once you have picked the designer, then it’s time to give them the full details, not before.

3) No great designer will work for pennies, unless you make it really interesting…

If you’re outsourcing that means you are trying to save (and thus earn more) money, but asking top rated designers to work for cheap just isn’t going to happen. BUT, if you make it very interesting and very creative they just might be willing to do it. This highly depends on the project and the mood of the designers, but once in a full moon you will be able to snag a great deal.

For the most part though, top rated designers do come with a hefty price tag. What is very interesting though is that if you don’t require the creme of the crop designer, you can still get professional and high quality designers for a good low price. You just have to shop around.

4) Don’t forget to shop around.

There is no one best place to find a designer. In this dime-a-dozen economy they can be found in all the usual places and even the most unusual places. Look at the designer job boards, freelance sites and even on designers private website. Ask anyone worth asking because you never know who will get back to you with a positive response.

Where to find designers

Designers are everywhere, you just have to know where to look. Here is a quick list of just some of the places you can find great freelancers.

Get A Freelancer (GAF)

GAF is one of the most well-known freelance site for both employers and freelancers. It features many categories of which one will most likely fit your needs. There are plenty of freelancers looking for work there. You can also post job with your requirements (more on this later). This is definitely one place you should look.

Freelance Switch

This blog based design website is a premiere site for designers and the like. With fresh content each week, many designers visit and sign up through this site. You are bound to find not only many designers here, but also very knowledgeable and friendly designers. This site is more community based than job board based.

Digital Point Forums

The Digital Point forums are a great learning resource, but they are likewise a great place to find freelancers. Under the Business section there is the “Buy, Sell or Trade” forum. There you can post your job and find many other DP users who can do the job for you, or at least point you in the right direction. This is a rather friendly forum and fun to hang out at, so be sure have a presence there before posting in the job board.

Creating A Quality Job Post That Will Gather Attention

You do not need to be a marketing expert to create a job post but you do need to create an attractive and descriptive title and description.

A title such as “I need a designer” is not good. You need to be more concise so that you can attract the right type of designer and not just bottom feeders. You title should be reasonably descriptive. Something like “Logo design needed for Design niche website” is significantly more descriptive and will garner more attention. Try to mention what specific item(s) you need and for what niche at a minimum. Also try not to make the title too long. 7-12 words max.

The job description should include what items you want them to do, such as a logo, banner,  or site design. It should also include your style requirements and any examples you want to show them. It’s also a good idea to state the time frame.

Let’s review, a good title will:

  • Be short, but descriptive.
  • State the item or items needed to be made
  • List the Niche or topic
  • If it’s a fast or small job, state so (ie: “quick job”).

A good project description will:

  • Restate what needs to be designed.
  • Give a time frame
  • List your design requirements:
    • Color
    • Size
    • Style
    • ect…
  • List of example work to explain some style points if need be
  • List the budget (more on this below).
  • State payment process (if need be, also more on this later)

But there is one more extremely important part which will significantly increase the quality of freelancer you can choose from and ease your vetting!

Pre-Vetting Designers

One step which most people never do and regret later, unless they get lucky, is to pre-vet people who respond to them. What is ‘vetting’? It’s the process of weeding out the bad and leaving the good! Pre-vetting is simply for doing this process before the actual selection process.

This is done in a very simple way on your job posts. At the bottom of your job post, you give the respondents a simple task to complete. This is not something such as making a mock-up design, it’s something very simple and really a no-brainer assignment. It’s a task that even a monkey could do!

Here is a short list of task you can pick from:

  • “Respond to this job post with ‘I understand all the requirements!’ for me to consider you. Failure to do so will mean you will not be considered”
  • “To make sure that you understand the requirements please Respond to this message/Private message me/E-mail me/Contact me with the message ‘I read all the requirements and understand it all’. If you do not I will not consider you for the job.”
  • “To be considered for this job, please answer this preliminary question first: Is a hot fire hot or cold?”

See? You ask them to do something very simple. If they are unable to complete this extremely simple task or answer the question then they probably don’t have the brains to follow any of your other instructions.

Interviewing Potential Designers

After your job has been posted for a few days you will have several replies. From the people who replied, select the ones who replied correctly. Out of those who replied correctly, it’s time to sit down and interview them.

You do not have to do a full-blown job style interview, but there are several things you will want to know about them. You will also not want to interview them all.

Some job board websites have bidding and user ratings for each job and designer. If a designer bid above your budget, then it’s probably safe to ignore them. Try to follow these tips when picking final interview candidates:

  • Does the user have a good rating? Yes? Good!
  • Ignore users with no previous jobs done, zero rating(s) or a negative rating/feedback.
  • Do not pick designers to bid above your budget. Though you can try to talk to them and negotiate a lower price.
  • Talk to the highest rated users first.
  • Don’t care if they don’t speak (or type) English (or your language) perfectly. This is design, not highschool English class.

When you are talking to the candidates, there are several very important things to ask for which will ensure that they are good for you and your project. You should ask:

  • Have they done this type of project before?
  • When (ie: how fast) can they complete the project?
  • Do they have a portfolio to show you of their previous work?
  • Do they have references?

The most important aspect is can you work with them. Do they fit you and the project? What’s the point of getting a great designer if you can’t stand them?

Weigh all the attributes and pick one that works for you. Don’t forget, pick one that has proof of past history of quality. And don’t be afraid to call their references!

How to handle payment

Usually the designer will be paid full price at after the project is complete. This is the norm for project such as logo designs, banners, ads, and (smaller) web page design. If you order through a private or company website, then you might have to pay upfront.

If you use a site like GAF or Freelance Swtich then payment will most likely be through Paypal. Most designers have their own Paypal account, so if you don’t have one make sure you create and verify one before you post to job boards.

For any small job, like the banner or page design, it’s ok to pay the designer after the project is complete. But if you have a larger scale project, the most secure way to establish payment is with milestone payments and through an escrow account.

An escrow account will hold your money for you, and is guaranteed for the designer at certain intervals and after approval from you. They are many places to create escrow accounts and each place will act as the 3rd party intermediary should any problems arise.

After project completion

Once you have sent the payment for the project, be sure to give a small tip. It’s not required but is a good gesture if the designer did a very good job and in a very quickly. This also creates loyalty. The designer is significantly more likely to work for you more often in the future if you treat them well.

If you are satisfied with their work, be sure to keep their name on file for future work or to reference them to others. If you send work to them, they are also very likely to recommend you (and your products) to their friends and clients.

Don’t be afraid to ask your own questions to the designers or to even ask for recommends of other designers for other tasks (if your current designers isn’t an expert at a certain task). Be friendly and they will surely do an extremely good job for you now and in the future.

April 19 2010


Smashing Magazine Redesign: Photographs & Screenshots

Last year we took on one of our biggest projects yet, working on the new Smashing Magazine re-design. In this post we’ll look at some of the elements we designed for the project, many of which nobody has seen before.

The Brief

The brief was for a re-fresh or update of the current design, rather than an overhaul. They wanted things to be crisper, cleaner and more together - but a lot of the elements needed to stay, so that it still had a familiar feel & felt like something that people were used to.

Launch Project Photo Gallery

Not everything we created made it in to the live site. So we’ve decided to show a gallery of some screen-shots & previews of our involvement in the process.

We’ve put together some photographs of various ideas and work in progress from the early stages of the design. The photos were taken during the design process, and there has been various changes made since, by both ourselves and the Smashing team. But it does show an exclusive look at the early stages of the design process.

Wireframe & Moodboard

The first stage was to work on a wire-frame & mood-board, we showcased our initial ideas on a combination of both. Presenting some solid ideas like this backed up by examples and solid reasons it makes the start of any project much easier.

Things That Never Made it

Since handing over the project to the Smashing Magazine team a lot of changes have been made. So a lot of the work we did never actually saw the light of day, which is why this post has been made and also why we’ve uploaded a Gallery.

Some of the things, in our opinion look better in earlier versions than they do on the live site. But at the same time there’s a lot of good that came from the client feedback and a lot of improvements have been made.

In my honest opinion, the current live site is in need of a little fixing up. We’ve been in touch with the Smashing Magazine team about some of the changes they’ve made, and put forward some improvement ideas of our own. Whether things will change I’m not sure, as we’re no longer actively involved in the project, but we have kept in touch with the team - and shared our honest feelings with them.

A quick look at some early details

Here’s a quick look at some details we quite liked, but we never got to use, for one reason or another. Even though they weren’t used they were a starting point for changes for both us and the Smashing Mag team.

We also worked with our good friend Pasquale D’Silva again on this project, he provided the character Illustrations for the about us pages. The characters were later used by the team for other things, but never as we originally planned it as part of a “meet the staff’ feature (above).

Speaking of Pasquale

As mentioned the characters we’re made by Pasquale D’Silva. We came up with the idea of having him draw each of the staff members to use on the about us page. Something that the clients loved. Here’s a preview of the 4 brilliant characters he came up with.

The Experience In Conclusion

Working on such a huge part of the design community was always going to be a challenge. It was a huge honour to be involved with the team and the project and all in all I’m proud of the work we did on the project.

As with any project there is always things I wish could have been different, but on the whole we’re happy with the work we put into the project and how things looked when we were done, and it really was such a massively fantastic project to have been involved in.

December 25 2009


Tools And Techniques To Manage Creative Projects On Your Mac

By Matthew C. Gallagher

So you have sold your idea, your client has committed to the project, the next step is – How do I manage this most effectively to successfully complete this job?

There are generally 3 accepted rules of project management: time (delivery to client or launch of product), budget (cost to deliver project) and scope (definition of contracted project).

Some folks substitute quality for scope, but focusing on time, budget and the scope of any project inevitably affects the quality delivered to the client. For the sake of this article, we will stick with time, budget and scope as the guiding principles for project management.

Furthermore, we will only address the time issue in our approach and how best to manage the project on your computer. So you have a new project and are looking to complete it in the most efficient and effective manner to maximize its success, your client’s happiness and your bank account. Let’s get started.

Mail 01 in Tools And Techniques To Manage Creative Projects On Your Mac

Creative Projects

The creative process is different for everyone but mainly follows 3 simple steps: brainstorming, concepting, finished work.

All of these can be solitary pursuits or group-based efforts and usually involve a team working towards a common end goal.

Brainstorming is the advent of the idea. It is the first in a series of steps in solving your client’s business problem. Sometimes you may be involved in the original brainstorm with the client, but many times you may be brought in to create what the client has already determined they require.

The concepting phase is where the solution is detailed and prototypes built. Much of the creative development occurs during this phase. The general roadmap is established and the creative finish is determined that will guide whatever production is to follow towards completion.

Finally, the finished work is completed. This can be an illustration or a complete website. The process for them both is the same; a series of time-frames with milestones in the development for review and revisions to ultimately meet the client’s original requirements.

Some of the best applications available revolve around creative development. A truly great applications is one that combines the experience of pen and paper design with the ease of production of allowed via the computer.

There are numerous developers, both small and large, creating applications for brainstorming, wire-framing, flowcharting, etc. Ultimately, it is not nearly as important who the developer is, as does their solution fit your needs and work-flow.

Omnigraffe-07 in Tools And Techniques To Manage Creative Projects On Your Mac

Omnigraffle Pro is a diagramming program that provides the necessary tools to develop much of the documentation required for today’s interactive projects. Some of the basic templates provided are in the key areas required for your creative production: brainstorming, organizational charts and drawing.

Omnigraffe-08 in Tools And Techniques To Manage Creative Projects On Your Mac

Once you begin using it however, there is really no limit to what you can create with the application. The work area is clean and clear, allowing the use of multiple layers and the toolset provided rivals many of the traditional graphic programs costing much more.

Regardless, any application that provides tools that complement your natural workflow and aid the organizational process will help any project succeed.

Getting Things Done

There is a commonly used action management method, created by David Allen, that revolves around the principle of moving recording tasks externally in order to focus attention on completing them; getting things done (GTD). There are 5 phases to its workflow model: collect, process, organize, revew, do.

GTD-pipeline-2 in Tools And Techniques To Manage Creative Projects On Your Mac

The GTD method has become very popular across the business spectrum and there are a few applications that allow you to implement this strategy for your business.

Culturedcode-things-02 in Tools And Techniques To Manage Creative Projects On Your Mac

Developers like Cultured Code and Omni both offer GTD based applications that can easily integrate into your workflow. Cultured Code’s offers Things (their mobile application received one of this year’s Apple Design Awards at the 2009 WWDC) while Omni offers OmniFocus.

Culturedcode-things-01 in Tools And Techniques To Manage Creative Projects On Your Mac

These types of GTD applications allow you to set up your projects, establish the related tasks required and manage the workflow in a straightforward application. The ease of using such a simple application insures that you will use it.

While so much of business today is done away from your office having mobile applications is fast becoming a norm for today’s professionals. One of the other key features of the more effective applications is their option of providing a corresponding iPhone app.

An iPhone application that integrates seamlessly with the desktop application allows you to focus on the tasks necessary to succeed while letting the applications do some of the heavy lifting.

There are many tools available today to manage your project’s schedule and enhance your time management. One of the things I have found over the years, however, is these applications need to integrate well into your established workflow, rather than vice-versa. If the applications require us to learn a whole new set of dynamics, that lessena the likelihood of successfully using them.

Client Expectations

One key to a successful project is open communications; between team members and most importantly with the client. Engaging everyone involved in the project will enable their ownership and active participation during its life-cycle to ensure its successful completion.

This communication can be managed through Mail, just as easily as any other means. Apple’s Mail is a great application that is also quite powerful in its management of data and integration into other applications.

Mail 01 in Tools And Techniques To Manage Creative Projects On Your Mac

Mail can become your central hub for this activity for now Mail can provide a place for your Notes and tasks with their new To Dos. In addition to this, Mail is also a great RSS reader as well. If you have several feeds you monitor for your projects all of this can be easily integrated within a single application.

Mail 02 in Tools And Techniques To Manage Creative Projects On Your Mac

Mail is also an integral part of your iPhone. So even though you may be away from your desk you are never away from your data and the ability to successfully manage those client relationships.

There are a few things that Mail does not do as well or not without a bit of 3rd party application integration; that is customer relationship management (CRM). Where Mail might exhibit gaps, other effective applications step in to cover those gap.

Daylite 01 in Tools And Techniques To Manage Creative Projects On Your Mac

I like to be able to manage my communications through an enhanced CRM application that connect my tasks, emails and daily activity and tie it back to projects and opportunities for my business. MarketCircle’s Daylite is a handy application that allows these activities as well as provides a framework for planning the entire life cycle of your project. From opportunities to documentation you can track most every task required for keeping yourself and your clients in the loop since it can easily be integrated with Apple’s Mail.

Regardless of the tool, some of the most effectives steps I take with my own projects is a daily ledger of activities, a weekly progress report and finally monthly updates (if the project warrants) for my clients.

Any application that can integrate with my workflow, provide detailed reports which can easily be shared with colleagues and clients will ease the production schedule of most any project. An application that allows me to establish roles, responsibilities, tasks, etc. will more easily integrate into my workday and let me offload some of my tasks to intelligently designed software.

Daylite divides your data into calendar, contacts, organization, projects, opportunities, groups, tasks, appointments and notes. It is efficiently designed and it integrates with Mail, through the Daylite Mail Integration module, so keeping everyone on the team informed is a breeze.

Good software can be of great service to any business looking to lessen the time managing the work and maximize the time doing the work. Some of these applications can be extended to work with other integral applications in your business through the use of Application Programming Interfaces (API). An open API means that other developers can take a valuable piece of software and write a plugin to extend one application’s functionality and extend it into another application.

Daylite-plugins in Tools And Techniques To Manage Creative Projects On Your Mac

Daylite also has such an API that allows it to integrate with the likes of; MYOB, Filemaker, Lightspeed, MoneyWorks and more. This integration with other applications allows you to customize a software solution to fit almost any businesses need.

Again, the more robust applications feature mobile versions to keep you up-to-date and informed on the go. Many of the applications on the market offers a similarly feature-rich version for the iPhone while providing an option for you to examine through their 30-day trial versions.

The applications are not nearly as important, however, as the tasks they allow you to manage. Keeping an open dialogue during production is a key to its eventual success. As long as everyone is aware of the progress of the project surprises and the inevitable issues that arise during production can be successfully mitigated. Having great software that helps keep you on top of communication can help mitigate any bumps along the road.

Managing the Production Schedule

So what tools can assist your production schedule? There are a wealth of tools in the marketplace designed to assist time management and I have used quite a few over the years. As I have stated above, the ones that are most successful are the easiest ones to use.

Having stated that, a project management application needs to have a few key features. First it needs the ability to track time. Second, the ability to track resources; both people and equipment. Finally, the application needs to track revenue. If a job isn’t profitable, you need to know why and where its profitability fell off the projection so you can learn from the past to profit in the future.

There are numerous providers of applications designed to track production. The above-mentioned Daylite can serve in this capacity, but lacks some of the traditional features usually incorporated into a dedicated project manager (i.e. Gannt charts, resource allocation, etc.). If you want a more dedicated application for project management there are a few that I have used and would recommend.

Omniplan 01 in Tools And Techniques To Manage Creative Projects On Your Mac

The first application recommended for your review would be OmniGroup’s OmniPlan. One of the strengths of OmniPlan is its ease of use while offering easy integration with other application from their software library.

Merlin 02 in Tools And Techniques To Manage Creative Projects On Your Mac

Another developer of dedicated project management applications are the Project Wizards, out of Germany. Their app, keeping with the Wizards theme, called Merlin, is a simple-to-use project manager that offers serious depth which will serve any project manager well.

Finally, the last desktop application for recommended review is FastTrack Scheduler. I used this application a bit back in my days at Disney and it is the foundation that a lot of the newer developers have built upon when designing their applications.

Fasttrack-01 in Tools And Techniques To Manage Creative Projects On Your Mac

FastTrack’s design is not as elegant as Omni Group or Project Wizards. As such it can be intimidating to some, especially those new to project management software. The application, however, is quite robust is a fine option for anyone to review when looking for a project management application to choose for their organization.

In addition to the desktop applications available for project management, there are quite a few web apps available. The first is one that created quite a stir when they launched – 37signals’ Basecamp.

Basecamp-01 in Tools And Techniques To Manage Creative Projects On Your Mac

Basecamp is a combination CRM, like Daylite, and Project Manager. It is entirely web-based and offers different pricing per month based upon your usage. It is an exceptional alternative to the traditional desktop solutions we are all so familiar with but there is the monthly fee to consider.

Some companies also, do not want their data hosted anywhere but within their own server environments. ActivCollab has much of the same functionality as Basecamp, but it can be hosted in your own server environment.

Activcollab-01 in Tools And Techniques To Manage Creative Projects On Your Mac

ActivCollab actually started as an open-source application but migrated, to the great ire of many, to a commercial product. The fork, or branch, where they moved from the open-source world has a continuing development of the open-source version called Project Pier. Project Pier retains much of the core features of ActivCollab, keeping it open source and a viable option for any organization looking for a web-based project management app.

Project-pier-01 in Tools And Techniques To Manage Creative Projects On Your Mac

All of these applications offer a great wealth of resources necessary to manage any project you may be working on currently. There strengths lie in their user interface and ease of integration with other applications you may use on a daily basis in your company.

A great feature of any of these apps is the ability to share the data with other team members to keep them informed of the progress. Insuring the reports functions are easy to customize and share with your team will allow everyone to keep their eyes on their tasks in the production.

One of the biggest hurdles I have personally faced with the web-apps like Basecamp or ActivCollab is the ability to get the clients to participate in the process. Early on in Basecamp’s existence we tried to use it as the home for all of our projects. The internal team members all participated with the scheduling and comments systems, but not one client would even log into the system.

Despite wanting to be informed, much of these applications are perceived too overwhelming for many folks and therefore will remain unused. That is why it is imperative to find a solution that works for you and your clients.

We ultimately went with a system that used the Basecamp for our internal developments and utilized the account services team for client management. As stated above, if the system is not used, it is not a good system so you will have to dedicate enough time to research applications that fit into your company’s dynamic processes.


So we have covered some basic rules of project management and offered a few tools and techniques to help manage those projects on your computer. The key to this process is to incorporate a workflow that is comfortable to you and integrates nicely with your current work style. Otherwise you will not utilize the tools and techniques necessary to work more efficiently and effectively.

All of these applications rely on active participation to effectively monitor the projects. You must update the data to keep the schedule fresh and accurate as well as communicate frequently with your partners during the production to insure the plan is accurate.

Keeping on task and on time will insure you deliver your projects to your clients within their budgets. After all, if you can work more effectively you will have more time to enjoy the fruits of your labor

Further Resources

Software mentioned in this article (in order of appearance):

OmniGroup’s OmniGraffle Pro

Cultured Code’s Things Desktop Application

Cultured Code’s Things Desktop Application

Apple’s Mail

Marketcircle’s Daylite

Marketcircle’s Daylite Touch

OmniGroup’s OmniPlan

Project Wizard’s Merlin

AEC Software’s FastTrack Schedule

37signals’ Basecamp


Project Pier

Related articles and other relevant resources for further reading (alphabetical by subject title).

A List Apart
The site, for people who make websites, has some great articles on project management and workflow by a wide variety of authors.

Communication Arts
A great article on managing your studio.

Wikipedia’s entry on Gannt Charts.

Wikipedia’s entry on Getting Things Done.

Project Management Institute
Leading membership association for project management professionals.

Prototyping with XHTML
Great article on importance of integrating the right systems in your workflow for a better result in the end.

SlickMap CSS
Stylesheet for displaying a sitemap directly from a simple unordered list.

Jeffrey Zeldman
Simple thoughts on project management from a complex mind.

About the author

Matthew Gallagher has spent his career working in all forms of creative development for companies ranging from The Walt Disney Co to Hallmark. He currently runs the boutique design studio designoMatt, building branded websites for destination design, based in Windermere, FL.

November 13 2009


7 Apps That Could Be Really Useful At Work

This is one of the very best list of its kind where you can find few of the useful online tools and could be very helpful for you when you want to get your work done. I hope all of you will like this list if you are office worker, designer, developer, a manager, a supervisor, a student, a home user, etc. Most of them are not very well-known, but they are really amazing in respect to their features. This is the list of 7 Apps That Could Be Really Useful At Work. Just take a look at them and share your thoughts here.

You are welcome to share more useful web tools that will be helpful for web designers and our readers/viewers may like. Do you want to be the first one to know the latest happenings at just subscribe to our rss feed and you can follow us on twitter as well.



Mockingbird is an online tool that makes it easy for you to create, link together, preview, and share mockups of your website or application.



The easy way to manage your projects online. You can organize tasks, issues, messages, and shared files with this secure and easy to use project management application.



Lockbin is a free service for sending private email messages. You can use it to send things like credit card information or confidential information.



Clipperz is a free and anonymous online password manager. Local encryption within the browser guarantees that no one except you can read your data and there is nothing to install.



ShowDocument is a free service for online meetings with fully synchronized co-browsing of any document. It is a quick and simple way to share a document with other people at the same time. It is a web collaboration platform that lets individuals have a free online meeting. It is an alternative to various commercial desktop sharing applications. One can easily upload any file and during the session mark it up with a pen or a highlighter tool in addition to a text box tool and eraser.

Draw Anywhere


DrawAnywhere is an online diagramming website, where you can draw, modify and share flowcharts and other diagrams, with the look & feel of a desktop application. It runs on any browser with Flash 9 installed. There is no need to download and install any custom software. It runs entirely on the web, and thus it is an always-on-access-anywhere solution. It meets all your diagramming needs without installing, maintaining and purchasing expensive software.


Online image converter for free

Go2Convert is a set of free web based tools that allow you to convert, resize a picture without having to install any software on your computer. It is not meant to be a complete Image editing software package. It is meant to be an easy to use solution to convert, resize your pictures and digital photos without the need to learn a complex software package. Once you convert, resize an image, you can choose to copy image’s URL or download it directly to your computer – It doesn’t get easier than that.

User guides (In Adobe PDF format)

Frequently Asked Questions

Brought To You By

Premier Survey
Do you want to advertise here? Click to get more info…

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
No Soup for you

Don't be the product, buy the product!

YES, I want to SOUP ●UP for ...