{"id":2622,"date":"2020-06-24T16:56:37","date_gmt":"2020-06-24T16:56:37","guid":{"rendered":"https:\/\/courses.lumenlearning.com\/suny-newpaltz-engcomp1\/?post_type=chapter&p=2622"},"modified":"2021-01-05T21:47:31","modified_gmt":"2021-01-05T21:47:31","slug":"types-of-writing-on-the-web-websites-design-principles","status":"web-only","type":"chapter","link":"https:\/\/courses.lumenlearning.com\/suny-newpaltz-engcomp1\/chapter\/types-of-writing-on-the-web-websites-design-principles\/","title":{"raw":"Web Pages: Design Principles","rendered":"Web Pages: Design Principles"},"content":{"raw":"

I\u2019m a Writer, Not a Graphic Designer! (Or, Who Gives a CRAP?)<\/h2>\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n\r\nIt\u2019s easy to get by in most college writing without thinking about visual design or graphics. About the most visual design college writing asks for is that you emulate the MLA or APA document format, pretty bare bones visual designs in themselves. Create your text of letters and numbers, and plug it in.\r\n\r\nThe web, though, is a different place. To be a web writer, you have to expand your definition of \u201ctext\u201d beyond merely copy (the alphanumeric symbols on the page you might have previously thought exclusively constituted all writing) to include visual design as well as the use of font, images, layout, video, and other media. Using these new forms of writing also raises new issues about copyright and fair use.\r\n\r\nA good starting point is to learn some basic design principles. To think about visual design of your pages, you need a design vocabulary: a set of terms you can use to talk about what you like and don\u2019t like in a web page.\r\n\r\nDesigner Travis McAshan notes that: \"Graphic design contains underlying principles that govern the most important aspects of great design. These principles create the acronym C.R.A.P. which stands for\u00a0contrast, repetition, alignment, and proximity<\/strong>. The well-balanced combination of these principles tends to create design which most people would consider visually pleasing.\"\r\n
\r\n

C.R.A.P: Article<\/h2>\r\n

Review this article before reading any more of this page<\/strong>: Is Your Website Design \"CRAP\"?<\/a><\/h2>\r\n<\/div>\r\n

White Space Is Your Friend<\/h2>\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n\r\nNow that you understand what CRAP is<\/strong><\/em>, a good next principle is that the background on the page, the \u201cwhite space,\u201d (also known as \u201cnegative space\u201d) is your friend. Cluttered websites where everything is smashed together can be difficult to read. Websites that are well designed contain plenty of white space. The text has room to \u201cbreathe\u201d and the pages are much more reader friendly for it.\r\n\r\nNow suppose your white space is not white, but a background image (this is why we need the term negative space). If the background image is too strong\u2014such as a bright picture or a repeating design behind your text\u2014it will call too much attention to itself. Reading text may be extremely difficult, and you may obscure important information. Consider a solid color background and add pictures to create interest. Or if you want to use an image as a background, you might be able to fade the image so that it is very subtle against a solid background, almost transparent.\r\n

Contrast<\/h2>\r\nStill, even solid backgrounds can be a problem if there is not enough contrast between the background and the copy on the page. (See, we just used the C of CRAP, contrast, to talk about a web design issue.) The worst cases are color combinations that will give readers migraines, like\u00a0red text on a blue background.\u00a0It might look interesting at first, but it will make your readers\u2019 eyes bleed (or at the very least give them a headache) if they have to look it at for longer than a few seconds. Chances are they won\u2019t stick around that long if they see a page full of jarring colors (anyone tired of MySpace yet?).\r\n

Using Color<\/h2>\r\n

A designer has to choose colors that are the right tone to support the mission or focus of the website. Most people know that blue (because of water) and green (because of plants) can symbolize life. Red can hint at anger or, ironically, love.\u00a0The chart below, links specific colors to emotions . . .\u00a0 and to products. This chart was created for people creating advertisements.<\/p>\r\n\r\n\r\n[caption id=\"\" align=\"alignnone\" width=\"596\"]\"A Color Emotion Guide[\/caption]\r\n\r\n

\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n\r\nIt can be hard to come up with a color scheme of multiple colors that work well on a site. If your website has a primary logo or visual, one technique can be to use the color picker in an image editor to choose the colors that match with that logo or visual. Or if you still feel challenged in trying to pick out colors that go together in your design, tools such as Canva's Color Wheel Tool<\/a> can help you to come up with complementary\/contrasting colors.\r\n

The Color Wheel<\/h3>\r\n[caption id=\"attachment_2664\" align=\"alignnone\" width=\"376\"]\"A A Basic Color Wheel[\/caption]\r\n\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
The website Canva, which is a cloud based graphic design tool, introduces the color wheel this way:<\/span><\/strong><\/div>\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
<\/div>\r\n
Ever wondered how designers and artists find the perfect color combination?<\/span><\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n
\r\n
\r\n
\r\n
\r\n
\r\n\r\n \r\n

They use color theory. Color theory is a practical combination of art and science that\u2019s used to determine what colors look good together. The color wheel was invented in 1666 by Isaac Newton, who mapped the color spectrum onto a circle. The color wheel is the basis of color theory, because it shows the relationship between colors.<\/p>\r\n

Colors that look good together are called a color harmony. Artists and designers use these to create a particular look or feel. You can use a color wheel to find color harmonies by using the rules of color combinations. Color combinations determine the relative positions of different colors in order to find colors that create a pleasing effect.<\/p>\r\n

There are two types of color wheel. The RYB or red, yellow, blue color wheel is typically used by artists, as it helps with combining paint colors. Then there is the RGB, or red, green and blue color wheel, which is designed for online use, as it refers to mixing light \u2013 like on a computer or TV screen.<\/p>\r\n\r\n

Complementary Colors<\/h3>\r\n

Two colors that are on opposite sides of the color wheel. This combination provides a high contrast and high impact color combination \u2013 together, these colors will appear brighter and more prominent.<\/strong><\/p>\r\n\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n

The article below contains an interesting discussions of the use of color, particularly with commercial websites. Note: This is a commercial website:<\/h2>\r\n