Category Archives: Design

It is made up of square pixels

Posted by Judy on April 7, 2011 1 comment

When you look at your computer screen what you are seeing is a bunch of square pixels sitting side by side. It’s a bit like a checker board without the color. Even graphics are designed using squares. Because of this it is easy to design a web page using a graph. Initially, web designers used tables to layout a web page. More recently they have used a grid system to place elements using CSS.

960 12 column grid

Layout on 960 12 column grid

Many years ago designers used an 800px by 600px canvas to layout a web page. Now we know that most people have at least a 1024 by 768 pixel screen display. As a result we can safely design for a 960 by 640 available design area. The advantage of a 960 design area is the ability to divide 960 by many different factors. The most common divisions seem to be 12, 16, 24 column designs.

Using a grid makes it easier to use all of your design tools, You can see how your page elements will fit together. It also makes using HTML and CSS easier to code. Whether a designer officially used the 960 grid or not we all need to use some way to evaluate where elements go, which need to be floated, and which need to be absolutely positioned. Dividing up square pixels requires some sort of grid no matter how informal.

Resources

There will be no post next week. I will be enjoying Seattle!

Colour Your World

Posted by Judy on March 24, 2011 2 comments

Recently I’ve been reading Vandelay Design’s blog. Vandelay has several galleries showing a huge listing of colourful web sites. The sites catch your eye and make you want to see what else the company has to offer.

dolour and design

Colour and Design

I thought it might be fun to take a look at colour.

On the cool side of the colour wheel are blues, greens, and purples. These colours tend to have a calming effect. On the other end of the cool spectrum they tend to be antiseptic and impersonal. It is here in the cool spectrum that you find the universal favorite colour, blue.

On the warm side of the colour wheel are red, yellow, and orange. These are the colours that stimulate us. It is no surprise that they are related to the strong emotions of either optimism and love or anger and violence. Orange is the colour that people tend to love or hate.

Mixed colours like orange (yellow and red), purple (red and blue), and green (yellow and blue) take attributes from both of their parent colours. With the optimism of yellow and the calming favorite blue, green is the favorite mixed colour. It is considered a pleasant background colour by many and an energetic colour in its brighter forms.

When it comes to web sites high intensity colours, while stimulating, can overload your visual senses. You need to balance the intensity and saturation of the colours you use. The eye needs a place to rest. While some sites do not degrade to greyscale well, many other sites have assembled the right balance of colour and accessibility. Let’s go out and colour our world!

Resources:

Now You See It – Maybe?

Posted by Judy on March 10, 2011 1 comment

As I have been researching topics for my post this week I ran across a concept that specifically applied to a web site I am designing. The web site uses the colors of crayon green and crayon yellow. As I looked at the header I was designing, I wondered how well the colors would look to someone who was color blind. I wasn’t sure if I had enough contrast.

According to Wikipedia: “Contrast is the difference in visual properties that makes an object … distinguishable from other objects and the background.”

shades of contrast

Shades of Contrast

7 – 8% of the population is color blind. Another portion of the population has low-vision needs. According to the Web Designer Depot there is more to contrast than color. “Creating a structure of importance using size, shape and color is what gives a page impact and legibility to the reader.”

According to A List Apart contrast “…it’s the essential ingredient that makes content accessible to every viewer.” Accessibility is an important component of design. If you want people to read your text and see your graphics you need contrast.

I guess I better get back to work and check the various components of contrast: size, shape, color, position, hierarchy of visual importance, etc. Contrast is “…about finding better and more efficient ways of communicating the message behind the design.” Wish me well!

Resources:

Balancing Act

Posted by Judy on February 19, 2011 4 comments

Recently I built a web site for a class reunion. It seemed perfectly straight forward. I mean all I had to do is create a working page, duplicate it, then add content. Right?

Tightrope Walking

Web Design is a balancing act

As with most web sites nothing is straight forward. I had one page that jumped when you clicked the link. It moved the width of one character. It was very distracting. I tried again and again. Still it jumped. Finally I went back to the beginning. I added one element at a time. I found my list made it jump. The right margin was too wide. I deleted the rest of the content and voilá it worked! That is until I removed a photo. Then it started to jump again. I promptly replaced the photo. Once again I had a stable web page.

Web design is a balancing act. The greatest interface in the world may not work on one or two major browsers. You might have a pesky little problem like I had with this site. Besides interface design and pleasing the client, you have to make a site consistent and usable. That means designing for the vagaries of different browsers, different interpretations of your code, and the little things that can break your page. Let’s not forget where content is King usability is Queen.