Webmasters Gallery

There are many aspects of creating a website design. Web designers often have to play multiple roles and be very knowledgeable about building effective and usable site layouts.

Most of the lessons you’ll learn in web design comes from work experience; learning is an iterative process and there is no better way to gain knowledge than to make mistakes (and then and learning from them).

In this article, we discuss 10 essential and general tips that every novice web designer should know.

1. Optimize Web Graphics for Better Page Load Times

Learn how to optimize your web graphics by selecting the proper format and making sure that it’s as small as it can possibly be. Even though people are advancing to broadband connections, there are still quite a few who use dial-up internet connections. Additionally, with the emergence of mobile device technologies that don’t necessarily have broadband-like speeds, having slow page load times due to image file sizes can turn users off.

Here a general rule of thumbs for picking the right file format: images that have solid colors are best saved as PNGs and GIFs, while images with continuous colors (such as photographs) are best saved as JPGs.

There are plenty of tools available at your disposal that will help you further optimize your images and lower their file sizes, check out this list of tools for optimizing your images.

By limiting the number of images you use to the bare minimum, being smart about using images, and reducing file sizes as best as you can, you will significantly cut down page response times of  a web page and improve your web page performance.

2. Keep it Clean and Simple

A good web design is not just one that looks visually appealing, but also one that is user-friendly. A clean and simple web design typically ends up being a high-usability web design that is not confusing to interact with.

By having too many site features and components on a page, you risk the chance of distracting website viewers from the purpose of the website. Make sure each page element has a purpose and ask yourself the following questions:

• Does the design really need this?
• What does this element do and how does it help the user?
• If I remove this element all of a sudden, will most people want it back?
• How does this element tie into the goal, message, and purpose of the site?

Additionally, though it may be super awesome to come up with a new concept or interface design pattern for your website, make sure that the design is still accessible and intuitive to your users. People are accustomed to common interaction patterns, site features, and web interfaces – and if your design is truly unique, make sure it’s not too obscure and puzzling. Be creative, but also keep it simple.

3. Navigation is the Most Important Thing You Will Design

The most essential site feature is the website’s navigation — without it, users are stuck whatever page they happen to land on. With that obvious fact out of the way, we’ll talk about some important points to consider when constructing a navigation scheme.

First, it’s very important to put enough time and a lot of planning on a site’s navigation structure. This is common sense, but it’s still surprising how many web designs take site navigation for granted.

Placement, style, technology (will it use JavaScript or just CSS?), usability, and web accessibility are just some of the things you need to consider when creating the navigation design.

Your navigation design should work without CSS because of text-based browsers. Poke fun of text browsers all you want, but they are still prevalent in many mobile devices. Perhaps more importantly, navigation that works with CSS disabled is accessible (99.99% of the time) via screen readers.

Navigation should be accessible and usable without the need for client-side technologies such as JavaScript or Flash, which users may not have enabled or installed for various reasons such as security or company policy.

It is imperative that you have a good navigation system in place that is located at a highly-visible location. A good navigation is detectable as soon as the web page loads without having to scroll down the web page. This is where keeping it clean and simple plays a major role: a complex and unconventional design can lead to user confusion.

Users must never wonder, even for a split second, "Where is the site navigation?"

For sites organized in a hierarchical, multi-level manner, make sure that it is easy to navigate from between parent and child web pages. In addition, it should be easy to reach top-level pages (such as the site’s front page) from any webpage.

The main goal of your site navigation is to allow users to get to their desired content with as few actions and with as little effort on their behalf as possible.

4. Use Fonts Wisely and Methodically

Though there are thousands of fonts out there, you can really only use a handful (at least until CSS3 is fully supported by major browsers). Make it a point to stick to web-safe fonts. If you don’t like web-safe fonts, consider a progressively-enhanced web design that leverages sIFR or Cufon.

Keep font usage consistent. Make sure that headings are visually-different from paragraph text. Use white space, tweak line-height, font-size, and letter-spacing properties to make content pleasant to read and effortlessly scannable.

Perhaps one of the things that web designers often get wrong is font-sizes. Because we want to fit as much text as we can in a web page, we sometimes set font sizes to uncomfortably small sizes. Try to keep font sizes at and above 12px if possible, especially for paragraph text. While many people face no difficulty reading small text sizes, think about older users and persons with low-vision and other types of vision impairment.

5. Understand Color Accessibility

After talking about fonts, we also need to point out the importance of using the right colors.

