Web Outline Standards.

Uploaded on:
Web Outline Standards Joan Naturale NTID Reference Curator Web Plan Standards
Slide 1

Web Design Principles Joan Naturale NTID Reference Librarian

Slide 2

Web Design Principles Set configuration for landing page at 640 x 460 pixel rectangular zone (standard program window size). Consider outlining immeasurably critical components inside of this rectangular space zone. The page is more extensive than it is tall which is not quite the same as a book page plan. Keep plan basic, clear and clean Make great utilization of realistic components to separate expansive content regions

Slide 3

Web Design Principles Put credits, dates and insignificant points of interest at the base of your page No looking over sideways or down to get to the route region You need people to visit your website. Put joins on a different page or at the base of your page Avoid messing up the page with an excessive amount of content or an excess of illustrations Align all components appropriately

Slide 4

Web Design Principles If there are a great deal of representation, make an option message just page Every page appears as though it has a place there with the utilization of monotonous components Avoid the utilization of a “splash” page. Guests would prefer not to waste time Page ought to look great on most programs. Sneak peak pages utilizing distinctive programs

Slide 5

Web Design Principles Include contact data, particularly an e.mail address. You might likewise incorporate your institution’s address, telephone and/or fax number(s) and/or an input structure If there is a great deal of substance, split it up into isolated pages. You can likewise utilize headings and stays Do not utilize more than 2 or 3 representation on a page Do not embed an excess of flat guidelines or bars over your page

Slide 6

Web Page Examples http://trfn.clpgh.org/About/terrible/badexample4.html http://trfn.clpgh.org/About/trfnfaq.shtml http://www.ocf.berkeley.edu/~chenj/brucelee/brucelee.html

Slide 7

Focal Point On Web Pages You need something that attracts your eye and pulls you to the page Focal point is generally a logo or picture and it’s the commanding outline. Serves to make a chain of command of data Logo content size is typically the greatest so make other content headings littler in size. In the event that it’s a picture, diminish every single other picture in size. Try not to utilize huge route catches as the main wellspring of interest Create contrast in logo outline by utilizing diverse sort (intense, size, style, shading)

Slide 8

Navigation Design Buttons and bars are straightforward and utilization. The guest recognizes what page they are going to and where they are going Consistent route outline on all pages Avoid route pictures where you need to move your mouse over it to peruse the connections If your webpage is huge, consider a website or file map

Slide 9

Navigation Web Page Examples http://www.sarahmclachlan.com/index2.html http://www.potlatchpaper.com/http://www.michaeldouglas.com/html/html/michael_douglas.html

Slide 10

Frames Design Avoid utilizing edges until you turn out to be more gifted at web plan If you utilize them, keep them inconspicuous. Don’t utilization fringes Do not utilize different edges or numerous looking over bars Do not utilize muddled casings Avoid outlines that make you scroll sideways

Slide 11

Frames Design Frames are utilized as navigational guides Use tables rather than casings Can utilize outlines for thumbnail pictures portfolios

Slide 12

Frame Web Page Examples http://www.signenhancers.com/http://www.joelnakamura.com/http://wally.rit.edu/javawally/

Slide 13

Background Design Use a foundation shading that diverges from the content and illustrations Use program safe hues Do not utilize caught up with, diverting, or odd foundations. Foundations should upgrade your content and representation. Foundations are subtle and are not central focuses Do not utilize the default dark shading Avoid dark foundations. Dark foundations are suitable for recognition destinations or for gifted web architects

Slide 14

Background Web Page Examples http://www.users.nac.net/falken/irritating/backgrounds.html http://www.users.nac.net/falken/irritating/static_bg.htm http://members.tripod.com/~jamwired/bwd2.htm

Slide 15

Text Design Principles Text size ought not be littler than 10 point. Try not to ITALICIZE little content Text size ought not be greater than 14 point. It’s difficult to peruse entire expressions at once and it looks unsophisticated Use content shading that stands out from the foundation Do not compose content over the screen. Separation your content into sections. Close to 8-10 words Sans-serif content is less demanding to peruse on the screen however serif content is less demanding to peruse in print. Arial and Verdana are great sans serif textual styles

Slide 16

Text Design Principles Avoid utilizing an alternate shading for every letter Limit content hues to 2 or 3. Try not to utilize more than 2 sort textual style styles Align content on the left, not right. It’s difficult to peruse right adjusted content Avoid focused content as every line begins in a better place and makes it difficult to peruse

Slide 17

Text Design Principles Avoid content swarming against the left edge of the page If you have to change content outline, change the sort textual style, not estimate. Maintain a strategic distance from all CAPS, BOLD or ITALIC content. Utilize these to underscore words. Don’t’ utilize these in passages Do not underline content if it’s not a connection Use the spell-checker for spelling mistakes

