Category — Design Tips & Tricks

If you are a designer and you haven’t missed all the buzz around Web 2.0 you must know about stripes. Stripes are everywhere and if you weren’t able to make your web site decorated in stripes you can do it with online tools - Stripe Generator 2.0 and Stripemania.

How to use them?

1. Define the size, spacing, colors, background style, shadow and stripe orientation.
2. Preview and download the tile to your computer.
3. Open the .png file with the tile in Photoshop.
4. Select the whole tile (Select>All), make a pattern (Edit>Define Pattern OK).
5. Open the picture you want to add the pattern to and use Bucket tool to add stripes to the image.

Here is a set of links that might me useful for you if you are into web development and web design.

Deziner Folio is a web page by two brothers in Bangalore, India. It’s mostly about Web 2.0, design, templates, layer styles, icons, gradients, solutions, resources … and it looks good!

Design Fruit is another web page with gorgeous sets of Photoshop brushes. Check out this set of Japanese Foliage!

125 Code Snippets for web designers. Everything from rounded corners, Ajax star rating bar, tables with style, CSS shadows…

Website ribbon generator

Polar Clock Screensaver - an intersting screensaver built with Flash CS3, Flex and ActionScript 3.0

15 Excellent Examples of Web Typography. They really make an excellent use of type!

Today I came across an interesting and highly useful web page for all internet users and your brain cells. Some might call it the future of web navigation, others would agree it’s just a web experiment.

Both might be right.

http://www.dontclick.it is a web page that explores web navigation without clicking. Quite simple, right? Try it first and tell me what do you think! You WILL be amazed about what the developer Alex Franz had made!

I will describe one problem I came across during development of a navigation for some web page. Picture 1 shows the navigation for one of the web pages. You can see that one navigation item is selected and the others have only their name displayed. When the visitor hovers the navigation element (Picture 2 and 3), the element should get the same design as the selected item.

The designer wanted that all borders of the navigation elements overlap so that only one line can be seen between two navigation elements. OK, but the problem becomes apparent when you start thinking about CSS and its box model. Each list item in unordered list that was used for navigation has its own “box” (content, padding, border and margin) - therefore if you apply a border to each navigation element (currently selected and hovered) you get two lines displayed!

The solution is to use borders in the same color as the background! For the upper navigation element make the bottom border the same color as the background and for the lower navigation element make the top border the same color as the background.

This will also prevent the movement of the navigation - because the size of the navigation will stay the same at all times.

At this particular navigation some additional JavaScript code had to be added to make it work in IE6, but when I figured out how to make it work, the task became a piece of cake.

Smashing Magazine published 45 excellent blog designs. Get some inspiration ;)