spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

home / experts / dlab / 9707
Developer News
Metasploit 3.2 Offers More 'Evil Deeds'
'Thank You Apple. Seriously.'
The Buzz: BlackBerry App Store Seen Next
 
  Straight lines
 
 

Astraight line is the most basic geometric shape, although it's rarely the first thing that comes to an average designer's mind.  The reason is simple---it's rarely useful: Unless you're drawing flow charts or site maps like this one, you usually don't need straight lines in any role other than boundaries of page elements (most often represented by rectangles).


One exception is the horizontal rule, a text punctuation tool which is so common that it's given an HTML tag of its own, the HR tag.  While useful on pages with lots of text, it isn't a particularly elegant device from a design viewpoint.  In many cases the urge to put an HR is a sign that either the contents or the layout of the page are not thought out very well.  The boundaries between page sections should be expressed by purely design means (layout, different background colors or fonts, etc.), and if these means seem insufficient, you may consider dividing the content into two or more pages.

It is also unfortunate that the default look of an HR is in most browsers bevelled (pseudo-3D) because this is almost sure to clash with the page's graphic elements (unless you have none, of course).  Indeed, these bevelled rules imply a very special "engraving" effect which may only distract when combined with body text that is absolutely flat and a heading that uses, say, drop shadows.  The HR is only appropriate for pages with minimum graphics or for some special cases where the designer knowingly seeks the engraved effect.

So please try to design your custom graphic rules to match your site's style or, at the very least, add the NOSHADE attribute to the HR tag---such a rule is more likely to look satisfactorily.  (But never, never use those motley animated parrot-like rules from "web art" collections!  If you're considering putting one on your page, then, oh well, you'd better stay with the good old HR.)


Getting back to straight lines in general, we discover that they are quite a popular design theme these days.  Thin lines of a prominent color (often black or white) can help integrate a composition of blurred shapeless graphics and pseudo-randomly laid out text blocks.  These lines connect, embrace, and relate the parts of an image; they're the natural "power lines" that our eyes tend to follow.  They undoubtedly originate from the lines on flowcharts and callouts; that's why they prefer horizontal and vertical directions, sometimes are dotted, and sometimes have arrowheads, notches, or bullets at their ends.

 

Link 1:  Inside Intel
Let's see some examples.  Intel's site suggests another origin of the line theme: they're very similar to the patterns of printed circuits or chips (hence the diagonal sections---if curious, have a look at your computer's motherboard).  Here the lines serve as ties between all links, headings, graphics, and text blocks on the page and ensure a unified style for the entire site.  

 Besides the functions of connectors and dividers, horizontal lines are sometimes used as close underlines for text headings.  This feature is somehow related to the zero interline skip that I mentioned in another article; both have their roots in the aesthetics of technical illustrations showing the design and use of type, with font baselines visualized.  

Link 2:  MetaCreations Calls Out
The lines theme doesn't always serve a well-defined purpose in a composition; sometimes artists just get inspired with the austere beauty of the geometry.  So, a callout (with a bullet, not arrowhead, at the end) has become the center of an early logo composition for MetaCreations (now the company uses another logo design).  At highfive.com, heading graphics contain nothing but some artificially distorted type, drop shadows, and a bunch of horizontal and vertical lines.
Link 3:  HighFive's Mission

 Finally, a technical tip: One pixel wide lines look better without anti-aliasing.  This essentially means that you should draw them directly in Photoshop or another bitmap editing program rather than export a from a drawing (and if you prepare the rest of your graphics in a drawing program, which is the recommended practice, export it without the lines and add them later). The same technology is also used for creating bit-wise background patterns.  

Comments are welcome
Produced by Dmitry Kirsanov and

JupiterOnlineMedia

internet.comearthweb.comDevx.commediabistro.comGraphics.com

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia

Jupitermedia Corporate Info


Legal Notices, Licensing, Reprints, & Permissions, Privacy Policy.

Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers

Solutions
Whitepapers and eBooks
IBM Whitepaper: Innovative Collaboration to Advance Your Business
Internet.com eBook: Real Life Rails
Avaya Article: Call Control XML - Powerful, Standards-Based Call Control
Tripwire Whitepaper: Seven Practical Steps to Mitigate Virtualization Security Risks
Internet.com eBook: The Pros and Cons of Outsourcing
Go Parallel Article: Scalable Parallelism with Intel(R) Threading Building Blocks
Internet.com eBook: Best Practices for Developing a Web Site
IBM CXO Whitepaper: The 2008 Global CEO Study "The Enterprise of the Future"
Avaya Article: Call Control XML in Action - A CCXML Auto Attendant
Go Parallel Article: James Reinders on the Intel Parallel Studio Beta Program
IBM CXO Whitepaper: Unlocking the DNA of the Adaptable Workforce--The Global Human Capital Study 2008
Adobe Acrobat Connect Pro: Web Conferencing and eLearning Whitepapers
Go Parallel Article: Getting Started with TBB on Windows
HP eBook: Storage Networking , Part 1
MORE WHITEPAPERS, EBOOKS, AND ARTICLES
Webcasts
Go Parallel Video: Intel(R) Threading Building Blocks: A New Method for Threading in C++
HP Video: Is Your Data Center Ready for a Real World Disaster?
Microsoft Partner Portal Video: Microsoft Gold Certified Partners Build Successful Practices
HP On Demand Webcast: Virtualization in Action
Go Parallel Video: Performance and Threading Tools for Game Developers
Rackspace Hosting Center: Customer Videos
Intel vPro Developer Virtual Bootcamp
HP Disaster-Proof Solutions eSeminar
HP On Demand Webcast: Discover the Benefits of Virtualization
MORE WEBCASTS, PODCASTS, AND VIDEOS
Downloads and eKits
Microsoft Download: Silverlight 2 Software Development Kit Beta 2
30-Day Trial: SPAMfighter Exchange Module
Red Gate Download: SQL Toolbelt
Iron Speed Designer Application Generator
Microsoft Download: Silverlight 2 Beta 2 Runtime
MORE DOWNLOADS, EKITS, AND FREE TRIALS
Tutorials and Demos
IBM IT Innovation Article: Green Servers Provide a Competitive Advantage
Microsoft Article: Expression Web 2 for PHP Developers--Simplify Your PHP Applications
Featured Algorithm: Intel Threading Building Blocks - parallel_reduce
MORE TUTORIALS, DEMOS AND STEP-BY-STEP GUIDES
webref The latest from WebReference.com Browse >
Popular JavaScript Framework Libraries: An Overview · Controllers: Programming Application Logic - Part 2 · How to Use JavaScript to Validate Form Data
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Choosing the Right Online Backup Provider · Mother Avaya Nurtures Her Technology Partners · Software as a Service a Winning Model for Hotspot Provider

Created: Jul. 26, 1997
Revised: Jul. 26, 1997

URL: http://www.webreference.com/dlab/9707/lines.html