You  need to consider color contrast of background and foreground colors for readability and for users with low-vision. For instance, black text on white background has a high-contrast, while orange text on red background will make you strain your eyes.

Also, use colors that are accessible to users with particular forms of color-blindness (check out a tool called Vischeck that will help you test for certain types of color-blindness).

Some color combinations work well only when the color is used as a foreground color instead of a background color. Take for example, dark blue text on a pink background versus but pink text on blue background, same colors but different levels of readability and reading comfort. It is important not only to get a good color combination but also to apply it to the right elements on the page.

6. You Need to Know How to Write Code Yourself

With various WYSIWYG editors flooding the market, it has become as simple as 1-2-3 to design a site. However, most of these editors insert unnecessarily code junk, making your HTML structure poorly designed, harder to maintain and update, and causing your file sizes to bloat.

By writing the code yourself, you come out with clean, crisp, and terse code that’s a pleasure to read and maintain; code that you can be proud to call your own.

Knowing how to use a WYSIWYG or an IDE with a visual preview does not excuse you from learning HTML and CSS. You have to know what’s going on in order to create effective, semantic, and highly-optimized web designs.

7. Don’t Forget Search Engine Optimization

A good designer should always remember to keep the basics of SEO in mind when designing a site. For example, structuring web content so that important text are represented as headings (i.e. page title and logo). This is where learning how to code properly comes in handy. Knowing correct, semantic, and standards-based HTML/CSS – you will quickly realize that divs are better than tables for web layouts not only for accurate representation of site content, but also for search engine rankings; you will also know that CSS background text image replacement is a good idea.

8. Understand that People are Impatient

People on an average spend only a few seconds before deciding whether they want to read more or navigate away to another site. Therefore, you as a web designer have to device a way for encouraging users to choose the former option within those precious seconds.

Know that not many visitors will scroll down to view the entire contents of the page if what they see at the top does not interest them. Remember to keep your important elements on the top where they are easily visible, but also do not overcrowd the top half of the page which can intimidate users and turn them off from reading further down the page. Consider the top half of a web design a selling point: be a salesman, make people buy into the notion that they want to see what else is on your site.

9. Learn About (and Be Aware of) Browser Quirks

One of the things you must know as a web designer is that your work operates in a finicky and unpredictable environment: web browsers. It’s not enough that your designs work on a few web browsers, they need to work in as many browsing situations as you can possibly afford. Before production – test your prototypes using tools like Browsershots.

10. Make Designs that are Flexible and Maintainable

A good web designer makes sure that the site can easily be updated or modified in the future. Designing websites that are malleable and easy to maintain is a sign of a great web designer. Make your work as modular as possible by separating style from structure.

Know that our industry is dynamic and still young – things change in a very short amount of time. Keeping this thought in mind will promote the creation of flexible web designs.

You often hear designers say, “Good designers copy. Great designers steal.”

Well, anyone who says this is one of three types of designers:

One who copies, one who steals or one who admits that not copying and stealing is hard but still tries not to anyway.

For some reason, a lot of web designers believe that there’s nothing truly unique left to create and that there is no such thing as originality.

I disagree, or at least I don’t want to accept that notion. You shouldn’t either.

Designers who copy

These people are at the bottom of the design pyramid, which isn’t necessarily a bad thing. You have to start somewhere.

Designers who copy are novices who haven’t yet grasped what makes a great design great, and so they imitate.

They frequent web galleries, pick a site they like and find a way to recreate and adapt it to the project at hand. This is how anyone learns anything. In fact, this is how we learn to, among other things, walk and talk as babies. We imitate to build a foundation of experience.

My very first website was a fan site for the anime Dragon Ball Z, which I loved as a kid. In the process of creating this site, I taught myself HTML by copying the code from another Dragon Ball Z site that I liked.

I literally copied and pasted all of the code, but then I went through it line by line, learning what each tag did. By the time I designed my next site, I was able not only to understand code but to create my own code from scratch.

Designers who steal

These are, of course, the people who say, “Good designers copy. Great designers steal.” Filmmaker Jim Jarmusch once said:

“Nothing is original. Steal from anywhere that resonates with inspiration or fuels your imagination. Devour old films, new films, music, books, paintings, photographs, poems, dreams, random conversations, architecture, bridges, street signs, trees, clouds, bodies of water, light, and shadows. Select only things to steal from that speak directly to your soul. If you do this, your work (and theft) will be authentic. Authenticity is invaluable; originality is non-existent. And don’t bother concealing your thievery; celebrate it if you feel like it.”

