Confirmed users
20
edits
Bugzilla:Pretty: Difference between revisions
Jump to navigation
Jump to search
→Jonathan Wilde
Speedbreeze (talk | contribs) |
Speedbreeze (talk | contribs) |
||
| Line 116: | Line 116: | ||
The fields at the top of the page are compressed using a Drupal-style tabbed container. The text below the title of each tab provides a summary of the values of the fields in the tab. | The fields at the top of the page are compressed using a Drupal-style tabbed container. The text below the title of each tab provides a summary of the values of the fields in the tab. | ||
The design is intended to be both visually lightweight and, after implementation, lightweight in terms of page size. The design should be easily implementable using CSS3's gradients, border-radius, text-shadow, and box-shadow for the special-effects. It will probably still look decent in browsers where these features aren't available. | The design is intended to be both visually lightweight and, after implementation, lightweight in terms of page size. The design should be easily implementable using CSS3's gradients, border-radius, text-shadow, and box-shadow for the special-effects. It will probably still look decent in browsers where these features aren't available. | ||
The | The mockup is typeset in Nobile, which is available for CSS @font-face embedding. While I am fond of that typeface, Verdana can be easily substituted to cut down on loading time. | ||
Implementation of the design entails a few background images for the faint texture on the search box and gradient backgrounds, but it can still hold together with plain CSS3 gradients instead. The gear, search, and down-triangle icons--which can't easily be reproduced with special characters in HTML can be easily sprited into a single, small image. | |||
If you have any questions about the design, feel free to contact me. My email address is in the bottom right corners of the design note images below. | |||
'''Note #1: Extraneous Element Hiding''' | |||
[[File:JWilde-BugzillaPretty-HidingDetail-27-2-2011.png|thumb|none]] | [[File:JWilde-BugzillaPretty-HidingDetail-27-2-2011.png|thumb|none]] | ||
This note shows how to simplify the design and reduce clutter even more. | This note shows how to simplify the design and reduce clutter even more. | ||
'''Note #2: Navigation Bar Interaction''' | |||
[[File:JWilde-BugzillaPretty-NavBar-27-2-2011.png|thumb|none]] | |||
This note shows the interactive aspects of interaction with the navigation bar. | |||