Design: Difference between revisions

From LitWiki
m (Added references.)
m (→‎Navigability: editing)
 
(30 intermediate revisions by 2 users not shown)
Line 1: Line 1:
Design is an important aspect to remember when writing for the screen. In digital writing, design pertains to the overall look of the website and arrangement of the text, graphics, and other objects that make up the site. There are three main components to understanding and implementing design: consistency, usability, and navigability.
[[Web_Based_Digital_Media_for_College_Writing_Students|Home Page]]


The design of a site or webpage is what will likely cause viewers to return to the site and continue reading it. The overall appearance must be appealing and entertaining.
[[File:Website_design-300x300.jpg|frame|alt=Web Design|Examples of webpage design.]]
Design is an important aspect to remember when writing for the screen. In digital writing, design pertains to the look of the website and arrangement of the text, graphics, and other objects that make up the site. Proper web design is the balance of visual sensation and graphic information<ref>Lynch and Horton "Page Design"</ref>.
 
The design of a site or webpage is what will likely cause viewers to return to the site and continue reading it, so the overall appearance must be appealing, functional, and entertaining. However, having bad web design will drive users away. Viewers will not stay on a web page that is visually confusing or assaulting with either too many graphics or too much text. This is why design is such an important factor of web writing.
 
There are three main components to understanding and implementing design: [[#Consistency|consistency]], [[#Usability|usability]], and [[#Navigability|navigability]].


==Consistency==
==Consistency==
[[File:72-a21f0f9bce.jpg|thumb|alt=Webpage Design|This Mini Cooper webpage has a very consistent design.]]
Web content must be consistent in both content and appearance. For example, if the website has a logo, make sure that it appears on all pages. The text on each page must also be consistent. This is best achieved through the use of a web style guide<ref name= "Lynch">Lynch and Horton "Web Style Guide"</ref>.


*The repetition of elements gives a site a consistent identity<ref name= "Carroll">Carroll, Brian. (2010). ''[http://www.scribd.com/doc/64429015/Writing-for-Digital-Media Writing for Digital Media]''. New York: Routledge.</ref>.
*The repetition of these elements give a site a consistent identity<ref>Carroll, 62</ref>:
**Colors.
**Colors.
**[http://litmuse.maconstate.edu/litwiki/index.php/Graphics Graphics].
**[[Photos|Graphics]].
**Headlines.
**Headlines.
**Typography.
**Typography.
Line 13: Line 20:
**Text placement.
**Text placement.


*Full [http://litmuse.maconstate.edu/litwiki/index.php/Contact contact information] on every page<ref name= "Carroll"></ref>.
*Include full [[Contact|contact information]] on every page<ref>Carroll, 28</ref>.


*Provide [http://litmuse.maconstate.edu/litwiki/index.php/Relevance_and_Support logical links] that pertain to the text<ref name= "Carroll"></ref>.
*Provide [[Relevance and Support|logical links]] that pertain to the text<ref>Carroll, 79</ref>.


*Adhere to an audience-specific style guide (HTML codes used and the grammatical format of text) throughout the site<ref name= "Carroll"></ref>.
*Adhere to an audience-specific style guide (HTML codes used and the grammatical format of text) throughout the site<ref>Carroll, 97, 111</ref><ref name= "Lynch"></ref>.


==Usability==
==Usability==
[[File:Highlight-link-text.jpg|thumb|alt=Hyperlinks|Example of links in text.]]
When viewers arrive at each website, and pages within that site, they will have to relearn how to use the site if the design and elements are different on each page. This is why having a constant design and easy navigation are necessary<ref name= "Horton">Horton "Page Layout"</ref>.


*Keep text scan-able<ref name= "Carroll"></ref>.
*Keep text [[Scanability|scan-able]]<ref>Carroll, 32</ref> in these ways:
**Highlight key words.
**Highlight key words.
**Use links.
**Use links.
Line 31: Line 40:
**Practice brevity.
**Practice brevity.


*Keep it simple and [http://litmuse.maconstate.edu/litwiki/index.php?title=Navigation_and_Usability user-friendly]. Break pages into clearly defined areas and minimize distractions<ref name= "Carroll"></ref>.  
*Keep it simple and [[Usability|user-friendly]]. Remember to K.I.S.S.<ref>"The Kiss Principle"</ref> Keep It Simple Stupid. One way to make web sites more simple is by breaking pages into clearly defined areas and minimizing distractions<ref>Carroll, 28, 69</ref>.  


*Include a visual hierarchy for information and navigation on each page<ref name= "Carroll"></ref>.
*Include a visual hierarchy for information and navigation on each page<ref>Carroll, 123</ref>.


*Fifty to eighty percent of the page should be reserved for content<ref name= "Carroll"></ref>.
*Fifty to eighty percent of the page should be reserved for content<ref>Carroll, 67</ref>.


==Navigability==
==Navigability==
[[File:87981.jpg|thumb|alt=Navigation bar|Examples of basic navigation bars.]]
Navigability is provided by tool bars, blog rolls, links, and navigation bars on the web site. Navigation is important so that users will not be lost on the web page, figuratively and literally.


*Easy-to-use navigation tools. A navigation bar is best utilized on the top of the website<ref name= "Horton">Horton, Sarah. (2006). [http://universalusability.com/access_by_design/page_layout/consistent.html Page Layout: Apply a consistent design]. Universal Usability.</ref>.
*Include easy-to-use navigation tools. A navigation bar is best utilized on the top of the website<ref>Carroll, 35</ref><ref name= "Horton"></ref>.


*Each web page must be able to stand alone<ref name= "Carroll"></ref>. Make sure that users know where they are in the site.
*Each web page must be able to stand alone<ref>Carroll, 57-58</ref>. Make sure that users know where they are in the site.


*Insert anchors (internal hyperlinks that lead to another page of the same site) for internal page navigation<ref name= "Carroll"></ref>.
*Insert anchors (internal hyperlinks that lead to another page of the same site) for internal page navigation<ref>Carroll, 48</ref>.


*Include consistent navigational aids. Each page needs to have easy access back to the main page<ref name= "Carroll"></ref>.
*Include consistent navigational aids. Each page needs to have easy access back to the main page<ref>Carroll, 60</ref>.


*Twenty percent of the internal web pages should be reserved for navigation<ref name= "Carroll"></ref>. Shortcuts to the main page should be included on every page.
*Twenty percent of the internal web pages should be reserved for navigation<ref>Carroll, 67</ref>. A shortcut to the main page should be included on every other page.


*The home page requires more navigational space<ref name= "Carroll"></ref> and has many purposes.
*The home page requires more navigational space<ref>Carroll, 70</ref>. The following are some of its purposes:
**Establishes the site’s identity and mission.
**Establishes the site’s identity and mission.
**Shows the site's hierarchy.
**Shows the site's hierarchy.
Line 56: Line 67:
**Avoids clutter.
**Avoids clutter.
**Conveys the big picture.
**Conveys the big picture.
==See Also==
*[http://litmuse.net/course/nmac/writing-for-digital-media-fall-2012 Writing for Digital Media]
*[http://litmuse.maconstate.edu/litwiki/index.php/Web_Based_Digital_Media_for_College_Writing_Students Web Based Digital Media for College Writing Students]
==Notes==
<references />


==References==
==References==


<references></references>
*Carroll, Brian. ''[http://www.scribd.com/doc/64429015/Writing-for-Digital-Media Writing for Digital Media]''. Routledge; New York, 2010.
*Horton, Sarah. [http://universalusability.com/access_by_design/page_layout/consistent.html Page Layout: Apply a consistent design]. Universal Usability, 2006.
*"[http://people.apache.org/~fhanik/kiss.html The Kiss Principle]." The Apache Software Foundation, 2012.
*Lynch, Patrick and Horton, Sarah. [http://webstyleguide.com/wsg3/index.html Web Style Guide 3rd Ed]. Webstyleguide.com, 2009.

Latest revision as of 10:08, 3 December 2012

Home Page

Web Design
Examples of webpage design.

Design is an important aspect to remember when writing for the screen. In digital writing, design pertains to the look of the website and arrangement of the text, graphics, and other objects that make up the site. Proper web design is the balance of visual sensation and graphic information[1].

The design of a site or webpage is what will likely cause viewers to return to the site and continue reading it, so the overall appearance must be appealing, functional, and entertaining. However, having bad web design will drive users away. Viewers will not stay on a web page that is visually confusing or assaulting with either too many graphics or too much text. This is why design is such an important factor of web writing.

There are three main components to understanding and implementing design: consistency, usability, and navigability.

Consistency

Error creating thumbnail: File missing
This Mini Cooper webpage has a very consistent design.

Web content must be consistent in both content and appearance. For example, if the website has a logo, make sure that it appears on all pages. The text on each page must also be consistent. This is best achieved through the use of a web style guide[2].

  • The repetition of these elements give a site a consistent identity[3]:
    • Colors.
    • Graphics.
    • Headlines.
    • Typography.
    • Section divisions.
    • Text placement.
  • Adhere to an audience-specific style guide (HTML codes used and the grammatical format of text) throughout the site[6][2].

Usability

Error creating thumbnail: File missing
Example of links in text.

When viewers arrive at each website, and pages within that site, they will have to relearn how to use the site if the design and elements are different on each page. This is why having a constant design and easy navigation are necessary[7].

  • Keep text scan-able[8] in these ways:
    • Highlight key words.
    • Use links.
    • Vary typeface.
    • Use colors.
    • Include subheadings.
    • Make bulleted lists.
    • Use paragraphs with one idea.
    • Practice brevity.
  • Keep it simple and user-friendly. Remember to K.I.S.S.[9] Keep It Simple Stupid. One way to make web sites more simple is by breaking pages into clearly defined areas and minimizing distractions[10].
  • Include a visual hierarchy for information and navigation on each page[11].
  • Fifty to eighty percent of the page should be reserved for content[12].

Navigability

Error creating thumbnail: File missing
Examples of basic navigation bars.

Navigability is provided by tool bars, blog rolls, links, and navigation bars on the web site. Navigation is important so that users will not be lost on the web page, figuratively and literally.

  • Include easy-to-use navigation tools. A navigation bar is best utilized on the top of the website[13][7].
  • Each web page must be able to stand alone[14]. Make sure that users know where they are in the site.
  • Insert anchors (internal hyperlinks that lead to another page of the same site) for internal page navigation[15].
  • Include consistent navigational aids. Each page needs to have easy access back to the main page[16].
  • Twenty percent of the internal web pages should be reserved for navigation[17]. A shortcut to the main page should be included on every other page.
  • The home page requires more navigational space[18]. The following are some of its purposes:
    • Establishes the site’s identity and mission.
    • Shows the site's hierarchy.
    • Shows where to start.
    • Provides shortcuts to the most desired pages and sections.
    • Avoids clutter.
    • Conveys the big picture.

See Also

Notes

  1. ↑ Lynch and Horton "Page Design"
  2. ↑ 2.0 2.1 Lynch and Horton "Web Style Guide"
  3. ↑ Carroll, 62
  4. ↑ Carroll, 28
  5. ↑ Carroll, 79
  6. ↑ Carroll, 97, 111
  7. ↑ 7.0 7.1 Horton "Page Layout"
  8. ↑ Carroll, 32
  9. ↑ "The Kiss Principle"
  10. ↑ Carroll, 28, 69
  11. ↑ Carroll, 123
  12. ↑ Carroll, 67
  13. ↑ Carroll, 35
  14. ↑ Carroll, 57-58
  15. ↑ Carroll, 48
  16. ↑ Carroll, 60
  17. ↑ Carroll, 67
  18. ↑ Carroll, 70

References

Retrieved from "https://litwiki.org/index.php?title=Design&oldid=11782"