This sums up these burglars well. Once a designer has copied another’s design and feel they have a grasp of what makes a great design great, their natural inclination is to go and create their own great and unique design.

But they soon discover that doing that is not as easy as the other designer made it seem. They learn that the dirty secret of many great designers is that they steal.

In design, to steal is to take inspiration from other people’s work. Designers who steal may frequent online design galleries, like designers who copy, but they know how to hide their sources.

“The secret to creativity is knowing how to hide your sources.” —Albert Einstein

They take only pieces of sites or just the overall concept or theme of something. In 2003, designer Cameron Moll wrote an article titled  “Good Designers Copy, Great Designers Steal” in which he shows the source of a logo he created.

Moll explains:

“The chances of someone else having used this particular piece of clip art were very slim. And the chances of the intended audience — or anyone else, for that matter — being familiar with such a piece were even slimmer. Translation? A perfect source for stealing.”

Designers who try not to copy or steal

It’s a fact that we can’t help but be influenced by our surroundings. Designers steal all the time without realizing it.

A designer may look at the curvy lines of Moll’s logo above and months later may create a logo very similar to it without actually recalling where they got the idea from.

Designers in this category are aware of this habit. They know that creating something truly unique is almost impossible, but they try anyway.

To try, they may start by looking at online print galleries, instead of web galleries. They may also begin looking at package design, architecture, photography, nature—anything but web design—in an attempt to be authentically inspired rather than simply steal.

They look not just for design that works but rather for ways to make designs better.

After walking around a park in search of inspiration for a blog on nature, a designer may find him or herself using images of grass and soil to dress up the footer of the site to look like ground. They might add some birds to the header.

Or, after sitting on a bench and noticing the relationship between foreground and background, they might play around with the user’s sense of perception.

The further a designer who seeks inspiration moves away from web design, the more likely their designs will turn out truly original.

To sum up…

The pursuit of originality on the web is not a lost cause. The web industry is still young, and some things have yet to be attempted.

Once you understand the basics of design, try to think outside the box, and try new and different things. Be atypical and unique. Experiment. Don’t be afraid to design from the heart. But keep this in mind:

“Things which are different in order to be different are seldom better, but that which is made to be better is almost always different.” —Dieter Rams

In our striving to be unique and original, trying different things for their own sake is okay because they could potentially lead to better things. It’s a lot like throwing darts at a target blindfolded. You may never hit the target, but you just might learn something in the process. But do try hard to make something better than just different.

Not too long ago, people thought the Earth was flat and the center of the universe. Not too long ago, either, designers used the <blink> tag and used tables to build websites.

Theories and conventions are always being questioned, challenged and broken, and they should. If you believe a better way is possible, you will often find your way to it.

“The most innovative designers consciously reject the standard option box and cultivate an appetite for thinking wrong.” —Marty Neumeier

As you use Google’s AdSense for more and more time you begin to learn from the mistakes of the past, and you slowly begin to realize which of your actions kept your site from reaching its full potential.

But an important part to making a mistake is telling people about it and teaching them how to avoid making the same mistake. So this is a list of the top five mistakes people using AdSense make.

You should read them well, and see if any of them is applicable to your contents. If it is, you must stop and attempt to fix such errors as quickly as possible.

The first major no-no that everyone seems to be hitting at one point or another has to do with breaking the rules. Google’s AdSense is a great program but it relies on you respecting a few set rules.

The most important thing is not to create “artificial clicks” through any means possible. Never click your own links, never ask your friends or close ones to click the links and never, by any means have your content encouraging the visitors to click the links. You run the risk of being permanently banned, and that will definitely damage your revenue.

Failing to comply with Google’s terms could have your AdSense account suspended. And this is why this rule is by all means the most important one of all. It’s because this is the difference between life or death.

The second thing users get wrong a lot of time is having a bad color palette for ads. Many times this happens because the publishers aren’t knowledgeable enough to change default color palettes.

Others just can’t seem to spend enough time in changing those defaults. Having bad ads that stand out is sure to push people away from clicking; whilst having something which is clearly visible yet distinctive will.

Third, of course, the position of the ads is probably the key element you should get right if you want to maximize your profits with AdSense. This is noted in a lot of places on the web and Google talks about this as well. Google can provide you with statistics which illustrate what positions work particularly well on your website.

Fourthly, banner ads are also a very bad idea if you’re using AdSense. 480×60 type ads are a sure way to drive many people away as most Internet surfers have developed a natural resistance to such means of advertising.

