The viewer will explore the importance of Line and how it can be used selectively to set boundaries between sections in a website.
- [Instructor] The seventh of the eight elements of design is line. In design, line can be used in a variety of ways. Not only can you use line to define and enhance the shapes within your layout, but you can also use line to set boundaries between objects within a page. In the world of art and design, line refers to any actual or implied mark, path, mass, or edge which defines position and/or direction within the design. Lines can be created with a pen, pencil, brush, crayon, or any other mark making tool, including digital tools that you will find in programs like Photoshop, and Illustrator.
Lines can be created in nearly any shape or size. For instance, they can be thick, they can be thin, long, short, smooth, rough, hard-edged, soft, curvy, straight, solid, dashed, and dotted. Lines can be formed by the edge where two shapes meet, like on this web design, where the dark rectangle shape defines the header, and separates the header from the area below, But, lines need not be straight. You can use a shared edge to create some definition within your design.
For instance, like this, the curved edge acts like a pocket, or a flap. You could also use undulating lines, let's take a look at that, like a wave shape, or even a sloping line, like this, and each type of line creates a completely unique feel, like this one evokes water, which kind of goes along with the name of the company, Perch Design Studio. In all these instances, the edge creates the illusion of line. Lines can also be created by implication.
For instance, where showing line with just the cut out shapes on the edge of those ribbons. Lines can also create areas of emphasis, especially when they visually point to a focal area. For instance, I can add double lines on either side of the little fish icon, that sort of point, and bring your focus to that space. You can also use lines as borders, with strokes, and even drop shadows. For instance, with the logo, I can add a circle behind it with a stroke affect, or a solid, with or without a drop shadow, so maybe just the stroke with the drop shadow.
Lines can also imply movement by their inherent directionality. For instance, I can have a little white box with a stroke around it, that's another form of line, but I could add a diagonal shape, which gives it a sense of movement or space, maybe a little reflection, and that line that cuts across, that creates those two colored shapes, gives it a sense of space. Lines can also lead your eye across a page from left to right, which is how we read in the West, or you could go in any direction really.
I've added three columns here at the bottom, like so, and using lines as dividers to separate each of the three areas. In web design, lines are often used to set boundaries and organize information. Here is a site, Lowdi.com, that uses line really effectively in several different ways. Here's lines created with color and shape. They are used to define the space. In the navigation, you've got lines used to organize and create a sense of unity.
There's also lines used for emphasis, like underlined headers appear. Then, you have areas using line to separate bits of information and space. Let me scroll down to show you what I see here. The navigation appears at the top, and the shapes are creating line that guides your eye from one section to the next. It has a nice flowing sensibility with a really interesting use of line, like these horizontal lines here, or a vertical divider there.
Nice, clean, simple, open way of dividing the space. How ever, and how frequently you use line and your web designs, think about the directions that they flow in. Use your lines to define spaces that should be considered as separate visual elements. Consider the implications of your lines. Use them thoughtfully, to communicate a sense of order, and organization with your target audience. Where you place your lines can really help create these natural boundaries that enable viewers to quickly identify key areas within your design.
- Understanding aesthetics
- Picking harmonious colors
- Structuring your layout
- Using space to organize your design
- Communicating with the right fonts
- Aligning objects to achieve balance
- Adding movement with scrolling and animation
- Achieving proportion by scaling objects and text
- Creating CSS for different devices