The current trend in industry is that programmers are not responsible for the graphical design of the user interface. But smaller companies may have the programmer graphically design the interface by default. Also if you should work with graphical designers, you should understand their designs and concerns. Nevertheless you will have to graphically design your project.<\/p>\n
We will discuss two aspects of graphical design: visual organization and color. There are also other aspects such as typography.<\/p>\n
Content organization drives the visual organization, and good visual organization makes it easy to locate content.\u00a0 We will consider the visual organization at the page level using the gestalt<\/i> perception principles. (From Webster\u2019s gestalt is a configuration, pattern, or organized field having specific properties that cannot be derived from the summation of its component parts; a unified whole.)<\/p>\n Sometimes called CRAP<\/b>.<\/p>\n A good visual design generally uses a combination of these principles.<\/p>\n Related items should be close to each other, and unrelated items should be distant.\u00a0 MacCraken gives an excellent example.\u00a0 Consider the list of potential links in a web page:<\/p>\n checkout<\/p>\n close out on pink socks<\/p>\n Email us<\/p>\n July specials<\/p>\n Kid\u2019s clothes<\/p>\n Men\u2019s clothes<\/p>\n Open an account<\/p>\n Sale on rainwear<\/p>\n Special sizes<\/p>\n Store locations<\/p>\n your account status<\/p>\n Women\u2019s clothes<\/p>\n –<\/p>\n<\/div>\n The list is alphabetical and all items are grouped together. This is poor visual organization.\u00a0 A better organization using proximity is:<\/p>\n Women\u2019s clothes<\/p>\n Men\u2019s clothes<\/p>\n Kid\u2019s clothes<\/p>\n Special sizes<\/p>\n –<\/p>\n July specials<\/p>\n Sale on rainwear<\/p>\n close out on pink socks<\/p>\n –<\/p>\n Store locations<\/p>\n Store hours<\/p>\n –<\/p>\n Open an account<\/p>\n your account status<\/p>\n –<\/p>\n checkout<\/p>\n –<\/p>\n Email us<\/p>\n <\/p>\n<\/div>\n The organization need not be vertical grouping, and can be organized horizontally.\u00a0\u00a0 Horizontal grouping is useful for dynamical layout (sometimes called responsive layout) when you do not have control of\u00a0the page width. Unrelated groups would separate further as the page becomes wider. Items in the same group should stay close together.<\/p>\n Alignment can be vertical or horizontal.\u00a0 Traditionally, English text is laid out with left alignment or justification. The alignment suggests to the user that the items are related.\u00a0 In general pleasing design have few breaks or jags in the layout line.\u00a0\u00a0 For this reason centered alignment is generally bad, for example the center justification of the above list:<\/p>\n Women\u2019s clothes<\/p>\n Men\u2019s clothes<\/p>\n Kid\u2019s clothes<\/p>\n Special sizes<\/p>\n –<\/p>\n July specials<\/p>\n Sale on rainwear<\/p>\n close out on pink socks<\/p>\n –<\/p>\n Store locations<\/p>\n Store hours<\/p>\n Open an account<\/p>\n –<\/p>\n your account status<\/p>\n –<\/p>\n checkout<\/p>\n <\/p>\n<\/div>\n The above list is not as pleasing and interferes with the grouping.\u00a0 Center alignment can be used to good effect in titles and with lines of large variation in length:<\/p>\n The Title of Some Large Work<\/p>\n Joe Writer<\/p>\n <\/p>\n<\/div>\n This example is effective because the grouping suggest that items are related, but the justification makes it clear that they are also distinct.<\/p>\n Deliberate indentation can be used to suggest the hierarchy and split up the grouping.\u00a0 Also table layouts can efficiently organize many groups.<\/p>\n Consistency across the web pages can assure users that they are browsing the same web site. Also consistency makes recognition of the organization fast and understandable.\u00a0\u00a0 Consistency within the page also enhances grouping.\u00a0 For example the same color or font can be used to represent groups.\u00a0 Another example is could be displaying temporary items in a freehand font, while more permanent items can be in times new roman font.<\/p>\n Contrast can be used to separate items.\u00a0 For example, fonts for titles are larger then the body.\u00a0 McCraken suggest making the font contrast large.\u00a0 I find it unnecessary to make the size different this great, and it also may be detrimental.\u00a0 For example high contrast in color can be distracting, and excessively large fonts waste space, a premium on most screens. I prefer the saying a \u201clittle contrast can go a long way.\u201d<\/p>\n Color can be used to add attractiveness and usability to the interface.\u00a0 Color can be used to group items, and give hints at the function of buttons.<\/p>\n Visible light is a small spectrum of the electromagnetic spectrum that lies between the infrared and the ultraviolet.\u00a0 The part of the electromagnetic spectrum near the visible from long wave, low frequency to short wave, high frequency is:<\/p>\n The lens of the eye focuses the light on the retina. Cones are photo receptors that respond to the color of the light.\u00a0 There are three types of cones; one response to blue, another to green and a third to red.\u00a0 The three types of cones\u2019 response curves overlap.\u00a0 Blue is the less responsive of the two, and the green and red combine to peak in the yellow.<\/p>\n Color models attempt to categorize the color quantitatively.<\/p>\n This color model that you learned in primary school is also the model used by most artists.\u00a0 The three primaries; red, yellow, and blue, mixed together will produce black.\u00a0 The primaries can create almost all colors by mixing.\u00a0 A color wheel illustrates the model.<\/p>\n This model is called additive because the three lights colored red, green and blue shined on the same surface will produce white light.\u00a0 This is the color model used by stage lighters. It is also the light emitted by diodes in the monitor and so colors on the web page.\u00a0 The monitor has three types of phosphors composing the physical pixel.\u00a0 The intensity of the each is expressed as an integer value between 0 and 255, where 0 means no emission, and 255 means full emission.\u00a0 Note the environment effects the perception of the color from the monitor.<\/p>\n This is the color model used by printers. It represents the color of the most intense dye.\u00a0 The print is given its color by transmitting though the dye and reflecting off the white paper background. The physics of the color model is subtracting color from the illuminating white light. Cyan, magenta, and yellow are complements to red, green and blue.\u00a0 So cyan subtracts red, magenta subtracts green, and yellow subtracts blue. For example cyan, and magenta printed on top of each other would appear blue.<\/p>\n The black achieved by the mixture of the three dyes cyan, magenta, and yellow in not very dark so black ink is added represented by K.\u00a0 The specification of CMYK in the print shop is difficult because the dyes vary, but in photo software the values are generally expressed in percentages.<\/p>\n In this system, the hue is the color. Generally the hue is expressed in degrees around the color wheel. 0 represents red, 120 represents green, and 240 represents blue.<\/p>\n Saturation is purity of the color, how much white is mixed with the color.\u00a0 So 100% saturation is pure color, and 0% saturation is some form of gray.<\/p>\n Brightness represents the color along the black and white axis.\u00a0 100% brightness would render any hue white and 0% would render any color black.<\/p>\n The RGB system is the most similar to the hardware, the screen. It is probably the most accurate for web pages or UI interfaces on devices.\u00a0 But without color picker software it takes a lot of experience to express a specific color in its RGB value.<\/p>\n CMYK is appropriate for printed matter.\u00a0 But this system is also awkward for inexperience users to express a specific color.<\/p>\n The HSB system is perhaps the most intuitive for a novice to use, but is not tied to any hardware system.<\/p>\n In practice the color systems are not synonymous. Each has a slightly different gamut. The gamut is the range of colors that they can express.<\/p>\n I recommend that you start by learning two, RGB and HSB well.<\/p>\n Most people are acquainted with RYB system, and the English language reflects this common knowledge.\u00a0 Because the HSB is based on the same color wheel the transition is easy.\u00a0 The color wheel is a good tool for creating color schemes.<\/p>\n A color harmony scheme is the selection of colors that are used on a page.\u00a0 Although I believe that all schemes are good some are harder to use then others, and certainly a scheme will affect the message of the page.\u00a0 For example a page composed of three bright primaries will give a different message than a page composed of shades of brown.\u00a0 So harmony should be selected with the message in mind and your skill at mixing colors.\u00a0 Generally the more color in the scheme the harder it is to get right and manage.<\/p>\n A scheme that uses colors from the same hue is called monochromatic.\u00a0 In practice the addition of grays to the color pallet is still monochrome.\u00a0 This scheme is the simplest, and naturally increases the cohesion of the page.\u00a0 Do not under rate it effectiveness.\u00a0 Mature graphic designers will most likely use this scheme.\u00a0 The choice of the color will have a profound effect; consider the difference between using a red or blue scheme.\u00a0 Also the saturation will have a profound effect.\u00a0 What would be the difference between a bright yellow schemes and a toned down yellow?<\/p>\n A complementary scheme uses two hues on the opposite end of the color wheel.\u00a0 So black and white are naturally colors in the scheme. \u00a0This scheme can be used to increase contrast in the page, but is harder to use than manochrome.\u00a0 In order to avoid the clashing effect of complementary colors, one hue can be the dominated color, filling in the larger areas.\u00a0 Also, seldom have adjacent complementary color at full saturation.<\/p>\n Analogous color schemes are the opposite of complementary scheme.\u00a0 Analogous color schemes use two colors close to each other.\u00a0 This is the color scheme most frequently found in nature, and consequently the analogous scheme is frequently pleasing.<\/p>\n Three hues approximately equally spaced around the color wheel, for example the primary or secondary colors.\u00a0 This color scheme is very colorful, but can easily get out of hand.\u00a0 If all the colors are saturated and bright the web page may look gaudy.\u00a0 Better to use the colors that are toned down.\u00a0 I recommend using this color scheme sparingly.<\/p>\n The choice of text color and background can affect readability.\u00a0 Studies have shown that dark text on light background is preferred and easiest to read.\u00a0 Although I have found that pure white background can get tiring after reading for a long time.\u00a0 Still the background should be brighter then the text. The choice of the text color is also important.\u00a0 For example consider reading yellow text on white.\u00a0 Brown text on white is easy to use and read.\u00a0 The brown is a mixture of red.\u00a0 The difficulty is that the eye responds less to blue.\u00a0 The contrast between yellow and white is only in the blue; the yellow has no blue.\u00a0 The contrast between brown and white is in both blue and green.\u00a0 For readability it is important to have sufficient contrast.\u00a0 But too much contrast such as red and green, red and blue, or magenta and green can create a perception of vibrating text and is hard to read.<\/p>\n Color coding can organize items into groups.\u00a0 It can be used to enhance proximity grouping and increase contrast.\u00a0 The color coding can also transcend proximity grouping, such as in an IDE.<\/p>\n Also a single color will attract the eye.\u00a0 Consider the red stop sign or yellow warning sign on the highways. Why do the highways use green signs for directions?<\/p>\n","protected":false},"excerpt":{"rendered":" The current trend in industry is that programmers are not responsible for the graphical design of the user interface. But smaller companies may have the programmer graphically design the interface by default. Also if you should work with graphical designers, you should understand their designs and concerns. Nevertheless you will have to graphically design your […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":112,"menu_order":9,"comment_status":"closed","ping_status":"closed","template":"page-templates\/front-page.php","meta":{"footnotes":""},"class_list":["post-409","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/cs4760.csl.mtu.edu\/2015\/wp-json\/wp\/v2\/pages\/409","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/cs4760.csl.mtu.edu\/2015\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/cs4760.csl.mtu.edu\/2015\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/cs4760.csl.mtu.edu\/2015\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"http:\/\/cs4760.csl.mtu.edu\/2015\/wp-json\/wp\/v2\/comments?post=409"}],"version-history":[{"count":11,"href":"http:\/\/cs4760.csl.mtu.edu\/2015\/wp-json\/wp\/v2\/pages\/409\/revisions"}],"predecessor-version":[{"id":927,"href":"http:\/\/cs4760.csl.mtu.edu\/2015\/wp-json\/wp\/v2\/pages\/409\/revisions\/927"}],"up":[{"embeddable":true,"href":"http:\/\/cs4760.csl.mtu.edu\/2015\/wp-json\/wp\/v2\/pages\/112"}],"wp:attachment":[{"href":"http:\/\/cs4760.csl.mtu.edu\/2015\/wp-json\/wp\/v2\/media?parent=409"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n
Proximity<\/h3>\n
Alignment<\/h3>\n
Consistency<\/h3>\n
Contrast<\/h3>\n
\u00a0Color<\/h2>\n
Physics of Color<\/h3>\n
\n
Color Models<\/h3>\n
The Primaries: Red, Yellow, Blue (RYB)<\/h4>\n
Additive Color: Red, Green, Blue (RGB)<\/h4>\n
Subtractive Color: Cyan, Magenta, Yellow (CMYK)<\/h4>\n
Hue, Saturation, Brightness (HSB) System<\/h4>\n
Comparing the Four Models<\/h4>\n
Color-Harmony Schemes<\/h3>\n
Monochrome<\/h4>\n
Complementary<\/h4>\n
Analogous<\/h4>\n
Triadic<\/h4>\n
Text and Background<\/h3>\n
Color as Organizer and Attention Getter<\/h3>\n