And last, but clearly not least, is not taking care of the site running the ads. Because ultimately it doesn’t matter how cool the site is itself. If it doesn’t have updated contents and a lot of daily visitors it will probably never earn you any serious AdSense revenues.

So these are the most important five things people get wrong while using the AdSense program. But of course if you don’t like this means of expressing the issues, here are the top five things you should do to ensure your AdSense ads are constantly bringing in that revenue.

Never break Google’s policy. Don’t make visitors create “artificial clicks” on your website regardless of the person doing so or the reason. Make sure your ads have the right colors that blend in with your site, and make sure they’re positioned in the right places to attract as many customers as possible. Always try to avoid using banner-like (480×60) adds unless you really know what you’re doing and constantly keep your site fresh and up to date.

So with that in mind you should be raising your AdSense revenues in no time.

How many times have you been completely confused at how that ’small’ project turned into such a big one costing double and taking three times the length you estimated? Many of you will say estimating time for web projects accurately is an oxymoron, but by applying a few effective techniques it’s possible to dramatically increase the accuracy of most web project estimates.

1. Why Underestimating Is So Common

There are several reasons, which are freely admitted amongst freelancers and web agencies, as to why web projects are so commonly underestimated – they include:

• The technologies required by the project have never been used before
• At the time of estimating, there are grey areas or complete unknowns
• The client operates in a specialized industry and the solution needs bespoke features that are not familiar to the supplier
• Splitting the project down into the detail would require as much as work as the requirements gathering phase that is chargeable

However, there are also some secret reasons why web projects are commonly underestimated:

• The client needs an estimate for their project tomorrow or they will go elsewhere
• Revenue needs for cash flow now trump the effects of not winning the new work now
• No previous project ‘estimated vs. actual’ data analysis has been conducted to draw on
• Estimating time for a project is not fun

Despite being true, rarely do we admit these reasons to others or even ourselves! The fact is, when working as a web professional, as a one man band or as part of a small busy web team, the secret reasons are an everyday reality that shouldn’t be hidden away.

By first identifying and admitting why underestimating is so common, can you then set about implementing changes to your estimating process that will reduce the barriers each reason creates and increase your accuracy.

Technologies Not Used Before

There are three approaches you can take when confronted with a brief that requires a technology you have minimal experience with:

1. Negotiate a paid for functional specification phase as a first step
2. Consider hiring an expert
3. Research in your own time and make your best guess

Try to negotiate with the client a mini-project where you are paid to conduct a research and functional planning stage before committing to the whole project. This way you can research the unfamiliar technology and deliver a functional specification to the client.

Best case scenario
You give the client confidence, have a much clearer understanding of the work required, re-estimate and are hired for the rest of the project.

Worst case
You have completed foundation learning of a technology you previously didn’t know that you can sell to new clients, you generate revenue and the client has a comprehensive specification they can use in their tender process.

Added bonus
You, and the client, get to find out how you work together, giving both the opportunity to part company before being locked into a lengthy project.

If you’re not able to convince the client to pay for this initial functional planning stage, and can’t find a suitable expert in the technology, but want the work and have confidence in your ability and passion to learn what needs to be learnt, then the best advice is to do some initial research in your own time and just take your best guess!

Estimating Takes Too Long

Thorough web project estimating takes time, but it tends to inherit all the same rules that apply to coding, the more thorough you are, the more accurate you’ll be.

Is it possible you will spend time working out the features required only to learn you haven’t won the work? Will you have given the client a free and detailed breakdown of their project for free? Absolutely, but this is the just nature of sales, some you win, some you lose – don’t get disheartened, try to get feedback from the client on why you didn’t win and use the advice given to refine your next estimation.

Estimate Is Needed Tomorrow

If a client is demanding an estimate tomorrow after briefing you on the project today you should immediately try to assess if the project is right for you by:

1. Determining if the response rate being demanded by the client, and any previous communication, is a sign of the type of client they will be to work with
2. Assessing if the potential gain to your business from the project (high profile client or long-term repeat business) is worth the risk of underestimating and going over budget
3. Trying to confirm a ball park budget range with the client so you can estimate realistically, or politely decline if far too low. The best kind of clients are experienced enough to know this is not someone looking to use up all their hard earned cash but someone looking to provide the best solution they can for the budget

If the results of these quick steps are favorable, be positive and go for it! There will be another chance to decline if you later find out the project is not right for you, and then you may utter the words “Into the garbage chute, flyboy!”

Cash Flow Dilemma

Cash flow is the life blood of any freelancer or small web agency, without they don’t survive.

