Total Followers 132,503
The elements of design are pivotal in creating an eye-catching, harmonious design that speaks to your audience and shouldn’t be overlooked. They are the fundamental elements of design which can be called upon when you reach a tough part of the design process. Becoming familiar with these elements means you have the knowledge to make sound decisions in regards putting a design together.
Perhaps the simplest element you can use is a line. A line is a form with width and length, but no depth. The type of lines you use can convey different feelings, moods and add strength to your ideas.
Each of the lines above conveys its own emotion. By varying thickness, curves and stroke width we can produce different feelings or ideas.
In regards to web design, lines are used abundantly to divide sections of content or to join sections that are related to each other. On websites and in magazines we see lines used to frame photographs, separate sidebars and join articles together.
Consider using a grid to better position elements on a page. The grid itself is invisible on the final design, but sometimes grid lines are drawn to strengthen the effect of the grid. This can help maintain consistency throughout a website.
The website for Things that are Brown uses a 16-column grid as a foundation of their design.
Unfinished Business School is an example of a site that uses a lot of curved and dashed lines to indicate movement and energy.
Forms are three-dimensional objects within a design, like a sphere or cube. Forms are common in actual three-dimensional graphic design, of course, but are also seen in web and print design. Website designs that use 3D techniques are making use of forms. A form can be geometric, organic, natural, realistic, abstract and non-objective.
Ultimate Interactive Studio uses shadow to create form, giving the viewer the illusion that a line is elevated in space.
Gold Coast Web Design uses shadow to give the illusion of the page coming forward.
Shapes are two-dimensional. A shape is formed when a line encloses an area. Shapes can vary endlessly and can suggest physical form and direct eye movement. Simple shapes are remembered and understood more easily than complex shapes. Circles, squares, rectangles, triangles, and any other kind of polygon or abstract shape are shapes. Using shapes allow us to control or guide the viewer through the layout as we want.
Quen Estuda Faz uses shape throughout their site to clearly delineate information from the next.
Texture is a great way of establishing a mood for a design. Whether you use them subtly, or more pronounced, texture can establish a feeling or conjure up memories to the user. The most commonly seen textures, apart from flat or smooth, are things like paper, stone, concrete, brick, fabric, and natural elements.
We can give the impression of texture by using background images of various material, for example, stone, cardboard and scanned old paper or cloth are used frequently by web designers to bring a tactile element to their website.
The use of texture on the website for Havana Club adds a layer of authenticity to the design.
Prologue Advertising uses texture as a background element in their header.
In addition to being one of the most obvious elements of a design, color has the ability to create strong emotional reactions. A user can consciously and subconsciously apply certain meanings or emotions to different colors.
Color Theory is another important aspect of design and one you should be familiar with. You should know the difference between:
Keep these pointers in mind when using color in your web designs:
Color Scheme Designers
Color Theory For Designers
The website for Indofolio uses color generously on the bold, eye-catching site for the designer.
How light or dark a particular element is can be referred to its value. Value can be used for emphasis. Variations in value are used to create a focal point for the design of a picture. A light element on a dark background will be immediately recognized as the center of attention, similarly for a dark element on a mostly white background.
Web is Beautiful uses value to delineate hierarchy on their website.
As you can see, the elements Line, Shape, Form, Texture, Color, and Value can work to create memorable, carefully thought-out design. In many cases combining these elements in one design can create impactful design solutions that resonate with the viewer. In all cases, make sure you evaluate the use of each design element and whether or not it contributes to the overall message your trying to convey. The result will be more noticeable and striking than throwing all the elements together in one design.
Get The Only Freelancer crash course you will ever need to read!
Saturday, August 20th, 2011 10:55
Yeah… amazing tips… thanks…
Sunday, July 24th, 2011 10:34
Fantastic Round-Up. These have got to be my fav posts you put out Stephanie!
Monday, July 18th, 2011 11:10
A really good write up here. I think you have mentioned the points brilliantly. Another 1stwebdesigner post bookmarked. I’m going to have to give you your own section in my browser soon!!
Monday, July 18th, 2011 10:03
i have read many posts related to web design but your post contains all the elements which can clear the mind of a newbie.. i am a newbie in web designing and after reading your post i get to know which are the basics elements for a modern web design.. nice write up.. keep sharing more tips and content..
Monday, July 18th, 2011 08:01
These are some pretty inspiring web designs! Very clean, attractive web design. It’s funny that they all use different styles but still all feel very similar in a way, maybe it’s the common theme of quality that I’m noticing amongst them all :)
Monday, July 18th, 2011 10:43
Very nice article, definitely wouldn’t mind reading more like these. Great showcase too.
Sunday, July 17th, 2011 09:25
Great writeup Stephanie. The use of form element in “Ultimate Interactive Studio” looks very nice.
Thanks for sharing:)
Saturday, July 16th, 2011 14:13
Great Article Stephanie. its very helpful for web designers special for me. but i think you missed one thing that is “Gradients”. Gradients is also very important for web design what you say ?
Saturday, July 16th, 2011 18:48
Yes I agree, gradients probably deserve a section of their own. One thing I’ve learned about gradients is : keep it subtle!
Saturday, July 16th, 2011 14:05
Very informative post. Thanks for the great list. Defiantly a bookmark :)
Saturday, July 16th, 2011 12:19
Nice writeup. Thanks :)
Saturday, July 16th, 2011 12:33
I have read a lot of article on web designing but they are all spoon feeding tutorials. They only teach you to how to go about the design they have on their website. But this article here is the kind of the article I want to read more about. It is simple but the points are very vital.
I would like to read more articles like these, so if you can then please make more or if you know about any other resource that gives even more comprehensive knowledge, for eg. modern design aesthetics, typography in web design, how to choose and implement colors in web design and all about the tools and the tricks of modern web designing then please let me know.
Thank you,
Ageless.
Get The Only Freelancer crash course you will ever need!
If not, then it's time to learn how to:
You can trust 1stWebDesigner to help you become a better web designer!
- Jacob Cass | Just Creative
Just enter your name and email below and click Get Updates!
Ageless
Saturday, July 16th, 2011 12:33
I have read a lot of article on web designing but they are all spoon feeding tutorials. They only teach you to how to go about the design they have on their website. But this article here is the kind of the article I want to read more about. It is simple but the points are very vital.
I would like to read more articles like these, so if you can then please make more or if you know about any other resource that gives even more comprehensive knowledge, for eg. modern design aesthetics, typography in web design, how to choose and implement colors in web design and all about the tools and the tricks of modern web designing then please let me know.
Thank you,
Ageless.
Nikhil Malhotra
Sunday, July 17th, 2011 09:25
Great writeup Stephanie. The use of form element in “Ultimate Interactive Studio” looks very nice.
Thanks for sharing:)
Martin Leblanc
Sunday, July 17th, 2011 09:55
What about animation?
Trodney
Saturday, July 16th, 2011 14:13
Great Article Stephanie. its very helpful for web designers special for me. but i think you missed one thing that is “Gradients”. Gradients is also very important for web design what you say ?
Alex
Saturday, July 16th, 2011 18:48
Yes I agree, gradients probably deserve a section of their own. One thing I’ve learned about gradients is : keep it subtle!
Salman Olevel
Saturday, July 16th, 2011 12:19
Nice writeup. Thanks :)
Kent
Saturday, July 16th, 2011 14:05
Very informative post. Thanks for the great list. Defiantly a bookmark :)
Anthony
Monday, July 18th, 2011 10:43
Very nice article, definitely wouldn’t mind reading more like these. Great showcase too.
Karl
Monday, July 18th, 2011 08:01
These are some pretty inspiring web designs! Very clean, attractive web design. It’s funny that they all use different styles but still all feel very similar in a way, maybe it’s the common theme of quality that I’m noticing amongst them all :)
Roy
Sunday, July 24th, 2011 10:34
Fantastic Round-Up. These have got to be my fav posts you put out Stephanie!
LyzX
Saturday, August 20th, 2011 10:55
Yeah… amazing tips… thanks…
Alex
Monday, July 18th, 2011 19:43
Great little article – thank you!
Kris
Monday, July 18th, 2011 17:54
Excellent post, thanks for sharing :-)
Andy
Monday, July 18th, 2011 10:03
i have read many posts related to web design but your post contains all the elements which can clear the mind of a newbie.. i am a newbie in web designing and after reading your post i get to know which are the basics elements for a modern web design.. nice write up.. keep sharing more tips and content..
Gavin
Monday, July 18th, 2011 11:10
A really good write up here. I think you have mentioned the points brilliantly. Another 1stwebdesigner post bookmarked. I’m going to have to give you your own section in my browser soon!!