Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
A basic understanding of the principles of good design (such as contrast, unity, and balance) is the foundation for creating beautiful websites. In this course, Sue Jenkins explains design aesthetics in simple terms, and shows how to incorporate the principles of design in specific ways that improve your site. Learn how to adjust adjacent colors to add contrast, create depth with texture, incorporate movement, and use repeating shapes, patterns, and borders to unify your design. Then, in the final chapter, learn about special issues designers should address in their web layouts, such as responsive design for mobile devices, accessibility, and originality.
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 a 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 could 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.
So for instance ,like this the curved edge acts like a pocket or a flap. You could also use and undulating line, so 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.
So, for instance, we're showing line with just a cutout shape on the edge of those ribbons. Lines can also create areas of emphasis, especially when they visually point to a focal area. So, for instance, I can add double lines on either side of 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. So for instance for the logo, I can add a circle behind it with a stroke effect, 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. So, 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-color shapes, gives it a sense of space. Lines can also lead your eye across the page from left to right, which is how we read in the West, but you could go in any direction, really.
So 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's a site, lowdi.com, that uses line really effectively in several different ways. Here's lines, created with color and shape. They're 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 up here. And then you have areas using line to separate bits of information and space. So let me scroll down to show you what I see here. So the navigation appears at the top, and these shapes are creating a 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 vertical divider there.
Nice, clean, simple, open way of dividing the space. However, and how frequently you use line in 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.
There are currently no FAQs about Design Aesthetics for Web Design.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.