[su_pullquote align=”right”]Drawing attention to the content is what you want to do, right?[/su_pullquote]Design effectively is more about subtlety than about bold strokes. Lines in design can play a critical role, drawing attention to the content; that is what you want to do anyway, right?
There are many design tricks to make your design more interesting. Here are some to try.
Underline
PRO: An underlined headline separates the header from the content below. It makes the heading heavier and gives it more presence. If you span the heading across the paragraph it also defines the shape of the paragraph or content below.
CON: One of the problems of underline is that it can cross the descender on letters. This can be distracting to the reader because it, just plain, looks awkward. A great design trick is to remove the lines surrounding the letters that are descending. This solution is a lot less visually complex.
Underline Extension
A line does not have to stop at the end of the word. You can make an interesting statement by extending the line all the way across the page. And if you’re going to extend it you can have fun with it by making the end swirl around, zig-zag or terminate in an image.
Vary the line style
You can use dotted or dashed lines. There are many different CSS methods you can use on your header tags:
- border-bottom-width: medium|thin|thick|length|initial|inherit;
- border-bottom-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;
- border-bottom-color: color|transparent|initial|inherit;
- text-decoration: none|underline|overline|line-through|initial|inherit;
- text-shadow: h-shadow v-shadow blur color|none|initial|inherit;
- text-transform: none|capitalize|uppercase|lowercase|initial|inherit;
Using CSS where you can will help give your website a cohesive feeling. It is about giving the user a subtle reminder of where to find things on your page.
You can learn more about CSS here.
Top Lines
If you’re style is formal you could place a line above and below the heading. But, if you want to make the same heading look a little less formal you can stagger the lines to create a feeling of motion.
Vertical Lines
Why stop at horizontal lines. Extend the extensions on your letters vertically to create some drama. Use of vertical lines works nicely to separate paragraphs. Remember that you don’t have to use a solid line.
Outlines
Outlines can also be effective. Here again you should think outside the box by perhaps using a color that is just slightly darker or lighter than your background or using a different style line and width.
Don’t go overboard
Remember that designing with lines can be more effective when it is done with subtlety so don’t go overboard. Using a few techniques here and there can go a long way toward making a cohesive and interesting design.
Want to see more and see some great techniques? Checkout this article by Design Shack.
0 Comments