Web Design Process
In designing your own web site, use sites such as Template Monster to study strong web site design. Analyze and deconstruct their visual techniques, placement and style of logo, approach to the navigational bar, and where images and text go. Note their colour scheme and thematic approach.
Defining the site’s goals:
• An understanding of the audience you’re trying to reach and the message you want the audience to understand.
Defining the site’s goals:
• Creative Brief: Signed off by managers who need to approve the design. It ensures everyone involved has the same expectations and it helps to inform decisions as the site develops.
Structures
• LINEAR: like a book, the main introductory page is followed sequentially by page 1, 2, 3, etc. Good for tutorials, tours, etc.
• Navigation links should allow users to go back, next, and home. Still make each page stand alone for random surfers.
• HIERARCHICAL: A main introductory page serves as an index to lead users down different paths, say topics 1, 2, and 3.
• Each main topic page may lead to sub-pages with more and more detail.
• User follows paths as deep or shallow as they want before returning to the index.
• The hierarchical structure is like a film: The plot is your message; the zoom level is how detailed it is: a long shot provides an overview or basic information, a close-up provides specific details.
Navigation graphics:
• Buttons to help users get around your site
• The navigation graphics are a part of the site’s identity. They’re not purely for information.
• Keep them simple.
• A hallmark of good interface is that it uses metaphor, location on screen, shape, colour, sound and every other cue consistently, reassuring visitors that their efforts will be rewarded.
• Javascript creates an interactive effect: rolling the mouse over a graphic displays the name of the section the graphic links to.
• Javascript can also create rollover buttons, changing the colour of a navigational button indicating that it is an active link
Using a template:
• assures a visual consistency for your site
• simplifies page creation and maintenance
Specifying Layout with Style Sheets
• Cascading style sheets (CSS) began with HTML 3.2
• Works much like styles sheets used in popular word processing and page layout programs
Making a Grid:
• Here's where the logo or title goes
• Each page has an intro paragraph here
• Lay out the main info. this way
• Fit in rules, bullets and other separating elements like this
• Here's where email links, special info copyright notice and navigation bars
Main or home page:
• 'Main' pages may have a slightly different layout (larger logo/title, less text, etc.) than 'branch' pages, but the designs are congruent.
• Like the cover of a book or magazine, its primary role is to state your message loud and clear
• The front page is your 1st chance. This is where people have to decide whether they want to use your site or not.
Some models mimic magazine covers or newspaper layouts (information publishing sites).
• Decide on length of pages (fit on screen or scrolling?)
• Use lots of white space
• Keep text simple (use a sans serif such as Arial, Verdana or Trebuchet)
• Body copy size should be “9-11 pt.”
• Use Photoshop images for special fonts
• Use graphics to set off important ideas
• Recast paragraphs as lists or tables
• Dividers: Either use a rule or design a graphic rule to set off bite-sized sections of your page.
• Place 'logo' on site consistently. On main page use a large version as part of a title banner across the top. On 'sub-pages', use a smaller version.
Background:
• A white background increases legibility and makes the page elements stand out.
• Colored and patterned backgrounds can enhance a mood; just don't sacrifice readability.
Width and Height of Web Page
It used to be the rule to design for 640 x 480 monitors, which can have a readable browser area of as little as 600x305, but because of improved resolution of computer screens, you can make the width at least 800 x 500
In designing your own web site, use sites such as Template Monster to study strong web site design. Analyze and deconstruct their visual techniques, placement and style of logo, approach to the navigational bar, and where images and text go. Note their colour scheme and thematic approach.
Defining the site’s goals:
• An understanding of the audience you’re trying to reach and the message you want the audience to understand.
Defining the site’s goals:
• Creative Brief: Signed off by managers who need to approve the design. It ensures everyone involved has the same expectations and it helps to inform decisions as the site develops.
Structures
• LINEAR: like a book, the main introductory page is followed sequentially by page 1, 2, 3, etc. Good for tutorials, tours, etc.
• Navigation links should allow users to go back, next, and home. Still make each page stand alone for random surfers.
• HIERARCHICAL: A main introductory page serves as an index to lead users down different paths, say topics 1, 2, and 3.
• Each main topic page may lead to sub-pages with more and more detail.
• User follows paths as deep or shallow as they want before returning to the index.
• The hierarchical structure is like a film: The plot is your message; the zoom level is how detailed it is: a long shot provides an overview or basic information, a close-up provides specific details.
Navigation graphics:
• Buttons to help users get around your site
• The navigation graphics are a part of the site’s identity. They’re not purely for information.
• Keep them simple.
• A hallmark of good interface is that it uses metaphor, location on screen, shape, colour, sound and every other cue consistently, reassuring visitors that their efforts will be rewarded.
• Javascript creates an interactive effect: rolling the mouse over a graphic displays the name of the section the graphic links to.
• Javascript can also create rollover buttons, changing the colour of a navigational button indicating that it is an active link
Using a template:
• assures a visual consistency for your site
• simplifies page creation and maintenance
Specifying Layout with Style Sheets
• Cascading style sheets (CSS) began with HTML 3.2
• Works much like styles sheets used in popular word processing and page layout programs
Making a Grid:
• Here's where the logo or title goes
• Each page has an intro paragraph here
• Lay out the main info. this way
• Fit in rules, bullets and other separating elements like this
• Here's where email links, special info copyright notice and navigation bars
Main or home page:
• 'Main' pages may have a slightly different layout (larger logo/title, less text, etc.) than 'branch' pages, but the designs are congruent.
• Like the cover of a book or magazine, its primary role is to state your message loud and clear
• The front page is your 1st chance. This is where people have to decide whether they want to use your site or not.
Some models mimic magazine covers or newspaper layouts (information publishing sites).
• Decide on length of pages (fit on screen or scrolling?)
• Use lots of white space
• Keep text simple (use a sans serif such as Arial, Verdana or Trebuchet)
• Body copy size should be “9-11 pt.”
• Use Photoshop images for special fonts
• Use graphics to set off important ideas
• Recast paragraphs as lists or tables
• Dividers: Either use a rule or design a graphic rule to set off bite-sized sections of your page.
• Place 'logo' on site consistently. On main page use a large version as part of a title banner across the top. On 'sub-pages', use a smaller version.
Background:
• A white background increases legibility and makes the page elements stand out.
• Colored and patterned backgrounds can enhance a mood; just don't sacrifice readability.
Width and Height of Web Page
It used to be the rule to design for 640 x 480 monitors, which can have a readable browser area of as little as 600x305, but because of improved resolution of computer screens, you can make the width at least 800 x 500
posted by MJ at 2:14 PM
0 Comments:
Post a Comment
<< Home