10 Tools for the everyday web designer

Where would a plummer be without a wrench? Where would a carpenter be without a hammer? Where would an artist be without a paint brush? Everyone has tools for their job, so why not web designers too? These little tid bits of nifty resources are sure to help you out on your next web project.

Firebug

Includes the ability to inspect HTML and modify style and layout in real time.
Use the most advanced JavaScript debugger available for any browser,
Accurately analyze network usage and performance, and many other very helpful features.


Measure it

Draw a ruler across any webpage to check the width, height, or alignment of page elements in pixels.


Web developer

Adds a menu with various web developer tools


 

Font Squirrel

Find quality freeware that is licensed for commercial work, including the best commercial-use free fonts.


Spoon.net

Use this service online to test your webpage in various browsers for free.


Launch List

Your one stop website checklist before launching


Kuler

Discover both popular and highest rated color schemes as well as create your own.


 

Google Analytics

Get rich insights into your website traffic and marketing effectiveness.  Powerful, flexible and easy-to-use features now let you see and analyze your traffic data in an entirely new way.


Name checklist

Use this tool to check if your brandname, username, domain and vanity url are stil available on the web.


Common Fonts List

A list of common web safe fonts and their operating system equivalent.


Become a whitespace design ninja

The first day of art class at the University a short bald man walked in and introduced himself as our art professor.  He proclaimed that he would teach every last one of us one very important thing, “To see.”   The following weeks the short bald man taught us many many things, one being the importance of whitespace.  

Whitespace: Friend or Foe?

Whitespace, also known as negative space, is the space between elements in a composition or page layout.  Don’t let the name fool you though, this leftover design space does not actually have to be white.  It can be blue, green, fire engine red, tickle-me-pink, gold, magenta, black and well, you get the picture.  When whitespace is utilized effectively it can take a good design to great.  However, it is sadly one of the most underrated elements of strong web design.

The secrets of micro whitespace

Micro whitespace, when used correctly, can be a great design ninja tool for influencing where the eye travels on the page.  While designing this type of whitespace, it is good to remember that cramped text with minimal line spacing can be really hard to read.  People don’t want to have their noses up to the screen because the font is so small.  Simply adding some line spacing to the text makes the content easier to scan and process. To increase the line spacing of an element with css, the line-height rule is put into place.  Micro whitespace not only makes content easier to read, but separates blocks of text from one another.

SPACE... the final frontier

Well, it may not be the FINAL frontier but it is used to clean up a site, make it easier on readers, and makes the site appear more professional.  Adding a little space between sections and elements on your page can greatly organize your information and make it easier on the viewer.  If deciding between a border and some space to separate elements, whip out your design ninja secret weapon because a little space can really air out your layout.  If all your elements are stacked up close together the main reaction you will get is a look of confusion.  A cluttered layout is overwhelming and in most cases not aesthetically pleasing.

Mom says, “Practice makes Perfect"

The best way to master whitespace is practice, practice, practice.  In my art class my vertically challenged bald professor did just as he said, taught us “to see.”  Within those short weeks, all of the 20 some students in my class developed an eye for whitespace.  There are no official guidelines or rules about how much space to set for each element.  The best way to learn is to throw yourself in and experiment and study the work of other designs.  One day you too, with practice, will develop your eye for whitespace and become a whitespace design ninja.


More information

Smashing Magazine
A list apart
Web design tuts
Web design ledger

5 ways to find design inspiration


It happens to the best of us, we try and try but we just can’t squeeze a good design idea out of our creative brain. Chances are every designer out there has had a design block of some sort at one point in their life. So how do we overcome the big wall that is blocking us from these great ideas? Here are some ways to get those creative juices flowing once again.
 
1. Look at past work
Embracing and exploring our past work can give us some ideas of what works and what doesn’t. Sometimes the best ideas are born from little bits and pieces of past projects. An example is perhaps a logo that didn’t make it last time can now be tweaked and executed differently to be successful on a different project.
 
2. Read blogs
There are many many blogs out there that can help with your creativity. Two types of these blogs are people who share designs they like and tutorial blogs.  Both can be helpful when stuck in a creative rut.
 
3. Doodle
One of the best ways I stumble upon new design ideas is doodling. Just the simple pencil and paper can be great tools to discover some new design ideas. Put the pencil to the paper and let everything flow. Whatever you are thinking, just let it spill onto the page.
 
4. Step away
Sometimes just taking a break from what we are doing is the best way to actually move forward on a project. Take a walk, listen to some music, or even sleep on it. Time away will give you the chance to take a fresh look at your design, and maybe spark a bit of creativity.
 
5. Look at what’s been done
Looking at designs by other people can release the creative juices and let your own designs flow. You may be checking out other artists’ work and suddenly an idea may just come.
 
There are many ways, you will find, that will help you in a creative block. Try asking other designers for opinions on your work However you do it, these 5 ideas will most certainly help you in your design slump.  
 
<BN

Eye tracking and web design


When browsing through websites, what is the first thing you look at? For me, probably either big headlines or the logo. Recently, eye tracking technology has had tremendous growth and can now be used to find out what exactly visitors look at when checking out a website. Perhaps designers can use this information to design webpages aimed at more visitors.
 


Eye tracking research shows that viewers look at a webpage in an F pattern. What in the world does this mean? Well, viewers start with reading the top line and then scan down the left side of the page a little ways and then continue reading again. This implies that the most important information should be in the first two paragraphs of your page. Also, in these paragraphs, the first few words are suggested to be “information-carrying” words. We don’t want to loose their attention too quickly! In fact, the BBC website reported that the brain makes a decision about a webpage in just 1/20 of a second.
 
So, what are some questions we can ask when designing a website?
 

  • What images fit the content best?
  • What is the focus of the page? (i.e. Where is the eye drawn to on the page?)
  • Is the focus on the correct section or item? If not, how can you change the focus? (e.g. change the color of a call-to action button to stand out from the page.)
  • Where is the eyeline on the page? (The eyeline is the line of sight that the eye follows on the page when scanning it quickly.)
  • What do other major industries, the competition, look like?

 
So maybe after finding out this information we can use it to make our designs more attractive to the user and get more visitors to the site.  If you would like more information, check out these helpful sites!
 
http://www.webprofits.com.au/blog/the-psychology-of-web-design/
 
http://theprodesigner.com/looking-at-the-psychology-web-design/
 
http://www.uxmag.com/technology/eye-tracking-and-web-usability-a-good-fit

<BN

Vipa Solutions is on 10-11 News

Today we were graced with the presence of some of the nicest news people I have ever met.  Contrary to popular belief they are not scary people.  Joe and I (Jenna) were intereviewed on a previous blog I wrote on why businesses should switch from paper ads such as in phone books to interactive and dynamic websites.   And, while I don't usually watch the news as I usually just look at google news, I plan on watching it everday this week. You can look for our story on 10-11 news sometime this week and we will update the blog with a link once it airs.  This may be one for our scrapbook. 

<JE

Next

Subscribe via RSSVisit us on Linked inVisit us on facebook

About us

Vipa Solutions partners with MarComm agencies by providing industry best practices and web solutions for social media, content management, eCommerce, mobile, and other web-based services...

Our Team

JosephJoseph < JK

Entrepreneurship

AmandaAmanda < AL

Web Technologies

VivianVivian < VC

User Experience Design

DanDan < DK

Advertising

JulieJulie < JH

Marketing and Sales

JennaJenna < JE

Low Hanging Fruit

JennaBecca < BN

Graphic Design

Change Theme