At Forum One we are always attempting new ways of delivering better looking web sites more quickly and within the budget. One of the techniques that we grown fond of and have incorporated into our process for most projects is creating what we call a hybrid page. A hybrid page contains text and visual elements such as H1 tags and buttons that can be used on many pages through out a web site. These elements are provided from the visual design in a comp that is consistent with the web site existing grid layout. View the hybrid page we developed for Forum One's web site redesign.
While the visual elements such as buttons, photo sizes, and field style are certainly important, we've found that one of the most helpful elements is simply listing out all of the different text elements that you will need from H1-headers to bulleted lists. Below you will find the styles that we used on Forum One's web site.
Ordered list
Numbered
- List item 1
- List item 2
- List item 3
- List item 4
Numbered Special Start
- List item 1
- List item 2
- List item 3
- List item 4
Unordered list
Example 1:
- List item 1
- List item 2
Example 2:
- List item 1
- List item 2
- List item 3
- List item 4
Blockquote:
Here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation.
Headers
Header 1
Header 2
Header 3
Header 4
Body
Legal size text
Tables
Example 1:
| Column 1 | Column 2 |
Example 2:
| Column 1 | Column 2 |
Example 3:
| Column 1 | Column 2 |
| Row 2 | Row 2 |
Paragraph and alignment
This is an example displaying the use of the paragraph tag.
This will create a line break and a space between lines.
Attributes:
Example 1 (Left align):
This is an example
displaying the use
of the paragraph tag.
Example 2 (Right align):
This is an example
displaying the use
of the paragraph tag.
Example 3 (Center):
This is an example
displaying the use
of the paragraph tag.
Font styles
Bold
Italics
Strike
Small
Big
Horizontal Rules
Default:
Hyperlinks
Static Link
Anchor to top of this page
Senior Information Architect
Brian grew up on land that used to be part of his grandfather's dairy farm and spent hours exploring the outdoors. That kind of roaming and curiosity is a great foundation for an information...
Comments
Nice idea
Like what you've done here BV
Very Nice
Nice, quick information & article. Just read an article on 24ways regarding high-fidelity wireframes and mockups - Make your mockup in markup - something like that? Well done.
Post new comment