Slide 18

Text Web Page Examples http://trfn.clpgh.org/About/terrible/badexample2.html http://www.infovillage.com/PatronSaints/McLuhan.html

Slide 19

Links Design Underline joins unless the connections are a conspicuous differentiating shading Avoid “click here” joins. Connections ought to be clear where they will take the guest Avoid joins that occupy perusers and take them to futile pages Check interfaces regularly

Slide 20

Links Design Links ought to organize with the content and foundation shading. Keep away from the blue default shading Use not utilize structure catches as connections

Slide 21

Links Web Page Examples http://www.users.nac.net/falken/irritating/links.html http://wally.rit.edu/guideline/tree.html

Slide 22

Table Design Principles Graphics, content and connections can be placed in tables for a neater impact If you have numerous connections, think about utilizing as a table Tables can be utilized as sidebars Tables are superior to anything casings particularly on the off chance that you are a starting web planner Put distinctive hues in cells for outskirts

Slide 23

Table and Column Web Page Examples http://wally.rit.edu/data/information.html http://wally.rit.edu/depts/ref/direction/instructional exercise/engines.html

Slide 24

Alignment Design Principles All things ought to be adjusted to one another, particularly features and content Choose one arrangement and stick with it (all left, good, focused). Try not to blend arrangements Left or right arrangement looks more refined Links inside catches or tables ought to be on same benchmark for a neater and more sorted out appearance

Slide 25

Spacing and Proximity Principles Cluster related things together. Assembled things are less demanding to peruse Headlines or subheads ought to be near the content it has a place with. Continue separating steady between components. Use striking or distinctive text style for headings Paragraphs. Utilize either a space between them or indents. Try not to utilize both Good utilization of separating makes a brought together, sorted out design with clear connections between components Keep segments short. Try not to compel perusers to look here and there to the following section.

Slide 26

Repetition Design Principles Repeat components that tie the greater part of your website pages to bring together your webpage Use predictable route, catches, hues, content, design, arrangement and typography all through your pages Use hues from sidebar and logo for headings or critical words

Slide 27

Web Page Examples http://www.puebloharvest.com/http://www.sarahlovett.com/

Slide 28

Graphic Design Principles Buttons are little and utilized for connections, not enrichment Have ALT labels for visually impaired and content based program clients Keep realistic size little and utilization stature/width pixel labels for speedier downloading Graphics identify with your pages. Don’t use pointless representation

Slide 29

Graphic Design Principles If you utilize illustrations as connections, make content connections Avoid utilizing boxes around representation Consider utilizing thumbnail pictures and a Javascript connection to see the entire picture Save JPEG (photograph pictures) to most minimal quality/most noteworthy pressure

Slide 30

Graphics Design Principles Right or left adjusted design are not more extensive than 400 pixels Avoid utilization of Flash Avoid “missing” representation Avoid utilizing representation as content. Consumes up room and internet searchers can’t look illustrations for content

Slide 31

Graphic Web Page Examples http://trfn.clpgh.org/About/terrible/badexample6.html http://trfn.clpgh.org/About/awful/goodexample6.html

Slide 32

Flash Web Example http://www.users.nac.net/falken/irritating/flash.htm

Slide 33

Junk On Web Pages Spinning logos 3D logo representation Blinking content or pictures Rainbow, enlivened or flickering principles Scrolling content

Slide 34

Junk on Web Pages E.mail movement Running activity that never stops “Under Construction” signs Counters Advertising (separate page) Awards (separate page)

Slide 35

Junk On Web Pages Cute pictures like smiley confronts Guestbooks Pop - Up window promotions Plug-Ins. On the off chance that you site page obliges modules, make option pages for the individuals who don’t have the modules and don’t need to download them Specifying program, pixel width, text dimension and sort default keeping in mind the end goal to view pages

Slide 36

Animated GIFs Web Page Example http://www.users.nac.net/falken/irritating/ani_gif.html

Slide 37

Bars Web Page Example http://www.users.nac.net/falken/irritating/bars.html

Slide 38

Java Web Page Examples Fade In http://www.users.nac.net/falken/irritating/java/fade.html Java Cube http://www.montcopa.org/da/cube.htm

Slide 39

Counter Web Example http://www.users.nac.net/falken/irritating/counters.htm

Slide 40

Browser Specifications Example http://www.users.nac.net/falken/irritating/browspec.htm

Slide 41

Bad Web Pages Examples http://www.artcenter .edu/http://trfn.clpgh.org/About/awful/badquiz.html

Slide 42

Good Web Pages Examples http

View more...