Occasionally a situation may arise where work will be taken on with the knowledge it may not be profitable. As gut wrenching as this can be, and despite all the comments you will hear how you should never do this, the reality is the bills and wages have to be paid!

When a freelancer or business owner is presented with the choice of committing to a project for a price they know is low, but by taking on the project means they live to fight another month, or risking not taking on the work on in the hope more profitable leads appear – empathise with and respect them.

It is a tough and gutsy decision that only they can make but rest assured they have their bills or your wages at the forefront of their mind when they make it and estimating low for a project isn’t always as naive a decision as it may appear to those not on the frontline.

Estimating Is Not Fun

Ok, so it’s not as sexy as adding that beautiful grunge effect to your design, and it’s not as exciting as tweaking that jQuery plugin to work just the way you want, but estimating time for a web project more accurately is almost certainly more important than both when it comes to sustaining a freelance or small web agency business.

However, while few will disagree as to its importance, many will continually find it difficult to muster up the passion and diligently estimate time for a web project, but why!? Here are more secret reasons:

• It’s hard work and takes many outside their comfort zone
• Estimating usually has to be completed alongside your plans for your already fully booked week
• It forces you to try and predict the future
• It makes you largely responsible for the business’s sales success, solution offered, project profitability and growth and survival of your business (scary stuff!)

Web agencies often have the edge here because they will have dedicated salespeople or project managers who are used to the rigors of estimating, but freelancers will generally be more inclined to find the whole process rather boring and just want to get on with the fun stuff.

While we can all no doubt empathise with this, the harsh truth is that, when running a small business or operating as a one man band, one or two badly estimated projects in quick succession can ultimately lead to the demise of both!

So what other techniques can be used to further increase the accuracy of your estimates?

2. Consistent Project Phases And Tasks

As previously mentioned, when being asked to provide an estimate for a project, it is invariably not something anyone has allocated time to do. As a result of this, estimates are often put together quickly and if compared to past estimates it’s not uncommon to see the same project phase or task classified in many different ways, and for similar sized projects the estimates for each to be completely different.

If you win the work you may think “so what?”, and to some extent you would be right, however, the first step in creating more accurate estimates on a long-term basis is to always break down the project phases and tasks in a consistent manner. Web projects can generally be broken down into the following phases:

• Research and planning
• Solution design
• Design
• Front-end development
• Back-end development
• Content entry
• Testing
• Go-live

By always beginning to compile estimates using a consistent high-level breakdown means you can have a re-usable template eventually and track the time spent on each.

But don’t stop there! Consistently breaking each phase down further will not only increase the accuracy of the estimate, but again, also result in valuable data over time.

3. Getting Granular

Now the project estimate is broken down into high-level phases, it’s time to get more granular and break each phase into tasks. This is where the estimate begins to become more tailored to the specific project, but also includes common tasks that you can add to your estimating template and use again and again. For example:

• Research and planning
  • Requirements gathering
  • Project planning
• Solution design
  • Sitemap
  • Wireframes
  • User workflows
  • Functional specification
• Design
  • Initial homepage look and feel
  • Content page
  • Master content page template
  • News main page
  • News item
• Front-end development
  • 5x Templates build XHTML/CSS
  • JavaScript and AJAX
  • Cross-browser fixes
• Back-end development
  • CMS Setup and configuration
  • News feature
  • Contact us form
• Content entry
  • Homepage copy
  • Addition of 10x News items
• Testing
  • Internal functional testing
  • Client User Acceptance Testing (UAT)
• Go-live
  • Live server setup
  • 301 re-directs from old site URLs to new

The page templates and features specific to the client’s project can be listed at this stage, alongside the tasks required in all web projects.

Once you get into the habit of compiling estimates in this way you will find yourself envisaging the phase and tasks lists during the pre-sales initial communication with the client and this invariably:

1. Refines your requirements gathering skills to quickly get the information you need in order to put together a thorough estimate
2. Forces you to think the project through in a step-by-step fashion and minimises the chances of missing a large, or several small, tasks that could end up putting you over budget because you didn’t factor them in

So, you now have a pretty solid phase and task list for the project and all that’s left is to estimate hours for each and send it off to the client right? Maybe, but wait, what exactly does the News feature consist of? Is your interpretation of a News feature the same as the client’s?

Now is the time to investigate and define it, as opposed to after the contracts have been signed.

Getting More Granular

While it’s tempting to estimate hours for the News feature and submit to the client, if possible, try to nail down exactly what the client wants from this feature at the estimating stage, after all, if you look around, you’ll be able to quickly find different variations of the same feature that have a huge differences in terms of size, features and complexity, and thus cost.

