Color Combination Tools

Color Combination Tools

Below I’ve compiled a list containing Color Combination Tools for Designers. You can use this list to chose the tool that better fits your needs or that you’re most comfortable using.

Kuler

Kuler
The web-hosted application for generating color themes that can inspire any project. No matter what you’re creating, with Kuler you can experiment quickly with color variations and browse thousands of themes from the Kuler community.

Color Scheme Designer

Color Scheme Designer
Color Scheme Designer has been around for some time and was recently re-written and designed. It currently has great color space conversions, a preview pane, enhanced scheme creation, and a permanent URL of the schemes you create. It’s almost as if it were a hosting site for color schemes. Continue reading

Advertisements

Usability Feedback Tools

Usability & Feedback Tools

1. Silverback (free for 30 days then $49.95)

Silverback

Before Silverback, people used to film user reactions to their sites with camcorders during testing, a slow an arduous process involving hours of video editing, not to mention intimidation of test subjects. Silverback, a fantastic app for Mac OSX (with iSight or equivalent) lets you film how a user responds to your site and track their clicks too. You can set chapter markers in the video, when something interesting happens, simply by pressing the “+” button on the Apple remote. Continue reading

Better Perspective in WireFraming

The biggest mistake any website owner could take in any development project is to plunge right into the water without any plans whatsoever. Failure to devise any plan is a sure passport to failure that would eventually end in tears. Sure, a good developer can start coding right away without any diagram for a guide, but that is one hell of a risk not worth taking.

One of the most important initial steps in the planning process is WireFraming. Any ideas you have in mind while conceptualizing your visions could start to take shape through WireFraming. Ideas will become buttons and boxes that users will enable to interact with. Through this article, I want to take you to the process of WireFraming-the tools and tips to make the process smooth and enjoyable.

The Objective

The temptation to fire right away with the coding is but natural. Every developer suffers in thinking that the idea is just so simple that you can do it straight right away without any further ado. The fact is, no project is simple enough and any experienced web developer knows that a myriad of unforeseen issues will come up later on without a warning. Challenges and headaches await you if you don’t start things out right the first time.

WireFraming will help you identify issues in time and in cost effective method. It is by far easier to make huge changes in a paper screen rather than modifying thousands of codes already in place. Also, putting in paper the intended plans and concepts will raise further ideas and adjustments that lead to better changes. The final output will be the guiding principle of the designer, developer and project manager making sure that they will work on according to plan.

Functionality First

WireFrames is all about the fundamental parts of an application; it is variably presented in a different tool available. It focuses mainly on the function, like a page will be having 3 text boxes and 5 buttons and not inclined to form or design. This is called an austere approach wherein WireFrames are based on the functional elements such as dropdowns, boxes, buttons etc. and ignoring anything related to design or layout.

Experiential

Design development does not require intensive skills; you only need good experience in using web apps. The more experience you have, the better; however, you don’t need to master relational databases to render WireFrame. Continue reading

Wireframe Resources

Get Wireframing: The All-In-One Guide

Get Wireframing...

Wireframing is a great tool to incorporate into your projects as it allows for rapid prototyping and helps to pinpoint any potential problems. I personally find it invaluable on projects to have a visual representation of content, hierarchy and layout. Overall it’s an excellent step to incorporate into your project before the design process begins for both you and your clients.

I am continually intrigued about how other firms and individuals incorporate the wireframing stage into their process. I know i’m not the only one, so this list aims to group together some of the best techniques, tools and resources to help you create effective wireframes.

Techniques

—————————— Continue reading

Website Wireframes

Designing wireframes the right way the first time, cost no more than doing it the wrong way. Creating a paper prototype adds no cost, either- simply print out the wireframe diagrams for the pages a visitor will use to complete the tasks most closely related to achieving his goals and meeting the site’s business objectives.

Web Prototyping saves costs of any marketing communication that may be necessary to undo brand damage resulting from poorly functioning web site and a frustrating user experience. Expensive site redesigns are often undertaken to correct those kinds of problems. Adding a few days to create a wireframe and test a prototype ensures that the redesigned site won’t introduce any new causes for user frustration or further erosion of brand equity.

Importance Of Wireframes And Tools To Create Wireframes

A designer doesn’t have to reinvent the wheel with each new wire frame diagram, of course. Every page in a site will share some elements, even when the pages don’t follow the same template.

These common elements are the must-have items, which, if absent, can cause visitors to experience frustration and resentment that may linger long after they’ve moved on to other sites. Alienating visitors and creating a negative brand impression will not help the site-owning organization achieve its business goals, nor will it save money. For example, every page needs clearly labeled navigation so the visitor can easily move from one page to the next and from one section of the site to another without having to go back to the home page. Continue reading

A Study: Typographic Design Patterns

Even with a relatively limited set of options in CSS, typography can vary tremendously using pure CSS syntax. Serif or sans-serif? Large or small font? Line height, spacing, font size and padding… The list goes on and on.

To find typographic design patterns that are common in modern Web design and to resolve some common typographic issues, we conducted extensive research on 50 popular websites on which typography matters more than usual (or at least should matter more than usual). We’ve chosen popular newspapers, magazines and blogs as well as various typography-related websites.

We’ve carefully analyzed their typography and style sheets and searched for similarities and differences. We have also put together a spreadsheet of the study that displays the websites’ various values (for example, the ratio between the line height and line length).

Ultimately, we identified 13 general typographic problems and issues related to typographic design and tried to find answers to them through our research:

  1. How popular are serif and sans-serif typefaces in body copy and headlines?
  2. Which fonts are used most frequently?
  3. What is the average font size?
  4. What is the average ratio between the font size of headlines and body copy?
  5. What is the average line height of body copy?
  6. What is the average ratio between line height and font size in body copy?
  7. What is the average ratio between line height and line length in body copy?
  8. What is the average amount of spacing between paragraphs?
  9. What is the average ratio of paragraph spacing to line height in body copy?
  10. How are links styled?
  11. How many characters per line are common in body copy?
  12. How often are links underlined?
  13. How often is font replacement (sIFR, etc.) used? Continue reading

10 Usability Guidelines

The 10 Usability guidelines are as follows:

1. Form Labels Work Best Above The Field
2. Users Focus On Faces
3. Quality Of Design Is An Indicator Of Credibility
4. Most Users Do Not Scroll
5. Blue Is The Best Color For Links
6. The Ideal Search Box Is 27-Characters Wide
7. White Space Improves Comprehension
8. Effective User Testing Doesn’t Have To Be Extensive
9. Informative Product Pages Help You Stand Out
10. Most Users Are Blind To Advertising Continue reading