Archive for category Web Design

Useful Adobe Fireworks tips

- While drawing a line, hold down SHIFT to make it straight horizontally or vertically.

- While drawing a rectangle, press the UP or DOWN arrow keys to make the corners round (or sharp).

- You don’t need to ungroup to edit objects within a group, simply use the Subselection tool to select and edit an object.

- Change the corner roundness mode to px instead of %, making duplicates with various size won’t affect the roundness anymore.

- Use the arrow keys (with an object selected already) to position precisely an object.

- To apply a fade effect on any object, use the Auto Vector Mask command found under the Commands > Creative menu

- You can curve a text object by drawing an ellipse, selecting the text and the ellipse and applying the Attach to path command found under the Text menu.

 

That’s it for now! :)

5 things to avoid in web design

A list of 5 things you should totally avoid while designing (and coding) a website:

1) Default colors

I know it’s not always easy to pick the right color for text and background, but seriously, some colors are just ugly in any situation. I guess part of the problem are the design software themselves. When you open the color picker, you always get a choice of default colors. These are the colors you should avoid. Even Microsoft took care of the problem. In Office 2007, they got rid of the usual colors found in highlighters and replaced them with some more professional tones:

Office 2007 Colors

Office 2007 Colors

If you still have no idea which colors to pick, you can always try Kuler from Adobe: http://kuler.adobe.com/

2) You could put some more padding here…

This one is quite frequent for beginners. You just coded a box and inserted some text. But the text goes right on the border…

More padding please

More padding please

If you never looked at CSS, now is the time. Use at least 8px and you’re good to go.

3) You gotta love that high-contrast monitor…

Always use low contrast gradients when you’re going to put text above it. If the contrast is too high, no matter what the color is, it’s going to be unreadable.

Gradients Contrast

Gradients Contrast

Trick: Use the first color you picked, open the advanced color picker and choose the color 5-12 steps above/below.

4) 1 box + 1 box + 1 box + … = Too many boxes

Unless you plan on making a CMS style design, you don’t need to put a box around everything.
Keep it simple, one box for your sidebar and another for your content. Use bars or bigger text to separate content.

5) Left we go

It was fine 10 years ago but now with monitors being larger and the resolutions reaching the 1920×1080, it just doesn’t make sense anymore to put a website aligned to the left.
Eyes are focused at the center of the screen, so either center align your website or make it liquid style so it fills the entire screen.