Elements of Web Design
Posted on | January 14, 2011 | No Comments
I have been training students in web design and production since the mid-1990s, especially after the explosion of the Internet’s World Wide Web that set the standards for hypertext protocols, markup language, and web browsers. New York City’s “Silicon Alley” and companies around the tri-state region couldn’t get enough help “getting online.” By the time I left Marist College and moved to New York University, the number of students taught was in the hundreds.
I found that web design, although essentially operating at the surface level of the web production process, was an important skill. Many websites were pretty ugly. Remember the animated dancing Odies? Text that went all the way across the screen? Borders around images? And all the centered text? Designing web pages don’t necessarily require fine arts training (although it helps), but they do require following some basic guidelines and developing some appreciation for the aesthetics involved.
Luckily, I found Robin Williams four elements of design from her The Non-Designer’s Design Book extremely useful. She stressed adherence to 4 major design principles: Contrast, Alignment, Repetition, and Proximity (CARP). I have rearranged the letters differently at times but no matter the order, it is still these basic four. While they didn’t necessarily turn the student into a web artist, it certainly made an immediate impact in the quality of their work. Plus, it was easy to convey and evaluate. Here they are with my notes:
- Contrast – Change fonts, colors, shapes, sizes, spaces, thickness, etc. in order to create striking differences that make the page interesting. One rule of thumb goes, if it’s not the same – make it different!
- Repetition – If it works – repeat it! Find items that are the same and use them again. Lists, for example, are good examples of repeating important information.
- Alignment – Find something to align with – even if it’s on the other side of the page
- Proximity – Group related items together. Don’t create relationships between different items
I used to have my own HTML and web design tutorials online, but it got too complicated to keep up. Now I recommend w3schools.com for basic coding and lynda.com for design and complex web issues.
Anthony J. Pennings, PhD has been a faculty member for NYU since 2001 teaching digital media, information systems management, and global communications.
var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-20637720-1']); _gaq.push(['_trackPageview']);
(function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();
Tags: Alignment > Proximity > Repetition > Robin Williams > The Non-Designer's Design Book