Using the News feature as an example, talk to the client and determine what it needs to do so that you can again minimise the chances of missing something in your estimate that could, when added to the other ’small’ missed tasks, amount to a serious budget overrun situation.

You may find out the News feature requirements are:

• News feature
  • Add/edit/delete news item
  • Upload image
  • Attach PDF
  • Auto-archiving
  • RSS

Excellent, you have now defined the News feature and can confidentially estimate the time you think it will take to implement. But hidden in even the most basic and common of features lay more ’small’ things that if not captured, considered and quoted on, can add to the likelihood of overrun.

For example, the client has specified they need to be able to upload images to news items, but do they need any of the following:

• Auto-resize capability?
• Auto-thumbnail generation?
• Full-screen viewing?
• Caption addition facility?

Any of the above News features could add a few hours to the overall project and thus need to be ideally catered for in your estimates – a few missed ‘couple of hours’ tasks and suddenly the project is two days over budget.

Getting granular and mentally trying to build the solution means you are able to identify and address these issues early on, making sure to cater for them in your final estimate.

“A Web Project Manager knows how to design and develop most of the project on his own, even if with poorer results compared to his team. This allows him to estimate projects with good approximation and to understand his team’s problems and difficulties”

Introduction to Web Project Management, Antonio Volpon

Advantages Of Getting Granular, For You And The Client

By getting granular with project phases and tasks for estimates you are also able to tweak them very quickly if you discover the estimate you have submitted is above the client’s maximum budget.

For example, how often have you been told by a client they want to go with you but your quote is ‘just a little too high’ and ‘if you could reduce it by five hours we can business’? Usually this means you have to do one of two things; drop the hours you estimated for the News feature and hope you can explain later down the line how the budget does not allow for image uploads and thumbnail generation etc., or remove the News feature altogether.

But, if you have a granular estimate for the News feature, you can confidentially, and at this crucial expectation setting stage, simply remove a couple of sub-features of News and the News image upload functionality in order to align with the client’s budget.

When communicating this to the client they will clearly see what you are proposing to drop and why and they will still get the News feature they need, but perhaps with a few less nice to haves. Using this approach is usually well received by clients as they have full and transparency on the reasoning behind the changes to your proposal.

This kind of transparency during the sales process will invariably give the client confidence in you because it demonstrates to them you:

1. Are an expert in your field
2. Can envisage the project in its entirety
3. Adopt a diligent and methodical approach and more than likely will continue to work this way on their project

Best of all, if you are successful with your estimate and you are hired you already have the foundations of:

1. An instant statement of work
2. A defined project scope
3. The timings you need to put together an accurate project schedule with milestones
4. Client expectations settings very early
5. Demonstrated your thoroughness and understanding of their business and requirements to the client

So what now? Well, now you have won the work, it’s time to start collecting the data that will enable you to create even more accurate estimates in the future.

4. Consistent Time Tracking And Analysis

Before starting the work, you should first replicate all of the phases and tasks, along with their time estimates, into your time tracking tool of choice. Once this is done, you can then begin work and make sure to be disciplined and track everything you do and log it under the right category.

Of course many of you will do this by default as it allows you to:

• Know how long you have to complete each phase
• View how long you have for each task and sub-task
• Reporting on how long everything actually took

But the real value of keeping a consistent set of high-level phases, from estimate through to time tracking, is that after a few projects you can begin toanalyse the data and start to identify averages and trends that you can use to refine your next web project estimate.

Analyse Estimated vs. Actual Time

This is where the real magic happens! By breaking down and tracking your time for multiple projects into consistent phases and tasks, you will have valid comparable data to analyse, for example, after five projects, once you average out the numbers, you may well discover the following:

• Research and planning took around 5% of the total project time to complete
• Solution design: 5%
• Design: 25%
• Front-end development: 15%
• Back-end development: 30%
• Content entry: 8%
• Testing: 10%
• Go-live: 2%

The more projects completed that use a consistent estimating and time tracking structure, the more real your averages will become.

 

With this valuable information you can then set about increasing the accuracy of your next estimate by being able to, assuming you can get a budget range from the client:

• Immediately allocate the estimated hours you need for each phase
• Determine the best solution you can offer the client for their budget

It even allows you to accommodate the client that ‘needs an estimate tomorrow’ when you don’t have time to break it down in detail.

Conclusion

Estimating time for a web project accurately is something many attempt everyday but few manage to succeed at. There is no one formula that will satisfy every situation and the chances of estimating what a project will cost exactly are almost zero.

But it is possible to drastically increase the accuracy of your web project estimates by:

1. Identifying the reasons why underestimating is so common
2. Understanding why it is so important
3. Resisting the temptation to get granular
4. Creating a consistent, methodical and re-usable estimating process
5. Analysing the estimated versus actual data from multiple projects to identify trends

“The Devil is in the detail: When people say that the devil is in the detail, they mean that small things in plans and schemes that are often overlooked can cause serious problems later on.”

Further Resources

Here are further articles and related resources that may help you to increase the accuracy of your web project estimates:

• Web Development Project Estimator
  A neat little online tool that allows designers and developers to quickly create cost estimates for web projects.
• Schedule and Cost Summary
  This Cost Estimate and Scheduling spreadsheet provides a lightweight method for learning to estimate time to complete a web design project, and calculating cost for completion.
• Tick
  Simple to use time tracking tool that makes it easy to keep track of project budgets.
• How to Estimate a Web Site Project
  Patty Ayers discusses a five-step process for estimating web projects.
• Simple process to estimate times and costs in a web project
  Antonio Lupetti describes his process for creating web project cost estimates.
• How to Accurately Estimate a Web Design Project
  John Reeve talks about catering for the usual missing elements in estimates; project management, contingency time and margin for error.
• Estimating Resource Time for Web Development Projects
  Bill Breen explains one way to approach estimating time for web projects, and how the size of the project should influence you estimate ranges.
• How To Estimate Time For A Project
  A Sitepoint article by Alyssa Gregory.

’m in a pretty good mood, so here is a bit o’ eye candy to indulge in 😉 Click links to be taken to sources.

 

 

Web design can be incredibly frustrating.  You’d think that with the infinite possibilities of what-goes-where it’d be pretty easy to land a design that works, yet somehow we’ve all been stuck before: working hour after hour on a design that refuses to look right.  Throwing away pixels like they’re going out of style.   

These 8 tactics are what I use to get out of that sticky spot.

1. Design from the inside out 
   This is some of the best advice anyone ever gave me about web design (thanks Cameron).  A lot of designers start off a design by focusing on the header.  Often times what’s inside the page is what makes it look good; the header is supplementary.  Try leaving the header alone for awhile and working on some elements in the body, you’ll be surprised at how much easier it is to design a page once you’ve got a solid body going.  The next time you’re designing a header with no body imagine yourself adjusting a tie in front of the mirror, but being completely nude.   (yikes)
2. Sketch something
   My whiteboard is my salvation.  Pencil and paper works too.   I read an article years ago by a designer who would draw dozens of little 2×3" mockups in his spiral notebook before even opening up a graphic design program.  It helped him identify where elements were going to be placed and what options looked best .  The best part of creating mockups this way is the speed at which you can burn through possible layout ideas.  Sketch something, scribble it out.  Sketch something else, scribble it out.  Do this ten times and you’ve probably got a fairly decent idea of how to the page should come together.  I’ve used a few wireframe applications like Axure, but I’ve still found myself to be my most efficient while bathed in the saucy aroma of whiteboard markers.
3. Seek inspiration offline
   If you’ve paid attention to anything design related in the past two years then you’ve no doubt seen a few of the countless CSS galleries and design showcase websites that popped up.  These are excellent sources of inspiration, but sometimes a bit of offline media can be just what you need to spur some fresh ideas.   Open up a newspaper or magazine, go to the grocery store and look at the packaging, watch a television ad.   Pay attention to things that are applicable to your design such as typography, color, and element placement.  Ask yourself questions like "What is it I like about this magazine ad?" and "What is about this packaging that just works?"  There’s a lot you can learn from observing traditional media.  A few years ago a co-worker of mine lent me a book full of Russian posters and print ads from the 1920’s.  The lessons learned from looking at some of the material were invaluable – I was particularly impressed by how they were able to cram a ton of information into a tiny area but kept it from appearing too "busy."
4. Learn to let it go
   Ever make a button that looks ridiculously awesome but just doesn’t belong in your design?  You put so much effort into your ridiculously awesome button, you’ll go to great lengths to make it work.  You’ll bend the laws of space and time to make that goddamn button look right in your page.
   Learn to let it go.  Save the button and file it away.   Although you’ve lost this battle, you’ll soon have an arsenal of ridiculously awesome buttons you can use in designs later on.
5. Step away from the computer
   We’ve all heard this before: If you’re having a difficult time with something, leave it alone for awhile and come back later.  It’ll probably be easier after you’ve had a bit of a break and your mind has settled.  Regarding web design, I’ve noticed this always plays out in a certain way:  If I’m hating a design I’m working on and I shelve it for a few days,  a lot of the time my reaction upon returning will be "Holy crap that’s fantastic!"   On the flip-side, I’ll often toil away long into the night working on what looks like the best design I’ve ever created.  The next morning I’ll look at it again and cringe at the horrible abomination I’ve created.    The moral here is to give your design some space.
6. Be absorbent
   No art is born in a vacuum.  Learn to effectively pinpoint what it is you love about other designer’s work and incorporate it into your own.    Don’t steal designs, but don’t deprive yourself of external stimuli either.  Become better at identifying why you love the way something looks.   When I come across a design that blows my mind, I try to pick it apart what aesthetically makes it tick.
   The Tangerine Tree is a good example.  Sure, it looks wonderful, but why?  Personally, I love the way the designer has taken a very modern set of shapes and applied them against a vintage medium: Cartoonish bubbles and clouds that appear to be cut out of distressed paper.  When looking at this design I ask myself: What could I do with textures like that?  What is it about those shapes and icons that look so remarkable?
7. Don’t be a one-hit-wonder
   Try to avoid using the same techniques over and over again, even if you’ve done really well with them in the past.  Gradient rectangles are my crutch – I have a terrible habit of using them whenever I feel like a design isn’t working.  "This design sucks…I’ll add a rectangle with a gradient fill!"  The result is usually something that I’m unhappy with because it looks the same as all my previous work.  Try imposing yourself with silly rules, such as "No drop shadows today" or  "2D elements ONLY."  Locking yourself out from certain design habits forces you to learn new ones.   My happiness as a designer coincides with my ability to produce something that looks great but is different from anything I’ve done before. 
8. Seek input from others
   This is a tricky one.  There are so many ways to ruin a web design, especially when the wrong kinds of people are involved.  Be careful who you ask and find people who can provide constructive criticism.  I’ve seen many great designs die at the hands of aesthetically-challenged secretaries who have printed a few corporate bake-sale flyers in the past and consider themselves to EXPERTS at all things design.  If anyone ever tells you that your design doesn’t "feel right," or that they "just don’t like it," you might want to look elsewhere for input.  Find someone who can tell you specifically what’s wrong and how it could be improved.   Grow some thick skin, too. Don’t assume every criticism is an attack on your work of art.    Roll with the punches.

There’s something for everyone in today’s summary. Developers might want to look out for the regular expression tutorials and the wordpress plugin guide. Designers will want to check out the tutorials. So which ever category you fall into be sure to have a look!

Essential Guide To Regular Expressions: Tools and Tutorials via Smashing Magazine

Design a Layout for a Non-Profit Organization in Photoshop via Design M.ag

13 Beautifully Designed Mac and iPhone App Websites via Web Design Ledger

Getting Started Writing WordPress Plugins via Fuel Your Coding

9 Online To-Do Lists For A More Productive Day via List fied

Just Get Going: The Single Most Effective Marketing Trick via Freelance Switch

How to Create a Fun, Illustrated Skateboard Design via Vectortuts

How to Create a Moka Express Icon via PSDtuts

The Ten Types of Freelancers: Which One Are You? via Freelance Folder

The first Designer Daily newsletter has been sent today, and it contained the pack you see up here as a gift. Make sure you subscribe by leaving a comment with the subscription box checked, or in the sidebar. Don’t forget about the free animal vectors that you can get by subscribing to the feed.

This pack is a set of 10 famous cities’ skyline saved as Adobe Illustrator 10 document (Zipped file: 2Mo)
Cities included: Berlin – Chicago – Jerusalem – London – New York – San Francisco – Prague – Shanghai – Moscow – Sydney

Descry is a project to demonstrate the power of data and information visualization as a communication tool.

Currently, there are 4 examples provided, all built with Silverlight & come with the source codes.

There are also 2 very nice articles shared on visualization:

• Visualization Trends For The Noosphere
• 5 Tips For Building Effective Infographics

The Design Inspiration has published an article of Top 35 Inspirational Korean Websites. As a web designer, we would like to design something that really standout. By doing that, we need to widen our eyes by looking at different kind of design style, so that we can get infinity and variety of inspiration.

Oriental websites and European websites are so different, because the designers have different culture and experience. You should be very familiar with US and European design style by now. It is a good idea to get some inspiration from Korean style websites as well.